Merge branch 'DataLinkDC:dev' into dev

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/controller/JobInstanceController.java

@@ -2,6 +2,7 @@ package com.dlink.controller;
 
 import com.dlink.common.result.ProTableResult;
 import com.dlink.common.result.Result;
+import com.dlink.model.Jar;
 import com.dlink.model.JobInstance;
 import com.dlink.service.JobInstanceService;
 import com.fasterxml.jackson.databind.JsonNode;
@@ -23,14 +24,14 @@ import java.util.List;
 @RequestMapping("/api/jobInstance")
 public class JobInstanceController {
     @Autowired
-    private JobInstanceService JobInstanceService;
+    private JobInstanceService jobInstanceService;
 
     /**
      * 动态查询列表
      */
     @PostMapping
     public ProTableResult<JobInstance> listJobInstances(@RequestBody JsonNode para) {
-        return JobInstanceService.selectForProTable(para);
+        return jobInstanceService.selectForProTable(para);
     }
 
     /**
@@ -42,7 +43,7 @@ public class JobInstanceController {
             List<Integer> error = new ArrayList<>();
             for (final JsonNode item : para){
                 Integer id = item.asInt();
-                if(!JobInstanceService.removeById(id)){
+                if(!jobInstanceService.removeById(id)){
                     error.add(id);
                 }
             }
@@ -61,7 +62,15 @@ public class JobInstanceController {
      */
     @PostMapping("/getOneById")
     public Result getOneById(@RequestBody JobInstance JobInstance) throws Exception {
-        JobInstance = JobInstanceService.getById(JobInstance.getId());
+        JobInstance = jobInstanceService.getById(JobInstance.getId());
         return Result.succeed(JobInstance,"获取成功");
     }
+
+    /**
+     * 获取状态统计信息
+     */
+    @GetMapping("/getStatusCount")
+    public Result getStatusCount() {
+        return Result.succeed(jobInstanceService.getStatusCount(),"获取成功");
+    }
 }

dlink-admin/src/main/java/com/dlink/mapper/JobInstanceMapper.java

@@ -2,8 +2,11 @@ package com.dlink.mapper;
 
 import com.dlink.db.mapper.SuperMapper;
 import com.dlink.model.JobInstance;
+import com.dlink.model.JobInstanceCount;
 import org.apache.ibatis.annotations.Mapper;
 
+import java.util.List;
+
 /**
  * JobInstanceMapper
  *
@@ -12,4 +15,6 @@ import org.apache.ibatis.annotations.Mapper;
  */
 @Mapper
 public interface JobInstanceMapper extends SuperMapper<JobInstance> {
+
+    List<JobInstanceCount> countStatus();
 }

dlink-admin/src/main/java/com/dlink/model/JobInstance.java

@@ -49,6 +49,17 @@ public class JobInstance implements Serializable {
 
     private LocalDateTime finishTime;
 
+    private Long duration;
+
     private Integer failed_restart_count;
 
+    @TableField(exist = false)
+    private String type;
+
+    @TableField(exist = false)
+    private String clusterAlias;
+
+    @TableField(exist = false)
+    private String jobManagerAddress;
+
 }

dlink-admin/src/main/java/com/dlink/model/JobInstanceCount.java

+package com.dlink.model;
+
+/**
+ * JobInstanceCount
+ *
+ * @author wenmo
+ * @since 2022/2/28 22:20
+ */
+public class JobInstanceCount {
+
+    private String status;
+    private Integer counts;
+
+    public JobInstanceCount() {
+    }
+
+    public JobInstanceCount(String status, Integer counts) {
+        this.status = status;
+        this.counts = counts;
+    }
+
+    public String getStatus() {
+        return status;
+    }
+
+    public void setStatus(String status) {
+        this.status = status;
+    }
+
+    public Integer getCounts() {
+        return counts;
+    }
+
+    public void setCounts(Integer counts) {
+        this.counts = counts;
+    }
+}

dlink-admin/src/main/java/com/dlink/model/JobInstanceStatus.java

+package com.dlink.model;
+
+/**
+ * JobInstanceStatus
+ *
+ * @author wenmo
+ * @since 2022/2/28 22:25
+ */
+public class JobInstanceStatus {
+    private Integer all = 0;
+    private Integer initializing = 0;
+    private Integer running = 0;
+    private Integer finished = 0;
+    private Integer failed = 0;
+    private Integer canceled = 0;
+
+    public JobInstanceStatus() {
+    }
+
+    public JobInstanceStatus(Integer all, Integer initializing, Integer running, Integer finished, Integer failed, Integer canceled) {
+        this.all = all;
+        this.initializing = initializing;
+        this.running = running;
+        this.finished = finished;
+        this.failed = failed;
+        this.canceled = canceled;
+    }
+
+    public Integer getAll() {
+        return all;
+    }
+
+    public void setAll(Integer all) {
+        this.all = all;
+    }
+
+    public Integer getInitializing() {
+        return initializing;
+    }
+
+    public void setInitializing(Integer initializing) {
+        this.initializing = initializing;
+    }
+
+    public Integer getRunning() {
+        return running;
+    }
+
+    public void setRunning(Integer running) {
+        this.running = running;
+    }
+
+    public Integer getFinished() {
+        return finished;
+    }
+
+    public void setFinished(Integer finished) {
+        this.finished = finished;
+    }
+
+    public Integer getFailed() {
+        return failed;
+    }
+
+    public void setFailed(Integer failed) {
+        this.failed = failed;
+    }
+
+    public Integer getCanceled() {
+        return canceled;
+    }
+
+    public void setCanceled(Integer canceled) {
+        this.canceled = canceled;
+    }
+}

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/JobInstanceService.java

@@ -2,6 +2,7 @@ package com.dlink.service;
 
 import com.dlink.db.service.ISuperService;
 import com.dlink.model.JobInstance;
+import com.dlink.model.JobInstanceStatus;
 
 /**
  * JobInstanceService
@@ -10,4 +11,6 @@ import com.dlink.model.JobInstance;
  * @since 2022/2/2 13:52
  */
 public interface JobInstanceService extends ISuperService<JobInstance> {
+
+    JobInstanceStatus getStatusCount();
 }

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-admin/src/main/java/com/dlink/service/impl/JobInstanceServiceImpl.java

 package com.dlink.service.impl;
 
+import com.dlink.assertion.Asserts;
 import com.dlink.db.service.impl.SuperServiceImpl;
 import com.dlink.mapper.JobInstanceMapper;
 import com.dlink.model.JobInstance;
+import com.dlink.model.JobInstanceCount;
+import com.dlink.model.JobInstanceStatus;
+import com.dlink.model.JobStatus;
 import com.dlink.service.JobInstanceService;
 import org.springframework.stereotype.Service;
 
+import java.util.List;
+
 /**
  * JobInstanceServiceImpl
  *
@@ -14,4 +20,32 @@ import org.springframework.stereotype.Service;
  */
 @Service
 public class JobInstanceServiceImpl extends SuperServiceImpl<JobInstanceMapper, JobInstance> implements JobInstanceService {
+    @Override
+    public JobInstanceStatus getStatusCount() {
+        List<JobInstanceCount> jobInstanceCounts = baseMapper.countStatus();
+        JobInstanceStatus jobInstanceStatus = new JobInstanceStatus();
+        Integer total = 0;
+        for (JobInstanceCount item : jobInstanceCounts) {
+            Integer counts = Asserts.isNull(item.getCounts())?0:item.getCounts();
+            total += counts;
+            switch (JobStatus.get(item.getStatus())) {
+                case INITIALIZING:
+                    jobInstanceStatus.setInitializing(counts);
+                    break;
+                case RUNNING:
+                    jobInstanceStatus.setRunning(counts);
+                    break;
+                case FINISHED:
+                    jobInstanceStatus.setFinished(counts);
+                    break;
+                case FAILED:
+                    jobInstanceStatus.setFailed(counts);
+                    break;
+                case CANCELED:
+                    jobInstanceStatus.setCanceled(counts);
+            }
+        }
+        jobInstanceStatus.setAll(total);
+        return jobInstanceStatus;
+    }
 }

dlink-admin/src/main/resources/mapper/JobInstanceMapper.xml

@@ -4,11 +4,26 @@
 
     <select id="selectForProTable" resultType="com.dlink.model.JobInstance">
         select
-        a.*
+        a.*,
+        dh.type as type,
+        (select dc.alias FROM dlink_cluster dc where dc.id=a.cluster_id) as clusterAlias
         from
         dlink_job_instance a
+        left join dlink_history dh on a.history_id = dh.id
         <where>
             1=1
+            <if test='param.status!=null and param.status!=""'>
+                and a.status = #{param.status}
+            </if>
+            <if test='param.type!=null and param.type!=""'>
+                and dh.type = #{param.type}
+            </if>
+            <if test='param.name!=null and param.name!=""'>
+                and a.name like "%${param.name}%"
+            </if>
+            <if test='param.jid!=null and param.jid!=""'>
+                and a.jid like "%${param.jid}%"
+            </if>
             <if test='param.createTime!=null and param.createTime!=""'>
                 and a.create_time <![CDATA[>=]]> str_to_date( #{param.createTime},'%Y-%m-%d %H:%i:%s')
                 and a.create_time <![CDATA[<=]]> str_to_date( #{param.createTime},'%Y-%m-%d %H:%i:%s')
@@ -25,4 +40,13 @@
             </if>
         </where>
     </select>
+
+    <select id="countStatus" resultType="com.dlink.model.JobInstanceCount">
+        select
+        status,
+        count(1) as counts
+        from
+        dlink_job_instance
+        group by status
+    </select>
 </mapper>

dlink-common/src/main/java/com/dlink/model/JobStatus.java

 package com.dlink.model;
 
+import com.dlink.assertion.Asserts;
+
 /**
  * JobState
  *
@@ -78,4 +80,13 @@ public enum JobStatus {
     public String getValue() {
         return value;
     }
+
+    public static JobStatus get(String value){
+        for (JobStatus type : JobStatus.values()) {
+            if(Asserts.isEqualsIgnoreCase(type.getValue(),value)){
+                return type;
+            }
+        }
+        return JobStatus.UNKNOWN;
+    }
 }

dlink-doc/sql/dlink.sql

@@ -317,7 +317,8 @@ create table dlink_job_instance
     history_id           int         null comment '提交历史ID',
     create_time          datetime    null comment '创建时间',
     update_time          datetime    null comment '更新时间',
-    finish_time          int         null comment '完成时间',
+    finish_time          datetime    null comment '完成时间',
+    duration             bigint      null comment '耗时',
     error                text        null comment '异常日志',
     failed_restart_count int         null comment '重启次数'
 ) comment '作业实例';

dlink-doc/sql/dlink_history.sql

@@ -510,7 +510,7 @@ create table dlink_job_instance
     history_id           int         null comment '提交历史ID',
     create_time          datetime    null comment '创建时间',
     update_time          datetime    null comment '更新时间',
-    finish_time          int         null comment '完成时间',
+    finish_time          datetime    null comment '完成时间',
     error                text        null comment '异常日志',
     failed_restart_count int         null comment '重启次数'
 ) comment '作业实例';
@@ -591,5 +591,10 @@ create table dlink_alert_history
 -- 0.6.0-SNAPSHOT 2022-02-25
 -- ----------------------------
 ALTER TABLE `dlink_job_instance` MODIFY COLUMN name varchar(255) NULL COMMENT '作业实例名';
+-- ----------------------------
+-- 0.6.0-SNAPSHOT 2022-02-28
+-- ----------------------------
+ALTER TABLE `dlink_job_instance`
+    ADD COLUMN `duration` BIGINT NULL COMMENT '耗时' AFTER `finish_time`;
 
 SET FOREIGN_KEY_CHECKS = 1;

dlink-web/config/routes.ts

@@ -23,18 +23,10 @@ export default [
     component: './FlinkSqlStudio',
   },
   {
-    path: '/taskcenter',
-    name: 'taskcenter',
-    icon: 'partition',
-    routes: [
-      /*{
-    path: '/taskcenter/task',
-    name: 'task',
-    icon: 'task',
-    component: './Task',
-  },*/
-
-    ],
+    path: '/devops',
+    name: 'devops',
+    icon: 'control',
+    component: './DevOps',
   },
   {
     path: '/registration',
@@ -45,13 +37,18 @@ export default [
         path: '/registration/cluster',
         name: 'cluster',
         icon: 'cluster',
-        component: './Cluster',
-      },
-      {
-        path: '/registration/clusterConfiguration',
-        name: 'clusterConfiguration',
-        icon: 'setting',
-        component: './ClusterConfiguration',
+        routes: [
+          {
+            path: '/registration/cluster/clusterInstance',
+            name: 'clusterInstance',
+            component: './Cluster',
+          },
+          {
+            path: '/registration/cluster/clusterConfiguration',
+            name: 'clusterConfiguration',
+            component: './ClusterConfiguration',
+          },
+        ],
       },
       {
         path: '/registration/jar',
@@ -73,13 +70,11 @@ export default [
           {
             path: '/registration/alert/alertInstance',
             name: 'alertInstance',
-            icon: 'task',
             component: './AlertInstance',
           },
           {
             path: '/registration/alert/alertGroup',
             name: 'alertGroup',
-            icon: 'task',
             component: './AlertGroup',
           },
         ],

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/locales/zh-CN/menu.ts

@@ -51,16 +51,16 @@ export default {
   'menu.editor.koni': '拓扑编辑器',
   'menu.demo': 'Demo 开发模板',
   'menu.registration': '注册中心',
-  'menu.registration.cluster': '集群实例',
-  'menu.registration.clusterConfiguration': '集群配置',
+  'menu.registration.cluster': '集群管理',
+  'menu.registration.cluster.clusterInstance': '集群实例管理',
+  'menu.registration.cluster.clusterConfiguration': '集群配置管理',
   'menu.registration.database': '数据源管理',
   'menu.registration.alert': '报警管理',
   'menu.registration.alert.alertInstance': '报警实例管理',
   'menu.registration.alert.alertGroup': '报警组管理',
   'menu.studio': 'FlinkSql IDE',
   'menu.flinksqlstudio': 'FlinkSQL Studio',
-  'menu.taskcenter': '作业中心',
-  'menu.taskcenter.task': '作业管理',
+  'menu.devops': '运维中心',
   'menu.registration.jar': 'Jar 管理',
   'menu.registration.document': '文档管理',
   'menu.settings': '系统设置',

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;

dlink-web/src/pages/DevOps/JobInstanceTable/index.tsx

+import {Tag} from 'antd';
+import {
+  CheckCircleOutlined,
+  SyncOutlined, CloseCircleOutlined, MinusCircleOutlined, ClockCircleOutlined, DownOutlined
+} from "@ant-design/icons";
+import {queryData} from "@/components/Common/crud";
+import React, {useState} from "react";
+import type { ProColumns } from '@ant-design/pro-table';
+import ProTable from "@ant-design/pro-table";
+import {JobInstanceTableListItem} from "@/pages/DevOps/data";
+
+const url = '/api/jobInstance';
+const JobInstanceTable = (props: any) => {
+
+  const {status, dispatch} = props;
+
+  const getColumns = () => {
+    const columns: ProColumns<JobInstanceTableListItem>[]  = [{
+      title: "作业名",
+      dataIndex: "name",
+      sorter: true,
+    },{
+      title: "运行模式",
+      dataIndex: "type",
+      sorter: true,
+    },{
+      title: "集群实例",
+      dataIndex: "clusterAlias",
+      sorter: true,
+    },{
+      title: "作业ID",
+      dataIndex: "jid",
+      key: "jid",
+    }, {
+      title: "状态",
+      dataIndex: "status",
+      sorter: true,
+      render: (_, row) => {
+        return (
+          <>
+            {(row.status == 'FINISHED') ?
+              (<Tag icon={<CheckCircleOutlined />} color="success">
+                FINISHED
+              </Tag>) :
+              (row.status == 'RUNNING') ?
+                (<Tag icon={<SyncOutlined spin />} color="processing">
+                  RUNNING
+                </Tag>) :
+                (row.status == 'FAILED') ?
+                  (<Tag icon={<CloseCircleOutlined />} color="error">
+                    FAILED
+                  </Tag>) :
+                  (row.status == 'CANCELED') ?
+                    (<Tag icon={<MinusCircleOutlined />} color="default">
+                      CANCELED
+                    </Tag>) :
+                    (row.status == 'INITIALIZING') ?
+                      (<Tag icon={<ClockCircleOutlined />} color="default">
+                        INITIALIZING
+                      </Tag>) :(row.status == 'RESTARTING') ?
+                        (<Tag icon={<ClockCircleOutlined />} color="default">
+                          RESTARTING
+                        </Tag>) :
+                        (<Tag color="default">
+                          UNKNOWEN
+                        </Tag>)
+            }</>)
+          ;
+      }
+    }, {
+      title: "开始时间",
+      dataIndex: "createTime",
+      sorter: true,
+      valueType: 'dateTime',
+    }, {
+      title: "更新时间",
+      dataIndex: "updateTime",
+      sorter: true,
+      valueType: 'dateTime',
+      hideInTable: true
+    }, {
+      title: "结束时间",
+      dataIndex: "finishTime",
+      sorter: true,
+      valueType: 'dateTime',
+      hideInTable: true
+    }, {
+      title: "耗时",
+      dataIndex: "duration",
+      sorter: true,
+      valueType: 'second',
+    },];
+    return columns;
+  };
+
+  return (
+    <><ProTable
+      request={(params, sorter, filter) => queryData(url, {...params,status, sorter: {id: 'descend'}, filter})}
+      columns={getColumns()}
+      size="small"
+      search={false}
+      toolBarRender={false}
+      pagination={{
+        pageSize: 5,
+      }}
+    />
+    </>
+  );
+};
+
+export default JobInstanceTable;

dlink-web/src/pages/DevOps/data.d.ts

+export type JobInstanceTableListItem = {
+  id: number,
+  name: string,
+  taskId: number,
+  clusterId: number,
+  clusterAlias: string,
+  type: string,
+  jobManagerAddress: string,
+  jid: string,
+  status: string,
+  historyId: number,
+  error: string,
+  failedRestartCount: number,
+  duration: number,
+  createTime: Date,
+  updateTime: Date,
+  finishTime: Date,
+};
+
+export type StatusCount = {
+  all: number,
+  initializing: number,
+  running: number,
+  finished: number,
+  failed: number,
+  canceled: number,
+}

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

+import {Typography, Divider, Badge, Empty,Tag} from "antd";
+import ProCard, { StatisticCard } from '@ant-design/pro-card';
+import type { StatisticProps } from '@ant-design/pro-card';
+import JobInstanceTable from "./JobInstanceTable";
+import {getStatusCount} from "@/pages/DevOps/service";
+import {useEffect, useState} from "react";
+import {StatusCount} from "@/pages/DevOps/data";
+
+const { Statistic } = StatisticCard;
+
+const DevOps = (props:any) => {
+
+  // const {current} = props;
+  const statusCountDefault = [
+    { key: '', title: '全部', value: 0, total: true },
+    { key: 'INITIALIZING', status: 'default', title: '初始化', value: 0 },
+    { key: 'RUNNING', status: 'success', title: '运行中', value: 0 },
+    { key: 'FINISHED', status: 'processing', title: '已完成', value: 0 },
+    { key: 'FAILED', status: 'error', title: '发生异常', value: 0 },
+    { key: 'CANCELED', status: 'warning', title: '停止', value: 0 },
+  ];
+  const [statusCount, setStatusCount] = useState<any[]>(statusCountDefault);
+
+  const refreshStatusCount = () => {
+    const res = getStatusCount();
+    res.then((result)=>{
+      const statusCountData: StatusCount = result.datas;
+      const items: any = [
+        { key: '', title: '全部', value: statusCountData.all, total: true },
+        { key: 'INITIALIZING', status: 'default', title: '初始化', value: statusCountData.initializing },
+        { key: 'RUNNING', status: 'success', title: '运行中', value: statusCountData.running },
+        { key: 'FINISHED', status: 'processing', title: '已完成', value: statusCountData.finished },
+        { key: 'FAILED', status: 'error', title: '发生异常', value: statusCountData.failed },
+        { key: 'CANCELED', status: 'warning', title: '停止', value: statusCountData.canceled },
+      ];
+      setStatusCount(items);
+    });
+  }
+
+  useEffect(() => {
+    refreshStatusCount();
+  }, []);
+
+  return (
+    <ProCard
+      tabs={{
+        onChange: (key) => {
+        },
+      }}
+    >
+      {statusCount.map((item) => (
+        <ProCard.TabPane
+          style={{ width: '100%' }}
+          key={item.key}
+          tab={
+            <Statistic
+              layout="vertical"
+              title={item.title}
+              value={item.value}
+              status={item.status as StatisticProps['status']}
+              style={{ width: 120, borderRight: item.total ? '1px solid #f0f0f0' : undefined }}
+            />
+          }
+        >
+          <div
+            style={{
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: '#fafafa',
+            }}
+          >
+            <JobInstanceTable status={item.key}/>
+          </div>
+        </ProCard.TabPane>
+      ))}
+    </ProCard>
+  );
+};
+
+export default DevOps;

dlink-web/src/pages/DevOps/service.ts

+import {getData} from "@/components/Common/crud";
+
+export function getStatusCount() {
+  return getData("api/jobInstance/getStatusCount");
+}