prometheus: modernize console + alerts

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

2 files changed, 135 insertions, 134 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 }}
diff --git a/bundles/prometheus/files/console_libraries/prom.lib b/bundles/prometheus/files/console_libraries/prom.lib
index f934d43..c00bb6b 100644
--- a/bundles/prometheus/files/console_libraries/prom.lib
+++ b/bundles/prometheus/files/console_libraries/prom.lib
@@ -1,35 +1,76 @@
-{{/* vim: set ft=html: */}}
+{{/* vim: set ft=gotmpl: */}}
 {{/* Load Prometheus console library JS/CSS. Should go in head */}}
 
 {{ define "prom_console_head" }}
-<link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/classic/static/vendor/rickshaw/rickshaw.min.css">
-<link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/classic/static/vendor/bootstrap-4.5.2/css/bootstrap.min.css">
-<link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/classic/static/css/prom_console.css">
-<link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/classic/static/vendor/bootstrap4-glyphicons/css/bootstrap-glyphicons.min.css">
-<script src="{{ pathPrefix }}/classic/static/vendor/rickshaw/vendor/d3.v3.js"></script>
-<script src="{{ pathPrefix }}/classic/static/vendor/rickshaw/vendor/d3.layout.min.js"></script>
-<script src="{{ pathPrefix }}/classic/static/vendor/rickshaw/rickshaw.min.js"></script>
-<script src="{{ pathPrefix }}/classic/static/vendor/js/jquery-3.5.1.min.js"></script>
-<script src="{{ pathPrefix }}/classic/static/vendor/js/popper.min.js"></script>
-<script src="{{ pathPrefix }}/classic/static/vendor/bootstrap-4.5.2/js/bootstrap.min.js"></script>
-
+<meta name="viewport" content="width=device-width,initial-scale=1.0">
+<meta name="title" content="Prometheus &mdash; Console">
+<title>Prometheus &mdash; Console</title>
+<!-- rickshaw -->
+<script src="https://unpkg.com/rickshaw@1.7.1/vendor/d3.v3.js"></script>
+<script src="https://unpkg.com/rickshaw@1.7.1/vendor/d3.layout.min.js"></script>
+<link type="text/css" rel="stylesheet" href="https://unpkg.com/rickshaw@1.7.1/rickshaw.min.css">
+<script src="https://unpkg.com/rickshaw@1.7.1/rickshaw.min.js"></script>
+<!-- bootstrap -->
+<script src="https://unpkg.com/jquery@3.5.1/dist/jquery.min.js"></script>
+<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.2/dist/css/bootstrap.min.css">
+<script src="https://unpkg.com/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
+<!-- icons -->
+<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
+<!-- user assets -->
+<link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/user/prom_console.css">
+<script src="{{ pathPrefix }}/user/prom_console.js"></script>
+<style type="text/css">
+  body {
+    background-color: #191d21 !important;
+    color: #fff !important;
+  }
+  .navbar {
+    margin-bottom: unset !important;
+    padding-left: 15px !important;
+    padding-right: 15px !important;
+  }
+  .prom_console_content {
+    padding-top: unset !important;
+    margin-bottom: unset !important;
+  }
+  .prom_content_div {
+    width: unset !important;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 15px;
+  }
+  @media (max-width: 768px) {
+    .prom_content_div {
+      grid-template-columns: 1fr;
+    }
+  }
+  .prom_content_div > div {
+    padding: 10px;
+    border: 1px solid var(--gray);
+  }
+  .prom_content_div * {
+    background-color: var(--light) !important;
+    color: var(--dark) !important;
+  }
+  .prom_graph_table {
+    overflow: hidden;
+  }
+</style>
 <script>
-var PATH_PREFIX = "{{ pathPrefix }}";
+  var PATH_PREFIX = "{{ pathPrefix }}";
 </script>
-<script src="{{ pathPrefix }}/classic/static/js/prom_console.js"></script>
 {{ end }}
 
 {{/* Top of all pages. */}}
 {{ define "head" -}}
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-{{ template "prom_console_head" }}
-</head>
-<body>
-{{ template "navbar" . }}
-
-{{ template "menu" . }}
+  <head>
+    {{ template "prom_console_head" }}
+  </head>
+  <body>
+    {{ template "navbar" . }}
+    {{ template "menu" . }}
 {{ end }}
 
 {{ define "__prom_query_drilldown_noop" }}{{ . }}{{ end }}
@@ -49,91 +90,64 @@ renderTemplate is the name of the template to use to render the value.
 */}}
 {{ define "prom_query_drilldown" }}
 {{ $expr := .arg0 }}{{ $suffix := (or .arg1 "") }}{{ $renderTemplate := (or .arg2 "__prom_query_drilldown_noop") }}
-<a class="prom_query_drilldown" href="{{ pathPrefix }}{{ graphLink $expr }}">{{ with query $expr }}{{tmpl $renderTemplate ( . | first | value )}}{{ $suffix }}{{ else }}-{{ end }}</a>
+<a class="prom_query_drilldown" href="{{ pathPrefix }}{{ graphLink $expr }}"> {{ with query $expr }}{{tmpl $renderTemplate ( . | first | value )}}{{ $suffix }}{{ else }}-{{ end }}</a>
 {{ end }}
 
 {{ define "prom_path" }}/consoles/{{ .Path }}?{{ range $param, $value := .Params }}{{ $param }}={{ $value }}&amp;{{ end }}{{ end }}"
 
-{{ define "prom_right_table_head" }}
-<div class="prom_console_rhs">
-<table class="table table-bordered table-hover table-sm">
-{{ end }}
-{{ define "prom_right_table_tail" }}
-</table>
-</div>
-{{ end }}
-
-{{/* RHS table head, pass job name. Should be used after prom_right_table_head. */}}
-{{ define "prom_right_table_job_head" }}
-<tr>
-  <th>{{  .  }}</th>
-  <th>{{  template "prom_query_drilldown" (args (printf "sum(up{job='%s'})" .))  }} / {{ template "prom_query_drilldown" (args (printf "count(up{job='%s'})" .)) }}</th>
-</tr>
-<tr>
-  <td>CPU</td>
-  <td>{{  template "prom_query_drilldown" (args (printf "avg by(job)(irate(process_cpu_seconds_total{job='%s'}[5m]))" .) "s/s" "humanizeNoSmallPrefix") }}</td>
-</tr>
-<tr>
-  <td>Memory</td>
-  <td>{{  template "prom_query_drilldown" (args (printf "avg by(job)(process_resident_memory_bytes{job='%s'})" .) "B" "humanize1024") }}</td>
-</tr>
-{{ end }}
-
-
 {{ define "prom_content_head" }}
-<div class="prom_console_content">
-  <div class="container-fluid">
-{{ template "prom_graph_timecontrol" . }}
+    <div class="prom_console_content">
+      {{ template "prom_graph_timecontrol" . }}
 {{ end }}
 {{ define "prom_content_tail" }}
-  </div>
-</div>
+    </div>
 {{ end }}
 
 {{ define "prom_graph_timecontrol" }}
-<div class="prom_graph_timecontrol">
-  <div class="prom_graph_timecontrol_inner">
-    <div class="prom_graph_timecontrol_group ">
-      <button class="btn btn-light pull-left" type="button" id="prom_graph_duration_shrink" title="Shrink the time range.">
-        <i class="glyphicon glyphicon-minus"></i>
-      </button><!-- Comments between elements to remove spaces
+    <div class="prom_graph_timecontrol">
+      <div class="prom_graph_timecontrol_inner">
+        <div class="prom_graph_timecontrol_group ">
+          <button class="btn btn-light pull-left" type="button" id="prom_graph_duration_shrink" title="Shrink the time range.">
+            <i class="bi bi-dash-lg"></i>
+          </button><!-- Comments between elements to remove spaces
    --><input class="input pull-left align-middle" size="3" title="Time range of graph" type="text" id="prom_graph_duration"><!--
    --><button class="btn btn-light pull-left" type="button" id="prom_graph_duration_grow" title="Grow the time range.">
-        <i class="glyphicon glyphicon-plus"></i>
-      </button>
-    </div>
-    <div class="prom_graph_timecontrol_group ">
-      <button class="btn btn-light pull-left" type="button" id="prom_graph_time_back" title="Rewind the end time.">
-        <i class="glyphicon glyphicon-backward"></i>
-      </button><!--
+            <i class="bi bi-plus-lg"></i>
+          </button>
+        </div>
+        <div class="prom_graph_timecontrol_group ">
+          <button class="btn btn-light pull-left" type="button" id="prom_graph_time_back" title="Rewind the end time.">
+            <i class="bi bi-arrow-left"></i>
+          </button><!--
    --><input class="input pull-left align-middle" title="End time of graph" placeholder="Until" type="text" id="prom_graph_time_end" size="16" value=""><!--
     --><button class="btn btn-light pull-left" type="button" id="prom_graph_time_forward" title="Advance the end time.">
-        <i class="glyphicon glyphicon-forward"></i>
-      </button>
-    </div>
-    <div class="prom_graph_timecontrol_group ">
-      <div class="btn-group dropup prom_graph_timecontrol_refresh pull-left">
-        <button type="button" class="btn btn-light pull-left" id="prom_graph_refresh_button" title="Refresh.">
-          <i class="glyphicon glyphicon-repeat"></i>
-          <span class="icon-repeat"></span>
-          (<span id="prom_graph_refresh_button_value">Off</span>)
-        </button>
-        <button type="button" class="btn btn-light pull-left dropdown-toggle" data-toggle="dropdown" title="Set autorefresh." aria-haspopup="true" aria-expanded="false">
-          <span class="caret"></span>&nbsp;
-        </button>
-        <ul class="dropdown-menu" id="prom_graph_refresh_intervals" role="menu">
-        </ul>
+            <i class="bi bi-arrow-right"></i>
+          </button>
+        </div>
+        <div class="prom_graph_timecontrol_group ">
+          <div class="btn-group dropup prom_graph_timecontrol_refresh pull-left">
+            <button type="button" class="btn btn-light pull-left" id="prom_graph_refresh_button" title="Refresh.">
+              <i class="bi bi-arrow-clockwise"></i>
+              <span class="icon-repeat"></span>
+              (<span id="prom_graph_refresh_button_value">Off</span>)
+            </button>
+            <button type="button" class="btn btn-light pull-left" data-toggle="dropdown" title="Set autorefresh." aria-haspopup="true" aria-expanded="false">
+              <i class="bi bi-caret-up-fill"></i>
+            </button>
+            <ul class="dropdown-menu" id="prom_graph_refresh_intervals" role="menu">
+            </ul>
+          </div>
+        </div>
       </div>
+      <script>
+        new PromConsole.TimeControl();
+      </script>
     </div>
-  </div>
-  <script>
-  new PromConsole.TimeControl();
-  </script>
-</div>
 {{ end }}
 
 {{/* Bottom of all pages. */}}
+
 {{ define "tail" }}
-</body>
+  </body>
 </html>
 {{ end }}