Adding an icon indicating lost connection to sc monitoring

src/ServicePulse.Host/ServicePulse.Host.csproj

@@ -85,7 +85,10 @@
     <Content Include="app\css\animate-css\animate.css" />
     <Content Include="app\css\animate-css\animate.min.css" />
     <Content Include="app\css\particular.css" />
+    <Content Include="app\img\endpoint-lost.svg" />
     <Content Include="app\img\endpoint.svg" />
+    <Content Include="app\img\logo.svg" />
+    <Content Include="app\img\monitoring-lost.svg" />
     <Content Include="app\img\redirect-destination.svg" />
     <Content Include="app\img\redirect-source.svg" />
     <Content Include="app\js\app.http.js" />
@@ -111,6 +114,7 @@
     <Content Include="app\js\services\factory.shareddata.js" />
     <Content Include="app\js\services\service.formatter.js" />
     <Content Include="app\modules\monitoring\js\directives\ui.particular.metricslargenumber.js" />
+    <Content Include="app\modules\monitoring\js\services\services.connectivityNotifier.js" />
     <Content Include="app\modules\monitoring\js\services\services.monitoring.js" />
     <Content Include="app\js\services\services.endpoints.js" />
     <Content Include="app\js\views\about\controller.js" />

src/ServicePulse.Host/app/css/particular.css

@@ -452,12 +452,12 @@ h3 {
     text-align: center;
 }
 
-    .summary-item .badge, .summary-item .label {
-        font-size: 18px;
-        margin-left: 12px;
-        position: absolute;
-        top: 2px;
-    }
+.summary-item .badge, .summary-item .label {
+    font-size: 18px;
+    margin-left: 12px;
+    position: absolute;
+    top: 2px;
+}
 
 .summary-info, .summary-info > .fa, a.summary-info:hover {
     color: #777f7f;
@@ -567,6 +567,10 @@ h1 {
     margin: 0 0 32px;
 }
 
+h1 .warning {
+    font-size: 26px;
+}
+
 p.metadata {
     margin-bottom: 6px;
 }
@@ -1734,12 +1738,26 @@ hr.top-separator {
 }
 
 .monitoring-no-data {
-    margin: 60px 0 120px;
+    margin: 60px auto 120px;
+    max-width: 520px;
+    line-height: 26px;
+}
+
+.monitoring-no-data h1 {
+    font-size: 30px;
 }
 
 .monitoring-no-data p {
     font-size: 16px;
     margin-bottom: 20px;
+    margin-top: -18px;
+}
+
+.monitoring-no-data ul {
+    padding-left: 0;
+    text-align: left;
+    font-size: 16px;
+    margin-bottom: 30px;
 }
 
 .monitoring-no-data .btn {
@@ -1776,7 +1794,7 @@ hr.top-separator {
       font-size: 12px;
       text-transform: uppercase;
       color: #181919;
-      display: inline-block;
+      text-transform: initial;
   }
 
 .table-head-row span.table-header-unit {
@@ -1796,10 +1814,9 @@ p.col-sort-active {
     margin-top: 15px;
 }
 
-    .endpoint-name a:hover {
-        text-decoration: none !important;
-        margin-top: 20px;
-    }
+.endpoint-name a:hover {
+    text-decoration: none !important;
+}
 
 .tooltip-inner {
     width: 200px;
@@ -1808,6 +1825,7 @@ p.col-sort-active {
 .endpoint-status {
     display: inline-block;
     position: absolute;
+    top: 1px;
     margin-left: 7px;
 }
 
@@ -1821,34 +1839,58 @@ h1 .endpoint-status i.fa-envelope, .endpoint-status i.fa-exclamation-triangle {
 }
 
 .endpoint-status i.fa-envelope {
-    position: relative;
     color: #777f7f;
 }
 
 .endpoint-status i.fa-envelope:hover {
     color: #23527c;
 }
 
-.endpoint-status i.fa-exclamation-triangle {
-    position: relative;
-    top: 1px;
-    margin-right: 6px;
-}
-
 .endpoint-status .badge {
     position: relative;
-    top: 6px;
+    top: 8px;
     font-size: 10px;
     margin-right: 0;
     left: -10px;
 }
 
 .endpoint-status i.fa-envelope, .endpoint-name i.fa-exclamation-triangle {
     font-size: 20px;
-    color: #CE4844;
     margin-left: 6px;
 }
 
+.endpoint-status a {
+    position: relative;
+    top: -8px;
+    padding-left: 0;
+}
+
+.endpoint-status a:hover {
+    text-decoration: none;
+}
+
+.monitoring-head .endpoint-status {
+    top: 0;
+}
+
+.monitoring-head .endpoint-status a {
+    top: 0;
+}
+
+.monitoring-head i.fa.fa-envelope {
+    font-size: 26px;
+    position: relative;
+    top: -4px;
+    left: 1px;
+}
+
+.monitoring-head .endpoint-status .badge {
+    position: relative;
+    top: 4px;
+    left: -12px;
+    font-size: 10px;
+}
+
 .endpoint-status .badge {
     position: relative;
     top: 2px;
@@ -1933,6 +1975,10 @@ h1 .endpoint-status i.fa-envelope, .endpoint-status i.fa-exclamation-triangle {
     font-size: 22px;
 }
 
+.metric-digest-value div {
+    display: inline-block;
+}
+
 .metric-digest-value-suffix {
     font-weight: normal;
     font-size: 14px;
@@ -1948,7 +1994,7 @@ h1 .endpoint-status i.fa-envelope, .endpoint-status i.fa-exclamation-triangle {
     margin-right: 24px;
     color: #8C8C8C;
     font-weight: normal;
-    font-size: 14px;
+    font-size: 12px;
     float: left;
 }
 
@@ -2006,16 +2052,71 @@ i.fa-exclamation-triangle {
      display: inline-block;
 }
 
-.back-nav
-{
-    position: absolute;
-    top: 80px;
+.back-nav {
     text-transform: uppercase;
     margin-bottom: 6px;
     font-size: 13px;
 }
 
-.monitoring-head .back-nav {
-    position: absolute;
-    top: 80px;
+.pa-endpoint-lost.endpoints-overview {
+    background-image: url('../../img/endpoint-lost.svg');
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.pa-monitoring-lost.endpoints-overview {
+    background-image: url('../../img/monitoring-lost.svg');
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.pa-endpoint-lost.endpoint-details {
+    background-image: url('../../../img/endpoint-lost.svg');
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.pa-monitoring-lost.endpoint-details {
+    background-image: url('../../../img/monitoring-lost.svg');
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.monitoring-head .endpoint-status .pa-endpoint-lost.endpoint-details, .monitoring-head .endpoint-status .pa-monitoring-lost.endpoint-details {
+    width: 23px;
+    height: 23px;
+}
+
+.endpoint-status .pa-endpoint-lost.endpoint-details, .endpoint-status .pa-monitoring-lost.endpoint-details, .endpoint-status .pa-endpoint-lost.endpoints-overview, .endpoint-status .pa-monitoring-lost.endpoints-overview {
+    width: 20px;
+    height: 20px;
+    left: 6px;
+    position: relative;
+}
+
+.endpoint-message-types .endpoint-status {
+    margin-top: -1px;
+}
+
+i.fa.pa-endpoint-lost.endpoints-overview, i.fa.pa-monitoring-lost.endpoints-overview {
+    position: relative;
+    top: 8px;
+    margin-right: 4px;
+}
+
+.endpoint-name .lead {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+@media (min-width: 1200px) {
+    .col-lg-max-8 {
+        max-width: 66%;
+        float: left;
+    }
+    .col-lg-max-9 {
+        max-width: 76%;
+        float: left;
+    }
 }

src/ServicePulse.Host/app/js/services/service.toast.js

@@ -18,12 +18,18 @@
             this.showToast(text, 'info', title || 'Info', sticky);
         }
 
-        this.showError = function (text) {
-            this.showToast(text, 'error', 'Error', true);
+        this.showError = function (text, sticky) {
+            if (sticky === undefined) {
+                sticky = true;
+            } 
+            this.showToast(text, 'error', 'Error', sticky);
         }
 
-        this.showWarning = function (text) {
-            this.showToast(text, 'warning', 'Warning', true);
+        this.showWarning = function (text, sticky) {
+            if (sticky === undefined) {
+                sticky = true;
+            } 
+            this.showToast(text, 'warning', 'Warning', sticky);
         }
     }
 

src/ServicePulse.Host/app/js/services/services.module.js

@@ -5,6 +5,7 @@
         'services.streamService',
         'services.serviceControlService',
         'services.monitoringService',
+        'services.connectivityNotifier',
         'services.platformUpdateService',
         'services.semverService',
         'services.notifications',

src/ServicePulse.Host/app/js/views/failed_messages/view.html

@@ -13,10 +13,10 @@
                     <a class="back-nav" ng-if="!vm.selectedExceptionGroup.parentTitle" href="#/failed-messages/groups">Failed message groups list</a>
                 </div>
                 <div ng-show="!vm.selectedExceptionGroup.id" class="active">All failed messages ({{vm.failedMessages.length}} / {{vm.selectedExceptionGroup.count}} | number)</div>
-                <h2 ng-show="vm.selectedExceptionGroup.id" class="active break group-title">
+                <h1 ng-show="vm.selectedExceptionGroup.id" class="active break group-title">
                     <span ng-if="vm.selectedExceptionGroup.parentTitle">{{vm.selectedExceptionGroup.parentTitle}} - </span>
                     {{vm.selectedExceptionGroup.title}}
-                </h2>
+                </h1>
                 <h3 class="active group-title group-message-count">{{vm.selectedExceptionGroup.count | number}} messages in group</h3>
             </div>
         </div>