tweak: remaining refresh seconds

ui/lib/apps/KeyViz/components/KeyViz.tsx

@@ -85,6 +85,7 @@ const KeyViz = () => {
   const [getSelection, setSelection] = useGetSet<HeatmapRange | null>(null)
   const [isLoading, setLoading] = useState(true)
   const [getAutoRefreshSeconds, setAutoRefreshSeconds] = useGetSet(0)
+  const [getRemainingRefreshSeconds, setRemainingRefreshSeconds] = useGetSet(0)
   const [getOnBrush, setOnBrush] = useGetSet(false)
   const [getDateRange, setDateRange] = useGetSet(3600 * 6)
   const [getBrightLevel, setBrightLevel] = useGetSet(1)
@@ -98,14 +99,6 @@ const KeyViz = () => {
 
   const enabled = config?.auto_collection_disabled !== true
 
-  const resetAutoRefresh = useCallback(() => {
-    const prevAutoRefreshSeconds = getAutoRefreshSeconds()
-    setAutoRefreshSeconds(0)
-    setTimeout(() => {
-      setAutoRefreshSeconds(prevAutoRefreshSeconds)
-    })
-  }, [getAutoRefreshSeconds()])
-
   const updateServiceStatus = useCallback(async function () {
     try {
       setLoading(true)
@@ -125,6 +118,10 @@ const KeyViz = () => {
   useMount(updateServiceStatus)
 
   const updateHeatmap = useCallback(async () => {
+    if (getAutoRefreshSeconds() > 0) {
+      setRemainingRefreshSeconds(getAutoRefreshSeconds())
+    }
+
     try {
       setLoading(true)
       setOnBrush(false)
@@ -151,10 +148,9 @@ const KeyViz = () => {
     (v: number) => {
       setDateRange(v)
       setSelection(null)
-      resetAutoRefresh()
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [resetAutoRefresh]
+    []
   )
 
   const onResetZoom = useCallback(() => {
@@ -182,13 +178,9 @@ const KeyViz = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  const onChangeMetricType = useCallback(
-    (v: DataTag) => {
-      setMetricType(v)
-      resetAutoRefresh()
-    },
-    [resetAutoRefresh]
-  )
+  const onChangeMetricType = useCallback((v: DataTag) => {
+    setMetricType(v)
+  }, [])
 
   const onChartInit = useCallback((chart) => {
     _chart = chart
@@ -247,11 +239,13 @@ const KeyViz = () => {
         onToggleBrush={onToggleBrush}
         onResetZoom={onResetZoom}
         autoRefreshSeconds={getAutoRefreshSeconds()}
+        remainingRefreshSeconds={getRemainingRefreshSeconds()}
         isOnBrush={getOnBrush()}
         onChangeBrightLevel={onChangeBrightLevel}
         onChangeMetric={onChangeMetricType}
         onChangeDateRange={onChangeDateRange}
         onChangeAutoRefresh={setAutoRefreshSeconds}
+        onRemainingRefreshSecondsChange={setRemainingRefreshSeconds}
         onRefresh={updateHeatmap}
         onShowSettings={openSettings}
       />

ui/lib/apps/KeyViz/components/KeyVizToolbar.tsx

@@ -18,6 +18,7 @@ export interface IKeyVizToolbarProps {
   enabled: boolean
   isLoading: boolean
   autoRefreshSeconds: number
+  remainingRefreshSeconds?: number
   isOnBrush: boolean
   metricType: string
   brightLevel: number
@@ -28,6 +29,7 @@ export interface IKeyVizToolbarProps {
   onChangeDateRange: (number) => void
   onChangeBrightLevel: (number) => void
   onChangeAutoRefresh: (number) => void
+  onRemainingRefreshSecondsChange: (number) => void
   onRefresh: () => void
   onShowSettings: () => any
 }
@@ -42,7 +44,11 @@ class KeyVizToolbar extends Component<IKeyVizToolbarProps & WithTranslation> {
   }
 
   handleAutoRefreshMenuClick = (key) => {
-    this.props.onChangeAutoRefresh(parseInt(key))
+    this.props.onChangeAutoRefresh(key)
+  }
+
+  handleRemainingRefreshSecondsChange = (v: number) => {
+    this.props.onRemainingRefreshSecondsChange(v)
   }
 
   handleDateRange = (value) => {
@@ -72,6 +78,7 @@ class KeyVizToolbar extends Component<IKeyVizToolbarProps & WithTranslation> {
       dateRange,
       isOnBrush,
       metricType,
+      remainingRefreshSeconds = 0,
       autoRefreshSeconds,
       onShowSettings,
     } = this.props
@@ -181,6 +188,10 @@ class KeyVizToolbar extends Component<IKeyVizToolbarProps & WithTranslation> {
             <AutoRefreshButton
               autoRefreshSeconds={autoRefreshSeconds}
               onAutoRefreshSecondsChange={this.handleAutoRefreshMenuClick}
+              remainingRefreshSeconds={remainingRefreshSeconds}
+              onRemainingRefreshSecondsChange={
+                this.handleRemainingRefreshSecondsChange
+              }
               onRefresh={this.handleRefreshClick}
               autoRefreshSecondsOptions={autoRefreshOptions}
               disabled={!enabled || isLoading}

ui/lib/components/AutoRefreshButton/AutoRefreshButton.tsx

@@ -12,6 +12,8 @@ interface AutoRefreshButtonProps {
   // set to 0 will stop the auto refresh
   autoRefreshSeconds: number
   onAutoRefreshSecondsChange: (v: number) => void
+  remainingRefreshSeconds: number
+  onRemainingRefreshSecondsChange: (v: number) => void
   onRefresh: () => void
   // set to false will pause the auto refresh
   disabled?: boolean
@@ -46,6 +48,8 @@ export function AutoRefreshButton({
   autoRefreshSecondsOptions,
   autoRefreshSeconds,
   onAutoRefreshSecondsChange,
+  remainingRefreshSeconds,
+  onRemainingRefreshSecondsChange,
   onRefresh,
   disabled = false,
 }: AutoRefreshButtonProps) {
@@ -79,13 +83,11 @@ export function AutoRefreshButton({
   )
 
   const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
-  const [getRemainingRefreshSeconds, setRemainingRefreshSeconds] =
-    useGetSet(autoRefreshSeconds)
 
   const resetTimer = useCallback(() => {
     clearTimeout(timer.current!)
     timer.current = undefined
-    setRemainingRefreshSeconds(autoRefreshSeconds)
+    onRemainingRefreshSecondsChange(autoRefreshSeconds)
   }, [autoRefreshSeconds])
 
   useEffect(() => {
@@ -94,10 +96,10 @@ export function AutoRefreshButton({
     if (
       // If remaining seconds is less than the new autoRefreshSeconds, keep the current remaining seconds.
       // Otherwise, set remaining seconds to new autoRefreshSeconds.
-      getRemainingRefreshSeconds() > autoRefreshSeconds ||
-      getRemainingRefreshSeconds() === 0
+      remainingRefreshSeconds > autoRefreshSeconds ||
+      remainingRefreshSeconds === 0
     ) {
-      setRemainingRefreshSeconds(autoRefreshSeconds)
+      onRemainingRefreshSecondsChange(autoRefreshSeconds)
     }
   }, [autoRefreshSeconds])
 
@@ -120,15 +122,15 @@ export function AutoRefreshButton({
     }
 
     timer.current = setTimeout(() => {
-      if (getRemainingRefreshSeconds() === 0) {
-        setRemainingRefreshSeconds(autoRefreshSeconds)
+      if (remainingRefreshSeconds === 0) {
+        onRemainingRefreshSecondsChange(autoRefreshSeconds)
         handleRefresh()
       } else {
-        setRemainingRefreshSeconds((c) => c - 1)
+        onRemainingRefreshSecondsChange(remainingRefreshSeconds - 1)
       }
     }, 1000)
     return () => clearTimeout(timer.current!)
-  }, [autoRefreshSeconds, disabled, getRemainingRefreshSeconds()])
+  }, [autoRefreshSeconds, disabled, remainingRefreshSeconds])
 
   return (
     <Dropdown.Button
@@ -140,7 +142,7 @@ export function AutoRefreshButton({
     >
       {autoRefreshSeconds ? (
         <RefreshProgress
-          value={1 - (getRemainingRefreshSeconds() || 0) / autoRefreshSeconds}
+          value={1 - remainingRefreshSeconds / autoRefreshSeconds}
         />
       ) : (
         <SyncOutlined />