schiwagoa/tianji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update monitor recent data strategy

Browse Source
This commit is contained in:
moonrailgun 2023-10-24 22:25:44 +08:00
parent dd6b4943f9
commit c161219137
2 changed files with 42 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/components/modals/monitor/MonitorInfoEditor.tsx
View File

@ -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 }]}
>

71
src/client/components/monitor/MonitorInfo.tsx
View File

@ -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', {
filter: (data) => {
return data.monitorId === props.monitorId;
},
});
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,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(
(d, i, arr) => {
const value = d.value > 0 ? d.value : null;
const time = dayjs(d.createdAt).valueOf();
let fetchedData = rangeType === 'recent' ? _recentData : _data;
const data = uniqBy(
[...fetchedData, ...subscribedDataList],
'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;
}
return {
value,
time,
};
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 { data, annotations };
}, [_data, newDataList]);
}, [_recentData, _data, subscribedDataList]);
const config = useMemo<AreaConfig>(() => {
return {