diff --git a/CommonUI/src/Components/GanttChart/Row/Index.tsx b/CommonUI/src/Components/GanttChart/Row/Index.tsx index ad70f63ad2..deffa163d7 100644 --- a/CommonUI/src/Components/GanttChart/Row/Index.tsx +++ b/CommonUI/src/Components/GanttChart/Row/Index.tsx @@ -5,8 +5,8 @@ import Bar, { GanttChartBar } from '../Bar/Index'; export interface GanttChartRow { rowInfo: { id: string; - title: string; - description: string; + title: string | ReactElement; + description: string | ReactElement; }; childRows: GanttChartRow[]; bars: Array; // usually will have only one bar, this is for future proofing @@ -25,11 +25,11 @@ export interface ComponentProps { const Row: FunctionComponent = ( props: ComponentProps ): ReactElement => { - - type GetRowFunction = (data: { row: GanttChartRow }) => ReactElement; - const getRow: GetRowFunction = (data: { row: GanttChartRow }): ReactElement => { + const getRow: GetRowFunction = (data: { + row: GanttChartRow; + }): ReactElement => { const { row } = data; return ( diff --git a/CommonUI/src/Components/GanttChart/Row/RowLabel.tsx b/CommonUI/src/Components/GanttChart/Row/RowLabel.tsx index c52f35e3fe..a430889298 100644 --- a/CommonUI/src/Components/GanttChart/Row/RowLabel.tsx +++ b/CommonUI/src/Components/GanttChart/Row/RowLabel.tsx @@ -1,8 +1,8 @@ import React, { FunctionComponent, ReactElement } from 'react'; export interface ComponentProps { - title: string; - description: string; + title: string | ReactElement; + description: string | ReactElement; } const RowLabel: FunctionComponent = ( diff --git a/CommonUI/src/Components/GanttChart/Rows.tsx b/CommonUI/src/Components/GanttChart/Rows.tsx index 5f354d62b3..d03a165be2 100644 --- a/CommonUI/src/Components/GanttChart/Rows.tsx +++ b/CommonUI/src/Components/GanttChart/Rows.tsx @@ -13,10 +13,11 @@ export interface ComponentProps { const Rows: FunctionComponent = ( props: ComponentProps ): ReactElement => { - type GetRowFunction = (data: { row: GanttChartRow }) => ReactElement; - const getRow: GetRowFunction = (data: { row: GanttChartRow }): ReactElement => { + const getRow: GetRowFunction = (data: { + row: GanttChartRow; + }): ReactElement => { const { row } = data; return ( diff --git a/Dashboard/src/Pages/Telemetry/Services/View/Traces/View/Index.tsx b/Dashboard/src/Pages/Telemetry/Services/View/Traces/View/Index.tsx index 58539329d4..f4903cebd4 100644 --- a/Dashboard/src/Pages/Telemetry/Services/View/Traces/View/Index.tsx +++ b/Dashboard/src/Pages/Telemetry/Services/View/Traces/View/Index.tsx @@ -26,6 +26,7 @@ import { GanttChartBar } from 'CommonUI/src/Components/GanttChart/Bar/Index'; import { GanttChartRow } from 'CommonUI/src/Components/GanttChart/Row/Index'; import { PromiseVoidFunction } from 'Common/Types/FunctionTypes'; import { getRefreshButton } from 'CommonUI/src/Components/Card/CardButtons/Refresh'; +import TelemetryServiceElement from '../../../../../../Components/TelemetryService/TelemetryServiceElement'; type BarTooltipFunctionProps = { span: Span; @@ -291,10 +292,23 @@ const TraceView: FunctionComponent = ( return []; } + const telemetryService: TelemetryService | undefined = + telemetryServices.find((service: TelemetryService) => { + return ( + service._id?.toString() === rootSpan.serviceId?.toString() + ); + }); + const rootRow: GanttChartRow = { rowInfo: { - title: rootSpan.name!, - description: '', + title:
{rootSpan.name!}
, + description: telemetryService ? ( + + ) : ( + <> + ), id: ObjectID.generate().toString(), }, bars: [