Update BarLabel component to use label prop instead of title prop in …

…Bar component

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<ComponentProps> = (
@@ -12,14 +10,7 @@ const BarLabel: FunctionComponent<ComponentProps> = (
     return (
         // rectangle div with curved corners and text inside in tailwindcss
 
-        <div
-            className="text-center text-sm font-medium"
-            style={{
-                color: `${props.titleColor.toString()}`,
-            }}
-        >
-            {props.title}
-        </div>
+        <div className="text-center text-sm font-medium">{props.label}</div>
     );
 };
 

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<ComponentProps> = (
         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<ComponentProps> = (
                     setIsSelected(!isSelected);
                 }}
             >
-                {!showLabelOutsideBar && (
-                    <BarLabel
-                        title={props.bar.title}
-                        titleColor={props.bar.titleColor}
-                    />
-                )}
                 {isHovered && props.bar.tooltip && (
                     <div className="bar-tooltip cursor-pointer bg-white shadow rounded p-2 w-fit z-40 absolute">
                         {props.bar.tooltip}
                     </div>
                 )}
             </div>
-            {showLabelOutsideBar && (
-                <div
-                    className="h-8 pt-1 pb-1 mt-2.5 mb-2.5"
-                    style={{
-                        marginLeft: `${barWidth + 15}px`,
-                        opacity: barOpacity,
-                    }}
-                >
-                    <BarLabel
-                        title={props.bar.title}
-                        titleColor={props.bar.barColor}
-                    />
-                </div>
-            )}
+
+            <div
+                className="h-8 pt-1 pb-1 mt-2.5 mb-2.5"
+                style={{
+                    marginLeft: `${barWidth + 15}px`,
+                    opacity: barOpacity,
+                }}
+            >
+                <BarLabel label={props.bar.label} />
+            </div>
         </div>
     );
 };

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<ComponentProps> = (
+    props: ComponentProps
+): ReactElement => {
+    const { span } = props;
+
+    return (
+        <div className="flex space-x-2">
+            <div className="mt-1">
+                {span &&
+                (span.statusCode === SpanStatus.Unset || !span.statusCode) ? (
+                    <ColorCircle color={Green} tooltip="Span Status: Unset" />
+                ) : (
+                    <></>
+                )}
+                {span && span.statusCode === SpanStatus.Ok ? (
+                    <ColorCircle color={Green} tooltip="Span Status: Ok" />
+                ) : (
+                    <></>
+                )}
+                {span && span.statusCode === SpanStatus.Error ? (
+                    <ColorCircle color={Red} tooltip="Span Status: Error" />
+                ) : (
+                    <></>
+                )}
+            </div>
+            {props.title && (
+                <div className={props.titleClassName}>{props.title}</div>
+            )}
+        </div>
+    );
+};
+
+export default SpanStatusElement;

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<ComponentProps> = (
@@ -26,7 +27,9 @@ const TelemetryServiceElement: FunctionComponent<ComponentProps> = (
                         tooltip={`${props.telemetryService.name?.toString()} Service Color`}
                     />
                 </div>
-                <span>{props.telemetryService.name?.toString()}</span>
+                <div className={props.telemetryServiceNameClassName}>
+                    {props.telemetryService.name?.toString()}
+                </div>
             </div>
         );
     };

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<PageComponentProps> = (
     _props: PageComponentProps
@@ -108,52 +107,18 @@ const TracesList: FunctionComponent<PageComponentProps> = (
                         },
                         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 (
                                 <Fragment>
-                                    <div className="flex space-x-2">
-                                        <div className="mt-1">
-                                            {spanObj &&
-                                            (spanObj.statusCode ===
-                                                SpanStatus.Unset ||
-                                                !spanObj.statusCode) ? (
-                                                <ColorCircle
-                                                    color={Green}
-                                                    tooltip="Span Status: Unset"
-                                                />
-                                            ) : (
-                                                <></>
-                                            )}
-                                            {spanObj &&
-                                            spanObj.statusCode ===
-                                                SpanStatus.Ok ? (
-                                                <ColorCircle
-                                                    color={Green}
-                                                    tooltip="Span Status: Ok"
-                                                />
-                                            ) : (
-                                                <></>
-                                            )}
-                                            {spanObj &&
-                                            spanObj.statusCode ===
-                                                SpanStatus.Error ? (
-                                                <ColorCircle
-                                                    color={Red}
-                                                    tooltip="Span Status: Error"
-                                                />
-                                            ) : (
-                                                <></>
-                                            )}
-                                        </div>
-                                        <span>
-                                            {spanObj.traceId?.toString()}
-                                        </span>
-                                    </div>
+                                    <SpanStatusElement
+                                        span={span}
+                                        title={span.traceId?.toString()}
+                                    />
                                 </Fragment>
                             );
                         },

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<PageComponentProps> = (
                 kind: true,
                 serviceId: true,
                 durationUnixNano: true,
+                statusCode: true,
             };
 
             const spanFromUrl: Span | null =
@@ -238,16 +240,26 @@ const TraceView: FunctionComponent<PageComponentProps> = (
 
         const spanColor: {
             barColor: Color;
-            titleColor: Color;
         } = SpanUtil.getGanttChartBarColor({
             span: span,
             telemetryServices: telemetryServices,
         });
 
         return {
             id: span.spanId!,
-            title: span.name!,
-            titleColor: spanColor.titleColor,
+            label: (
+                <div className="mt-0.5">
+                    <SpanStatusElement
+                        span={span}
+                        title={
+                            'Status: ' +
+                            SpanUtil.getSpanStatusCodeFriendlyName(
+                                span.statusCode!
+                            )
+                        }
+                    />
+                </div>
+            ),
             barColor: spanColor.barColor,
             barTimelineStart:
                 (span.startTimeUnixNano! - timelineStartTimeUnixNano) /
@@ -275,6 +287,27 @@ const TraceView: FunctionComponent<PageComponentProps> = (
         divisibilityFactorAndIntervalUnit: string;
     };
 
+    type GetRowDescriptionFunction = (data: {
+        telemetryService: TelemetryService;
+        span: Span;
+    }) => ReactElement;
+
+    const getRowDescription: GetRowDescriptionFunction = (data: {
+        telemetryService: TelemetryService;
+        span: Span;
+    }): ReactElement => {
+        const { telemetryService } = data;
+
+        return (
+            <div className="flex space-x-5">
+                <TelemetryServiceElement
+                    telemetryService={telemetryService}
+                    telemetryServiceNameClassName="mt-0.5"
+                />
+            </div>
+        );
+    };
+
     type GetRowsFunction = (data: GetBarsFunctionProps) => Array<GanttChartRow>;
 
     const getRows: GetRowsFunction = (
@@ -303,9 +336,10 @@ const TraceView: FunctionComponent<PageComponentProps> = (
             rowInfo: {
                 title: <div>{rootSpan.name!}</div>,
                 description: telemetryService ? (
-                    <TelemetryServiceElement
-                        telemetryService={telemetryService}
-                    />
+                    getRowDescription({
+                        telemetryService,
+                        span: rootSpan,
+                    })
                 ) : (
                     <></>
                 ),

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<TelemetryService>;
     }): {
         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,
         };
     }
 }