dashboard should support saving default query time

[Vadman97]

default is 4 hours and then gets set in the URL, but we should allow saving the relative time for the entire dashboard

[linear[bot]]

HIG-4665 dashboard should support saving default query time

[greptile-apps[bot]]

To support saving the default query time for the entire dashboard, follow these steps:

1. Update GraphingEditor Component:

   • Add a new setting for default query time.

     
     // Add this inside the GraphingEditor component
     const [defaultQueryTime, setDefaultQueryTime] = useState(DEFAULT_TIME_PRESETS[2]);

   // Add a new LabeledRow for default query time

2. Update DashboardPage Component:

   • Save the default query time setting.

     
     // Add this inside the DashboardPage component
     const [defaultQueryTime, setDefaultQueryTime] = useState(DEFAULT_TIME_PRESETS[2]);

   // Update the pushNewMetricConfig function to include defaultQueryTime const pushNewMetricConfig = ( nm: DashboardMetricConfig[], newLayout?: Layouts, ) => { let l: Layouts; if (newLayout) { l = newLayout; } else { const newPos = { ...DEFAULT_SINGLE_LAYOUT }; newPos.i = (nm.length - 1).toString(); newPos.y = Math.max(...layout.lg.map((l) => l.y)); newPos.x = Math.max( ...layout.lg .filter((l) => l.y === newPos.y) .map((l) => l.x), ) + LAYOUT_CHART_WIDTH; if (newPos.x > LAYOUT_ROW_WIDTH - LAYOUT_CHART_WIDTH) { newPos.y += 1; newPos.x = 0; } l = { lg: [...layout.lg, newPos].slice(0, nm.length), }; } updateDashboard({ id: dashboard?.id || id, metrics: nm, name: dashboard?.name || '', layout: JSON.stringify(l), defaultQueryTime, // Save defaultQueryTime }); };

3. Utilize useSearchTime Hook:

   • Manage the time state using the useSearchTime hook.

     // Inside the GraphingEditor component
     const { startDate, endDate, selectedPreset, updateSearchTime } = useSearchTime({
     presets: DEFAULT_TIME_PRESETS,
     initialPreset: defaultQueryTime, // Use defaultQueryTime as initial preset
     });

References

/frontend/src/pages/Graphing/GraphingEditor.tsx /frontend/src/pages/Dashboards/pages/Dashboard/DashboardPage.tsx /frontend/src/hooks/useSearchTime.ts /frontend/src/context/SearchState.ts /frontend/src/pages/Player/PlayerHook/utils/index.tsx

Ask Greptile