Remove Direct DOM Manipulation from ServerStatusWidget

Removes direct DOM manipulation from TraceExplorerServerStatusWidget. Refactors it to use the server status change event listeners and change what is rendered through Theia ReactWidget's component lifecycle. Signed-off-by: Will Yang <william.yang@ericsson.com>
eclipse-cdt-cloud · Mar 7, 2024 · 52c2ae7 · 52c2ae7
1 parent c51fa3c
commit 52c2ae7
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 23 deletions.
diff --git a/...browser/trace-explorer/trace-explorer-sub-widgets/trace-explorer-server-status-widget.tsx b/...browser/trace-explorer/trace-explorer-sub-widgets/trace-explorer-server-status-widget.tsx
@@ -7,6 +7,7 @@ import { CommandService } from '@theia/core';
 export class TraceExplorerServerStatusWidget extends ReactWidget {
     static ID = 'trace-explorer-server-status-widget';
     static LABEL = 'Trace Explorer Server Status Widget';
+    private serverOn = false;
 
     @inject(CommandService) protected readonly commandService!: CommandService;
 
@@ -17,16 +18,22 @@ export class TraceExplorerServerStatusWidget extends ReactWidget {
         this.update();
     }
 
+    public updateStatus = (status: boolean): void => {
+        this.serverOn = status;
+        this.update();
+    };
+
     render(): React.ReactNode {
+        const className = this.serverOn ? 'fa fa-check-circle-o fa-lg' : 'fa fa-times-circle-o fa-lg';
+        const title = this.serverOn
+            ? 'Server health and latency are good. No known issues'
+            : 'Trace Viewer Critical Error: Trace Server Offline';
+        const color = this.serverOn ? 'green' : 'red';
+
         return (
             <div className="server-status-header">
                 <span className="theia-header">Server Status </span>
-                <i
-                    id="server-status-id"
-                    className="fa fa-times-circle-o fa-lg"
-                    title="Trace Viewer Critical Error: Trace Server Offline"
-                    style={{ color: 'red', marginLeft: '5px' }}
-                />
+                <i id="server-status-id" className={className} title={title} style={{ color, marginLeft: '5px' }} />
             </div>
         );
     }

diff --git a/theia-extensions/viewer-prototype/src/browser/trace-explorer/trace-explorer-widget.tsx b/theia-extensions/viewer-prototype/src/browser/trace-explorer/trace-explorer-widget.tsx
@@ -83,12 +83,14 @@ export class TraceExplorerWidget extends BaseWidget {
         layout.addWidget(this.traceViewsContainer);
         this.node.tabIndex = 0;
         signalManager().on(Signals.OPENED_TRACES_UPDATED, this.onUpdateSignal);
+        this.connectionStatusClient.addServerStatusChangeListener(this.onServerStatusChange);
         this.update();
     }
 
     dispose(): void {
         super.dispose();
         signalManager().off(Signals.OPENED_TRACES_UPDATED, this.onUpdateSignal);
+        this.connectionStatusClient.removeServerStatusChangeListener(this.onServerStatusChange);
     }
 
     protected onUpdateSignal = (payload: OpenedTracesUpdatedSignalPayload): void =>
@@ -123,4 +125,11 @@ export class TraceExplorerWidget extends BaseWidget {
     protected onAfterHide(): void {
         this.connectionStatusClient.deactivate();
     }
+
+    protected onServerStatusChange = (status: boolean): void => this.doHandleOnServerStatusChange(status);
+
+    protected doHandleOnServerStatusChange(status: boolean): void {
+        this.serverStatusWidget.updateStatus(status);
+        this.update();
+    }
 }
diff --git a/theia-extensions/viewer-prototype/src/browser/trace-server-connection-status-client-impl.ts b/theia-extensions/viewer-prototype/src/browser/trace-server-connection-status-client-impl.ts
@@ -38,16 +38,4 @@ export class TraceServerConnectionStatusClientImpl implements TraceServerConnect
     getStatus(): boolean {
         return this.lastStatus;
     }
-
-    static renderStatus(status: boolean): void {
-        if (document.getElementById('server-status-id')) {
-            document.getElementById('server-status-id')!.className = status
-                ? 'fa fa-check-circle-o fa-lg'
-                : 'fa fa-times-circle-o fa-lg';
-            document.getElementById('server-status-id')!.title = status
-                ? 'Server health and latency are good. No known issues'
-                : 'Trace Viewer Critical Error: Trace Server Offline';
-            document.getElementById('server-status-id')!.style.color = status ? 'green' : 'red';
-        }
-    }
 }
diff --git a/theia-extensions/viewer-prototype/src/browser/trace-viewer/trace-viewer-contribution.ts b/theia-extensions/viewer-prototype/src/browser/trace-viewer/trace-viewer-contribution.ts
@@ -24,7 +24,7 @@ import { TracePreferences, TRACE_PATH, TRACE_ARGS } from '../trace-server-prefer
 import { TspClientProvider } from '../tsp-client-provider-impl';
 import { ChartShortcutsDialog } from '../trace-explorer/trace-explorer-sub-widgets/charts-cheatsheet-component';
 import { signalManager } from 'traceviewer-base/lib/signals/signal-manager';
-import { TraceServerConnectionStatusClientImpl } from '../trace-server-connection-status-client-impl';
+import { TraceServerConnectionStatusClient } from '../../common/trace-server-connection-status';
 import { FileStat } from '@theia/filesystem/lib/common/files';
 import { ITspClient } from 'tsp-typescript-client';
 
@@ -50,6 +50,8 @@ export class TraceViewerContribution
     @inject(TracePreferences) protected tracePreferences: TracePreferences;
     @inject(TraceServerConfigService) protected readonly traceServerConfigService: TraceServerConfigService;
     @inject(MessageService) protected readonly messageService: MessageService;
+    @inject(TraceServerConnectionStatusClient)
+    protected readonly serverStatusService: TraceServerConnectionStatusClient;
 
     readonly id = TraceViewerWidget.ID;
     readonly label = 'Trace Viewer';
@@ -94,7 +96,7 @@ export class TraceViewerContribution
                         progress.report({ message: 'Trace server started.', work: { done: 100, total: 100 } });
                     }
                     progress.cancel();
-                    TraceServerConnectionStatusClientImpl.renderStatus(true);
+                    this.serverStatusService.updateStatus(true);
                     signalManager().fireTraceServerStartedSignal();
                     this.openDialog(rootPath);
                 }
@@ -163,7 +165,7 @@ export class TraceViewerContribution
                         } else {
                             progress.report({ message: 'Trace server started.', work: { done: 100, total: 100 } });
                         }
-                        TraceServerConnectionStatusClientImpl.renderStatus(true);
+                        this.serverStatusService.updateStatus(true);
                         signalManager().fireTraceServerStartedSignal();
                         return super.open(traceURI, options);
                     }
@@ -230,7 +232,7 @@ export class TraceViewerContribution
                         } else {
                             progress.report({ message: 'Trace server started.', work: { done: 100, total: 100 } });
                         }
-                        TraceServerConnectionStatusClientImpl.renderStatus(true);
+                        this.serverStatusService.updateStatus(true);
                         signalManager().fireTraceServerStartedSignal();
                         return;
                     }
@@ -261,7 +263,7 @@ export class TraceViewerContribution
                 try {
                     await this.traceServerConfigService.stopTraceServer();
                     this.messageService.info('Trace server terminated successfully.');
-                    TraceServerConnectionStatusClientImpl.renderStatus(false);
+                    this.serverStatusService.updateStatus(false);
                 } catch (err) {
                     this.messageService.error('Failed to stop the trace server.');
                 }