From 2d8bfa0cedd4102926f8c54692d6c6e89e1e9e95 Mon Sep 17 00:00:00 2001
From: Brian Brazil <brian.brazil@boxever.com>
Date: Thu, 22 Jan 2015 10:39:41 +0000
Subject: [PATCH] Adjust for bootstrap3. Remove long lists from LHS menu.

Put in a table on the node page instead.
---
 console_libraries/menu.lib      | 37 ++++++++------
 console_libraries/prom.lib      | 51 +++++++++----------
 consoles/node.html              | 20 +++++++-
 web/static/css/prom_console.css | 86 +++++++++++++++------------------
 4 files changed, 106 insertions(+), 88 deletions(-)
diff --git a/console_libraries/menu.lib b/console_libraries/menu.lib
index 9842f1fcc7..4abfd3b44a 100644
--- a/console_libraries/menu.lib
+++ b/console_libraries/menu.lib
@@ -2,29 +2,38 @@
 
 {{/* Navbar, should be passed . */}}
 {{ define "navbar" }}
-<div class="navbar navbar-inverse navbar-static-top">
-  <div class="navbar-inner">
-    <ul class="navbar-nav nav">
-      <a class="brand" href="/">Prometheus</a>
-      <li><a href="/alerts">Alerts</a></li>
-      <!-- Add in navbar links here -->
-      <li><a href="https://pagerduty.com/">PagerDuty</a></li>
+<nav class="navbar navbar-inverse navbar-static-top">
+  <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>
+      <a class="navbar-brand" href="/">Prometheus</a>
+    </div>
+
+    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+      <ul class="nav navbar-nav">
+        <li><a href="/alerts">Alerts</a></li>
+        <li><a href="https://www.pagerduty.com/">PagerDuty</a></li>
+      </div>
     </ul>
   </div>
-</div>
+</nav>
 {{ end }}
 
 {{/* LHS menu, should be passed . */}}
 {{ define "menu" }}
 <div class="prom_lhs_menu">
 <ul>
-{{ $dot := . }}
-
 {{ template "_menuItem" (args . "index.html.example" "Overview") }}
 {{ template "_menuItem" (args . "node.html" "Node") }}
 {{ if match "^node" .Path }}
-  <ul>
   {{ 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>
@@ -36,12 +45,8 @@
         <a href="node-disk.html?instance={{ .Params.instance }}">Disk</a>
       </li>
     </ul>
-  {{ else }}
-    {{ range query "up{job='node'}" | sortByLabel "instance" }}
-    <li><a href="node-overview.html?instance={{ .Labels.instance }}">{{ reReplaceAll "(.*?://)([^:/]+?)(:\\d+)?/.*" "$2" .Labels.instance }}</a></li>
-    {{ end }}
-  {{ end }}
   </ul>
+  {{ end }}
 {{ end }}
 
 
diff --git a/console_libraries/prom.lib b/console_libraries/prom.lib
index fd21a30340..34f3c1a0cb 100644
--- a/console_libraries/prom.lib
+++ b/console_libraries/prom.lib
@@ -2,13 +2,13 @@
 {{/* Load Prometheus console library JS/CSS. Should go in <head> */}}
 {{define "prom_console_head"}}
 <link type="text/css" rel="stylesheet" href="/static/vendor/rickshaw/rickshaw.min.css">
-<link type="text/css" rel="stylesheet" href="/static/vendor/bootstrap/css/bootstrap.css">
+<link type="text/css" rel="stylesheet" href="/static/vendor/bootstrap-3.3.1/css/bootstrap.css">
 <link type="text/css" rel="stylesheet" href="/static/css/prom_console.css">
 <script src="/static/vendor/rickshaw/vendor/d3.min.js"></script>
 <script src="/static/vendor/rickshaw/vendor/d3.layout.min.js"></script>
 <script src="/static/vendor/rickshaw/rickshaw.min.js"></script>
 <script src="/static/vendor/js/jquery.min.js"></script>
-<script src="/static/vendor/bootstrap/js/bootstrap.min.js"></script>
+<script src="/static/vendor/bootstrap-3.3.1/js/bootstrap.min.js"></script>
 <script src="/static/js/prom_console.js"></script>
 {{end}}
 
@@ -42,7 +42,6 @@ renderTemplate is the name of the template to use to render the value.
 
 {{ define "prom_path" }}/consoles/{{.Path}}?{{range $param, $value := .Params}}{{$param}}={{$value}}&amp;{{end}}{{ end }}"
 
-{{/* Top and bottom of table on RHS */}}
 {{define "prom_right_table_head"}}
 <div class="prom_console_rhs">
 <table class="table table-bordered table-hover table-condensed">
@@ -53,45 +52,47 @@ renderTemplate is the name of the template to use to render the value.
 
 {{end}}
 
-{{/* Top and bottom of main content */}}
 {{define "prom_content_head"}}
 <div class="prom_console_content">
+  <div class="container">
 {{template "prom_graph_timecontrol" .}}
 {{end}}
 {{define "prom_content_tail"}}
+  </div>
 </div>
 {{end}}
 
 {{define "prom_graph_timecontrol"}}
 <div class="prom_graph_timecontrol">
   <div class="prom_graph_timecontrol_inner">
-    <label for="prom_graph_duration">Range:</label>
-    <div class="input-prepend input-append">
-      <button class="btn btn-mini" type="button" id="prom_graph_duration_shrink" title="Shrink the time range.">
-        <i class="icon-minus"></i>
+    <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.">
+        <i class="glyphicon glyphicon-minus"></i>
       </button>
-      <input class="input-mini" title="Time range of graph" type="text" id="prom_graph_duration">
-      <button class="btn btn-mini" type="button" id="prom_graph_duration_grow" title="Grow the time range.">
-        <i class="icon-plus"></i>
+      <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.">
+        <i class="glyphicon glyphicon-plus"></i>
       </button>
     </div>
-    <label for="prom_graph_duration">End:</label>
-    <div class="input-prepend input-append">
-      <button class="btn btn-mini" type="button" id="prom_graph_time_back" title="Rewind the end time.">
-        <i class="icon-backward"></i>
+
+    <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.">
+        <i class="glyphicon glyphicon-backward"></i>
       </button>
-      <input class="input-medium" title="End time of graph" placeholder="Until" type="text" id="prom_graph_time_end" size="16" value="">
-      <button class="btn btn-mini" type="button" id="prom_graph_time_forward" title="Advance the end time.">
-        <i class="icon-forward"></i>
+      <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.">
+        <i class="glyphicon glyphicon-forward"></i>
       </button>
-    </div>
-    <div class="input-prepend input-append">
-      <div class="btn-group dropup prom_graph_timecontrol_refresh">
-        <button type="button" class="btn btn-mini" id="prom_graph_refresh_button">
-        <span class="icon-repeat"></span>
-        (<span id="prom_graph_refresh_button_value">Off</span>)
+   </div>
+
+    <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.">
+          <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-mini dropdown-toggle" data-toggle="dropdown">
+        <button type="button" class="btn btn-default pull-left dropdown-toggle" data-toggle="dropdown" title="Set autorefresh." aria-expanded="false">
           <span class="caret"></span>&nbsp;
         </button>
         <ul class="dropdown-menu" id="prom_graph_refresh_intervals" role="menu">
diff --git a/consoles/node.html b/consoles/node.html
index 6dea84fcc9..ac6fb3ff1c 100644
--- a/consoles/node.html
+++ b/consoles/node.html
@@ -10,7 +10,25 @@
 {{template "prom_content_head" .}}
 <h1>Node</h1>
 
-Choose an instance on the left.
+<table class="table table-condensed table-striped table-bordered" style="width: 0%">
+<tr>
+  <th>Node</th>
+  <th>Up</th>
+  <th>CPU<br/>Used</th>
+  <th>Memory<br/> Available</th>
+</tr>
+{{ range query "up{job='node'}" | sortByLabel "instance" }}
+<tr>
+  <td><a href="node-overview.html?instance={{ .Labels.instance }}">{{ reReplaceAll "(.*?://)([^:/]+?)(:\\d+)?/.*" "$2" .Labels.instance }}</a></td>
+  <td{{ if eq (. | value) 1.0 }}>Yes{{ else }} class="alert-danger">No{{ end }}</td>
+  <td>{{ template "prom_query_drilldown" (args (printf "100 * (1 - avg by(instance)(rate(node_cpu{job='node',mode='idle',instance='%s'}[5m])))" .Labels.instance) "%" "printf.3g") }}</td>
+  <td>{{ template "prom_query_drilldown" (args (printf "node_memory_MemTotal{job='node',instance='%s'} - node_memory_MemFree{job='node',instance='%s'} - node_memory_Cached{job='node',instance='%s'}" .Labels.instance .Labels.instance .Labels.instance) "B" "humanize1024") }}</td>
+</tr>
+{{ else }}
+<tr><td colspan=4>No nodes found.</td></tr>
+{{ end }}
+
+
 {{template "prom_content_tail" .}}
 
 {{template "tail"}}
diff --git a/web/static/css/prom_console.css b/web/static/css/prom_console.css
index 7d24224b44..2d9cabe080 100644
--- a/web/static/css/prom_console.css
+++ b/web/static/css/prom_console.css
@@ -1,7 +1,11 @@
-.prom_lhs_menu {
+.navbar {
+  margin-bottom: 0;
+}
+
+div.prom_lhs_menu {
   float: left;
   margin-right: 2ex;
-  background: #000000;
+  background: #222;
   min-height: 100%;
   overflow: auto;
 }
@@ -26,12 +30,11 @@
   pointer-events: none;
   cursor: default;
 }
-.prom_lhs_menu_selected {
+li.prom_lhs_menu_selected {
   background: #555555;
   background-clip: padding-box;
 }
-.prom_lhs_menu span:hover,
-.prom_lhs_menu a:hover {
+.prom_lhs_menu li:hover {
   background: #666666;
 }
 
@@ -56,15 +59,17 @@
   margin-bottom: 32px;  /* Space for time control. */
 }
 
-.prom_query_drilldown {
+a.prom_query_drilldown {
   text-decoration: none;
   color: black;
 }
-.prom_query_drilldown:hover, a.prom_query_drilldown:active {
+a.prom_query_drilldown:hover, a.prom_query_drilldown:active {
   text-decoration: underline;
 }
 
 
+.prom_graph_table {
+}
 .rickshaw_legend {
  padding: 2px;
  margin-top: 1px;
@@ -121,56 +126,45 @@ a.prom_graph_link {
 
 
 .prom_graph_timecontrol {
-  background: #000000;
+  background: #222;
   position: fixed;
   padding: 2px;
   bottom: 0;
   left: 0;
-  width: 100%;
-  text-align: center;
   z-index: 2;
+  width: 100%;
 }
+
 .prom_graph_timecontrol_inner {
+  text-align: center;
+  height: 31px;
+}
+
+.prom_graph_timecontrol_group {
   display: inline-block;
+  margin: 1px 5px;
 }
-.prom_graph_timecontrol button {
-  font-size: 10pt;
-  margin-right: .3em;
-  padding-top: 2px;
-  padding-bottom: 2px;
+.prom_graph_timecontrol_group .btn {
+  font-size: 0.8em;
+  border-radius: 0;
+  height: 29px;
 }
-.prom_graph_timecontrol_refresh button {
-  padding-top: 0;
-  padding-bottom: 0;
-  border-bottom: 0;
-  border-top: 0;
-}
-.prom_graph_timecontrol_refresh .dropdown-menu {
-  min-width: 70px;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.prom_graph_timecontrol input {
-  font-size: 10pt;
-  margin-left: -4px;
-  margin-right: -4px;
+
+.prom_graph_timecontrol_group .input {
+  height: 29px;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #555;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #ccc;
   text-align: center;
 }
-.prom_graph_timecontrol label {
-  display: inline;
-  color: #999999;
+
+.prom_graph_timecontrol_group .dropdown-menu {
+  min-width: 90px;
 }
-.prom_graph_timecontrol .input-append {
-  margin: 2px;
-}
-.prom_graph_timecontrol .input-append .btn:first-child i {
-  margin-right: 4px;
-  margin-left: 2px;
-}
-.prom_graph_timecontrol .input-append .btn:last-child i {
-  margin-left: 6px;
-}
-.prom_graph_timecontrol .input-append i {
-  padding-top: -4px;
-  margin-top: 0;
+.prom_graph_timecontrol_group .dropdown-menu li {
+  text-align: center;
 }

Node	Up	CPU Used	Memory Available
{{ reReplaceAll "(.?://)([^:/]+?)(:\\d+)?/." "$2" .Labels.instance }}	{{ template "prom_query_drilldown" (args (printf "100 * (1 - avg by(instance)(rate(node_cpu{job='node',mode='idle',instance='%s'}[5m])))" .Labels.instance) "%" "printf.3g") }}	{{ template "prom_query_drilldown" (args (printf "node_memory_MemTotal{job='node',instance='%s'} - node_memory_MemFree{job='node',instance='%s'} - node_memory_Cached{job='node',instance='%s'}" .Labels.instance .Labels.instance .Labels.instance) "B" "humanize1024") }}
No nodes found.