diff options
Diffstat (limited to 'bundles/prometheus/files/console_libraries')
| -rw-r--r-- | bundles/prometheus/files/console_libraries/menu.lib | 79 | ||||
| -rw-r--r-- | bundles/prometheus/files/console_libraries/prom.lib | 190 |
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 — Console"> +<title>Prometheus — 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 }}&{{ 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> - </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 }} |