ui: recreate period on db visit

frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx

@@ -64,6 +64,7 @@ function DashboardView(props: Props) {
   };
 
   useEffect(() => {
+    dashboardStore.resetPeriod();
     if (queryParams.has('modal')) {
       onAddWidgets();
       trimQuery();

frontend/app/mstore/dashboardStore.ts

@@ -1,12 +1,13 @@
 import { makeAutoObservable, runInAction, reaction } from 'mobx';
 import { dashboardService, metricService } from 'App/services';
 import { toast } from 'react-toastify';
-import Period, { LAST_24_HOURS, LAST_7_DAYS } from 'Types/app/period';
+import Period, { LAST_24_HOURS } from 'Types/app/period';
 import { getRE } from 'App/utils';
 import Filter from './types/filter';
 import Widget from './types/widget';
 import Dashboard from './types/dashboard';
 import { calculateGranularities } from '@/components/Dashboard/components/WidgetDateRange/RangeGranularity';
+import { CUSTOM_RANGE } from '@/dateRange';
 
 interface DashboardFilter {
   query?: string;
@@ -59,20 +60,20 @@ export default class DashboardStore {
       () => this.period,
       (period) => {
         this.createDensity(period.getDuration());
-      }
-    )
+      },
+    );
   }
 
   resetDensity = () => {
     this.createDensity(this.period.getDuration());
-  }
+  };
 
   createDensity = (duration: number) => {
     const densityOpts = calculateGranularities(duration);
     const defaultOption = densityOpts[densityOpts.length - 2];
 
-    this.setDensity(defaultOption.key)
-  }
+    this.setDensity(defaultOption.key);
+  };
 
   setDensity = (density: number) => {
     this.selectedDensity = density;
@@ -365,7 +366,7 @@ export default class DashboardStore {
 
   getDashboardById = async (dashboardId: string) => {
     if (!this.listFetched) {
-      const maxWait = (5*1000)/250;
+      const maxWait = (5 * 1000) / 250;
       let count = 0;
       await new Promise((resolve) => {
         const interval = setInterval(() => {
@@ -379,7 +380,7 @@ export default class DashboardStore {
           }
           count++;
         }, 250);
-      })
+      });
     }
     const dashboard = this.dashboards.find((d) => d.dashboardId == dashboardId);
 
@@ -464,6 +465,17 @@ export default class DashboardStore {
     }
   }
 
+  resetPeriod = () => {
+    if (this.period) {
+      const range = this.period.rangeName;
+      if (range !== CUSTOM_RANGE) {
+        this.period = Period({ rangeName: this.period.rangeName });
+      } else {
+        this.period = Period({ rangeName: LAST_24_HOURS });
+      }
+    }
+  };
+
   setPeriod(period: any) {
     this.period = Period({
       start: period.start,
@@ -536,9 +548,9 @@ export default class DashboardStore {
         const data = await metricService.getMetricChartData(
           metric,
           params,
-          isSaved
+          isSaved,
         );
-        const res = metric.setData(data, period, isComparison, data.density)
+        const res = metric.setData(data, period, isComparison, data.density);
         resolve(res);
       } catch (error) {
         reject(error);