refactor: update monitor recent data strategy

src/client/components/modals/monitor/MonitorInfoEditor.tsx

@@ -75,7 +75,7 @@ export const MonitorInfoEditor: React.FC<MonitorInfoEditorProps> = React.memo(
           </Form.Item>
 
           <Form.Item
-            label="Check Interval"
+            label="Check Interval(s)"
             name="interval"
             rules={[{ required: true }]}
           >

src/client/components/monitor/MonitorInfo.tsx

@@ -183,11 +183,14 @@ const MonitorDataChart: React.FC<{ monitorId: string }> = React.memo(
     const workspaceId = useCurrentWorkspaceId();
     const { monitorId } = props;
     const [rangeType, setRangeType] = useState('recent');
-    const newDataList = useSocketSubscribeList('onMonitorReceiveNewData', {
+    const subscribedDataList = useSocketSubscribeList(
-      filter: (data) => {
+      'onMonitorReceiveNewData',
-        return data.monitorId === props.monitorId;
+      {
-      },
+        filter: (data) => {
-    });
+          return data.monitorId === props.monitorId;
+        },
+      }
+    );
 
     const range = useMemo((): [Dayjs, Dayjs] => {
       if (rangeType === '3h') {
@@ -206,6 +209,12 @@ const MonitorDataChart: React.FC<{ monitorId: string }> = React.memo(
       return [dayjs().subtract(0.5, 'hour'), dayjs()];
     }, [rangeType]);
 
+    const { data: _recentData = [] } = trpc.monitor.recentData.useQuery({
+      workspaceId,
+      monitorId,
+      take: 40,
+    });
+
     const { data: _data = [] } = trpc.monitor.data.useQuery({
       workspaceId,
       monitorId,
@@ -216,35 +225,37 @@ const MonitorDataChart: React.FC<{ monitorId: string }> = React.memo(
     const { data, annotations } = useMemo(() => {
       const annotations: AreaConfig['annotations'] = [];
       let start: number | null = null;
-      const data = uniqBy([..._data, ...newDataList], 'createdAt').map(
+      let fetchedData = rangeType === 'recent' ? _recentData : _data;
-        (d, i, arr) => {
+      const data = uniqBy(
-          const value = d.value > 0 ? d.value : null;
+        [...fetchedData, ...subscribedDataList],
-          const time = dayjs(d.createdAt).valueOf();
+        '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]) {
+        if (!value && !start && arr[i - 1]) {
-            start = dayjs(arr[i - 1]['createdAt']).valueOf();
+          start = dayjs(arr[i - 1]['createdAt']).valueOf();
-          } else if (value && start) {
+        } else if (value && start) {
-            annotations.push({
+          annotations.push({
-              type: 'region',
+            type: 'region',
-              start: [start, 'min'],
+            start: [start, 'min'],
-              end: [time, 'max'],
+            end: [time, 'max'],
-              style: {
+            style: {
-                fill: 'red',
+              fill: 'red',
-                fillOpacity: 0.25,
+              fillOpacity: 0.25,
-              },
+            },
-            });
+          });
-            start = null;
+          start = null;
-          }
-
-          return {
-            value,
-            time,
-          };
         }
-      );
+
+        return {
+          value,
+          time,
+        };
+      });
 
       return { data, annotations };
-    }, [_data, newDataList]);
+    }, [_recentData, _data, subscribedDataList]);
 
     const config = useMemo<AreaConfig>(() => {
       return {