import React, { useMemo } from 'react'; import { trpc } from '../../api/trpc'; import { useCurrentWorkspaceId } from '../../store/user'; import { ErrorTip } from '../ErrorTip'; import { Loading } from '../Loading'; import { getMonitorProvider } from './provider'; import { MonitorStatsBlock } from './MonitorStatsBlock'; export const MonitorDataMetrics: React.FC<{ monitorId: string; monitorType: string; currectResponse?: number; }> = React.memo((props) => { const workspaceId = useCurrentWorkspaceId(); const { monitorId, monitorType, currectResponse } = props; const { data, isLoading } = trpc.monitor.dataMetrics.useQuery({ workspaceId, monitorId, }); const providerOverview = useMemo(() => { const provider = getMonitorProvider(monitorType); if (!provider || !provider.overview) { return null; } return ( <> {provider.overview.map((Component) => ( ))} ); }, [monitorId, monitorType]); if (isLoading) { return ; } if (!data) { return ; } return (
{typeof currectResponse === 'number' && ( )} {providerOverview}
); }); MonitorDataMetrics.displayName = 'MonitorDataMetrics';