From 61b18a53f7c26f5d3f18aef15afda4a7178a7726 Mon Sep 17 00:00:00 2001
From: Shannon Carey <rehevkor5@gmail.com>
Date: Sun, 26 Mar 2017 21:31:02 -0500
Subject: [PATCH] Various improvements to views

- Added formatting of numbers based on locale. For example, large numbers may be shown with thousands separators (much easier to read).
- Added time zone to places where times are displayed, so that users are not confused about what time they're looking at.
- Added help tooltip about the Check's target and from/until (from/until is not self-explanatory)
- Made all references to "Warn level" and "Error level" consistent (previously was different only in the edit modal)
---
 .../main/webapp/css/override-bootstrap.css    |  4 +++
 seyren-web/src/main/webapp/html/check.html    | 20 +++++------
 seyren-web/src/main/webapp/html/checks.html   |  8 ++---
 .../main/webapp/html/modal-partial-check.html | 36 ++++++++++---------
 .../main/webapp/js/check-edit-controller.js   | 13 +++++++
 5 files changed, 51 insertions(+), 30 deletions(-)

diff --git a/seyren-web/src/main/webapp/css/override-bootstrap.css b/seyren-web/src/main/webapp/css/override-bootstrap.css
index 8399ea3f..d829ae0d 100644
--- a/seyren-web/src/main/webapp/css/override-bootstrap.css
+++ b/seyren-web/src/main/webapp/css/override-bootstrap.css
@@ -53,3 +53,7 @@ body {
     padding-right: 10px;
     padding-left: 10px;
 }
+
+.glyphicon-blue {
+    color: #0000bf;
+}
\ No newline at end of file
diff --git a/seyren-web/src/main/webapp/html/check.html b/seyren-web/src/main/webapp/html/check.html
index 95fff17e..0e362955 100644
--- a/seyren-web/src/main/webapp/html/check.html
+++ b/seyren-web/src/main/webapp/html/check.html
@@ -67,15 +67,15 @@ <h2><strong>Details</strong> <small>[<a class="" data-keyboard="true" data-toggl
                 </div>
             </div>
             <div class="form-group detail-form">
-                <label class="col-lg-2 control-label">Warn:</label>
+                <label class="col-lg-2 control-label">Warn level:</label>
                 <div class="col-lg-10">
-                    <p class="form-control-static">{{check.warn}}</p>
+                    <p class="form-control-static">{{check.warn | number}}</p>
                 </div>
             </div>
             <div class="form-group detail-form">
-                <label class="col-lg-2 control-label">Error:</label>
+                <label class="col-lg-2 control-label">Error level:</label>
                 <div class="col-lg-10">
-                    <p class="form-control-static">{{check.error}}</p>
+                    <p class="form-control-static">{{check.error | number}}</p>
                 </div>
             </div>
             <div class="form-group detail-form">
@@ -99,7 +99,7 @@ <h2><strong>Details</strong> <small>[<a class="" data-keyboard="true" data-toggl
             <div class="form-group detail-form">
                 <label class="col-lg-2 control-label">Last check:</label>
                 <div class="col-lg-10">
-                    <p class="form-control-static">{{check.lastCheck | date: 'yyyy-MM-dd HH:mm:ss'}}</p>
+                    <p class="form-control-static">{{check.lastCheck | date: 'yyyy-MM-dd HH:mm:ssZ'}}</p>
                 </div>
             </div>
             </form>
@@ -205,12 +205,12 @@ <h2>
             </thead>
             <tbody>
                 <tr ng-repeat="alert in alerts.values">
-                    <td>{{ alert.timestamp | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
+                    <td>{{ alert.timestamp | date: 'yyyy-MM-dd HH:mm:ssZ' }}</td>
                     <td><span am-time-ago="alert.timestamp"></span></td>
                     <td>{{ alert.target }}</td>
-                    <td>{{ alert.value }}</td>
-                    <td>{{ alert.warn }}</td>
-                    <td>{{ alert.error }}</td>
+                    <td>{{ alert.value | number }}</td>
+                    <td>{{ alert.warn | number }}</td>
+                    <td>{{ alert.error | number }}</td>
                     <td>
                         <span ng-show="alert.fromType == 'UNKNOWN'" class="label label-default">{{ alert.fromType }}</span>
                         <span ng-show="alert.fromType == 'OK'" class="label label-success">{{ alert.fromType }}</span>
@@ -233,7 +233,7 @@ <h2>
     <div class="row" ng-show="checkExists && check != null">
         <div class="col-lg-12">
             <div class="pull-right">
-                <button class="btn btn-danger btn-sm" data-keyboard="true" data-toggle="modal" data-show="true" id="deleteCheckButton" href="#confirmCheckDeleteModal">Delete check</button>
+                <button class="btn btn-danger" data-keyboard="true" data-toggle="modal" data-show="true" id="deleteCheckButton" href="#confirmCheckDeleteModal">Delete check</button>
             </div>
         </div>
     </div>
diff --git a/seyren-web/src/main/webapp/html/checks.html b/seyren-web/src/main/webapp/html/checks.html
index 42bfeeee..0501522e 100755
--- a/seyren-web/src/main/webapp/html/checks.html
+++ b/seyren-web/src/main/webapp/html/checks.html
@@ -21,8 +21,8 @@ <h1><strong>Checks</strong></h1>
                 <tr>
                     <th><a href="" ng-click="predicate='name';reverse=!reverse">Name</a></th>
                     <th><a href="" ng-click="predicate=sortByState;reverse=!reverse">State</a></th>
-                    <th><a href="" ng-click="predicate='warn';reverse=!reverse">Warn</a></th>
-                    <th><a href="" ng-click="predicate='error';reverse=!reverse">Error</a></th>
+                    <th><a href="" ng-click="predicate='warn';reverse=!reverse">Warn level</a></th>
+                    <th><a href="" ng-click="predicate='error';reverse=!reverse">Error level</a></th>
                     <th><a href="" ng-click="predicate='enabled';reverse=!reverse">Enabled</a></th>
                 </tr>
             </thead>
@@ -38,8 +38,8 @@ <h1><strong>Checks</strong></h1>
                         <span ng-show="check.state == 'ERROR'" class="label label-danger">{{ check.state }}</span>
                         <span ng-show="check.state == 'EXCEPTION'" class="label label-inverse">{{ check.state }}</span>
                     </td>
-                    <td>{{ check.warn }}</td>
-                    <td>{{ check.error }}</td>
+                    <td>{{ check.warn | number }}</td>
+                    <td>{{ check.error | number }}</td>
                     <td><input type="checkbox" ng-checked="check.enabled" ng-click="swapCheckEnabled(check); $event.stopPropagation();" /></td>
                 </tr>
             </tbody>
diff --git a/seyren-web/src/main/webapp/html/modal-partial-check.html b/seyren-web/src/main/webapp/html/modal-partial-check.html
index 55366a8d..bdb5e461 100644
--- a/seyren-web/src/main/webapp/html/modal-partial-check.html
+++ b/seyren-web/src/main/webapp/html/modal-partial-check.html
@@ -10,46 +10,50 @@ <h3 class="modal-title" ng-hide="newCheck"><strong>Edit check</strong></h3>
             <fieldset>
                 <div ng-class="{ 'form-group': true, 'has-error': checkForm['check.name'].$invalid }">
                     <label class="col-sm-3 control-label" for="check.name">Name</label>
-                    <div class="col-sm-7">
+                    <div class="col-sm-9">
                         <input id="check.name" class="form-control" name="check.name" ng-model="check.name" type="text" required />
                     </div>
                 </div>
                 <div ng-class="{ 'form-group': true, 'has-error': checkForm['check.description'].$invalid }">
                     <label class="col-sm-3 control-label" for="check.description">Description</label>
-                    <div class="col-sm-7">
-                        <input id="check.description" class="form-control" name="check.description" ng-model="check.description" type="text" />
+                    <div class="col-sm-9">
+                        <textarea id="check.description" class="form-control" name="check.description"
+                                  ng-model="check.description" type="text" ></textarea>
                     </div>
                 </div>
                 <div ng-class="{ 'form-group': true, 'has-error': checkForm['check.target'].$invalid }">
-                    <label class="col-sm-3 control-label" for="check.target">Target</label>
-                    <div class="col-sm-7">
-                        <textarea id="check.target" class="form-control"  name="check.target" ng-model="check.target" type="text" required />
+                    <label class="col-sm-3 control-label" for="check.target">Target <sup><span
+                            id="check.target.hint" class="glyphicon glyphicon-question-sign glyphicon-blue"></span></sup></label>
+                    <div class="col-sm-9">
+                        <textarea id="check.target" class="form-control"  name="check.target" ng-model="check.target"
+                                  type="text" required></textarea>
                     </div>
                 </div>
                 <div ng-class="{ 'form-group': true, 'has-error': checkForm['check.from'].$invalid }">
-                    <label class="col-sm-3 control-label" for="check.from">From</label>
-                    <div class="col-sm-7">
+                    <label class="col-sm-3 control-label" for="check.from">From <sup><span
+                            id="check.from.hint" class="glyphicon glyphicon-question-sign glyphicon-blue"
+                            style="cursor: pointer;"
+                    ></span></sup></label>
+                    <div class="col-sm-9">
                         <input id="check.from" class="form-control" name="check.from" ng-model="check.from" type="text" />
                     </div>
                 </div>
                 <div ng-class="{ 'form-group': true, 'has-error': checkForm['check.until'].$invalid }">
                     <label class="col-sm-3 control-label" for="check.until">Until</label>
-                    <div class="col-sm-7">
+                    <div class="col-sm-9">
                         <input id="check.until" class="form-control" name="check.until" ng-model="check.until" type="text" />
                     </div>
                 </div>
                 <div ng-class="{ 'form-group': true, 'has-error': checkForm['check.warn'].$invalid }">
-                    <label class="col-sm-3 control-label" for="check.warn">Warn level</label>
-                    <div class="col-sm-3">
+                    <label class="col-sm-3 control-label" for="check.warn">Warn level <sup><span
+                            id="check.warn.hint" class="glyphicon glyphicon-question-sign glyphicon-blue"></span></sup></label>
+                    <div class="col-sm-9">
                         <input id="check.warn" class="form-control" name="check.warn" ng-model="check.warn" type="text" ng-pattern="/^-?[0-9]+(.[0-9]+)?$/" required />
                     </div>
-                    <div class="col-sm-4">
-                        <span id="check.warn.hint" class="glyphicon glyphicon-question-sign"></span>
-                    </div>
                 </div>
                 <div ng-class="{ 'form-group': true, 'has-error': checkForm['check.error'].$invalid }">
                     <label class="col-sm-3 control-label" for="check.error">Error level</label>
-                    <div class="col-sm-3">
+                    <div class="col-sm-9">
                         <input id="check.error" class="form-control" name="check.error" ng-model="check.error" type="text" ng-pattern="/^-?[0-9]+(.[0-9]+)?$/" required />
                     </div>
                 </div>
@@ -78,7 +82,7 @@ <h3 class="modal-title" ng-hide="newCheck"><strong>Edit check</strong></h3>
                     </div>
                 </div>
                 <div class="form-group">
-                    <div class="col-sm-7 col-sm-offset-3">
+                    <div class="col-sm-9 col-sm-offset-3">
                         <img ng-src="{{ check.previewImage }}" src="./img/preview-nodata.png" width="300" height="70" />
                         Metrics found: {{ check.totalMetric }}
                     </div>
diff --git a/seyren-web/src/main/webapp/js/check-edit-controller.js b/seyren-web/src/main/webapp/js/check-edit-controller.js
index 9b64224b..fa6091cf 100644
--- a/seyren-web/src/main/webapp/js/check-edit-controller.js
+++ b/seyren-web/src/main/webapp/js/check-edit-controller.js
@@ -18,10 +18,23 @@
 
         $('#editCheckModal').on('shown.bs.modal', function () {
             $('#check\\.name').focus();
+            $('#check\\.target\\.hint').tooltip({
+                placement: 'right',
+                title: 'The target parameter specifies a path identifying one or several metrics, optionally with functions acting on those metrics.'
+            });
             $('#check\\.warn\\.hint').tooltip({
                 placement: 'right',
                 title: 'Setting your warn level higher than your error level will result in Seyren generating alerts when the target value goes below the threshold.'
             });
+            $('#check\\.from\\.hint').tooltip({
+                placement: 'right',
+                html: true,
+                title: '"From" and "To" are optional parameters that specify the relative or absolute time period to' +
+                ' retrieve from the server. See ' +
+                '<a href="http://graphite.readthedocs.io/en/latest/render_api.html#from-until">the Graphite' +
+                ' documentation</a>. Only the most recent value of each series returned will be used.',
+                trigger: 'click'
+            });
         });
 
         $scope.create = function () {