Refactor GanttChart components and update title and description types…

… to support React elements
OneUptime · Apr 16, 2024 · 2eaeec3 · 2eaeec3
1 parent c582330
commit 2eaeec3
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 11 deletions.
diff --git 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<GanttChartBar>; // usually will have only one bar, this is for future proofing
@@ -25,11 +25,11 @@ export interface ComponentProps {
 const Row: FunctionComponent<ComponentProps> = (
     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
@@ -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<ComponentProps> = (

diff --git a/CommonUI/src/Components/GanttChart/Rows.tsx b/CommonUI/src/Components/GanttChart/Rows.tsx
@@ -13,10 +13,11 @@ export interface ComponentProps {
 const Rows: FunctionComponent<ComponentProps> = (
     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
@@ -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<PageComponentProps> = (
             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: <div>{rootSpan.name!}</div>,
+                description: telemetryService ? (
+                    <TelemetryServiceElement
+                        telemetryService={telemetryService}
+                    />
+                ) : (
+                    <></>
+                ),
                 id: ObjectID.generate().toString(),
             },
             bars: [