Dealing with some details (#420)

oceanbase · Jun 3, 2024 · 9f26570 · 9f26570
1 parent 0f2b662
commit 9f26570
Show file tree

Hide file tree

Showing 11 changed files with 188 additions and 67 deletions.
diff --git a/ui/src/api/generated/api.ts b/ui/src/api/generated/api.ts
@@ -5301,7 +5301,7 @@ export interface SilenceSilencerParam {
      * @type {Array<OceanbaseOBInstance>}
      * @memberof SilenceSilencerParam
      */
-    'instances': Array<OceanbaseOBInstance>;
+    'instance': Array<OceanbaseOBInstance>;
     /**
      * 
      * @type {Array<AlarmMatcher>}

diff --git a/ui/src/api/index.ts b/ui/src/api/index.ts
@@ -1,19 +1,31 @@
+import { message } from 'antd';
 import globalAxios, { AxiosInstance, AxiosPromise } from 'axios';
 import {
   AlarmApiFactory,
   ClusterApiFactory,
   Configuration,
   InfoApiFactory,
   OBClusterApiFactory,
+  OBProxyApiFactory,
   OBTenantApiFactory,
   TerminalApiFactory,
   UserApiFactory,
-  OBProxyApiFactory
 } from './generated/index';
 
-globalAxios.interceptors.response.use((res) => {
-  return res.data;
-});
+globalAxios.interceptors.response.use(
+  (res) => {
+    return res.data;
+  },
+  (error) => {
+    if (error?.response?.status === 401) {
+      message.warning('登陆已过期');
+      location.href = '/#/login';
+    } else {
+      message.error(error?.response?.data?.message || error.message);
+    }
+    return Promise.reject(error.response);
+  },
+);
 
 const config = new Configuration({
   basePath: location.origin,

diff --git a/ui/src/constants/index.ts b/ui/src/constants/index.ts
@@ -190,9 +190,9 @@ const SERVERITY_MAP = {
 };
 
 const SHILED_STATUS_MAP = {
-  expired: { text: '过期', color: 'gold', weight: 2 },
-  pending: { text: '未生效', color: 'default', weight: 1 },
-  active: { text: '活跃', color: 'green', weight: 0 },
+  expired: { text: '过期', color: 'gold', weight: 1 },
+  pending: { text: '未生效', color: 'default', weight: 0 },
+  active: { text: '活跃', color: 'green', weight: 2 },
 };
 
 const OBJECT_OPTIONS_ALARM: DefaultOptionType[] = [

diff --git a/ui/src/pages/Alert/Channel/ChannelDrawer.tsx b/ui/src/pages/Alert/Channel/ChannelDrawer.tsx
@@ -50,7 +50,7 @@ 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 (

diff --git a/ui/src/pages/Alert/Event/index.tsx b/ui/src/pages/Alert/Event/index.tsx
@@ -125,7 +125,7 @@ export default function Event() {
                   name: label.key,
                   value: label.value,
                 })),
-              )}`,
+              )}&rule=${record.rule}`,
             );
           }}
         >

diff --git a/ui/src/pages/Alert/Rules/RuleDrawerForm.tsx b/ui/src/pages/Alert/Rules/RuleDrawerForm.tsx
@@ -4,6 +4,7 @@ import AlertDrawer from '@/components/AlertDrawer';
 import InputLabel from '@/components/InputLabel';
 import { LEVER_OPTIONS_ALARM, SERVERITY_MAP } from '@/constants';
 import { QuestionCircleOutlined } from '@ant-design/icons';
+import { useRequest } from 'ahooks';
 import type { DrawerProps } from 'antd';
 import {
   Col,
@@ -20,15 +21,20 @@ import { useEffect } from 'react';
 
 type AlertRuleDrawerProps = {
   ruleName?: string;
+  onClose: () => void;
   submitCallback?: () => void;
 } & DrawerProps;
 const { TextArea } = Input;
 export default function RuleDrawerForm({
   ruleName,
   submitCallback,
+  onClose,
   ...props
 }: AlertRuleDrawerProps) {
   const [form] = Form.useForm();
+  const { data: rulesRes } = useRequest(alert.listRules);
+  const rules = rulesRes?.data;
+  const isEdit = !!ruleName;
   const initialValues = {
     labels: [
       {
@@ -39,9 +45,11 @@ export default function RuleDrawerForm({
     instanceType: 'obcluster',
   };
   const submit = (values: RuleRule) => {
+    values.type = 'customized';
     alert.createOrUpdateRule(values).then(({ successful }) => {
       if (successful) {
         message.success('操作成功！');
+        onClose();
         submitCallback && submitCallback();
       }
     });
@@ -61,6 +69,8 @@ export default function RuleDrawerForm({
     <AlertDrawer
       destroyOnClose={true}
       onSubmit={() => form.submit()}
+      title="告警规则配置"
+      onClose={onClose}
       {...props}
     >
       <Form
@@ -75,6 +85,7 @@ export default function RuleDrawerForm({
         <Row gutter={[24, 24]}>
           <Col span={24}>
             <Form.Item
+              style={{ marginBottom: 0 }}
               rules={[
                 {
                   required: true,
@@ -95,27 +106,35 @@ export default function RuleDrawerForm({
           <Col span={16}>
             <Form.Item
               name={'name'}
-              rules={[
-                {
-                  required: true,
-                  message: '请输入',
-                },
-                {
-                  validator: async (_, value) => {
-                    const res = await alert.listRules();
-                    if (res.successful) {
-                      for (const rule of res.data) {
-                        if (rule.name === value) {
-                          return Promise.reject(
-                            new Error('告警规则已存在，请重新输入'),
-                          );
-                        }
-                      }
-                    }
-                    return Promise.resolve();
-                  },
-                },
-              ]}
+              rules={
+                isEdit
+                  ? [
+                      {
+                        required: true,
+                        message: '请输入',
+                      },
+                    ]
+                  : [
+                      {
+                        required: true,
+                        message: '请输入',
+                      },
+                      {
+                        validator: async (_, value) => {
+                          if (rules) {
+                            for (const rule of rules) {
+                              if (rule.name === value) {
+                                return Promise.reject(
+                                  new Error('告警规则已存在，请重新输入'),
+                                );
+                              }
+                            }
+                          }
+                          return Promise.resolve();
+                        },
+                      },
+                    ]
+              }
               label="告警规则名"
             >
               <Input placeholder="请输入" />

diff --git a/ui/src/pages/Alert/Rules/index.tsx b/ui/src/pages/Alert/Rules/index.tsx
@@ -52,13 +52,14 @@ export default function Rules() {
     {
       title: '触发规则',
       dataIndex: 'description',
-      width:'30%',
+      width: '30%',
       key: 'description',
     },
     {
       title: '持续时间',
       dataIndex: 'duration',
       key: 'duration',
+      render: (value) => <Text>{value}分钟</Text>,
     },
     {
       title: '对象类型',

diff --git a/ui/src/pages/Alert/Shield/ShieldDrawerForm.tsx b/ui/src/pages/Alert/Shield/ShieldDrawerForm.tsx
@@ -46,6 +46,7 @@ export default function ShieldDrawerForm({
   const { clusterList, tenantList } = useModel('alarm');
   const shieldObjType = Form.useWatch(['instances', 'type'], form);
   const isEdit = !!id;
+
   const newInitialValues = {
     matchers: [
       {
@@ -78,6 +79,7 @@ export default function ShieldDrawerForm({
       values.instances.type,
       tenantList,
     );
+    if (isEdit) values.id = id;
     alert
       .createOrUpdateSilencer(formatShieldSubmitData(values, _clusterList))
       .then(({ successful }) => {
@@ -93,6 +95,8 @@ export default function ShieldDrawerForm({
     if (isEdit) {
       alert.getSilencer(id).then(({ successful, data }) => {
         if (successful) {
+          console.log(getInstancesFromRes(data.instances));
+
           form.setFieldsValue({
             comment: data.comment,
             matchers: data.matchers,
@@ -132,7 +136,17 @@ export default function ShieldDrawerForm({
           name={['instances', 'type']}
           label="屏蔽对象类型"
         >
-          <Radio.Group>
+          <Radio.Group
+            onChange={() => {
+              form.setFieldsValue({
+                instances: {
+                  obcluster: undefined,
+                  obtenant: undefined,
+                  observer: undefined,
+                },
+              });
+            }}
+          >
             <Radio value="obcluster"> 集群 </Radio>
             <Radio value="obtenant"> 租户 </Radio>
             <Radio value="observer"> OBServer </Radio>

diff --git a/ui/src/pages/Alert/Shield/ShieldObjInput.tsx b/ui/src/pages/Alert/Shield/ShieldObjInput.tsx
@@ -1,11 +1,12 @@
 import type { OceanbaseOBInstanceType } from '@/api/generated';
+import { Alert } from '@/type/alert';
 import { useModel } from '@umijs/max';
+import { useUpdateEffect } from 'ahooks';
 import type { FormInstance } from 'antd';
 import { Col, Form, Row, Select } from 'antd';
 import { flatten } from 'lodash';
 import { useEffect, useState } from 'react';
 import { getSelectList } from '../helper';
-import { Alert } from '@/type/alert';
 
 interface ShieldObjInputProps {
   shieldObjType: OceanbaseOBInstanceType;
@@ -117,7 +118,7 @@ export default function ShieldObjInput({
         form.setFieldValue(serverFormName, ['allServers']);
       }
     };
-    useEffect(() => {
+    useUpdateEffect(() => {
       if (!selectedCluster?.length) {
         form.setFieldValue(nextFormName, undefined);
       }
@@ -187,16 +188,6 @@ export default function ShieldObjInput({
     );
   };
 
-  useEffect(() => {
-    form.setFieldsValue({
-      instances: {
-        obcluster: undefined,
-        obtenant: undefined,
-        observer: undefined,
-      },
-    });
-  }, [shieldObjType]);
-
   return (
     <>
       {shieldObjType === 'obcluster' && <ShieldObjClusterFormItem />}
-Original file line number
+Diff line change
@@ Expand Up / @@ -125,7 +125,7 @@ export default function Event() { @@
                       name: label.key,
                       value: label.value,
                     })),
-                  )}`,
+                  )}&rule=${record.rule}`,
                 );
               }}
             >
@@ Expand Down @@