optimization Some problems in front-end (#986)

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

@@ -525,8 +525,8 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
       toOpen(e.node);
     }
     let taskIds = [];
-    for (let i = 0; i < e.selectedNodes.length; i++) {
-      if(e.selectedNodes[i].isLeaf){
+    for (let i = 0; i < e.selectedNodes?.length; i++) {
+      if (e.selectedNodes[i].isLeaf) {
         taskIds.push(e.selectedNodes[i].taskId);
       }
     }

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

@@ -18,7 +18,7 @@
  */
 
 
-import {Descriptions, Tag, Typography} from 'antd';
+import {Descriptions, Divider, Tag, Typography} from 'antd';
 import {RocketOutlined} from '@ant-design/icons';
 
 const {Text, Link} = Typography;
@@ -26,47 +26,50 @@ const {Text, Link} = Typography;
 const Config = (props: any) => {
 
   const {job} = props;
-  return (<>
+  return <>
+    <>
+      <Divider children={"Dinky Job Configuration"} orientation={"left"}/>
+      <Descriptions bordered size="small">
+        <Descriptions.Item label="执行模式">{job?.history?.type ? (
+          <Tag color="blue" key={job?.history?.type}>
+            <RocketOutlined/> {job?.history?.type}
+          </Tag>
+        ) : undefined}
+        </Descriptions.Item>
+        <Descriptions.Item label="集群实例">
+          {job?.cluster?.alias ? <Link>{job?.cluster?.alias}</Link> : '-'}
+        </Descriptions.Item>
+        <Descriptions.Item label="集群配置">
+          {job?.clusterConfiguration?.alias ? <Link>{job?.clusterConfiguration?.alias}</Link> : '-'}
+        </Descriptions.Item>
+        <Descriptions.Item label="共享会话">
+          {job?.history?.session ? <Link>{job?.history?.session}</Link> : '禁用'}
+        </Descriptions.Item>
+        <Descriptions.Item label="片段机制">{job?.history?.config.useSqlFragment ? '启用' : '禁用'}</Descriptions.Item>
+        <Descriptions.Item label="语句集">{job?.history?.config.useStatementSet ? '启用' : '禁用'}</Descriptions.Item>
+        <Descriptions.Item label="任务类型">{job?.history?.config.isJarTask ? 'Jar' : 'FlinkSQL'}</Descriptions.Item>
+        <Descriptions.Item label="批模式">{job?.history?.config.useBatchModel ? '启用' : '禁用'}</Descriptions.Item>
+        <Descriptions.Item label="CheckPoint">{job?.history?.config.checkpoint}</Descriptions.Item>
+        <Descriptions.Item label="SavePoint机制">
+          {job?.history?.config.savePointStrategy == 'NONE' ? '禁用' :
+            job?.history?.config.savePointStrategy == 'LATEST' ? '最近一次' :
+              job?.history?.config.savePointStrategy == 'EARLIEST' ? '最早一次' :
+                job?.history?.config.savePointStrategy == 'CUSTOM' ? '指定一次' : '禁用'}
+        </Descriptions.Item>
+        <Descriptions.Item label="SavePoint" span={2}>{job?.history?.config.savePointPath}</Descriptions.Item>
+        {job?.jar ? <>
+          <Descriptions.Item label="Jar 路径">{job?.jar?.path}</Descriptions.Item>
+          <Descriptions.Item label="Jar 主类">{job?.jar?.mainClass}</Descriptions.Item>
+          <Descriptions.Item label="Jar 入参">{job?.jar?.paras}</Descriptions.Item>
+        </> : undefined}
+      </Descriptions>
+    </>
+    <>
+      {(!JSON.stringify(job?.jobHistory?.config).includes("errors") && job?.jobHistory?.config) &&
         <>
-          <Descriptions bordered size="small" title={"Dinky Job Configuration"}>
-            <Descriptions.Item label="执行模式">{job?.history?.type ? (
-              <Tag color="blue" key={job?.history?.type}>
-                <RocketOutlined/> {job?.history?.type}
-              </Tag>
-            ) : undefined}
-            </Descriptions.Item>
-            <Descriptions.Item label="集群实例">
-              {job?.cluster?.alias ? <Link>{job?.cluster?.alias}</Link> : '-'}
-            </Descriptions.Item>
-            <Descriptions.Item label="集群配置">
-              {job?.clusterConfiguration?.alias ? <Link>{job?.clusterConfiguration?.alias}</Link> : '-'}
-            </Descriptions.Item>
-            <Descriptions.Item label="共享会话">
-              {job?.history?.session ? <Link>{job?.history?.session}</Link> : '禁用'}
-            </Descriptions.Item>
-            <Descriptions.Item label="片段机制">{job?.history?.config.useSqlFragment ? '启用' : '禁用'}</Descriptions.Item>
-            <Descriptions.Item label="语句集">{job?.history?.config.useStatementSet ? '启用' : '禁用'}</Descriptions.Item>
-            <Descriptions.Item label="任务类型">{job?.history?.config.isJarTask ? 'Jar' : 'FlinkSQL'}</Descriptions.Item>
-            <Descriptions.Item label="批模式">{job?.history?.config.useBatchModel ? '启用' : '禁用'}</Descriptions.Item>
-            <Descriptions.Item label="CheckPoint">{job?.history?.config.checkpoint}</Descriptions.Item>
-            <Descriptions.Item label="SavePoint机制">
-              {job?.history?.config.savePointStrategy == 'NONE' ? '禁用' :
-                job?.history?.config.savePointStrategy == 'LATEST' ? '最近一次' :
-                  job?.history?.config.savePointStrategy == 'EARLIEST' ? '最早一次' :
-                    job?.history?.config.savePointStrategy == 'CUSTOM' ? '指定一次' : '禁用'}
-            </Descriptions.Item>
-            <Descriptions.Item label="SavePoint" span={2}>{job?.history?.config.savePointPath}</Descriptions.Item>
-            {job?.jar ? <>
-              <Descriptions.Item label="Jar 路径">{job?.jar?.path}</Descriptions.Item>
-              <Descriptions.Item label="Jar 主类">{job?.jar?.mainClass}</Descriptions.Item>
-              <Descriptions.Item label="Jar 入参">{job?.jar?.paras}</Descriptions.Item>
-            </> : undefined}
-          </Descriptions>
-        </>
-        <br/><br/>
-        <>
-          {(!JSON.stringify(job?.jobHistory?.config).includes("errors") && !job?.jobHistory?.config ) &&
-          <Descriptions bordered size="small" title={"Flink Job Configuration"}>
+          <br/>
+          <Divider children={"Flink Job Configuration"} orientation={"left"}/>
+          <Descriptions bordered size="small">
             <Descriptions.Item label="Execution Mode">
               <Tag color="blue" title={"Execution Mode"}>
                 {job?.jobHistory?.config['execution-config']['execution-mode']}
@@ -94,11 +97,10 @@ const Config = (props: any) => {
               <Text
                 code>{JSON.stringify(job?.jobHistory?.config['execution-config']['user-config'])}</Text>
             </Descriptions.Item>
-          </Descriptions>
-          }
-        </>
-      </>
-   )
+          </Descriptions></>
+      }
+    </>
+  </>
 };
 
 export default Config;

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

@@ -36,7 +36,7 @@ const Exception = (props: any) => {
         <CodeShow code={job.jobHistory?.exceptions['root-exception'] as string} language='java' height='500px'/>
       </TabPane>
       <TabPane tab={<span>Exception History</span>} key="ExceptionHistory">
-        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={"敬请期待"}/>
       </TabPane>
     </Tabs>}
   </>)

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

@@ -281,12 +281,12 @@ const JobInfo = (props: any) => {
         {tabKey === 'cluster' ? <FlinkClusterInfo job={job}/> : undefined}
         {tabKey === 'snapshot' ? <CheckPoints job={job}/> : undefined}
         {tabKey === 'exception' ? <Exception job={job}/> : undefined}
-        {tabKey === 'log' ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/> : undefined}
-        {tabKey === 'optimize' ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/> : undefined}
+        {tabKey === 'log' ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={"敬请期待"}/> : undefined}
+        {tabKey === 'optimize' ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={"敬请期待"}/> : undefined}
         {tabKey === 'flinksql' ? <FlinkSQL job={job}/> : undefined}
         {tabKey === 'datamap' ? <DataMap job={job}/> : undefined}
-        {tabKey === 'olap' ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/> : undefined}
-        {tabKey === 'version' ? <TaskVersionInfo job={job} /> : undefined}
+        {tabKey === 'olap' ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={"敬请期待"}/> : undefined}
+        {tabKey === 'version' ? <TaskVersionInfo job={job}/> : undefined}
         {tabKey === 'alert' ? <Alert job={job}/> : undefined}
       </ProCard>
     </PageContainer>