aiops/frontend/src/components/monitor/datasource/PrometheusDatasourceManager.tsx

// Prometheus 数据源管理 — 列表编排器 // Logan.Li
import { useState, useEffect } from 'react';
import {
  Database,
  Plus,
  Edit,
  Trash2,
  Star,
  RefreshCw,
  Key,
  Plug,
} from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';

import { toast } from 'sonner';
import { useConfirm } from '@/components/ui/confirm-dialog';
import { usePromDatasources, usePromDatasourceMutations } from '@/hooks/api';

import type { PromDS } from './prometheus-ds/types';
import { handleTestQuick } from './prometheus-ds/helpers';
import PromDsFormDialog from './prometheus-ds/PromDsFormDialog';
import { PageLoading } from '@/components/layout/PageLoading';
import { PageEmpty } from '@/components/layout/PageEmpty';
import { ContentPanel } from '@/components/layout/ContentPanel';

export default function PrometheusDatasourceManager() {
  const _confirm = useConfirm();
  const { data: sources = [], isLoading, isError } = usePromDatasources();
  const { deleteMutation, setDefaultMutation } = usePromDatasourceMutations();

  const [dialogOpen, setDialogOpen] = useState(false);
  const [editingDs, setEditingDs] = useState<PromDS | null>(null);

  useEffect(() => {
    if (isError) toast.error('获取数据源列表失败');
  }, [isError]);

  const openCreate = () => {
    setEditingDs(null);
    setDialogOpen(true);
  };

  const openEdit = (ds: PromDS) => {
    setEditingDs(ds);
    setDialogOpen(true);
  };

  const handleDelete = async (ds: PromDS) => {
    const ok = await _confirm({
      title: '删除数据源',
      description: `确定删除数据源「${ds.name}」吗？此操作不可撤销。`,
      variant: 'destructive',
    });
    if (!ok) return;
    try {
      await deleteMutation.mutateAsync(ds.id);
      toast.success('已删除');
    } catch {
      toast.error('删除失败');
    }
  };

  const handleSetDefault = async (ds: PromDS) => {
    try {
      await setDefaultMutation.mutateAsync(ds.id);
      toast.success(`已将「${ds.name}」设为默认数据源`);
    } catch {
      toast.error('设置失败');
    }
  };

  if (isLoading) {
    return <PageLoading />;
  }

  const toolbar = (
    <div className="flex items-center justify-between w-full">
      <span className="text-sm dg-text-secondary flex items-center gap-2">
        <Database className="w-4 h-4 dg-text-blue" />
        Prometheus 数据源
        <Badge variant="secondary" className="dg-badge-muted">{sources.length}</Badge>
      </span>
      <Button onClick={openCreate} size="sm" className="dg-btn-primary">
        <Plus className="w-4 h-4 mr-1" />
        添加数据源
      </Button>
    </div>
  );

  return (
    <div className="space-y-4">
      <ContentPanel toolbar={toolbar} noPadding>
        {sources.length === 0 ? (
          <PageEmpty
            icon={<Database className="h-12 w-12" />}
            title="暂无 Prometheus 数据源"
            description="添加数据源后可用于指标监控与监控大屏"
            action={(
              <Button onClick={openCreate} size="sm" className="dg-btn-primary">
                <Plus className="w-4 h-4 mr-1" />添加数据源
              </Button>
            )}
          />
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="border-b border-[var(--border-default)]">
                <tr className="text-xs dg-text-secondary">
                  <th className="text-left py-3 px-4 font-medium">名称</th>
                  <th className="text-left py-3 px-4 font-medium">URL</th>
                  <th className="text-left py-3 px-4 font-medium w-20">默认</th>
                  <th className="text-left py-3 px-4 font-medium w-16">状态</th>
                  <th className="text-right py-3 px-4 font-medium w-36">操作</th>
                </tr>
              </thead>
              <tbody>
                {sources.map(ds => (
                  <tr
                    key={ds.id}
                    className="dg-table-row border-b border-[var(--border-subtle)]"
                  >
                    <td className="py-3 px-4">
                      <div className="flex items-center gap-2">
                        <img
                          src="https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/prometheus.png"
                          alt="Prometheus"
                          className="w-5 h-5 rounded"
                          onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
                        />
                        <div>
                          <span className="text-sm font-medium text-[var(--text-primary)]">{ds.name}</span>
                          {ds.basic_auth && <Key className="w-3 h-3 inline ml-1.5 dg-text-yellow" />}
                        </div>
                      </div>
                    </td>
                    <td className="py-3 px-4">
                      <code className="text-xs dg-text-blue bg-[var(--surface-inset)] px-2 py-0.5 rounded max-w-[320px] block truncate"
                        title={ds.url}>
                        {ds.url}
                      </code>
                    </td>
                    <td className="py-3 px-4">
                      {ds.is_default ? (
                        <span className="dg-badge-yellow"><Star className="w-3 h-3 mr-1 inline" />默认</span>
                      ) : (
                        <span className="text-xs dg-text-muted">--</span>
                      )}
                    </td>
                    <td className="py-3 px-4">
                      {ds.status === 1 ? (
                        <span className="dg-status-running">启用</span>
                      ) : (
                        <span className="dg-badge-muted">禁用</span>
                      )}
                    </td>
                    <td className="py-3 px-4">
                      <div className="flex items-center justify-end gap-1">
                        <Button
                          variant="ghost" size="sm"
                          className="h-8 px-2"
                          onClick={() => handleTestQuick(ds)}
                          title="测试连接"
                        >
                          <Plug className="w-3.5 h-3.5" />
                        </Button>
                        {!ds.is_default && (
                          <Button
                            variant="ghost" size="sm"
                            className="h-8 px-2 dg-text-yellow"
                            onClick={() => handleSetDefault(ds)}
                            title="设为默认"
                          >
                            <Star className="w-3.5 h-3.5" />
                          </Button>
                        )}
                        <Button
                          variant="ghost" size="sm"
                          className="h-8 px-2"
                          onClick={() => openEdit(ds)}
                        >
                          <Edit className="w-3.5 h-3.5" />
                        </Button>
                        <Button
                          variant="ghost" size="sm"
                          className="h-8 px-2 dg-text-red hover:dg-text-red"
                          onClick={() => handleDelete(ds)}
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                        </Button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </ContentPanel>

      <PromDsFormDialog
        open={dialogOpen}
        onOpenChange={setDialogOpen}
        editingDs={editingDs}
        sources={sources}
      />
    </div>
  );
}