initial commit

templates/host_detail.html

@@ -0,0 +1,88 @@
+{% extends '_base.html' %} {% block styles %}
+<style>
+  #services {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+  .service {
+    font-size: 1.2em;
+    display: flex;
+    flex-direction: column;
+  }
+  .service-link {
+    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;
+  }
+  .if {
+    background-color: var(--orange);
+  }
+  .fs {
+    background-color: var(--blue);
+  }
+  .cmk {
+    background-color: var(--green);
+  }
+  .pve {
+    background-color: var(--lilac);
+  }
+</style>
+{% endblock %} {% block content %}
+<h2>Services for {{ hostname }}</h2>
+<div id="services">
+  {% for svc in services %}
+  <div class="service">
+    {% if svc.links %} {% for l in svc.links %} {% set classString =
+    'service-link' %} {% if 'Interface' in svc.extensions.description %} {% set
+    classString = classString + ' if' %} {% elif 'Filesystem' in
+    svc.extensions.description %} {% set classString = classString + ' fs' %} {%
+    elif 'Check_MK' in svc.extensions.description %} {% set classString =
+    classString + ' cmk' %} {% elif 'PVE' in svc.extensions.description %} {%
+    set classString = classString + ' pve' %} {% endif %}
+    <button class="{{ classString }}" data-link="{{ l.href }}">
+      {{ svc.extensions.description }}
+    </button>
+    {% endfor %} {% else %}
+    <span class="service-label"
+      >{{ svc.service_description or svc.title or svc.description or svc.name
+      }}</span
+    >
+    {% endif %}
+  </div>
+  {% endfor %}
+</div>
+<script>
+  function playSound(audioId) {
+    var audio = document.getElementById(audioId);
+    audio.play();
+  }
+
+  function serviceClick(event) {
+    event.preventDefault();
+    playSound("audio1");
+    let url = event.currentTarget.getAttribute("data-link");
+    let target = "/service/" + encodeURIComponent(url);
+    window.location.href = target;
+  }
+
+  document.querySelectorAll(".service-link").forEach(function (el) {
+    el.addEventListener("click", serviceClick);
+  });
+</script>
+{% endblock %}