Add labels/tags feature for environment variables

Agent-Logs-Url: https://github.com/whyour/qinglong/sessions/1436272f-a03a-45af-b57d-869a48ab537d

Co-authored-by: whyour <22700758+whyour@users.noreply.github.com>

back/api/env.ts

@@ -44,6 +44,7 @@ export default (app: Router) => {
             .required()
             .pattern(/^[a-zA-Z_][0-9a-zA-Z_]*$/),
           remarks: Joi.string().optional().allow(''),
+          labels: Joi.array().items(Joi.string()).optional(),
         }),
       ),
     }),
@@ -70,6 +71,7 @@ export default (app: Router) => {
         name: Joi.string().required(),
         remarks: Joi.string().optional().allow('').allow(null),
         id: Joi.number().required(),
+        labels: Joi.array().items(Joi.string()).optional(),
       }),
     }),
     async (req: Request, res: Response, next: NextFunction) => {
@@ -230,6 +232,46 @@ export default (app: Router) => {
     },
   );
 
+  route.post(
+    '/labels',
+    celebrate({
+      body: Joi.object({
+        ids: Joi.array().items(Joi.number().required()),
+        labels: Joi.array().items(Joi.string().required()),
+      }),
+    }),
+    async (req: Request, res: Response, next: NextFunction) => {
+      const logger: Logger = Container.get('logger');
+      try {
+        const envService = Container.get(EnvService);
+        const data = await envService.addLabels(req.body.ids, req.body.labels);
+        return res.send({ code: 200, data });
+      } catch (e) {
+        return next(e);
+      }
+    },
+  );
+
+  route.delete(
+    '/labels',
+    celebrate({
+      body: Joi.object({
+        ids: Joi.array().items(Joi.number().required()),
+        labels: Joi.array().items(Joi.string().required()),
+      }),
+    }),
+    async (req: Request, res: Response, next: NextFunction) => {
+      const logger: Logger = Container.get('logger');
+      try {
+        const envService = Container.get(EnvService);
+        const data = await envService.removeLabels(req.body.ids, req.body.labels);
+        return res.send({ code: 200, data });
+      } catch (e) {
+        return next(e);
+      }
+    },
+  );
+
   route.post(
     '/upload',
     upload.single('env'),

back/data/env.ts

@@ -10,6 +10,7 @@ export class Env {
   name?: string;
   remarks?: string;
   isPinned?: 1 | 0;
+  labels?: string[];
 
   constructor(options: Env) {
     this.value = options.value;
@@ -23,6 +24,7 @@ export class Env {
     this.name = options.name;
     this.remarks = options.remarks || '';
     this.isPinned = options.isPinned || 0;
+    this.labels = options.labels || [];
   }
 }
 
@@ -45,4 +47,5 @@ export const EnvModel = sequelize.define<EnvInstance>('Env', {
   name: { type: DataTypes.STRING, unique: 'compositeIndex' },
   remarks: DataTypes.STRING,
   isPinned: DataTypes.NUMBER,
+  labels: DataTypes.JSON,
 });

back/services/env.ts

@@ -199,6 +199,30 @@ export default class EnvService {
     await EnvModel.update({ isPinned: 0 }, { where: { id: ids } });
   }
 
+  public async addLabels(ids: number[], labels: string[]) {
+    const docs = await EnvModel.findAll({ where: { id: ids } });
+    for (const doc of docs) {
+      const env = doc.get({ plain: true });
+      await EnvModel.update(
+        { labels: Array.from(new Set((env.labels || []).concat(labels))) },
+        { where: { id: env.id } },
+      );
+    }
+    return await EnvModel.findAll({ where: { id: ids } });
+  }
+
+  public async removeLabels(ids: number[], labels: string[]) {
+    const docs = await EnvModel.findAll({ where: { id: ids } });
+    for (const doc of docs) {
+      const env = doc.get({ plain: true });
+      await EnvModel.update(
+        { labels: (env.labels || []).filter((label: string) => !labels.includes(label)) },
+        { where: { id: env.id } },
+      );
+    }
+    return await EnvModel.findAll({ where: { id: ids } });
+  }
+
   public async set_envs() {
     const envs = await this.envs('', {
       name: { [Op.not]: null },

src/pages/env/index.tsx

@@ -36,7 +36,7 @@ import { useVT } from 'virtualizedtableforantd4';
 import Copy from '../../components/copy';
 import EditNameModal from './editNameModal';
 import './index.less';
-import EnvModal from './modal';
+import EnvModal, { EnvLabelModal } from './modal';
 
 const { Paragraph } = Typography;
 const { Search } = Input;
@@ -121,6 +121,22 @@ const Env = () => {
         );
       },
     },
+    {
+      title: intl.get('标签'),
+      dataIndex: 'labels',
+      key: 'labels',
+      render: (labels: string[], record: any) => {
+        return (
+          <Space size={[0, 4]} wrap>
+            {labels?.filter((l) => l).map((label) => (
+              <Tag key={label} color="blue">
+                {label}
+              </Tag>
+            ))}
+          </Space>
+        );
+      },
+    },
     {
       title: intl.get('更新时间'),
       dataIndex: 'timestamp',
@@ -238,6 +254,7 @@ const Env = () => {
   const [loading, setLoading] = useState(true);
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [isEditNameModalVisible, setIsEditNameModalVisible] = useState(false);
+  const [isLabelModalVisible, setIsLabelModalVisible] = useState(false);
   const [editedEnv, setEditedEnv] = useState();
   const [selectedRowIds, setSelectedRowIds] = useState<string[]>([]);
   const [searchText, setSearchText] = useState('');
@@ -622,6 +639,13 @@ const Env = () => {
             >
               {intl.get('批量修改变量名称')}
             </Button>
+            <Button
+              type="primary"
+              style={{ marginBottom: 5, marginLeft: 8 }}
+              onClick={() => setIsLabelModalVisible(true)}
+            >
+              {intl.get('批量修改标签')}
+            </Button>
             <Button
               type="primary"
               style={{ marginBottom: 5, marginLeft: 8 }}
@@ -700,6 +724,15 @@ const Env = () => {
           ids={selectedRowIds}
         />
       )}
+      {isLabelModalVisible && (
+        <EnvLabelModal
+          handleCancel={(needUpdate) => {
+            setIsLabelModalVisible(false);
+            if (needUpdate) getEnvs();
+          }}
+          ids={selectedRowIds}
+        />
+      )}
     </PageContainer>
   );
 };

src/pages/env/modal.tsx

@@ -1,8 +1,9 @@
 import intl from 'react-intl-universal';
 import React, { useEffect, useState } from 'react';
-import { Modal, message, Input, Form, Radio } from 'antd';
+import { Modal, message, Input, Form, Radio, Button } from 'antd';
 import { request } from '@/utils/http';
 import config from '@/utils/config';
+import EditableTagGroup from '@/components/tag';
 
 const EnvModal = ({
   env,
@@ -16,7 +17,7 @@ const EnvModal = ({
 
   const handleOk = async (values: any) => {
     setLoading(true);
-    const { value, split, name, remarks } = values;
+    const { value, split, name, remarks, labels } = values;
     const method = env ? 'put' : 'post';
     let payload;
     if (!env) {
@@ -27,10 +28,11 @@ const EnvModal = ({
             name: name,
             value: x,
             remarks: remarks,
+            labels: labels || [],
           };
         });
       } else {
-        payload = [{ value, name, remarks }];
+        payload = [{ value, name, remarks, labels: labels || [] }];
       }
     } else {
       payload = { ...values, id: env.id };
@@ -123,9 +125,81 @@ const EnvModal = ({
         <Form.Item name="remarks" label={intl.get('备注')}>
           <Input placeholder={intl.get('请输入备注')} />
         </Form.Item>
+        <Form.Item name="labels" label={intl.get('标签')}>
+          <EditableTagGroup />
+        </Form.Item>
       </Form>
     </Modal>
   );
 };
 
-export default EnvModal;
+export { EnvModal as default };
+export const EnvLabelModal = ({
+  ids,
+  handleCancel,
+}: {
+  ids: Array<string>;
+  handleCancel: (needUpdate?: boolean) => void;
+}) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+
+  const update = async (action: 'delete' | 'post') => {
+    form
+      .validateFields()
+      .then(async (values) => {
+        setLoading(true);
+        const payload = { ids, labels: values.labels };
+        try {
+          const { code, data } = await request[action](
+            `${config.apiPrefix}envs/labels`,
+            payload,
+          );
+
+          if (code === 200) {
+            message.success(
+              action === 'post'
+                ? intl.get('添加Labels成功')
+                : intl.get('删除Labels成功'),
+            );
+            handleCancel(true);
+          }
+          setLoading(false);
+        } catch (error) {
+          setLoading(false);
+        }
+      })
+      .catch((info) => {
+        console.log('Validate Failed:', info);
+      });
+  };
+
+  const buttons = [
+    <Button key="cancel" onClick={() => handleCancel(false)}>{intl.get('取消')}</Button>,
+    <Button key="delete" type="primary" danger onClick={() => update('delete')}>
+      {intl.get('删除')}
+    </Button>,
+    <Button key="add" type="primary" onClick={() => update('post')}>
+      {intl.get('添加')}
+    </Button>,
+  ];
+
+  return (
+    <Modal
+      title={intl.get('批量修改标签')}
+      open={true}
+      footer={buttons}
+      centered
+      maskClosable={false}
+      forceRender
+      onCancel={() => handleCancel(false)}
+      confirmLoading={loading}
+    >
+      <Form form={form} layout="vertical" name="form_in_env_label_modal">
+        <Form.Item name="labels" label={intl.get('标签')}>
+          <EditableTagGroup />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};