From 9d1dac08a509bb9b657e6c007fb2348797f6b8d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20W=C3=B3jcik?= Date: Thu, 8 Nov 2018 10:24:01 +0100 Subject: [PATCH 01/13] Adding a toolbar that contains information about connectivity to SC and SC Monitoring --- .../ServicePulse.Host.csproj | 2 + src/ServicePulse.Host/app/css/particular.css | 16 +++++- .../app/js/app.controller.js | 6 +-- .../app/js/directives/ui.particular.js | 1 + src/ServicePulse.Host/app/layout/footer.html | 50 +++++++++++++------ ...particular.monitoringConnectivityStatus.js | 32 ++++++++++++ ...ular.monitoringConnectivityStatus.tpl.html | 9 ++++ .../monitoring/js/endpoint_details.module.js | 1 + .../js/monitored_endpoints.module.js | 1 + .../services/services.connectivityNotifier.js | 21 ++++++-- 10 files changed, 116 insertions(+), 23 deletions(-) create mode 100644 src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.monitoringConnectivityStatus.js create mode 100644 src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.monitoringConnectivityStatus.tpl.html diff --git a/src/ServicePulse.Host/ServicePulse.Host.csproj b/src/ServicePulse.Host/ServicePulse.Host.csproj index 3b9fe88988..3b61a69655 100644 --- a/src/ServicePulse.Host/ServicePulse.Host.csproj +++ b/src/ServicePulse.Host/ServicePulse.Host.csproj @@ -105,6 +105,8 @@ + + diff --git a/src/ServicePulse.Host/app/css/particular.css b/src/ServicePulse.Host/app/css/particular.css index 36fef08841..e443623748 100644 --- a/src/ServicePulse.Host/app/css/particular.css +++ b/src/ServicePulse.Host/app/css/particular.css @@ -2155,7 +2155,7 @@ i.fa-exclamation-triangle { background-repeat: no-repeat; } -.pa-monitoring-lost.endpoint-details { +.pa-monitoring-lost.endpoint-details, .pa-connection-failed { background-image: url('../../../img/monitoring-lost.svg'); background-position: center; background-repeat: no-repeat; @@ -2173,6 +2173,20 @@ i.fa-exclamation-triangle { position: relative; } +.connectivity-status i, .connectivity-status div.pa-connection-success { + width: 10px; + height: 10px; +} + +.connectivity-status .connection-failed { + color: #CE4844; +} + +.connectivity-status .pa-connection-success { + border-radius: 50%; + background: #00C468; +} + .endpoint-message-types .endpoint-status { margin-top: -8px; } diff --git a/src/ServicePulse.Host/app/js/app.controller.js b/src/ServicePulse.Host/app/js/app.controller.js index c5ebe09956..a75e4f62f1 100644 --- a/src/ServicePulse.Host/app/js/app.controller.js +++ b/src/ServicePulse.Host/app/js/app.controller.js @@ -118,10 +118,10 @@ switch(data) { case 'SignalR started': - toastService.showInfo('Connected to ServiceControl'); + $scope.isSCConnected = true; break; case 'Reconnected': - toastService.showInfo('Reconnected to ServiceControl'); + $scope.isSCConnected = true; break; default: toastService.showWarning(data); @@ -132,7 +132,7 @@ notifier.subscribe($scope, function(event, data) { logit(event, data); - toastService.showError(data); + $scope.isSCConnected = false; }, 'SignalRError'); notifier.subscribe($scope, function(event, data) { diff --git a/src/ServicePulse.Host/app/js/directives/ui.particular.js b/src/ServicePulse.Host/app/js/directives/ui.particular.js index 305a1d21b4..c488870572 100644 --- a/src/ServicePulse.Host/app/js/directives/ui.particular.js +++ b/src/ServicePulse.Host/app/js/directives/ui.particular.js @@ -22,6 +22,7 @@ 'ui.particular.graphdecimal', 'ui.particular.multicheckboxList', 'ui.particular.reindexingstatus', + 'ui.particular.monitoringConnectivityStatus' ]); } (window, window.angular)); \ No newline at end of file diff --git a/src/ServicePulse.Host/app/layout/footer.html b/src/ServicePulse.Host/app/layout/footer.html index 81b663efd7..1948d48541 100644 --- a/src/ServicePulse.Host/app/layout/footer.html +++ b/src/ServicePulse.Host/app/layout/footer.html @@ -4,25 +4,45 @@
- - - © Particular Software - - - • +
+ + © Particular Software + +
- - ServicePulse documentation - +
+ + + +
- • +
+ + ServicePulse documentation + +
+ +
+ + support@particular.net + +
- - support@particular.net - +
+ + Service Control: + +
Connected + + + Not connected + -
-
+ + +
+
+ diff --git a/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.monitoringConnectivityStatus.js b/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.monitoringConnectivityStatus.js new file mode 100644 index 0000000000..778af0a60b --- /dev/null +++ b/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.monitoringConnectivityStatus.js @@ -0,0 +1,32 @@ + +; (function (window, angular, $, undefined) { + 'use strict'; + + + function controller($scope, connectivityNotifier) { + connectivityNotifier.getConnectionStatusSource().subscribe(value => { + $scope.isSCMonitoringConnected = value; + }); + } + + controller.$inject = ['$scope', 'connectivityNotifier']; + + function directive() { + return { + scope: {}, + restrict: 'E', + replace: true, + templateUrl: 'modules/monitoring/js/directives/ui.particular.monitoringConnectivityStatus.tpl.html', + controller: controller, + link: function (scope, element) { } + }; + } + + directive.$inject = []; + + angular + .module('ui.particular.monitoringConnectivityStatus', []) + .directive('monitoringConnectivityStatus', directive); + +}(window, window.angular, window.jQuery)); + diff --git a/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.monitoringConnectivityStatus.tpl.html b/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.monitoringConnectivityStatus.tpl.html new file mode 100644 index 0000000000..81978189d7 --- /dev/null +++ b/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.monitoringConnectivityStatus.tpl.html @@ -0,0 +1,9 @@ + + SC Monitoring: + +
Connected + + + Not connected + + \ No newline at end of file diff --git a/src/ServicePulse.Host/app/modules/monitoring/js/endpoint_details.module.js b/src/ServicePulse.Host/app/modules/monitoring/js/endpoint_details.module.js index 5fe8dd02fb..fbdf651623 100644 --- a/src/ServicePulse.Host/app/modules/monitoring/js/endpoint_details.module.js +++ b/src/ServicePulse.Host/app/modules/monitoring/js/endpoint_details.module.js @@ -9,6 +9,7 @@ require('./endpoint_details.route.js'); require('./constant.diagrams.js'); + require('./directives/ui.particular.monitoringConnectivityStatus.js'); require('./directives/ui.particular.graph.js'); require('./directives/ui.particular.graphdecimal.js'); require('./directives/ui.particular.duration.js'); diff --git a/src/ServicePulse.Host/app/modules/monitoring/js/monitored_endpoints.module.js b/src/ServicePulse.Host/app/modules/monitoring/js/monitored_endpoints.module.js index 7d9158e47d..8265c484e7 100644 --- a/src/ServicePulse.Host/app/modules/monitoring/js/monitored_endpoints.module.js +++ b/src/ServicePulse.Host/app/modules/monitoring/js/monitored_endpoints.module.js @@ -8,6 +8,7 @@ require('./monitored_endpoints.route.js'); require('./constant.diagrams.js'); + require('./directives/ui.particular.monitoringConnectivityStatus.js'); require('./directives/ui.particular.graph.js'); require('./directives/ui.particular.graphdecimal.js'); require('./directives/ui.particular.graphduration.js'); diff --git a/src/ServicePulse.Host/app/modules/monitoring/js/services/services.connectivityNotifier.js b/src/ServicePulse.Host/app/modules/monitoring/js/services/services.connectivityNotifier.js index 25355fb7a8..cae356dc64 100644 --- a/src/ServicePulse.Host/app/modules/monitoring/js/services/services.connectivityNotifier.js +++ b/src/ServicePulse.Host/app/modules/monitoring/js/services/services.connectivityNotifier.js @@ -5,7 +5,8 @@ function Service(toastService, scConfig) { var isConnectedToSourceIndex = Array(scConfig.monitoring_urls.length).fill(true); - + var connectivitySource = new Rx.Subject(); + function reportFailedConnection(sourceIndex) { if (isConnectedToSourceIndex[sourceIndex]) { @@ -13,9 +14,10 @@ if (scConfig.monitoring_urls.length > 1) { message = 'Could not connect to the ServiceControl Monitoring service at' + scConfig.monitoring_urls[sourceIndex] + '.'; } - toastService.showError(message); + console.log(message); } isConnectedToSourceIndex[sourceIndex] = false; + emitChange(isConnectedToSourceIndex); } function reportSuccessfulConnection(sourceIndex) { @@ -24,14 +26,25 @@ if (scConfig.monitoring_urls.length > 1) { message = 'Connection to ServiceControl Monitoring service was successful ' + scConfig.monitoring_urls[sourceIndex] +'.'; } - toastService.showInfo(message, 'Info', true); + console.log(message); } isConnectedToSourceIndex[sourceIndex] = true; + emitChange(isConnectedToSourceIndex); + } + + function emitChange(connectedToSourceIndex) { + var result = connectedToSourceIndex.every(item => item); + connectivitySource.onNext(result); + }; + + function getConnectionStatusSource() { + return connectivitySource; } var service = { reportFailedConnection: reportFailedConnection, - reportSuccessfulConnection: reportSuccessfulConnection + reportSuccessfulConnection: reportSuccessfulConnection, + getConnectionStatusSource: getConnectionStatusSource, }; return service; From 944581896c8af4423d7cccf96d93d12ffdddb60c Mon Sep 17 00:00:00 2001 From: Sergio Date: Thu, 8 Nov 2018 17:39:12 +0100 Subject: [PATCH 02/13] footer stick to bottom and layout tweaking --- src/ServicePulse.Host/app/css/particular.css | 50 ++++++++++----- src/ServicePulse.Host/app/js/app.constants.js | 4 +- .../ui.particular.productVersion.tpl.html | 6 -- src/ServicePulse.Host/app/layout/footer.html | 64 ++++++------------- 4 files changed, 58 insertions(+), 66 deletions(-) diff --git a/src/ServicePulse.Host/app/css/particular.css b/src/ServicePulse.Host/app/css/particular.css index e443623748..e691eb1253 100644 --- a/src/ServicePulse.Host/app/css/particular.css +++ b/src/ServicePulse.Host/app/css/particular.css @@ -95,6 +95,7 @@ body { color: #181919; overflow-y: scroll; padding-top: 100px; + padding-bottom: 100px; } pre { @@ -105,7 +106,7 @@ footer { color: #bcc6c2; font-size: 14px; font-weight: normal; - height: 60px; + height: 38px; margin-top: 100px; padding: 5px 0; text-align: left; @@ -2173,20 +2174,6 @@ i.fa-exclamation-triangle { position: relative; } -.connectivity-status i, .connectivity-status div.pa-connection-success { - width: 10px; - height: 10px; -} - -.connectivity-status .connection-failed { - color: #CE4844; -} - -.connectivity-status .pa-connection-success { - border-radius: 50%; - background: #00C468; -} - .endpoint-message-types .endpoint-status { margin-top: -8px; } @@ -2248,6 +2235,39 @@ i.fa.pa-endpoint-lost.endpoints-overview, i.fa.pa-monitoring-lost.endpoints-over padding: 10px 6px; } +footer { + background-color: #fff; + position: fixed; + bottom: 0; +} + +footer span { + padding-left: 0; + padding-right: 32px; +} + +footer span[class="ng-isolate-scope"], footer span[ng-if="isSCMonitoringConnected"] { + padding-right: 0; +} + +.connectivity-status div, .connectivity-status span { + display: inline-block; +} + +.connectivity-status i, .connectivity-status div.pa-connection-success { + width: 10px; + height: 10px; +} + +.connectivity-status .connection-failed { + color: #CE4844; +} + +.connectivity-status .pa-connection-success { + border-radius: 50%; + background: #00C468; +} + @media (min-width: 0px) { .container { width: 92%; diff --git a/src/ServicePulse.Host/app/js/app.constants.js b/src/ServicePulse.Host/app/js/app.constants.js index 00f43c744b..2c47288544 100644 --- a/src/ServicePulse.Host/app/js/app.constants.js +++ b/src/ServicePulse.Host/app/js/app.constants.js @@ -5,8 +5,8 @@ .constant('showPendingRetry', false) .constant('scConfig', { default_route: '/dashboard', - service_control_url: 'http://localhost:33333/api/', - monitoring_urls: ['http://localhost:33633/'] + service_control_url: 'http://localhost:33533/api/', + monitoring_urls: ['http://localhost:33833/'] }); }(window, window.angular)); diff --git a/src/ServicePulse.Host/app/js/directives/ui.particular.productVersion.tpl.html b/src/ServicePulse.Host/app/js/directives/ui.particular.productVersion.tpl.html index cd0b61b85d..e716794205 100644 --- a/src/ServicePulse.Host/app/js/directives/ui.particular.productVersion.tpl.html +++ b/src/ServicePulse.Host/app/js/directives/ui.particular.productVersion.tpl.html @@ -16,12 +16,6 @@ -
- - • - -
-
diff --git a/src/ServicePulse.Host/app/layout/footer.html b/src/ServicePulse.Host/app/layout/footer.html index 1948d48541..1977df43a8 100644 --- a/src/ServicePulse.Host/app/layout/footer.html +++ b/src/ServicePulse.Host/app/layout/footer.html @@ -1,49 +1,27 @@  From 086b6dfe7d3b6ae2938126c25e7d3b4e3ba45bf4 Mon Sep 17 00:00:00 2001 From: Sergio Date: Thu, 8 Nov 2018 17:49:59 +0100 Subject: [PATCH 03/13] further footer tweaks --- src/ServicePulse.Host/app/css/particular.css | 20 ++++++++++++++++---- src/ServicePulse.Host/app/layout/footer.html | 19 +++++++++---------- 2 files changed, 25 insertions(+), 14 deletions(-) diff --git a/src/ServicePulse.Host/app/css/particular.css b/src/ServicePulse.Host/app/css/particular.css index e691eb1253..dfe579c9d7 100644 --- a/src/ServicePulse.Host/app/css/particular.css +++ b/src/ServicePulse.Host/app/css/particular.css @@ -106,7 +106,7 @@ footer { color: #bcc6c2; font-size: 14px; font-weight: normal; - height: 38px; + height: 31px; margin-top: 100px; padding: 5px 0; text-align: left; @@ -900,6 +900,7 @@ p.endpoint-metadata { .version-info-container { width: 100% !important; + margin-top: -4px; } .version-info { @@ -2239,6 +2240,12 @@ footer { background-color: #fff; position: fixed; bottom: 0; + border: 1px solid #ddd; +} + +footer .row { + display: flex; + justify-content: space-between; } footer span { @@ -2246,12 +2253,17 @@ footer span { padding-right: 32px; } -footer span[class="ng-isolate-scope"], footer span[ng-if="isSCMonitoringConnected"] { - padding-right: 0; -} + footer span[ng-if="isSCConnected"], footer span[ng-if="isSCMonitoringConnected"] { + color: #000; + } + + footer span[class="ng-isolate-scope"], footer span[ng-if="isSCMonitoringConnected"] { + padding-right: 0; + } .connectivity-status div, .connectivity-status span { display: inline-block; + color: #777f7f; } .connectivity-status i, .connectivity-status div.pa-connection-success { diff --git a/src/ServicePulse.Host/app/layout/footer.html b/src/ServicePulse.Host/app/layout/footer.html index 1977df43a8..20d4a84a55 100644 --- a/src/ServicePulse.Host/app/layout/footer.html +++ b/src/ServicePulse.Host/app/layout/footer.html @@ -1,15 +1,14 @@