aiops/frontend/src/components/kubernetes/PodMetricsPage.tsx

import { useState, useEffect, useCallback, useMemo } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from '@/components/ui/select';
import {
  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from '@/components/ui/table';
import { Cpu, HardDrive, RefreshCw, Activity } from 'lucide-react';
import { kubernetesApi } from '@/api';
import { PageShell } from '@/components/layout/PageShell';
import { ContentPanel } from '@/components/layout/ContentPanel';
import { StatStrip } from '@/components/ui/stat-strip';
import type { JsonData } from '@/types/common';
import i18n from '@/i18n';

export default function PodMetricsPage() {
  const { clusterCode } = useParams<{ clusterCode: string }>();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [metrics, setMetrics] = useState<JsonData[]>([]);
  const [clusters, setClusters] = useState<JsonData[]>([]);
  const [namespaces, setNamespaces] = useState<string[]>([]);
  const [selectedNs, setSelectedNs] = useState('all');
  const [activeCluster, setActiveCluster] = useState(clusterCode || '');

  useEffect(() => {
    kubernetesApi.getClusters().then((res: JsonData) => {
      const list = res?.list || [];
      setClusters(list);
      if (!activeCluster && list.length > 0) {
        const code = list[0].code || String(list[0].id);
        setActiveCluster(code);
        navigate(`/kubernetes/${code}/metrics/pods`, { replace: true });
      }
    }).catch(() => {});
  }, []);

  useEffect(() => {
    if (!activeCluster) return;
    kubernetesApi.getNamespaces(activeCluster).then((res: JsonData) => {
      setNamespaces(Array.isArray(res) ? res : (res?.list || res?.data || []));
    }).catch(() => {});
  }, [activeCluster]);

  const loadMetrics = useCallback(async () => {
    if (!activeCluster) return;
    setLoading(true);
    try {
      const ns = selectedNs === 'all' ? undefined : selectedNs;
      const res: JsonData = await kubernetesApi.getPodMetrics(activeCluster, ns);
      setMetrics(Array.isArray(res) ? res : (res?.list || []));
    } catch { setMetrics([]); } finally { setLoading(false); }
  }, [activeCluster, selectedNs]);

  useEffect(() => { loadMetrics(); }, [loadMetrics]);

  // Flatten for table
  const rows = useMemo(() =>
    metrics.flatMap((pm: JsonData) =>
      (pm.containers || []).map((c: JsonData) => ({
        pod: pm.name,
        namespace: pm.namespace,
        container: c.name,
        cpu: c.cpu || '0m',
        memory: c.memory || '0Mi',
      }))
    ), [metrics]);

  const totalCPU = useMemo(() => rows.reduce((s, r) => s + (parseInt(r.cpu) || 0), 0), [rows]);
  const totalMem = useMemo(() => {
    let sum = 0;
    rows.forEach(r => {
      const v = r.memory;
      if (v.endsWith('Mi')) sum += parseInt(v);
      else if (v.endsWith('Ki')) sum += parseInt(v) / 1024;
      else if (v.endsWith('Gi')) sum += parseInt(v) * 1024;
    });
    return sum;
  }, [rows]);

  const clusterName = clusters.find((c: JsonData) => (c.code || String(c.id)) === activeCluster)?.name;

  return (
    <PageShell
      variant="list"
      title=i18n.t('k8s.podMetrics.resources2')
      subtitle={clusterName ? `${clusterName} · 容器 CPU/内存实时指标` : i18n.t('k8s.podMetrics.container2')}
      icon={<Activity className="h-5 w-5" />}
      metrics={!loading ? (
        <StatStrip
          items={[
            { label: i18n.t('k8s.podMetrics.sa2e8040e'), value: metrics.length, color: 'muted' },
            { label: i18n.t('k8s.podMetrics.cpu'), value: `${totalCPU}m`, color: 'blue' },
            { label: i18n.t('k8s.podMetrics.memory'), value: `${totalMem.toFixed(0)}Mi`, color: 'green' },
          ]}
        />
      ) : undefined}
      actions={(
        <>
          <Select value={activeCluster} onValueChange={v => { setActiveCluster(v); navigate(`/kubernetes/${v}/metrics/pods`); }}>
            <SelectTrigger className="w-44 h-9 dg-input"><SelectValue /></SelectTrigger>
            <SelectContent>
              {clusters.map((c: JsonData) => <SelectItem key={c.id} value={c.code || String(c.id)}>{c.name || c.code}</SelectItem>)}
            </SelectContent>
          </Select>
          <Select value={selectedNs} onValueChange={setSelectedNs}>
            <SelectTrigger className="w-36 h-9 dg-input"><SelectValue placeholder=i18n.t('k8s.podMetrics.namespace') /></SelectTrigger>
            <SelectContent>
              <SelectItem value="all">所有命名空间</SelectItem>
              {namespaces.map(n => <SelectItem key={n} value={n}>{n}</SelectItem>)}
            </SelectContent>
          </Select>
          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadMetrics} disabled={loading}>
            <RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
            刷新
          </Button>
        </>
      )}
    >
      <ContentPanel>
          <Table>
            <TableHeader><TableRow className="border-[var(--dg-border)] hover:bg-transparent">
              <TableHead className="dg-text-secondary">Pod</TableHead>
              <TableHead className="dg-text-secondary">命名空间</TableHead>
              <TableHead className="dg-text-secondary">容器</TableHead>
              <TableHead className="dg-text-secondary"><Cpu className="h-3 w-3 inline mr-1" />CPU</TableHead>
              <TableHead className="dg-text-secondary"><HardDrive className="h-3 w-3 inline mr-1" />Memory</TableHead>
            </TableRow></TableHeader>
            <TableBody>
              {rows.length === 0 ? (
                <TableRow><TableCell colSpan={5} className="text-center dg-text-muted py-8i18n.t('k8s.podMetrics.s934752c9')animate-spin inline-block ml-2">⏳</span> : ''}</TableCell></TableRow>
              ) : rows.map((r, i) => (
                <TableRow key={`${r.pod}-${r.container}-${i}`} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
                  <TableCell className="font-medium text-[var(--dg-text-primary)] text-sm">{r.pod}</TableCell>
                  <TableCell><Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-xs">{r.namespace}</Badge></TableCell>
                  <TableCell className="text-sm dg-text-secondary">{r.container}</TableCell>
                  <TableCell className="text-sm dg-text-blue">{r.cpu}</TableCell>
                  <TableCell className="text-sm dg-text-green">{r.memory}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
      </ContentPanel>
    </PageShell>
  );
}