initial commit

templates/service_detail.html

@@ -0,0 +1,125 @@
+{% extends '_base.html' %} {% block styles %}
+<style>
+  h1 {
+    margin-bottom: 20px;
+  }
+  #details {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+  .service-detail,
+  .service-status {
+    display: flex;
+    width: var(--lfw);
+    justify-content: flex-end;
+    align-items: flex-end;
+    text-align: right;
+    vertical-align: bottom;
+    background-color: var(--panel-1-color);
+    min-height: clamp(60px, 10vw, 120px);
+    overflow: hidden;
+    padding: var(--left-frame-padding);
+    border-radius: 0;
+    border-bottom: var(--panel-border);
+    text-decoration: none;
+    color: black;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  .service-status {
+    font-size: 1.5em;
+    font-weight: bold;
+  }
+</style>
+{% endblock %} {% block content %}
+<h1>
+  Host {{ service.extensions.host_name }} - {{ service.extensions.description }}
+  Details
+</h1>
+<div id="details">
+  <div class="service-status">Status: {{ service.extensions.state }}</div>
+  <div class="service-detail">
+    Last Check: {{ service.extensions.last_check }}
+  </div>
+</div>
+<script>
+  function getServiceStateText(state) {
+    switch (state) {
+      case 0:
+        return "OK";
+      case 1:
+        return "WARNING";
+      case 2:
+        return "CRITICAL";
+      case 3:
+        return "UNKNOWN";
+      default:
+        return "N/A";
+    }
+  }
+
+  function getServiceStateClass(state) {
+    switch (state) {
+      case 0:
+        return "service-ok";
+      case 1:
+        return "service-warning";
+      case 2:
+        return "service-critical";
+      case 3:
+        return "service-unknown";
+      default:
+        return "service-na";
+    }
+  }
+
+  function getServiceStateColor(state) {
+    switch (state) {
+      case 0:
+        return "var(--green)";
+      case 1:
+        return "var(--yellow)";
+      case 2:
+        return "var(--red)";
+      case 3:
+        return "var(--orange)";
+      default:
+        return "var(--gray)";
+    }
+  }
+
+  document.addEventListener("DOMContentLoaded", function () {
+    var statusDiv = document.querySelector(".service-status");
+    var state = {{ service.extensions.state }};
+    statusDiv.textContent = "Status: " + getServiceStateText(state);
+    statusDiv.classList.add(getServiceStateClass(state));
+    statusDiv.style.backgroundColor = getServiceStateColor(state);
+  });
+
+  let service = {
+    links: [
+      {
+        domainType: "link",
+        rel: "self",
+        href: "http://192.168.88.91/monitoring/check_mk/api/1.0/objects/service/pve-TCP%2520Connections",
+        method: "GET",
+        type: "application/json",
+      },
+    ],
+    domainType: "service",
+    id: "pve-TCP Connections",
+    title: "Service TCP Connections",
+    members: {},
+    extensions: {
+      host_name: "pve",
+      description: "TCP Connections",
+      state: 0,
+      state_type: 1,
+      last_check: 1757963587,
+    },
+  };
+</script>
+{% endblock %}