Merge pull request #338 from prometheus/ui/bootstrappify-status

Bootstrappify remaining status pages.

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;
+}

web/static/css/prometheus.css

@@ -2,52 +2,14 @@ body {
   padding-top: 40px;
 }
 
-.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;
+th.job_header {
+  font-size: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 
-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;
+.error_text {
+  padding: 0 4px 0 4px;
 }
 
 /*
@@ -60,5 +22,3 @@ div.navbar {
 .literal_output td {
   font-family: monospace;
 }
-
-

web/templates/databases.html

@@ -1,12 +1,11 @@
 {{define "head"}}<!-- nix -->{{end}}
 
 {{define "content"}}
+    <div class="container-fluid">
       <h2>Database Information</h2>
-    <div class="grouping_box">
       {{range .States}}
-    <div class="grouping_box">
       <h3>{{.Name}}</h3>
-    <table class="literal_output">
+      <table class="table table-bordered table-condensed table-hover literal_output">
         <tbody>
           <tr>
             <th>Path</th>
@@ -34,6 +33,6 @@
           </tr>
         </tbody>
       </table>
-    </div>
       {{end}}
+    </div>
 {{end}}

web/templates/status.html

@@ -1,9 +1,9 @@
 {{define "head"}}<!-- nix -->{{end}}
 
 {{define "content"}}
+  <div class="container-fluid">
     <h2>Runtime Information</h2>
-    <div class="grouping_box table-striped">
-      <table>
+    <table class="table table-condensed table-bordered table-striped table-hover">
       <tbody>
         <tr>
           <th>Uptime</th>
@@ -11,10 +11,9 @@
         </tr>
       </tbody>
     </table>
-    </div>
+
     <h2>Build Information</h2>
-    <div class="grouping_box">
-      <table class="table-striped">
+    <table class="table table-condensed table-bordered table-striped table-hover">
       <tbody>
         {{range $key, $value := .BuildInfo}}
         <tr>
@@ -24,26 +23,18 @@
         {{end}}
       </tbody>
     </table>
-    </div>
 
     <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,11 +68,9 @@
           </tbody>
         </table>
       {{end}}
-    </div>
 
     <h2>Curation</h2>
-    <div class="grouping_box">
-      <table class="table-striped">
+    <table class="table table-condensed table-bordered table-striped table-hover">
       <tr>
         <th>Active</th>
         <td>{{.Curation.Active}}</td>
@@ -101,11 +90,9 @@
       </tr>
       {{end}}
     </table>
-    </div>
 
     <h2>Startup Flags</h2>
-    <div class="grouping_box table-striped">
-      <table class="table-striped">
+    <table class="table table-condensed table-bordered table-striped table-hover">
       <tbody>
         {{range $key, $value := .Flags}}
         <tr>