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

import { useState, useEffect, useCallback } from 'react';
import { useParams, Link } from 'react-router-dom';
import {
  
  ChevronRight,
  Cloud,
  Boxes,
  Container,
  Network,
  FileText,
  Shield,
  Activity,
  Clock,
} from 'lucide-react';

import { kubernetesApi } from '@/api';
import { PageShell } from '@/components/layout/PageShell';
import type { JsonData } from '@/types/common';
import i18n from '@/i18n';

const RESOURCE_LINKS = [
  { type: 'deployments', label: 'Deployments', icon: Boxes, desc: i18n.t('kubernetes.namespaceovervi.sb68c634e') },
  { type: 'pods', label: 'Pods', icon: Container, desc: i18n.t('kubernetes.namespaceovervi.sfdac258b') },
  { type: 'cronjobs', label: 'CronJobs', icon: Clock, desc: i18n.t('kubernetes.namespaceovervi.s9c9fc523') },
  { type: 'services', label: 'Services', icon: Network, desc: i18n.t('kubernetes.namespaceovervi.s3a3f6d6c') },
  { type: 'ingresses', label: 'Ingresses', icon: Network, desc: i18n.t('kubernetes.namespaceovervi.scc6971c7') },
  { type: 'configmaps', label: 'ConfigMaps', icon: FileText, desc: i18n.t('kubernetes.namespaceovervi.s0986a6e7') },
  { type: 'secrets', label: 'Secrets', icon: Shield, desc: i18n.t('kubernetes.namespaceovervi.sb3fb72cd') },
  { type: 'hpas', label: 'HPAs', icon: Activity, desc: i18n.t('kubernetes.namespaceovervi.sa84da2c5') },
];

export default function NamespaceOverviewPage() {
  const { clusterCode, namespace } = useParams<{ clusterCode: string; namespace: string }>();
  const [counts, setCounts] = useState<Record<string, number>>({});
  const [loading, setLoading] = useState(false);

  const loadCounts = useCallback(async () => {
    if (!clusterCode || !namespace) return;
    setLoading(true);
    try {
      const results = await Promise.allSettled([
        kubernetesApi.getNamespaceDeployments(clusterCode, namespace!),
        kubernetesApi.getNamespacePods(clusterCode, namespace!),
        kubernetesApi.getNamespaceServices(clusterCode, namespace!),
        kubernetesApi.getNamespaceIngresses(clusterCode, namespace!),
        kubernetesApi.getNamespaceConfigMaps(clusterCode, namespace!),
        kubernetesApi.getNamespaceSecrets(clusterCode, namespace!),
        kubernetesApi.getHPAs(clusterCode, namespace!),
        kubernetesApi.getCronJobs(clusterCode, namespace!),
      ]);
      const toArr = (v: JsonData) => Array.isArray(v) ? v : (v?.list || v?.data || []);
      setCounts({
        deployments: toArr(results[0].status === 'fulfilled' ? results[0].value : []).length,
        pods: toArr(results[1].status === 'fulfilled' ? results[1].value : []).length,
        services: toArr(results[2].status === 'fulfilled' ? results[2].value : []).length,
        ingresses: toArr(results[3].status === 'fulfilled' ? results[3].value : []).length,
        configmaps: toArr(results[4].status === 'fulfilled' ? results[4].value : []).length,
        secrets: toArr(results[5].status === 'fulfilled' ? results[5].value : []).length,
        hpas: toArr(results[6].status === 'fulfilled' ? results[6].value : []).length,
        cronjobs: toArr(results[7].status === 'fulfilled' ? results[7].value : []).length,
      });
    } catch { setCounts({}); } finally { setLoading(false); }
  }, [clusterCode, namespace]);

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

  return (
    <PageShell
      variant="default"
      title={namespace || i18n.t('kubernetes.namespace.title')}
      subtitle={`${clusterCode} · 命名空间概览`}
      icon={<Cloud className="h-5 w-5" />}
      loading={loading}
      loadingLabel={i18n.t('kubernetes.namespaceovervi.sfa525ae0')}
    >
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {RESOURCE_LINKS.map((r) => (
          <Link key={r.type}
            to={`/kubernetes/${clusterCode}/namespace/${namespace}/${r.type}`}
            className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg p-4 hover:border-[var(--dg-border-hover)] hover:bg-[var(--dg-bg-tertiary)]/50 transition-all group"
          >
            <div className="flex items-center justify-between mb-2">
              <r.icon className="h-5 w-5 text-[var(--dg-text-muted)] group-hover:text-[var(--dg-blue)] transition-colors" />
              <ChevronRight className="h-4 w-4 text-[var(--dg-text-muted)] group-hover:text-[var(--dg-text-secondary)] transition-colors" />
            </div>
            <div className="text-lg font-bold text-[var(--dg-text-primary)]">{loading ? '-' : (counts[r.type] ?? 0)}</div>
            <div className="text-sm text-[var(--dg-text-muted)]">{r.label}</div>
            <div className="text-xs text-[var(--dg-text-muted)] mt-1">{r.desc}</div>
          </Link>
        ))}
      </div>
    </PageShell>
  );
}