Support opening trace files through a dialog

This commit adds another button for opening trace files through a dialog. Futhermore, the theia-trace-explorer-placeholder-widget can be configured to render either one or both buttons (Open Trace folder, Open Trace File). Fixes eclipse-cdt-cloud#1053 Signed-off-by: Neel Gondalia <ngondalia@blackberry.com>
ngondalia · Mar 8, 2024 · 257eeb7 · 257eeb7
1 parent 39dadea
commit 257eeb7
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 27 deletions.
diff --git a/packages/react-components/src/trace-explorer/trace-explorer-placeholder-widget.tsx b/packages/react-components/src/trace-explorer/trace-explorer-placeholder-widget.tsx
@@ -2,9 +2,15 @@ import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as React from 'react';
 
+export enum TraceResourceType {
+    FOLDER = 'Folder',
+    FILE = 'File'
+}
+
 export interface ReactPlaceholderWidgetProps {
     loading: boolean;
-    handleOpenTrace: () => void;
+    handleOpenTrace: (type?: TraceResourceType) => void;
+    renderOnly?: TraceResourceType;
 }
 
 export class ReactExplorerPlaceholderWidget extends React.Component<ReactPlaceholderWidgetProps, unknown> {
@@ -16,19 +22,26 @@ export class ReactExplorerPlaceholderWidget extends React.Component<ReactPlaceho
         return (
             <div className="placeholder-container" tabIndex={0}>
                 <div className="center">{'You have not yet opened a trace.'}</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}
-                    >
-                        {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>}
-                    </button>
-                </div>
+                {this.renderButton(TraceResourceType.FOLDER, 'Open Trace Folder')}
+                {this.renderButton(TraceResourceType.FILE, 'Open Trace File')}
             </div>
         );
     }
+
+    renderButton(type: TraceResourceType, title: string): React.ReactNode {
+        return this.props.renderOnly === undefined || this.props.renderOnly === type ? (
+            <div className="placeholder-open-workspace-button-container">
+                <button
+                    className="plcaeholder-open-workspace-button"
+                    title="Select a trace to open"
+                    onClick={() => this.props.handleOpenTrace(type)}
+                    disabled={this.props.loading}
+                >
+                    {this.props.loading && <FontAwesomeIcon icon={faSpinner} spin style={{ marginRight: '5px' }} />}
+                    {this.props.loading && <span>Connecting to trace server</span>}
+                    {!this.props.loading && <span>{title}</span>}
+                </button>
+            </div>
+        ) : undefined;
+    }
 }
diff --git a/packages/react-components/style/trace-explorer.css b/packages/react-components/style/trace-explorer.css
@@ -374,10 +374,12 @@
 
 .placeholder-open-workspace-button-container {
     margin: auto;
-    margin-top: 5px;
+    margin-top: 10px;
+    margin-bottom: 15px;
     display: flex;
     justify-content: center;
     align-self: center;
+    max-width: 300px;
 }
 
 .plcaeholder-open-workspace-button {

diff --git a/...ser/trace-explorer/trace-explorer-sub-widgets/theia-trace-explorer-placeholder-widget.tsx b/...ser/trace-explorer/trace-explorer-sub-widgets/theia-trace-explorer-placeholder-widget.tsx
@@ -3,7 +3,10 @@ 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 { ReactExplorerPlaceholderWidget } from 'traceviewer-react-components/lib/trace-explorer/trace-explorer-placeholder-widget';
+import {
+    ReactExplorerPlaceholderWidget,
+    TraceResourceType
+} from 'traceviewer-react-components/lib/trace-explorer/trace-explorer-placeholder-widget';
 
 @injectable()
 export class TraceExplorerPlaceholderWidget extends ReactWidget {
@@ -33,12 +36,12 @@ export class TraceExplorerPlaceholderWidget extends ReactWidget {
         );
     }
 
-    protected handleOpenTrace = async (): Promise<void> => this.doHandleOpenTrace();
+    protected handleOpenTrace = async (type?: TraceResourceType): Promise<void> => this.doHandleOpenTrace(type);
 
-    private async doHandleOpenTrace() {
+    private async doHandleOpenTrace(type?: TraceResourceType) {
         this.state.loading = true;
         this.update();
-        await this.commandService.executeCommand(OpenTraceCommand.id);
+        await this.commandService.executeCommand(OpenTraceCommand.id, type);
         this.state.loading = false;
         this.update();
     }

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
@@ -27,6 +27,7 @@ import { signalManager } from 'traceviewer-base/lib/signals/signal-manager';
 import { TraceServerConnectionStatusClient } from '../../common/trace-server-connection-status';
 import { FileStat } from '@theia/filesystem/lib/common/files';
 import { ITspClient } from 'tsp-typescript-client';
+import { TraceResourceType } from 'traceviewer-react-components/lib/trace-explorer/trace-explorer-placeholder-widget';
 
 interface TraceViewerWidgetOpenerOptions extends WidgetOpenerOptions {
     traceUUID: string;
@@ -71,15 +72,16 @@ export class TraceViewerContribution
         };
     }
 
-    protected async launchTraceServer(rootPath?: string): Promise<void> {
+    protected async launchTraceServer(rootPath?: string, type?: TraceResourceType): Promise<void> {
         let healthResponse;
         try {
             healthResponse = await this.tspClient.checkHealth();
         } catch (err) {
             // continue to start trace server
         }
+        const selectFiles = type && type === TraceResourceType.FILE ? true : false;
         if (healthResponse && healthResponse.isOk() && healthResponse.getModel()?.status === 'UP') {
-            this.openDialog(rootPath);
+            this.openDialog(rootPath, selectFiles);
         } else {
             const progress = await this.messageService.showProgress({ text: '' });
             progress.report({ message: 'Launching trace server... ', work: { done: 10, total: 100 } });
@@ -98,7 +100,7 @@ export class TraceViewerContribution
                     progress.cancel();
                     this.serverStatusService.updateStatus(true);
                     signalManager().fireTraceServerStartedSignal();
-                    this.openDialog(rootPath);
+                    this.openDialog(rootPath, selectFiles);
                 }
             } catch (err) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -120,12 +122,12 @@ export class TraceViewerContribution
         }
     }
 
-    async openDialog(rootPath?: string): Promise<void> {
+    async openDialog(rootPath?: string, selectFiles = false): Promise<void> {
         const props: OpenFileDialogProps = {
             title: 'Open Trace',
             // Only support selecting folders, both folders and file doesn't work in Electron (issue #227)
-            canSelectFolders: true,
-            canSelectFiles: false
+            canSelectFolders: !selectFiles,
+            canSelectFiles: selectFiles
         };
         let fileURI = undefined;
         if (rootPath !== undefined) {
@@ -202,7 +204,7 @@ export class TraceViewerContribution
 
     registerCommands(registry: CommandRegistry): void {
         registry.registerCommand(OpenTraceCommand, {
-            execute: () => this.launchTraceServer()
+            execute: (type?: TraceResourceType) => this.launchTraceServer(undefined, type)
         });
         registry.registerCommand(OpenTraceWithPathCommand, {
             isVisible: () => false,

diff --git a/theia-extensions/viewer-prototype/src/browser/trace-viewer/trace-viewer-toolbar-commands.ts b/theia-extensions/viewer-prototype/src/browser/trace-viewer/trace-viewer-toolbar-commands.ts
@@ -44,10 +44,16 @@ export namespace TraceViewerToolbarCommands {
     };
     export const OPEN_TRACE: Command = {
         id: 'trace.viewer.openTrace',
-        label: 'Open Trace',
+        label: 'Open Trace Folder',
         iconClass: 'codicon codicon-new-folder'
     };
 
+    export const OPEN_TRACE_FILE: Command = {
+        id: 'trace.viewer.openTraceFile',
+        label: 'Open Trace File',
+        iconClass: 'codicon codicon-new-file'
+    };
+
     export const CHARTS_CHEATSHEET: Command = {
         id: 'trace.viewer.toolbar.cheatsheet',
         label: 'Keyboard Shortcuts (CTRL / command + F1)',

diff --git a/...xtensions/viewer-prototype/src/browser/trace-viewer/trace-viewer-toolbar-contribution.tsx b/...xtensions/viewer-prototype/src/browser/trace-viewer/trace-viewer-toolbar-contribution.tsx
@@ -10,6 +10,7 @@ import { TspClientProvider } from '../tsp-client-provider-impl';
 import { TraceViewerWidget } from './trace-viewer';
 import { TraceViewerToolbarCommands, TraceViewerToolbarMenus } from './trace-viewer-toolbar-commands';
 import { OpenTraceCommand } from './trace-viewer-commands';
+import { TraceResourceType } from 'traceviewer-react-components/lib/trace-explorer/trace-explorer-placeholder-widget';
 
 @injectable()
 export class TraceViewerToolbarContribution implements TabBarToolbarContribution, CommandContribution {
@@ -120,7 +121,19 @@ export class TraceViewerToolbarContribution implements TabBarToolbarContribution
                 return false;
             },
             execute: async () => {
-                await registry.executeCommand(OpenTraceCommand.id);
+                await registry.executeCommand(OpenTraceCommand.id, TraceResourceType.FOLDER);
+            }
+        });
+
+        registry.registerCommand(TraceViewerToolbarCommands.OPEN_TRACE_FILE, {
+            isVisible: (w: Widget) => {
+                if (w instanceof TraceExplorerOpenedTracesWidget) {
+                    return true;
+                }
+                return false;
+            },
+            execute: async () => {
+                await registry.executeCommand(OpenTraceCommand.id, TraceResourceType.FILE);
             }
         });
 
@@ -330,6 +343,12 @@ export class TraceViewerToolbarContribution implements TabBarToolbarContribution
             group: 'navigation',
             onDidChange: this.onMakerSetsChangedEvent
         });
+        registry.registerItem({
+            id: TraceViewerToolbarCommands.OPEN_TRACE_FILE.id,
+            command: TraceViewerToolbarCommands.OPEN_TRACE_FILE.id,
+            tooltip: TraceViewerToolbarCommands.OPEN_TRACE_FILE.label,
+            priority: 7
+        });
         registry.registerItem({
             id: TraceViewerToolbarCommands.OPEN_TRACE.id,
             command: TraceViewerToolbarCommands.OPEN_TRACE.id,