From eb20412150473d9dcb425ee5bda51bf3a83fe86a Mon Sep 17 00:00:00 2001
From: ikiler <ikiler@126.com>
Date: Wed, 13 Dec 2023 14:07:33 +0800
Subject: [PATCH] restore Error submission

---
 dinky-web/src/pages/Metrics/Job/index.tsx | 93 ++++++++++++-----------
 1 file changed, 49 insertions(+), 44 deletions(-)

diff --git a/dinky-web/src/pages/Metrics/Job/index.tsx b/dinky-web/src/pages/Metrics/Job/index.tsx
index c50f58ad8c..9a33c41bb9 100644
--- a/dinky-web/src/pages/Metrics/Job/index.tsx
+++ b/dinky-web/src/pages/Metrics/Job/index.tsx
@@ -18,13 +18,19 @@
  */
 
 import { ChartData, JobMetrics, MetricsLayout, SubTask, Task } from '@/pages/Metrics/Job/data';
+import {
+  buildMetricsList,
+  buildRunningJobList,
+  buildSubTaskList
+} from '@/pages/Metrics/Job/function';
 import { getFlinkRunTask, saveFlinkMetrics } from '@/pages/Metrics/Job/service';
 import { getData } from '@/services/api';
 import { API_CONSTANTS } from '@/services/endpoints';
 import { l } from '@/utils/intl';
-import { ProCard } from '@ant-design/pro-components';
+import { ProCard, ProFormSelect } from '@ant-design/pro-components';
 import { Button, Input, Row } from 'antd';
 import { useEffect, useState } from 'react';
+import FlinkChart from "@/components/Flink/FlinkChart";
 
 const getJobMetrics = async (job: JobMetrics) => {
   const url =
@@ -196,22 +202,21 @@ const Job = () => {
     return (
       <>
         <Row gutter={[8, 16]}>
-          {/*{metricsList.map((j) => {*/}
-          {/*  return (*/}
-          {/*    <FlinkChart*/}
-          {/*      key={j.taskId + j.subTaskId + j.metrics}*/}
-          {/*      chartSize={j.showSize}*/}
-          {/*      chartType={j.showType}*/}
-          {/*      onChangeJobState={(chartSize, chartType) => {*/}
-          {/*        j.showSize = chartSize;*/}
-          {/*        j.showType = chartType;*/}
-          {/*      }}*/}
-          {/*      data={chartData[j.taskId + j.subTaskId + j.metrics]}*/}
-          {/*      title={j.metrics}*/}
-          {/*      extraType={'size'}*/}
-          {/*    />*/}
-          {/*  );*/}
-          {/*})}*/}
+          {metricsList.map((j) => {
+            return (
+              <FlinkChart
+                key={j.taskId + j.subTaskId + j.metrics}
+                chartSize={j.showSize}
+                chartType={j.showType}
+                onChangeJobState={(chartSize, chartType) => {
+                  j.showSize = chartSize;
+                  j.showType = chartType;
+                }}
+                data={chartData[j.taskId + j.subTaskId + j.metrics]}
+                title={j.metrics}
+              />
+            );
+          })}
         </Row>
       </>
     );
@@ -264,34 +269,34 @@ const Job = () => {
           </Button>
         }
       >
-        {/*<ProFormSelect*/}
-        {/*  name='job'*/}
-        {/*  label={l('metrics.flink.job.name')}*/}
-        {/*  placeholder={l('metrics.flink.job.placeholder')}*/}
-        {/*  options={buildRunningJobList(taskData)}*/}
-        {/*  fieldProps={{ onChange: (value) => handleRunningJobChange(value as number) }}*/}
-        {/*/>*/}
-        {/*{metricsData.selectTaskId !== 0 && (*/}
-        {/*  <ProFormSelect*/}
-        {/*    name='vertices'*/}
-        {/*    label={l('metrics.flink.subTask')}*/}
-        {/*    placeholder={l('metrics.flink.subTask.placeholder')}*/}
-        {/*    options={buildSubTaskList(subTaskList)}*/}
-        {/*    fieldProps={{ onChange: (value) => handleSubTaskChange(value as string) }}*/}
-        {/*  />*/}
-        {/*)}*/}
-        {/*{metricsData.selectSubTask !== '' && (*/}
-        {/*  <ProFormSelect*/}
-        {/*    name='metrics'*/}
-        {/*    label={l('metrics.flink.metrics.name')}*/}
-        {/*    placeholder={l('metrics.flink.metrics.placeholder')}*/}
-        {/*    options={buildMetricsList(metrics)}*/}
-        {/*    mode='multiple'*/}
-        {/*    fieldProps={{ onChange: (value) => handleMetricsChange(value as string[]) }}*/}
-        {/*  />*/}
-        {/*)}*/}
+        <ProFormSelect
+          name='job'
+          label={l('metrics.flink.job.name')}
+          placeholder={l('metrics.flink.job.placeholder')}
+          options={buildRunningJobList(taskData)}
+          fieldProps={{ onChange: (value) => handleRunningJobChange(value as number) }}
+        />
+        {metricsData.selectTaskId !== 0 && (
+          <ProFormSelect
+            name='vertices'
+            label={l('metrics.flink.subTask')}
+            placeholder={l('metrics.flink.subTask.placeholder')}
+            options={buildSubTaskList(subTaskList)}
+            fieldProps={{ onChange: (value) => handleSubTaskChange(value as string) }}
+          />
+        )}
+        {metricsData.selectSubTask !== '' && (
+          <ProFormSelect
+            name='metrics'
+            label={l('metrics.flink.metrics.name')}
+            placeholder={l('metrics.flink.metrics.placeholder')}
+            options={buildMetricsList(metrics)}
+            mode='multiple'
+            fieldProps={{ onChange: (value) => handleMetricsChange(value as string[]) }}
+          />
+        )}
         {/* render metrics list */}
-        {/*{jobMetricsList.length > 0 && renderMetricsCardList(jobMetricsList)}*/}
+        {jobMetricsList.length > 0 && renderMetricsCardList(jobMetricsList)}
       </ProCard>
     </>
   );