From 5a3a621fd6041626b06098fda9563c92d1c24ec9 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 11 Oct 2023 01:21:05 +0800
Subject: [PATCH] feat: add monitor chart livetime update

---
 src/client/components/monitor/MonitorInfo.tsx | 55 +++++++++++--------
 src/server/trpc/routers/monitor.ts            |  4 ++
 2 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/src/client/components/monitor/MonitorInfo.tsx b/src/client/components/monitor/MonitorInfo.tsx
index a1db6d4..4f23e92 100644
--- a/src/client/components/monitor/MonitorInfo.tsx
+++ b/src/client/components/monitor/MonitorInfo.tsx
@@ -9,6 +9,8 @@ import { NotFoundTip } from '../NotFoundTip';
 import { MonitorInfo as MonitorInfoType } from '../../../types';
 import { Area, AreaConfig } from '@ant-design/charts';
 import { MonitorHealthBar } from './MonitorHealthBar';
+import { useSocketSubscribeList } from '../../api/socketio';
+import { uniqBy } from 'lodash';
 
 interface MonitorInfoProps {
   monitorId: string;
@@ -74,6 +76,11 @@ const MonitorDataChart: React.FC<{ monitorId: string }> = React.memo(
     const workspaceId = useCurrentWorkspaceId();
     const { monitorId } = props;
     const [rangeType, setRangeType] = useState('recent');
+    const newDataList = useSocketSubscribeList('onMonitorReceiveNewData', {
+      filter: (data) => {
+        return data.monitorId === props.monitorId;
+      },
+    });
 
     const range = useMemo((): [Dayjs, Dayjs] => {
       if (rangeType === '3h') {
@@ -102,33 +109,35 @@ const MonitorDataChart: React.FC<{ monitorId: string }> = React.memo(
     const { data, annotations } = useMemo(() => {
       const annotations: AreaConfig['annotations'] = [];
       let start: number | null = null;
-      const data = _data.map((d, i, arr) => {
-        const value = d.value > 0 ? d.value : null;
-        const time = dayjs(d.createdAt).valueOf();
+      const data = uniqBy([..._data, ...newDataList], 'createdAt').map(
+        (d, i, arr) => {
+          const value = d.value > 0 ? d.value : null;
+          const time = dayjs(d.createdAt).valueOf();
 
-        if (!value && !start && arr[i - 1]) {
-          start = dayjs(arr[i - 1]['createdAt']).valueOf();
-        } else if (value && start) {
-          annotations.push({
-            type: 'region',
-            start: [start, 'min'],
-            end: [time, 'max'],
-            style: {
-              fill: 'red',
-              fillOpacity: 0.25,
-            },
-          });
-          start = null;
+          if (!value && !start && arr[i - 1]) {
+            start = dayjs(arr[i - 1]['createdAt']).valueOf();
+          } else if (value && start) {
+            annotations.push({
+              type: 'region',
+              start: [start, 'min'],
+              end: [time, 'max'],
+              style: {
+                fill: 'red',
+                fillOpacity: 0.25,
+              },
+            });
+            start = null;
+          }
+
+          return {
+            value,
+            time,
+          };
         }
-
-        return {
-          value,
-          time,
-        };
-      });
+      );
 
       return { data, annotations };
-    }, [_data]);
+    }, [_data, newDataList]);
 
     const config = useMemo<AreaConfig>(() => {
       return {
diff --git a/src/server/trpc/routers/monitor.ts b/src/server/trpc/routers/monitor.ts
index 910089d..64553b0 100644
--- a/src/server/trpc/routers/monitor.ts
+++ b/src/server/trpc/routers/monitor.ts
@@ -101,6 +101,10 @@ export const monitorRouter = router({
           monitorId,
         },
         take: -take,
+        select: {
+          value: true,
+          createdAt: true,
+        },
       });
     }),
 });