feat: Refactor date range handling by replacing DashboardStartAndEndDate with RangeStartAndEndDateTime and updating related components

2026-04-06 00:32:12 +02:00 · 2025-05-15 19:14:42 +01:00
parent 6a7b35b0e6
commit ae75c73747
7 changed files with 51 additions and 45 deletions
--- a/Dashboard/src/Components/Dashboard/Types/DashboardStartAndEndDate.ts
+++ b/Dashboard/src/Components/Dashboard/Types/DashboardStartAndEndDate.ts
@@ -1,22 +1,22 @@
 import InBetween from "Common/Types/BaseDatabase/InBetween";
-import DashboardStartAndEndDateRange from "./DashboardStartAndEndDateRange";
+import TimeRange from "./TimeRange";
 import OneUptimeDate from "Common/Types/Date";

-export default interface DashboardStartAndEndDate {
+export default interface RangestartAndEndDateTime {
  startAndEndDate?: InBetween<Date> | undefined;
-  range: DashboardStartAndEndDateRange;
+  range: TimeRange;
 }

 export class DashboardStartAndEndDateUtil {
  public static getStartAndEndDate(
-    dashboardStartAndEndDate: DashboardStartAndEndDate,
+    dashboardStartAndEndDate: RangestartAndEndDateTime,
  ): InBetween<Date> {
    const currentDate: Date = OneUptimeDate.getCurrentDate();

    // 30 mins.
    if (
      dashboardStartAndEndDate.range ===
-      DashboardStartAndEndDateRange.PAST_THIRTY_MINS
+      TimeRange.PAST_THIRTY_MINS
    ) {
      return new InBetween<Date>(
        OneUptimeDate.addRemoveMinutes(currentDate, -30),
@@ -26,7 +26,7 @@ export class DashboardStartAndEndDateUtil {

    if (
      dashboardStartAndEndDate.range ===
-      DashboardStartAndEndDateRange.PAST_ONE_HOUR
+      TimeRange.PAST_ONE_HOUR
    ) {
      return new InBetween<Date>(
        OneUptimeDate.addRemoveHours(currentDate, -1),
@@ -37,7 +37,7 @@ export class DashboardStartAndEndDateUtil {
    // two hours.
    if (
      dashboardStartAndEndDate.range ===
-      DashboardStartAndEndDateRange.PAST_TWO_HOURS
+      TimeRange.PAST_TWO_HOURS
    ) {
      return new InBetween<Date>(
        OneUptimeDate.addRemoveHours(currentDate, -2),
@@ -48,7 +48,7 @@ export class DashboardStartAndEndDateUtil {
    // three hours
    if (
      dashboardStartAndEndDate.range ===
-      DashboardStartAndEndDateRange.PAST_THREE_HOURS
+      TimeRange.PAST_THREE_HOURS
    ) {
      return new InBetween<Date>(
        OneUptimeDate.addRemoveHours(currentDate, -3),
@@ -58,7 +58,7 @@ export class DashboardStartAndEndDateUtil {

    if (
      dashboardStartAndEndDate.range ===
-      DashboardStartAndEndDateRange.PAST_ONE_DAY
+      TimeRange.PAST_ONE_DAY
    ) {
      return new InBetween<Date>(
        OneUptimeDate.addRemoveDays(currentDate, -1),
@@ -69,7 +69,7 @@ export class DashboardStartAndEndDateUtil {
    // two days .
    if (
      dashboardStartAndEndDate.range ===
-      DashboardStartAndEndDateRange.PAST_TWO_DAYS
+      TimeRange.PAST_TWO_DAYS
    ) {
      return new InBetween<Date>(
        OneUptimeDate.addRemoveDays(currentDate, -2),
@@ -79,7 +79,7 @@ export class DashboardStartAndEndDateUtil {

    if (
      dashboardStartAndEndDate.range ===
-      DashboardStartAndEndDateRange.PAST_ONE_WEEK
+      TimeRange.PAST_ONE_WEEK
    ) {
      return new InBetween<Date>(
        OneUptimeDate.addRemoveDays(currentDate, -7),
@@ -90,7 +90,7 @@ export class DashboardStartAndEndDateUtil {
    // two weeks.
    if (
      dashboardStartAndEndDate.range ===
-      DashboardStartAndEndDateRange.PAST_TWO_WEEKS
+      TimeRange.PAST_TWO_WEEKS
    ) {
      return new InBetween<Date>(
        OneUptimeDate.addRemoveDays(currentDate, -14),
@@ -100,7 +100,7 @@ export class DashboardStartAndEndDateUtil {

    if (
      dashboardStartAndEndDate.range ===
-      DashboardStartAndEndDateRange.PAST_ONE_MONTH
+      TimeRange.PAST_ONE_MONTH
    ) {
      return new InBetween<Date>(
        OneUptimeDate.addRemoveMonths(currentDate, -1),
@@ -111,7 +111,7 @@ export class DashboardStartAndEndDateUtil {
    // three months.
    if (
      dashboardStartAndEndDate.range ===
-      DashboardStartAndEndDateRange.PAST_THREE_MONTHS
+      TimeRange.PAST_THREE_MONTHS
    ) {
      return new InBetween<Date>(
        OneUptimeDate.addRemoveMonths(currentDate, -3),
--- a/Dashboard/src/Components/Dashboard/Types/DashboardStartAndEndDateRange.ts
+++ b/Dashboard/src/Components/Dashboard/Types/DashboardStartAndEndDateRange.ts
@@ -1,4 +1,4 @@
-enum DashboardStartAndEndDateRange {
+enum Range {
  PAST_THIRTY_MINS = "Past 30 Mins",
  PAST_ONE_HOUR = "Past 1 Hour",
  PAST_TWO_HOURS = "Past 2 Hours",
@@ -12,4 +12,4 @@ enum DashboardStartAndEndDateRange {
  CUSTOM = "Custom",
 }

-export default DashboardStartAndEndDateRange;
+export default Range;
--- a/Dashboard/src/Components/Dashboard/Toolbar/DashboardStartAndEndDateEdit.tsx
+++ b/Dashboard/src/Components/Dashboard/Toolbar/DashboardStartAndEndDateEdit.tsx
@@ -1,10 +1,10 @@
 import React, { FunctionComponent, ReactElement } from "react";
-import DashboardStartAndEndDate from "../Types/DashboardStartAndEndDate";
+import RangeStartAndEndDateTime from "Common/Types/Time/RangeStartAndEndDateTime";
 import StartAndEndDate, {
  StartAndEndDateType,
 } from "Common/UI/Components/Date/StartAndEndDate";
 import InBetween from "Common/Types/BaseDatabase/InBetween";
-import DashboardStartAndEndDateRange from "../Types/DashboardStartAndEndDateRange";
+import TimeRange from "Common/Types/Time/TimeRange";
 import Dropdown, {
  DropdownOption,
  DropdownValue,
@@ -12,18 +12,18 @@ import Dropdown, {
 import DropdownUtil from "Common/UI/Utils/Dropdown";

 export interface ComponentProps {
-  value?: DashboardStartAndEndDate | undefined;
-  onChange: (startAndEndDate: DashboardStartAndEndDate) => void;
+  value?: RangeStartAndEndDateTime | undefined;
+  onChange: (startAndEndDate: RangeStartAndEndDateTime) => void;
 }

 const DashboardStartAndEndDateEditElement: FunctionComponent<ComponentProps> = (
  props: ComponentProps,
 ): ReactElement => {
  const dropdownOptions: DropdownOption[] =
-    DropdownUtil.getDropdownOptionsFromEnum(DashboardStartAndEndDateRange);
+    DropdownUtil.getDropdownOptionsFromEnum(TimeRange);
  const defaultDropdownOption: DropdownOption =
    dropdownOptions.find((option: DropdownOption) => {
-      return option.value === DashboardStartAndEndDateRange.PAST_ONE_HOUR;
+      return option.value === TimeRange.PAST_ONE_HOUR;
    }) || dropdownOptions[0]!;
  const selectedDropdownnOption: DropdownOption =
    dropdownOptions.find((option: DropdownOption) => {
@@ -36,13 +36,13 @@ const DashboardStartAndEndDateEditElement: FunctionComponent<ComponentProps> = (
        value={selectedDropdownnOption}
        onChange={(range: DropdownValue | Array<DropdownValue> | null) => {
          props.onChange({
-            range: range as DashboardStartAndEndDateRange,
+            range: range as TimeRange,
          });
        }}
        options={dropdownOptions}
      />
      {/* Start and End Date */}
-      {props.value?.range === DashboardStartAndEndDateRange.CUSTOM && (
+      {props.value?.range === TimeRange.CUSTOM && (
        <StartAndEndDate
          type={StartAndEndDateType.DateTime}
          value={props.value?.startAndEndDate || undefined}
@@ -50,7 +50,7 @@ const DashboardStartAndEndDateEditElement: FunctionComponent<ComponentProps> = (
          onValueChanged={(startAndEndDate: InBetween<Date> | null) => {
            if (startAndEndDate) {
              props.onChange({
-                range: DashboardStartAndEndDateRange.CUSTOM,
+                range: TimeRange.CUSTOM,
                startAndEndDate,
              });
            }
--- a/Dashboard/src/Components/Dashboard/Toolbar/DashboardStartAndEndDateView.tsx
+++ b/Dashboard/src/Components/Dashboard/Toolbar/DashboardStartAndEndDateView.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent, ReactElement } from "react";
-import DashboardStartAndEndDate from "../Types/DashboardStartAndEndDate";
-import DashboardStartAndEndDateRange from "../Types/DashboardStartAndEndDateRange";
+import RangeStartAndEndDateTime from "Common/Types/Time/RangeStartAndEndDateTime";
+import TimeRange from "Common/Types/Time/TimeRange";
 import OneUptimeDate from "Common/Types/Date";
 import IconProp from "Common/Types/Icon/IconProp";
 import { GetReactElementFunction } from "Common/UI/Types/FunctionTypes";
@@ -10,7 +10,7 @@ import HeaderAlert, {
 import ColorSwatch from "Common/Types/ColorSwatch";

 export interface ComponentProps {
-  dashboardStartAndEndDate: DashboardStartAndEndDate;
+  dashboardStartAndEndDate: RangeStartAndEndDateTime;
  onClick: () => void;
 }

@@ -19,7 +19,7 @@ const DashboardStartAndEndDateView: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
  const isCustomRange: boolean =
    props.dashboardStartAndEndDate.range ===
-    DashboardStartAndEndDateRange.CUSTOM;
+    TimeRange.CUSTOM;

  const getContent: GetReactElementFunction = (): ReactElement => {
    const title: string = isCustomRange
--- a/Dashboard/src/Components/Dashboard/DashboardView.tsx
+++ b/Dashboard/src/Components/Dashboard/DashboardView.tsx
@@ -27,8 +27,8 @@ import DefaultDashboardSize from "Common/Types/Dashboard/DashboardSize";
 import { PromiseVoidFunction, VoidFunction } from "Common/Types/FunctionTypes";
 import JSONFunctions from "Common/Types/JSONFunctions";
 import MetricUtil from "../Metrics/Utils/Metrics";
-import DashboardStartAndEndDate from "./Types/DashboardStartAndEndDate";
-import DashboardStartAndEndDateRange from "./Types/DashboardStartAndEndDateRange";
+import RangestartAndEndDateTime from "Common/Types/Time/RangeStartAndEndDateTime";
+import TimeRange from "Common/Types/Time/TimeRange";
 import MetricType from "Common/Models/DatabaseModels/MetricType";

 export interface ComponentProps {
@@ -43,8 +43,8 @@ const DashboardViewer: FunctionComponent<ComponentProps> = (
  );

  const [startAndEndDate, setStartAndEndDate] =
-    useState<DashboardStartAndEndDate>({
-      range: DashboardStartAndEndDateRange.PAST_ONE_HOUR,
+    useState<RangestartAndEndDateTime>({
+      range: TimeRange.PAST_ONE_HOUR,
    });

  const [isSaving, setIsSaving] = useState<boolean>(false);
@@ -226,7 +226,7 @@ const DashboardViewer: FunctionComponent<ComponentProps> = (
        }}
        startAndEndDate={startAndEndDate}
        onStartAndEndDateChange={(
-          newStartAndEndDate: DashboardStartAndEndDate,
+          newStartAndEndDate: RangestartAndEndDateTime,
        ) => {
          setStartAndEndDate(newStartAndEndDate);
        }}
--- a/Dashboard/src/Components/Dashboard/Toolbar/DashboardToolbar.tsx
+++ b/Dashboard/src/Components/Dashboard/Toolbar/DashboardToolbar.tsx
@@ -6,9 +6,9 @@ import MoreMenu from "Common/UI/Components/MoreMenu/MoreMenu";
 import MoreMenuItem from "Common/UI/Components/MoreMenu/MoreMenuItem";
 import DashboardComponentType from "Common/Types/Dashboard/DashboardComponentType";
 import Modal from "Common/UI/Components/Modal/Modal";
-import DashboardStartAndEndDate from "../Types/DashboardStartAndEndDate";
-import DashboardStartAndEndDateElement from "./DashboardStartAndEndDateEdit";
-import DashboardStartAndEndDateView from "./DashboardStartAndEndDateView";
+import RangeStartAndEndDateTime from "Common/Types/Time/RangeStartAndEndDateTime";
+import RangeStartAndEndDateEdit from "Common/UI/Components/Date/RangeStartAndEndDateEdit";
+import RangeStartAndEndDateView from "Common/UI/Components/Date/RangeStartAndEndDateView";
 import DashboardViewConfig from "Common/Types/Dashboard/DashboardViewConfig";
 import ConfirmModal from "Common/UI/Components/Modal/ConfirmModal";
 import Loader from "Common/UI/Components/Loader/Loader";
@@ -22,8 +22,8 @@ export interface ComponentProps {
  onAddComponentClick: (type: DashboardComponentType) => void;
  isSaving: boolean;
  dashboardName: string;
-  startAndEndDate: DashboardStartAndEndDate;
-  onStartAndEndDateChange: (startAndEndDate: DashboardStartAndEndDate) => void;
+  startAndEndDate: RangeStartAndEndDateTime;
+  onStartAndEndDateChange: (startAndEndDate: RangeStartAndEndDateTime) => void;
  dashboardViewConfig: DashboardViewConfig;
 }

@@ -33,7 +33,7 @@ const DashboardToolbar: FunctionComponent<ComponentProps> = (
  const isEditMode: boolean = props.dashboardMode === DashboardMode.Edit;

  const [tempStartAndEndDate, setTempStartAndEndDate] =
-    useState<DashboardStartAndEndDate | null>(null);
+    useState<RangeStartAndEndDateTime | null>(null);
  const [showTimeSelectModal, setShowTimeSelectModal] =
    useState<boolean>(false);

@@ -56,7 +56,7 @@ const DashboardToolbar: FunctionComponent<ComponentProps> = (
              props.dashboardViewConfig.components &&
              props.dashboardViewConfig.components.length > 0 && (
                <div className="mt-1.5">
-                  <DashboardStartAndEndDateView
+                  <RangeStartAndEndDateView
                    dashboardStartAndEndDate={props.startAndEndDate}
                    onClick={() => {
                      setTempStartAndEndDate(props.startAndEndDate);
@@ -178,9 +178,9 @@ const DashboardToolbar: FunctionComponent<ComponentProps> = (
          }}
        >
          <div className="mt-5">
-            <DashboardStartAndEndDateElement
+            <RangeStartAndEndDateEdit
              value={tempStartAndEndDate || undefined}
-              onChange={(startAndEndDate: DashboardStartAndEndDate) => {
+              onChange={(startAndEndDate: RangeStartAndEndDateTime) => {
                setTempStartAndEndDate(startAndEndDate);
              }}
            />
--- a/Dashboard/src/Components/OnCallPolicy/TimeLog/OnCalldutyTimeLogTable.tsx
+++ b/Dashboard/src/Components/OnCallPolicy/TimeLog/OnCalldutyTimeLogTable.tsx
@@ -10,6 +10,7 @@ import User from "Common/Models/DatabaseModels/User";
 import FieldType from "Common/UI/Components/Types/FieldType";
 import UserElement from "../../User/User";
 import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
+import Card from "Common/UI/Components/Card/Card";

 export interface ComponentProps {
    projectId: ObjectID;
@@ -33,7 +34,7 @@ const OnCallPolicyLogTable: FunctionComponent<ComponentProps> = (


    const loadItems: PromiseVoidFunction = async () => {
-        
+
    }

    useEffect(() => {
@@ -51,7 +52,11 @@ const OnCallPolicyLogTable: FunctionComponent<ComponentProps> = (
    }

    return <div>
-
+            <Card
+            title={'On Call Time Log for Users'}
+            description={'This table shows the time logs for users on call duty.'}
+            rightElement={}
+        > 
        <LocalTable 
            singularLabel="On Call Policy Time Log"
            pluralLabel="On Call Policy Time Logs"
@@ -73,6 +78,7 @@ const OnCallPolicyLogTable: FunctionComponent<ComponentProps> = (
                },
            ]}
        /> 
+        </Card>

    </div>
 };