Skip to content

Commit

Permalink
We may have a functional rough draft baby
Browse files Browse the repository at this point in the history
  • Loading branch information
@williamsyang-work
williamsyang-work committed Feb 14, 2024
1 parent 05cdf04 commit be6cabc
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 35 deletions.
32 changes: 21 additions & 11 deletions packages/react-components/src/components/trace-context-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export interface TraceContextProps {
removeResizeHandler: (handler: () => void) => void;
backgroundTheme: string;
persistedState?: PersistedState;
serverStatus?: boolean;
}

export interface TraceContextState {
Expand Down Expand Up @@ -491,20 +492,29 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
}

render(): JSX.Element {
const { serverStatus } = this.props;
const shouldRenderOutputs =
this.state.style.width > 0 && (this.props.outputs.length || this.props.overviewDescriptor);
return (
<div
className="trace-context-container"
onContextMenu={event => this.onContextMenu(event)}
onKeyDown={event => this.onKeyDown(event)}
onKeyUp={event => this.onKeyUp(event)}
ref={this.traceContextContainer}
>
<TooltipComponent ref={this.tooltipComponent} />
<TooltipXYComponent ref={this.tooltipXYComponent} />
{shouldRenderOutputs ? this.renderOutputs() : this.renderPlaceHolder()}
</div>
<>
{/* Render the grey-out overlay if the server is down */}
{serverStatus === false && (
<div className="overlay">
<div className="warning-text">Please start the server to resume using the application.</div>
</div>
)}
<div
className="trace-context-container"
onContextMenu={event => this.onContextMenu(event)}
onKeyDown={event => this.onKeyDown(event)}
onKeyUp={event => this.onKeyUp(event)}
ref={this.traceContextContainer}
>
<TooltipComponent ref={this.tooltipComponent} />
<TooltipXYComponent ref={this.tooltipXYComponent} />
{shouldRenderOutputs ? this.renderOutputs() : this.renderPlaceHolder()}
</div>
</>
);
}

Expand Down
20 changes: 20 additions & 0 deletions packages/react-components/style/trace-viewer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,24 @@ div {
.trace-viewer-container {
margin: 0px 5px 0px 5px;
height: 100%;
}

/* Grey out container */
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
display: flex;
justify-content: center;
align-items: center;
z-index: 999; /* Ensure the overlay appears on top */
}

.warning-text {
color: white; /* Color of the warning text */
text-align: center;
font-size: 24px;
}
45 changes: 21 additions & 24 deletions ...browser/trace-explorer/trace-explorer-sub-widgets/trace-explorer-server-status-widget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,30 +25,27 @@ export class TraceExplorerServerStatusWidget extends ReactWidget {

render(): React.ReactNode {

if (this.serverOn) {
return (
<div className="server-status-header">
<span className="theia-header">Server Status </span>
<i
id="server-status-id"
className="'fa fa-check-circle-o fa-lg'"
title="Server health and latency are good. No known issues"
style={{ color: 'green', marginLeft: '5px' }}
/>
</div>
);
} else {
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' }}
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={className}
title={title}
style={{ color, marginLeft: '5px' }}
/>
</div>
);
}
</div>
);

}
}
14 changes: 14 additions & 0 deletions theia-extensions/viewer-prototype/src/browser/trace-viewer/trace-viewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
TraceContextComponent,
PersistedState
} from 'traceviewer-react-components/lib/components/trace-context-component';
import { TraceServerConnectionStatusClient } from '../../common/trace-server-connection-status';
import { Experiment } from 'tsp-typescript-client/lib/models/experiment';
import { TheiaMessageManager } from '../theia-message-manager';
import { ThemeService } from '@theia/core/lib/browser/theming';
Expand Down Expand Up @@ -56,6 +57,7 @@ export class TraceViewerWidget extends ReactWidget implements StatefulWidget {
protected traceContextComponent: React.RefObject<TraceContextComponent>;
protected persistedState?: PersistedState;
protected loadTraceOverview = true;
protected serverStatus: boolean;

protected resizeHandlers: (() => void)[] = [];
protected readonly addResizeHandler = (h: () => void): void => {
Expand Down Expand Up @@ -105,6 +107,7 @@ export class TraceViewerWidget extends ReactWidget implements StatefulWidget {
@inject(ThemeService) protected readonly themeService: ThemeService;
@inject(OverviewPreferences) protected overviewPreferences: OverviewPreferences;
@inject(FileDialogService) protected readonly fileDialogService: FileDialogService;
@inject(TraceServerConnectionStatusClient) protected readonly connectionStatusService: TraceServerConnectionStatusClient;

@postConstruct()
protected init(): void {
Expand All @@ -118,6 +121,7 @@ export class TraceViewerWidget extends ReactWidget implements StatefulWidget {
this.title.closable = true;
this.addClass('theia-trace-open');
this.backgroundTheme = this.themeService.getCurrentTheme().type;
this.serverStatus = this.connectionStatusService.status;
this.toDispose.push(this.themeService.onDidColorThemeChange(() => this.updateBackgroundTheme()));
if (!this.options.traceUUID) {
this.initialize();
Expand Down Expand Up @@ -160,6 +164,7 @@ export class TraceViewerWidget extends ReactWidget implements StatefulWidget {
if (this.loadTraceOverview) {
this.doHandleTraceOverviewOpenedSignal(this.openedExperiment?.UUID);
}

}

protected readonly toDisposeOnNewExplorer = new DisposableCollection();
Expand All @@ -173,6 +178,7 @@ export class TraceViewerWidget extends ReactWidget implements StatefulWidget {
signalManager().on(Signals.OPEN_OVERVIEW_OUTPUT, this.onTraceOverviewOpened);
signalManager().on(Signals.OVERVIEW_OUTPUT_SELECTED, this.onTraceOverviewOutputSelected);
signalManager().on(Signals.SAVE_AS_CSV, this.onSaveAsCSV);
this.connectionStatusService.addServerStatusChangeListener(this.onServerStatusChange);
}

protected updateBackgroundTheme(): void {
Expand All @@ -188,6 +194,8 @@ export class TraceViewerWidget extends ReactWidget implements StatefulWidget {
signalManager().off(Signals.OPEN_OVERVIEW_OUTPUT, this.onTraceOverviewOpened);
signalManager().off(Signals.OVERVIEW_OUTPUT_SELECTED, this.onTraceOverviewOutputSelected);
signalManager().off(Signals.SAVE_AS_CSV, this.onSaveAsCSV);
this.connectionStatusService.removeServerStatusChangeListener(this.onServerStatusChange);

}

async initialize(): Promise<void> {
Expand Down Expand Up @@ -336,6 +344,11 @@ export class TraceViewerWidget extends ReactWidget implements StatefulWidget {
this.loadTraceOverview = false;
}

private onServerStatusChange = (status: boolean): void => {
this.serverStatus = status;
this.update();
};

private async fetchMarkerSets(expUUID: string) {
const markers = await this.tspClient.fetchMarkerSets(expUUID);
const markersResponse = markers.getModel();
Expand Down Expand Up @@ -390,6 +403,7 @@ export class TraceViewerWidget extends ReactWidget implements StatefulWidget {
backgroundTheme={this.backgroundTheme}
persistedState={this.persistedState}
messageManager={this._signalHandler}
serverStatus={this.serverStatus}
/>
) : (
'Trace is loading...'
Expand Down

0 comments on commit be6cabc

Please sign in to comment.