From 1b9cbaf842978d0b262292d6d0c1ba2b1056c447 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Wed, 24 Jul 2013 12:37:51 +0200
Subject: [PATCH] Bootstrappify remaining status pages.

---
 web/static/css/graph.css      |  25 +++++++
 web/static/css/prometheus.css |  54 ++-------------
 web/templates/databases.html  |  67 +++++++++---------
 web/templates/status.html     | 123 +++++++++++++++-------------------
 4 files changed, 120 insertions(+), 149 deletions(-)

diff --git a/web/static/css/graph.css b/web/static/css/graph.css
index b8c190789..41b942812 100644
--- a/web/static/css/graph.css
+++ b/web/static/css/graph.css
@@ -176,3 +176,28 @@ select name="insert_metric" {
 .config label.checkbox {
   padding-top: 0;
 }
+
+.grouping_box {
+  position: relative;
+  padding: 0 5px 0 5px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+  margin: 0 8px 2px 8px;
+}
+
+.grouping_box .head, .eval_stats {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.grouping_box .head .opts {
+  float: right;
+}
+
+input[name="end_input"], input[name="range_input"] {
+  margin-left: -4px;
+  margin-right: -4px;
+}
diff --git a/web/static/css/prometheus.css b/web/static/css/prometheus.css
index 035153a12..7dacd520b 100644
--- a/web/static/css/prometheus.css
+++ b/web/static/css/prometheus.css
@@ -2,52 +2,14 @@ body {
   padding-top: 40px;
 }
 
+th.job_header {
+  font-size: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
 .error_text {
-  background-color: #f2dede;
-  border: 1px solid #c0a0a0;
-  padding: 0 2px 0 2px;
-}
-
-h2 {
-  margin-left: 8px;
-}
-
-.grouping_box {
-  position: relative;
-  padding: 0 5px 0 5px;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
-  margin: 0 8px 2px 8px;
-}
-
-.grouping_box .head, .eval_stats {
-  display: inline-block;
-  vertical-align: top;
-}
-
-.grouping_box .head .opts {
-  float: right;
-}
-
-table tbody th {
-  text-align: left;
-}
-
-input {
-  margin: 0;
-  border: 1px solid gray;
-}
-
-select {
-  z-index: 10;
-}
-
-input[name=end_input], input[name=range_input] {
-  margin-left: -4px;
-  margin-right: -4px;
+  padding: 0 4px 0 4px;
 }
 
 /*
@@ -60,5 +22,3 @@ div.navbar {
 .literal_output td {
   font-family: monospace;
 }
-
-
diff --git a/web/templates/databases.html b/web/templates/databases.html
index f2be7230e..045222964 100644
--- a/web/templates/databases.html
+++ b/web/templates/databases.html
@@ -1,39 +1,38 @@
 {{define "head"}}<!-- nix -->{{end}}
 
 {{define "content"}}
-    <h2>Database Information</h2>
-    <div class="grouping_box">
-    {{range .States}}
-    <div class="grouping_box">
-    <h3>{{.Name}}</h3>
-    <table class="literal_output">
-    <tbody>
-    <tr>
-    <th>Path</th>
-    <td>{{.Path}}</td>
-    </tr>
-    <tr>
-    <th>Last Refreshed</th>
-    <td>{{.LastRefreshed}}</td>
-    </tr>
-    <tr>
-    <th>Type</th>
-    <td>{{.Type}}</td>
-    </tr>
-    <tr>
-    <th>Approximate Size</th>
-    <td>{{.ApproximateSize}}</td>
-    </tr>
-    <tr>
-    <th>Low Level Status</th>
-    <td><pre>{{.LowLevelStatus}}</pre></td>
-    </tr>
-    <tr>
-    <th>SSTable Status</th>
-    <td><pre>{{.SSTablesStatus}}</pre></td>
-    </tr>
-    </tbody>
-    </table>
+    <div class="container-fluid">
+      <h2>Database Information</h2>
+      {{range .States}}
+      <h3>{{.Name}}</h3>
+      <table class="table table-bordered table-condensed table-hover literal_output">
+        <tbody>
+          <tr>
+            <th>Path</th>
+            <td>{{.Path}}</td>
+          </tr>
+          <tr>
+            <th>Last Refreshed</th>
+            <td>{{.LastRefreshed}}</td>
+          </tr>
+          <tr>
+            <th>Type</th>
+            <td>{{.Type}}</td>
+          </tr>
+          <tr>
+            <th>Approximate Size</th>
+            <td>{{.ApproximateSize}}</td>
+          </tr>
+          <tr>
+            <th>Low Level Status</th>
+            <td><pre>{{.LowLevelStatus}}</pre></td>
+          </tr>
+          <tr>
+            <th>SSTable Status</th>
+            <td><pre>{{.SSTablesStatus}}</pre></td>
+          </tr>
+        </tbody>
+      </table>
+      {{end}}
     </div>
-    {{end}}
 {{end}}
diff --git a/web/templates/status.html b/web/templates/status.html
index 5f429226f..59ef11975 100644
--- a/web/templates/status.html
+++ b/web/templates/status.html
@@ -1,49 +1,40 @@
 {{define "head"}}<!-- nix -->{{end}}
 
 {{define "content"}}
+  <div class="container-fluid">
     <h2>Runtime Information</h2>
-    <div class="grouping_box table-striped">
-      <table>
-        <tbody>
-          <tr>
-            <th>Uptime</th>
-            <td>{{.Birth}}</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+    <table class="table table-condensed table-bordered table-striped table-hover">
+      <tbody>
+        <tr>
+          <th>Uptime</th>
+          <td>{{.Birth}}</td>
+        </tr>
+      </tbody>
+    </table>
+
     <h2>Build Information</h2>
-    <div class="grouping_box">
-      <table class="table-striped">
-        <tbody>
-          {{range $key, $value := .BuildInfo}}
-          <tr>
-            <th scope="row">{{$key}}</th>
-            <td>{{$value}}</td>
-          </tr>
-          {{end}}
-        </tbody>
-      </table>
-    </div>
+    <table class="table table-condensed table-bordered table-striped table-hover">
+      <tbody>
+        {{range $key, $value := .BuildInfo}}
+        <tr>
+          <th scope="row">{{$key}}</th>
+          <td>{{$value}}</td>
+        </tr>
+        {{end}}
+      </tbody>
+    </table>
 
     <h2>Configuration</h2>
-    <div class="grouping_box">
-    <pre>
-{{.Config}}
-    </pre>
-    </div>
+    <pre>{{.Config}}</pre>
 
     <h2>Rules</h2>
-    <div class="grouping_box">
     <pre>{{range .RuleManager.Rules}}{{.HTMLSnippet}}<br/>{{end}}</pre>
-    </div>
 
     <h2>Targets</h2>
-    <div class="grouping_box">
       {{range $job, $pool := .TargetPools}}
-      <h3>{{$job}}</h3>
-        <table>
+        <table class="table table-condensed table-bordered table-striped table-hover">
           <thead>
+            <tr><th colspan="5" class="job_header">{{$job}}</th></tr>
             <tr>
               <th>Endpoint</th>
               <th>State</th>
@@ -69,7 +60,7 @@
               </td>
               <td>
                 {{if .LastError}}
-                <span class="error_text">{{.LastError}}</span>
+                <span class="alert alert-error error_text">{{.LastError}}</span>
                 {{end}}
               </td>
             </tr>
@@ -77,43 +68,39 @@
           </tbody>
         </table>
       {{end}}
-    </div>
 
     <h2>Curation</h2>
-    <div class="grouping_box">
-      <table class="table-striped">
-        <tr>
-          <th>Active</th>
-          <td>{{.Curation.Active}}</td>
-        </tr>
-        {{if .Curation.Active}}
-        <tr>
-          <th>Processor Name</th>
-          <td>{{.Curation.Name}}</td>
-        </tr>
-        <tr>
-          <th>Recency Limit</th>
-          <td>{{.Curation.Limit}}</td>
-        </tr>
-        <tr>
-          <th>Current Fingerprint</th>
-          <td>{{.Curation.Fingerprint}}</td>
-        </tr>
-        {{end}}
-      </table>
-    </div>
+    <table class="table table-condensed table-bordered table-striped table-hover">
+      <tr>
+        <th>Active</th>
+        <td>{{.Curation.Active}}</td>
+      </tr>
+      {{if .Curation.Active}}
+      <tr>
+        <th>Processor Name</th>
+        <td>{{.Curation.Name}}</td>
+      </tr>
+      <tr>
+        <th>Recency Limit</th>
+        <td>{{.Curation.Limit}}</td>
+      </tr>
+      <tr>
+        <th>Current Fingerprint</th>
+        <td>{{.Curation.Fingerprint}}</td>
+      </tr>
+      {{end}}
+    </table>
 
     <h2>Startup Flags</h2>
-    <div class="grouping_box table-striped">
-      <table class="table-striped">
-        <tbody>
-          {{range $key, $value := .Flags}}
-          <tr>
-            <th scope="row">{{$key}}</th>
-            <td>{{$value}}</td>
-          </tr>
-          {{end}}
-        </tbody>
-      </table>
-    </div>
+    <table class="table table-condensed table-bordered table-striped table-hover">
+      <tbody>
+        {{range $key, $value := .Flags}}
+        <tr>
+          <th scope="row">{{$key}}</th>
+          <td>{{$value}}</td>
+        </tr>
+        {{end}}
+      </tbody>
+    </table>
+  </div>
 {{end}}