Various UI improvements

.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

@@ -167,6 +167,10 @@ docker-compose up
 and open [http://localhost:8080/seyren](http://localhost:8080/seyren).
 Graphite is available on [http://localhost:8081/](http://localhost:8081/) with Basic Auth guest/guest.
 
+If you prefer to run only Seyren's dependencies within Docker, for example so that you can run Seyren from an IDE, use:
+
+    docker-compose -f docker-compose.yml up
+
 ## Init script
 
 [Seyren-Init](https://github.com/wingZero21/Seyren-Init) is an init.d script which allows you to start the service.
@@ -180,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

docker-compose.override.yml

@@ -0,0 +1,18 @@
+web:
+  build: seyren-web
+  links:
+    - mongodb
+    - graphite
+  command: /bin/bash -c "mvn clean install -am -pl seyren-web -Dmaven.test.skip && /usr/share/maven/bin/mvn tomcat7:run-war -pl seyren-web"
+  environment:
+    MONGO_URL: mongodb://mongodb:27017/seyren
+    GRAPHITE_URL: http://graphite
+    GRAPHITE_USERNAME: guest
+    GRAPHITE_PASSWORD: guest
+    SEYREN_LOG_PATH: /root
+  volumes:
+    - ./:/data
+    - ~/.m2:/root/.m2
+  ports:
+    - 8080:8080
+    - 8000:8000

docker-compose.yml

@@ -19,22 +19,3 @@ collectd:
     GRAPHITE_HOST: graphite
     GRAPHITE_PORT: 2003
     INSTANCE_ID: seyren
-
-web:
-  build: seyren-web
-  links:
-    - mongodb
-    - graphite
-  command: /bin/bash -c "/usr/share/maven/bin/mvn clean install -am -pl seyren-web -Dmaven.test.skip && /usr/share/maven/bin/mvn tomcat7:run-war -pl seyren-web"
-  environment:
-    MONGO_URL: mongodb://mongodb:27017/seyren
-    GRAPHITE_URL: http://graphite
-    GRAPHITE_USERNAME: guest
-    GRAPHITE_PASSWORD: guest
-    SEYREN_LOG_PATH: /root
-  volumes:
-    - ./:/data
-    - ~/.m2:/root/.m2
-  ports:
-    - 8080:8080
-    - 8000:8000

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-mongo/src/main/java/com/seyren/mongo/MongoStore.java

@@ -104,8 +104,9 @@ private void removeOldIndices() {
         try {
             getAlertsCollection().dropIndex(new BasicDBObject("checkId", 1).append("target", 1));
         } catch (MongoCommandException e) {
-            if (e.getCode() != 27) {
-                // 27 is the code which appears when the index doesn't exist (which we're happy with, anything else is bad news)
+            if (e.getCode() != 27 && e.getCode() != -1) {
+                // -1 is the code which appears when the index doesn't exist (which we're happy with, anything else is
+                // bad news)
                 throw e;
             }
         }

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

@@ -1,4 +1,10 @@
-    <div class="row" ng-show="graphsEnabled()">
+    <div class="row" ng-show="!checkExists">
+        <div class="col-lg-12">
+            <h1>Not Found</h1>
+            <p>Check was not found. Maybe it has been deleted?</p>
+        </div>
+    </div>
+    <div class="row" ng-show="checkExists && graphsEnabled()">
         <div class="col-lg-12">
             <div class="col-lg-3 graph" ng-repeat="graph in graphs">
                 <div class="thumbnail">
@@ -10,10 +16,10 @@ <h6 style="margin: 0px 0;"><strong>{{ graph.description }}</strong></h6>
             </div>
         </div>
     </div>
-    <div class="row">
+    <div class="row" ng-show="checkExists && check != null">
         <div class="col-lg-6">
             <div class="row">
-                <div class="col-lg-7">
+                <div class="col-lg-12">
                     <h2><strong>Details</strong> <small>[<a class="" data-keyboard="true" data-toggle="modal" data-show="true" href="" ng-click="editCheck(check)">edit</a>]</small></h2>
                 </div>
             </div>
@@ -61,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">
@@ -93,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>
@@ -103,14 +109,14 @@ <h2><strong>Details</strong> <small>[<a class="" data-keyboard="true" data-toggl
                 <div class="col-lg-8">
                     <h2><strong>Subscriptions</strong></h2>
                 </div>
-                <div class="col-lg-2">
+                <div class="col-lg-4">
                     <p></p><p><button id="editSubscaddriptionButton" class="btn btn-success" data-keyboard="true" data-toggle="modal" data-show="true" href="#editSubscriptionModal" ng-click="editSubscription(check, 'new')"><i class="glyphicon glyphicon-volume-up glyphicon-white"></i>&nbsp;Add subscription</button></p>
                 </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" style="cursor: pointer;">
+                    <table class="table table-bordered table-striped table-hover" ng-show="check.subscriptions">
                         <thead>
                             <tr>
                                 <th>Target</th>
@@ -162,7 +168,7 @@ <h2><strong>Subscriptions</strong></h2>
             </div>
         </div>
     </div>
-    <div class="row">
+    <div class="row" ng-show="checkExists && check != null">
         <div class="col-lg-12">
         <h2>
             <strong>Alerts</strong> <small>( {{alerts.start}} of {{alerts.total}} )</small>
@@ -199,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>
@@ -224,10 +230,10 @@ <h2>
         </table>
         </div>
     </div>
-    <div class="row">
+    <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>