Add Server Offline Landing to Placeholder Widget

Adds a prompt to start the server when the front-end detects that there is no server
currently running.  This provides a clearer application flow for the user.

Signed-off-by: Will Yang <[email protected]>

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
-    },
+        "source.fixAll.eslint": true,
+    }
 }

packages/react-components/src/trace-explorer/trace-explorer-placeholder-widget.tsx

@@ -4,31 +4,41 @@ import * as React from 'react';
 
 export interface ReactPlaceholderWidgetProps {
     loading: boolean;
+    serverOn: boolean;
+    tracesOpen: boolean;
     handleOpenTrace: () => void;
+    handleStartServer: () => void;
 }
 
-export class ReactExplorerPlaceholderWidget extends React.Component<ReactPlaceholderWidgetProps, unknown> {
+export class ReactExplorerPlaceholderWidget extends React.Component<ReactPlaceholderWidgetProps, {}> {
     constructor(props: ReactPlaceholderWidgetProps) {
         super(props);
     }
 
     render(): React.ReactNode {
+        const { loading, serverOn, handleOpenTrace, handleStartServer } = this.props;
+        const onClick = serverOn ? handleOpenTrace : handleStartServer;
+        const infoText = serverOn ? 'You have not yet opened a trace.' : 'No trace server instance is currently running.';
+        const buttonText = serverOn ? 'Open Trace' : 'Start Trace Server';
+
         return (
             <div className="placeholder-container" tabIndex={0}>
-                <div className="center">{'You have not yet opened a trace.'}</div>
+                <div className="center">{infoText}</div>
                 <div className="placeholder-open-workspace-button-container">
                     <button
                         className="plcaeholder-open-workspace-button"
-                        title="Select a trace to open"
-                        onClick={this.props.handleOpenTrace}
-                        disabled={this.props.loading}
+                        title={buttonText}
+                        onClick={onClick}
+                        disabled={loading}
                     >
-                        {this.props.loading && <FontAwesomeIcon icon={faSpinner} spin style={{ marginRight: '5px' }} />}
-                        {this.props.loading && <span>Connecting to trace server</span>}
-                        {!this.props.loading && <span>Open Trace</span>}
+                        {loading && <FontAwesomeIcon icon={faSpinner} spin style={{ marginRight: '5px' }} />}
+                        {loading && <span>Connecting to trace server</span>}
+                        {!loading && <span>{buttonText}</span>}
                     </button>
                 </div>
             </div>
         );
     }
 }
+
+export default ReactExplorerPlaceholderWidget;

theia-extensions/viewer-prototype/src/browser/trace-explorer/trace-explorer-sub-widgets/theia-trace-explorer-placeholder-widget.tsx

@@ -2,31 +2,44 @@ import { inject, injectable, postConstruct } from '@theia/core/shared/inversify'
 import { ReactWidget } from '@theia/core/lib/browser';
 import * as React from 'react';
 import { CommandService } from '@theia/core';
-import { OpenTraceCommand } from '../../trace-viewer/trace-viewer-commands';
+import { OpenTraceCommand, StartServerCommand } from '../../trace-viewer/trace-viewer-commands';
 import { ReactExplorerPlaceholderWidget } from 'traceviewer-react-components/lib/trace-explorer/trace-explorer-placeholder-widget';
+import { RestClient } from 'tsp-typescript-client/lib/protocol/rest-client';
+import { TraceServerConnectionStatusBackend } from '../../../common/trace-server-connection-status';
 
 @injectable()
 export class TraceExplorerPlaceholderWidget extends ReactWidget {
     static ID = 'trace-explorer-placeholder-widget';
     static LABEL = 'Trace Explorer Placeholder Widget';
 
     state = {
-        loading: false
+        loading: false,
+        serverStatus: false,
     };
 
     @inject(CommandService) protected readonly commandService!: CommandService;
+    @inject(TraceServerConnectionStatusBackend) protected traceServerConnectionStatusProxy: TraceServerConnectionStatusBackend;
 
     @postConstruct()
     protected init(): void {
         this.id = TraceExplorerPlaceholderWidget.ID;
         this.title.label = TraceExplorerPlaceholderWidget.LABEL;
+        RestClient.addConnectionStatusListener(this.handleOnServerStatusChange);
         this.update();
     }
 
+    dispose(): void {
+        super.dispose();
+        RestClient.removeConnectionStatusListener(this.handleOnServerStatusChange);
+    }
+
     render(): React.ReactNode {
-        const { loading } = this.state;
+        const { loading, serverStatus } = this.state;
         return (
             <ReactExplorerPlaceholderWidget
+                tracesOpen={false}  // If we can see this component, there are no opened traces.
+                serverOn={serverStatus}
+                handleStartServer={this.handleStartServer}
                 loading={loading}
                 handleOpenTrace={this.handleOpenTrace}
             ></ReactExplorerPlaceholderWidget>
@@ -42,4 +55,22 @@ export class TraceExplorerPlaceholderWidget extends ReactWidget {
         this.state.loading = false;
         this.update();
     }
+
+    protected handleStartServer = async (): Promise<void> => this.doHandleStartServer();
+
+    private async doHandleStartServer() {
+        this.state.loading = true;
+        this.update();
+        await this.commandService.executeCommand(StartServerCommand.id);
+        this.state.loading = false;
+        const status = await this.traceServerConnectionStatusProxy.getStatus();
+        this.handleOnServerStatusChange(status);
+    }
+
+    protected handleOnServerStatusChange = (status: boolean): void => this.doHandleOnServerStatusChange(status);
+
+    private doHandleOnServerStatusChange = (status: boolean): void => {
+        this.state.serverStatus = status;
+        this.update();
+    };
 }