Server offline UI blocker

vscode-trace-extension/src/trace-viewer-panel/trace-viewer-webview-panel.ts

@@ -135,6 +135,20 @@ export class TraceViewerPanel {
         }
     }
 
+    /**
+     * Directly sends a VSCode Message to all activePanel's webviews.
+     * @param {string} command - command from `VSCODE_MESSAGES` object
+     * @param {unknown} data - payload
+     */
+    public static postMessageToWebviews(command: string, data: unknown): void {
+        Object.values(TraceViewerPanel.activePanels).forEach(activePanel => {
+            if (!activePanel || !activePanel._panel || command) {
+                return;
+            }
+            activePanel._panel.webview.postMessage({ command, data });
+        });
+    }
+
     public static updateTraceServerUrl(newUrl: string): void {
         Object.values(TraceViewerPanel.activePanels).forEach(trace => {
             if (trace) {

vscode-trace-extension/src/utils/trace-server-status.ts

@@ -1,29 +1,48 @@
 import { ThemeColor, StatusBarItem } from 'vscode';
 import { isTraceServerUp } from './backend-tsp-client-provider';
+import { traceExtensionWebviewManager } from '../extension';
+import { VSCODE_MESSAGES } from 'vscode-trace-common/lib/messages/vscode-message-manager';
+import { TraceViewerPanel } from '../trace-viewer-panel/trace-viewer-webview-panel';
 
 export class TraceServerConnectionStatusService {
-    private statusBarItem: StatusBarItem;
+    private _status = false;
 
-    public constructor(statusBarItem: StatusBarItem) {
-        this.statusBarItem = statusBarItem;
-        this.statusBarItem.hide();
+    public constructor(private _statusBarItem: StatusBarItem) {
+        _statusBarItem.hide();
+        this.checkAndUpdateServerStatus();
     }
 
     public checkAndUpdateServerStatus = async (): Promise<void> => {
         const isUp = await isTraceServerUp();
+        if (isUp === this._status) {
+            return;
+        }
+        this._status = isUp;
+        this.emitServerStatusChangeToViews();
         this.render(isUp);
     };
 
+    private emitServerStatusChangeToViews = () => {
+        const command = VSCODE_MESSAGES.CONNECTION_STATUS;
+        const data = this._status.toString();
+        // WebviewViews
+        traceExtensionWebviewManager.getAllActiveWebviews().forEach(_view => {
+            _view.webview.postMessage({ command, data });
+        });
+        // activePanels
+        TraceViewerPanel.postMessageToWebviews(command, data);
+    };
+
     private render = (status: boolean): void => {
         if (status) {
-            this.statusBarItem.backgroundColor = new ThemeColor('statusBarItem.warningBackground');
-            this.statusBarItem.text = '$(check) Trace Server';
-            this.statusBarItem.tooltip = 'Trace Viewer: server found';
+            this._statusBarItem.backgroundColor = new ThemeColor('statusBarItem.warningBackground');
+            this._statusBarItem.text = '$(check) Trace Server';
+            this._statusBarItem.tooltip = 'Trace Viewer: server found';
         } else {
-            this.statusBarItem.backgroundColor = new ThemeColor('statusBarItem.errorBackground');
-            this.statusBarItem.text = '$(error) Trace Server';
-            this.statusBarItem.tooltip = 'Trace Viewer: server not found';
+            this._statusBarItem.backgroundColor = new ThemeColor('statusBarItem.errorBackground');
+            this._statusBarItem.text = '$(error) Trace Server';
+            this._statusBarItem.tooltip = 'Trace Viewer: server not found';
         }
-        this.statusBarItem.show();
+        this._statusBarItem.show();
     };
 }

vscode-trace-webviews/src/trace-viewer/index.css

@@ -10,3 +10,26 @@ body {
     width: 100%;
     position: absolute;
 }
+
+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.25); /* Semi-opaque black background */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 999; /* Ensure the overlay appears on top */
+}
+
+.overlay-message {
+    color: white;
+    font-size: 24px;
+    font-weight: bold;
+    text-align: center;
+    padding: 20px;
+    border-radius: 5px;
+    user-select: none;
+}

vscode-trace-webviews/src/trace-viewer/vscode-trace-viewer-container.tsx

@@ -36,6 +36,7 @@ interface VscodeAppState {
     outputs: OutputDescriptor[];
     overviewOutputDescriptor: OutputDescriptor | undefined;
     theme: string;
+    serverStatus: boolean;
 }
 
 class TraceViewerContainer extends React.Component<{}, VscodeAppState> {
@@ -103,7 +104,8 @@ class TraceViewerContainer extends React.Component<{}, VscodeAppState> {
             tspClientProvider: undefined,
             outputs: [],
             overviewOutputDescriptor: undefined,
-            theme: 'light'
+            theme: 'light',
+            serverStatus: true
         };
         this._signalHandler = new VsCodeMessageManager();
 
@@ -207,6 +209,12 @@ class TraceViewerContainer extends React.Component<{}, VscodeAppState> {
                             );
                         this.contributeContextMenu(ctxMenuPayload);
                     }
+                    break;
+                case VSCODE_MESSAGES.CONNECTION_STATUS:
+                    const serverStatus: boolean = JSONBig.parse(message.data);
+                    console.log('CONNECTION STATUS:', serverStatus);
+                    this.setState({ serverStatus });
+                    break;
             }
         });
         window.addEventListener('resize', this.onResize);
@@ -507,6 +515,13 @@ class TraceViewerContainer extends React.Component<{}, VscodeAppState> {
                         backgroundTheme={this.state.theme}
                     ></TraceContextComponent>
                 )}
+                {this.state.serverStatus === false && (
+                    <div className="overlay">
+                        <div className="overlay-message">
+                            Please start a trace server to resume using the Trace Viewer.
+                        </div>
+                    </div>
+                )}
             </div>
         );
     }