disable refetch on focus when set to all off

questdb · Dec 4, 2024 · a6d4ff6 · a6d4ff6
1 parent d7bae00
commit a6d4ff6
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/packages/web-console/src/scenes/Editor/Metrics/graph.tsx b/packages/web-console/src/scenes/Editor/Metrics/graph.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef } from "react"
+import React, { useContext, useEffect, useRef, useState } from "react"
 import styled from "styled-components"
 import { MetricDuration, xAxisFormat } from "./utils"
 import { useGraphOptions } from "./useGraphOptions"
@@ -91,6 +91,7 @@ const LabelValue = styled.span`
 `
 
 type Props = {
+  lastRefresh?: number
   tableId?: number
   tableName?: string
   isTableMetric: boolean
@@ -107,6 +108,7 @@ type Props = {
 }
 
 export const Graph = ({
+  lastRefresh,
   tableId,
   tableName,
   isTableMetric,
@@ -124,6 +126,7 @@ export const Graph = ({
   const timeRef = useRef(null)
   const valueRef = useRef(null)
   const uPlotRef = useRef<uPlot>()
+  const [dateNow, setDateNow] = useState(new Date())
 
   const resizeObserver = new ResizeObserver((entries) => {
     uPlotRef.current?.setSize({
@@ -134,6 +137,7 @@ export const Graph = ({
 
   const graphOptions = useGraphOptions({
     data,
+    dateNow,
     colors,
     duration,
     timeRef,
@@ -154,6 +158,10 @@ export const Graph = ({
     }
   }, [graphRootRef.current])
 
+  useEffect(() => {
+    setDateNow(new Date())
+  }, [lastRefresh])
+
   return (
     <Root ref={graphRootRef}>
       <Header>

diff --git a/packages/web-console/src/scenes/Editor/Metrics/metric.tsx b/packages/web-console/src/scenes/Editor/Metrics/metric.tsx
@@ -75,6 +75,7 @@ export const Metric = ({
 
   const intervalRef = React.useRef<NodeJS.Timeout>()
   const focusListenerRef = React.useRef(false)
+  const refreshRateRef = useRef<RefreshRate>(refreshRate)
 
   const { autoRefreshTables } = useLocalStorage()
 
@@ -156,6 +157,7 @@ export const Metric = ({
 
   useEffect(() => {
     metricDurationRef.current = metricDuration
+    refreshRateRef.current = refreshRate
 
     if (metric.tableId) {
       fetchMetric()
@@ -174,12 +176,15 @@ export const Metric = ({
   }, [autoRefreshTables, metricDuration, metric.tableId, refreshRate])
 
   const focusListener = useCallback(() => {
-    if (focusListenerRef.current && refreshRate !== RefreshRate.OFF) {
+    if (
+      focusListenerRef.current &&
+      refreshRateRef.current !== RefreshRate.OFF
+    ) {
       fetchMetric()
     }
-  }, [metric.tableId])
+  }, [metric.tableId, refreshRateRef.current])
 
-  useCallback(() => {
+  useEffect(() => {
     if (lastRefresh) {
       fetchMetric()
     }
@@ -206,6 +211,7 @@ export const Metric = ({
 
   return (
     <Graph
+      lastRefresh={lastRefresh}
       data={metric.tableId && data ? data : [[], []]}
       canZoomToData={canZoomToData}
       onZoomToData={handleZoomToData}

diff --git a/packages/web-console/src/scenes/Editor/Metrics/useGraphOptions.ts b/packages/web-console/src/scenes/Editor/Metrics/useGraphOptions.ts
@@ -8,6 +8,7 @@ import { MetricDuration, durationInMinutes } from "./utils"
 
 type Params = {
   data: uPlot.AlignedData
+  dateNow: Date
   colors: string[]
   duration: MetricDuration
   tickValue?: (rawValue: number) => string
@@ -46,6 +47,7 @@ const valuePlugin = (
 
 export const useGraphOptions = ({
   data,
+  dateNow,
   colors,
   duration,
   tickValue = (rawValue) => (+rawValue).toString(),
@@ -55,11 +57,10 @@ export const useGraphOptions = ({
   valueRef,
 }: Params): Omit<uPlot.Options, "width" | "height"> => {
   const theme = useContext(ThemeContext)
-  const now = new Date()
 
-  const start = subMinutes(now, durationInMinutes[duration]).getTime()
+  const start = subMinutes(dateNow, durationInMinutes[duration]).getTime()
 
-  const end = now.getTime()
+  const end = dateNow.getTime()
 
   const baseAxisConfig: uPlot.Axis = {
     stroke: theme.color.gray2,