From 2eaeec326fed3622ee3c17db557ed9d6482d96de Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Tue, 16 Apr 2024 20:22:47 +0100
Subject: [PATCH] Refactor GanttChart components and update title and
 description types to support React elements

---
 .../src/Components/GanttChart/Row/Index.tsx    | 10 +++++-----
 .../src/Components/GanttChart/Row/RowLabel.tsx |  4 ++--
 CommonUI/src/Components/GanttChart/Rows.tsx    |  5 +++--
 .../Services/View/Traces/View/Index.tsx        | 18 ++++++++++++++++--
 4 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/CommonUI/src/Components/GanttChart/Row/Index.tsx b/CommonUI/src/Components/GanttChart/Row/Index.tsx
index ad70f63ad24..deffa163d74 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<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
index c52f35e3fe5..a4308892980 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<ComponentProps> = (
diff --git a/CommonUI/src/Components/GanttChart/Rows.tsx b/CommonUI/src/Components/GanttChart/Rows.tsx
index 5f354d62b38..d03a165be2e 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<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
index 58539329d41..f4903cebd4e 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<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: [