From 66fe8bf73cfa0da4dd5bb27ca43465b14597739c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A2=A7=E6=A1=90?= <1058165620@qq.com> Date: Sat, 14 Dec 2024 18:24:02 +0800 Subject: [PATCH] =?UTF-8?q?feat(strategy):=20=E6=96=B0=E5=A2=9E=E5=9F=9F?= =?UTF-8?q?=E5=90=8D=E8=AF=81=E4=B9=A6=E5=92=8C=E7=AB=AF=E5=8F=A3=E7=AD=96?= =?UTF-8?q?=E7=95=A5=E7=BC=96=E8=BE=91=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 添加 DomainEditModal 组件用于编辑域名证书策略 - 添加 PortEditModal 组件用于编辑端口策略 - 在 StrategyMetric 组件中集成新编辑器，支持不同类型策略的编辑 - 重构 EventEditModal 组件，统一策略编辑界面样式和逻辑 --- src/pages/strategy/list/domain-edit-modal.tsx | 478 ++++++++++++++++++ ...nt-edit.modal.tsx => event-edit-modal.tsx} | 0 src/pages/strategy/list/index.tsx | 55 +- src/pages/strategy/list/port-edit-modal.tsx | 476 +++++++++++++++++ 4 files changed, 1006 insertions(+), 3 deletions(-) create mode 100644 src/pages/strategy/list/domain-edit-modal.tsx rename src/pages/strategy/list/{event-edit.modal.tsx => event-edit-modal.tsx} (100%) create mode 100644 src/pages/strategy/list/port-edit-modal.tsx diff --git a/src/pages/strategy/list/domain-edit-modal.tsx b/src/pages/strategy/list/domain-edit-modal.tsx new file mode 100644 index 0000000..3e0c806 --- /dev/null +++ b/src/pages/strategy/list/domain-edit-modal.tsx @@ -0,0 +1,478 @@ +import { Condition, Status } from '@/api/enum' +import { ConditionData, defaultPaginationReq } from '@/api/global' +import { StrategyItem } from '@/api/model-types' +import { + createStrategy, + CreateStrategyRequest, + parseEventStrategyDetailToFormData, + updateStrategy +} from '@/api/strategy' +import { AnnotationsEditor } from '@/components/data/child/annotation-editor' +import { + useAlarmLevelList, + useAlarmNoticeGroupList, + useAlarmPageList, + useStrategyCategoryList, + useStrategyGroupList +} from '@/hooks/select' +import { useSubmit } from '@/hooks/submit' +import { MinusCircleOutlined, PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons' +import { + Button, + Card, + Col, + Form, + Input, + InputNumber, + Modal, + ModalProps, + Popover, + Row, + Select, + Space, + theme, + Typography +} from 'antd' +import { useEffect, useState } from 'react' + +export interface DomainEditModalProps extends ModalProps { + strategyDetail?: StrategyItem +} + +export const DomainEditModal: React.FC = (props) => { + const { strategyDetail, ...restProps } = props + + const { token } = theme.useToken() + const [form] = Form.useForm() + const [loading, setLoading] = useState(false) + const { strategyGroupList, strategyGroupListLoading } = useStrategyGroupList({ + pagination: defaultPaginationReq + }) + const { strategyCategoryList, strategyCategoryListLoading } = useStrategyCategoryList({ + pagination: defaultPaginationReq + }) + const { alarmGroupList, alarmGroupListLoading } = useAlarmNoticeGroupList({ + pagination: defaultPaginationReq + }) + const { alarmPageList, alarmPageListLoading } = useAlarmPageList({ + pagination: defaultPaginationReq + }) + const { alarmLevelList, alarmLevelListLoading } = useAlarmLevelList({ + pagination: defaultPaginationReq + }) + const { submit } = useSubmit(updateStrategy, createStrategy, strategyDetail?.id) + + const [descriptionOkInfo] = useState<{ + info: string + labels?: string[] + }>({ + info: '' + }) + const [summaryOkInfo] = useState<{ + info: string + labels?: string[] + }>({ + info: '' + }) + + const handleSubmit = () => { + setLoading(true) + form + .validateFields() + .then((values) => { + if (strategyDetail) { + return submit({ data: values, id: strategyDetail?.id }) + } else { + return submit(values) + } + }) + .finally(() => { + setLoading(false) + }) + } + + useEffect(() => { + if (restProps.open) { + if (strategyDetail) { + form.setFieldsValue(parseEventStrategyDetailToFormData(strategyDetail)) + } else { + form.resetFields() + } + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [strategyDetail, restProps.open]) + + return ( + +
+ + + + + + + + + + + + + + 标签kv集合} required> + + {(fields, { add, remove }) => ( +
+ + {fields.map(({ key, name, ...restField }) => ( + + + + + + + + + + + + + remove(name)} style={{ color: token.colorError }} /> + + + + + ))} + + +
+ )} + + + 注解} required> + + 告警摘要 + + {summaryOkInfo.info} + + } + > + + + + } + rules={[{ required: true, message: '请输入告警摘要' }]} + > + + + + 告警明细 + + {descriptionOkInfo.info} + + } + > + + + + } + rules={[{ required: true, message: '请输入告警明细' }]} + > + + + + 告警等级} required> + + {(fields, { add, remove }) => ( +
+ {fields.map((field) => ( + { + remove(field.name) + }} + /> + } + > + + + + +key !== Condition.ConditionUnknown) + .map(([key, value]) => ({ + value: +key, + label: value + }))} + /> + + + + + + + + + + + + ({ + label: item.name, + value: item.id, + disabled: item.status !== Status.StatusEnable + }))} + /> + + + + label通知对象}> + + {(fields, { add, remove }) => ( +
+ + {fields.map(({ key, name, ...restField }) => ( + + + + + + + + + + + + + + + + + + + + remove(name)} + style={{ color: token.colorError }} + /> + + + ))} + + +
+ )} + + + + ))} + +
+ )} + + + +
+ ) +} diff --git a/src/pages/strategy/list/event-edit.modal.tsx b/src/pages/strategy/list/event-edit-modal.tsx similarity index 100% rename from src/pages/strategy/list/event-edit.modal.tsx rename to src/pages/strategy/list/event-edit-modal.tsx diff --git a/src/pages/strategy/list/index.tsx b/src/pages/strategy/list/index.tsx index 2f54137..e990d11 100644 --- a/src/pages/strategy/list/index.tsx +++ b/src/pages/strategy/list/index.tsx @@ -21,9 +21,11 @@ import { Button, message, Modal, Space, theme } from 'antd' import { debounce } from 'lodash' import React, { useCallback, useContext, useEffect, useRef, useState } from 'react' import { Detail } from './detail' -import EventEditModal from './event-edit.modal' +import { DomainEditModal } from './domain-edit-modal' +import EventEditModal from './event-edit-modal' import { MetricEditModal, MetricEditModalData } from './metric-edit-modal' import { formList, getColumnList } from './options' +import { PortEditModal } from './port-edit-modal' import StrategyCharts from './strategy-charts' import StrategyTypeModal from './strategy-type-modal' @@ -45,6 +47,8 @@ const StrategyMetric: React.FC = () => { const [total, setTotal] = useState(0) const [openMetricEditModal, setOpenMetricEditModal] = useState(false) const [openEventEditModal, setOpenEventEditModal] = useState(false) + const [openDomainEditModal, setOpenDomainEditModal] = useState(false) + const [openPortEditModal, setOpenPortEditModal] = useState(false) const [editDetail, setEditDetail] = useState() const [disabledEditGroupModal, setDisabledEditGroupModal] = useState(false) const [openChartModal, setOpenChartModal] = useState(false) @@ -66,6 +70,16 @@ const StrategyMetric: React.FC = () => { setOpenEventEditModal(true) } + const handleOpenDomainEditModal = (item?: StrategyItem) => { + setEditDetail(item) + setOpenDomainEditModal(true) + } + + const handleOpenPortEditModal = (item?: StrategyItem) => { + setEditDetail(item) + setOpenPortEditModal(true) + } + const handleDetailModal = (id: number) => { setDetailId(id) setOpenDetailModal(true) @@ -87,6 +101,16 @@ const StrategyMetric: React.FC = () => { setEditDetail(undefined) } + const handleCloseDomainEditModal = () => { + setOpenDomainEditModal(false) + setEditDetail(undefined) + } + + const handleClosePortEditModal = () => { + setOpenPortEditModal(false) + setEditDetail(undefined) + } + const onRefresh = () => { setRefresh(!refresh) } @@ -210,6 +234,12 @@ const StrategyMetric: React.FC = () => { case StrategyType.StrategyTypeMQ: handleOpenEventEditModal(item) break + case StrategyType.StrategyTypeDomainCertificate: + handleOpenDomainEditModal(item) + break + case StrategyType.StrategyTypeDomainPort: + handleOpenPortEditModal(item) + break default: message.warning(`${StrategyTypeData[item.strategyType]}未开通`) break @@ -284,6 +314,12 @@ const StrategyMetric: React.FC = () => { case StrategyType.StrategyTypeMQ: handleOpenEventEditModal() break + case StrategyType.StrategyTypeDomainCertificate: + handleOpenDomainEditModal() + break + case StrategyType.StrategyTypeDomainPort: + handleOpenPortEditModal() + break default: message.warning(`${StrategyTypeData[type]}未开通`) break @@ -298,7 +334,6 @@ const StrategyMetric: React.FC = () => {
{ submit={handleMetricEditModalSubmit} disabled={disabledEditGroupModal} /> + + diff --git a/src/pages/strategy/list/port-edit-modal.tsx b/src/pages/strategy/list/port-edit-modal.tsx new file mode 100644 index 0000000..b59b22c --- /dev/null +++ b/src/pages/strategy/list/port-edit-modal.tsx @@ -0,0 +1,476 @@ +import { Status } from '@/api/enum' +import { defaultPaginationReq } from '@/api/global' +import { StrategyItem } from '@/api/model-types' +import { + createStrategy, + CreateStrategyRequest, + parseEventStrategyDetailToFormData, + updateStrategy +} from '@/api/strategy' +import { AnnotationsEditor } from '@/components/data/child/annotation-editor' +import { + useAlarmLevelList, + useAlarmNoticeGroupList, + useAlarmPageList, + useStrategyCategoryList, + useStrategyGroupList +} from '@/hooks/select' +import { useSubmit } from '@/hooks/submit' +import { MinusCircleOutlined, PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons' +import { + Button, + Card, + Col, + Form, + Input, + InputNumber, + Modal, + ModalProps, + Popover, + Radio, + Row, + Select, + Space, + theme, + Typography +} from 'antd' +import { useEffect, useState } from 'react' + +export interface PortEditModalProps extends ModalProps { + strategyDetail?: StrategyItem +} + +export const PortEditModal: React.FC = (props) => { + const { strategyDetail, ...restProps } = props + + const { token } = theme.useToken() + const [form] = Form.useForm() + const [loading, setLoading] = useState(false) + const { strategyGroupList, strategyGroupListLoading } = useStrategyGroupList({ + pagination: defaultPaginationReq + }) + const { strategyCategoryList, strategyCategoryListLoading } = useStrategyCategoryList({ + pagination: defaultPaginationReq + }) + const { alarmGroupList, alarmGroupListLoading } = useAlarmNoticeGroupList({ + pagination: defaultPaginationReq + }) + const { alarmPageList, alarmPageListLoading } = useAlarmPageList({ + pagination: defaultPaginationReq + }) + const { alarmLevelList, alarmLevelListLoading } = useAlarmLevelList({ + pagination: defaultPaginationReq + }) + const { submit } = useSubmit(updateStrategy, createStrategy, strategyDetail?.id) + + const [descriptionOkInfo] = useState<{ + info: string + labels?: string[] + }>({ + info: '' + }) + const [summaryOkInfo] = useState<{ + info: string + labels?: string[] + }>({ + info: '' + }) + + const handleSubmit = () => { + setLoading(true) + form + .validateFields() + .then((values) => { + if (strategyDetail) { + return submit({ data: values, id: strategyDetail?.id }) + } else { + return submit(values) + } + }) + .finally(() => { + setLoading(false) + }) + } + + useEffect(() => { + if (restProps.open) { + if (strategyDetail) { + form.setFieldsValue(parseEventStrategyDetailToFormData(strategyDetail)) + } else { + form.resetFields() + } + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [strategyDetail, restProps.open]) + + return ( + +
+ + + + + + + + + + + + + + 标签kv集合} required> + + {(fields, { add, remove }) => ( +
+ + {fields.map(({ key, name, ...restField }) => ( + + + + + + + + + + + + + remove(name)} style={{ color: token.colorError }} /> + + + + + ))} + + +
+ )} + + + 注解} required> + + 告警摘要 + + {summaryOkInfo.info} + + } + > + + + + } + rules={[{ required: true, message: '请输入告警摘要' }]} + > + + + + 告警明细 + + {descriptionOkInfo.info} + + } + > + + + + } + rules={[{ required: true, message: '请输入告警明细' }]} + > + + + + 告警等级} required> + + {(fields, { add, remove }) => ( +
+ {fields.map((field) => ( + { + remove(field.name) + }} + /> + } + > + + + + + + + + + + + + + + + + + + + + + + + + + remove(name)} + style={{ color: token.colorError }} + /> + + + ))} + + +
+ )} + + + + ))} + +
+ )} + + + + + ) +}