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)

.travis.yml

@@ -7,6 +7,6 @@ before_script:
   - "export DISPLAY=:99.0"
   - "sh -e /etc/init.d/xvfb start"
   - sleep 5 # give xvfb some time to start
-  - "npm install karma-cli karma-ng-scenario karma-jasmine karma-phantomjs-launcher --quiet --global"
+  - "npm install --quiet"
 script:
   - "mvn clean verify -Pkarma"

README.md

@@ -184,13 +184,13 @@ To run the acceptance tests with Maven:
 ```
 mvn clean verify
 ```
-To run the integration tests with Maven:
+To run the integration tests with Maven, install the necessary Node modules (Karma, etc.), then run tests with the 
+"karma" profile:
 
-```
-mvn clean verify -Pkarma
-```
+    npm install
+    mvn clean verify -Pkarma
 
-To fire-up the app using Maven and wait (meaning you can run the tests separately from your IDE):
+To fire up the app using Maven and wait (meaning you can run the tests separately from your IDE):
 
 ```
 mvn clean verify -Dwait

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "seyren",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {},
+  "devDependencies": {
+    "jasmine-core": "^2.5.2",
+    "karma": "^1.5.0",
+    "karma-jasmine": "^1.1.0",
+    "karma-ng-scenario": "^1.0.0",
+    "karma-phantomjs-launcher": "^1.0.4"
+  },
+  "scripts": {},
+  "license": "Apache-2.0"
+}

pom.xml

@@ -91,7 +91,7 @@
                 <plugin>
                     <groupId>com.github.joelittlejohn.embedmongo</groupId>
                     <artifactId>embedmongo-maven-plugin</artifactId>
-                    <version>0.1.12</version>
+                    <version>0.3.4</version>
                 </plugin>
                 <plugin>
                     <groupId>com.kelveden</groupId>

seyren-integration-tests/pom.xml

@@ -194,6 +194,7 @@
                                 </goals>
                                 <configuration>
                                     <configFile>${basedir}/src/test/resources/karma-e2e.conf.js</configFile>
+                                    <karmaExecutable>${basedir}/../node_modules/.bin/karma</karmaExecutable>
                                 </configuration>
                             </execution>
                         </executions>

seyren-integration-tests/src/test/e2e/scenarios.js

@@ -18,15 +18,15 @@ describe('home page', function () {
         expect(element('table:eq(0) thead tr').count()).toBe(1);
         expect(element('table:eq(0) thead tr th:eq(0)').text()).toBe('Name');
         expect(element('table:eq(0) thead tr th:eq(1)').text()).toBe('State');
-        expect(element('table:eq(0) thead tr th:eq(2)').text()).toBe('Warn');
-        expect(element('table:eq(0) thead tr th:eq(3)').text()).toBe('Error');
+        expect(element('table:eq(0) thead tr th:eq(2)').text()).toBe('Warn level');
+        expect(element('table:eq(0) thead tr th:eq(3)').text()).toBe('Error level');
         expect(element('table:eq(0) thead tr th:eq(4)').text()).toBe('Enabled');
 
         expect(element('table:eq(0) tbody tr').count()).toBe(1);
         expect(element('table:eq(0) tbody tr td:eq(0) a').text()).toBe('load longterm usage');
         expect(element('table:eq(0) tbody tr td:eq(1) span:visible').text()).toBe('WARN');
         expect(element('table:eq(0) tbody tr td:eq(2)').text()).toBe('0.5');
-        expect(element('table:eq(0) tbody tr td:eq(3)').text()).toBe('2.0');
+        expect(element('table:eq(0) tbody tr td:eq(3)').text()).toBe('1,000');
         expect(element('table:eq(0) tbody tr td:eq(4) input:checked').val()).toBe('on');
     });
 
@@ -40,8 +40,8 @@ describe('home page', function () {
         expect(element('table:eq(1) thead tr th:eq(1)').text()).toBe('Time ago');
         expect(element('table:eq(1) thead tr th:eq(2)').text()).toBe('Name');
         expect(element('table:eq(1) thead tr th:eq(3)').text()).toBe('Value');
-        expect(element('table:eq(1) thead tr th:eq(4)').text()).toBe('Warn');
-        expect(element('table:eq(1) thead tr th:eq(5)').text()).toBe('Error');
+        expect(element('table:eq(1) thead tr th:eq(4)').text()).toBe('Warn level');
+        expect(element('table:eq(1) thead tr th:eq(5)').text()).toBe('Error level');
         expect(element('table:eq(1) thead tr th:eq(6)').text()).toBe('From');
         expect(element('table:eq(1) thead tr th:eq(7)').text()).toBe('To');
 
@@ -51,7 +51,7 @@ describe('home page', function () {
         expect(element('table:eq(1) tbody tr td:eq(2) a').text()).toBe('load longterm usage');
         expect(element('table:eq(1) tbody tr td:eq(3)').text()).toBe('0.8');
         expect(element('table:eq(1) tbody tr td:eq(4)').text()).toBe('0.5');
-        expect(element('table:eq(1) tbody tr td:eq(5)').text()).toBe('2');
+        expect(element('table:eq(1) tbody tr td:eq(5)').text()).toBe('1,000');
         expect(element('table:eq(1) tbody tr td:eq(6) span:visible').text()).toBe('WARN');
         expect(element('table:eq(1) tbody tr td:eq(7) span:visible').text()).toBe('OK');
     });
@@ -94,15 +94,15 @@ describe('checks page', function () {
         expect(element('table thead tr').count()).toBe(1);
         expect(element('table thead tr th:eq(0)').text()).toBe('Name');
         expect(element('table thead tr th:eq(1)').text()).toBe('State');
-        expect(element('table thead tr th:eq(2)').text()).toBe('Warn');
-        expect(element('table thead tr th:eq(3)').text()).toBe('Error');
+        expect(element('table thead tr th:eq(2)').text()).toBe('Warn level');
+        expect(element('table thead tr th:eq(3)').text()).toBe('Error level');
         expect(element('table thead tr th:eq(4)').text()).toBe('Enabled');
 
         expect(element('table tbody tr').count()).toBe(1);
         expect(element('table tbody tr td:eq(0) a').text()).toBe('load longterm usage');
         expect(element('table tbody tr td:eq(1) span:visible').text()).toBe('WARN');
         expect(element('table tbody tr td:eq(2)').text()).toBe('0.5');
-        expect(element('table tbody tr td:eq(3)').text()).toBe('2.0');
+        expect(element('table tbody tr td:eq(3)').text()).toBe('1,000');
         expect(element('table tbody tr td:eq(4) input:checked').val()).toBe('on');
     });
 
@@ -125,7 +125,7 @@ describe('check page', function () {
     it('should have a \'Subscriptions\' section', function () {
         expect(element('h2:eq(1)').count()).toBe(1);
         expect(element('h2:eq(1)').text()).toBe('Subscriptions');
-        expect(element('div.col-lg-12:eq(2) div').text()).toBe('This check has no subscriptions');
+        expect(element('#subscriptionsContent div').text()).toBe('This check has no subscriptions');
     });
 
     it('should have a \'Details\' informations', function () {
@@ -149,11 +149,11 @@ describe('check page', function () {
         expect(element('div.col-lg-6 div.detail-form:eq(5) label').text()).toBe('Until:');
         expect(element('div.col-lg-6 div.detail-form:eq(5) p').text()).toBe('');
 
-        expect(element('div.col-lg-6 div.detail-form:eq(6) label').text()).toBe('Warn:');
+        expect(element('div.col-lg-6 div.detail-form:eq(6) label').text()).toBe('Warn level:');
         expect(element('div.col-lg-6 div.detail-form:eq(6) p').text()).toBe('0.5');
 
-        expect(element('div.col-lg-6 div.detail-form:eq(7) label').text()).toBe('Error:');
-        expect(element('div.col-lg-6 div.detail-form:eq(7) p').text()).toBe('2.0');
+        expect(element('div.col-lg-6 div.detail-form:eq(7) label').text()).toBe('Error level:');
+        expect(element('div.col-lg-6 div.detail-form:eq(7) p').text()).toBe('1,000');
 
         expect(element('div.col-lg-6 div.detail-form:eq(8) label').text()).toBe('Enabled:');
         expect(element('div.col-lg-6 div.detail-form:eq(8) p input:checked').val()).toBe('on');
@@ -207,7 +207,7 @@ describe('check page', function () {
         expect(element('table:eq(1) tbody tr td:eq(2)').text()).toBe('prod.host1.load.longterm');
         expect(element('table:eq(1) tbody tr td:eq(3)').text()).toBe('0.8');
         expect(element('table:eq(1) tbody tr td:eq(4)').text()).toBe('0.5');
-        expect(element('table:eq(1) tbody tr td:eq(5)').text()).toBe('2');
+        expect(element('table:eq(1) tbody tr td:eq(5)').text()).toBe('1,000');
         expect(element('table:eq(1) tbody tr td:eq(6) span:visible').text()).toBe('WARN');
         expect(element('table:eq(1) tbody tr td:eq(7) span:visible').text()).toBe('OK');
     });
@@ -376,10 +376,10 @@ describe('create new check', function () {
         input('check\\.description').enter('Description of karma.metric');
         input('check\\.target').enter('karma.metric');
         input('check\\.warn').enter('2.0');
-        input('check\\.error').enter('4.0');
+        input('check\\.error').enter('1000');
         input('check\\.enabled').check();
 
-        expect(element('div#editCheckModal img').attr('src')).toBe('./api/chart/karma.metric/?&width=365&height=70&from=-1day&warn=2.0&error=4.0&hideLegend=true');
+        expect(element('div#editCheckModal img').attr('src')).toBe('./api/chart/karma.metric/?&width=365&height=70&from=-1day&warn=2.0&error=1000&hideLegend=true');
 
         expect(element('button#createCheckButton:visible:enabled').count()).toEqual(1);
         expect(element('button#cancelCheckButton:visible:enabled').count()).toEqual(1);

seyren-integration-tests/src/test/resources/com/seyren/integrationtests/mongo/alerts/alerts_1.json

@@ -3,7 +3,7 @@
     "timestamp": { "$date": "2013-07-12T14:15:59.497Z"},
     "warn" : "0.5",
     "checkId" : "5205121fccf2a07eacba64da",
-    "error" : "2.0",
+    "error" : "1000",
     "value" : "0.8",
     "target" : "prod.host1.load.longterm",
     "toType" : "OK",

seyren-integration-tests/src/test/resources/com/seyren/integrationtests/mongo/checks/checks_1.json

@@ -4,7 +4,7 @@
     description: "Load longterm of host host1",
     target: "prod.host1.load.longterm",
     warn: "0.5",
-    error: "2.0",
+    error: "1000",
     enabled: true,
     state: "WARN",
     "lastCheck": { "$date": "2013-07-12T10:10:00.000Z"},

seyren-web/src/main/webapp/css/override-bootstrap.css

@@ -53,3 +53,7 @@ body {
     padding-right: 10px;
     padding-left: 10px;
 }
+
+.glyphicon-blue {
+    color: #0000bf;
+}

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>
@@ -114,7 +114,7 @@ <h2><strong>Subscriptions</strong></h2>
                 </div>
             </div>
             <div class="row">
-                <div class="col-lg-12">
+                <div class="col-lg-12" id="subscriptionsContent">
                     <div ng-hide="check.subscriptions">This check has no subscriptions</div>
                     <table class="table table-bordered table-striped table-hover" ng-show="check.subscriptions">
                         <thead>
@@ -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>

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>

seyren-web/src/main/webapp/html/home.html

@@ -6,8 +6,8 @@ <h2><strong>Checks in an unhealthy state</strong></h2>
             <tr>
                 <th>Name</th>
                 <th>State</th>
-                <th>Warn</th>
-                <th>Error</th>
+                <th>Warn level</th>
+                <th>Error level</th>
                 <th>Enabled</th>
             </tr>
         </thead>
@@ -23,8 +23,8 @@ <h2><strong>Checks in an unhealthy state</strong></h2>
                     <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>
@@ -41,22 +41,22 @@ <h2><strong>Recent alerts</strong></h2>
                 <th>Time ago</th>
                 <th>Name</th>
                 <th>Value</th>
-                <th>Warn</th>
-                <th>Error</th>
+                <th>Warn level</th>
+                <th>Error level</th>
                 <th>From</th>
                 <th>To</th>
             </tr>
         </thead>
         <tbody>
             <tr ng-repeat="alert in alertStream.values" ng-click="selectCheck(alert.checkId)" style="cursor: pointer;">
-                <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 title="{{ alert.target }}">
                     <a href='#/checks/{{ alert.checkId }}'>{{ checkNames[alert.checkId] }}</a>
                 </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>