From d8bfab3ae068a3203eb2d1e1e223ea6eb89c0c1d Mon Sep 17 00:00:00 2001 From: Simon Larsen Date: Fri, 19 Apr 2024 12:32:59 +0100 Subject: [PATCH] Update BarLabel component to use label prop instead of title prop in Bar component --- .../Components/GanttChart/Bar/BarLabel.tsx | 13 +---- .../src/Components/GanttChart/Bar/Index.tsx | 37 ++++---------- .../src/Components/Span/SpanStatusElement.tsx | 44 ++++++++++++++++ .../TelemetryServiceElement.tsx | 5 +- .../Telemetry/Services/View/Traces/Index.tsx | 51 +++---------------- .../Services/View/Traces/View/Index.tsx | 46 ++++++++++++++--- Dashboard/src/Utils/SpanUtil.ts | 26 +++++++--- 7 files changed, 127 insertions(+), 95 deletions(-) create mode 100644 Dashboard/src/Components/Span/SpanStatusElement.tsx diff --git a/CommonUI/src/Components/GanttChart/Bar/BarLabel.tsx b/CommonUI/src/Components/GanttChart/Bar/BarLabel.tsx index 388850269d7..cb73367dd8c 100644 --- a/CommonUI/src/Components/GanttChart/Bar/BarLabel.tsx +++ b/CommonUI/src/Components/GanttChart/Bar/BarLabel.tsx @@ -1,9 +1,7 @@ import React, { FunctionComponent, ReactElement } from 'react'; -import Color from 'Common/Types/Color'; export interface ComponentProps { - titleColor: Color; - title: string; + label: string | ReactElement; } const BarLabel: FunctionComponent = ( @@ -12,14 +10,7 @@ const BarLabel: FunctionComponent = ( return ( // rectangle div with curved corners and text inside in tailwindcss -
- {props.title} -
+
{props.label}
); }; diff --git a/CommonUI/src/Components/GanttChart/Bar/Index.tsx b/CommonUI/src/Components/GanttChart/Bar/Index.tsx index 5704972e879..71b5edd8c05 100644 --- a/CommonUI/src/Components/GanttChart/Bar/Index.tsx +++ b/CommonUI/src/Components/GanttChart/Bar/Index.tsx @@ -9,8 +9,7 @@ import BarLabel from './BarLabel'; export interface GanttChartBar { id: string; - title: string; - titleColor: Color; + label: string | ReactElement; barColor: Color; barTimelineStart: number; barTimelineEnd: number; @@ -54,10 +53,6 @@ const Bar: FunctionComponent = ( barWidth = 5; } - const eachCharacterWidth: number = 8; - const showLabelOutsideBar: boolean = - barWidth < props.bar.title.length * eachCharacterWidth; - const handleMouseEnter: MouseEventHandler = (): void => { setIsHovered(true); }; @@ -102,32 +97,22 @@ const Bar: FunctionComponent = ( setIsSelected(!isSelected); }} > - {!showLabelOutsideBar && ( - - )} {isHovered && props.bar.tooltip && (
{props.bar.tooltip}
)} - {showLabelOutsideBar && ( -
- -
- )} + +
+ +
); }; diff --git a/Dashboard/src/Components/Span/SpanStatusElement.tsx b/Dashboard/src/Components/Span/SpanStatusElement.tsx new file mode 100644 index 00000000000..3be8a9b5fcd --- /dev/null +++ b/Dashboard/src/Components/Span/SpanStatusElement.tsx @@ -0,0 +1,44 @@ +import React, { FunctionComponent, ReactElement } from 'react'; +import Span, { SpanStatus } from 'Model/AnalyticsModels/Span'; +import ColorCircle from 'CommonUI/src/Components/ColorCircle/ColorCircle'; +import { Green, Red } from 'Common/Types/BrandColors'; + +export interface ComponentProps { + span: Span; + title?: string | undefined; + titleClassName?: string | undefined; +} + +const SpanStatusElement: FunctionComponent = ( + props: ComponentProps +): ReactElement => { + const { span } = props; + + return ( +
+
+ {span && + (span.statusCode === SpanStatus.Unset || !span.statusCode) ? ( + + ) : ( + <> + )} + {span && span.statusCode === SpanStatus.Ok ? ( + + ) : ( + <> + )} + {span && span.statusCode === SpanStatus.Error ? ( + + ) : ( + <> + )} +
+ {props.title && ( +
{props.title}
+ )} +
+ ); +}; + +export default SpanStatusElement; diff --git a/Dashboard/src/Components/TelemetryService/TelemetryServiceElement.tsx b/Dashboard/src/Components/TelemetryService/TelemetryServiceElement.tsx index 6ef3d7c09b2..ac9f39a0fc3 100644 --- a/Dashboard/src/Components/TelemetryService/TelemetryServiceElement.tsx +++ b/Dashboard/src/Components/TelemetryService/TelemetryServiceElement.tsx @@ -12,6 +12,7 @@ import { GetReactElementFunction } from 'CommonUI/src/Types/FunctionTypes'; export interface ComponentProps { telemetryService: TelemetryService; onNavigateComplete?: (() => void) | undefined; + telemetryServiceNameClassName?: string; } const TelemetryServiceElement: FunctionComponent = ( @@ -26,7 +27,9 @@ const TelemetryServiceElement: FunctionComponent = ( tooltip={`${props.telemetryService.name?.toString()} Service Color`} /> - {props.telemetryService.name?.toString()} +
+ {props.telemetryService.name?.toString()} +
); }; diff --git a/Dashboard/src/Pages/Telemetry/Services/View/Traces/Index.tsx b/Dashboard/src/Pages/Telemetry/Services/View/Traces/Index.tsx index 3f033e79060..1fd2bba4a82 100644 --- a/Dashboard/src/Pages/Telemetry/Services/View/Traces/Index.tsx +++ b/Dashboard/src/Pages/Telemetry/Services/View/Traces/Index.tsx @@ -10,9 +10,8 @@ import SortOrder from 'Common/Types/BaseDatabase/SortOrder'; import DropdownUtil from 'CommonUI/src/Utils/Dropdown'; import { DropdownOption } from 'CommonUI/src/Components/Dropdown/Dropdown'; import { JSONObject } from 'Common/Types/JSON'; -import ColorCircle from 'CommonUI/src/Components/ColorCircle/ColorCircle'; import AnalyticsBaseModel from 'Common/AnalyticsModels/BaseModel'; -import { Green, Red } from 'Common/Types/BrandColors'; +import SpanStatusElement from '../../../../../Components/Span/SpanStatusElement'; const TracesList: FunctionComponent = ( _props: PageComponentProps @@ -108,52 +107,18 @@ const TracesList: FunctionComponent = ( }, title: 'Span ID', type: FieldType.Element, - getElement: (span: JSONObject): ReactElement => { - const spanObj: Span = AnalyticsBaseModel.fromJSON( - span, + getElement: (spanObj: JSONObject): ReactElement => { + const span: Span = AnalyticsBaseModel.fromJSON( + spanObj, Span ) as Span; return ( -
-
- {spanObj && - (spanObj.statusCode === - SpanStatus.Unset || - !spanObj.statusCode) ? ( - - ) : ( - <> - )} - {spanObj && - spanObj.statusCode === - SpanStatus.Ok ? ( - - ) : ( - <> - )} - {spanObj && - spanObj.statusCode === - SpanStatus.Error ? ( - - ) : ( - <> - )} -
- - {spanObj.traceId?.toString()} - -
+ ); }, 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 c539a3a8943..e4c2170df96 100644 --- a/Dashboard/src/Pages/Telemetry/Services/View/Traces/View/Index.tsx +++ b/Dashboard/src/Pages/Telemetry/Services/View/Traces/View/Index.tsx @@ -27,6 +27,7 @@ import { PromiseVoidFunction } from 'Common/Types/FunctionTypes'; import { getRefreshButton } from 'CommonUI/src/Components/Card/CardButtons/Refresh'; import TelemetryServiceElement from '../../../../../../Components/TelemetryService/TelemetryServiceElement'; import { GanttChartRow } from 'CommonUI/src/Components/GanttChart/Row/Row'; +import SpanStatusElement from '../../../../../../Components/Span/SpanStatusElement'; type BarTooltipFunctionProps = { span: Span; @@ -100,6 +101,7 @@ const TraceView: FunctionComponent = ( kind: true, serviceId: true, durationUnixNano: true, + statusCode: true, }; const spanFromUrl: Span | null = @@ -238,7 +240,6 @@ const TraceView: FunctionComponent = ( const spanColor: { barColor: Color; - titleColor: Color; } = SpanUtil.getGanttChartBarColor({ span: span, telemetryServices: telemetryServices, @@ -246,8 +247,19 @@ const TraceView: FunctionComponent = ( return { id: span.spanId!, - title: span.name!, - titleColor: spanColor.titleColor, + label: ( +
+ +
+ ), barColor: spanColor.barColor, barTimelineStart: (span.startTimeUnixNano! - timelineStartTimeUnixNano) / @@ -275,6 +287,27 @@ const TraceView: FunctionComponent = ( divisibilityFactorAndIntervalUnit: string; }; + type GetRowDescriptionFunction = (data: { + telemetryService: TelemetryService; + span: Span; + }) => ReactElement; + + const getRowDescription: GetRowDescriptionFunction = (data: { + telemetryService: TelemetryService; + span: Span; + }): ReactElement => { + const { telemetryService } = data; + + return ( +
+ +
+ ); + }; + type GetRowsFunction = (data: GetBarsFunctionProps) => Array; const getRows: GetRowsFunction = ( @@ -303,9 +336,10 @@ const TraceView: FunctionComponent = ( rowInfo: { title:
{rootSpan.name!}
, description: telemetryService ? ( - + getRowDescription({ + telemetryService, + span: rootSpan, + }) ) : ( <> ), diff --git a/Dashboard/src/Utils/SpanUtil.ts b/Dashboard/src/Utils/SpanUtil.ts index e54504eec53..7f3b516a4af 100644 --- a/Dashboard/src/Utils/SpanUtil.ts +++ b/Dashboard/src/Utils/SpanUtil.ts @@ -1,6 +1,6 @@ -import { Black, White } from 'Common/Types/BrandColors'; +import { Black } from 'Common/Types/BrandColors'; import Color from 'Common/Types/Color'; -import Span, { SpanKind } from 'Model/AnalyticsModels/Span'; +import Span, { SpanKind, SpanStatus } from 'Model/AnalyticsModels/Span'; import TelemetryService from 'Model/Models/TelemetryService'; export default class SpanUtil { @@ -22,12 +22,27 @@ export default class SpanUtil { return spanKindText; } + public static getSpanStatusCodeFriendlyName( + statusCode: SpanStatus + ): string { + let statusCodeText: string = 'Unset'; // by default spans are always unset + + if (statusCode === SpanStatus.Ok) { + statusCodeText = 'Ok'; + } else if (statusCode === SpanStatus.Error) { + statusCodeText = 'Error'; + } else { + statusCodeText = 'Unset'; + } + + return statusCodeText; + } + public static getGanttChartBarColor(data: { span: Span; telemetryServices: Array; }): { barColor: Color; - titleColor: Color; } { const service: TelemetryService | undefined = data.telemetryServices.find((service: TelemetryService) => { @@ -39,18 +54,13 @@ export default class SpanUtil { if (!service || !service.serviceColor) { return { barColor: Black, - titleColor: White, }; } const barColor: Color = service.serviceColor; - const titleColor: Color = Color.shouldUseDarkText(barColor) - ? White - : Black; return { barColor, - titleColor, }; } }