Check label input box (#423)

ui/package.json

@@ -26,8 +26,7 @@
     "copy-to-clipboard": "^3.3.3",
     "i18next": "^23.11.1",
     "jsencrypt": "^3.3.2",
-    "lodash": "^4.17.21",
-    "moment": "^2.29.4"
+    "lodash": "^4.17.21"
   },
   "devDependencies": {
     "@eslint/js": "^9.0.0",

ui/src/components/InputLabelComp/index.tsx

@@ -0,0 +1,118 @@
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button, Checkbox, Col, Input, Popconfirm, Row, Space } from 'antd';
+import { clone } from 'lodash';
+
+type Label = {
+  [T: string]: string | boolean;
+};
+
+interface InputLabelCompPorps {
+  value?: Label[];
+  onChange?: (value: Label[]) => void;
+  onBlur?: () => void;
+  maxLength?: number;
+  defaulLabelName?: string;
+  regex?: boolean;
+}
+
+export default function InputLabelComp(props: InputLabelCompPorps) {
+  const {
+    value: labels = [],
+    onChange,
+    maxLength,
+    onBlur,
+    defaulLabelName = 'key',
+    regex,
+  } = props;
+
+  const labelNameInput = (value: string, index: number) => {
+    labels[index][defaulLabelName] = value;
+    onChange?.([...labels]);
+  };
+  const labelValueInput = (value: string, index: number) => {
+    labels[index].value = value;
+    onChange?.([...labels]);
+  };
+  const regChange = (checked: boolean, index: number) => {
+    labels[index].isRegex = checked;
+    onChange?.([...labels]);
+  };
+  const add = () => {
+    const temp: Label = {
+      [defaulLabelName]: '',
+      value: '',
+    };
+    if (regex) temp.isRegex = false;
+    onChange?.([...labels, temp]);
+  };
+  const remove = (index: number) => {
+    const newValue = clone(labels);
+    newValue.splice(index, 1);
+    onChange?.(newValue);
+  };
+  return (
+    <div>
+      <Space style={{ width: '100%', marginBottom: 12 }} direction="vertical">
+        {labels?.map((label, index) => (
+          <Row gutter={[12, 12]} style={{ alignItems: 'center' }} key={index}>
+            <Col span={11}>
+              <Input
+                onBlur={onBlur}
+                onChange={(e) => labelNameInput(e.target.value, index)}
+                placeholder="请输入标签名"
+              />
+            </Col>
+            <Col span={10}>
+              <Input
+                onBlur={onBlur}
+                onChange={(e) => labelValueInput(e.target.value, index)}
+                placeholder="请输入标签值"
+              />
+            </Col>
+            {regex && (
+              <Col span={2}>
+                <Checkbox
+                  onChange={(e) => regChange(e.target.checked, index)}
+                />
+                <span style={{ marginLeft: 8 }}>正则</span>
+              </Col>
+            )}
+            {labels.length > 1 && (
+              <Popconfirm
+                placement="left"
+                title="确定要删除该配置项吗？"
+                onConfirm={() => {
+                  remove(index);
+                }}
+                okText="删除"
+                cancelText="取消"
+                okButtonProps={{
+                  danger: true,
+                  ghost: true,
+                }}
+              >
+                <DeleteOutlined style={{ color: 'rgba(0, 0, 0, .45)' }} />
+              </Popconfirm>
+            )}
+          </Row>
+        ))}
+      </Space>
+
+      {!maxLength || labels.length < maxLength ? (
+        <Row>
+          <Col span={24}>
+            <Button
+              type="dashed"
+              block
+              onClick={add}
+              style={{ color: 'rgba(0,0,0,0.65)' }}
+            >
+              <PlusOutlined />
+              添加
+            </Button>
+          </Col>
+        </Row>
+      ) : null}
+    </div>
+  );
+}

ui/src/components/MonitorComp/LineGraph.tsx

@@ -4,7 +4,7 @@ import { queryMetricsReq } from '@/services';
 import { Line } from '@antv/g2plot';
 import { useInViewport, useUpdateEffect } from 'ahooks';
 import { Empty, Spin } from 'antd';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { useRef, useState } from 'react';
 
 type MetricType = {
@@ -91,14 +91,14 @@ export default function LineGraph({
         tickCount: POINT_NUMBER,
         label: {
           formatter: (text: number) => {
-            const time = moment.unix(Math.ceil(text / 1000)).format('HH:mm');
+            const time = dayjs.unix(Math.ceil(text / 1000)).format('HH:mm');
             return time;
           },
         },
       },
       tooltip: {
         title: (value: number) => {
-          return moment
+          return dayjs
             .unix(Math.ceil(value / 1000))
             .format('YYYY-MM-DD HH:mm:ss');
         },

ui/src/components/MonitorDetail/DataFilter.tsx

@@ -8,7 +8,6 @@ import localeZn from 'antd/es/date-picker/locale/zh_CN';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
-import moment from 'moment';
 import { useEffect,useState } from 'react';
 import { getLocale } from 'umi';
 import { caculateStep } from './helper';
@@ -238,24 +237,24 @@ export default function DataFilter({
   };
 
   const disabledDateTime: RangePickerProps['disabledTime'] = (_) => {
-    const isToday = _?.date() === moment().date();
+    const isToday = _?.date() === dayjs().date();
     if (!isToday)
       return {
         disabledHours: () => [],
         disabledMinutes: () => [],
         disabledSeconds: () => [],
       };
     return {
-      disabledHours: () => range(0, 24).splice(moment().hour() + 1, 24),
+      disabledHours: () => range(0, 24).splice(dayjs().hour() + 1, 24),
       disabledMinutes: (hour) => {
-        if (hour === moment().hour()) {
-          return range(0, 60).splice(moment().minute() + 1, 60);
+        if (hour === dayjs().hour()) {
+          return range(0, 60).splice(dayjs().minute() + 1, 60);
         }
         return [];
       },
       disabledSeconds: (hour, minute) => {
-        if (hour === moment().hour() && minute === moment().minute()) {
-          return range(0, 60).splice(moment().second(), 60);
+        if (hour === dayjs().hour() && minute === dayjs().minute()) {
+          return range(0, 60).splice(dayjs().second(), 60);
         }
         return [];
       },

ui/src/components/MonitorDetail/index.tsx

@@ -1,5 +1,5 @@
 import { useUpdateEffect } from 'ahooks';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { useEffect, useRef, useState } from 'react';
 
 import MonitorComp from '@/components/MonitorComp';
@@ -17,7 +17,7 @@ interface MonitorDetailProps {
 }
 
 const getDate = () => {
-  return moment
+  return dayjs
     .unix(Math.ceil(new Date().valueOf() / 1000))
     .format('YYYY-MM-DD HH:mm:ss');
 };

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

@@ -19,7 +19,7 @@ import {
   Typography,
 } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
-import moment from 'moment';
+import dayjs from 'dayjs'
 import AlarmFilter from '../AlarmFilter';
 import { sortEvents } from '../helper';
 const { Text } = Typography;
@@ -96,7 +96,7 @@ export default function Event() {
       key: 'startsAt',
       sorter: (preRecord, curRecord) => curRecord.startsAt - preRecord.startsAt,
       render: (startsAt: number) => (
-        <Text>{moment.unix(startsAt).format('YYYY-MM-DD HH:MM:SS')}</Text>
+        <Text>{dayjs.unix(startsAt).format('YYYY-MM-DD HH:MM:SS')}</Text>
       ),
     },
     {
@@ -105,7 +105,7 @@ export default function Event() {
       key: 'endsAt',
       sorter: (preRecord, curRecord) => curRecord.endsAt - preRecord.endsAt,
       render: (endsAt: number) => (
-        <Text>{moment.unix(endsAt).format('YYYY-MM-DD HH:MM:SS')}</Text>
+        <Text>{dayjs.unix(endsAt).format('YYYY-MM-DD HH:MM:SS')}</Text>
       ),
     },
     {

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

@@ -1,7 +1,7 @@
 import { alert } from '@/api';
-import type { RuleRule } from '@/api/generated';
+import type { CommonKVPair, RuleRule } from '@/api/generated';
 import AlertDrawer from '@/components/AlertDrawer';
-import InputLabel from '@/components/InputLabel';
+import InputLabelComp from '@/components/InputLabelComp';
 import { LEVER_OPTIONS_ALARM, SERVERITY_MAP } from '@/constants';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { useRequest } from 'ahooks';
@@ -243,12 +243,22 @@ export default function RuleDrawerForm({
                   <QuestionCircleOutlined />
                 </div>
               }
+              rules={[
+                {
+                  validator: (_, value:CommonKVPair[]) => {
+                    if (
+                      value.length &&
+                      value.find((item) => !item.key || !item.value)
+                    ) {
+                      return Promise.reject('请检查标签输入');
+                    }
+                    return Promise.resolve();
+                  },
+                },
+              ]}
+              name="labels"
             >
-              <InputLabel
-                wrapFormName="labels"
-                labelFormName="key"
-                valueFormName="value"
-              />
+              <InputLabelComp />
             </Form.Item>
           </Col>
         </Row>