prometheus: modernize console + alerts

Signed-off-by: Robert Günzler <r@gnzler.io>

1 files changed, 33 insertions, 46 deletions

diff --git a/bundles/prometheus/files/console_libraries/menu.lib b/bundles/prometheus/files/console_libraries/menu.lib
index dc87f9f..d9e4baf 100644
--- a/bundles/prometheus/files/console_libraries/menu.lib
+++ b/bundles/prometheus/files/console_libraries/menu.lib
@@ -1,64 +1,51 @@
-{{/* vim: set ft=html: */}}
+{{/* vim: set ft=gotmpl: */}}
 
 {{/* Navbar, should be passed . */}}
 {{ define "navbar" }}
-<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark">
-  <div class="container-fluid">
-    <!-- Brand and toggle get grouped for better mobile display -->
-    <div class="navbar-header">
-      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
-        aria-expanded="false" aria-controls="navbar-nav" aria-label="toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <a class="navbar-brand" href="{{ pathPrefix }}/">Prometheus</a>
-    </div>
-
-    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-      <ul class="nav navbar-nav">
-        <li class="nav-item"><a class="nav-link" href="{{ pathPrefix }}/alerts">Alerts</a></li>
-      </ul>
-    </div>
+<nav class="navbar sticky-top navbar-expand-sm navbar-dark bg-dark">
+  <!-- Brand and toggle get grouped for better mobile display -->
+  <div class="navbar-header">
+    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" aria-controls="navbar-nav" aria-label="toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <a class="navbar-brand" href="{{ pathPrefix }}/">Prometheus</a>
+  </div>
+  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+    <ul class="nav navbar-nav">
+      <li class="nav-item"><a class="nav-link" href="{{ pathPrefix }}/alerts">Alerts</a></li>
+      <li class="nav-item"><a class="nav-link" href="{{ pathPrefix }}/graph">Graph</a></li>
+      <li class="nav-item"><a class="nav-link" href="{{ pathPrefix }}/targets">Targets</a></li>
+    </ul>
   </div>
 </nav>
 {{ end }}
 
 {{/* LHS menu, should be passed . */}}
 {{ define "menu" }}
-<div class="prom_lhs_menu row">
-  <nav class="col-md-2 md-block bg-dark sidebar prom_lhs_menu_nav">
-    <div class="sidebar-sticky">
-      <ul class="nav flex-column">
-
-        {{ template "_menuItem" (args . "index.html" "Overview") }}
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb rounded-0">
+    {{ template "_menuItem" (args . "index.html" "overview") }}
 
-        {{ $ctx := . }}
+    {{ $ctx := . }}
 
-        {{ range query "up{job='node-exporter'}" | sortByLabel "instance" }}
-        {{ $instance := .Labels.instance }}
-        <ul>
-          {{ template "_menuItem" (args $ctx (printf "node-overview.html?instance=%v" $instance) $instance) }}
-          <ul>
-            {{ template "_menuItem" (args $ctx (printf "node-cpu.html?instance=%v" $instance) "CPU") }}
-            {{ template "_menuItem" (args $ctx (printf "node-disk.html?instance=%v" $instance) "Disk") }}
-          </ul>
-        </ul>
-        {{ end }}
-
-        {{/* XXX: there is only one prometheus instance in my setup */}}
-        {{ with query "up{job='prometheus'}" | first }}
-        {{ template "_menuItem" (args $ctx (printf "prometheus-overview.html?instance=%v" .Labels.instance) "Prometheus") }}
-        {{ end }}
-
-      </ul>
-    </div>
-  </nav>
-</div>
+    {{ template "_menuItem" (args $ctx "node.html?instance=inazuma" "inazuma") }}
+    {{ template "_menuItem" (args $ctx "node.html?instance=shimakaze" "shimakaze") }}
+    {{ template "_menuItem" (args $ctx "prom.html?instance=inazuma" "prometheus") }}
+  </ol>
+</nav>
 {{ end }}
 
 {{/* Helper, pass (args . path name) */}}
 {{ define "_menuItem" }}
 {{ $pagelink := .arg0.Path }}
 {{ if .arg0.Params.instance }}{{ $pagelink = (printf "%v?instance=%v" .arg0.Path .arg0.Params.instance) }}{{ end }}
-<li class="{{ if eq $pagelink .arg1 }}prom_lhs_menu_selected {{ end }}nav-item"><a class="nav-link"
-    href="{{ .arg1 }}">{{ .arg2 }}</a></li>
+<li class="breadcrumb-item{{ if eq $pagelink .arg1 }} active{{ end }} text-lowercase">
+  <a href="{{ .arg1 }}">
+    {{ if eq .arg2 "overview" }}
+    <i class="bi bi-grid-3x3-gap-fill" title="{{ .arg2 }}"></i>
+    {{ else }}
+    {{ .arg2 }}
+    {{ end }}
+  </a>
+</li>
 {{ end }}