40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
// 主机监控 — 进程监控 Tab (进程TOP表 + FD卡片 + CTX/IRQ卡片)
|
|
import type { RefObject } from 'react';
|
|
import type { AggType, BucketPoint } from '../types';
|
|
import type { JsonData } from '@/types/common';
|
|
import { ProcessTable } from './ProcessTable';
|
|
import { FDUsageCard } from './FDUsageCard';
|
|
import { ContextSwitchCard } from './ContextSwitchCard';
|
|
import type { ZoomableChartHandle } from '../ZoomableAreaChart';
|
|
|
|
export interface ProcessTabProps {
|
|
processTop: JsonData[];
|
|
fdInfo: JsonData;
|
|
csInfo: JsonData;
|
|
fdMetrics: BucketPoint[];
|
|
aggType: AggType;
|
|
fdChartRef: RefObject<ZoomableChartHandle | null>;
|
|
fdChartZoomed: boolean;
|
|
setFdChartZoomed: (v: boolean) => void;
|
|
}
|
|
|
|
export function ProcessTab(props: ProcessTabProps) {
|
|
const { processTop, fdInfo, csInfo, fdMetrics, aggType, fdChartRef, fdChartZoomed, setFdChartZoomed } = props;
|
|
return (
|
|
<div className="space-y-3">
|
|
<ProcessTable processTop={processTop} />
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
<FDUsageCard
|
|
fdInfo={fdInfo}
|
|
fdMetrics={fdMetrics}
|
|
aggType={aggType}
|
|
fdChartRef={fdChartRef}
|
|
fdChartZoomed={fdChartZoomed}
|
|
setFdChartZoomed={setFdChartZoomed}
|
|
/>
|
|
<ContextSwitchCard csInfo={csInfo} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|