Refactor StartAndEndDate and CriteriaFilter components for improved r…

…eadability and consistency in type usage
OneUptime · Dec 12, 2024 · ceead6e · ceead6e
1 parent 45a665b
commit ceead6e
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 20 deletions.
diff --git a/Common/UI/Components/Date/StartAndEndDate.tsx b/Common/UI/Components/Date/StartAndEndDate.tsx
@@ -21,7 +21,6 @@ type DateFilterFunction = (props: ComponentProps) => ReactElement;
 const StartAndEndDate: DateFilterFunction = (
   props: ComponentProps,
 ): ReactElement => {
-
   const [startDateError, setStartDateError] = React.useState<string>("");
   const [endDateError, setEndDateError] = React.useState<string>("");
 
@@ -33,10 +32,9 @@ const StartAndEndDate: DateFilterFunction = (
     inputType = InputType.DATETIME_LOCAL;
   }
 
-  const startDateTime: Date | undefined = props.value?.startValue; 
+  const startDateTime: Date | undefined = props.value?.startValue;
   const endDateTime: Date | undefined = props.value?.endValue;
 
-
   useEffect(() => {
     if (endDateTime && startDateTime) {
       // check if start date is after end date
@@ -64,7 +62,6 @@ const StartAndEndDate: DateFilterFunction = (
       setStartDateError("");
       setEndDateError("");
     }
-
   }, [props.value]);
 
   // difference between both dates is 60 mins.
@@ -137,7 +134,13 @@ const StartAndEndDate: DateFilterFunction = (
                 error={startDateError}
                 onChange={(changedValue: string | Date) => {
                   if (!changedValue) {
-                    props.onValueChanged && props.onValueChanged(new InBetween<Date>(OneUptimeDate.getCurrentDate(), endDateTime || OneUptimeDate.getCurrentDate()));
+                    props.onValueChanged &&
+                      props.onValueChanged(
+                        new InBetween<Date>(
+                          OneUptimeDate.getCurrentDate(),
+                          endDateTime || OneUptimeDate.getCurrentDate(),
+                        ),
+                      );
                   }
 
                   if (
@@ -146,7 +149,13 @@ const StartAndEndDate: DateFilterFunction = (
                     (props.type === StartAndEndDateType.Date ||
                       props.type === StartAndEndDateType.DateTime)
                   ) {
-                    props.onValueChanged && props.onValueChanged(new InBetween<Date>(OneUptimeDate.fromString(changedValue as string), endDateTime));
+                    props.onValueChanged &&
+                      props.onValueChanged(
+                        new InBetween<Date>(
+                          OneUptimeDate.fromString(changedValue as string),
+                          endDateTime,
+                        ),
+                      );
                   }
                 }}
                 value={startDateTime || ""}
@@ -162,7 +171,13 @@ const StartAndEndDate: DateFilterFunction = (
                 error={endDateError}
                 onChange={(changedValue: string | Date) => {
                   if (!changedValue) {
-                    props.onValueChanged && props.onValueChanged(new InBetween<Date>(startDateTime || OneUptimeDate.getCurrentDate(), OneUptimeDate.getCurrentDate()));
+                    props.onValueChanged &&
+                      props.onValueChanged(
+                        new InBetween<Date>(
+                          startDateTime || OneUptimeDate.getCurrentDate(),
+                          OneUptimeDate.getCurrentDate(),
+                        ),
+                      );
                   }
 
                   if (
@@ -171,7 +186,13 @@ const StartAndEndDate: DateFilterFunction = (
                     (props.type === StartAndEndDateType.Date ||
                       props.type === StartAndEndDateType.DateTime)
                   ) {
-                    props.onValueChanged && props.onValueChanged(new InBetween<Date>(startDateTime, OneUptimeDate.fromString(changedValue as string)));
+                    props.onValueChanged &&
+                      props.onValueChanged(
+                        new InBetween<Date>(
+                          startDateTime,
+                          OneUptimeDate.fromString(changedValue as string),
+                        ),
+                      );
                   }
                 }}
                 value={endDateTime || ""}
@@ -199,7 +220,9 @@ const StartAndEndDate: DateFilterFunction = (
                   );
 
                   props.onValueChanged &&
-                    props.onValueChanged(new InBetween<Date>(startDate, endDate));
+                    props.onValueChanged(
+                      new InBetween<Date>(startDate, endDate),
+                    );
                 }}
                 title="1 hour"
               />
@@ -220,7 +243,9 @@ const StartAndEndDate: DateFilterFunction = (
                   );
 
                   props.onValueChanged &&
-                    props.onValueChanged(new InBetween<Date>(startDate, endDate));
+                    props.onValueChanged(
+                      new InBetween<Date>(startDate, endDate),
+                    );
                 }}
                 title="3 hours"
               />
@@ -240,7 +265,7 @@ const StartAndEndDate: DateFilterFunction = (
                 );
 
                 props.onValueChanged &&
-                props.onValueChanged(new InBetween<Date>(startDate, endDate));
+                  props.onValueChanged(new InBetween<Date>(startDate, endDate));
               }}
               title="1 day"
             />
@@ -259,7 +284,7 @@ const StartAndEndDate: DateFilterFunction = (
                 );
 
                 props.onValueChanged &&
-                props.onValueChanged(new InBetween<Date>(startDate, endDate));
+                  props.onValueChanged(new InBetween<Date>(startDate, endDate));
               }}
               title="1 week"
             />
@@ -278,7 +303,7 @@ const StartAndEndDate: DateFilterFunction = (
                 );
 
                 props.onValueChanged &&
-                props.onValueChanged(new InBetween<Date>(startDate, endDate));
+                  props.onValueChanged(new InBetween<Date>(startDate, endDate));
               }}
               title="2 weeks"
             />
@@ -297,7 +322,7 @@ const StartAndEndDate: DateFilterFunction = (
                 );
 
                 props.onValueChanged &&
-                props.onValueChanged(new InBetween<Date>(startDate, endDate));
+                  props.onValueChanged(new InBetween<Date>(startDate, endDate));
               }}
               title="3 weeks"
             />
@@ -316,7 +341,7 @@ const StartAndEndDate: DateFilterFunction = (
                 );
 
                 props.onValueChanged &&
-                props.onValueChanged(new InBetween<Date>(startDate, endDate));
+                  props.onValueChanged(new InBetween<Date>(startDate, endDate));
               }}
               title="1 month"
             />
@@ -335,7 +360,7 @@ const StartAndEndDate: DateFilterFunction = (
                 );
 
                 props.onValueChanged &&
-                props.onValueChanged(new InBetween<Date>(startDate, endDate));
+                  props.onValueChanged(new InBetween<Date>(startDate, endDate));
               }}
               title="3 months"
             />

diff --git a/Dashboard/src/Components/Form/Monitor/CriteriaFilter.tsx b/Dashboard/src/Components/Form/Monitor/CriteriaFilter.tsx
@@ -1,6 +1,8 @@
 import CriteriaFilterUiUtil from "../../../Utils/Form/Monitor/CriteriaFilter";
 import Route from "Common/Types/API/Route";
 import IconProp from "Common/Types/Icon/IconProp";
+import MetricFormulaConfigData from "Common/Types/Metrics/MetricFormulaConfigData";
+import MetricQueryConfigData from "Common/Types/Metrics/MetricQueryConfigData";
 import {
   CheckOn,
   CriteriaFilter,
@@ -122,27 +124,27 @@ const CriteriaFilterElement: FunctionComponent<ComponentProps> = (
 
   let metricVariables: Array<string> =
     props.monitorStep.data?.metricMonitor?.metricViewConfig?.queryConfigs?.map(
-      (queryConfig) => {
+      (queryConfig: MetricQueryConfigData) => {
         return queryConfig.metricAliasData?.metricVariable || "";
       },
     ) || [];
 
   // push formula variables as well.
   props.monitorStep.data?.metricMonitor?.metricViewConfig?.formulaConfigs?.forEach(
-    (formulaConfig) => {
+    (formulaConfig: MetricFormulaConfigData) => {
       metricVariables.push(formulaConfig.metricAliasData.metricVariable || "");
     },
   );
 
   // remove duplicates and empty strings
 
-  metricVariables = metricVariables.filter((item, index) => {
+  metricVariables = metricVariables.filter((item: string, index: number) => {
     return metricVariables.indexOf(item) === index && item !== "";
   });
 
   // now make this into dropdown options.
   const metricVariableOptions: Array<DropdownOption> = metricVariables.map(
-    (item) => {
+    (item: string) => {
       return {
         value: item,
         label: item,