github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity

Refactor GanttChart components and update title and description types to support React elements

Browse Source
This commit is contained in:
Simon Larsen
2024-04-16 20:22:47 +01:00
parent c5823308af
commit 2eaeec326f
4 changed files with 26 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
CommonUI/src/Components/GanttChart/Row/Index.tsx
View File

@@ -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 (

4
CommonUI/src/Components/GanttChart/Row/RowLabel.tsx
View File

@@ -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> = (

5
CommonUI/src/Components/GanttChart/Rows.tsx
View File

@@ -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 (

18
Dashboard/src/Pages/Telemetry/Services/View/Traces/View/Index.tsx
View File

@@ -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: [