From 5f63c287b3354155ff0c7755f2a1a7841764a676 Mon Sep 17 00:00:00 2001
From: Marc Durdin <marc@durdin.net>
Date: Fri, 8 May 2026 14:35:28 +0200
Subject: [PATCH] chore: show server connection status in service state icon

Service state icon goes grey if connection to server is lost.

Test-bot: skip
---
 .../src/app/datasocket/datasocket.service.ts  | 22 +++++++++++++++++++
 public/src/app/home/home.component.html       |  2 +-
 .../service-state-popup.component.css         |  4 ++++
 .../service-state-popup.component.html        |  2 +-
 .../service-state-popup.component.ts          |  3 +++
 5 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/public/src/app/datasocket/datasocket.service.ts b/public/src/app/datasocket/datasocket.service.ts
index ffbf67f..afee9e5 100644
--- a/public/src/app/datasocket/datasocket.service.ts
+++ b/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) {
diff --git a/public/src/app/home/home.component.html b/public/src/app/home/home.component.html
index 20f2b30..136834f 100644
--- a/public/src/app/home/home.component.html
+++ b/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>
diff --git a/public/src/app/service-state-popup/service-state-popup.component.css b/public/src/app/service-state-popup/service-state-popup.component.css
index c43429a..f34afda 100644
--- a/public/src/app/service-state-popup/service-state-popup.component.css
+++ b/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;
 }
diff --git a/public/src/app/service-state-popup/service-state-popup.component.html b/public/src/app/service-state-popup/service-state-popup.component.html
index f6fad44..5cdb5d2 100644
--- a/public/src/app/service-state-popup/service-state-popup.component.html
+++ b/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>
diff --git a/public/src/app/service-state-popup/service-state-popup.component.ts b/public/src/app/service-state-popup/service-state-popup.component.ts
index e7a97fd..ee57fd0 100644
--- a/public/src/app/service-state-popup/service-state-popup.component.ts
+++ b/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') {