jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: recreate period on db visit (#3478)

Browse source
This commit is contained in:
Delirium 2025-06-03 16:05:52 +02:00 • committed by GitHub
parent 9e24a3583e
commit f9ada41272
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 23 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
View file

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

28
frontend/app/mstore/dashboardStore.ts
View file

@ -1,12 +1,13 @@
import { makeAutoObservable, runInAction, reaction } from 'mobx'; import { makeAutoObservable, runInAction, reaction } from 'mobx';
import { dashboardService, metricService } from 'App/services'; import { dashboardService, metricService } from 'App/services';
import { toast } from 'react-toastify'; 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 { getRE } from 'App/utils';
import Filter from './types/filter'; import Filter from './types/filter';
import Widget from './types/widget'; import Widget from './types/widget';
import Dashboard from './types/dashboard'; import Dashboard from './types/dashboard';
import { calculateGranularities } from '@/components/Dashboard/components/WidgetDateRange/RangeGranularity'; import { calculateGranularities } from '@/components/Dashboard/components/WidgetDateRange/RangeGranularity';
import { CUSTOM_RANGE } from '@/dateRange';
interface DashboardFilter { interface DashboardFilter {
query?: string; query?: string;
@ -90,16 +91,20 @@ export default class DashboardStore {
() => this.period, () => this.period,
(period) => { (period) => {
this.createDensity(period.getDuration()); this.createDensity(period.getDuration());
},
);
} }
)
} resetDensity = () => {
this.createDensity(this.period.getDuration());
};
createDensity = (duration: number) => { createDensity = (duration: number) => {
const densityOpts = calculateGranularities(duration); const densityOpts = calculateGranularities(duration);
const defaultOption = densityOpts[densityOpts.length - 2]; const defaultOption = densityOpts[densityOpts.length - 2];
this.setDensity(defaultOption.key) this.setDensity(defaultOption.key);
} };
setDensity = (density: number) => { setDensity = (density: number) => {
this.selectedDensity = density; 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) { setPeriod(period: any) {
this.period = Period({ this.period = Period({
start: period.start, start: period.start,
@ -545,7 +561,7 @@ export default class DashboardStore {
const data = await metricService.getMetricChartData( const data = await metricService.getMetricChartData(
metric, metric,
params, params,
isSaved isSaved,
); );
resolve(metric.setData(data, period, isComparison, density)); resolve(metric.setData(data, period, isComparison, density));
} catch (error) { } catch (error) {