[Feature-649][admin,web] add taskManager tableForm of DevOps

 [Feature-649][admin,web] add taskManager tableForm of DevOps

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

 package com.dlink.model;
 
+import java.util.Set;
+
 /**
  * JobInfoDetail
  *
@@ -15,6 +17,7 @@ public class JobInfoDetail {
     private History history;
     private JobHistory jobHistory;
     private JobManagerConfiguration jobManagerConfiguration;
+    private Set<TaskManagerConfiguration> taskManagerConfiguration;
     private Integer refreshCount;
 
     public JobInfoDetail(Integer id) {
@@ -61,6 +64,15 @@ public class JobInfoDetail {
         return jobManagerConfiguration;
     }
 
+
+    public void setTaskManagerConfiguration(Set<TaskManagerConfiguration> taskManagerConfiguration) {
+        this.taskManagerConfiguration = taskManagerConfiguration;
+    }
+    public Set<TaskManagerConfiguration> getTaskManagerConfiguration() {
+        return taskManagerConfiguration;
+    }
+
+
     public History getHistory() {
         return history;
     }

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

+package com.dlink.model;/**
+ * @program: dlink
+ * @description:
+ * @author: zhumingye
+ * @create: 2022-06-27 11:41
+ */
+
+import lombok.Data;
+
+import java.util.Map;
+
+/**
+ * @program: dlink
+ * @description:
+ * @author: zhumingye
+ * @create: 2022-06-27 11:41
+ */
+
+@Data
+public class TaskContainerConfigInfo {
+
+    private Map<String, String> metrics ;
+
+    private String taskManagerLog;
+
+    private String taskManagerStdout;
+
+    private String taskManagerThreadDump;
+
+}

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

+package com.dlink.model;
+
+import lombok.Data;
+
+/**
+ * @program: dlink
+ * @description:
+ * @author: zhumingye
+ * @create: 2022-06-27 11:18
+ */
+
+@Data
+public class TaskManagerConfiguration {
+
+    private String containerId;
+    private String containerPath;
+    private Integer dataPort;
+    private Integer jmxPort;
+    private Long timeSinceLastHeartbeat;
+    private Integer slotsNumber;
+    private Integer freeSlots;
+
+    private String totalResource;
+    private String freeResource;
+    private String hardware;
+    private String memoryConfiguration;
+
+    private TaskContainerConfigInfo taskContainerConfigInfo;
+
+}

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

@@ -29,6 +29,7 @@ import com.dlink.result.SqlExplainResult;
 import com.dlink.service.*;
 import com.dlink.utils.CustomStringJavaCompiler;
 import com.dlink.utils.JSONUtil;
+import com.fasterxml.jackson.databind.JsonNode;
 import com.fasterxml.jackson.databind.node.ObjectNode;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.beans.factory.annotation.Value;
@@ -368,7 +369,7 @@ public class TaskServiceImpl extends SuperServiceImpl<TaskMapper, Task> implemen
             } else {
                 return Result.failed("上线失败，原因：" + jobResult.getError());
             }
-        }else if (JobLifeCycle.ONLINE.equalsValue(task.getStep())) {
+        } else if (JobLifeCycle.ONLINE.equalsValue(task.getStep())) {
             return Result.failed("上线失败，当前作业已上线。");
         }
         return Result.failed("上线失败，当前作业未发布。");
@@ -572,36 +573,23 @@ public class TaskServiceImpl extends SuperServiceImpl<TaskMapper, Task> implemen
             history.setConfig(JSONUtil.parseObject(history.getConfigJson()));
 
             JobManagerConfiguration jobManagerConfiguration = new JobManagerConfiguration();
-            if(Asserts.isNotNullString(history.getJobManagerAddress())) {
-                FlinkAPI flinkAPI = FlinkAPI.build(history.getJobManagerAddress());
 
-                Map<String, String> jobManagerMetricsMap = new HashMap<String, String>(); //获取jobManager metrics
-                List<LinkedHashMap> jobManagerMetricsItemsList = JSONUtil.toList(JSONUtil.toJsonString(flinkAPI.getJobManagerMetrics()), LinkedHashMap.class);
-                jobManagerMetricsItemsList.forEach(mapItems -> {
-                    String configKey = (String) mapItems.get("id");
-                    String configValue = (String) mapItems.get("value");
-                    if (Asserts.isNotNullString( configKey) && Asserts.isNotNullString(configValue)) {
-                        jobManagerMetricsMap.put(configKey, configValue);
-                    }
-                });
-                Map<String, String> jobManagerConfigMap = new HashMap<String, String>();//获取jobManager配置信息
-                List<LinkedHashMap> jobManagerConfigMapItemsList = JSONUtil.toList(JSONUtil.toJsonString(flinkAPI.getJobManagerConfig()), LinkedHashMap.class);
-                jobManagerConfigMapItemsList.forEach(mapItems -> {
-                    String configKey = (String) mapItems.get("key");
-                    String configValue = (String) mapItems.get("value");
-                    if (Asserts.isNotNullString( configKey) && Asserts.isNotNullString(configValue)) {
-                        jobManagerConfigMap.put(configKey, configValue);
-                    }
-                });
-                String jobMangerLog = flinkAPI.getJobManagerLog(); //获取jobManager日志
-                String jobManagerStdOut = flinkAPI.getJobManagerStdOut(); //获取jobManager标准输出日志
+            Set<TaskManagerConfiguration> taskManagerConfigurationList = new HashSet<>();
 
-                jobManagerConfiguration.setMetrics(jobManagerMetricsMap);
-                jobManagerConfiguration.setJobManagerConfig(jobManagerConfigMap);
-                jobManagerConfiguration.setJobManagerLog(jobMangerLog);
-                jobManagerConfiguration.setJobManagerStdout(jobManagerStdOut);
+            if (Asserts.isNotNullString(history.getJobManagerAddress())) { // 如果有jobManager地址，则使用该地址
+                FlinkAPI flinkAPI = FlinkAPI.build(history.getJobManagerAddress());
 
+                // 获取jobManager的配置信息 开始
+                buildJobManagerConfiguration(jobManagerConfiguration, flinkAPI);
                 jobInfoDetail.setJobManagerConfiguration(jobManagerConfiguration);
+                // 获取jobManager的配置信息 结束
+
+                // 获取taskManager的配置信息 开始
+                JsonNode taskManagerContainers = flinkAPI.getTaskManagers(); //获取taskManager列表
+                buildTaskManagerConfiguration(taskManagerConfigurationList, flinkAPI, taskManagerContainers);
+                jobInfoDetail.setTaskManagerConfiguration(taskManagerConfigurationList);
+                // 获取taskManager的配置信息 结束
+
             }
 
             if (Asserts.isNotNull(history) && Asserts.isNotNull(history.getClusterConfigurationId())) {
@@ -643,6 +631,119 @@ public class TaskServiceImpl extends SuperServiceImpl<TaskMapper, Task> implemen
         return jobInfoDetail.getInstance();
     }
 
+    /**
+     * @Author: zhumingye
+     * @date: 2022/6/27
+     * @Description: buildTaskManagerConfiguration
+     * @Params: [taskManagerConfigurationList, flinkAPI, taskManagerContainers]
+     * @return void
+     */
+    private void buildTaskManagerConfiguration(Set<TaskManagerConfiguration> taskManagerConfigurationList, FlinkAPI flinkAPI, JsonNode taskManagerContainers) {
+
+        if (Asserts.isNotNull(taskManagerContainers)) {
+            JsonNode taskmanagers = taskManagerContainers.get("taskmanagers");
+            for (JsonNode taskManagers : taskmanagers) {
+                TaskManagerConfiguration taskManagerConfiguration = new TaskManagerConfiguration();
+
+                /**
+                 * 解析 taskManager 的配置信息
+                 */
+                String containerId = taskManagers.get("id").asText();// 获取container id
+                String containerPath =  taskManagers.get("path").asText(); // 获取container path
+                Integer dataPort = taskManagers.get("dataPort").asInt(); // 获取container dataPort
+                Integer jmxPort =taskManagers.get("jmxPort").asInt(); // 获取container jmxPort
+                Long timeSinceLastHeartbeat =taskManagers.get("timeSinceLastHeartbeat").asLong(); // 获取container timeSinceLastHeartbeat
+                Integer slotsNumber =taskManagers.get("slotsNumber").asInt(); // 获取container slotsNumber
+                Integer freeSlots = taskManagers.get("freeSlots").asInt(); // 获取container freeSlots
+                String totalResource =  JSONUtil.toJsonString(taskManagers.get("totalResource")); // 获取container totalResource
+                String freeResource =  JSONUtil.toJsonString(taskManagers.get("freeResource") ); // 获取container freeResource
+                String hardware = JSONUtil.toJsonString(taskManagers.get("hardware") ); // 获取container hardware
+                String memoryConfiguration = JSONUtil.toJsonString(taskManagers.get("memoryConfiguration") ); // 获取container memoryConfiguration
+                Asserts.checkNull(containerId, "获取不到 containerId , containerId不能为空");
+                JsonNode taskManagerMetrics = flinkAPI.getTaskManagerMetrics(containerId);//获取taskManager metrics
+                String taskManagerLog = flinkAPI.getTaskManagerLog(containerId);//获取taskManager日志
+                String taskManagerThreadDumps = JSONUtil.toJsonString(flinkAPI.getTaskManagerThreadDump(containerId).get("threadInfos"));//获取taskManager线程dumps
+                String taskManagerStdOut = flinkAPI.getTaskManagerStdOut(containerId);//获取taskManager标准输出日志
+
+                Map<String, String> taskManagerMetricsMap = new HashMap<String, String>(); //获取taskManager metrics
+                List<LinkedHashMap> taskManagerMetricsItemsList = JSONUtil.toList(JSONUtil.toJsonString(taskManagerMetrics), LinkedHashMap.class);
+                taskManagerMetricsItemsList.forEach(mapItems -> {
+                    String configKey = (String) mapItems.get("id");
+                    String configValue = (String) mapItems.get("value");
+                    if (Asserts.isNotNullString(configKey) && Asserts.isNotNullString(configValue)) {
+                        taskManagerMetricsMap.put(configKey, configValue);
+                    }
+                });
+
+                /**
+                 * TaskManagerConfiguration 赋值
+                 */
+                taskManagerConfiguration.setContainerId(containerId);
+                taskManagerConfiguration.setContainerPath(containerPath);
+                taskManagerConfiguration.setDataPort(dataPort);
+                taskManagerConfiguration.setJmxPort(jmxPort);
+                taskManagerConfiguration.setTimeSinceLastHeartbeat(timeSinceLastHeartbeat);
+                taskManagerConfiguration.setSlotsNumber(slotsNumber);
+                taskManagerConfiguration.setFreeSlots(freeSlots);
+                taskManagerConfiguration.setTotalResource(totalResource);
+                taskManagerConfiguration.setFreeResource(freeResource);
+                taskManagerConfiguration.setHardware(hardware);
+                taskManagerConfiguration.setMemoryConfiguration(memoryConfiguration);
+
+                /**
+                 * TaskContainerConfigInfo 赋值
+                 */
+                TaskContainerConfigInfo taskContainerConfigInfo = new TaskContainerConfigInfo();
+                taskContainerConfigInfo.setMetrics(taskManagerMetricsMap);
+                taskContainerConfigInfo.setTaskManagerLog(taskManagerLog);
+                taskContainerConfigInfo.setTaskManagerThreadDump(taskManagerThreadDumps);
+                taskContainerConfigInfo.setTaskManagerStdout(taskManagerStdOut);
+
+
+                taskManagerConfiguration.setTaskContainerConfigInfo(taskContainerConfigInfo);
+
+                // 将taskManagerConfiguration添加到set集合中
+                taskManagerConfigurationList.add(taskManagerConfiguration);
+            }
+        }
+    }
+
+    /**
+     * @Author: zhumingye
+     * @date: 2022/6/27
+     * @Description: buildJobManagerConfiguration
+     * @Params: [jobManagerConfiguration, flinkAPI]
+     * @return void
+     */
+    private void buildJobManagerConfiguration(JobManagerConfiguration jobManagerConfiguration, FlinkAPI flinkAPI) {
+
+        Map<String, String> jobManagerMetricsMap = new HashMap<String, String>(); //获取jobManager metrics
+        List<LinkedHashMap> jobManagerMetricsItemsList = JSONUtil.toList(JSONUtil.toJsonString(flinkAPI.getJobManagerMetrics()), LinkedHashMap.class);
+        jobManagerMetricsItemsList.forEach(mapItems -> {
+            String configKey = (String) mapItems.get("id");
+            String configValue = (String) mapItems.get("value");
+            if (Asserts.isNotNullString(configKey) && Asserts.isNotNullString(configValue)) {
+                jobManagerMetricsMap.put(configKey, configValue);
+            }
+        });
+        Map<String, String> jobManagerConfigMap = new HashMap<String, String>();//获取jobManager配置信息
+        List<LinkedHashMap> jobManagerConfigMapItemsList = JSONUtil.toList(JSONUtil.toJsonString(flinkAPI.getJobManagerConfig()), LinkedHashMap.class);
+        jobManagerConfigMapItemsList.forEach(mapItems -> {
+            String configKey = (String) mapItems.get("key");
+            String configValue = (String) mapItems.get("value");
+            if (Asserts.isNotNullString(configKey) && Asserts.isNotNullString(configValue)) {
+                jobManagerConfigMap.put(configKey, configValue);
+            }
+        });
+        String jobMangerLog = flinkAPI.getJobManagerLog(); //获取jobManager日志
+        String jobManagerStdOut = flinkAPI.getJobManagerStdOut(); //获取jobManager标准输出日志
+
+        jobManagerConfiguration.setMetrics(jobManagerMetricsMap);
+        jobManagerConfiguration.setJobManagerConfig(jobManagerConfigMap);
+        jobManagerConfiguration.setJobManagerLog(jobMangerLog);
+        jobManagerConfiguration.setJobManagerStdout(jobManagerStdOut);
+    }
+
     private boolean inRefreshPlan(JobInstance jobInstance) {
         if ((!JobStatus.isDone(jobInstance.getStatus())) || (Asserts.isNotNull(jobInstance.getFinishTime())
                 && Duration.between(jobInstance.getFinishTime(), LocalDateTime.now()).toMinutes() < 1)) {
@@ -669,14 +770,15 @@ public class TaskServiceImpl extends SuperServiceImpl<TaskMapper, Task> implemen
         }
         return "127.0.0.1:" + serverPort;
     }
-    private String getDuration(long jobStartTimeMills ,long jobEndTimeMills ) {
+
+    private String getDuration(long jobStartTimeMills, long jobEndTimeMills) {
         Instant startTime = Instant.ofEpochMilli(jobStartTimeMills);
         Instant endTime = Instant.ofEpochMilli(jobEndTimeMills);
 
         long days = ChronoUnit.DAYS.between(startTime, endTime);
         long hours = ChronoUnit.HOURS.between(startTime, endTime);
         long minutes = ChronoUnit.MINUTES.between(startTime, endTime);
-        long seconds = ChronoUnit.SECONDS.between(startTime, endTime) ;
+        long seconds = ChronoUnit.SECONDS.between(startTime, endTime);
         String duration = days + "天 " + (hours - (days * 24)) + "小时 " + (minutes - (hours * 60)) + "分 " + (seconds - (minutes * 60)) + "秒";
         return duration;
     }
@@ -705,7 +807,7 @@ public class TaskServiceImpl extends SuperServiceImpl<TaskMapper, Task> implemen
         long asLongStartTime = jsonNodes.get("start-time").asLong(); //获取任务历史信息的start-time
         long asLongEndTime = jsonNodes.get("end-time").asLong(); //获取任务历史信息的end-time
 
-        if (asLongEndTime < asLongStartTime){
+        if (asLongEndTime < asLongStartTime) {
             asLongEndTime = System.currentTimeMillis();
         }
         String startTime = dateFormat.format(asLongStartTime);
@@ -739,7 +841,7 @@ public class TaskServiceImpl extends SuperServiceImpl<TaskMapper, Task> implemen
                     if (map.get("msgtype").equals(ShowType.MARKDOWN.getValue())) {
                         alertMsg.setLinkUrl("[跳转至该任务的 FlinkWeb](" + linkUrl + ")");
                         alertMsg.setExceptionUrl("[点击查看该任务的异常日志](" + exceptionUrl + ")");
-                    }else {
+                    } else {
                         alertMsg.setLinkUrl(linkUrl);
                         alertMsg.setExceptionUrl(exceptionUrl);
                     }

dlink-web/src/global.less

@@ -61,3 +61,18 @@ ol {
   margin: 24px;
   margin-bottom: 0!important;
 }
+
+div .ant-pro-card-body {
+  padding: 2px;
+}
+div .ant-pro-page-container{
+  padding-top: 1px;
+}
+
+div .ant-page-header {
+  padding-top: 0px;
+}
+
+div .ant-pro-page-container-children-content{
+  padding-top: 0px;
+}

dlink-web/src/pages/DevOps/JobInfo/ClusterConfiguration/JobManager/index.tsx

+import {Descriptions, Empty, Tabs} from 'antd';
+import CodeShow from "@/components/Common/CodeShow";
+
+const {TabPane} = Tabs;
+
+// TODO: 此页面需要根据设置的3秒刷新时间，自动刷新数据
+const JobManagerConfiguration = (props: any) => {
+  const {job} = props;
+
+
+  const getMetricsConfigForm =() => {
+    let formList = [];
+    let tempData = job?.jobManagerConfiguration?.metrics;
+    for (let key in tempData) {
+      formList.push(
+        <Descriptions.Item label={key}>
+          {tempData[key]}
+        </Descriptions.Item>
+      )
+    }
+    return formList
+  }
+
+
+  const getJobManagerConfigForm = () => {
+    let formList = [];
+    let tempData = job?.jobManagerConfiguration?.jobManagerConfig;
+    for (let key in tempData) {
+      formList.push(
+        <Descriptions.Item label={key}>
+          {tempData[key]}
+        </Descriptions.Item>
+      )
+    }
+    return formList
+  }
+
+  return (
+    <>
+    <Tabs defaultActiveKey="metrics" size="small" tabPosition="top" style={{
+      border: "1px solid #f0f0f0",
+    }}>
+      <TabPane tab={<span>&nbsp; Metrics &nbsp;</span>} key="metrics">
+        <Descriptions bordered size="small" column={1}>
+          {getMetricsConfigForm()}
+        </Descriptions>
+      </TabPane>
+
+      <TabPane tab={<span>&nbsp; Configuration &nbsp;</span>} key="configuration">
+        <Descriptions bordered size="small" column={1}>
+          {getJobManagerConfigForm()}
+        </Descriptions>
+      </TabPane>
+
+      <TabPane tab={<span>&nbsp; Logs &nbsp;</span>} key="logs">
+        {(job?.jobManagerConfiguration?.jobManagerLog === ""|| job?.jobManagerConfig?.jobManagerLog === null) ?
+          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
+          : <CodeShow code={job?.jobManagerConfiguration?.jobManagerLog} language='java' height='500px'/>
+        }
+      </TabPane>
+
+      <TabPane tab={<span>&nbsp; Stdout &nbsp;</span>} key="stdout">
+        {(job?.jobManagerConfiguration?.jobManagerStdout === ""|| job?.jobManagerConfig?.jobManagerStdout === null) ?
+          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
+          : <CodeShow code={job?.jobManagerConfiguration?.jobManagerStdout}  language='java' height='500px'/>
+        }
+      </TabPane>
+    </Tabs>
+  </>)
+};
+
+export default JobManagerConfiguration;

dlink-web/src/pages/DevOps/JobInfo/ClusterConfiguration/TaskManager/index.tsx

+import {Button, Descriptions, Empty, Tabs} from 'antd';
+import CodeShow from "@/components/Common/CodeShow";
+import ProTable, {ActionType, ProColumns} from "@ant-design/pro-table";
+import {parseByteStr} from "@/components/Common/function";
+import {TaskManagerConfiguration} from "@/pages/DevOps/data";
+import {useRef, useState} from "react";
+import {history} from "@@/core/history";
+import {HomeOutlined} from "@ant-design/icons";
+
+const {TabPane} = Tabs;
+
+// TODO: 此页面需要根据设置的3秒刷新时间，自动刷新数据
+const TaskManagerConfigurationForm = (props: any) => {
+  const {job} = props;
+  const actionRef = useRef<ActionType>();
+
+  const [isHistory, setIsHistory] = useState<boolean>(false);
+
+  const handleHistorySwicthChange = (checked: boolean) => {
+    setIsHistory(checked);
+  };
+
+  const taskManagerContainerListDataSource: TaskManagerConfiguration[] = [];
+  job?.taskManagerConfiguration?.forEach((entity: TaskManagerConfiguration) => {
+      taskManagerContainerListDataSource.push({
+        containerId: entity.containerId,
+        containerPath: entity.containerPath,
+        dataPort: entity.dataPort,
+        jmxPort: entity.jmxPort,
+        timeSinceLastHeartbeat: entity.timeSinceLastHeartbeat,
+        slotsNumber: entity.slotsNumber,
+        freeSlots: entity.freeSlots,
+        totalResource: entity.totalResource,
+        freeResource: entity.freeResource,
+        hardware: entity.hardware,
+        memoryConfiguration: entity.memoryConfiguration,
+        taskContainerConfigInfo: entity.taskContainerConfigInfo,
+      });
+    }
+  );
+  const handleBack = () => {
+    history.goBack();
+  };
+
+  const getMetricsConfigForm =(metrics:any) => {
+    let formList = [];
+    for (let key in metrics) {
+      formList.push(
+        <Descriptions.Item label={key}>
+          {metrics[key]}
+        </Descriptions.Item>
+      )
+    }
+    return formList
+  }
+
+
+  const buildContainerConfigInfo =(entity: TaskManagerConfiguration) =>{
+    return (
+      <>
+      <div style={{ marginBottom: 16 }}>
+        <Button title={'返回'} onClick={handleBack}> ← Back<HomeOutlined /> </Button>
+      </div>
+      <Tabs defaultActiveKey="metrics" size="small"
+
+            tabPosition="top" style={{
+        border: "1px solid #f0f0f0",
+      }}>
+        <TabPane tab={<span>&nbsp; Metrics &nbsp;</span>} key="metrics">
+          {getMetricsConfigForm(entity?.taskContainerConfigInfo?.metrics)}
+        </TabPane>
+
+        <TabPane tab={<span>&nbsp; Logs &nbsp;</span>} key="logs">
+          {(entity?.taskContainerConfigInfo?.taskManagerLog === "" || entity?.taskContainerConfigInfo?.taskManagerLog === null) ?
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
+            : <CodeShow code={entity?.taskContainerConfigInfo?.taskManagerLog} language='java' height='500px'/>
+          }
+        </TabPane>
+        <TabPane tab={<span>&nbsp; Stdout &nbsp;</span>} key="stdout">
+          {(entity?.taskContainerConfigInfo?.taskManagerStdout === "" || entity?.taskContainerConfigInfo?.taskManagerLog === null) ?
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
+            : <CodeShow code={entity?.taskContainerConfigInfo?.taskManagerStdout} language='java' height='500px'/>
+          }
+        </TabPane>
+
+        <TabPane tab={<span>&nbsp; Thread Dump &nbsp;</span>} key="threaddump">
+          {(entity?.taskContainerConfigInfo?.taskManagerThreadDump === "" || entity?.taskContainerConfigInfo?.taskManagerThreadDump === null) ?
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
+            : <CodeShow code={entity?.taskContainerConfigInfo?.taskManagerThreadDump} language='java' height='500px'/>
+          }
+        </TabPane>
+
+      </Tabs>
+      </>
+    )
+  }
+
+  // TODO: 点击[containerId]跳转到容器配置信息页面(buildContainerConfigInfo) 容器页面有返回按钮 可以返回到个列表页面
+  const columns: ProColumns<TaskManagerConfiguration>[] = [
+    {
+      title: 'ID,Path',
+      dataIndex: 'containerId',
+      copyable: true,
+      render: (dom, entity) => {
+        return  (
+          <>
+            <a style={{ width: 500 }} >{entity.containerId}</a>
+            <br/>
+            <span >{entity.containerPath}</span>
+          </>
+        );
+      },
+    },
+    {
+      title: 'Data Port',
+      align: 'center',
+      dataIndex: 'dataPort',
+    },
+    {
+      title: 'JMX Port',
+      align: 'center',
+      sorter: true,
+      dataIndex: 'jmxPort',
+    },
+    {
+      title: 'Last Heartbeat',
+      align: 'center',
+      sorter: true,
+      valueType: 'dateTime',
+      dataIndex: 'timeSinceLastHeartbeat',
+    },
+    {
+      title: 'All Solts',
+      align: 'center',
+      sorter: true,
+      dataIndex: 'slotsNumber',
+    },
+    {
+      title: 'Free Solts',
+      align: 'center',
+      sorter: true,
+      dataIndex: 'freeSlots',
+    },
+    {
+      title: 'CPU Cores',
+      align: 'center',
+      sorter: true,
+      render: (dom, entity) => {
+        return (JSON.parse(entity.totalResource))['cpuCores'];
+      },
+    },
+    {
+      title: 'Free Cores',
+      align: 'center',
+      sorter: true,
+      render: (dom, entity) => {
+        return (JSON.parse(entity.freeResource))['cpuCores'];
+      },
+    },
+    {
+      title: 'Physical Mem',
+      align: 'center',
+      sorter: true,
+      render: (dom, entity) => {
+        return parseByteStr((JSON.parse(entity.hardware))['physicalMemory']);
+      },
+    },
+    {
+      title: 'Free Mem',
+      align: 'center',
+      sorter: true,
+      render: (dom, entity) => {
+        return parseByteStr((JSON.parse(entity.hardware))['freeMemory']);
+      },
+    },
+    {
+      title: 'Hardware ManagedMem',
+      align: 'center',
+      sorter: true,
+      render: (dom, entity) => {
+        return parseByteStr((JSON.parse(entity.hardware))['managedMemory']);
+      },
+    },
+    {
+      title: 'Total ProcessMem',
+      align: 'center',
+      sorter: true,
+      render: (dom, entity) => {
+        return parseByteStr((JSON.parse(entity.memoryConfiguration))['totalProcessMemory']);
+      },
+    },
+    {
+      title: 'Total FlinkMem',
+      align: 'center',
+      sorter: true,
+      render: (dom, entity) => {
+        return parseByteStr((JSON.parse(entity.memoryConfiguration))['totalFlinkMemory']);
+      },
+    },
+    {
+      title: 'Task Heap',
+      align: 'center',
+      sorter: true,
+      render: (dom, entity) => {
+        return parseByteStr((JSON.parse(entity.memoryConfiguration))['taskHeap']);
+      },
+    },
+    {
+      title: 'JVM Heap',
+      align: 'center',
+      sorter: true,
+      render: (dom, entity) => {
+        return parseByteStr((JSON.parse(entity.hardware))['freeMemory']);
+      },
+    },
+    {
+      title: 'Flink ManagedMem',
+      align: 'center',
+      sorter: true,
+      render: (dom, entity) => {
+        return parseByteStr((JSON.parse(entity.hardware))['managedMemory']);
+      },
+    },
+  ];
+
+
+
+  return (
+    <>
+      {job?.taskManagerConfiguration?.length > 0 ?
+      <ProTable<TaskManagerConfiguration>
+        columns={columns}
+        style={{width: '100%'}}
+        dataSource={ taskManagerContainerListDataSource }
+        onDataSourceChange={(dataSource) => {
+          actionRef.current?.reload();
+        }}
+        actionRef={actionRef}
+        rowKey="containerId"
+        pagination={{
+          pageSize: 8,
+        }}
+        toolBarRender={false}
+        dateFormatter="string"
+        search={false}
+        size="small"
+      />: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>}
+    </>
+  )
+};
+
+export default TaskManagerConfigurationForm;

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

-import {Descriptions, Empty, Tabs} from 'antd';
-import CodeShow from "@/components/Common/CodeShow";
-
-const {TabPane} = Tabs;
+import {useState} from 'react';
+import {PageContainer} from '@ant-design/pro-layout';
+import ProCard from '@ant-design/pro-card';
+import JobManagerConfiguration from "@/pages/DevOps/JobInfo/ClusterConfiguration/JobManager";
+import TaskManagerConfigurationForm from "@/pages/DevOps/JobInfo/ClusterConfiguration/TaskManager";
 
 const ClusterConfiguration = (props: any) => {
-  const {} = props;
   const {job} = props;
+  const [tabKey, setTabKey] = useState<string>('jobmanager');
+  return (
+    <PageContainer
+      header={{title: undefined}}
+      tabList={[
+        {
+          tab: 'Job Manager',
+          key: 'jobmanager',
+          closable: false,
+        },
+        {
+          tab: 'Task Managers',
+          key: 'taskmanager',
+          closable: false,
+        },
+      ]}
+      onTabChange={(key) => {
+        setTabKey(key);
+      }}
+    >
+      <ProCard  >
+        {tabKey === 'jobmanager' ? <JobManagerConfiguration  job={job}/> : undefined}
+        {tabKey === 'taskmanager' ? <TaskManagerConfigurationForm  job={job}/> : undefined}
+      </ProCard>
+    </PageContainer>
+  );
 
-  const getMetricsConfigForm =() => {
-    let formList = [];
-    let tempData = job?.jobManagerConfiguration?.metrics;
-    for (let key in tempData) {
-      formList.push(
-        <Descriptions.Item label={key}>
-          {tempData[key]}
-        </Descriptions.Item>
-      )
-    }
-    return formList
-  }
-
-
-  const getJobManagerConfigForm = () => {
-    let formList = [];
-    let tempData = job?.jobManagerConfiguration?.jobManagerConfig;
-    for (let key in tempData) {
-      formList.push(
-        <Descriptions.Item label={key}>
-          {tempData[key]}
-        </Descriptions.Item>
-      )
-    }
-    return formList
-  }
-
-  return (<>
-    <Tabs defaultActiveKey="metrics" size="small" tabPosition="top" style={{
-      border: "1px solid #f0f0f0",
-    }}>
-      <TabPane tab={<span>&nbsp; Metrics &nbsp;</span>} key="metrics">
-        <Descriptions bordered size="small" column={1}>
-          {getMetricsConfigForm()}
-        </Descriptions>
-      </TabPane>
-
-      <TabPane tab={<span>&nbsp; Configuration &nbsp;</span>} key="configuration">
-        <Descriptions bordered size="small" column={1}>
-          {getJobManagerConfigForm()}
-        </Descriptions>
-      </TabPane>
-
-      <TabPane tab={<span>&nbsp; Logs &nbsp;</span>} key="logs">
-        {(job?.jobManagerConfiguration?.jobManagerLog === ""|| job?.jobManagerConfig?.jobManagerLog === null) ?
-          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
-          : <CodeShow code={job?.jobManagerConfiguration?.jobManagerLog} language='java' height='500px'/>
-        }
-      </TabPane>
-
-      <TabPane tab={<span>&nbsp; Stdout &nbsp;</span>} key="stdout">
-        {(job?.jobManagerConfiguration?.jobManagerStdout === ""|| job?.jobManagerConfig?.jobManagerStdout === null) ?
-          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
-          : <CodeShow code={job?.jobManagerConfiguration?.jobManagerStdout} language='java' height='500px'/>
-        }
-      </TabPane>
-    </Tabs>
-  </>)
 };
 
 export default ClusterConfiguration;

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

@@ -2,6 +2,7 @@ import {ClusterTableListItem} from "@/pages/Cluster/data";
 import {ClusterConfigurationTableListItem} from "@/pages/ClusterConfiguration/data";
 import {HistoryItem} from "@/components/Studio/StudioConsole/StudioHistory/data";
 import {JarTableListItem} from "@/pages/Jar/data";
+import {List} from "antd";
 
 export type JobInstanceTableListItem = {
   id: number,
@@ -47,6 +48,7 @@ export type JobInfoDetail = {
   history: HistoryItem,
   jobHistory: JobHistoryItem,
   jobManagerConfiguration : JobManagerConfiguration
+  taskManagerConfiguration : List<TaskManagerConfiguration>
   jar: JarTableListItem
 }
 
@@ -85,3 +87,30 @@ export type JobManagerConfiguration = {
   jobManagerStdout: string,
 }
 
+
+export type TaskManagerConfiguration = {
+  containerId: string ,
+  containerPath: string,
+  dataPort : number,
+  jmxPort: number,
+  timeSinceLastHeartbeat: number,
+  slotsNumber: number,
+  freeSlots: number,
+  totalResource: string,
+  freeResource: string,
+  hardware: string,
+  memoryConfiguration: string,
+  taskContainerConfigInfo: TaskContainerConfigInfo,
+}
+
+
+
+
+export type TaskContainerConfigInfo = {
+  metrics: string ,
+  taskManagerLog: string ,
+  taskManagerStdout : string,
+  taskManagerThreadDump: string,
+}
+
+