chore: show server connection status in service state icon

public/src/app/datasocket/datasocket.service.ts

@@ -2,15 +2,37 @@ import { environment } from '../../environments/environment';
 
 export class DataSocket {
   private client = null;
+  private _isConnected: boolean = false;
   public onMessage;
 
   constructor() {
+    // WebSockHop.logger = function(type, message) {
+    //   console.log("WebSockHop: " + type + "-" + message);
+    // };
+
     this.reconnect();
   }
 
+  isConnected() {
+    return this._isConnected;
+  }
+
   reconnect = () => {
     this.client = new WebSockHop(environment.webSocketUrl);
 
+    this.client.on('opened', () => {
+      console.log('WebSocket: connected to server');
+      this._isConnected = true;
+    });
+
+    this.client.on('opening', () => {
+      // this happens immediately after a disconnection for network or other
+      // reasons, and 'closed' does not appear to be issued except for a
+      // disconnect from client code.
+      console.log('WebSocket: disconnected from server, will attempt reconnection');
+      this._isConnected = false;
+    });
+
     this.client.formatter = new WebSockHop.StringFormatter();
     this.client.formatter.pingMessage = 'ping';
     this.client.formatter.handlePong = function (message) {

public/src/app/home/home.component.html

@@ -3,7 +3,7 @@
     <div class="container-fluid">
       <div class="navbar-header">
         <span class="navbar-brand">
-          <app-service-state-popup [serviceState]="serviceState"></app-service-state-popup>
+          <app-service-state-popup [isConnected]="ws.isConnected()" [serviceState]="serviceState"></app-service-state-popup>
           @if (clientBuildVersion != data.serverBuildVersion) {
             <a class="btn btn-sm btn-warning" id='navbar-reload-page-link' href="javascript:void(0)" (click)="reloadPage()"
               title="A new version of status.keyman.com is available - current sha: {{clientBuildVersion}} / new sha: {{data.serverBuildVersion}}">Reload page</a>

public/src/app/service-state-popup/service-state-popup.component.css

@@ -82,6 +82,10 @@ table {
   font-size: 1.4em;
 }
 
+.icon.disconnected {
+  color: grey;
+}
+
 .icon.loading {
   color: yellow;
 }

public/src/app/service-state-popup/service-state-popup.component.html

@@ -4,7 +4,7 @@
 <span class="service-state">
   <span class="status-title"><span class="icon {{overallStatus()}}">●</span> Keyman Status</span>
   <div class="service-state-popup {{pinned ? 'pinned':''}} gravity-{{gravityX}} gravity-{{gravityY}}" #wrapper>
-    <div class="title"><span class="pin" (click)="pin()">📌</span> Service State - {{serviceState?.length}} services</div>
+    <div class="title"><span class="pin" (click)="pin()">📌</span> Service State - {{serviceState?.length}} services - {{overallStatus()}}</div>
 
     <table>
       <tbody>

public/src/app/service-state-popup/service-state-popup.component.ts

@@ -15,6 +15,7 @@ import { ServiceIdentifier, ServiceState, ServiceStateRecord } from '../../../..
 })
 export class ServiceStatePopupComponent extends PopupComponent implements OnInit, OnDestroy {
   @Input() serviceState: (ServiceStateRecord & {service: ServiceIdentifier})[];
+  @Input() isConnected: boolean;
 
   private timerId = null;
   private currentTime: number = new Date().valueOf();
@@ -39,6 +40,8 @@ export class ServiceStatePopupComponent extends PopupComponent implements OnInit
   }
 
   overallStatus() {
+    if(!this.isConnected) return 'disconnected';
+
     let icon = 'successful';
     for(const service of this.serviceState ?? []) {
       if(service.state == 'error') {