Skip to content

Commit

Permalink
Clarify when the Trace Server is Offline
Browse files Browse the repository at this point in the history
Make use of a status LED placed next to the Trace Viewer label
to indicate server status. Red and Green States indicate when
the server is up/down. LED has a tooltip to show more details
when hovered

Signed-off-by: hriday-panchasara <hriday.panchasara@ericsson.com>
  • Loading branch information
hriday-panchasara authored and bhufmann committed Apr 1, 2022
1 parent 8da7a8b commit 4163ae9
Show file tree
Hide file tree
Showing 6 changed files with 85 additions and 0 deletions.
5 changes: 5 additions & 0 deletions packages/react-components/style/trace-explorer.css
Original file line number Diff line number Diff line change
Expand Up @@ -285,3 +285,8 @@
align-items: center;
justify-content: flex-end !important;
}

#trace\.viewer\.serverCheck {
cursor: default;
color: green;
}
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { TraceExplorerOpenedTracesWidget } from './trace-explorer-sub-widgets/th
import { TraceExplorerPlaceholderWidget } from './trace-explorer-sub-widgets/trace-explorer-placeholder-widget';
import { signalManager, Signals } from 'traceviewer-base/lib/signals/signal-manager';
import { OpenedTracesUpdatedSignalPayload } from 'traceviewer-base/src/signals/opened-traces-updated-signal-payload';
import { TraceServerConnectionStatusService } from '../trace-server-status';

@injectable()
export class TraceExplorerWidget extends BaseWidget {
Expand All @@ -18,6 +19,7 @@ export class TraceExplorerWidget extends BaseWidget {
@inject(TraceExplorerTooltipWidget) protected readonly tooltipWidget!: TraceExplorerTooltipWidget;
@inject(TraceExplorerPlaceholderWidget) protected readonly placeholderWidget!: TraceExplorerPlaceholderWidget;
@inject(ViewContainer.Factory) protected readonly viewContainerFactory!: ViewContainer.Factory;
@inject(TraceServerConnectionStatusService) protected readonly connectionStatusService: TraceServerConnectionStatusService;

openExperiment(traceUUID: string): void {
return this.openedTracesWidget.openExperiment(traceUUID);
Expand Down Expand Up @@ -95,4 +97,12 @@ export class TraceExplorerWidget extends BaseWidget {
this.node.focus();
}

protected onAfterShow(): void {
this.connectionStatusService.addConnectionStatusListener();
}

protected onAfterHide(): void {
this.connectionStatusService.removeConnectionStatusListener();
}

}
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { injectable } from 'inversify';
import { RestClient, ConnectionStatusListener } from 'tsp-typescript-client/lib/protocol/rest-client';

@injectable()
export class TraceServerConnectionStatusService {

private connectionStatusListener: ConnectionStatusListener;

private constructor() {
this.connectionStatusListener = ((status: boolean) => {
if (status) {
this.renderSuccess();
} else {
this.renderFailure();
}
});
}

public addConnectionStatusListener(): void {
RestClient.addConnectionStatusListener(this.connectionStatusListener);
}

public removeConnectionStatusListener(): void {
RestClient.removeConnectionStatusListener(this.connectionStatusListener);
}

private renderSuccess(): void {
if (document.getElementById('trace.viewer.serverCheck')) {
document.getElementById('trace.viewer.serverCheck')!.className = 'fa fa-check-circle-o fa-lg';
document.getElementById('trace.viewer.serverCheck')!.title = 'Server health and latency are good. No known issues';
document.getElementById('trace.viewer.serverCheck')!.style.color = 'green';
}
}

private renderFailure(): void {
if (document.getElementById('trace.viewer.serverCheck')) {
document.getElementById('trace.viewer.serverCheck')!.className = 'fa fa-times-circle-o fa-lg';
document.getElementById('trace.viewer.serverCheck')!.title = 'Trace Viewer Critical Error: Trace Server Offline';
document.getElementById('trace.viewer.serverCheck')!.style.color = 'red';
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { TraceViewerToolbarContribution } from './trace-viewer-toolbar-contribut
import { LazyTspClientFactory } from 'traceviewer-base/lib/lazy-tsp-client';
import { BackendFileService, backendFileServicePath } from '../../common/backend-file-service';
import { ChartShortcutsDialog, ChartShortcutsDialogProps } from '../trace-explorer/trace-explorer-sub-widgets/trace-explorer-keyboard-shortcuts/charts-cheatsheet-component';
import { TraceServerConnectionStatusService } from '../trace-server-status';

export default new ContainerModule(bind => {
bind(TraceServerUrlProviderImpl).toSelf().inSingletonScope();
Expand All @@ -36,6 +37,8 @@ export default new ContainerModule(bind => {
bind(FrontendApplicationContribution).toService(TraceViewerToolbarContribution);
bind(TabBarToolbarContribution).toService(TraceViewerToolbarContribution);
bind(CommandContribution).toService(TraceViewerToolbarContribution);
bind(TraceServerConnectionStatusService).toSelf().inSingletonScope();
bind(FrontendApplicationContribution).toService(TraceServerConnectionStatusService);

bind(TraceViewerWidget).toSelf();
bind<WidgetFactory>(WidgetFactory).toDynamicValue(context => ({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,12 @@ export namespace TraceViewerToolbarCommands {
label: 'Keyboard Shortcuts (CTRL / command + F1)',
iconClass: 'fa fa-info-circle fa-lg',
};

export const SERVER_CHECK: Command = {
id: 'trace.viewer.serverCheck',
label: 'Server health and latency are good. No known issues',
iconClass: 'fa fa-check-circle-o fa-lg',
};
}

export namespace TraceViewerToolbarMenus {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { TspClientProvider } from '../tsp-client-provider-impl';
import { TraceViewerWidget } from './trace-viewer';
import { OpenTraceCommand } from './trace-viewer-commands';
import { TraceViewerToolbarCommands, TraceViewerToolbarMenus } from './trace-viewer-toolbar-commands';
import { TraceExplorerWidget } from '../trace-explorer/trace-explorer-widget';

@injectable()
export class TraceViewerToolbarContribution implements TabBarToolbarContribution, CommandContribution {
Expand Down Expand Up @@ -106,6 +107,17 @@ export class TraceViewerToolbarContribution implements TabBarToolbarContribution
this.chartShortcuts.open();
}
});
registry.registerCommand(
TraceViewerToolbarCommands.SERVER_CHECK, {
isVisible: (w: Widget) => {
if (w instanceof TraceExplorerWidget) {
return true;
}
return false;
},
// eslint-disable-next-line @typescript-eslint/no-empty-function
execute: () => {}
});
}

registerToolbarItems(registry: TabBarToolbarRegistry): void {
Expand Down Expand Up @@ -237,5 +249,11 @@ export class TraceViewerToolbarContribution implements TabBarToolbarContribution
tooltip: TraceViewerToolbarCommands.CHARTS_CHEATSHEET.label,
priority: 7,
});
registry.registerItem({
id: TraceViewerToolbarCommands.SERVER_CHECK.id,
command: TraceViewerToolbarCommands.SERVER_CHECK.id,
tooltip: TraceViewerToolbarCommands.SERVER_CHECK.label,
priority: 7,
});
}
}

0 comments on commit 4163ae9

Please sign in to comment.