[Optimize][Web]Optimize dinky flink web UI (#3815)

Co-authored-by: zackyoungh <[email protected]>
DataLinkDC · Sep 18, 2024 · 08c2005 · 08c2005
1 parent 82eb8cf
commit 08c2005
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 8 deletions.
diff --git a/dinky-web/src/components/Flink/FlinkDag/component/DagDataNode.tsx b/dinky-web/src/components/Flink/FlinkDag/component/DagDataNode.tsx
@@ -79,7 +79,7 @@ const DagDataNode = (props: any) => {
   const backpressure = data.backpressure;
   return (
     <Card
-      style={{ width: '250px', padding: 0, margin: 0, height: 140 }}
+      style={{ width: 'inherit', padding: 0, margin: 0, height: 'inherit' }}
       bordered={false}
       size={'small'}
       type={'inner'}

diff --git a/dinky-web/src/components/Flink/FlinkDag/component/DagPlanNode.tsx b/dinky-web/src/components/Flink/FlinkDag/component/DagPlanNode.tsx
@@ -27,7 +27,7 @@ const DagPlanNode = (props: any) => {
 
   return (
     <Card
-      style={{ width: 270, padding: 0, margin: 0, height: 140 }}
+      style={{ width: "inherit", padding: 0, margin: 0, height: 'inherit' }}
       bordered={false}
       size={'small'}
       type={'inner'}

diff --git a/dinky-web/src/components/Flink/FlinkDag/index.tsx b/dinky-web/src/components/Flink/FlinkDag/index.tsx
@@ -246,7 +246,7 @@ const FlinkDag = (props: DagProps) => {
 
     if (maxDepth < maxWidth) {
       dir = 'TB';
-      ranksep = 200;
+      ranksep = 100;
       nodesep = 40;
       portConfigs = portConfigTb;
     }
@@ -421,8 +421,8 @@ const FlinkDag = (props: DagProps) => {
                 key: '1',
                 label: 'Detail',
                 children: (
-                  <div style={{ whiteSpace: 'pre' }}>
-                    {currentSelect?.getData().description?.replaceAll('<br/>', '\n')}
+                  <div style={{ whiteSpace: 'pre-wrap' }} >
+                    {currentSelect?.getData().description?.replace(/<br\/>/g, '\n')}
                   </div>
                 )
               },

diff --git a/dinky-web/src/pages/DevOps/JobDetail/index.tsx b/dinky-web/src/pages/DevOps/JobDetail/index.tsx
@@ -28,7 +28,7 @@ import JobMetrics from '@/pages/DevOps/JobDetail/JobMetrics';
 import JobOperator from '@/pages/DevOps/JobDetail/JobOperator/JobOperator';
 import JobConfigTab from '@/pages/DevOps/JobDetail/JobOverview/JobOverview';
 import JobVersionTab from '@/pages/DevOps/JobDetail/JobVersion/JobVersionTab';
-import { refeshJobInstance } from '@/pages/DevOps/JobDetail/srvice';
+import { refreshJobInstance } from '@/pages/DevOps/JobDetail/srvice';
 import { Jobs } from '@/types/DevOps/data';
 import { l } from '@/utils/intl';
 import { history } from '@@/core/history';
@@ -64,7 +64,7 @@ const JobDetail = (props: any) => {
     history.push(`/devops/`);
   }
 
-  const { data, run } = useHookRequest(refeshJobInstance, {
+  const { data, run } = useHookRequest(refreshJobInstance, {
     defaultParams: [id, false],
     pollingInterval: 3000
   });

diff --git a/dinky-web/src/pages/DevOps/JobDetail/srvice.ts b/dinky-web/src/pages/DevOps/JobDetail/srvice.ts
@@ -21,7 +21,7 @@ import { JobMetricsItem, MetricsTimeFilter } from '@/pages/DevOps/JobDetail/data
 import { getData, putDataAsArray } from '@/services/api';
 import { API_CONSTANTS } from '@/services/endpoints';
 
-export const refeshJobInstance = (id: string, isForce?: boolean) => {
+export const refreshJobInstance = (id: string, isForce?: boolean) => {
   return getData(API_CONSTANTS.REFRESH_JOB_DETAIL, { id, isForce });
 };