Merge pull request #5226 from prometheus/bootstrap4

Update to Bootstrap 4
prometheus · Feb 20, 2019 · f7332c4 · f7332c4
2 parents 09208b1 + 795c989
commit f7332c4
Show file tree

Hide file tree

Showing 82 changed files with 33,130 additions and 9,647 deletions.
diff --git a/console_libraries/menu.lib b/console_libraries/menu.lib
@@ -2,23 +2,24 @@
 
 {{/* Navbar, should be passed . */}}
 {{ define "navbar" }}
-<nav class="navbar navbar-inverse navbar-static-top">
+<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-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
+      <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><a href="{{ pathPrefix }}/alerts">Alerts</a></li>
-        <li><a href="https://www.pagerduty.com/">PagerDuty</a></li>
+        <li class="nav-item"><a class="nav-link" href="{{ pathPrefix }}/alerts">Alerts</a></li>
+        <li class="nav-item"><a class="nav-link" href="https://www.pagerduty.com/">PagerDuty</a></li>
       </ul>
     </div>
   </div>
@@ -27,24 +28,27 @@
 
 {{/* LHS menu, should be passed . */}}
 {{ define "menu" }}
-<div class="prom_lhs_menu">
-<ul>
+<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.example" "Overview") }}
 
 {{ if query "up{job='node'}" }}
 {{ template "_menuItem" (args . "node.html" "Node") }}
 {{ if match "^node" .Path }}
   {{ if .Params.instance }}
   <ul>
-    <li {{ if eq .Path "node-overview.html" }}class="prom_lhs_menu_selected"{{ end }}>
-      <a href="node-overview.html?instance={{ .Params.instance }}">{{ reReplaceAll "(.*?://)([^:/]+?)(:\\d+)?/.*" "$2" .Params.instance }}</a>
+    <li {{ if eq .Path "node-overview.html" }}class="prom_lhs_menu_selected nav-item"{{ end }}>
+      <a class="nav-link" href="node-overview.html?instance={{ .Params.instance }}">{{ reReplaceAll "(.*?://)([^:/]+?)(:\\d+)?/.*" "$2" .Params.instance }}</a>
     </li>
     <ul>
-      <li {{ if eq .Path "node-cpu.html" }}class="prom_lhs_menu_selected"{{ end }}>
-        <a href="node-cpu.html?instance={{ .Params.instance }}">CPU</a>
+      <li {{ if eq .Path "node-cpu.html" }}class="prom_lhs_menu_selected nav-item"{{ end }}>
+        <a class="nav-link" href="node-cpu.html?instance={{ .Params.instance }}">CPU</a>
       </li>
-      <li {{ if eq .Path "node-disk.html" }}class="prom_lhs_menu_selected"{{ end }}>
-        <a href="node-disk.html?instance={{ .Params.instance }}">Disk</a>
+      <li {{ if eq .Path "node-disk.html" }}class="prom_lhs_menu_selected nav-item"{{ end }}>
+        <a class="nav-link" href="node-disk.html?instance={{ .Params.instance }}">Disk</a>
       </li>
     </ul>
   </ul>
@@ -57,8 +61,8 @@
 {{ if match "^prometheus" .Path }}
   {{ if .Params.instance }}
   <ul>
-    <li {{ if eq .Path "prometheus-overview.html" }}class="prom_lhs_menu_selected"{{ end }}>
-      <a href="prometheus-overview.html?instance={{ .Params.instance }}">{{.Params.instance }}</a>
+    <li {{ if eq .Path "prometheus-overview.html" }}class="prom_lhs_menu_selected nav-item"{{ end }}>
+      <a class="nav-link" href="prometheus-overview.html?instance={{ .Params.instance }}">{{.Params.instance }}</a>
     </li>
   </ul>
   {{ end }}
@@ -67,10 +71,12 @@
 
 </ul>
 </div>
+</nav>
+</div>
 {{ end }}
 
 {{/* Helper, pass (args . path name) */}}
 {{ define "_menuItem" }}
-  <li {{ if eq .arg0.Path .arg1 }} class="prom_lhs_menu_selected" {{ end }}><a href="{{ .arg1 }}">{{ .arg2 }}</a></li>
+  <li {{ if eq .arg0.Path .arg1 }} class="prom_lhs_menu_selected nav-item" {{ end }}><a class="nav-link" href="{{ .arg1 }}">{{ .arg2 }}</a></li>
 {{ end }}
 
diff --git a/console_libraries/prom.lib b/console_libraries/prom.lib
@@ -2,13 +2,15 @@
 {{/* Load Prometheus console library JS/CSS. Should go in <head> */}}
 {{ define "prom_console_head" }}
 <link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/static/vendor/rickshaw/rickshaw.min.css">
-<link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/static/vendor/bootstrap-3.3.1/css/bootstrap.min.css">
+<link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/static/vendor/bootstrap-4.1.3/css/bootstrap.min.css">
 <link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/static/css/prom_console.css">
+<link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/static/vendor/bootstrap4-glyphicons/css/bootstrap-glyphicons.min.css">
 <script src="{{ pathPrefix }}/static/vendor/rickshaw/vendor/d3.v3.js"></script>
 <script src="{{ pathPrefix }}/static/vendor/rickshaw/vendor/d3.layout.min.js"></script>
 <script src="{{ pathPrefix }}/static/vendor/rickshaw/rickshaw.min.js"></script>
-<script src="{{ pathPrefix }}/static/vendor/js/jquery.min.js"></script>
-<script src="{{ pathPrefix }}/static/vendor/bootstrap-3.3.1/js/bootstrap.min.js"></script>
+<script src="{{ pathPrefix }}/static/vendor/js/jquery-3.3.1.min.js"></script>
+<script src="{{ pathPrefix }}/static/vendor/js/popper.min.js"></script>
+<script src="{{ pathPrefix }}/static/vendor/bootstrap-4.1.3/js/bootstrap.min.js"></script>
 
 <script>
 var PATH_PREFIX = "{{ pathPrefix }}";
@@ -25,6 +27,7 @@ var PATH_PREFIX = "{{ pathPrefix }}";
 </head>
 <body>
 {{ template "navbar" . }}
+
 {{ template "menu" . }}
 {{ end }}
 
@@ -51,7 +54,7 @@ renderTemplate is the name of the template to use to render the value.
 
 {{ define "prom_right_table_head" }}
 <div class="prom_console_rhs">
-<table class="table table-bordered table-hover table-condensed">
+<table class="table table-bordered table-hover table-sm">
 {{ end }}
 {{ define "prom_right_table_tail" }}
 </table>
@@ -77,7 +80,7 @@ renderTemplate is the name of the template to use to render the value.
 
 {{ define "prom_content_head" }}
 <div class="prom_console_content">
-  <div class="container">
+  <div class="container-fluid">
 {{ template "prom_graph_timecontrol" . }}
 {{ end }}
 {{ define "prom_content_tail" }}
@@ -88,34 +91,32 @@ renderTemplate is the name of the template to use to render the value.
 {{ 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-default pull-left" type="button" id="prom_graph_duration_shrink" title="Shrink the time range.">
+    <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>
-      <input class="input pull-left" size="3" title="Time range of graph" type="text" id="prom_graph_duration">
-      <button class="btn btn-default pull-left" type="button" id="prom_graph_duration_grow" title="Grow the time range.">
+      </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-default pull-left" type="button" id="prom_graph_time_back" title="Rewind the end time.">
+    <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>
-      <input class="input pull-left" title="End time of graph" placeholder="Until" type="text" id="prom_graph_time_end" size="16" value="">
-      <button class="btn btn-default pull-left" type="button" id="prom_graph_time_forward" title="Advance the end time.">
+      </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="prom_graph_timecontrol_group ">
       <div class="btn-group dropup prom_graph_timecontrol_refresh pull-left">
-        <button type="button" class="btn btn-default pull-left" id="prom_graph_refresh_button" title="Refresh.">
+        <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-default pull-left dropdown-toggle" data-toggle="dropdown" title="Set autorefresh." aria-expanded="false">
+        <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">

diff --git a/consoles/index.html.example b/consoles/index.html.example
@@ -8,7 +8,7 @@
 <p>These are example consoles for Prometheus.</p>
 
 <p>These consoles expect exporters to have the following job labels:</p>
-<table class="table table-condensed table-striped table-bordered" style="width: 0%">
+<table class="table table-sm table-striped table-bordered" style="width: 0%">
 <tr>
   <th>Exporter</th>
   <th>Job label</th>

diff --git a/consoles/prometheus-overview.html b/consoles/prometheus-overview.html
@@ -60,6 +60,7 @@
 {{ template "prom_right_table_tail" }}
 
 {{ template "prom_content_head" . }}
+ <div class="prom_content_div">
   <h1>Prometheus Overview - {{ .Params.instance }}</h1>
 
   <h3>Ingested Samples</h3>
@@ -89,7 +90,7 @@ <h3>HTTP Server</h3>
     yUnits: "/s",
   })
   </script>
-
+ </div>
 {{ template "prom_content_tail" . }}
 
 {{ template "tail" }}
diff --git a/consoles/prometheus.html b/consoles/prometheus.html
@@ -10,7 +10,7 @@
 {{ template "prom_content_head" . }}
 <h1>Prometheus</h1>
 
-<table class="table table-condensed table-striped table-bordered" style="width: 0%">
+<table class="table table-sm table-striped table-bordered" style="width: 0%">
 <tr>
   <th>Prometheus</th>
   <th>Up</th>