报警组下拉多选报警实例

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: '注释',
@@ -153,84 +156,102 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
         actionRef={actionRef}
         rowKey="id"
         search={{
-        labelWidth: 120,
-      }}
+          labelWidth: 120,
+        }}
         toolBarRender={() => [
-        <Button type="primary" onClick={() => handleModalVisible(true)}>
-          <PlusOutlined/> 新建
-        </Button>,
-      ]}
+          <Button type="primary" onClick={() => handleModalVisible(true)}>
+            <PlusOutlined/> 新建
+          </Button>,
+        ]}
         request={(params, sorter, filter) => queryData(url, {...params, sorter, filter})}
         columns={columns}
         rowSelection={{
-        onChange: (_, selectedRows) => setSelectedRows(selectedRows),
-      }}
-        />
-        {selectedRowsState?.length > 0 && (
-          <FooterToolbar
-            extra={
-              <div>
-                已选择 <a style={{fontWeight: 600}}>{selectedRowsState.length}</a> 项&nbsp;&nbsp;
-                <span>
+          onChange: (_, selectedRows) => setSelectedRows(selectedRows),
+        }}
+      />
+      {selectedRowsState?.length > 0 && (
+        <FooterToolbar
+          extra={
+            <div>
+              已选择 <a style={{fontWeight: 600}}>{selectedRowsState.length}</a> 项&nbsp;&nbsp;
+              <span>
                 被禁用的集群配置共 {selectedRowsState.length - selectedRowsState.reduce((pre, item) => pre + (item.enabled ? 1 : 0), 0)} 人
               </span>
-              </div>
-            }
+            </div>
+          }
+        >
+          <Button type="primary" danger
+                  onClick={() => {
+                    Modal.confirm({
+                      title: '删除报警组',
+                      content: '确定删除选中的报警组吗？',
+                      okText: '确认',
+                      cancelText: '取消',
+                      onOk: async () => {
+                        await handleRemove(url, selectedRowsState);
+                        setSelectedRows([]);
+                        actionRef.current?.reloadAndRest?.();
+                      }
+                    });
+                  }}
           >
-            <Button type="primary" danger
-                    onClick={() => {
-                      Modal.confirm({
-                        title: '删除报警组',
-                        content: '确定删除选中的报警组吗？',
-                        okText: '确认',
-                        cancelText: '取消',
-                        onOk: async () => {
-                          await handleRemove(url, selectedRowsState);
-                          setSelectedRows([]);
-                          actionRef.current?.reloadAndRest?.();
-                        }
-                      });
-                    }}
-            >
-              批量删除
-            </Button>
-            <Button type="primary"
-                    onClick={() => {
-                      Modal.confirm({
-                        title: '启用报警组',
-                        content: '确定启用选中的报警组吗？',
-                        okText: '确认',
-                        cancelText: '取消',
-                        onOk: async () => {
-                          await updateEnabled(url, selectedRowsState, true);
-                          setSelectedRows([]);
-                          actionRef.current?.reloadAndRest?.();
-                        }
-                      });
-                    }}
-            >批量启用</Button>
-            <Button danger
-                    onClick={() => {
-                      Modal.confirm({
-                        title: '禁用报警组',
-                        content: '确定禁用选中的报警组吗？',
-                        okText: '确认',
-                        cancelText: '取消',
-                        onOk: async () => {
-                          await updateEnabled(url, selectedRowsState, false);
-                          setSelectedRows([]);
-                          actionRef.current?.reloadAndRest?.();
-                        }
-                      });
-                    }}
-            >批量禁用</Button>
-          </FooterToolbar>
-        )}
+            批量删除
+          </Button>
+          <Button type="primary"
+                  onClick={() => {
+                    Modal.confirm({
+                      title: '启用报警组',
+                      content: '确定启用选中的报警组吗？',
+                      okText: '确认',
+                      cancelText: '取消',
+                      onOk: async () => {
+                        await updateEnabled(url, selectedRowsState, true);
+                        setSelectedRows([]);
+                        actionRef.current?.reloadAndRest?.();
+                      }
+                    });
+                  }}
+          >批量启用</Button>
+          <Button danger
+                  onClick={() => {
+                    Modal.confirm({
+                      title: '禁用报警组',
+                      content: '确定禁用选中的报警组吗？',
+                      okText: '确认',
+                      cancelText: '取消',
+                      onOk: async () => {
+                        await updateEnabled(url, selectedRowsState, false);
+                        setSelectedRows([]);
+                        actionRef.current?.reloadAndRest?.();
+                      }
+                    });
+                  }}
+          >批量禁用</Button>
+        </FooterToolbar>
+      )}
+      <AlertGroupForm
+        onSubmit={async (value) => {
+          const success = await handleAddOrUpdate(url, value);
+          if (success) {
+            handleModalVisible(false);
+            setFormValues({});
+            if (actionRef.current) {
+              actionRef.current.reload();
+            }
+          }
+        }}
+        onCancel={() => {
+          handleModalVisible(false);
+        }}
+        modalVisible={modalVisible}
+        values={{}}
+      />
+      {formValues && Object.keys(formValues).length ? (
         <AlertGroupForm
           onSubmit={async (value) => {
             const success = await handleAddOrUpdate(url, value);
             if (success) {
-              handleModalVisible(false);
+              handleUpdateModalVisible(false);
               setFormValues({});
               if (actionRef.current) {
                 actionRef.current.reload();
@@ -238,55 +259,37 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
             }
           }}
           onCancel={() => {
-            handleModalVisible(false);
+            handleUpdateModalVisible(false);
+            setFormValues({});
           }}
-          modalVisible={modalVisible}
-          values={{}}
+          modalVisible={updateModalVisible}
+          values={formValues}
         />
-        {formValues && Object.keys(formValues).length ? (
-          <AlertGroupForm
-            onSubmit={async (value) => {
-              const success = await handleAddOrUpdate(url, value);
-              if (success) {
-                handleUpdateModalVisible(false);
-                setFormValues({});
-                if (actionRef.current) {
-                  actionRef.current.reload();
-                }
-              }
-            }}
-            onCancel={() => {
-              handleUpdateModalVisible(false);
-              setFormValues({});
-            }}
-            modalVisible={updateModalVisible}
-            values={formValues}
-          />
-        ): null}
-        <Drawer
-          width={600}
-          visible={!!row}
-          onClose={() => {
-            setRow(undefined);
-          }}
-          closable={false}
-        >
-          {row?.name && (
-            <ProDescriptions<AlertGroupTableListItem>
-              column={2}
-              title={row?.name}
-              request={async () => ({
+      ): null}
+      <Drawer
+        width={600}
+        visible={!!row}
+        onClose={() => {
+          setRow(undefined);
+        }}
+        closable={false}
+      >
+        {row?.name && (
+          <ProDescriptions<AlertGroupTableListItem>
+            column={2}
+            title={row?.name}
+            request={async () => ({
               data: row || {},
             })}
-              params={{
+            params={{
               id: row?.name,
             }}
-              columns={columns}
-              />
-              )}
-        </Drawer>
+            columns={columns}
+          />
+        )}
+      </Drawer>
     </PageContainer>
-);
+  );
 };
 
 export default AlertGroupTableList;