Some details (#407)

* fix:Correct the way resources are obtained (#292) * Feat:add table sorting and filtering
oceanbase · May 27, 2024 · 4b48ffc · 4b48ffc
1 parent 1c01490
commit 4b48ffc
Show file tree

Hide file tree

Showing 6 changed files with 306 additions and 27 deletions.
diff --git a/ui/mock/alertAPI.ts b/ui/mock/alertAPI.ts
@@ -4,7 +4,7 @@ export default {
       {
         description: 'string',
         endsAt: 0,
-        fingerprint: 'string',
+        fingerprint: 'string1',
         instance: {
           obcluster: 'testobcluster',
           type: 'obcluster',
@@ -25,13 +25,79 @@ export default {
         ],
         rule: 'string',
         serverity: 'critical',
-        startsAt: 0,
+        startsAt: 1716543006,
+        status: {
+          inhibitedBy: ['string'],
+          silencedBy: ['string'],
+          state: 'suppressed',
+        },
+        summary: 'string1',
+        updatedAt: 0,
+      },
+      {
+        description: 'string',
+        endsAt: 0,
+        fingerprint: 'string2',
+        instance: {
+          obcluster: 'testobcluster',
+          type: 'obcluster',
+        },
+        labels: [
+          {
+            key: 'string',
+            value: 'string',
+          },
+          {
+            key: 'string1',
+            value: 'string1',
+          },
+          {
+            key: 'string2',
+            value: 'string2',
+          },
+        ],
+        rule: 'string',
+        serverity: 'info',
+        startsAt: 1716548006,
+        status: {
+          inhibitedBy: ['string'],
+          silencedBy: ['string'],
+          state: 'unprocessed',
+        },
+        summary: 'string2',
+        updatedAt: 0,
+      },
+      {
+        description: 'string',
+        endsAt: 0,
+        fingerprint: 'string3',
+        instance: {
+          obcluster: 'testobcluster',
+          type: 'obcluster',
+        },
+        labels: [
+          {
+            key: 'string',
+            value: 'string',
+          },
+          {
+            key: 'string1',
+            value: 'string1',
+          },
+          {
+            key: 'string2',
+            value: 'string2',
+          },
+        ],
+        rule: 'string',
+        serverity: 'warning',
+        startsAt: 1716548606,
         status: {
           inhibitedBy: ['string'],
           silencedBy: ['string'],
           state: 'active',
         },
-        summary: 'string',
+        summary: 'string3',
         updatedAt: 0,
       },
     ],
@@ -43,7 +109,33 @@ export default {
       {
         comment: 'string',
         createdBy: 'string',
-        endsAt: 0,
+        endsAt: 1716543006,
+        id: 'string',
+        instance: {
+          obcluster: 'string',
+          observer: 'string',
+          obtenant: 'string',
+          obzone: 'string',
+          type: 'obcluster',
+        },
+        matchers: [
+          {
+            isEqual: true,
+            isRegex: true,
+            name: 'string',
+            value: 'string',
+          },
+        ],
+        startsAt: 1716543006,
+        status: {
+          state: 'expired',
+        },
+        updatedAt: 0,
+      },
+      {
+        comment: 'string',
+        createdBy: 'string',
+        endsAt: 1716543006,
         id: 'string',
         instance: {
           obcluster: 'string',
@@ -60,7 +152,33 @@ export default {
             value: 'string',
           },
         ],
-        startsAt: 0,
+        startsAt: 1716543006,
+        status: {
+          state: 'pending',
+        },
+        updatedAt: 0,
+      },
+      {
+        comment: 'string1',
+        createdBy: 'string1',
+        endsAt: 1716548006,
+        id: 'string1',
+        instance: {
+          obcluster: 'string',
+          observer: 'string',
+          obtenant: 'string',
+          obzone: 'string',
+          type: 'obcluster',
+        },
+        matchers: [
+          {
+            isEqual: true,
+            isRegex: true,
+            name: 'string',
+            value: 'string',
+          },
+        ],
+        startsAt: 1716548006,
         status: {
           state: 'active',
         },
@@ -125,6 +243,46 @@ export default {
         summary: 'string',
         type: 'builtin',
       },
+      {
+        description: 'string',
+        duration: 0,
+        evaluationTime: 0,
+        health: 'unknown',
+        instanceType: 'obcluster',
+        keepFiringFor: 0,
+        labels: {
+          key: 'string',
+          value: 'string',
+        },
+        lastError: 'string',
+        lastEvaluation: 0,
+        name: 'string',
+        query: 'string',
+        serverity: 'caution',
+        state: 'active',
+        summary: 'string',
+        type: 'customized',
+      },
+      {
+        description: 'string',
+        duration: 0,
+        evaluationTime: 0,
+        health: 'unknown',
+        instanceType: 'obcluster',
+        keepFiringFor: 0,
+        labels: {
+          key: 'string',
+          value: 'string',
+        },
+        lastError: 'string',
+        lastEvaluation: 0,
+        name: 'string',
+        query: 'string',
+        serverity: 'warning',
+        state: 'active',
+        summary: 'string',
+        type: 'builtin',
+      },
     ],
     message: 'string',
     successful: true,

diff --git a/ui/src/constants/index.ts b/ui/src/constants/index.ts
@@ -178,13 +178,21 @@ const SERVERITY_MAP = {
   critical: {
     color: 'red',
     label: '严重',
+    weight: 3,
   },
   warning: {
     color: 'gold',
     label: '警告',
+    weight: 2,
   },
-  caution: { color: 'blue', label: '注意' },
-  info: { color: 'green', label: '提醒' },
+  caution: { color: 'blue', label: '注意', weight: 1 },
+  info: { color: 'green', label: '提醒', weight: 0 },
+};
+
+const SHILED_STATUS_MAP = {
+  active: { text: '活跃', color: 'green', weight: 2 },
+  expired: { text: '过期', color: 'gold', weight: 1 },
+  pending: { text: '未生效', color: 'default', weight: 0 },
 };
 
 const OBJECT_OPTIONS_ALARM: DefaultOptionType[] = [
@@ -213,7 +221,14 @@ const CHANNEL_TYPE_OPTIONS = [
   },
 ];
 
+const ALERT_STATE_MAP = {
+  active: { text: '活跃', color: 'green', weight: 0 },
+  unprocessed: { text: '未处理', color: 'default', weight: 1 },
+  suppressed: { text: '抑制', color: 'red', weight: 2 },
+};
+
 export {
+  ALERT_STATE_MAP,
   BACKUP_RESULT_STATUS,
   BADGE_IMG_MAP,
   CHANNEL_TYPE_OPTIONS,
@@ -233,6 +248,7 @@ export {
   RESULT_STATUS,
   SERVERITY_MAP,
   SERVER_IMG_MAP,
+  SHILED_STATUS_MAP,
   STATISTICS_INTERVAL,
   STATUS,
   SUFFIX_UNIT,

diff --git a/ui/src/pages/Alert/Event/index.tsx b/ui/src/pages/Alert/Event/index.tsx
@@ -5,25 +5,45 @@ import type {
   AlertStatus,
   OceanbaseOBInstance,
 } from '@/api/generated';
-import { SERVERITY_MAP } from '@/constants';
+import { ALERT_STATE_MAP, SERVERITY_MAP } from '@/constants';
 import { history } from '@umijs/max';
 import { useRequest } from 'ahooks';
-import { Button, Card, Form, Space, Table, Tag, Typography } from 'antd';
+import {
+  Button,
+  Card,
+  Form,
+  Space,
+  Table,
+  Tag,
+  Tooltip,
+  Typography,
+} from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import moment from 'moment';
 import AlarmFilter from '../AlarmFilter';
 const { Text } = Typography;
 
 export default function Event() {
   const [form] = Form.useForm();
-  const { data: listAlertsRes, run: getListAlerts } = useRequest(alert.listAlerts);
+  const { data: listAlertsRes, run: getListAlerts } = useRequest(
+    alert.listAlerts,
+  );
   const listAlerts = listAlertsRes?.data || [];
   const columns: ColumnsType<AlertAlert> = [
     {
       title: '告警事件',
       dataIndex: 'summary',
       key: 'summary',
-      render: (val) => <Button type="link">{val}</Button>,
+      render: (val, record) => {
+        return (
+          <Button
+            onClick={() => history.push(`/alert/rules?rule=${record.rule}`)}
+            type="link"
+          >
+            <Tooltip title={record.description}>{val}</Tooltip>
+          </Button>
+        );
+      },
     },
     {
       title: '告警对象',
@@ -41,6 +61,12 @@ export default function Event() {
       title: '告警等级',
       dataIndex: 'serverity',
       key: 'serverity',
+      sorter: (preRecord, curRecord) => {
+        return (
+          SERVERITY_MAP[preRecord.serverity].weight -
+          SERVERITY_MAP[curRecord.serverity].weight
+        );
+      },
       render: (serverity: AlarmServerity) => (
         <Tag color={SERVERITY_MAP[serverity]?.color}>
           {SERVERITY_MAP[serverity]?.label}
@@ -51,14 +77,24 @@ export default function Event() {
       title: '告警状态',
       dataIndex: 'status',
       key: 'status',
-      render: (status: AlertStatus) => <Tag>{status.state}</Tag>,
+      sorter: (preRecord, curRecord) => {
+        return (
+          ALERT_STATE_MAP[preRecord.status.state].weight -
+          ALERT_STATE_MAP[curRecord.status.state].weight
+        );
+      },
+      render: (status: AlertStatus) => (
+        <Tag color={ALERT_STATE_MAP[status.state].color}>
+          {ALERT_STATE_MAP[status.state].text || '-'}
+        </Tag>
+      ),
     },
     {
       title: '产生时间',
       dataIndex: 'startsAt',
       key: 'startsAt',
       defaultSortOrder: 'ascend',
-      sorter: (pre: number, cur: number) => cur - pre,
+      sorter: (preRecord, curRecord) => curRecord.startsAt - preRecord.startsAt,
       render: (startsAt: number) => (
         <Text>{moment.unix(startsAt).format('YYYY-MM-DD HH:MM:SS')}</Text>
       ),
@@ -71,7 +107,7 @@ export default function Event() {
           disabled={record.status.state !== 'active'}
           style={{ paddingLeft: 0 }}
           type="link"
-          onClick={() =>
+          onClick={() => {
             history.push(
               `/alert/shield?instance=${JSON.stringify(
                 record.instance,
@@ -81,8 +117,8 @@ export default function Event() {
                   value: label.value,
                 })),
               )}`,
-            )
-          }
+            );
+          }}
         >
           屏蔽
         </Button>

diff --git a/ui/src/pages/Alert/Rules/RuleDrawerForm.tsx b/ui/src/pages/Alert/Rules/RuleDrawerForm.tsx
@@ -46,6 +46,7 @@ export default function RuleDrawerForm({
         preserve={false}
         style={{ marginBottom: 64 }}
         layout="vertical"
+        validateTrigger='onBlur'
         form={form}
       >
         <Row gutter={[24, 24]}>
@@ -57,6 +58,21 @@ export default function RuleDrawerForm({
                   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();
+                  },
+                },
               ]}
               label="告警规则名"
             >