diff --git a/src/components/Explore/TracesByService/Tabs/ServicesTabScene.tsx b/src/components/Explore/TracesByService/Tabs/ServicesTabScene.tsx new file mode 100644 index 0000000..bd29fe8 --- /dev/null +++ b/src/components/Explore/TracesByService/Tabs/ServicesTabScene.tsx @@ -0,0 +1,64 @@ +import React from 'react'; + +import { + SceneCanvasText, + SceneComponentProps, + SceneFlexItem, + SceneFlexLayout, + SceneObjectBase, + SceneObjectState, +} from '@grafana/scenes'; + +export interface ServicesTabSceneState extends SceneObjectState { + loading?: boolean; + panel?: SceneFlexLayout; +} + +export class ServicesTabScene extends SceneObjectBase { + constructor(state: Partial) { + super({ + ...state, + }); + + this.addActivationHandler(this._onActivate.bind(this)); + } + + public _onActivate() { + if (!this.state.panel) { + this.setState({ + panel: this.getVizPanel(), + }); + } + } + + private getVizPanel() { + return new SceneFlexLayout({ + direction: 'row', + children: [ + new SceneFlexItem({ + body: new SceneCanvasText({ + text: 'No content available yet', + fontSize: 20, + align: 'center', + }), + }), + ], + }); + } + + public static Component = ({ model }: SceneComponentProps) => { + const { panel } = model.useState(); + + if (!panel) { + return; + } + + return ; + }; +} + +export function buildServicesTabScene() { + return new SceneFlexItem({ + body: new ServicesTabScene({}), + }); +} diff --git a/src/components/Explore/TracesByService/TracesByServiceScene.tsx b/src/components/Explore/TracesByService/TracesByServiceScene.tsx index 1065031..ac4039d 100644 --- a/src/components/Explore/TracesByService/TracesByServiceScene.tsx +++ b/src/components/Explore/TracesByService/TracesByServiceScene.tsx @@ -27,6 +27,7 @@ import { } from '../../../utils/shared'; import { getExplorationFor } from '../../../utils/utils'; import { ShareExplorationButton } from './ShareExplorationButton'; +import { buildServicesTabScene } from './Tabs/ServicesTabScene'; export interface TraceSceneState extends SceneObjectState { body: SceneFlexLayout; @@ -97,7 +98,7 @@ export class TracesByServiceScene extends SceneObjectBase { const actionViewsDefinitions: ActionViewDefinition[] = [ { displayName: 'Spans', value: 'spans', getScene: buildTracesListScene }, - { displayName: 'Services', value: 'services', getScene: buildTracesListScene }, + { displayName: 'Services', value: 'services', getScene: buildServicesTabScene }, ]; export interface TracesActionBarState extends SceneObjectState {}