improve some feature (#2543)

* improve some feature * Spotless Apply --------- Co-authored-by: zhu-mingye <[email protected]>
DataLinkDC · Nov 17, 2023 · 3ec1e1f · 3ec1e1f
1 parent 0bb9459
commit 3ec1e1f
Show file tree

Hide file tree

Showing 16 changed files with 459 additions and 387 deletions.
diff --git a/dinky-web/src/components/CustomEditor/CodeEdit/index.tsx b/dinky-web/src/components/CustomEditor/CodeEdit/index.tsx
@@ -292,7 +292,7 @@ const CodeEdit = (props: CodeEditFormProps & connect) => {
     wordWrap: autoWrap,
     autoDetectHighContrast: true,
     lineNumbers,
-    ...options,
+    ...options
   };
   return (
     <>

diff --git a/dinky-web/src/components/Icons/DBIcons.tsx b/dinky-web/src/components/Icons/DBIcons.tsx
@@ -1,18 +1,20 @@
 /*
- * 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
+ *  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
+ *
+ *  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.
  */
 
 import Icon from '@ant-design/icons';
@@ -56,6 +58,36 @@ export const MysqlIcons = (props: any) => {
   );
 };
 
+export const SQLIcons = (props: any) => {
+  const size = props.size || defaultSvgSize;
+  return (
+    <>
+      <Icon
+        style={style}
+        component={() => (
+          <svg
+            className='icon'
+            viewBox='0 0 1024 1024'
+            version='1.1'
+            xmlns='http://www.w3.org/2000/svg'
+            width={size}
+            height={size}
+          >
+            <path
+              d='M841.14 36.57H182.86A146.29 146.29 0 0 0 36.57 182.86v658.28a146.29 146.29 0 0 0 146.29 146.29h658.28a146.29 146.29 0 0 0 146.29-146.29V182.86A146.29 146.29 0 0 0 841.14 36.57zM249.42 658.29a146.29 146.29 0 0 1-105.33-43.52l27.43-32.18a114.83 114.83 0 0 0 79 36.57c36.57 0 56-16.82 56-41.69s-20.11-36.57-47.54-47.54l-39.5-20.11a85.21 85.21 0 0 1-62.17-77.9 88.14 88.14 0 0 1 93.86-82q2.45 0.16 4.89 0.47a126.9 126.9 0 0 1 89.6 36.57l-24.5 29.62a94.35 94.35 0 0 0-65.1-25.6c-30.35 0-49.74 14.63-49.74 36.57s23.77 36.57 47.91 44.62l38.4 19a82.65 82.65 0 0 1 60.34 80.09c0.68 47.53-38.82 87.03-103.55 87.03z m365.71 73.14a119.59 119.59 0 0 1-115.2-73.14c-64-11-106.79-67.29-106.79-152.87 0-95.45 52.66-152.5 128.73-152.5S651 410 651 505.42c0 83.38-40.59 139-101.3 151.77a75.7 75.7 0 0 0 70.58 36.57 109.71 109.71 0 0 0 31.45-4.39l8.78 36.57a117.39 117.39 0 0 1-45.35 2.93z m269.53-76.8H712.78V355.84h46.81v256h125.07z'
+              fill='#FF5C5C'
+            ></path>
+            <path
+              d='M603.43 502.86c0-69.49-32.18-111.91-81.19-111.91s-80.82 42.42-80.82 111.91 31.82 116.3 80.82 116.3 81.19-44.62 81.19-116.3z'
+              fill='#FF5C5C'
+            ></path>
+          </svg>
+        )}
+      />
+    </>
+  );
+};
+
 export const OracleIcons = (props: any) => {
   const size = props.size || defaultSvgSize;
   return (

diff --git a/dinky-web/src/pages/DataStudio/BottomContainer/Lineage/index.tsx b/dinky-web/src/pages/DataStudio/BottomContainer/Lineage/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.
  *
  */
 
@@ -56,11 +56,11 @@ const Lineage: React.FC<connect> = (props) => {
     const params: StudioLineageParams = {
       type: 1, // todo: 暂时写死 ,后续优化
       dialect: dialect,
-      envId: envId,
+      envId: envId ?? -1,
       fragment: fragment,
       statement: statement,
       statementSet: statementSet,
-      databaseId: databaseId,
+      databaseId: databaseId ?? 0,
       variables: {}
     };
     getDataByParams(API_CONSTANTS.STUDIO_GET_LINEAGE, params).then((res) =>

diff --git a/dinky-web/src/pages/DataStudio/HeaderContainer/function.tsx b/dinky-web/src/pages/DataStudio/HeaderContainer/function.tsx
@@ -19,18 +19,20 @@
 
 import { TabsPageType, TaskDataType } from '@/pages/DataStudio/model';
 import { JOB_LIFE_CYCLE, JOB_STATUS } from '@/pages/DevOps/constants';
-import { HomeOutlined } from '@ant-design/icons';
+import { EnvironmentOutlined } from '@ant-design/icons';
 
 /**
  * @description: 生成面包屑
  */
 export const buildBreadcrumbItems = (breadcrumb: string) => {
   // 如果有 activeBreadcrumbTitle, 则切割 activeBreadcrumbTitle, 生成面包屑数组, 并映射
   const activeBreadcrumbTitleList = Array.from(breadcrumb.split('/')).map((title) => ({
-    title: <>{title}</>
+    title: title,
+    // path: `/${title}`,
+    breadcrumbName: title
   }));
 
-  return [{ title: <HomeOutlined /> }, ...activeBreadcrumbTitleList];
+  return [{ title: <EnvironmentOutlined /> }, ...activeBreadcrumbTitleList];
 };
 
 export const projectCommonShow = (type?: TabsPageType) => {

diff --git a/dinky-web/src/pages/DataStudio/HeaderContainer/index.tsx b/dinky-web/src/pages/DataStudio/HeaderContainer/index.tsx
@@ -35,11 +35,18 @@ import {
   executeSql,
   getJobPlan
 } from '@/pages/DataStudio/HeaderContainer/service';
-import { StateType, TabsPageSubType, TabsPageType, VIEW } from '@/pages/DataStudio/model';
+import {
+  DataStudioTabsItemType,
+  StateType,
+  TabsPageSubType,
+  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';
 import { handlePutDataJson } from '@/services/BusinessCrud';
+import { DIALECT } from '@/services/constants';
 import { BaseConfigProperties } from '@/types/SettingCenter/data';
 import { l } from '@/utils/intl';
 import { SuccessMessageAsync } from '@/utils/messages';
@@ -104,7 +111,7 @@ const HeaderContainer = (props: any) => {
   );
 
   const currentData = getCurrentData(panes, activeKey);
-  const currentTab = getCurrentTab(panes, activeKey);
+  const currentTab = getCurrentTab(panes, activeKey) as DataStudioTabsItemType;
 
   useEffect(() => {
     queryDsConfig(SettingConfigKeyEnum.DOLPHIN_SCHEDULER.toLowerCase());
@@ -215,6 +222,8 @@ const HeaderContainer = (props: any) => {
     }
   };
 
+  console.log('currentData', props, currentData);
+
   const showExplain = async () => {
     modal.confirm({
       title: l('pages.datastudio.explain.validate.msg'),
@@ -242,7 +251,10 @@ const HeaderContainer = (props: any) => {
       // 执行图按钮
       icon: <ApartmentOutlined />,
       title: l('button.graph'),
-      isShow: projectCommonShow(currentTab?.type),
+      isShow:
+        (projectCommonShow(currentTab?.type) &&
+          currentData?.dialect?.toLowerCase() === DIALECT.FLINK_SQL) ||
+        currentData?.dialect?.toLowerCase() === DIALECT.FLINKJAR,
       click: async () => showDagGraph()
     },
     {
@@ -266,7 +278,9 @@ const HeaderContainer = (props: any) => {
       // 发布按钮
       icon: isOnline(currentData) ? <MergeCellsOutlined /> : <FundOutlined />,
       title: isOnline(currentData) ? l('button.offline') : l('button.publish'),
-      isShow: currentTab?.type == TabsPageType.project,
+      isShow:
+        currentTab?.type == TabsPageType.project &&
+        currentData?.dialect?.toLowerCase() === DIALECT.FLINK_SQL,
       click: () => handleChangeJobLife()
     },
     {
@@ -302,7 +316,10 @@ const HeaderContainer = (props: any) => {
       click: handlerDebug,
       hotKey: (e: KeyboardEvent) => e.shiftKey && e.key === 'F9',
       hotKeyDesc: 'Shift+F9',
-      isShow: currentTab?.type == TabsPageType.project && !isRunning(currentData),
+      isShow:
+        currentTab?.type == TabsPageType.project &&
+        !isRunning(currentData) &&
+        currentData?.dialect?.toLowerCase() === DIALECT.FLINK_SQL,
       props: {
         style: { background: '#52c41a' },
         type: 'primary'
@@ -345,7 +362,7 @@ const HeaderContainer = (props: any) => {
 
     return (
       <FlexCenterDiv style={{ width: (size.width - 2 * VIEW.paddingInline) / 2 }}>
-        <Breadcrumb separator={'>'} items={buildBreadcrumbItems(activeBreadcrumbTitle)} />
+        <Breadcrumb separator={'/'} items={buildBreadcrumbItems(activeBreadcrumbTitle)} />
       </FlexCenterDiv>
     );
   };

diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/constants.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/constants.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.
  *
  */
 
@@ -89,7 +89,8 @@ export const JOB_RIGHT_MENU = (disabled = false): MenuItemType[] => [
   {
     key: 'exportJson',
     icon: <UpCircleTwoTone />,
-    label: l('right.menu.exportJson')
+    label: l('right.menu.exportJson'),
+    disabled: true // todo: 此功能暂时不实现 先禁用掉
   },
   {
     key: 'copy',
@@ -128,10 +129,6 @@ export const JOB_TYPE: DefaultOptionType[] = [
       {
         value: 'FlinkSqlEnv',
         label: 'FlinkSqlEnv'
-      },
-      {
-        value: 'KubernetesApplication',
-        label: 'KubernetesApplication'
       }
     ]
   },

diff --git a/dinky-web/src/pages/DataStudio/MiddleContainer/Editor/index.tsx b/dinky-web/src/pages/DataStudio/MiddleContainer/Editor/index.tsx
@@ -21,6 +21,7 @@ import CodeEdit from '@/components/CustomEditor/CodeEdit';
 import { useEditor } from '@/hooks/useEditor';
 import { TASK_VAR_FILTER } from '@/pages/DataStudio/MiddleContainer/Editor/constants';
 import DiffModal from '@/pages/DataStudio/MiddleContainer/Editor/DiffModal';
+import { matchLanguage } from '@/pages/DataStudio/MiddleContainer/function';
 import {
   DataStudioTabsItemType,
   StateType,
@@ -29,7 +30,6 @@ import {
   TaskDataType
 } from '@/pages/DataStudio/model';
 import { JOB_LIFE_CYCLE } from '@/pages/DevOps/constants';
-import { DIALECT } from '@/services/constants';
 import { API_CONSTANTS } from '@/services/endpoints';
 import { l } from '@/utils/intl';
 import { connect, useRequest } from '@@/exports';
@@ -141,24 +141,15 @@ const CodeEditor: React.FC<EditorProps & any> = (props) => {
         <DiffModal
           diffs={diff}
           open={isModalOpen}
-          language={
-            tabsItem?.params?.taskData?.dialect?.toLowerCase() === DIALECT.FLINK_SQL
-              ? 'flinksql'
-              : 'sql'
-          }
+          language={matchLanguage(tabsItem?.params?.taskData?.dialect)}
           fileName={currentData?.name}
           onUse={upDateTask}
         />
         <CodeEdit
           monacoRef={monacoInstance}
           editorRef={editorInstance}
           code={tabsItem?.params?.taskData?.statement}
-          language={
-            tabsItem?.params?.taskData?.dialect?.toLowerCase() === DIALECT.FLINK_SQL
-              ? 'flinksql'
-              : 'sql'
-          }
-          // language={'sql'}
+          language={matchLanguage(tabsItem?.params?.taskData?.dialect)}
           editorDidMount={editorDidMount}
           onChange={handleEditChange}
           enableSuggestions={true}

diff --git a/dinky-web/src/pages/DataStudio/MiddleContainer/function.tsx b/dinky-web/src/pages/DataStudio/MiddleContainer/function.tsx
@@ -40,11 +40,42 @@ import {
   PhoenixIcons,
   PostgresqlIcons,
   PrestoIcons,
+  SQLIcons,
   SqlServerIcons,
   StarRocksIcons
 } from '@/components/Icons/DBIcons';
 import { DIALECT } from '@/services/constants';
 
+export const matchLanguage = (language = DIALECT.FLINK_SQL) => {
+  switch (language.toLowerCase()) {
+    case DIALECT.FLINK_SQL:
+    case DIALECT.FLINKSQLENV:
+    case DIALECT.FLINKJAR:
+      return DIALECT.FLINK_SQL;
+    case DIALECT.SQL:
+    case DIALECT.SQLSERVER:
+    case DIALECT.POSTGRESQL:
+    case DIALECT.HIVE:
+    case DIALECT.CLICKHOUSE:
+    case DIALECT.ORACLE:
+    case DIALECT.DORIS:
+    case DIALECT.PHOENIX:
+    case DIALECT.PRESTO:
+    case DIALECT.MYSQL:
+    case DIALECT.STARROCKS:
+      return DIALECT.SQL;
+    case DIALECT.PYTHON:
+    case DIALECT.PYTHON_LONG:
+      return DIALECT.PYTHON;
+    case DIALECT.SCALA:
+      return DIALECT.SCALA;
+    case DIALECT.JAVA:
+      return DIALECT.JAVA;
+    default:
+      return DIALECT.SQL;
+  }
+};
+//
 export const getTabIcon = (type: string, size?: number) => {
   if (!type) {
     return <FileIcon />;
@@ -78,6 +109,8 @@ export const getTabIcon = (type: string, size?: number) => {
       return <FlinkSQLSvg />;
     case DIALECT.FLINKSQLENV:
       return <FlinkSQLEnvSvg />;
+    case DIALECT.SQL:
+      return <SQLIcons size={size} />;
     case DIALECT.MYSQL:
       return <MysqlIcons size={size} />;
     case DIALECT.ORACLE:

diff --git a/dinky-web/src/pages/DataStudio/RightContainer/JobConfig/function.tsx b/dinky-web/src/pages/DataStudio/RightContainer/JobConfig/function.tsx
@@ -118,7 +118,7 @@ export const buildClusterConfigOptions = (current: any, clusterConfiguration: Cl
 /**
  * build env options
  */
-export const buildEnvOptions = (env: any[]) => {
+export const buildEnvOptions = (env: any[], isDisabled: boolean) => {
   const envList: DefaultOptionType[] = [
     {
       label: l('button.disable'),
@@ -139,7 +139,8 @@ export const buildEnvOptions = (env: any[]) => {
     envList.push({
       label: tag,
       value: item.id,
-      key: item.id
+      key: item.id,
+      disabled: !item.enabled || !isDisabled
     });
   }
   return envList;