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(
+      'onMonitorReceiveNewData',
+      {
         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,8 +225,11 @@ 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(
+        [...fetchedData, ...subscribedDataList],
+        'createdAt'
+      ).map((d, i, arr) => {
         const value = d.value > 0 ? d.value : null;
         const time = dayjs(d.createdAt).valueOf();
 
@@ -240,11 +252,10 @@ const MonitorDataChart: React.FC<{ monitorId: string }> = React.memo(
           value,
           time,
         };
-        }
+      });
-      );
 
       return { data, annotations };
-    }, [_data, newDataList]);
+    }, [_recentData, _data, subscribedDataList]);
 
     const config = useMemo<AreaConfig>(() => {
       return {