feat: add refresh to existing preset dashboards (#1249)

Closes HDX-2046

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.changeset/rude-pants-yell.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": minor
+---
+
+feat: add refresh to existing preset dashboards

packages/app/src/ClickhousePage.tsx

@@ -20,6 +20,7 @@ import {
   SegmentedControl,
   Tabs,
   Text,
+  Tooltip,
 } from '@mantine/core';
 import ReactCodeMirror from '@uiw/react-codemirror';
 
@@ -33,6 +34,7 @@ import DBHeatmapChart from './components/DBHeatmapChart';
 import { DBSqlRowTable } from './components/DBRowTable';
 import DBTableChart from './components/DBTableChart';
 import OnboardingModal from './components/OnboardingModal';
+import { useDashboardRefresh } from './hooks/useDashboardRefresh';
 import { useConnections } from './connection';
 import { parseTimeQuery, useNewTimeQuery } from './timeQuery';
 
@@ -457,6 +459,15 @@ function ClickhousePage() {
     // showRelativeInterval: isLive,
   });
 
+  // For future use if Live button is added
+  const [isLive, setIsLive] = useState(false);
+
+  const { manualRefreshCooloff, refresh } = useDashboardRefresh({
+    searchedTimeRange,
+    onTimeRangeSelect,
+    isLive,
+  });
+
   const filters = useMemo(() => {
     const { latencyMin, latencyMax } = latencyFilter;
     return [
@@ -497,21 +508,35 @@ function ClickhousePage() {
             size="xs"
           />
         </Group>
-        <form
-          onSubmit={e => {
-            e.preventDefault();
-            onSearch(displayedTimeInputValue);
-            return false;
-          }}
-        >
-          <TimePicker
-            inputValue={displayedTimeInputValue}
-            setInputValue={setDisplayedTimeInputValue}
-            onSearch={range => {
-              onSearch(range);
+        <Group gap="xs">
+          <form
+            onSubmit={e => {
+              e.preventDefault();
+              onSearch(displayedTimeInputValue);
+              return false;
             }}
-          />
-        </form>
+          >
+            <TimePicker
+              inputValue={displayedTimeInputValue}
+              setInputValue={setDisplayedTimeInputValue}
+              onSearch={onSearch}
+            />
+          </form>
+          <Tooltip withArrow label="Refresh dashboard" fz="xs" color="gray">
+            <Button
+              onClick={refresh}
+              loading={manualRefreshCooloff}
+              disabled={manualRefreshCooloff}
+              color="gray"
+              variant="outline"
+              title="Refresh dashboard"
+              aria-label="Refresh dashboard"
+              px="xs"
+            >
+              <i className="bi bi-arrow-clockwise fs-5"></i>
+            </Button>
+          </Tooltip>
+        </Group>
       </Group>
       <Tabs
         mt="md"

packages/app/src/KubernetesDashboardPage.tsx

@@ -11,6 +11,7 @@ import { SourceKind, TSource } from '@hyperdx/common-utils/dist/types';
 import {
   Badge,
   Box,
+  Button,
   Card,
   Flex,
   Grid,
@@ -34,6 +35,7 @@ import OnboardingModal from './components/OnboardingModal';
 import SourceSchemaPreview from './components/SourceSchemaPreview';
 import { SourceSelectControlled } from './components/SourceSelect';
 import { useQueriedChartConfig } from './hooks/useChartConfig';
+import { useDashboardRefresh } from './hooks/useDashboardRefresh';
 import {
   convertDateRangeToGranularityString,
   convertV1ChartConfigToV2,
@@ -856,6 +858,7 @@ function KubernetesDashboardPage() {
     displayedTimeInputValue,
     setDisplayedTimeInputValue,
     onSearch,
+    onTimeRangeSelect,
   } = useTimeQuery({
     defaultValue: 'Past 1h',
     defaultTimeRange: [
@@ -864,6 +867,15 @@ function KubernetesDashboardPage() {
     ],
   });
 
+  // For future use if Live button is added
+  const [isLive, setIsLive] = React.useState(false);
+
+  const { manualRefreshCooloff, refresh } = useDashboardRefresh({
+    searchedTimeRange: dateRange,
+    onTimeRangeSelect,
+    isLive,
+  });
+
   const whereClause = searchQuery;
 
   const [_searchQuery, _setSearchQuery] = React.useState<string | null>(null);
@@ -925,23 +937,37 @@ function KubernetesDashboardPage() {
           />
         </Group>
 
-        <form
-          data-testid="kubernetes-time-form"
-          onSubmit={e => {
-            e.preventDefault();
-            onSearch(displayedTimeInputValue);
-            return false;
-          }}
-        >
-          <TimePicker
-            data-testid="kubernetes-time-picker"
-            inputValue={displayedTimeInputValue}
-            setInputValue={setDisplayedTimeInputValue}
-            onSearch={range => {
-              onSearch(range);
+        <Group gap="xs">
+          <form
+            data-testid="kubernetes-time-form"
+            onSubmit={e => {
+              e.preventDefault();
+              onSearch(displayedTimeInputValue);
+              return false;
             }}
-          />
-        </form>
+          >
+            <TimePicker
+              data-testid="kubernetes-time-picker"
+              inputValue={displayedTimeInputValue}
+              setInputValue={setDisplayedTimeInputValue}
+              onSearch={onSearch}
+            />
+          </form>
+          <Tooltip withArrow label="Refresh dashboard" fz="xs" color="gray">
+            <Button
+              onClick={refresh}
+              loading={manualRefreshCooloff}
+              disabled={manualRefreshCooloff}
+              color="gray"
+              variant="outline"
+              title="Refresh dashboard"
+              aria-label="Refresh dashboard"
+              px="xs"
+            >
+              <i className="bi bi-arrow-clockwise fs-5"></i>
+            </Button>
+          </Tooltip>
+        </Group>
       </Group>
       {metricSource && (
         <KubernetesFilters

packages/app/src/ServicesDashboardPage.tsx

@@ -22,6 +22,7 @@ import {
   SegmentedControl,
   Tabs,
   Text,
+  Tooltip,
 } from '@mantine/core';
 
 import {
@@ -43,6 +44,7 @@ import { SQLInlineEditorControlled } from '@/components/SQLInlineEditor';
 import { TimePicker } from '@/components/TimePicker';
 import WhereLanguageControlled from '@/components/WhereLanguageControlled';
 import { useQueriedChartConfig } from '@/hooks/useChartConfig';
+import { useDashboardRefresh } from '@/hooks/useDashboardRefresh';
 import { useJsonColumns } from '@/hooks/useMetadata';
 import { withAppNav } from '@/layout';
 import SearchInputV2 from '@/SearchInputV2';
@@ -895,12 +897,21 @@ function ServicesDashboardPage() {
   const [displayedTimeInputValue, setDisplayedTimeInputValue] =
     useState(DEFAULT_INTERVAL);
 
-  const { searchedTimeRange, onSearch } = useNewTimeQuery({
+  const { searchedTimeRange, onSearch, onTimeRangeSelect } = useNewTimeQuery({
     initialDisplayValue: DEFAULT_INTERVAL,
     initialTimeRange: defaultTimeRange,
     setDisplayedTimeInputValue,
   });
 
+  // For future use if Live button is added
+  const [isLive, setIsLive] = useState(false);
+
+  const { manualRefreshCooloff, refresh } = useDashboardRefresh({
+    searchedTimeRange,
+    onTimeRangeSelect,
+    isLive,
+  });
+
   const onSubmit = useCallback(() => {
     onSearch(displayedTimeInputValue);
     handleSubmit(values => {
@@ -990,10 +1001,22 @@ function ServicesDashboardPage() {
             <TimePicker
               inputValue={displayedTimeInputValue}
               setInputValue={setDisplayedTimeInputValue}
-              onSearch={range => {
-                onSearch(range);
-              }}
+              onSearch={onSearch}
             />
+            <Tooltip withArrow label="Refresh dashboard" fz="xs" color="gray">
+              <Button
+                onClick={refresh}
+                loading={manualRefreshCooloff}
+                disabled={manualRefreshCooloff}
+                color="gray"
+                variant="outline"
+                title="Refresh dashboard"
+                aria-label="Refresh dashboard"
+                px="xs"
+              >
+                <i className="bi bi-arrow-clockwise fs-5"></i>
+              </Button>
+            </Tooltip>
             <Button variant="outline" type="submit" px="sm">
               <i className="bi bi-play"></i>
             </Button>