UI 扩展开发指南

from veaiops.metrics.base import DataSource

class PrometheusDataSource(DataSource):
    """Prometheus 数据源实现"""

    async def _fetch_one_slot(self, start_time, end_time):
        # 实现数据获取逻辑
        pass

{
  "openapi": "3.0.0",
  "info": {
    "title": "Prometheus API",
    "version": "1.0.0",
    "description": "Prometheus 数据源管理接口"
  },
  "paths": {
    "/apis/v1/datasource/prometheus/": {
      "get": {
        "summary": "Get All Prometheus Datasources",
        "tags": ["Data Sources"],
        "parameters": [
          {
            "name": "skip",
            "in": "query",
            "schema": { "type": "integer", "default": 0 }
          },
          {
            "name": "limit",
            "in": "query",
            "schema": { "type": "integer", "default": 100 }
          }
        ],
        "responses": {
          "200": {
            "description": "Success",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "items": {
                      "type": "array",
                      "items": { "$ref": "#/components/schemas/PrometheusDataSource" }
                    },
                    "total": { "type": "integer" }
                  }
                }
              }
            }
          }
        }
      }
    }
  },
  "components": {
    "schemas": {
      "PrometheusDataSource": {
        "type": "object",
        "properties": {
          "_id": { "type": "string" },
          "name": { "type": "string" },
          "prometheus_config": {
            "type": "object",
            "properties": {
              "server_url": { "type": "string" },
              "query_timeout": { "type": "integer" }
            }
          }
        }
      }
    }
  }
}

/**
 * Prometheus 数据源配置
 */
export interface PrometheusDataSource {
  _id: string;
  name: string;
  type: 'Prometheus';
  is_active: boolean;
  prometheus_config: {
    server_url: string;
    query_timeout?: number;
    basic_auth?: {
      username: string;
      password: string;
    };
  };
  description?: string;
  created_at: string;
  updated_at: string;
}

/**
 * Prometheus 表单数据
 */
export interface PrometheusFormData {
  name: string;
  server_url: string;
  query_timeout?: number;
  username?: string;
  password?: string;
  description?: string;
}

/**
 * 默认配置
 */
export const DEFAULT_QUERY_TIMEOUT = 30; // 秒

/**
 * 表单验证规则
 */
export const VALIDATION_RULES = {
  server_url: {
    required: true,
    pattern: /^https?:\/\/.+/,
    message: '请输入有效的 URL',
  },
  name: {
    required: true,
    message: '请输入数据源名称',
  },
};

import { DataSourcesService } from 'api-generate';
import type { PrometheusDataSource } from 'api-generate';

/**
 * 获取 Prometheus 数据源列表
 */
export const getPrometheusDataSources = async (params: {
  skip?: number;
  limit?: number;
  name?: string;
}) => {
  // 直接使用生成的服务，包含完整的类型支持
  const response = await DataSourcesService.getAllPrometheusDatasources({
    skip: params.skip,
    limit: params.limit,
    name: params.name,
  });

  return {
    data: response.items || [],
    total: response.total || 0,
    success: true,
  };
};

/**
 * 创建 Prometheus 数据源
 */
export const createPrometheusDataSource = async (data: {
  name: string;
  server_url: string;
  query_timeout?: number;
  description?: string;
}) => {
  return await DataSourcesService.createPrometheusDatasource({
    requestBody: {
      type: 'Prometheus',
      name: data.name,
      description: data.description,
      prometheus_config: {
        server_url: data.server_url,
        query_timeout: data.query_timeout || 30,
      },
    },
  });
};

/**
 * 删除 Prometheus 数据源
 */
export const deletePrometheusDataSource = async (id: string) => {
  return await DataSourcesService.deletePrometheusDatasource({ id });
};

/**
 * 测试 Prometheus 连接
 */
export const testPrometheusConnection = async (id: string) => {
  return await DataSourcesService.testPrometheusDatasource({ id });
};

import { Button, Tag, Space, Popconfirm } from '@arco-design/web-react';
import { IconEdit, IconDelete, IconLink } from '@arco-design/web-react/icon';
import type { ColumnProps } from '@arco-design/web-react/es/Table';
import { CellRender } from '@veaiops/components';
import type { PrometheusDataSource } from './types';

interface ColumnsProps {
  onEdit: (record: PrometheusDataSource) => void;
  onDelete: (id: string) => Promise<void>;
  onTest: (record: PrometheusDataSource) => void;
}

export const getPrometheusColumns = ({
  onEdit,
  onDelete,
  onTest,
}: ColumnsProps): ColumnProps<PrometheusDataSource>[] => [
  {
    title: '数据源名称',
    dataIndex: 'name',
    key: 'name',
    fixed: 'left' as const,
    width: 200,
    render: (name: string, record: PrometheusDataSource) => (
      <CellRender.InfoWithCode name={name} code={record._id} />
    ),
  },
  {
    title: 'Prometheus 地址',
    dataIndex: ['prometheus_config', 'server_url'],
    key: 'server_url',
    width: 300,
    render: (url: string) => <CellRender.Ellipsis text={url} />,
  },
  {
    title: '查询超时',
    dataIndex: ['prometheus_config', 'query_timeout'],
    key: 'query_timeout',
    width: 120,
    render: (timeout: number) => `${timeout || 30}s`,
  },
  {
    title: '认证方式',
    dataIndex: ['prometheus_config', 'basic_auth'],
    key: 'auth',
    width: 120,
    render: (auth: any) => (
      <Tag color={auth ? 'green' : 'gray'}>
        {auth ? 'Basic Auth' : '无认证'}
      </Tag>
    ),
  },
  {
    title: '描述',
    dataIndex: 'description',
    key: 'description',
    width: 200,
    render: (desc: string) => <CellRender.Ellipsis text={desc || '-'} />,
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    key: 'created_at',
    width: 180,
    render: (time: string) => <CellRender.StampTime time={time} />,
  },
  {
    title: '操作',
    key: 'actions',
    fixed: 'right' as const,
    width: 200,
    render: (_: any, record: PrometheusDataSource) => (
      <Space size="small">
        <Button
          type="text"
          size="small"
          icon={<IconLink />}
          onClick={() => onTest(record)}
        >
          测试连接
        </Button>
        <Button
          type="text"
          size="small"
          icon={<IconEdit />}
          onClick={() => onEdit(record)}
        >
          编辑
        </Button>
        <Popconfirm
          title="确定要删除这个数据源吗？"
          onOk={() => onDelete(record._id)}
        >
          <Button type="text" size="small" status="danger" icon={<IconDelete />}>
            删除
          </Button>
        </Popconfirm>
      </Space>
    ),
  },
];

import type { FilterConfig } from '@veaiops/components';

export const prometheusFilters: FilterConfig[] = [
  {
    field: 'name',
    label: '数据源名称',
    type: 'Input',
    componentProps: {
      placeholder: '请输入数据源名称',
      allowClear: true,
    },
  },
  {
    field: 'server_url',
    label: 'Prometheus 地址',
    type: 'Input',
    componentProps: {
      placeholder: '请输入 Prometheus 地址',
      allowClear: true,
    },
  },
];

import { useCallback } from 'react';
import { useBusinessTable } from '@veaiops/components';
import { Message } from '@arco-design/web-react';
import {
  getPrometheusDataSources,
  deletePrometheusDataSource,
} from '../lib/api';
import { getPrometheusColumns } from '../lib/columns';
import type { PrometheusDataSource } from '../lib/types';

export const usePrometheusTableConfig = ({
  onEdit,
  onTest,
}: {
  onEdit: (record: PrometheusDataSource) => void;
  onTest: (record: PrometheusDataSource) => void;
}) => {
  const request = useCallback(
    async (params: { current: number; pageSize: number; [key: string]: any }) => {
      const { current, pageSize, ...filters } = params;

      const response = await getPrometheusDataSources({
        skip: (current - 1) * pageSize,
        limit: pageSize,
        ...filters,
      });

      return {
        data: response.data,
        total: response.total || 0,
        success: true,
      };
    },
    [],
  );

  const handleDelete = useCallback(async (id: string) => {
    try {
      await deletePrometheusDataSource(id);
      Message.success('删除成功');
      return true;
    } catch (error) {
      Message.error('删除失败');
      return false;
    }
  }, []);

  const { customTableProps } = useBusinessTable({
    dataSource: { request },
    handlers: { delete: handleDelete },
    refreshConfig: {
      enableRefreshFeedback: true,
    },
  });

  const columns = useCallback(
    () => getPrometheusColumns({ onEdit, onDelete: handleDelete, onTest }),
    [onEdit, handleDelete, onTest],
  );

  return {
    ...customTableProps,
    handleColumns: columns,
  };
};

import { useState, useCallback } from 'react';
import { Form, Message } from '@arco-design/web-react';
import {
  createPrometheusDataSource,
  updatePrometheusDataSource,
  testPrometheusConnection,
} from '../lib/api';
import type { PrometheusDataSource, PrometheusFormData } from '../lib/types';

export const usePrometheusLogic = (refreshTable?: () => void) => {
  const [form] = Form.useForm();
  const [modalVisible, setModalVisible] = useState(false);
  const [editingDataSource, setEditingDataSource] =
    useState<PrometheusDataSource | null>(null);
  const [loading, setLoading] = useState(false);
  const [testing, setTesting] = useState(false);

  const handleAdd = useCallback(() => {
    setEditingDataSource(null);
    form.resetFields();
    setModalVisible(true);
  }, [form]);

  const handleEdit = useCallback(
    (record: PrometheusDataSource) => {
      setEditingDataSource(record);
      form.setFieldsValue({
        name: record.name,
        server_url: record.prometheus_config.server_url,
        query_timeout: record.prometheus_config.query_timeout,
        username: record.prometheus_config.basic_auth?.username,
        description: record.description,
      });
      setModalVisible(true);
    },
    [form],
  );

  const handleCancel = useCallback(() => {
    setModalVisible(false);
    setEditingDataSource(null);
    form.resetFields();
  }, [form]);

  const handleSubmit = useCallback(
    async (values: PrometheusFormData) => {
      setLoading(true);
      try {
        if (editingDataSource) {
          await updatePrometheusDataSource(editingDataSource._id, values);
          Message.success('更新成功');
        } else {
          await createPrometheusDataSource(values);
          Message.success('创建成功');
        }
        handleCancel();
        refreshTable?.();
      } catch (error) {
        Message.error(editingDataSource ? '更新失败' : '创建失败');
      } finally {
        setLoading(false);
      }
    },
    [editingDataSource, handleCancel, refreshTable],
  );

  const handleTest = useCallback(
    async (record: PrometheusDataSource) => {
      setTesting(true);
      try {
        const result = await testPrometheusConnection({
          server_url: record.prometheus_config.server_url,
          username: record.prometheus_config.basic_auth?.username,
          password: '', // 不传密码，使用已保存的
        });

        if (result.success) {
          Message.success('连接测试成功');
        } else {
          Message.error(`连接测试失败: ${result.message}`);
        }
      } catch (error) {
        Message.error('连接测试失败');
      } finally {
        setTesting(false);
      }
    },
    [],
  );

  return {
    modalVisible,
    editingDataSource,
    form,
    loading,
    testing,
    handleAdd,
    handleEdit,
    handleCancel,
    handleSubmit,
    handleTest,
  };
};

import { forwardRef } from 'react';
import { CustomTable, Filters } from '@veaiops/components';
import { Button, Card } from '@arco-design/web-react';
import { IconPlus } from '@arco-design/web-react/icon';
import { usePrometheusTableConfig } from '../hooks';
import { prometheusFilters } from '../lib/filters';
import type { PrometheusDataSource } from '../lib/types';

interface PrometheusTableProps {
  onEdit: (record: PrometheusDataSource) => void;
  onAdd: () => void;
  onTest: (record: PrometheusDataSource) => void;
}

export const PrometheusTable = forwardRef<any, PrometheusTableProps>(
  (props, ref) => {
    const { onEdit, onAdd, onTest } = props;

    const tableConfig = usePrometheusTableConfig({ onEdit, onTest });

    return (
      <Card
        title="Prometheus 数据源管理"
        extra={
          <Button type="primary" icon={<IconPlus />} onClick={onAdd}>
            新增数据源
          </Button>
        }
      >
        <Filters config={prometheusFilters} showReset />
        <CustomTable
          {...tableConfig}
          ref={ref}
          rowKey="_id"
          scroll={{ x: 1400 }}
        />
      </Card>
    );
  },
);

PrometheusTable.displayName = 'PrometheusTable';

import {
  Modal,
  Form,
  Input,
  InputNumber,
  TextArea,
} from '@arco-design/web-react';
import type { FormInstance } from '@arco-design/web-react';
import { VALIDATION_RULES, DEFAULT_QUERY_TIMEOUT } from '../lib/constants';
import type { PrometheusFormData } from '../lib/types';

interface PrometheusModalProps {
  visible: boolean;
  form: FormInstance;
  loading: boolean;
  isEdit: boolean;
  onCancel: () => void;
  onSubmit: (values: PrometheusFormData) => void;
}

export const PrometheusModal = ({
  visible,
  form,
  loading,
  isEdit,
  onCancel,
  onSubmit,
}: PrometheusModalProps) => {
  return (
    <Modal
      title={isEdit ? '编辑 Prometheus 数据源' : '新增 Prometheus 数据源'}
      visible={visible}
      onOk={() => form.submit()}
      onCancel={onCancel}
      confirmLoading={loading}
      maskClosable={false}
    >
      <Form
        form={form}
        layout="vertical"
        onSubmit={onSubmit}
        autoComplete="off"
      >
        <Form.Item
          label="数据源名称"
          field="name"
          rules={[VALIDATION_RULES.name]}
        >
          <Input placeholder="请输入数据源名称" />
        </Form.Item>

        <Form.Item
          label="Prometheus 服务地址"
          field="server_url"
          rules={[VALIDATION_RULES.server_url]}
        >
          <Input placeholder="http://prometheus.example.com:9090" />
        </Form.Item>

        <Form.Item
          label="查询超时时间 (秒)"
          field="query_timeout"
          initialValue={DEFAULT_QUERY_TIMEOUT}
        >
          <InputNumber
            placeholder="请输入超时时间"
            min={1}
            max={300}
            style={{ width: '100%' }}
          />
        </Form.Item>

        <Form.Item label="用户名 (可选)" field="username">
          <Input placeholder="Basic Auth 用户名" />
        </Form.Item>

        <Form.Item label="密码 (可选)" field="password">
          <Input.Password placeholder="Basic Auth 密码" />
        </Form.Item>

        <Form.Item label="描述" field="description">
          <TextArea
            placeholder="请输入数据源描述"
            rows={3}
            maxLength={200}
            showWordLimit
          />
        </Form.Item>
      </Form>
    </Modal>
  );
};

import { useRef } from 'react';
import { PrometheusTable } from './prometheus-table';
import { PrometheusModal } from './prometheus-modal';
import { usePrometheusLogic } from '../hooks';

export const PrometheusManagement = () => {
  const tableRef = useRef<any>(null);

  const {
    modalVisible,
    editingDataSource,
    form,
    loading,
    handleAdd,
    handleEdit,
    handleCancel,
    handleSubmit,
    handleTest,
  } = usePrometheusLogic(() => tableRef.current?.refresh());

  return (
    <>
      <PrometheusTable
        ref={tableRef}
        onAdd={handleAdd}
        onEdit={handleEdit}
        onTest={handleTest}
      />
      <PrometheusModal
        visible={modalVisible}
        form={form}
        loading={loading}
        isEdit={!!editingDataSource}
        onCancel={handleCancel}
        onSubmit={handleSubmit}
      />
    </>
  );
};

export default PrometheusManagement;

export { PrometheusManagement } from './ui';
export * from './hooks';
export * from './lib/types';
export * from './lib/constants';

import { lazy } from 'react';

const PrometheusManagement = lazy(
  () => import('@/modules/system/features/prometheus/ui/prometheus-management'),
);

const PrometheusPage = () => {
  return <PrometheusManagement />;
};

export default PrometheusPage;

export const systemRoutes = [
  // ... 其他路由
  {
    path: '/system/datasource/prometheus',
    element: React.createElement(pageConfig.system.Prometheus),
    title: 'Prometheus 数据源',
    requireAuth: true,
  },
];

{
  "openapi": "3.0.0",
  "info": {
    "title": "Prometheus API",
    "version": "1.0.0",
    "description": "Prometheus 数据源管理接口"
  },
  "paths": {
    "/apis/v1/datasource/prometheus/": {
      "get": {
        "summary": "Get All Prometheus Datasources",
        "description": "获取所有 Prometheus 数据源",
        "tags": ["Data Sources"],
        "parameters": [
          {
            "name": "skip",
            "in": "query",
            "required": false,
            "schema": {
              "type": "integer",
              "default": 0
            }
          },
          {
            "name": "limit",
            "in": "query",
            "required": false,
            "schema": {
              "type": "integer",
              "default": 100
            }
          }
        ],
        "responses": {
          "200": {
            "description": "Successful Response",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "items": {
                      "type": "array",
                      "items": {
                        "$ref": "#/components/schemas/PrometheusDataSource"
                      }
                    },
                    "total": {
                      "type": "integer"
                    }
                  }
                }
              }
            }
          }
        }
      },
      "post": {
        "summary": "Create Prometheus Datasource",
        "description": "创建新的 Prometheus 数据源",
        "tags": ["Data Sources"],
        "requestBody": {
          "required": true,
          "content": {
            "application/json": {
              "schema": {
                "$ref": "#/components/schemas/PrometheusDataSourceCreate"
              }
            }
          }
        },
        "responses": {
          "200": {
            "description": "Successful Response",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/PrometheusDataSource"
                }
              }
            }
          }
        }
      }
    }
  },
  "components": {
    "schemas": {
      "PrometheusDataSource": {
        "type": "object",
        "properties": {
          "_id": {
            "type": "string"
          },
          "name": {
            "type": "string"
          },
          "type": {
            "type": "string",
            "enum": ["Prometheus"]
          },
          "prometheus_config": {
            "$ref": "#/components/schemas/PrometheusConfig"
          },
          "created_at": {
            "type": "string",
            "format": "date-time"
          }
        }
      },
      "PrometheusConfig": {
        "type": "object",
        "properties": {
          "server_url": {
            "type": "string"
          },
          "query_timeout": {
            "type": "integer"
          }
        }
      },
      "PrometheusDataSourceCreate": {
        "type": "object",
        "required": ["name", "type", "prometheus_config"],
        "properties": {
          "name": {
            "type": "string"
          },
          "type": {
            "type": "string",
            "enum": ["Prometheus"]
          },
          "prometheus_config": {
            "$ref": "#/components/schemas/PrometheusConfig"
          }
        }
      }
    }
  }
}

/**
 * 机器人数据结构
 */
export interface Bot {
  _id: string;
  bot_id: string;
  name: string;
  channel: 'Lark' | 'DingTalk' | 'WeCom';
  open_id?: string;
  is_active: boolean;
  created_at: string;
  updated_at: string;
}

/**
 * 创建/更新机器人的表单数据
 */
export interface BotFormData {
  name: string;
  bot_id: string;
  bot_secret: string;
  channel: string;
  // ... 其他字段
}

import { Button } from '@arco-design/web-react';
import { IconEdit, IconDelete } from '@arco-design/web-react/icon';
import type { ColumnProps } from '@arco-design/web-react/es/Table';
import { CellRender, ButtonGroupRender } from '@veaiops/components';
import type { Bot } from './types';

interface TableColumnsProps {
  onEdit: (bot: Bot) => void;
  onDelete: (botId: string) => void;
}

export const getBotColumns = ({
  onEdit,
  onDelete,
}: TableColumnsProps): ColumnProps<Bot>[] => [
  {
    title: 'App ID',
    dataIndex: 'bot_id',
    key: 'bot_id',
    width: 200,
    ellipsis: true,
  },
  {
    title: '群聊机器人名称',
    dataIndex: 'name',
    key: 'name',
    width: 150,
    render: (name: string, record: Bot) => (
      <CellRender.InfoWithCode name={name} code={record._id} />
    ),
  },
  {
    title: 'Open ID',
    dataIndex: 'open_id',
    key: 'open_id',
    width: 200,
    render: (openId: string) => openId || '-',
  },
  {
    title: '操作',
    key: 'actions',
    width: 120,
    fixed: 'right' as const,
    render: (_: unknown, record: Bot) => (
      <ButtonGroupRender
        buttonConfigurations={[
          {
            text: '编辑',
            visible: true,
            onClick: () => onEdit(record),
            buttonProps: {
              type: 'text',
              size: 'small',
              icon: <IconEdit />,
            },
            tooltip: '编辑配置',
          },
          {
            text: '删除',
            visible: true,
            supportPopConfirm: true,
            popConfirmTitle: '确认删除',
            popConfirmContent: '确定要删除吗？',
            onClick: () => onDelete(record._id!),
            buttonProps: {
              type: 'text',
              size: 'small',
              status: 'danger',
              icon: <IconDelete />,
            },
          },
        ]}
      />
    ),
  },
];

import type { FilterConfig } from '@veaiops/components';

export const botFilters: FilterConfig[] = [
  {
    field: 'name',
    label: '机器人名称',
    type: 'Input',
    componentProps: {
      placeholder: '请输入机器人名称',
      allowClear: true,
    },
  },
  {
    field: 'channel',
    label: '渠道类型',
    type: 'Select',
    componentProps: {
      placeholder: '请选择渠道',
      options: [
        { label: '飞书', value: 'Lark' },
        { label: '钉钉', value: 'DingTalk' },
        { label: '企业微信', value: 'WeCom' },
      ],
      allowClear: true,
    },
  },
];

import { useCallback } from 'react';
import { useBusinessTable } from '@veaiops/components';
import { Message } from '@arco-design/web-react';
import { getBots, deleteBot } from '../lib/api';
import { getBotColumns } from '../lib/columns';
import type { Bot } from '../lib/types';

export const useBotTableConfig = ({
  onEdit,
}: {
  onEdit: (bot: Bot) => void;
}) => {
  // API 请求函数
  const request = useCallback(
    async (params: { current: number; pageSize: number; [key: string]: any }) => {
      const { current, pageSize, ...filters } = params;

      const response = await getBots({
        skip: (current - 1) * pageSize,
        limit: pageSize,
        ...filters,
      });

      return {
        data: response.data,
        total: response.total || 0,
        success: true,
      };
    },
    [],
  );

  // 删除处理
  const handleDelete = useCallback(async (id: string) => {
    try {
      await deleteBot(id);
      Message.success('删除成功');
      return true;
    } catch (error) {
      Message.error('删除失败');
      return false;
    }
  }, []);

  // 使用 useBusinessTable
  const { customTableProps } = useBusinessTable({
    dataSource: { request },
    handlers: {
      delete: handleDelete,
    },
    refreshConfig: {
      enableRefreshFeedback: true,
    },
  });

  // 获取列配置
  const columns = useCallback(
    () => getBotColumns({ onEdit, onDelete: handleDelete }),
    [onEdit, handleDelete],
  );

  return {
    ...customTableProps,
    handleColumns: columns,
  };
};