improve header's button show logical (#2552)

* Spotless Apply * improve header's button show logical * Spotless Apply * improve header's button show logical * format code * Spotless Apply --------- Co-authored-by: zhu-mingye <[email protected]>
DataLinkDC · Nov 20, 2023 · f1a0d15 · f1a0d15
1 parent 484f898
commit f1a0d15
Show file tree

Hide file tree

Showing 12 changed files with 108 additions and 96 deletions.
diff --git a/dinky-web/src/components/CustomEditor/CodeEdit/index.tsx b/dinky-web/src/components/CustomEditor/CodeEdit/index.tsx
@@ -22,7 +22,7 @@ import { editor, languages, Position } from 'monaco-editor';
 
 import { buildAllSuggestionsToEditor } from '@/components/CustomEditor/CodeEdit/function';
 import EditorFloatBtn from '@/components/CustomEditor/EditorFloatBtn';
-import {LoadCustomEditorLanguage, LoadCustomEditorLanguageWithCompletion} from '@/components/CustomEditor/languages';
+import { LoadCustomEditorLanguageWithCompletion } from '@/components/CustomEditor/languages';
 import { StateType } from '@/pages/DataStudio/model';
 import { MonacoEditorOptions } from '@/types/Public/data';
 import { convertCodeEditTheme } from '@/utils/function';

diff --git a/dinky-web/src/components/CustomEditor/languages/flinksql/index.tsx b/dinky-web/src/components/CustomEditor/languages/flinksql/index.tsx
@@ -159,27 +159,28 @@ export function FlinkSQLLanguage(monaco: Monaco | null, registerCompletion: bool
     unicode: true
   });
 
-  registerCompletion && monaco?.languages?.registerCompletionItemProvider('flinksql', {
-    provideCompletionItems: function (model, position) {
-      const word = model.getWordUntilPosition(position);
-      const range = {
-        startLineNumber: position.lineNumber,
-        endLineNumber: position.lineNumber,
-        startColumn: word.startColumn,
-        endColumn: word.endColumn
-      };
-      return {
-        suggestions: FLINK_SQL_KEYWORD.map((item) => {
-          return {
-            label: item,
-            range: range,
-            kind: monaco.languages.CompletionItemKind.Keyword,
-            insertText: item
-          };
-        })
-      };
-    }
-  });
+  registerCompletion &&
+    monaco?.languages?.registerCompletionItemProvider('flinksql', {
+      provideCompletionItems: function (model, position) {
+        const word = model.getWordUntilPosition(position);
+        const range = {
+          startLineNumber: position.lineNumber,
+          endLineNumber: position.lineNumber,
+          startColumn: word.startColumn,
+          endColumn: word.endColumn
+        };
+        return {
+          suggestions: FLINK_SQL_KEYWORD.map((item) => {
+            return {
+              label: item,
+              range: range,
+              kind: monaco.languages.CompletionItemKind.Keyword,
+              insertText: item
+            };
+          })
+        };
+      }
+    });
 
   monaco?.languages?.setLanguageConfiguration('flinksql', {
     comments: {

diff --git a/dinky-web/src/components/LineageGraph/lineage-dag-ext.tsx b/dinky-web/src/components/LineageGraph/lineage-dag-ext.tsx
@@ -109,7 +109,6 @@ export default class LineageDagExt extends LineageDag {
           true
         );
         // this.canvas.wrapper.style.visibility = 'visible';
-        debugger;
         this.canvas.addEdges(tmpEdges, true);
 
         let minimap = _.get(this, 'props.config.minimap', {});

diff --git a/dinky-web/src/pages/DataStudio/HeaderContainer/index.tsx b/dinky-web/src/pages/DataStudio/HeaderContainer/index.tsx
@@ -35,13 +35,7 @@ import {
   executeSql,
   getJobPlan
 } from '@/pages/DataStudio/HeaderContainer/service';
-import {
-  DataStudioTabsItemType,
-  StateType,
-  TabsPageSubType,
-  TabsPageType,
-  VIEW
-} from '@/pages/DataStudio/model';
+import { DataStudioTabsItemType, StateType, TabsPageType, VIEW } from '@/pages/DataStudio/model';
 import { JOB_LIFE_CYCLE, JOB_STATUS } from '@/pages/DevOps/constants';
 import { ConfigStateType } from '@/pages/SettingCenter/GlobalSetting/model';
 import { SettingConfigKeyEnum } from '@/pages/SettingCenter/GlobalSetting/SettingOverView/constants';
@@ -67,7 +61,7 @@ import {
 } from '@ant-design/icons';
 import { Breadcrumb, Descriptions, Modal, Space } from 'antd';
 import { ButtonProps } from 'antd/es/button/button';
-import React, { useEffect, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 
 const headerStyle: React.CSSProperties = {
   display: 'inline-flex',
@@ -251,8 +245,8 @@ const HeaderContainer = (props: any) => {
       title: l('button.graph'),
       isShow:
         (projectCommonShow(currentTab?.type) &&
-          currentData?.dialect?.toLowerCase() === DIALECT.FLINK_SQL) ||
-        currentData?.dialect?.toLowerCase() === DIALECT.FLINKJAR,
+          currentTab?.subType?.toLowerCase() === DIALECT.FLINK_SQL) ||
+        currentTab?.subType?.toLowerCase() === DIALECT.FLINKJAR,
       click: async () => showDagGraph()
     },
     {
@@ -263,7 +257,11 @@ const HeaderContainer = (props: any) => {
       hotKeyDesc: 'Alt+2/@',
       title: l('pages.datastudio.editor.check'),
       click: () => showExplain(),
-      isShow: projectCommonShow(currentTab?.type)
+      isShow:
+        projectCommonShow(currentTab?.type) &&
+        currentTab?.subType?.toLowerCase() !== DIALECT.JAVA &&
+        currentTab?.subType?.toLowerCase() !== DIALECT.SCALA &&
+        currentTab?.subType?.toLowerCase() !== DIALECT.PYTHON_LONG
     },
     {
       // 推送海豚, 此处需要将系统设置中的 ds 的配置拿出来做判断 启用才展示
@@ -277,18 +275,20 @@ const HeaderContainer = (props: any) => {
       icon: isOnline(currentData) ? <MergeCellsOutlined /> : <FundOutlined />,
       title: isOnline(currentData) ? l('button.offline') : l('button.publish'),
       isShow:
-        currentTab?.type == TabsPageType.project &&
-        currentData?.dialect?.toLowerCase() === DIALECT.FLINK_SQL,
+        (currentTab?.type == TabsPageType.project &&
+          currentTab?.subType?.toLowerCase() === DIALECT.FLINK_SQL) ||
+        currentTab?.subType?.toLowerCase() === DIALECT.FLINKJAR,
       click: () => handleChangeJobLife()
     },
     {
-      // flink jobdetail跳转
+      // flink jobdetail跳转 运维
       icon: <RotateRightOutlined />,
       title: l('pages.datastudio.to.jobDetail'),
       isShow:
         currentTab?.type == TabsPageType.project &&
         currentData?.jobInstanceId &&
-        currentTab.subType == TabsPageSubType.flinkSql,
+        (currentTab?.subType?.toLowerCase() == DIALECT.FLINK_SQL ||
+          currentTab?.subType?.toLowerCase() == DIALECT.FLINKJAR),
       props: {
         href: `/#/devops/job-detail?id=${currentData?.jobInstanceId}`,
         target: '_blank'
@@ -301,7 +301,13 @@ const HeaderContainer = (props: any) => {
       click: handlerSubmit,
       hotKey: (e: KeyboardEvent) => e.shiftKey && e.key === 'F10',
       hotKeyDesc: 'Shift+F10',
-      isShow: currentTab?.type == TabsPageType.project && !isRunning(currentData),
+      isShow:
+        currentTab?.type == TabsPageType.project &&
+        !isRunning(currentData) &&
+        currentTab?.subType?.toLowerCase() !== DIALECT.JAVA &&
+        currentTab?.subType?.toLowerCase() !== DIALECT.SCALA &&
+        currentTab?.subType?.toLowerCase() !== DIALECT.PYTHON_LONG &&
+        currentTab?.subType?.toLowerCase() !== DIALECT.FLINKSQLENV,
       props: {
         style: { background: '#52c41a' },
         type: 'primary'
@@ -317,7 +323,8 @@ const HeaderContainer = (props: any) => {
       isShow:
         currentTab?.type == TabsPageType.project &&
         !isRunning(currentData) &&
-        currentData?.dialect?.toLowerCase() === DIALECT.FLINK_SQL,
+        (currentTab?.subType?.toLowerCase() === DIALECT.FLINK_SQL ||
+          currentTab?.subType?.toLowerCase() === DIALECT.FLINKJAR),
       props: {
         style: { background: '#52c41a' },
         type: 'primary'
@@ -423,4 +430,4 @@ export default connect(
     dsConfig: Config.dsConfig
   }),
   mapDispatchToProps
-)(HeaderContainer);
+)(memo(HeaderContainer));
diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/constants.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/constants.tsx
@@ -135,10 +135,6 @@ export const JOB_TYPE: DefaultOptionType[] = [
   {
     label: 'Jdbc Query Type',
     options: [
-      {
-        value: 'Sql',
-        label: 'Sql'
-      },
       {
         value: 'Mysql',
         label: 'Mysql'

diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/index.tsx
@@ -232,9 +232,8 @@ const Project: React.FC = (props: connect) => {
    * 删除目录, 并刷新目录树
    */
   const handleDeleteSubmit = async () => {
-    debugger
     const { key, isLeaf, name, type } = projectState.rightClickedNode;
-    const {taskId, task} = projectState.value
+    const { taskId, task } = projectState.value;
 
     handleContextCancel();
     if (!isLeaf) {
@@ -248,15 +247,16 @@ const Project: React.FC = (props: connect) => {
     Modal.confirm({
       title: l('datastudio.project.delete.job', '', { type, name }),
       width: '30%',
-      content:
-          <Text className={'needWrap'} type='danger'>
-            {l('datastudio.project.delete.job.confirm')}
-          </Text>,
+      content: (
+        <Text className={'needWrap'} type='danger'>
+          {l('datastudio.project.delete.job.confirm')}
+        </Text>
+      ),
       okText: l('button.confirm'),
       cancelText: l('button.cancel'),
       onOk: async () => {
         await handleRemoveById(API_CONSTANTS.DELETE_CATALOGUE_BY_ID_URL, key, () => {
-           dispatch({ type: STUDIO_MODEL.removeTag, payload: taskId });
+          dispatch({ type: STUDIO_MODEL.removeTag, payload: taskId });
           dispatch({ type: STUDIO_MODEL_ASYNC.queryProject });
         });
       }

diff --git a/dinky-web/src/pages/DataStudio/MiddleContainer/Editor/index.tsx b/dinky-web/src/pages/DataStudio/MiddleContainer/Editor/index.tsx
@@ -37,7 +37,7 @@ import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
 import { Monaco } from '@monaco-editor/react';
 import { Button, Spin } from 'antd';
 import { editor, KeyCode, KeyMod } from 'monaco-editor';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { format } from 'sql-formatter';
 
 export type EditorProps = {

diff --git a/dinky-web/src/pages/DataStudio/RightContainer/JobConfig/index.tsx b/dinky-web/src/pages/DataStudio/RightContainer/JobConfig/index.tsx
@@ -84,7 +84,7 @@ const JobConfig = (props: any) => {
       type: ALERT_MODEL_ASYNC.queryAlertGroup
     });
 
-    form.setFieldsValue({...current, type: current?.type ?? RUN_MODE.LOCAL});
+    form.setFieldsValue({ ...current, type: current?.type ?? RUN_MODE.LOCAL });
   }, [current]);
 
   const onValuesChange = (change: { [key in string]: any }, all: any) => {

diff --git a/dinky-web/src/pages/DataStudio/model.ts b/dinky-web/src/pages/DataStudio/model.ts
@@ -29,11 +29,11 @@ import { Cluster, DataSources } from '@/types/RegCenter/data';
 import { l } from '@/utils/intl';
 import { createModelTypes } from '@/utils/modelUtils';
 import { Effect, Reducer } from '@@/plugin-dva/types';
+import { Monaco } from '@monaco-editor/react';
 import { DefaultOptionType } from 'antd/es/select';
 import { editor } from 'monaco-editor';
 import React from 'react';
 import ICodeEditor = editor.ICodeEditor;
-import {Monaco} from "@monaco-editor/react";
 
 /**
  * 初始化布局宽高度

diff --git a/dinky-web/src/pages/Home/DevOverView/index.tsx b/dinky-web/src/pages/Home/DevOverView/index.tsx
@@ -1,19 +1,19 @@
 /*
  *
- *   Licensed to the Apache Software Foundation (ASF) under one or more
- *   contributor license agreements.  See the NOTICE file distributed with
- *   this work for additional information regarding copyright ownership.
- *   The ASF licenses this file to You under the Apache License, Version 2.0
- *   (the "License"); you may not use this file except in compliance with
- *   the License.  You may obtain a copy of the License at
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
  *
- *      http://www.apache.org/licenses/LICENSE-2.0
+ *     http://www.apache.org/licenses/LICENSE-2.0
  *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
  *
  */
 
@@ -29,7 +29,8 @@ import React, { useState } from 'react';
 
 const noPadding = {
   paddingInline: '0',
-  paddingBlock: '0'
+  paddingBlock: '0',
+  height: parent.innerHeight / 2
 };
 
 const DevOverView: React.FC = () => {
@@ -43,6 +44,7 @@ const DevOverView: React.FC = () => {
       }}
     >
       <ProCard
+        style={{ height: '100%' }}
         title={
           <>
             <Badge status='processing' />
@@ -55,7 +57,7 @@ const DevOverView: React.FC = () => {
         split={split}
         bodyStyle={noPadding}
       >
-        <ProCard split='vertical' bodyStyle={noPadding}>
+        <ProCard split='vertical' bodyStyle={noPadding} style={{ height: '100%' }}>
           <ProCard
             title={l('home.job.development')}
             split='horizontal'

diff --git a/dinky-web/src/pages/Home/JobOverView/index.tsx b/dinky-web/src/pages/Home/JobOverView/index.tsx
@@ -1,19 +1,19 @@
 /*
  *
- *   Licensed to the Apache Software Foundation (ASF) under one or more
- *   contributor license agreements.  See the NOTICE file distributed with
- *   this work for additional information regarding copyright ownership.
- *   The ASF licenses this file to You under the Apache License, Version 2.0
- *   (the "License"); you may not use this file except in compliance with
- *   the License.  You may obtain a copy of the License at
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
  *
- *      http://www.apache.org/licenses/LICENSE-2.0
+ *     http://www.apache.org/licenses/LICENSE-2.0
  *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
  *
  */
 
@@ -46,6 +46,8 @@ const JobOverView: React.FC = () => {
         }}
       >
         <ProCard
+          boxShadow={true}
+          style={{ height: '100%' }}
           title={
             <>
               <Badge status='processing' />