From cb95d3992431d721d88f4528834e64cf44f8aae7 Mon Sep 17 00:00:00 2001
From: yangon <2689991790@qq.com>
Date: Fri, 7 Jun 2024 16:21:59 +0800
Subject: [PATCH] Add InputTimeComp and fix some bugs (#434)

---
 ui/src/components/InputTimeComp/index.tsx     | 63 +++++++++++++++++++
 ui/src/pages/Alert/Channel/ChannelDrawer.tsx  | 60 +++++++++---------
 ui/src/pages/Alert/Channel/index.tsx          | 21 +++----
 ui/src/pages/Alert/Event/index.tsx            | 26 ++++++--
 ui/src/pages/Alert/Rules/RuleDrawerForm.tsx   |  4 +-
 ui/src/pages/Alert/Rules/index.tsx            | 15 +----
 .../Subscriptions/SubscripDrawerForm.tsx      | 26 ++++----
 ui/src/pages/Alert/Subscriptions/index.tsx    | 31 +++++++--
 8 files changed, 167 insertions(+), 79 deletions(-)
 create mode 100644 ui/src/components/InputTimeComp/index.tsx

diff --git a/ui/src/components/InputTimeComp/index.tsx b/ui/src/components/InputTimeComp/index.tsx
new file mode 100644
index 000000000..04983323b
--- /dev/null
+++ b/ui/src/components/InputTimeComp/index.tsx
@@ -0,0 +1,63 @@
+import { InputNumber, Select } from 'antd';
+import { useState } from 'react';
+
+interface InputTimeCompProps {
+  onChange?: (value: number | null) => void;
+  value?: number;
+}
+
+type UnitType = 'second' | 'minute' | 'hour';
+
+const SELECT_OPTIONS = [
+  {
+    label: '秒',
+    value: 'second',
+  },
+  {
+    label: '分钟',
+    value: 'minute',
+  },
+  {
+    label: '小时',
+    value: 'hour',
+  },
+];
+
+export default function InputTimeComp({ onChange, value }: InputTimeCompProps) {
+  const [unit, setUnit] = useState<UnitType>('minute');
+
+  const durationChange = (value: number | null) => {
+    if (!value || unit === 'second') onChange?.(value);
+    if (unit === 'minute') {
+      onChange?.(value! * 60);
+    }
+    if (unit === 'hour') {
+      onChange?.(value! * 3600);
+    }
+  };
+  const getValue = (value: number | undefined) => {
+    if (!value) return value;
+    if (unit === 'minute') {
+      return Math.floor(value / 60);
+    }
+    if (unit === 'hour') {
+      return Math.floor(value / 3600);
+    }
+    return value;
+  };
+
+  return (
+    <InputNumber
+      min={1}
+      onChange={durationChange}
+      value={getValue(value)}
+      addonAfter={
+        <Select
+          defaultValue={'minute'}
+          onChange={(val: UnitType) => setUnit(val)}
+          options={SELECT_OPTIONS}
+        />
+      }
+    />
+  );
+}
diff --git a/ui/src/pages/Alert/Channel/ChannelDrawer.tsx b/ui/src/pages/Alert/Channel/ChannelDrawer.tsx
index 2dfe24e19..8e5630c99 100644
--- a/ui/src/pages/Alert/Channel/ChannelDrawer.tsx
+++ b/ui/src/pages/Alert/Channel/ChannelDrawer.tsx
@@ -50,7 +50,9 @@ export default function ChannelDrawer({
       manual: true,
     },
   );
-  const receiverNames = listReceiversRes?.data?.map((receiver) => receiver.name);
+  const receiverNames = listReceiversRes?.data?.map(
+    (receiver) => receiver.name,
+  );
   const listReceiverTemplates = listReceiverTemplatesRes?.data;
   const Footer = () => {
     return (
@@ -80,6 +82,10 @@ export default function ChannelDrawer({
       }
     });
   };
+  const typeChange = (type: string) => {
+    const template = listReceiverTemplates?.find((item) => item.type === type);
+    if (template) form.setFieldValue('config', template.template);
+  };
 
   useEffect(() => {
     if (status !== 'create' && name) {
@@ -144,6 +150,7 @@ export default function ChannelDrawer({
           ) : (
             <Select
               placeholder="请选择"
+              onChange={typeChange}
               showSearch
               options={listReceiverTemplates?.map((template) => ({
                 value: template.type,
@@ -152,37 +159,26 @@ export default function ChannelDrawer({
             />
           )}
         </Form.Item>
-        <Form.Item noStyle dependencies={['type']}>
-          {({ setFieldValue, getFieldValue }) => {
-            const type = getFieldValue('type');
-            const template = listReceiverTemplates?.find(
-              (item) => item.type === type,
-            );
-            if (template) setFieldValue('config', template.template);
-            return (
-              <Form.Item
-                name={'config'}
-                rules={[
-                  {
-                    required: true,
-                    message: '请输入',
-                  },
-                ]}
-                label={
-                  <div>
-                    <span>通道配置 </span>
-                    <QuestionCircleOutlined />
-                  </div>
-                }
-              >
-                {status === 'display' ? (
-                  <pre>{form.getFieldValue('config') || '-'}</pre>
-                ) : (
-                  <TextArea rows={18} placeholder="请输入" />
-                )}
-              </Form.Item>
-            );
-          }}
+        <Form.Item
+          name={'config'}
+          rules={[
+            {
+              required: true,
+              message: '请输入',
+            },
+          ]}
+          label={
+            <div>
+              <span>通道配置 </span>
+              <QuestionCircleOutlined />
+            </div>
+          }
+        >
+          {status === 'display' ? (
+            <pre>{form.getFieldValue('config') || '-'}</pre>
+          ) : (
+            <TextArea rows={18} placeholder="请输入" />
+          )}
         </Form.Item>
       </Form>
     </AlertDrawer>
diff --git a/ui/src/pages/Alert/Channel/index.tsx b/ui/src/pages/Alert/Channel/index.tsx
index 3422a2778..c7bce0a73 100644
--- a/ui/src/pages/Alert/Channel/index.tsx
+++ b/ui/src/pages/Alert/Channel/index.tsx
@@ -3,7 +3,6 @@ import type { ReceiverReceiver } from '@/api/generated';
 import PreText from '@/components/PreText';
 import showDeleteConfirm from '@/components/customModal/showDeleteConfirm';
 import { Alert } from '@/type/alert';
-import { useSearchParams } from '@umijs/max';
 import { useRequest } from 'ahooks';
 import { Button, Card, Table } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
@@ -11,16 +10,10 @@ import { useState } from 'react';
 import ChannelDrawer from './ChannelDrawer';
 
 export default function Channel() {
-  const [searchParams] = useSearchParams();
-  const [drawerStatus, setDrawerStatus] = useState<Alert.DrawerStatus>(
-    searchParams.get('receiver') ? 'display' : 'create',
-  );
-  const [drawerOpen, setDrawerOpen] = useState(
-    searchParams.get('openDrawer') === 'true',
-  );
-  const [clickedChannelName, setClickedChannelName] = useState(
-    searchParams.get('receiver') || undefined,
-  );
+  const [drawerStatus, setDrawerStatus] =
+    useState<Alert.DrawerStatus>('create');
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [clickedChannelName, setClickedChannelName] = useState<string>();
   const { data: listReceiversRes, refresh } = useRequest(alert.listReceivers);
   const { run: deleteReceiver } = useRequest(alert.deleteReceiver, {
     onSuccess: ({ successful }) => {
@@ -94,6 +87,10 @@ export default function Channel() {
     setDrawerOpen(true);
     setDrawerStatus('create');
   };
+  const drawerClose = () => {
+    setClickedChannelName(undefined);
+    setDrawerOpen(false);
+  };
 
   return (
     <Card
@@ -116,7 +113,7 @@ export default function Channel() {
         setStatus={setDrawerStatus}
         name={clickedChannelName}
         submitCallback={refresh}
-        onClose={() => setDrawerOpen(false)}
+        onClose={drawerClose}
         open={drawerOpen}
       />
     </Card>
diff --git a/ui/src/pages/Alert/Event/index.tsx b/ui/src/pages/Alert/Event/index.tsx
index a1ab6928e..ce4b6fa7c 100644
--- a/ui/src/pages/Alert/Event/index.tsx
+++ b/ui/src/pages/Alert/Event/index.tsx
@@ -19,16 +19,25 @@ import {
   Typography,
 } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
-import dayjs from 'dayjs'
+import dayjs from 'dayjs';
+import { useState } from 'react';
 import AlarmFilter from '../AlarmFilter';
+import RuleDrawerForm from '../Rules/RuleDrawerForm';
 import { sortEvents } from '../helper';
 const { Text } = Typography;
 
 export default function Event() {
   const [form] = Form.useForm();
+  const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
+  const [editRuleName, setEditRuleName] = useState<string>();
   const { data: listAlertsRes, run: getListAlerts } = useRequest(
     alert.listAlerts,
   );
+  const editRule = (rule: string) => {
+    setEditRuleName(rule);
+    setDrawerOpen(true);
+  };
+
   const listAlerts = sortEvents(listAlertsRes?.data || []);
   const columns: ColumnsType<AlertAlert> = [
     {
@@ -37,10 +46,7 @@ export default function Event() {
       key: 'summary',
       render: (val, record) => {
         return (
-          <Button
-            onClick={() => history.push(`/alert/rules?rule=${record.rule}`)}
-            type="link"
-          >
+          <Button onClick={() => editRule(record.rule)} type="link">
             <Tooltip title={record.description}>{val}</Tooltip>
           </Button>
         );
@@ -134,6 +140,10 @@ export default function Event() {
       ),
     },
   ];
+  const drawerClose = () => {
+    setEditRuleName(undefined);
+    setDrawerOpen(false);
+  };
   return (
     <Space style={{ width: '100%' }} direction="vertical" size="large">
       <Card>
@@ -148,6 +158,12 @@ export default function Event() {
           // scroll={{ x: 1500 }}
         />
       </Card>
+      <RuleDrawerForm
+        width={880}
+        open={drawerOpen}
+        ruleName={editRuleName}
+        onClose={drawerClose}
+      />
     </Space>
   );
 }
diff --git a/ui/src/pages/Alert/Rules/RuleDrawerForm.tsx b/ui/src/pages/Alert/Rules/RuleDrawerForm.tsx
index 9a8ef2fe9..bdd61bcbe 100644
--- a/ui/src/pages/Alert/Rules/RuleDrawerForm.tsx
+++ b/ui/src/pages/Alert/Rules/RuleDrawerForm.tsx
@@ -4,13 +4,13 @@ import AlertDrawer from '@/components/AlertDrawer';
 import InputLabelComp from '@/components/InputLabelComp';
 import { LEVER_OPTIONS_ALARM, SEVERITY_MAP } from '@/constants';
 import { QuestionCircleOutlined } from '@ant-design/icons';
+import InputTimeComp from '@/components/InputTimeComp';
 import { useRequest } from 'ahooks';
 import type { DrawerProps } from 'antd';
 import {
   Col,
   Form,
   Input,
-  InputNumber,
   Radio,
   Row,
   Select,
@@ -196,7 +196,7 @@ export default function RuleDrawerForm({
               label="持续时间"
               name={'duration'}
             >
-              <InputNumber placeholder="请输入" addonAfter="分钟" min={1} />
+              <InputTimeComp />
             </Form.Item>
           </Col>
           <Col span={24}>
diff --git a/ui/src/pages/Alert/Rules/index.tsx b/ui/src/pages/Alert/Rules/index.tsx
index 438f0eb67..ea8e17068 100644
--- a/ui/src/pages/Alert/Rules/index.tsx
+++ b/ui/src/pages/Alert/Rules/index.tsx
@@ -2,11 +2,10 @@ import { alert } from '@/api';
 import type { AlarmSeverity, RuleRuleResponse } from '@/api/generated';
 import showDeleteConfirm from '@/components/customModal/showDeleteConfirm';
 import { SEVERITY_MAP } from '@/constants';
-import { useSearchParams } from '@umijs/max';
 import { useRequest } from 'ahooks';
 import { Button, Card, Form, Space, Table, Tag, Typography } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import AlarmFilter from '../AlarmFilter';
 import RuleDrawerForm from './RuleDrawerForm';
 
@@ -14,7 +13,6 @@ const { Text } = Typography;
 
 export default function Rules() {
   const [form] = Form.useForm();
-  const [searchParams, setSearchParams] = useSearchParams();
   const {
     data: listRulesRes,
     refresh,
@@ -28,9 +26,7 @@ export default function Rules() {
       }
     },
   });
-  const [drawerOpen, setDrawerOpen] = useState(
-    Boolean(searchParams.get('rule')),
-  );
+  const [drawerOpen, setDrawerOpen] = useState(false);
   const listRules = listRulesRes?.data || [];
 
   const editRule = (ruleName: string) => {
@@ -38,7 +34,6 @@ export default function Rules() {
     setDrawerOpen(true);
   };
   const drawerClose = () => {
-    setSearchParams('');
     setEditRuleName(undefined);
     setDrawerOpen(false);
   };
@@ -130,12 +125,6 @@ export default function Rules() {
     },
   ];
 
-  useEffect(() => {
-    if (searchParams.get('rule')) {
-      setEditRuleName(searchParams.get('rule')!);
-    }
-  }, []);
-
   return (
     <Space style={{ width: '100%' }} direction="vertical" size="large">
       <Card>
diff --git a/ui/src/pages/Alert/Subscriptions/SubscripDrawerForm.tsx b/ui/src/pages/Alert/Subscriptions/SubscripDrawerForm.tsx
index 17f1f5085..791df269d 100644
--- a/ui/src/pages/Alert/Subscriptions/SubscripDrawerForm.tsx
+++ b/ui/src/pages/Alert/Subscriptions/SubscripDrawerForm.tsx
@@ -3,32 +3,28 @@ import type { RouteRoute } from '@/api/generated';
 import { AlarmMatcher } from '@/api/generated';
 import AlertDrawer from '@/components/AlertDrawer';
 import InputLabelComp from '@/components/InputLabelComp';
+import InputTimeComp from '@/components/InputTimeComp';
 import { QuestionCircleOutlined } from '@ant-design/icons';
+import { useRequest } from 'ahooks';
 import type { DrawerProps } from 'antd';
-import { Col, Form, InputNumber, Row, Select, message } from 'antd';
+import { Col, Form, Row, Select, message } from 'antd';
 import { useEffect } from 'react';
 import { validateLabelValues } from '../helper';
 import styles from './index.less';
 
 interface ShieldDrawerFormProps extends DrawerProps {
   id?: string;
-  recevierNames: string[];
   onClose: () => void;
   submitCallback?: () => void;
 }
 
 export default function SubscripDrawerForm({
   id,
-  recevierNames,
   submitCallback,
   onClose,
   ...props
 }: ShieldDrawerFormProps) {
   const isEdit = !!id;
-  const recevierOptions = recevierNames.map((name) => ({
-    label: name,
-    value: name,
-  }));
   const [form] = Form.useForm<RouteRoute>();
   const initialValues = {
     matchers: [
@@ -39,6 +35,8 @@ export default function SubscripDrawerForm({
       },
     ],
   };
+  const { data: listReceiversRes } = useRequest(alert.listReceivers);
+  const listReceivers = listReceiversRes?.data;
   const submit = async (values: RouteRoute) => {
     if (!values.matchers) values.matchers = [];
     const { successful } = await alert.createOrUpdateRoute(values);
@@ -86,7 +84,13 @@ export default function SubscripDrawerForm({
               label="告警通道"
               name={'receiver'}
             >
-              <Select placeholder="请选择" options={recevierOptions} />
+              <Select
+                placeholder="请选择"
+                options={listReceivers?.map((receiver) => ({
+                  label: receiver.name,
+                  value: receiver.name,
+                }))}
+              />
             </Form.Item>
           </Col>
           <Col span={24}>
@@ -155,7 +159,7 @@ export default function SubscripDrawerForm({
                 </div>
               }
             >
-              <InputNumber min={1} addonAfter="分钟" />
+              <InputTimeComp />
             </Form.Item>
           </Col>
           <Col span={8}>
@@ -169,7 +173,7 @@ export default function SubscripDrawerForm({
               name={'groupWait'}
               label="聚合等待时间"
             >
-              <InputNumber min={1} addonAfter="分钟" />
+              <InputTimeComp />
             </Form.Item>
           </Col>
           <Col span={8}>
@@ -188,7 +192,7 @@ export default function SubscripDrawerForm({
                 </div>
               }
             >
-              <InputNumber min={1} addonAfter="分钟" />
+              <InputTimeComp />
             </Form.Item>
           </Col>
         </Row>
diff --git a/ui/src/pages/Alert/Subscriptions/index.tsx b/ui/src/pages/Alert/Subscriptions/index.tsx
index dcb4bda89..c6782aedb 100644
--- a/ui/src/pages/Alert/Subscriptions/index.tsx
+++ b/ui/src/pages/Alert/Subscriptions/index.tsx
@@ -2,17 +2,22 @@ import { alert } from '@/api';
 import type { RouteRouteResponse } from '@/api/generated';
 import PreText from '@/components/PreText';
 import showDeleteConfirm from '@/components/customModal/showDeleteConfirm';
-import { Link } from '@umijs/max';
+import { Alert } from '@/type/alert';
 import { useRequest } from 'ahooks';
 import { Button, Card, Table } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import { useState } from 'react';
+import ChannelDrawer from '../Channel/ChannelDrawer';
 import SubscripDrawerForm from './SubscripDrawerForm';
 
 export default function Subscriptions() {
   const { data: listRoutesRes, refresh } = useRequest(alert.listRoutes);
   const [drawerOpen, setDrawerOpen] = useState(false);
+  const [channelDrawerOpen, setChannelDrawerOpen] = useState(false);
   const [clickedId, setClickedId] = useState<string>();
+  const [drawerStatus, setDrawerStatus] =
+    useState<Alert.DrawerStatus>('display');
+  const [editChannelName, setEditChannelName] = useState<string>();
   const { run: deleteRoute } = useRequest(alert.deleteRoute, {
     onSuccess: ({ successful }) => {
       if (successful) {
@@ -21,8 +26,13 @@ export default function Subscriptions() {
     },
   });
   const drawerClose = () => {
+    setClickedId(undefined);
     setDrawerOpen(false);
   };
+  const channelDrawerClose = () => {
+    setChannelDrawerOpen(false);
+    setEditChannelName(undefined);
+  };
 
   /**
    * If the id is undefined, it means creating
@@ -32,6 +42,12 @@ export default function Subscriptions() {
     setDrawerOpen(true);
   };
 
+  const showChannelDrawer = (receiver: string) => {
+    setEditChannelName(receiver);
+    setDrawerStatus('display');
+    setChannelDrawerOpen(true);
+  };
+
   const listRoutes = listRoutesRes?.data;
 
   const columns: ColumnsType<RouteRouteResponse> = [
@@ -40,9 +56,9 @@ export default function Subscriptions() {
       dataIndex: 'receiver',
       key: 'receiver',
       render: (receiver) => (
-        <Link to={`/alert/channel?receiver=${receiver}&openDrawer=${true}`}>
+        <Button type="link" onClick={() => showChannelDrawer(receiver)}>
           {receiver}
-        </Link>
+        </Button>
       ),
     },
     {
@@ -113,12 +129,19 @@ export default function Subscriptions() {
       <SubscripDrawerForm
         title="推送配置"
         width={880}
-        recevierNames={listRoutes?.map((item) => item.receiver) || []}
         onClose={drawerClose}
         submitCallback={refresh}
         open={drawerOpen}
         id={clickedId}
       />
+      <ChannelDrawer
+        width={880}
+        status={drawerStatus}
+        setStatus={setDrawerStatus}
+        name={editChannelName}
+        onClose={channelDrawerClose}
+        open={channelDrawerOpen}
+      />
     </Card>
   );
 }