kafka-manager 2.0

2026-01-18 14:38:06 +08:00 · 2020-09-28 15:46:34 +08:00
parent 28d985aaf1
commit c6e4b60424
1253 changed files with 82183 additions and 37179 deletions
--- a/kafka-manager-console/src/container/alarm/alarm-detail/shield-history.tsx
+++ b/kafka-manager-console/src/container/alarm/alarm-detail/shield-history.tsx
@@ -0,0 +1,180 @@
+import * as React from 'react';
+import { Table, notification, Modal, Popconfirm } from 'component/antd';
+import moment from 'moment';
+import { alarm } from 'store/alarm';
+import { wrapper } from 'store';
+import Url from 'lib/url-parser';
+import { IMonitorSilences, IXFormWrapper } from 'types/base-type';
+import { observer } from 'mobx-react';
+import './index.less';
+import { timeFormat } from 'constants/strategy';
+
+@observer
+export class ShieldHistory extends React.Component {
+  public id: number = null;
+
+  private xFormWrapper: IXFormWrapper;
+
+  constructor(props: any) {
+    super(props);
+    const url = Url();
+    this.id = Number(url.search.id);
+  }
+
+  public silencesDetail(record: IMonitorSilences) {
+    alarm.getSilencesDetail(record.silenceId).then((data) => {
+      if (alarm.silencesDetail) {
+        this.modifyInfo(alarm.silencesDetail);
+      }
+    });
+  }
+
+  public modifyInfo(record: IMonitorSilences) {
+    Modal.info({
+      title: '详情',
+      content: (
+        <ul className="monitor-detail">
+          <li><b>告警名称：</b>{record.monitorName}</li>
+          <li><b>开始时间：</b>{moment(record.startTime).format(timeFormat)}</li>
+          <li><b>结束时间：</b>{moment(record.endTime).format(timeFormat)}</li>
+          <li><b>说明：</b>{record.description}</li>
+        </ul>
+      ),
+    });
+  }
+
+  public modifyMonitor(record: IMonitorSilences) {
+    this.xFormWrapper = {
+      formMap: [
+        {
+          key: 'monitorName',
+          label: '告警名称',
+          rules: [{
+            required: true,
+            message: '请输入告警名称',
+          }],
+          attrs: {
+            disabled: true,
+          },
+        },
+        {
+          key: 'beginEndTime',
+          label: '开始～结束时间',
+          type: 'range_picker',
+          rules: [{
+            required: true,
+            message: '请输入开始～结束时间',
+          }],
+          attrs: {
+            placeholder: ['开始时间', '结束时间'],
+            format: timeFormat,
+            showTime: true,
+            disabled: false,
+            ranges: {
+              '1小时': [moment(), moment().add(1, 'hour')],
+              '2小时': [moment(), moment().add(2, 'hour')],
+              '6小时': [moment(), moment().add(6, 'hour')],
+              '12小时': [moment(), moment().add(12, 'hour')],
+              '1天': [moment(), moment().add(1, 'day')],
+              '2天': [moment(), moment().add(7, 'day')],
+              '7天': [moment(), moment().add(7, 'day')],
+            },
+          },
+        },
+        {
+          key: 'description',
+          label: '说明',
+          type: 'text_area',
+          rules: [{
+            required: true,
+          }],
+          attrs: {
+            disabled: false,
+            placeholder: '请输入备注',
+          },
+        },
+      ],
+      formData: {
+        monitorName: record.monitorName,
+        beginEndTime: [moment(record.startTime), moment(record.endTime)],
+        description: record.description,
+      },
+      okText: '确认',
+      visible: true,
+      width: 600,
+      title: '编辑',
+      onSubmit: (value: any) => {
+        const params = {
+          description: value.description,
+          startTime: +moment(value.beginEndTime[0]).format('x'),
+          endTime:  +moment(value.beginEndTime[1]).format('x'),
+          id: record.silenceId,
+          monitorId: record.monitorId,
+        } as IMonitorSilences;
+        alarm.modifyMask(params, this.id).then(data => {
+          notification.success({ message: '修改成功' });
+        });
+      },
+    };
+    wrapper.open(this.xFormWrapper);
+  }
+
+  public deleteSilences(record: IMonitorSilences) {
+    alarm.deleteSilences(this.id, record.silenceId).then(data => {
+      notification.success({ message: '删除成功' });
+    });
+  }
+
+  public componentDidMount() {
+    alarm.getMonitorSilences(this.id);
+  }
+
+  public render() {
+    const monitorSilences: IMonitorSilences[] = alarm.monitorSilences ? alarm.monitorSilences : [];
+    const monitorColumns = [
+      {
+        title: '监控名称',
+        dataIndex: 'monitorName',
+        key: 'monitorName',
+        render: (text: string) => <span>{text}</span>,
+      }, {
+        title: '开始时间',
+        dataIndex: 'startTime',
+        key: 'startTime',
+        render: (t: number) => moment(t).format(timeFormat),
+      }, {
+        title: '结束时间',
+        dataIndex: 'endTime',
+        key: 'endTime',
+        render: (t: number) => moment(t).format(timeFormat),
+      }, {
+        title: '备注',
+        dataIndex: 'description',
+        key: 'description',
+      }, {
+        title: '操作',
+        dataIndex: 'option',
+        key: 'option',
+        render: (action: any, record: IMonitorSilences) => {
+          return(
+            <>
+              <a onClick={() => this.modifyMonitor(record)} className="action-button">修改</a>
+              <a onClick={() => this.silencesDetail(record)} className="action-button">详情</a>
+              <Popconfirm
+                title="确定删除？"
+                onConfirm={() => this.deleteSilences(record)}
+              >
+                <a>删除</a>
+              </Popconfirm>
+            </>
+          );
+        },
+      },
+    ];
+    return(
+      <>
+        <Table dataSource={monitorSilences} columns={monitorColumns} />
+      </>
+    );
+  }
+}