From f749f720db9e8a8629f09cb27b73678b2d575465 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 23 Dec 2023 01:04:02 +0800
Subject: [PATCH] feat: add value format for data metrics

---
 .../components/monitor/MonitorDataMetrics.tsx   | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/client/components/monitor/MonitorDataMetrics.tsx b/src/client/components/monitor/MonitorDataMetrics.tsx
index e7de9b4..66d9a5f 100644
--- a/src/client/components/monitor/MonitorDataMetrics.tsx
+++ b/src/client/components/monitor/MonitorDataMetrics.tsx
@@ -17,8 +17,13 @@ export const MonitorDataMetrics: React.FC<{
     workspaceId,
     monitorId,
   });
+
+  const provider = useMemo(
+    () => getMonitorProvider(monitorType),
+    [monitorType]
+  );
+
   const providerOverview = useMemo(() => {
-    const provider = getMonitorProvider(monitorType);
     if (!provider || !provider.overview) {
       return null;
     }
@@ -30,7 +35,11 @@ export const MonitorDataMetrics: React.FC<{
         ))}
       </>
     );
-  }, [monitorId, monitorType]);
+  }, [monitorId, provider]);
+
+  const formatterFn = provider?.valueFormatter
+    ? provider?.valueFormatter
+    : (value: number) => `${value}ms`;
 
   if (isLoading) {
     return <Loading />;
@@ -46,14 +55,14 @@ export const MonitorDataMetrics: React.FC<{
         <MonitorStatsBlock
           title="Response"
           desc="(Current)"
-          text={`${currectResponse} ms`}
+          text={formatterFn(currectResponse)}
         />
       )}
 
       <MonitorStatsBlock
         title="Avg. Response"
         desc="(24 hour)"
-        text={`${parseFloat(data.recent1DayAvg.toFixed(0))} ms`}
+        text={formatterFn(parseFloat(data.recent1DayAvg.toFixed(0)))}
       />
       <MonitorStatsBlock
         title="Uptime"