报警组下拉多选报警实例

dlink-admin/src/main/java/com/dlink/controller/AlertInstanceController.java

@@ -8,6 +8,7 @@ import com.fasterxml.jackson.databind.JsonNode;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.DeleteMapping;
+import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.PutMapping;
 import org.springframework.web.bind.annotation.RequestBody;
@@ -81,4 +82,12 @@ public class AlertInstanceController {
         alertInstance = alertInstanceService.getById(alertInstance.getId());
         return Result.succeed(alertInstance,"获取成功");
     }
+
+    /**
+     * 获取可用的报警实例列表
+     */
+    @GetMapping("/listEnabledAll")
+    public Result listEnabledAll() {
+        return Result.succeed(alertInstanceService.listEnabledAll(),"获取成功");
+    }
 }

dlink-admin/src/main/java/com/dlink/service/AlertInstanceService.java

@@ -3,6 +3,8 @@ package com.dlink.service;
 import com.dlink.db.service.ISuperService;
 import com.dlink.model.AlertInstance;
 
+import java.util.List;
+
 /**
  * AlertInstanceService
  *
@@ -10,4 +12,6 @@ import com.dlink.model.AlertInstance;
  * @since 2022/2/24 19:52
  **/
 public interface AlertInstanceService extends ISuperService<AlertInstance> {
+
+    List<AlertInstance> listEnabledAll();
 }

dlink-admin/src/main/java/com/dlink/service/impl/AlertInstanceServiceImpl.java

 package com.dlink.service.impl;
 
+import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.dlink.db.service.impl.SuperServiceImpl;
 import com.dlink.mapper.AlertInstanceMapper;
 import com.dlink.model.AlertInstance;
 import com.dlink.service.AlertInstanceService;
 import org.springframework.stereotype.Service;
 
+import java.util.List;
+
 /**
  * AlertInstanceServiceImpl
  *
@@ -14,4 +17,8 @@ import org.springframework.stereotype.Service;
  **/
 @Service
 public class AlertInstanceServiceImpl extends SuperServiceImpl<AlertInstanceMapper, AlertInstance> implements AlertInstanceService {
+    @Override
+    public List<AlertInstance> listEnabledAll() {
+        return list(new QueryWrapper<AlertInstance>().eq("enabled",1));
+    }
 }

dlink-web/src/components/Studio/StudioEvent/DDL.ts

@@ -164,6 +164,16 @@ export function showJars(dispatch: any) {
     });
   });
 }
+/*--- 刷新 报警实例 ---*/
+export function showAlertInstance(dispatch: any) {
+  const res = getData('api/alertInstance/listEnabledAll');
+  res.then((result) => {
+    result.datas && dispatch && dispatch({
+      type: "Alert/saveInstance",
+      payload: result.datas,
+    });
+  });
+}
 /*--- 刷新 元数据表 ---*/
 export function showMetaDataTable(id:number) {
   return getData('api/database/getSchemasAndTables',{id:id});

dlink-web/src/components/Studio/index.tsx

@@ -12,7 +12,7 @@ import StudioLeftTool from "./StudioLeftTool";
 import StudioRightTool from "./StudioRightTool";
 import {
   listSession, showCluster, showDataBase, getFillAllByVersion,
-  showClusterConfiguration, showSessionCluster, showJars, showEnv
+  showClusterConfiguration, showSessionCluster, showJars, showEnv,showAlertInstance
 } from "@/components/Studio/StudioEvent/DDL";
 import {loadSettings} from "@/pages/Settings/function";
 import DraggleLayout from "@/components/DraggleLayout";
@@ -59,6 +59,7 @@ const Studio = (props: any) => {
     showDataBase(dispatch);
     listSession(dispatch);
     showJars(dispatch);
+    showAlertInstance(dispatch);
     showEnv(dispatch);
     onResize();
   }, []);

dlink-web/src/pages/AlertGroup/components/AlertGroupForm.tsx

 import React, {useEffect, useState} from 'react';
-import {Form, Button, Input, Modal, Select,Divider,Switch} from 'antd';
+import {Form, Button, Input, Modal, Select,Tag,Switch} from 'antd';
 import {AlertGroupTableListItem} from "@/pages/AlertGroup/data";
+import {JarStateType} from "@/pages/Jar/model";
+import {connect} from "umi";
+import {StateType} from "@/pages/FlinkSqlStudio/model";
+import {AlertStateType} from "@/pages/AlertInstance/model";
+import {AlertInstanceTableListItem} from "@/pages/AlertInstance/data";
+import {buildFormData, getFormData} from "@/pages/AlertGroup/function";
 
 export type AlertGroupFormProps = {
   onCancel: (flag?: boolean) => void;
   onSubmit: (values: Partial<AlertGroupTableListItem>) => void;
   modalVisible: boolean;
   values: Partial<AlertGroupTableListItem>;
+  instance: AlertInstanceTableListItem[];
 };
 const Option = Select.Option;
 
@@ -30,12 +37,24 @@ const AlertGroupForm: React.FC<AlertGroupFormProps> = (props) => {
     onSubmit: handleSubmit,
     onCancel: handleModalVisible,
     modalVisible,
+    instance,
   } = props;
 
+  const getAlertInstanceOptions = () => {
+    const itemList = [];
+    for (const item of instance) {
+      const tag = (<><Tag color="processing">{item.type}</Tag>{item.name}</>);
+      itemList.push(<Option key={item.id} value={item.id.toString()} label={tag}>
+        {tag}
+      </Option>)
+    }
+    return itemList;
+  };
+
   const submitForm = async () => {
     const fieldsValue = await form.validateFields();
-    setFormVals({...formVals, ...fieldsValue});
-    handleSubmit({...formVals, ...fieldsValue});
+    setFormVals(buildFormData(formVals,fieldsValue));
+    handleSubmit(buildFormData(formVals,fieldsValue));
   };
 
   const renderContent = (formVals) => {
@@ -52,7 +71,14 @@ const AlertGroupForm: React.FC<AlertGroupFormProps> = (props) => {
           label="报警实例"
           help="请选择报警组实例"
         >
-          <Input placeholder="请选择报警实例"/>
+          <Select
+            mode="multiple"
+            style={{width: '100%'}}
+            placeholder="请选择报警实例"
+            optionLabelProp="label"
+          >
+            {getAlertInstanceOptions()}
+          </Select>
         </Form.Item>
         <Form.Item
           name="note"
@@ -95,12 +121,14 @@ const AlertGroupForm: React.FC<AlertGroupFormProps> = (props) => {
       <Form
         {...formLayout}
         form={form}
-        initialValues={formVals}
+        initialValues={getFormData(formVals)}
       >
-        {renderContent(formVals)}
+        {renderContent(getFormData(formVals))}
       </Form>
     </Modal>
   );
 };
 
-export default AlertGroupForm;
+export default connect(({Alert}: { Alert: AlertStateType }) => ({
+  instance: Alert.instance,
+})) (AlertGroupForm);

dlink-web/src/pages/AlertGroup/function.ts

+import {AlertGroupTableListItem} from "@/pages/AlertGroup/data";
+
+export const getFormData = (values: AlertGroupTableListItem) => {
+  let alertInstanceIds:string [] = [];
+  if(values&&values.alertInstanceIds&&values.alertInstanceIds!=''){
+    alertInstanceIds = values.alertInstanceIds.split(',');
+  }
+  return {...values,alertInstanceIds:alertInstanceIds};
+}
+
+export const buildFormData = (values: AlertGroupTableListItem,params: any) => {
+  let newValue = values;
+  if(params.alertInstanceIds){
+    newValue.alertInstanceIds = params.alertInstanceIds.join(',');
+    delete params.alertInstanceIds;
+  }
+  return {...newValue,...params};
+}

dlink-web/src/pages/AlertGroup/index.tsx

@@ -83,6 +83,9 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
       title: '报警实例',
       sorter: true,
       dataIndex: 'alertInstanceIds',
+      hideInTable: true,
+      hideInForm: true,
+      hideInSearch: true,
     },
     {
       title: '注释',
@@ -286,7 +289,7 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
         )}
       </Drawer>
     </PageContainer>
-);
+  );
 };
 
 export default AlertGroupTableList;