From 215c8531156efa46b622b1363e360a44144d581e Mon Sep 17 00:00:00 2001
From: Maciej Bodek <maciej.bodek@gmail.com>
Date: Fri, 13 Dec 2024 19:20:09 +0100
Subject: [PATCH] fix from/to logic

---
 .../src/scenes/Editor/Metrics/graph.tsx       |  1 -
 .../src/scenes/Editor/Metrics/index.tsx       | 14 ++++++++--
 .../src/scenes/Editor/Metrics/metric.tsx      | 28 +++++++++++--------
 .../src/scenes/Editor/Metrics/utils.ts        |  7 ++++-
 .../web-console/src/scenes/Schema/index.tsx   | 22 ++++++++-------
 5 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/packages/web-console/src/scenes/Editor/Metrics/graph.tsx b/packages/web-console/src/scenes/Editor/Metrics/graph.tsx
index 0a7b60f3c..9d13bc1fb 100644
--- a/packages/web-console/src/scenes/Editor/Metrics/graph.tsx
+++ b/packages/web-console/src/scenes/Editor/Metrics/graph.tsx
@@ -110,7 +110,6 @@ type Props = {
 export const Graph = ({
   dateFrom,
   dateTo,
-  lastRefresh,
   tableId,
   tableName,
   beforeLabel,
diff --git a/packages/web-console/src/scenes/Editor/Metrics/index.tsx b/packages/web-console/src/scenes/Editor/Metrics/index.tsx
index c460d681b..bddc54e56 100644
--- a/packages/web-console/src/scenes/Editor/Metrics/index.tsx
+++ b/packages/web-console/src/scenes/Editor/Metrics/index.tsx
@@ -132,6 +132,7 @@ export const Metrics = () => {
   const tabInFocusRef = React.useRef<boolean>(true)
   const refreshRateRef = React.useRef<RefreshRate>()
   const intervalRef = React.useRef<NodeJS.Timeout>()
+  const metricDurationRef = React.useRef<MetricDuration>()
 
   const { autoRefreshTables } = useLocalStorage()
 
@@ -164,8 +165,12 @@ export const Metrics = () => {
   }
 
   const refreshMetricsData = () => {
+    if (!metricDurationRef?.current) return
     const now = new Date()
-    const dateFrom = subMinutes(now, durationInMinutes[duration])
+    const dateFrom = subMinutes(
+      now,
+      durationInMinutes[metricDurationRef.current],
+    )
     const dateTo = now
     eventBus.publish<MetricsRefreshPayload>(EventType.METRICS_REFRESH_DATA, {
       dateFrom,
@@ -246,7 +251,9 @@ export const Metrics = () => {
       }
       if (metricDuration) {
         setMetricDuration(metricDuration)
-        setSampleBy(defaultSampleByForDuration[metricDuration])
+        if (!sampleBy) {
+          setSampleBy(defaultSampleByForDuration[metricDuration])
+        }
       }
       if (sampleBy) {
         setSampleBy(sampleBy)
@@ -278,6 +285,9 @@ export const Metrics = () => {
           }),
         },
       })
+      if (metricDuration) {
+        metricDurationRef.current = metricDuration
+      }
       if (metricDuration && refreshRate && metricViewMode && sampleBy) {
         updateBuffer(buffer.id, merged)
         setFetchMode(FetchMode.OVERWRITE)
diff --git a/packages/web-console/src/scenes/Editor/Metrics/metric.tsx b/packages/web-console/src/scenes/Editor/Metrics/metric.tsx
index 2f8832da4..498b60ef2 100644
--- a/packages/web-console/src/scenes/Editor/Metrics/metric.tsx
+++ b/packages/web-console/src/scenes/Editor/Metrics/metric.tsx
@@ -12,6 +12,7 @@ import {
   SampleBy,
   getTimeFilter,
   MetricsRefreshPayload,
+  metricDurationToDate,
 } from "./utils"
 import { widgets } from "./widgets"
 import { QuestContext } from "../../../providers"
@@ -72,6 +73,9 @@ export const Metric = ({
   const [lastNotNull, setLastNotNull] = useState<number>()
   const [colorPickerOpen, setColorPickerOpen] = useState(false)
   const [fromTo, setFromTo] = useState<MetricsRefreshPayload>()
+  const [lastTableId, setLastTableId] = useState<number | undefined>(
+    metric.tableId,
+  )
 
   const tables = useSelector(selectors.query.getTables)
 
@@ -86,10 +90,14 @@ export const Metric = ({
     widgetConfig.querySupportsRollingAppend &&
     fetchMode === FetchMode.ROLLING_APPEND
 
+  const dateNow = new Date()
+  const dateFrom = fromTo?.dateFrom
+    ? fromTo.dateFrom
+    : subMinutes(dateNow, durationInMinutes[metricDuration])
+  const dateTo = fromTo?.dateTo ?? dateNow
+
   const fetchMetric = async () => {
-    if (!fromTo) return
-    const { dateFrom, dateTo } = fromTo
-    const timeout = setTimeout(() => setLoading(true), 250)
+    setLoading(true)
     try {
       const subtracted = subMinutes(dateTo, durationInMinutes[metricDuration])
       const timeFilter = getTimeFilter(subtracted, dateTo)
@@ -133,7 +141,6 @@ export const Metric = ({
     } catch (err) {
       console.error(err)
     } finally {
-      clearTimeout(timeout)
       setLoading(false)
     }
   }
@@ -156,7 +163,8 @@ export const Metric = ({
   }
 
   useEffect(() => {
-    if (metric.tableId && fromTo) {
+    if ((metric.tableId && metric.tableId !== lastTableId) || fromTo) {
+      setLastTableId(metric.tableId)
       fetchMetric()
     }
   }, [metric.tableId, fromTo])
@@ -183,20 +191,18 @@ export const Metric = ({
   const tableName = tables.find((t) => t.id === metric.tableId)?.table_name
 
   const canZoomToData =
-    fromTo?.dateTo && tableName && lastNotNull
+    dateTo && tableName && lastNotNull
       ? lastNotNull >=
         subMinutes(
-          fromTo.dateTo,
+          dateTo,
           minuteDurations[minuteDurations.length - 1][1],
         ).getTime()
       : false
 
-  if (!fromTo) return null
-
   return (
     <Graph
-      dateFrom={fromTo.dateFrom}
-      dateTo={fromTo.dateTo}
+      dateFrom={dateFrom}
+      dateTo={dateTo}
       lastRefresh={lastRefresh}
       data={metric.tableId && hasData(data) ? data : [[], []]}
       canZoomToData={canZoomToData}
diff --git a/packages/web-console/src/scenes/Editor/Metrics/utils.ts b/packages/web-console/src/scenes/Editor/Metrics/utils.ts
index b765acb06..2500888f3 100644
--- a/packages/web-console/src/scenes/Editor/Metrics/utils.ts
+++ b/packages/web-console/src/scenes/Editor/Metrics/utils.ts
@@ -4,7 +4,7 @@ import uPlot from "uplot"
 
 export enum MetricType {
   COMMIT_RATE = "Commit rate",
-  WRITE_THROUGHPUT = "Rows applied",
+  WRITE_THROUGHPUT = "Write throughput",
   LATENCY = "Latency",
   WRITE_AMPLIFICATION = "Write amplification",
 }
@@ -184,6 +184,11 @@ export const minutesToHours = (durationInMinutes: number) =>
 export const minutesToSeconds = (durationInMinutes: number) =>
   durationInMinutes * 60
 
+export const metricDurationToDate = (
+  metricDuration: MetricDuration,
+  dateNow: Date,
+) => subMinutes(dateNow, durationInMinutes[metricDuration])
+
 export const xAxisFormat = {
   [MetricDuration.FIVE_MINUTES]: (rawValue: number) =>
     utcToLocal(rawValue, "HH:mm:ss"),
diff --git a/packages/web-console/src/scenes/Schema/index.tsx b/packages/web-console/src/scenes/Schema/index.tsx
index cb1becb0d..30026010e 100644
--- a/packages/web-console/src/scenes/Schema/index.tsx
+++ b/packages/web-console/src/scenes/Schema/index.tsx
@@ -276,6 +276,17 @@ const Schema = ({
     }
   }
 
+  const handleAddMetricsBuffer = async () => {
+    await addBuffer({
+      metricsViewState: {
+        metrics: [],
+        metricDuration: MetricDuration.ONE_HOUR,
+        refreshRate: RefreshRate.AUTO,
+        viewMode: MetricViewMode.GRID,
+      },
+    })
+  }
+
   useEffect(() => {
     void fetchTables()
     void fetchColumns()
@@ -469,16 +480,7 @@ const Schema = ({
                         <Button
                           data-hook="schema-add-metrics-button"
                           skin="transparent"
-                          onClick={() => {
-                            addBuffer({
-                              metricsViewState: {
-                                metrics: [],
-                                metricDuration: MetricDuration.ONE_HOUR,
-                                refreshRate: RefreshRate.AUTO,
-                                viewMode: MetricViewMode.GRID,
-                              },
-                            })
-                          }}
+                          onClick={handleAddMetricsBuffer}
                         >
                           <AddChart size="20px" />
                         </Button>