From c4256a0dea868717a59a81dc74cf329bcc9eabcc Mon Sep 17 00:00:00 2001 From: Simon Larsen Date: Fri, 29 Nov 2024 19:17:47 +0000 Subject: [PATCH] Refactor Dashboard components for improved code consistency and readability --- Common/Types/BrandColors.ts | 2 - Common/Types/ColorSwatch.ts | 53 ++++---- .../Dashboard/Canvas/ArgumentsForm.tsx | 4 +- .../Components/DashboardBaseComponent.tsx | 2 +- .../Components/DashboardChartComponent.tsx | 45 ++++--- .../Toolbar/DashboardStartAndEndDateView.tsx | 60 ++++----- .../Dashboard/Toolbar/DashboardToolbar.tsx | 5 +- .../Types/DashboardStartAndEndDate.ts | 126 +++++++++++++----- .../Types/DashboardStartAndEndDateRange.ts | 20 +-- .../Components/Metrics/MetricQueryConfig.tsx | 100 +++++++------- .../src/Components/Metrics/Utils/Metrics.ts | 18 ++- 11 files changed, 250 insertions(+), 185 deletions(-) diff --git a/Common/Types/BrandColors.ts b/Common/Types/BrandColors.ts index 1a08c1fe143..44620f70063 100644 --- a/Common/Types/BrandColors.ts +++ b/Common/Types/BrandColors.ts @@ -73,5 +73,3 @@ export const ChartColors: Color[] = [ Cyan500, Gray500, ]; - - diff --git a/Common/Types/ColorSwatch.ts b/Common/Types/ColorSwatch.ts index dfafd3ec773..0661947d374 100644 --- a/Common/Types/ColorSwatch.ts +++ b/Common/Types/ColorSwatch.ts @@ -1,28 +1,27 @@ enum ColorSwatch { - Zinc = "zinc", - Neutra = "neutra", - Stone = "stone", - Slate = "slate", - Purple = "purple", - Pink = "pink", - Red = "red", - Orange = "orange", - Yellow = "yellow", - Green = "green", - Teal = "teal", - Cyan = "cyan", - Gray = "gray", - Moroon = "moroon", - Blue = "blue", - Indigo = "indigo", - Amber = "amber", - Lime = "lime", - Emerald = "emerald", - Sky = "sky", - Violet = "violet", - Fuchsia = "fuchsia", - Rose = "rose", - } - - - export default ColorSwatch; \ No newline at end of file + Zinc = "zinc", + Neutra = "neutra", + Stone = "stone", + Slate = "slate", + Purple = "purple", + Pink = "pink", + Red = "red", + Orange = "orange", + Yellow = "yellow", + Green = "green", + Teal = "teal", + Cyan = "cyan", + Gray = "gray", + Moroon = "moroon", + Blue = "blue", + Indigo = "indigo", + Amber = "amber", + Lime = "lime", + Emerald = "emerald", + Sky = "sky", + Violet = "violet", + Fuchsia = "fuchsia", + Rose = "rose", +} + +export default ColorSwatch; diff --git a/Dashboard/src/Components/Dashboard/Canvas/ArgumentsForm.tsx b/Dashboard/src/Components/Dashboard/Canvas/ArgumentsForm.tsx index 8ab084145e5..6925b46b5a7 100644 --- a/Dashboard/src/Components/Dashboard/Canvas/ArgumentsForm.tsx +++ b/Dashboard/src/Components/Dashboard/Canvas/ArgumentsForm.tsx @@ -25,7 +25,7 @@ import MetricNameAndUnit from "../../Metrics/Types/MetricNameAndUnit"; import { GetReactElementFunction } from "Common/UI/Types/FunctionTypes"; export interface ComponentProps { - //eslint-disable react/no-unused-prop-types + // eslint-disable-next-line react/no-unused-prop-types metrics: { metricNameAndUnits: Array; telemetryAttributes: string[]; @@ -75,7 +75,7 @@ const ArgumentsForm: FunctionComponent = ( value: FormValues, componentProps: CustomElementProps, ) => ReactElement) => { - //eslint-disable react/display-name + // eslint-disable-next-line react/display-name return ( value: FormValues, componentProps: CustomElementProps, diff --git a/Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx b/Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx index d2f9ef3948d..e06e681c976 100644 --- a/Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx +++ b/Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx @@ -33,7 +33,7 @@ export interface DashboardBaseComponentProps { dashboardCanvasWidthInPx: number; dashboardCanvasHeightInPx: number; dashboardViewConfig: DashboardViewConfig; - dashboardStartAndEndDate: DashboardStartAndEndDate; + dashboardStartAndEndDate: DashboardStartAndEndDate; metricNameAndUnits: Array; } diff --git a/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx b/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx index ff370145dc5..00006ecb2dd 100644 --- a/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx +++ b/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx @@ -18,21 +18,24 @@ export interface ComponentProps extends DashboardBaseComponentProps { const DashboardChartComponentElement: FunctionComponent = ( props: ComponentProps, ): ReactElement => { - - const [metricResults, setMetricResults] = React.useState>([]); + const [metricResults, setMetricResults] = React.useState< + Array + >([]); const [error, setError] = React.useState(null); const [isLoading, setIsLoading] = React.useState(true); const metricViewData: MetricViewData = { - queryConfigs: props.component.arguments.metricQueryConfig ? [props.component.arguments.metricQueryConfig] : [], - startAndEndDate: DashboardStartAndEndDateUtil.getStartAndEndDate(props.dashboardStartAndEndDate), - formulaConfigs: [] - } + queryConfigs: props.component.arguments.metricQueryConfig + ? [props.component.arguments.metricQueryConfig] + : [], + startAndEndDate: DashboardStartAndEndDateUtil.getStartAndEndDate( + props.dashboardStartAndEndDate, + ), + formulaConfigs: [], + }; const fetchAggregatedResults: PromiseVoidFunction = async (): Promise => { - - setIsLoading(true); if ( @@ -66,17 +69,21 @@ const DashboardChartComponentElement: FunctionComponent = ( useEffect(() => { fetchAggregatedResults(); - }, [props.dashboardStartAndEndDate, props.component.arguments.metricQueryConfig, props.metricNameAndUnits]); - - - - return
- -
; + }, [ + props.dashboardStartAndEndDate, + props.component.arguments.metricQueryConfig, + props.metricNameAndUnits, + ]); + + return ( +
+ +
+ ); }; export default DashboardChartComponentElement; diff --git a/Dashboard/src/Components/Dashboard/Toolbar/DashboardStartAndEndDateView.tsx b/Dashboard/src/Components/Dashboard/Toolbar/DashboardStartAndEndDateView.tsx index a42c3bae6ac..1b4ea866ba5 100644 --- a/Dashboard/src/Components/Dashboard/Toolbar/DashboardStartAndEndDateView.tsx +++ b/Dashboard/src/Components/Dashboard/Toolbar/DashboardStartAndEndDateView.tsx @@ -4,49 +4,47 @@ import DashboardStartAndEndDateRange from "../Types/DashboardStartAndEndDateRang import OneUptimeDate from "Common/Types/Date"; import IconProp from "Common/Types/Icon/IconProp"; import { GetReactElementFunction } from "Common/UI/Types/FunctionTypes"; -import HeaderAlert, { HeaderAlertType } from "Common/UI/Components/HeaderAlert/HeaderAlert"; +import HeaderAlert, { + HeaderAlertType, +} from "Common/UI/Components/HeaderAlert/HeaderAlert"; import ColorSwatch from "Common/Types/ColorSwatch"; export interface ComponentProps { - dashboardStartAndEndDate: DashboardStartAndEndDate; - onClick: () => void; + dashboardStartAndEndDate: DashboardStartAndEndDate; + onClick: () => void; } const DashboardStartAndEndDateView: FunctionComponent = ( - props: ComponentProps, + props: ComponentProps, ): ReactElement => { - const isCustomRange: boolean = - props.dashboardStartAndEndDate.range === - DashboardStartAndEndDateRange.CUSTOM; - - const getContent: GetReactElementFunction = (): ReactElement => { - - const title: string = isCustomRange ? `${OneUptimeDate.getDateAsLocalFormattedString( - props.dashboardStartAndEndDate.startAndEndDate?.startValue || + const isCustomRange: boolean = + props.dashboardStartAndEndDate.range === + DashboardStartAndEndDateRange.CUSTOM; + + const getContent: GetReactElementFunction = (): ReactElement => { + const title: string = isCustomRange + ? `${OneUptimeDate.getDateAsLocalFormattedString( + props.dashboardStartAndEndDate.startAndEndDate?.startValue || OneUptimeDate.getCurrentDate(), )} - ${OneUptimeDate.getDateAsLocalFormattedString( - props.dashboardStartAndEndDate.startAndEndDate?.endValue || + props.dashboardStartAndEndDate.startAndEndDate?.endValue || OneUptimeDate.getCurrentDate(), - )}` : props.dashboardStartAndEndDate.range - - return ( - - ); - - }; + )}` + : props.dashboardStartAndEndDate.range; return ( -
- {getContent()} -
- ); + + ); + }; + + return
{getContent()}
; }; export default DashboardStartAndEndDateView; diff --git a/Dashboard/src/Components/Dashboard/Toolbar/DashboardToolbar.tsx b/Dashboard/src/Components/Dashboard/Toolbar/DashboardToolbar.tsx index 9d824192193..c03ff86c7d4 100644 --- a/Dashboard/src/Components/Dashboard/Toolbar/DashboardToolbar.tsx +++ b/Dashboard/src/Components/Dashboard/Toolbar/DashboardToolbar.tsx @@ -46,7 +46,7 @@ const DashboardToolbar: FunctionComponent = ( {!props.isSaving && (
-
+
{ @@ -54,8 +54,7 @@ const DashboardToolbar: FunctionComponent = ( setShowTimeSelectModal(true); }} /> -
- +
{isEditMode ? ( diff --git a/Dashboard/src/Components/Dashboard/Types/DashboardStartAndEndDate.ts b/Dashboard/src/Components/Dashboard/Types/DashboardStartAndEndDate.ts index e46f4a827e1..a205fc39c49 100644 --- a/Dashboard/src/Components/Dashboard/Types/DashboardStartAndEndDate.ts +++ b/Dashboard/src/Components/Dashboard/Types/DashboardStartAndEndDate.ts @@ -7,58 +7,122 @@ export default interface DashboardStartAndEndDate { range: DashboardStartAndEndDateRange; } -export class DashboardStartAndEndDateUtil { - public static getStartAndEndDate(dashboardStartAndEndDate: DashboardStartAndEndDate): InBetween { - const currentDate: Date = OneUptimeDate.getCurrentDate(); - - // 30 mins. - if(dashboardStartAndEndDate.range === DashboardStartAndEndDateRange.PAST_THIRTY_MINS) { - return new InBetween(OneUptimeDate.addRemoveMinutes(currentDate, -30), currentDate); +export class DashboardStartAndEndDateUtil { + public static getStartAndEndDate( + dashboardStartAndEndDate: DashboardStartAndEndDate, + ): InBetween { + const currentDate: Date = OneUptimeDate.getCurrentDate(); + + // 30 mins. + if ( + dashboardStartAndEndDate.range === + DashboardStartAndEndDateRange.PAST_THIRTY_MINS + ) { + return new InBetween( + OneUptimeDate.addRemoveMinutes(currentDate, -30), + currentDate, + ); } - if(dashboardStartAndEndDate.range === DashboardStartAndEndDateRange.PAST_ONE_HOUR) { - return new InBetween(OneUptimeDate.addRemoveHours(currentDate, -1), currentDate); + if ( + dashboardStartAndEndDate.range === + DashboardStartAndEndDateRange.PAST_ONE_HOUR + ) { + return new InBetween( + OneUptimeDate.addRemoveHours(currentDate, -1), + currentDate, + ); } - // two hours. - if(dashboardStartAndEndDate.range === DashboardStartAndEndDateRange.PAST_TWO_HOURS) { - return new InBetween(OneUptimeDate.addRemoveHours(currentDate, -2), currentDate); + // two hours. + if ( + dashboardStartAndEndDate.range === + DashboardStartAndEndDateRange.PAST_TWO_HOURS + ) { + return new InBetween( + OneUptimeDate.addRemoveHours(currentDate, -2), + currentDate, + ); } - // three hours - if(dashboardStartAndEndDate.range === DashboardStartAndEndDateRange.PAST_THREE_HOURS) { - return new InBetween(OneUptimeDate.addRemoveHours(currentDate, -3), currentDate); + // three hours + if ( + dashboardStartAndEndDate.range === + DashboardStartAndEndDateRange.PAST_THREE_HOURS + ) { + return new InBetween( + OneUptimeDate.addRemoveHours(currentDate, -3), + currentDate, + ); } - if(dashboardStartAndEndDate.range === DashboardStartAndEndDateRange.PAST_ONE_DAY) { - return new InBetween(OneUptimeDate.addRemoveDays(currentDate, -1), currentDate); + if ( + dashboardStartAndEndDate.range === + DashboardStartAndEndDateRange.PAST_ONE_DAY + ) { + return new InBetween( + OneUptimeDate.addRemoveDays(currentDate, -1), + currentDate, + ); } // two days . - if(dashboardStartAndEndDate.range === DashboardStartAndEndDateRange.PAST_TWO_DAYS) { - return new InBetween(OneUptimeDate.addRemoveDays(currentDate, -2), currentDate); + if ( + dashboardStartAndEndDate.range === + DashboardStartAndEndDateRange.PAST_TWO_DAYS + ) { + return new InBetween( + OneUptimeDate.addRemoveDays(currentDate, -2), + currentDate, + ); } - if(dashboardStartAndEndDate.range === DashboardStartAndEndDateRange.PAST_ONE_WEEK) { - return new InBetween(OneUptimeDate.addRemoveDays(currentDate, -7), currentDate); + if ( + dashboardStartAndEndDate.range === + DashboardStartAndEndDateRange.PAST_ONE_WEEK + ) { + return new InBetween( + OneUptimeDate.addRemoveDays(currentDate, -7), + currentDate, + ); } - // two weeks. - if(dashboardStartAndEndDate.range === DashboardStartAndEndDateRange.PAST_TWO_WEEKS) { - return new InBetween(OneUptimeDate.addRemoveDays(currentDate, -14), currentDate); + // two weeks. + if ( + dashboardStartAndEndDate.range === + DashboardStartAndEndDateRange.PAST_TWO_WEEKS + ) { + return new InBetween( + OneUptimeDate.addRemoveDays(currentDate, -14), + currentDate, + ); } - if(dashboardStartAndEndDate.range === DashboardStartAndEndDateRange.PAST_ONE_MONTH) { - return new InBetween(OneUptimeDate.addRemoveMonths(currentDate, -1), currentDate); + if ( + dashboardStartAndEndDate.range === + DashboardStartAndEndDateRange.PAST_ONE_MONTH + ) { + return new InBetween( + OneUptimeDate.addRemoveMonths(currentDate, -1), + currentDate, + ); } // three months. - if(dashboardStartAndEndDate.range === DashboardStartAndEndDateRange.PAST_THREE_MONTHS) { - return new InBetween(OneUptimeDate.addRemoveMonths(currentDate, -3), currentDate); + if ( + dashboardStartAndEndDate.range === + DashboardStartAndEndDateRange.PAST_THREE_MONTHS + ) { + return new InBetween( + OneUptimeDate.addRemoveMonths(currentDate, -3), + currentDate, + ); } // custom - return dashboardStartAndEndDate.startAndEndDate || new InBetween(currentDate, currentDate); - + return ( + dashboardStartAndEndDate.startAndEndDate || + new InBetween(currentDate, currentDate) + ); } -} \ No newline at end of file +} diff --git a/Dashboard/src/Components/Dashboard/Types/DashboardStartAndEndDateRange.ts b/Dashboard/src/Components/Dashboard/Types/DashboardStartAndEndDateRange.ts index b8c3ec68a1a..ba25262a4d8 100644 --- a/Dashboard/src/Components/Dashboard/Types/DashboardStartAndEndDateRange.ts +++ b/Dashboard/src/Components/Dashboard/Types/DashboardStartAndEndDateRange.ts @@ -1,14 +1,14 @@ enum DashboardStartAndEndDateRange { -PAST_THIRTY_MINS = "Past 30 Mins", -PAST_ONE_HOUR = "Past 1 Hour", -PAST_TWO_HOURS = "Past 2 Hours", -PAST_THREE_HOURS = "Past 3 Hours", -PAST_ONE_DAY = "Past 1 Day", -PAST_TWO_DAYS = "Past 2 Days", -PAST_ONE_WEEK = "Past 1 Week", -PAST_TWO_WEEKS = "Past 2 Weeks", -PAST_ONE_MONTH = "Past 1 Month", -PAST_THREE_MONTHS = "Past 3 Months", + PAST_THIRTY_MINS = "Past 30 Mins", + PAST_ONE_HOUR = "Past 1 Hour", + PAST_TWO_HOURS = "Past 2 Hours", + PAST_THREE_HOURS = "Past 3 Hours", + PAST_ONE_DAY = "Past 1 Day", + PAST_TWO_DAYS = "Past 2 Days", + PAST_ONE_WEEK = "Past 1 Week", + PAST_TWO_WEEKS = "Past 2 Weeks", + PAST_ONE_MONTH = "Past 1 Month", + PAST_THREE_MONTHS = "Past 3 Months", CUSTOM = "Custom", } diff --git a/Dashboard/src/Components/Metrics/MetricQueryConfig.tsx b/Dashboard/src/Components/Metrics/MetricQueryConfig.tsx index 94db90bcac6..ae40b013fe2 100644 --- a/Dashboard/src/Components/Metrics/MetricQueryConfig.tsx +++ b/Dashboard/src/Components/Metrics/MetricQueryConfig.tsx @@ -11,6 +11,7 @@ import MetricNameAndUnit from "./Types/MetricNameAndUnit"; import MetricQueryConfigData from "Common/Types/Metrics/MetricQueryConfigData"; import MetricAliasData from "Common/Types/Metrics/MetricAliasData"; import MetricQueryData from "Common/Types/Metrics/MetricQueryData"; +import { GetReactElementFunction } from "Common/UI/Types/FunctionTypes"; export interface ComponentProps { data: MetricQueryConfigData; @@ -36,64 +37,65 @@ const MetricGraphConfig: FunctionComponent = ( throw new BadDataException("MetricQueryData is required"); } - - const getContent = (): ReactElement => { + const getContent: GetReactElementFunction = (): ReactElement => { return ( -
{props.data.metricAliasData && ( - { - props.onBlur?.(); - props.onFocus?.(); - props.onChange && - props.onChange({ ...props.data, metricAliasData: data }); - }} - isFormula={false} - /> - )} - {props.data.metricQueryData && ( - { - props.onBlur?.(); - props.onFocus?.(); - props.onChange && - props.onChange({ ...props.data, metricQueryData: data }); - }} - metricNameAndUnits={props.metricNameAndUnits} - telemetryAttributes={props.telemetryAttributes} - /> - )} - {props.onRemove && ( -
-
+ )} + {props.error && ( +

+ {props.error} +

+ )}
- )} - {props.error && ( -

- {props.error} -

- )} -
); - } + ); + }; - if(props.hideCard) { + if (props.hideCard) { return getContent(); } return (
- {getContent()} + {getContent()}
); diff --git a/Dashboard/src/Components/Metrics/Utils/Metrics.ts b/Dashboard/src/Components/Metrics/Utils/Metrics.ts index c300905cd29..090015b4c35 100644 --- a/Dashboard/src/Components/Metrics/Utils/Metrics.ts +++ b/Dashboard/src/Components/Metrics/Utils/Metrics.ts @@ -19,8 +19,6 @@ import MetricViewData from "../Types/MetricViewData"; import OneUptimeDate from "Common/Types/Date"; export default class MetricUtil { - - public static async fetchResults(data: { metricViewData: MetricViewData; }): Promise> { @@ -122,14 +120,14 @@ export default class MetricUtil { const metricAttributesResponse: | HTTPResponse | HTTPErrorResponse = await API.post( - URL.fromString(APP_API_URL.toString()).addRoute( - "/telemetry/metrics/get-attributes", - ), - {}, - { - ...ModelAPI.getCommonHeaders(), - }, - ); + URL.fromString(APP_API_URL.toString()).addRoute( + "/telemetry/metrics/get-attributes", + ), + {}, + { + ...ModelAPI.getCommonHeaders(), + }, + ); let attributes: Array = [];