aiops/frontend/src/components/monitor/alert-center/MetricCatalogTab.tsx

// 监控指标目录 — 主机/中间件/站点拨测可采集指标 // Logan.Li
import { useEffect, useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Loader2, RefreshCw, Server, Database, Globe, Network } from 'lucide-react';
import { alertMetricsApi, type MetricCatalogCategory } from '@/api';

const CATEGORY_ORDER = ['host', 'middleware', 'snmp', 'site'];

const categoryIcons: Record<string, typeof Server> = {
  host: Server,
  middleware: Database,
  snmp: Network,
  site: Globe,
};

export function MetricCatalogTab() {
  const [categories, setCategories] = useState<MetricCatalogCategory[]>([]);
  const [loading, setLoading] = useState(true);
  const [activeCat, setActiveCat] = useState<string>('host');

  const load = async () => {
    setLoading(true);
    try {
      const data = await alertMetricsApi.getCatalog();
      const cats = (data as { categories?: MetricCatalogCategory[] })?.categories || [];
      setCategories(cats);
      if (cats.length > 0 && !cats.find(c => c.id === activeCat)) {
        setActiveCat(cats[0].id);
      }
    } catch { /* ignore */ } finally {
      setLoading(false);
    }
  };

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

  const current = categories.find(c => c.id === activeCat);

  if (loading) {
    return (
      <div className="flex justify-center py-16">
        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <p className="text-sm text-muted-foreground">
          主机 / 中间件 / SNMP / 站点拨测可采集指标，含默认告警阈值参考
        </p>
        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={load}>
          <RefreshCw className="h-3 w-3 mr-1" /> 刷新
        </Button>
      </div>

      <div className="flex flex-wrap gap-2">
        {[...categories].sort((a, b) => {
          const ai = CATEGORY_ORDER.indexOf(a.id);
          const bi = CATEGORY_ORDER.indexOf(b.id);
          return (ai < 0 ? 99 : ai) - (bi < 0 ? 99 : bi);
        }).map(cat => {
          const Icon = categoryIcons[cat.id] || Server;
          return (
            <Button
              key={cat.id}
              variant={activeCat === cat.id ? 'default' : 'outline'}
              size="sm"
              className="h-8 text-xs gap-1.5"
              onClick={() => setActiveCat(cat.id)}
            >
              <Icon className="h-3.5 w-3.5" />
              {cat.label}
              <Badge variant="secondary" className="text-[10px] h-4 px-1">{cat.metrics.length}</Badge>
            </Button>
          );
        })}
      </div>

      {current && (
        <Card>
          <CardContent className="p-4">
            <p className="text-xs text-muted-foreground mb-3">{current.description}</p>
            <div className="overflow-x-auto">
              <table className="w-full text-xs">
                <thead className="bg-muted/50">
                  <tr>
                    <th className="px-2 py-2 text-left font-medium">指标</th>
                    <th className="px-2 py-2 text-left font-medium">单位</th>
                    <th className="px-2 py-2 text-left font-medium">类型</th>
                    <th className="px-2 py-2 text-left font-medium">警告阈值</th>
                    <th className="px-2 py-2 text-left font-medium">严重阈值</th>
                    <th className="px-2 py-2 text-left font-medium">上限</th>
                    <th className="px-2 py-2 text-left font-medium">说明</th>
                  </tr>
                </thead>
                <tbody className="divide-y">
                  {current.metrics.map(m => (
                    <tr key={m.key} className="hover:bg-muted/30">
                      <td className="px-2 py-2">
                        <div className="font-medium">{m.label}</div>
                        <code className="text-[10px] text-muted-foreground">{m.key}</code>
                      </td>
                      <td className="px-2 py-2 text-muted-foreground">{m.unit || '—'}</td>
                      <td className="px-2 py-2">
                        <Badge variant="outline" className="text-[10px]">{m.type}</Badge>
                      </td>
                      <td className="px-2 py-2 dg-text-yellow">
                        {m.default_op} {m.default_warn}{m.unit && m.unit !== '' ? m.unit : ''}
                      </td>
                      <td className="px-2 py-2 dg-text-red">
                        {m.default_op} {m.default_crit}{m.unit && m.unit !== '' ? m.unit : ''}
                      </td>
                      <td className="px-2 py-2 text-muted-foreground">{m.max}</td>
                      <td className="px-2 py-2 text-muted-foreground max-w-[200px]">{m.description}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}