126 lines
2.9 KiB
HTML
126 lines
2.9 KiB
HTML
{% 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 %}
|