Refactor Dashboard components for improved code consistency and reada…

…bility
OneUptime · Nov 29, 2024 · c4256a0 · c4256a0
1 parent b8fc933
commit c4256a0
Show file tree

Hide file tree

Showing 11 changed files with 250 additions and 185 deletions.
diff --git 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
@@ -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; 
+  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
@@ -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<MetricNameAndUnit>;
     telemetryAttributes: string[];
@@ -75,7 +75,7 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
     value: FormValues<JSONObject>,
     componentProps: CustomElementProps,
   ) => ReactElement) => {
-    //eslint-disable react/display-name
+    // eslint-disable-next-line react/display-name
     return (
       value: FormValues<JSONObject>,
       componentProps: CustomElementProps,

diff --git 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<MetricNameAndUnit>;
 }
 

diff --git 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<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-
-  const [metricResults, setMetricResults] = React.useState<Array<AggregatedResult>>([]);
+  const [metricResults, setMetricResults] = React.useState<
+    Array<AggregatedResult>
+  >([]);
   const [error, setError] = React.useState<string | null>(null);
   const [isLoading, setIsLoading] = React.useState<boolean>(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<void> => {
-
-
       setIsLoading(true);
 
       if (
@@ -66,17 +69,21 @@ const DashboardChartComponentElement: FunctionComponent<ComponentProps> = (
 
   useEffect(() => {
     fetchAggregatedResults();
-  }, [props.dashboardStartAndEndDate, props.component.arguments.metricQueryConfig, props.metricNameAndUnits]);
-
-
-
-  return <div>
-    <MetricCharts
-      metricResults={metricResults}
-      metricNamesAndUnits={props.metricNameAndUnits}
-      metricViewData={metricViewData}
-    />
-  </div>;
+  }, [
+    props.dashboardStartAndEndDate,
+    props.component.arguments.metricQueryConfig,
+    props.metricNameAndUnits,
+  ]);
+
+  return (
+    <div>
+      <MetricCharts
+        metricResults={metricResults}
+        metricNamesAndUnits={props.metricNameAndUnits}
+        metricViewData={metricViewData}
+      />
+    </div>
+  );
 };
 
 export default DashboardChartComponentElement;
diff --git 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<ComponentProps> = (
-    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 (
-            <HeaderAlert
-                icon={IconProp.Clock}
-                onClick={props.onClick}
-                title={title}
-                alertType={HeaderAlertType.INFO}
-                colorSwatch={ColorSwatch.Blue}
-                tooltip="Click to change the date and time range of data on this dashboard."
-            />
-        );
-
-    };
+        )}`
+      : props.dashboardStartAndEndDate.range;
 
     return (
-    <div>
-        {getContent()}
-    </div>
-  );
+      <HeaderAlert
+        icon={IconProp.Clock}
+        onClick={props.onClick}
+        title={title}
+        alertType={HeaderAlertType.INFO}
+        colorSwatch={ColorSwatch.Blue}
+        tooltip="Click to change the date and time range of data on this dashboard."
+      />
+    );
+  };
+
+  return <div>{getContent()}</div>;
 };
 
 export default DashboardStartAndEndDateView;
diff --git a/Dashboard/src/Components/Dashboard/Toolbar/DashboardToolbar.tsx b/Dashboard/src/Components/Dashboard/Toolbar/DashboardToolbar.tsx
@@ -46,16 +46,15 @@ const DashboardToolbar: FunctionComponent<ComponentProps> = (
         </div>
         {!props.isSaving && (
           <div className="flex">
-              <div className="mt-2">
+            <div className="mt-2">
               <DashboardStartAndEndDateView
                 dashboardStartAndEndDate={props.startAndEndDate}
                 onClick={() => {
                   setTempStartAndEndDate(props.startAndEndDate);
                   setShowTimeSelectModal(true);
                 }}
               />
-              </div>
-
+            </div>
 
             {isEditMode ? (
               <MoreMenu menuIcon={IconProp.Add} text="Add Component">