From 185cd75216ae3a5fe88c5b6656361588c259f002 Mon Sep 17 00:00:00 2001 From: Shannon Carey 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) --- .travis.yml | 2 +- README.md | 10 +++--- package.json | 15 ++++++++ pom.xml | 2 +- seyren-integration-tests/pom.xml | 1 + .../src/test/e2e/scenarios.js | 32 ++++++++--------- .../mongo/alerts/alerts_1.json | 2 +- .../mongo/checks/checks_1.json | 2 +- .../main/webapp/css/override-bootstrap.css | 4 +++ seyren-web/src/main/webapp/html/check.html | 22 ++++++------ seyren-web/src/main/webapp/html/checks.html | 8 ++--- seyren-web/src/main/webapp/html/home.html | 20 +++++------ .../main/webapp/html/modal-partial-check.html | 36 ++++++++++--------- .../main/webapp/js/check-edit-controller.js | 13 +++++++ 14 files changed, 103 insertions(+), 66 deletions(-) create mode 100644 package.json diff --git a/.travis.yml b/.travis.yml index f7340a9f..b51c5e4b 100644 --- a/.travis.yml +++ b/.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" diff --git a/README.md b/README.md index 67ff1711..6a0ada9e 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json new file mode 100644 index 00000000..c16d45d1 --- /dev/null +++ b/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" +} diff --git a/pom.xml b/pom.xml index a41a4b13..692a1aad 100755 --- a/pom.xml +++ b/pom.xml @@ -91,7 +91,7 @@ com.github.joelittlejohn.embedmongo embedmongo-maven-plugin - 0.1.12 + 0.3.4 com.kelveden diff --git a/seyren-integration-tests/pom.xml b/seyren-integration-tests/pom.xml index 1edd1040..37c6b2ac 100755 --- a/seyren-integration-tests/pom.xml +++ b/seyren-integration-tests/pom.xml @@ -194,6 +194,7 @@ ${basedir}/src/test/resources/karma-e2e.conf.js + ${basedir}/../node_modules/.bin/karma diff --git a/seyren-integration-tests/src/test/e2e/scenarios.js b/seyren-integration-tests/src/test/e2e/scenarios.js index 0d1f66f3..5f92657d 100644 --- a/seyren-integration-tests/src/test/e2e/scenarios.js +++ b/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); diff --git a/seyren-integration-tests/src/test/resources/com/seyren/integrationtests/mongo/alerts/alerts_1.json b/seyren-integration-tests/src/test/resources/com/seyren/integrationtests/mongo/alerts/alerts_1.json index d23d969f..a583e010 100644 --- a/seyren-integration-tests/src/test/resources/com/seyren/integrationtests/mongo/alerts/alerts_1.json +++ b/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", diff --git a/seyren-integration-tests/src/test/resources/com/seyren/integrationtests/mongo/checks/checks_1.json b/seyren-integration-tests/src/test/resources/com/seyren/integrationtests/mongo/checks/checks_1.json index 31d4ac79..71173319 100644 --- a/seyren-integration-tests/src/test/resources/com/seyren/integrationtests/mongo/checks/checks_1.json +++ b/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"}, 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..38d61814 100644 --- a/seyren-web/src/main/webapp/html/check.html +++ b/seyren-web/src/main/webapp/html/check.html @@ -67,15 +67,15 @@

Details [
- +
-

{{check.warn}}

+

{{check.warn | number}}

- +
-

{{check.error}}

+

{{check.error | number}}

@@ -99,7 +99,7 @@

Details [
-

{{check.lastCheck | date: 'yyyy-MM-dd HH:mm:ss'}}

+

{{check.lastCheck | date: 'yyyy-MM-dd HH:mm:ssZ'}}

@@ -114,7 +114,7 @@

Subscriptions

-
+
This check has no subscriptions
@@ -205,12 +205,12 @@

- + - - - + + + - - + + @@ -38,8 +38,8 @@

Checks

{{ check.state }}{{ check.state }} - - + + diff --git a/seyren-web/src/main/webapp/html/home.html b/seyren-web/src/main/webapp/html/home.html index 31858ee3..217f14bd 100755 --- a/seyren-web/src/main/webapp/html/home.html +++ b/seyren-web/src/main/webapp/html/home.html @@ -6,8 +6,8 @@

Checks in an unhealthy state

- - + + @@ -23,8 +23,8 @@

Checks in an unhealthy state

{{ check.state }}{{ check.state }} - - + + @@ -41,22 +41,22 @@

Recent alerts

- - + + - + - - - + + +
{{ alert.timestamp | date: 'yyyy-MM-dd HH:mm:ss' }}{{ alert.timestamp | date: 'yyyy-MM-dd HH:mm:ssZ' }} {{ alert.target }}{{ alert.value }}{{ alert.warn }}{{ alert.error }}{{ alert.value | number }}{{ alert.warn | number }}{{ alert.error | number }} {{ alert.fromType }} {{ alert.fromType }} @@ -233,7 +233,7 @@

- +
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 @@

Checks

Name StateWarnErrorWarn levelError level Enabled
{{ check.warn }}{{ check.error }}{{ check.warn | number }}{{ check.error | number }}
Name StateWarnErrorWarn levelError level Enabled
{{ check.warn }}{{ check.error }}{{ check.warn | number }}{{ check.error | number }}
Time ago Name ValueWarnErrorWarn levelError level From To
{{ alert.timestamp | date: 'yyyy-MM-dd HH:mm:ss' }}{{ alert.timestamp | date: 'yyyy-MM-dd HH:mm:ssZ' }} {{ checkNames[alert.checkId] }} {{ alert.value }}{{ alert.warn }}{{ alert.error }}{{ alert.value | number }}{{ alert.warn | number }}{{ alert.error | number }} {{ alert.fromType }} {{ alert.fromType }} 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 @@

Edit check

-
+
-
- +
+
- -
-
- -
+ +
-
+
- -
+ +
-
- -
-
+
@@ -78,7 +82,7 @@

Edit check

-
+
Metrics found: {{ check.totalMetric }}
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 ' + + 'the Graphite' + + ' documentation. Only the most recent value of each series returned will be used.', + trigger: 'click' + }); }); $scope.create = function () {