feat: replace time range selection with RangeStartAndEndDateEdit component in KubernetesMetricsTab and MonitorMetrics

App/FeatureSet/Dashboard/src/Components/Kubernetes/KubernetesMetricsTab.tsx

@@ -7,54 +7,41 @@ import React, {
 import MetricView from "../../Components/Metrics/MetricView";
 import MetricViewData from "Common/Types/Metrics/MetricViewData";
 import MetricQueryConfigData from "Common/Types/Metrics/MetricQueryConfigData";
-import OneUptimeDate from "Common/Types/Date";
-import InBetween from "Common/Types/BaseDatabase/InBetween";
-
-interface TimeRangeOption {
-  label: string;
-  hours: number;
-}
-
-const TIME_RANGE_OPTIONS: Array<TimeRangeOption> = [
-  { label: "Last 1 Hour", hours: 1 },
-  { label: "Last 3 Hours", hours: 3 },
-  { label: "Last 6 Hours", hours: 6 },
-  { label: "Last 12 Hours", hours: 12 },
-  { label: "Last 24 Hours", hours: 24 },
-  { label: "Last 7 Days", hours: 168 },
-];
+import RangeStartAndEndDateTime, {
+  RangeStartAndEndDateTimeUtil,
+} from "Common/Types/Time/RangeStartAndEndDateTime";
+import TimeRange from "Common/Types/Time/TimeRange";
+import RangeStartAndEndDateEdit from "Common/UI/Components/Date/RangeStartAndEndDateEdit";
 
 export interface ComponentProps {
   queryConfigs: Array<MetricQueryConfigData>;
 }
 
-function getStartAndEndDate(hours: number): InBetween<Date> {
-  const endDate: Date = OneUptimeDate.getCurrentDate();
-  const startDate: Date = OneUptimeDate.addRemoveHours(endDate, -hours);
-  return new InBetween(startDate, endDate);
-}
-
 const KubernetesMetricsTab: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  const [selectedHours, setSelectedHours] = useState<number>(1);
+  const [timeRange, setTimeRange] = useState<RangeStartAndEndDateTime>({
+    range: TimeRange.PAST_ONE_HOUR,
+  });
 
   const [metricViewData, setMetricViewData] = useState<MetricViewData>({
-    startAndEndDate: getStartAndEndDate(1),
+    startAndEndDate: RangeStartAndEndDateTimeUtil.getStartAndEndDate({
+      range: TimeRange.PAST_ONE_HOUR,
+    }),
     queryConfigs: [],
     formulaConfigs: [],
   });
 
   const handleTimeRangeChange: (
-    e: React.ChangeEvent<HTMLSelectElement>,
+    newTimeRange: RangeStartAndEndDateTime,
   ) => void = useCallback(
-    (e: React.ChangeEvent<HTMLSelectElement>): void => {
-      const hours: number = parseInt(e.target.value, 10);
-      setSelectedHours(hours);
+    (newTimeRange: RangeStartAndEndDateTime): void => {
+      setTimeRange(newTimeRange);
+      const dateRange = RangeStartAndEndDateTimeUtil.getStartAndEndDate(newTimeRange);
       setMetricViewData((prev: MetricViewData) => {
         return {
           ...prev,
-          startAndEndDate: getStartAndEndDate(hours),
+          startAndEndDate: dateRange,
         };
       });
     },
@@ -64,19 +51,12 @@ const KubernetesMetricsTab: FunctionComponent<ComponentProps> = (
   return (
     <div>
       <div className="mb-4 flex items-center justify-end">
-        <select
-          value={selectedHours}
-          onChange={handleTimeRangeChange}
-          className="rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 shadow-sm transition-colors hover:border-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
-        >
-          {TIME_RANGE_OPTIONS.map((option: TimeRangeOption) => {
-            return (
-              <option key={option.hours} value={option.hours}>
-                {option.label}
-              </option>
-            );
-          })}
-        </select>
+        <div className="w-64">
+          <RangeStartAndEndDateEdit
+            value={timeRange}
+            onChange={handleTimeRangeChange}
+          />
+        </div>
       </div>
       <MetricView
         data={{

App/FeatureSet/Dashboard/src/Components/Monitor/MonitorMetrics.tsx

@@ -1,13 +1,12 @@
 import React, {
   FunctionComponent,
   ReactElement,
+  useCallback,
   useEffect,
   useState,
 } from "react";
 import ObjectID from "Common/Types/ObjectID";
 import MonitorMetricTypeUtil from "Common/Utils/Monitor/MonitorMetricType";
-import OneUptimeDate from "Common/Types/Date";
-import InBetween from "Common/Types/BaseDatabase/InBetween";
 import MetricView from "../Metrics/MetricView";
 import ProjectUtil from "Common/UI/Utils/Project";
 import MonitorMetricType from "Common/Types/Monitor/MonitorMetricType";
@@ -29,6 +28,11 @@ import MetricQueryConfigData, {
   ChartSeries,
 } from "Common/Types/Metrics/MetricQueryConfigData";
 import MetricViewData from "Common/Types/Metrics/MetricViewData";
+import RangeStartAndEndDateTime, {
+  RangeStartAndEndDateTimeUtil,
+} from "Common/Types/Time/RangeStartAndEndDateTime";
+import TimeRange from "Common/Types/Time/TimeRange";
+import RangeStartAndEndDateEdit from "Common/UI/Components/Date/RangeStartAndEndDateEdit";
 
 export interface ComponentProps {
   monitorId: ObjectID;
@@ -85,11 +89,9 @@ const MonitorMetricsElement: FunctionComponent<ComponentProps> = (
   const monitorMetricTypesByMonitor: Array<MonitorMetricType> =
     MonitorMetricTypeUtil.getMonitorMetricTypesByMonitorType(monitorType);
 
-  // set it to past 1 hour
-  const endDate: Date = OneUptimeDate.getCurrentDate();
-  const startDate: Date = OneUptimeDate.addRemoveHours(endDate, -1);
-
-  const startAndEndDate: InBetween<Date> = new InBetween(startDate, endDate);
+  const [timeRange, setTimeRange] = useState<RangeStartAndEndDateTime>({
+    range: TimeRange.PAST_ONE_HOUR,
+  });
 
   type GetQueryConfigByMonitorMetricTypesFunction =
     () => Array<MetricQueryConfigData>;
@@ -269,11 +271,29 @@ const MonitorMetricsElement: FunctionComponent<ComponentProps> = (
     };
 
   const [metricViewData, setMetricViewData] = useState<MetricViewData>({
-    startAndEndDate: startAndEndDate,
+    startAndEndDate: RangeStartAndEndDateTimeUtil.getStartAndEndDate({
+      range: TimeRange.PAST_ONE_HOUR,
+    }),
     queryConfigs: getQueryConfigByMonitorMetricTypes(),
     formulaConfigs: [],
   });
 
+  const handleTimeRangeChange: (
+    newTimeRange: RangeStartAndEndDateTime,
+  ) => void = useCallback(
+    (newTimeRange: RangeStartAndEndDateTime): void => {
+      setTimeRange(newTimeRange);
+      const dateRange = RangeStartAndEndDateTimeUtil.getStartAndEndDate(newTimeRange);
+      setMetricViewData((prev: MetricViewData) => {
+        return {
+          ...prev,
+          startAndEndDate: dateRange,
+        };
+      });
+    },
+    [],
+  );
+
   if (isLoading) {
     return <PageLoader isVisible={true} />;
   }
@@ -288,9 +308,18 @@ const MonitorMetricsElement: FunctionComponent<ComponentProps> = (
 
   return (
     <div>
+      <div className="mb-4 flex items-center justify-end">
+        <div className="w-64">
+          <RangeStartAndEndDateEdit
+            value={timeRange}
+            onChange={handleTimeRangeChange}
+          />
+        </div>
+      </div>
       <MetricView
         data={metricViewData}
         hideQueryElements={true}
+        hideStartAndEndDate={true}
         onChange={(data: MetricViewData) => {
           setMetricViewData({
             ...data,