Add InputTimeComp and fix some bugs (#434)

oceanbase · Jun 7, 2024 · cb95d39 · cb95d39
1 parent 6682548
commit cb95d39
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 79 deletions.
diff --git a/ui/src/components/InputTimeComp/index.tsx 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
@@ -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
@@ -3,24 +3,17 @@ 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';
 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
@@ -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
@@ -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
@@ -2,19 +2,17 @@ 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';
 
 const { Text } = Typography;
 
 export default function Rules() {
   const [form] = Form.useForm();
-  const [searchParams, setSearchParams] = useSearchParams();
   const {
     data: listRulesRes,
     refresh,
@@ -28,17 +26,14 @@ 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) => {
     setEditRuleName(ruleName);
     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>