diff --git a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx index 4ed7bece5..956f4ec52 100644 --- a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx +++ b/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(); diff --git a/frontend/app/mstore/dashboardStore.ts b/frontend/app/mstore/dashboardStore.ts index f985b97ca..21fc3de7e 100644 --- a/frontend/app/mstore/dashboardStore.ts +++ b/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) {