feat(notify): 增加报警模板功能

- 在报警组接口中添加模板相关字段 - 实现报警组编辑模态框的模板选择功能 - 优化数据源编辑模态框，添加请求头、请求参数等配置项 - 在通知组选项中添加模板选择功能
aide-family · Jan 13, 2025 · 83a7d57 · 83a7d57
1 parent 048cf37
commit 83a7d57
Show file tree

Hide file tree

Showing 5 changed files with 168 additions and 35 deletions.
diff --git a/src/api/model-types.ts b/src/api/model-types.ts
@@ -652,6 +652,8 @@ export interface AlarmNoticeGroupItem {
   hooks: AlarmHookItem[]
   /** 时间引擎 */
   timeEngines: TimeEngineItem[]
+  /** 模板 */
+  templates: SendTemplateItem[]
 }
 
 /** 通知人 */

diff --git a/src/api/notify/alarm-group.ts b/src/api/notify/alarm-group.ts
@@ -86,6 +86,7 @@ export interface CreateAlarmGroupRequest {
   noticeMember: NoticeMember[]
   hookIds: number[]
   timeEngines: number[]
+  templates: number[]
 }
 export interface CreateAlarmGroupReply {}
 

diff --git a/src/pages/datasource/metric/edit-modal.tsx b/src/pages/datasource/metric/edit-modal.tsx
@@ -9,70 +9,79 @@ import { DatasourceType, Status, StorageType } from '@/api/enum'
 import { StatusData } from '@/api/global'
 import { DataFrom, type DataFromItem } from '@/components/data/form'
 import { Prometheus, VictoriaMetrics } from '@/components/icon'
-import { CheckCircleTwoTone, CloseCircleTwoTone } from '@ant-design/icons'
-import { Col, Form, Input, Modal, type ModalProps, Row, Space, message } from 'antd'
+import { CheckCircleTwoTone, CloseCircleTwoTone, MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
+import { useRequest } from 'ahooks'
+import { Button, Col, Form, Input, Modal, type ModalProps, Radio, Row, Space, message, theme } from 'antd'
 import React, { useCallback, useEffect, useState } from 'react'
 
 export interface EditModalProps extends ModalProps {
   datasourceId?: number
+  onOk?: () => void
 }
 
-let timer: NodeJS.Timeout | null = null
+const { useToken } = theme
+
 export const EditModal: React.FC<EditModalProps> = (props) => {
+  const { token } = useToken()
   const { onCancel, onOk, open, datasourceId } = props
   const [form] = Form.useForm<CreateDatasourceRequestFormData>()
   const [loading, setLoading] = React.useState(false)
   const [dataSourceHealthStatus, setDataSourceHealth] = useState(false)
-  const handleOnOk = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+
+  const { run: getDatasourceDetail, loading: getDatasourceDetailLoading } = useRequest(getDatasource, {
+    manual: true,
+    onSuccess: ({ detail }) => {
+      let config: Record<string, string> = {}
+      try {
+        config = JSON.parse(detail.config)
+      } catch (error) {
+        message.error('数据源配置解析失败，请检查配置')
+      }
+      form.setFieldsValue({ ...detail, config })
+    }
+  })
+
+  const { run: updateDatasourceDetail, loading: updateDatasourceDetailLoading } = useRequest(updateDatasource, {
+    manual: true,
+    onSuccess: () => {
+      form.resetFields()
+      onOk?.()
+    }
+  })
+
+  const { run: createDatasourceDetail, loading: createDatasourceDetailLoading } = useRequest(createDatasource, {
+    manual: true,
+    onSuccess: () => {
+      form.resetFields()
+      onOk?.()
+    }
+  })
+
+  const handleOnOk = () => {
     form.validateFields().then((values) => {
       const newValues = {
         ...values,
         datasourceType: DatasourceType.DatasourceTypeMetric
       }
       setLoading(true)
       if (datasourceId) {
-        updateDatasource({ ...newValues, id: datasourceId, config: JSON.stringify(values.config) })
-          .then(() => {
-            form.resetFields()
-            onOk?.(e)
-          })
-          .finally(() => setLoading(false))
+        updateDatasourceDetail({ ...newValues, id: datasourceId, config: JSON.stringify(values.config) })
         return
       }
       if (!dataSourceHealthStatus) {
         message.error('数据源地址测试失败，请检查配置')
         setLoading(false)
         return
       }
-      createDatasource({ ...newValues, config: JSON.stringify(values.config) })
-        .then(() => {
-          form.resetFields()
-          onOk?.(e)
-        })
-        .finally(() => setLoading(false))
+      createDatasourceDetail({ ...newValues, config: JSON.stringify(values.config) })
       return values
     })
   }
 
   const handleGetDatasource = useCallback(() => {
     if (!datasourceId) return
-    if (timer) clearTimeout(timer)
-    timer = setTimeout(() => {
-      getDatasource({ id: datasourceId })
-        .then(({ detail }) => {
-          let config: Record<string, string> = {}
-          try {
-            config = JSON.parse(detail.config)
-          } catch (error) {
-            message.error('数据源配置解析失败，请检查配置')
-          }
-          form.setFieldsValue({ ...detail, config })
-        })
-        .finally(() => {
-          setLoading(false)
-        })
-    }, 500)
-  }, [datasourceId, form])
+    getDatasourceDetail({ id: datasourceId })
+  }, [datasourceId, getDatasourceDetail])
 
   useEffect(() => {
     if (open) {
@@ -200,9 +209,74 @@ export const EditModal: React.FC<EditModalProps> = (props) => {
       open={open}
       onCancel={handleOnCancel}
       onOk={handleOnOk}
-      confirmLoading={loading}
+      confirmLoading={loading || updateDatasourceDetailLoading || createDatasourceDetailLoading}
+      loading={getDatasourceDetailLoading}
     >
       <DataFrom props={{ form, layout: 'vertical' }} items={formItems}>
+        <Form.Item label='请求头'>
+          <Form.List name={['config', 'headers']}>
+            {(fields, { add, remove }) => {
+              return (
+                <div key={fields.length} className='w-full'>
+                  {fields.map(({ key, name, ...restField }) => {
+                    return (
+                      <Row gutter={12}>
+                        <Col span={12} key={key}>
+                          <Form.Item {...restField} name={[name, 'key']} label={['headers', name, 'key'].join('.')}>
+                            <Input placeholder='请输入请求头KEY' />
+                          </Form.Item>
+                        </Col>
+                        <Col span={11} key={key}>
+                          <Form.Item {...restField} name={[name, 'value']} label={['headers', name, 'value'].join('.')}>
+                            <Input placeholder='请输入请求头VALUE' />
+                          </Form.Item>
+                        </Col>
+                        <Col span={1} className='flex items-center justify-center'>
+                          <MinusCircleOutlined onClick={() => remove(name)} style={{ color: token.colorError }} />
+                        </Col>
+                      </Row>
+                    )
+                  })}
+                  <Button type='dashed' onClick={() => add()} block icon={<PlusOutlined />}>
+                    添加新请求头
+                  </Button>
+                </div>
+              )
+            }}
+          </Form.List>
+        </Form.Item>
+        <Form.Item label='请求参数'>
+          <Form.List name={['config', 'params']}>
+            {(fields, { add, remove }) => {
+              return (
+                <div key={fields.length}>
+                  {fields.map(({ key, name, ...restField }) => {
+                    return (
+                      <Row gutter={12}>
+                        <Col span={12} key={key}>
+                          <Form.Item {...restField} name={[name, 'key']} label={['params', name, 'key'].join('.')}>
+                            <Input placeholder='请输入请求参数KEY' />
+                          </Form.Item>
+                        </Col>
+                        <Col span={11} key={key}>
+                          <Form.Item {...restField} name={[name, 'value']} label={['params', name, 'value'].join('.')}>
+                            <Input placeholder='请输入请求参数VALUE' />
+                          </Form.Item>
+                        </Col>
+                        <Col span={1} className='flex items-center justify-center'>
+                          <MinusCircleOutlined onClick={() => remove(name)} style={{ color: token.colorError }} />
+                        </Col>
+                      </Row>
+                    )
+                  })}
+                  <Button type='dashed' onClick={() => add()} block icon={<PlusOutlined />}>
+                    添加新请求参数
+                  </Button>
+                </div>
+              )
+            }}
+          </Form.List>
+        </Form.Item>
         <Form.Item label='基础认证配置'>
           <Row gutter={16}>
             <Col span={12}>
@@ -217,6 +291,38 @@ export const EditModal: React.FC<EditModalProps> = (props) => {
             </Col>
           </Row>
         </Form.Item>
+        <Form.Item name={['config', 'selfCACert']} label='自签证书'>
+          <Input placeholder='请输入自签证书' />
+        </Form.Item>
+        <Form.Item label='TLS'>
+          <Row gutter={16}>
+            <Col span={12}>
+              <Form.Item name={['config', 'serverName']} label='服务名'>
+                <Input placeholder='请输入服务名' />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item name={['config', 'skipVerify']} label='跳过验证'>
+                <Radio.Group
+                  options={[
+                    { label: '是', value: true },
+                    { label: '否', value: false }
+                  ]}
+                />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item name={['config', 'clientCert']} label='客户端证书'>
+                <Input placeholder='请输入客户端证书' />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item name={['config', 'clientKey']} label='客户端密钥'>
+                <Input placeholder='请输入客户端密钥' />
+              </Form.Item>
+            </Col>
+          </Row>
+        </Form.Item>
       </DataFrom>
     </Modal>
   )

diff --git a/src/pages/notify/group/modal-edit.tsx b/src/pages/notify/group/modal-edit.tsx
@@ -60,7 +60,8 @@ export const GroupEditModal: React.FC<GroupEditModalProps> = (props) => {
         ...groupDetail,
         hookIds: groupDetail?.hooks?.map((item) => item.id),
         noticeMember: groupDetail?.noticeUsers,
-        timeEngines: groupDetail?.timeEngines?.map((item) => item.id)
+        timeEngines: groupDetail?.timeEngines?.map((item) => item.id),
+        templates: groupDetail?.templates?.map((item) => item.id)
       })
       return
     }

diff --git a/src/pages/notify/group/options.tsx b/src/pages/notify/group/options.tsx
@@ -2,6 +2,7 @@ import { Status } from '@/api/enum'
 import { ActionKey, HookAppData, StatusData, defaultPaginationReq } from '@/api/global'
 import type { AlarmHookItem, AlarmNoticeGroupItem } from '@/api/model-types'
 import { listHook } from '@/api/notify/hook'
+import { getTemplateList } from '@/api/notify/template'
 import { listTimeEngine } from '@/api/notify/time-engine'
 import type { DataFromItem } from '@/components/data/form'
 import type { SearchFormItem } from '@/components/data/search-box'
@@ -245,5 +246,27 @@ export const editModalFormItems: (DataFromItem | DataFromItem[])[] = [
         mode: 'multiple'
       }
     }
+  },
+  {
+    name: 'templates',
+    label: '模板',
+    type: 'select-fetch',
+    props: {
+      handleFetch: (value: string) => {
+        return getTemplateList({
+          keyword: value,
+          pagination: defaultPaginationReq
+        }).then((res) =>
+          res.list.map((item) => ({
+            label: item.name,
+            value: item.id
+          }))
+        )
+      },
+      selectProps: {
+        placeholder: '请选择模板',
+        mode: 'multiple'
+      }
+    }
   }
 ]