Refresh all widgets CTA

questdb · Dec 4, 2024 · bd1a8f8 · bd1a8f8
1 parent 4c71d5f
commit bd1a8f8
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 15 deletions.
diff --git a/packages/web-console/src/scenes/Editor/Metrics/graph.tsx b/packages/web-console/src/scenes/Editor/Metrics/graph.tsx
@@ -4,7 +4,6 @@ import { MetricDuration, xAxisFormat } from "./utils"
 import { useGraphOptions } from "./useGraphOptions"
 import uPlot from "uplot"
 import UplotReact from "uplot-react"
-import { ThemeContext } from "styled-components"
 import { Box } from "@questdb/react-components"
 
 const Actions = styled.div`
@@ -54,7 +53,6 @@ const GraphWrapper = styled(Box).attrs({
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
-    width: 100%;
     text-align: center;
   }
 
@@ -126,7 +124,6 @@ export const Graph = ({
   const timeRef = useRef(null)
   const valueRef = useRef(null)
   const uPlotRef = useRef<uPlot>()
-  const theme = useContext(ThemeContext)
 
   const resizeObserver = new ResizeObserver((entries) => {
     uPlotRef.current?.setSize({
@@ -176,7 +173,7 @@ export const Graph = ({
           data={data}
           onCreate={(uplot) => {
             uPlotRef.current = uplot
-            if (data[0].length === 0) {
+            if (data[0].length === 0 && !loading) {
               const noData = document.createElement("div")
               noData.className = "graph-no-data"
               uplot.over.appendChild(noData)

diff --git a/packages/web-console/src/scenes/Editor/Metrics/index.tsx b/packages/web-console/src/scenes/Editor/Metrics/index.tsx
@@ -14,6 +14,7 @@ import { ExternalLink } from "@styled-icons/remix-line"
 import merge from "lodash.merge"
 import { AddChart } from "@styled-icons/material"
 import { getLocalTimeZone } from "../../../utils/dateTime"
+import { IconWithTooltip } from "../../../components/IconWithTooltip"
 
 const Root = styled.div`
   display: flex;
@@ -93,6 +94,7 @@ export const Metrics = () => {
   const [dialogOpen, setDialogOpen] = useState(false)
   const [metrics, setMetrics] = useState<Metric[]>([])
   const telemetryConfig = useSelector(selectors.telemetry.getConfig)
+  const [lastRefresh, setLastRefresh] = useState<number | undefined>()
 
   const buffer = buffers.find((b) => b.id === activeBuffer?.id)
 
@@ -212,16 +214,29 @@ export const Metrics = () => {
         <AddMetricDialog open={dialogOpen} onOpenChange={setDialogOpen} />
         <Box align="center" gap="1rem">
           <Text color="gray2">{getLocalTimeZone()}</Text>
-          <Select
-            name="refresh_rate"
-            value={refreshRate}
-            options={Object.values(RefreshRate).map((rate) => ({
-              label: formatRefreshRateLabel(rate, metricDuration),
-              value: rate,
-            }))}
-            onChange={(e) => setRefreshRate(e.target.value as RefreshRate)}
-            prefixIcon={<Refresh size="18px" />}
-          />
+          <Box gap="0.5rem" style={{ flexShrink: 0 }}>
+            <IconWithTooltip
+              icon={
+                <Button
+                  skin="secondary"
+                  onClick={() => setLastRefresh(new Date().getTime())}
+                >
+                  <Refresh size="20px" />
+                </Button>
+              }
+              tooltip="Refresh all widgets"
+              placement="bottom"
+            />
+            <Select
+              name="refresh_rate"
+              value={refreshRate}
+              options={Object.values(RefreshRate).map((rate) => ({
+                label: formatRefreshRateLabel(rate, metricDuration),
+                value: rate,
+              }))}
+              onChange={(e) => setRefreshRate(e.target.value as RefreshRate)}
+            />
+          </Box>
           <Select
             name="duration"
             value={metricDuration}
@@ -264,6 +279,7 @@ export const Metrics = () => {
                 onTableChange={handleTableChange}
                 onColorChange={handleColorChange}
                 onMetricDurationChange={setMetricDuration}
+                lastRefresh={lastRefresh}
               />
             ))}
       </Charts>

diff --git a/packages/web-console/src/scenes/Editor/Metrics/metric.tsx b/packages/web-console/src/scenes/Editor/Metrics/metric.tsx
@@ -53,6 +53,7 @@ export const Metric = ({
   onTableChange,
   onColorChange,
   onMetricDurationChange,
+  lastRefresh,
 }: {
   metric: MetricItem
   metricDuration: MetricDuration
@@ -61,6 +62,7 @@ export const Metric = ({
   onTableChange: (metric: MetricItem, tableId: number) => void
   onColorChange: (metric: MetricItem, color: string) => void
   onMetricDurationChange: (duration: MetricDuration) => void
+  lastRefresh?: number
 }) => {
   const { quest } = useContext(QuestContext)
   const [loading, setLoading] = useState(false)
@@ -89,7 +91,7 @@ export const Metric = ({
         | QuestDB.QueryResult<ResultType[MetricType]>
         | QuestDB.QueryResult<LastNotNull>
       >([
-        quest.query<any>(
+        quest.query<ResultType[MetricType]>(
           widgetConfig.getQuery({
             tableId: metric.tableId,
             metricDuration: metricDurationRef.current,
@@ -177,6 +179,12 @@ export const Metric = ({
     }
   }, [metric.tableId])
 
+  useCallback(() => {
+    if (lastRefresh) {
+      fetchMetric()
+    }
+  }, [lastRefresh])
+
   if (!data && !loading && metric.tableId)
     return (
       <MetricInfoRoot>