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]

HIG-4665 dashboard should support saving default query time

[greptile-apps]

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
   <LabeledRow label="Default Query Time" name="defaultQueryTime">
     <DateRangePicker
       selectedValue={defaultQueryTime}
       onDatesChange={setDefaultQueryTime}
       presets={DEFAULT_TIME_PRESETS}
     />
   </LabeledRow>

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