Add prototype of React Component displaying configurations source types

packages/base/src/signals/signal-manager.ts

@@ -41,6 +41,7 @@ export declare interface SignalManager {
     fireSelectionRangeUpdated(payload: TimeRangeUpdatePayload): void;
     fireViewRangeUpdated(payload: TimeRangeUpdatePayload): void;
     fireRequestSelectionRangeChange(payload: TimeRangeUpdatePayload): void;
+    fireShowTraceConfigurations(): void;
 }
 
 export const Signals = {
@@ -75,7 +76,8 @@ export const Signals = {
     VIEW_RANGE_UPDATED: 'view range updated',
     SELECTION_RANGE_UPDATED: 'selection range updated',
     REQUEST_SELECTION_RANGE_CHANGE: 'change selection range',
-    OUTPUT_DATA_CHANGED: 'output data changed'
+    OUTPUT_DATA_CHANGED: 'output data changed',
+    SHOW_TRACE_CONFIGURATIONS: 'open trace configurations'
 };
 
 export class SignalManager extends EventEmitter implements SignalManager {
@@ -174,6 +176,9 @@ export class SignalManager extends EventEmitter implements SignalManager {
     fireRequestSelectionRangeChange(payload: TimeRangeUpdatePayload): void {
         this.emit(Signals.REQUEST_SELECTION_RANGE_CHANGE, payload);
     }
+    fireShowTraceConfigurations(): void {
+        this.emit(Signals.SHOW_TRACE_CONFIGURATIONS);
+    }
 }
 
 let instance: SignalManager = new SignalManager();

packages/base/src/trace-configuration-manager.ts

@@ -0,0 +1,50 @@
+import { ITspClient } from 'tsp-typescript-client';
+import { Configuration } from 'tsp-typescript-client/lib/models/configuration';
+import { ConfigurationSourceType } from 'tsp-typescript-client/lib/models/configuration-source';
+import { Query } from 'tsp-typescript-client/lib/models/query/query';
+
+export class TraceConfigurationManager {
+    private tspClient: ITspClient;
+
+    constructor(tspClient: ITspClient) {
+        this.tspClient = tspClient;
+    }
+
+    /**
+     * Get an array of OutputDescriptor for a given experiment
+     * @param experimentUUID experiment UUID
+     */
+    async getConfigurationSourceTypes(): Promise<ConfigurationSourceType[] | undefined> {
+        const outputsResponse = await this.tspClient.fetchConfigurationSourceTypes();
+        if (outputsResponse && outputsResponse.isOk()) {
+            return outputsResponse.getModel();
+        }
+        return undefined;
+    }
+
+    async fetchConfigurations(typeId: string): Promise<Configuration[] | undefined> {
+        const outputsResponse = await this.tspClient.fetchConfigurations(typeId);
+        if (outputsResponse && outputsResponse.isOk()) {
+            return outputsResponse.getModel();
+        }
+        return undefined;
+    }
+
+    async createConfiguration(sourceTypeId: string, query: Query): Promise<Configuration | undefined> {
+        const outputsResponse = await this.tspClient.createConfiguration(sourceTypeId, query);
+        if (outputsResponse && outputsResponse.isOk()) {
+            return outputsResponse.getModel();
+        }
+
+        return undefined;
+    }
+
+    async deleteConfiguration(sourceTypeId: string, configId: string): Promise<Configuration | undefined> {
+        const outputsResponse = await this.tspClient.deleteConfiguration(sourceTypeId, configId);
+        if (outputsResponse && outputsResponse.isOk()) {
+            return outputsResponse.getModel();
+        }
+
+        return undefined;
+    }
+}

packages/react-components/src/components/abstract-dialog-component.tsx

@@ -22,6 +22,7 @@ export abstract class AbstractDialogComponent<P extends DialogComponentProps, S>
                 className="dialog"
                 ariaHideApp={false}
                 onRequestClose={this.props.onCloseDialog}
+                onAfterOpen={() => this.onAfterOpen()}
                 shouldFocusAfterRender={false}
             >
                 <div
@@ -42,4 +43,8 @@ export abstract class AbstractDialogComponent<P extends DialogComponentProps, S>
 
     protected abstract renderDialogBody(): React.ReactElement;
     protected abstract renderFooter(): React.ReactElement;
+
+    protected onAfterOpen(): void {
+        return;
+    }
 }

packages/react-components/src/components/trace-configurations/trace-configuration-add-component.tsx

@@ -0,0 +1,106 @@
+
+import React from 'react';
+import { TraceConfigurationManager } from 'traceviewer-base/lib/trace-configuration-manager';
+import { ConfigurationSourceType } from 'tsp-typescript-client/lib/models/configuration-source';
+import { Query } from 'tsp-typescript-client/lib/models/query/query';
+
+interface ConfigurationParameters {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    [key: string]: any
+}
+
+export interface TraceConfigurationsAddComponentProps {
+    configurationSourceTypes: ConfigurationSourceType[],
+    traceConfigurationManager: TraceConfigurationManager
+}
+
+export interface TraceConfigurationsAddComponentState {
+    selectedConfigType: ConfigurationSourceType | undefined;
+}
+
+export class TraceConfigurationsAddDialogComponent extends React.Component<TraceConfigurationsAddComponentProps, TraceConfigurationsAddComponentState>{
+    private sourceTypeSelectRef: React.RefObject<HTMLSelectElement>;
+    private readonly traceConfigParamPrefix = 'trace-configuration-param-';
+
+    constructor(props: TraceConfigurationsAddComponentProps) {
+        super(props);
+        this.sourceTypeSelectRef = React.createRef();
+        this.state = {
+            selectedConfigType: undefined
+        };
+    }
+
+    render(): React.ReactElement {
+        return <React.Fragment>
+            <label>Configuration source type: </label>
+            <select ref={this.sourceTypeSelectRef} onChange={() => this.onChangeConfigurationSourceType()}>
+            {
+                this.props.configurationSourceTypes.map((configType: ConfigurationSourceType) => (
+                    <option key={configType.name}>{configType.name}</option>
+                ))
+            }
+            <option disabled selected> -- select an option -- </option>
+            </select>
+            {
+                this.state.selectedConfigType !== undefined &&
+                <div>
+                    {this.renderParameters(this.state.selectedConfigType)}
+                </div>
+            }
+            <div>
+                <button onClick={() => this.createConfiguration()}>OK</button>
+            </div>
+        </React.Fragment>;
+    }
+
+    private renderParameters(configType: ConfigurationSourceType): React.ReactElement {
+        const parameters = configType.parameterDescriptors;
+        if (parameters) {
+            return  <React.Fragment>
+                <div>Parameters</div>
+                {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    parameters.map((param: any) => {
+                        const paramHtmlId = this.traceConfigParamPrefix + param.keyName;
+                        return (<div key={param.keyName}>
+                            <div>
+                                <label>{param.keyName}</label>
+                                <input type='text' id={paramHtmlId}></input>
+                            </div>
+                        </div>);
+                    })
+                }
+            </React.Fragment>;
+        }
+        return <React.Fragment></React.Fragment>;
+    }
+
+    private onChangeConfigurationSourceType(): void {
+        const selectedIndex = this.sourceTypeSelectRef.current?.selectedIndex;
+        if (selectedIndex !== undefined) {
+            const selectedConfigurationType = this.props.configurationSourceTypes[selectedIndex];
+            this.setState({
+                selectedConfigType: selectedConfigurationType
+            });
+        }
+    }
+
+    private async createConfiguration(): Promise<void> {
+        const selectedIndex = this.sourceTypeSelectRef?.current?.selectedIndex;
+        if ((selectedIndex !== undefined) && (selectedIndex < this.props.configurationSourceTypes.length)) {
+
+            const selectedSourceType = this.props.configurationSourceTypes[selectedIndex];
+            const sourceTypeId = selectedSourceType.id;
+            const parameters: ConfigurationParameters = {};
+            selectedSourceType.parameterDescriptors.forEach(param => {
+                const htmlId = this.traceConfigParamPrefix + param.keyName;
+                const inputElement = document.getElementById(htmlId);
+                if (inputElement instanceof HTMLInputElement) {
+                    parameters[param.keyName] = inputElement.value;
+                }
+            });
+
+            await this.props.traceConfigurationManager.createConfiguration(sourceTypeId, new Query(parameters));
+        }
+    }
+}

packages/react-components/src/components/trace-configurations/trace-configuration-details-component.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { TraceConfigurationManager } from 'traceviewer-base/src/trace-configuration-manager';
+import { Configuration } from 'tsp-typescript-client/lib/models/configuration';
+import { ConfigurationSourceType } from 'tsp-typescript-client/lib/models/configuration-source';
+
+export interface TraceConfigurationsDetailsComponentProps {
+    configuration: Configuration,
+    configurationSourceType: ConfigurationSourceType,
+    traceConfigurationManager: TraceConfigurationManager
+}
+
+export class TraceConfigurationsDetailsComponent extends React.Component<
+TraceConfigurationsDetailsComponentProps
+> {
+    constructor(props: TraceConfigurationsDetailsComponentProps) {
+        super(props);
+    }
+
+    render(): React.ReactNode {
+        return <React.Fragment>
+            <div>Config Details</div>
+            <div>
+                <label>Name</label>
+                <span>{this.props.configuration.name}</span>
+            </div>
+            <div>
+                <label>Description</label>
+                <span>{this.props.configuration.description}</span>
+            </div>
+            <div>
+                <label>Source type</label>
+                <span>{this.props.configurationSourceType.name}</span>
+            </div>
+        </React.Fragment>;
+    }
+
+    renderParameters(): React.ReactNode {
+        return <React.Fragment>
+            {
+                this.props.configuration.parameters &&
+                this.props.configuration.parameters.forEach((value: string, key: string) => {
+                    <div>
+                        <label>{key}</label>
+                        <span>{value}</span>
+                    </div>;
+                })
+            }
+        </React.Fragment>;
+    }
+}

packages/react-components/src/components/trace-configurations/trace-configuration-dialog-component.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { TraceConfigurationListComponent } from './trace-configuration-list-component';
+import { AbstractDialogComponent, DialogComponentProps } from '../abstract-dialog-component';
+import { TraceConfigurationsAddDialogComponent } from './trace-configuration-add-component';
+import { TraceConfigurationManager } from 'traceviewer-base/lib/trace-configuration-manager';
+import { ITspClient } from 'tsp-typescript-client/lib/protocol/tsp-client';
+import { ConfigurationSourceType } from 'tsp-typescript-client/lib/models/configuration-source';
+
+export interface TraceConfigurationVisibility {
+    list: boolean;
+    add: boolean;
+}
+
+export interface TraceConfigurationsDialogComponentProps extends DialogComponentProps {
+    tspClient: ITspClient;
+}
+export interface TraceConfigurationsDialogComponentState {
+    visibility: TraceConfigurationVisibility;
+    configurationSourceTypes: ConfigurationSourceType[];
+}
+
+export class TraceConfigurationsDialogComponent extends AbstractDialogComponent<
+    TraceConfigurationsDialogComponentProps,
+    TraceConfigurationsDialogComponentState
+> {
+    protected renderDialogBody(): React.ReactElement {
+        return (
+            <React.Fragment>
+                <div>
+                    <TraceConfigurationListComponent
+                        traceConfigurationManager={this.traceConfigurationManager}
+                        configurationSourceTypes={this.state.configurationSourceTypes}
+                    ></TraceConfigurationListComponent>
+                </div>
+                <div>
+                    <TraceConfigurationsAddDialogComponent
+                        key={this.state.configurationSourceTypes.length}
+                        traceConfigurationManager={this.traceConfigurationManager}
+                        configurationSourceTypes={this.state.configurationSourceTypes}
+                    ></TraceConfigurationsAddDialogComponent>
+                </div>
+            </React.Fragment>
+        );
+    }
+    protected renderFooter(): React.ReactElement {
+        return <React.Fragment></React.Fragment>;
+    }
+    private traceConfigurationManager: TraceConfigurationManager;
+
+    constructor(props: TraceConfigurationsDialogComponentProps) {
+        super(props);
+        this.traceConfigurationManager = new TraceConfigurationManager(this.props.tspClient);
+        this.state = {
+            visibility: {
+                list: false,
+                add: false
+            },
+            configurationSourceTypes: []
+        };
+    }
+
+    protected onAfterOpen(): void {
+        this.traceConfigurationManager.getConfigurationSourceTypes().then(result => {
+            if (result !== undefined) {
+                this.setState({
+                    configurationSourceTypes: result
+                });
+            }
+        });
+    }
+
+    private updateVisibility(visibility: TraceConfigurationVisibility): void {
+        this.setState({
+            visibility: visibility
+        });
+    }
+}