ui: recreate period on db visit (#3478)

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;
@@ -90,16 +91,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;
@@ -472,6 +477,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,
@@ -545,7 +561,7 @@ export default class DashboardStore {
         const data = await metricService.getMetricChartData(
           metric,
           params,
-          isSaved
+          isSaved,
         );
         resolve(metric.setData(data, period, isComparison, density));
       } catch (error) {