Dealing with some details

ui/src/pages/Alert/AlarmFilter/index.tsx

@@ -227,6 +227,7 @@ export default function AlarmFilter({ form, type, depend }: AlarmFilterProps) {
                   >
                     <Select
                       style={{ width: '100%' }}
+                      allowClear
                       options={getOptionsFromType(
                         getFieldValue(['instance', 'type']),
                       )}
@@ -250,10 +251,14 @@ export default function AlarmFilter({ form, type, depend }: AlarmFilterProps) {
               <Select
                 allowClear
                 placeholder="请选择"
-                options={LEVER_OPTIONS_ALARM?.map((item) => ({
+                options={LEVER_OPTIONS_ALARM!.map((item) => ({
                   value: item.value,
                   label: (
-                    <Tag color={SEVERITY_MAP[item.value]?.color}>
+                    <Tag
+                      color={
+                        SEVERITY_MAP[item.value as Alert.AlarmLevel]?.color
+                      }
+                    >
                       {item.label}
                     </Tag>
                   ),

ui/src/pages/Alert/Rules/RuleDrawerForm.tsx

@@ -2,21 +2,12 @@ import { alert } from '@/api';
 import type { CommonKVPair, RuleRule } from '@/api/generated';
 import AlertDrawer from '@/components/AlertDrawer';
 import InputLabelComp from '@/components/InputLabelComp';
+import InputTimeComp from '@/components/InputTimeComp';
 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,
-  Radio,
-  Row,
-  Select,
-  Tag,
-  message,
-} from 'antd';
+import { Col, Form, Input, Radio, Row, Select, Tag, message } from 'antd';
 import { useEffect } from 'react';
 import { validateLabelValues } from '../helper';
 
@@ -46,8 +37,8 @@ export default function RuleDrawerForm({
     instanceType: 'obcluster',
   };
   const submit = (values: RuleRule) => {
-    values.type = 'customized';
     if (!values.labels) values.labels = [];
+    values.labels = values.labels.filter((label) => label.key && label.value);
     alert.createOrUpdateRule(values).then(({ successful }) => {
       if (successful) {
         message.success('操作成功！');
@@ -84,10 +75,9 @@ export default function RuleDrawerForm({
         validateTrigger="onBlur"
         form={form}
       >
-        <Row gutter={[24, 24]}>
+        <Row gutter={[24, 0]}>
           <Col span={24}>
             <Form.Item
-              style={{ marginBottom: 0 }}
               rules={[
                 {
                   required: true,

ui/src/pages/Alert/Rules/index.tsx

@@ -7,6 +7,7 @@ import { Button, Card, Form, Space, Table, Tag, Typography } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import { useState } from 'react';
 import AlarmFilter from '../AlarmFilter';
+import { formatDuration } from '../helper';
 import RuleDrawerForm from './RuleDrawerForm';
 
 const { Text } = Typography;
@@ -54,7 +55,7 @@ export default function Rules() {
       title: '持续时间',
       dataIndex: 'duration',
       key: 'duration',
-      render: (value) => <Text>{value}分钟</Text>,
+      render: (value) => <Text>{formatDuration(value)}</Text>,
     },
     {
       title: '对象类型',

ui/src/pages/Alert/Shield/ShieldDrawerForm.tsx

@@ -78,6 +78,9 @@ export default function ShieldDrawerForm({
 
   const submit = (values: Alert.ShieldDrawerForm) => {
     if (!values.matchers) values.matchers = [];
+    values.matchers = values.matchers.filter(
+      (matcher) => matcher.name && matcher.value,
+    );
     const _clusterList = getSelectList(
       clusterList!,
       values.instances.type,

ui/src/pages/Alert/Shield/index.tsx

@@ -174,6 +174,7 @@ export default function Shield() {
           <Button
             onClick={() => editShield(record.id)}
             style={{ paddingLeft: 0 }}
+            disabled={record.status.state === 'expired'}
             type="link"
           >
             编辑

ui/src/pages/Alert/Subscriptions/SubscripDrawerForm.tsx

@@ -39,6 +39,9 @@ export default function SubscripDrawerForm({
   const listReceivers = listReceiversRes?.data;
   const submit = async (values: RouteRoute) => {
     if (!values.matchers) values.matchers = [];
+    values.matchers = values.matchers.filter(
+      (matcher) => matcher.name && matcher.value,
+    );
     const { successful } = await alert.createOrUpdateRoute(values);
     if (successful) {
       message.success(`${isEdit ? '修改' : '创建'}成功!`);

ui/src/pages/Alert/Subscriptions/index.tsx

@@ -8,6 +8,7 @@ import { Button, Card, Table } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import { useState } from 'react';
 import ChannelDrawer from '../Channel/ChannelDrawer';
+import { formatDuration } from '../helper';
 import SubscripDrawerForm from './SubscripDrawerForm';
 
 export default function Subscriptions() {
@@ -74,10 +75,12 @@ export default function Subscriptions() {
       title: '聚合配置',
       dataIndex: 'aggregateLabels',
       key: 'aggregateLabels',
+      render: (labels) => <span>{labels.join(',')}</span>,
     },
     {
       title: '推送周期',
       dataIndex: 'repeatInterval',
+      render: (repeatIntervel) => <span>{formatDuration(repeatIntervel)}</span>,
     },
     {
       title: '操作',

ui/src/pages/Alert/helper.ts

@@ -159,7 +159,10 @@ export const getInstancesFromRes = (
  * @description
  * Sort alarms by status and time
  */
-const sortAlarm = (alarms: AlertAlert[] | SilenceSilencerResponse[], map) => {
+const sortAlarm = (
+  alarms: AlertAlert[] | SilenceSilencerResponse[],
+  map: { [T: string]: { text: string; color: string; weight: number } },
+) => {
   if (!alarms || !alarms.length) return [];
   const types = uniq(alarms.map((item) => item.status.state));
   types.sort((pre, cur) => map[cur].weight - map[pre].weight);
@@ -190,10 +193,10 @@ export const validateLabelValues = (
 ) => {
   for (const labelValue of labelValues) {
     const tempArr = Object.keys(labelValue).map((key) =>
-      Boolean(labelValue[key]),
+      Boolean(labelValue[key as keyof (AlarmMatcher | CommonKVPair)]),
     );
     const stautsArr = tempArr.filter((item) => item === true);
-    if (stautsArr.length === 1) return false; 
+    if (stautsArr.length === 1) return false;
     if (
       stautsArr.length === 2 &&
       tempArr.length > 2 &&
@@ -204,3 +207,17 @@ export const validateLabelValues = (
   }
   return true;
 };
+
+/**
+ *
+ * @param duration The unit is seconds
+ */
+export const formatDuration = (duration: number) => {
+  if (Math.floor(duration / 60) > 180) {
+    return `${Math.floor(duration / 3600)}小时`;
+  }
+  if (duration > 600) {
+    return `${Math.floor(duration / 60)}分钟`;
+  }
+  return `${duration}秒`;
+};

ui/src/type/alert.d.ts

@@ -1,4 +1,4 @@
-import type { AlarmMatcher, OceanbaseOBInstanceType } from '@/api/generated';
+import type { AlarmMatcher } from '@/api/generated';
 import type { Dayjs } from 'dayjs';
 
 declare namespace Alert {
@@ -9,8 +9,9 @@ declare namespace Alert {
     rules?: string[];
   };
   type InstancesKey = 'obcluster' | 'observer' | 'obtenant';
+  type AlarmLevel = 'critical' | 'warning' | 'caution' | 'info';
   type InstancesType = {
-    type: OceanbaseOBInstanceType;
+    type: InstancesKey;
     obcluster: string[];
     observer?: string[];
     obtenant?: string[];
@@ -23,6 +24,7 @@ declare namespace Alert {
       value?: string;
     }[];
     endsAt: Dayjs;
+    rules:string[];
     id?: string;
     comment: string;
   };