[Optimization-2284][web] Optimize dinky web and fix some bugs (#2285)

* [Optimization-2284][web] Optimize dinky web and fix some bugs * spotless apply * Resolve code conflicts --------- Co-authored-by: wenmo <[email protected]>
DataLinkDC · Sep 2, 2023 · 8546bb1 · 8546bb1
1 parent bca2f9e
commit 8546bb1
Show file tree

Hide file tree

Showing 18 changed files with 247 additions and 232 deletions.
diff --git a/dinky-admin/src/main/java/org/dinky/data/model/TaskExtConfig.java b/dinky-admin/src/main/java/org/dinky/data/model/TaskExtConfig.java
@@ -19,8 +19,11 @@
 
 package org.dinky.data.model;
 
+import org.dinky.assertion.Asserts;
+
 import java.io.Serializable;
 import java.util.ArrayList;
+import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
 import java.util.stream.Collectors;
@@ -54,7 +57,9 @@ public List<String> getCustomConfigKeys() {
 
     // 获取自定义配置的所有key-value
     public Map<String, String> getCustomConfigMaps() {
-        return customConfig.stream().collect(Collectors.toMap(ConfigItem::getKey, ConfigItem::getValue));
+        return Asserts.isNotNullCollection(customConfig)
+                ? customConfig.stream().collect(Collectors.toMap(ConfigItem::getKey, ConfigItem::getValue))
+                : new HashMap<>();
     }
 
     // 是否包含某个key

diff --git a/dinky-web/src/app.tsx b/dinky-web/src/app.tsx
@@ -61,7 +61,6 @@ const queryUserInfo = async () => {
   return getDataByParamsReturnResult(API_CONSTANTS.CURRENT_USER).then(
     (result) => {
       const { user, roleList, tenantList, currentTenant, menuList, saTokenInfo } = result.datas;
-      extraRoutes = menuList;
       const currentUser: API.CurrentUser = {
         user: {
           ...user,
@@ -74,17 +73,10 @@ const queryUserInfo = async () => {
         tokenInfo: saTokenInfo
       };
       return currentUser;
-    },
-    (error) => {
-      history.push(loginPath);
-      console.log(error);
-      return undefined;
     }
   );
 };
 
-const fetchUserInfo = async () => await queryUserInfo();
-
 /**
  * @see  https://umijs.org/zh-CN/plugins/plugin-initial-state
  * */
@@ -94,10 +86,21 @@ export async function getInitialState(): Promise<{
   loading?: boolean;
   fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
 }> {
+
+  const fetchUserInfo = async () => {
+    try {
+      return await queryUserInfo();
+    } catch (error) {
+      history.push(loginPath);
+    }
+    return undefined;
+  };
+
   // 如果不是登录页面，执行
   const { location } = history;
   if (location.pathname !== loginPath) {
     const currentUser = await fetchUserInfo();
+    extraRoutes = currentUser?.menuList;
     return {
       fetchUserInfo,
       currentUser,
@@ -129,11 +132,11 @@ export const layout: RunTimeLayoutConfig = ({ initialState }) => {
     rightContentRender: () => <RightContent />,
     footerRender: () => <Footer />,
     siderWidth: 180,
-    waterMarkProps: {
+    /*waterMarkProps: {
       content: initialState?.currentUser?.user.username + ' ' + new Date().toLocaleString(),
       fontColor:
         theme === THEME.light || undefined ? 'rgba(0, 0, 0, 0.15)' : 'rgba(255, 255, 255, 0.15)'
-    },
+    },*/
     isChildrenLayout: true,
     onPageChange: () => {
       const { location } = history;
@@ -191,7 +194,7 @@ const patch = (oldRoutes: any, routes: SysMenu[]) => {
   oldRoutes[1].routes = oldRoutes[1].routes.map(
     (route: { routes: { path: any; element: JSX.Element }[]; path: string }) => {
       if (route.routes?.length) {
-        const redirect = routes.filter((r) => r.path.startsWith(route.path));
+        const redirect = routes?.filter((r) => r.path.startsWith(route.path));
         if (redirect.length) {
           route.routes.shift();
           route.routes.unshift({
@@ -217,19 +220,19 @@ export function patchClientRoutes({ routes }: { routes: SysMenu[] }) {
  * 路由切换并只加载首次
  */
 export function onRouteChange({
-  location,
-  clientRoutes,
-  routes,
-  action
-}: {
+                                location,
+                                clientRoutes,
+                                routes,
+                                action
+                              }: {
   location: any;
   clientRoutes: any;
   routes: any;
   action: any;
 }) {
   if (location.pathname !== loginPath && !rendered) {
     const filterMenus = (menus: SysMenu[]) => {
-      return menus.filter((menu) => menu.type !== 'F');
+      return menus?.filter((menu) => menu.type !== 'F');
     };
     extraRoutes = filterMenus(extraRoutes);
     patchClientRoutes({ routes: clientRoutes });

diff --git a/dinky-web/src/components/RightContent/index.tsx b/dinky-web/src/components/RightContent/index.tsx
@@ -60,44 +60,38 @@ const GlobalHeaderRight: React.FC = () => {
   /**
    * css
    */
-  const actionClassName = useEmotionCss(({ token }) => {
-    return {
-      display: 'flex',
-      float: 'right',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: '48px',
-      marginLeft: 'auto',
-      overflow: 'hidden',
-      cursor: 'pointer',
-      padding: '0 9px',
-      color: '#fff',
-      borderRadius: token.borderRadius,
-      '&:hover': {
-        backgroundColor: token.colorBgTextHover
-      }
-    };
-  });
+  const actionClassName = {
+    display: 'flex',
+    float: 'right',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '48px',
+    marginLeft: 'auto',
+    overflow: 'hidden',
+    cursor: 'pointer',
+    padding: '0 9px',
+    color: '#fff',
+    '&:hover': {
+      backgroundColor: '#fff'
+    }
+  };
 
   /**
    * full screen css
    */
-  const fullScreenClassName = useEmotionCss(({ token }) => {
-    return {
-      display: 'flex',
-      float: 'right',
-      height: '48px',
-      marginLeft: 'auto',
-      overflow: 'hidden',
-      cursor: 'pointer',
-      padding: '0 12px',
-      borderRadius: token.borderRadius,
-      color: 'red',
-      '&:hover': {
-        backgroundColor: token.colorPrimary
-      }
-    };
-  });
+  const fullScreenClassName = {
+    display: 'flex',
+    float: 'right',
+    height: '48px',
+    marginLeft: 'auto',
+    overflow: 'hidden',
+    cursor: 'pointer',
+    padding: '0 12px',
+    color: '#fff',
+    '&:hover': {
+      backgroundColor: '#fff'
+    }
+  };
 
   /**
    * full screen or exit full screen
@@ -110,8 +104,7 @@ const GlobalHeaderRight: React.FC = () => {
   };
 
   const fullScreenProps = {
-    style: { color: 'white' },
-    className: fullScreenClassName
+    style: fullScreenClassName
   };
 
   const menuVersion = l('menu.version', '', { version: VERSION });
@@ -129,9 +122,9 @@ const GlobalHeaderRight: React.FC = () => {
       </Tooltip>
       <Avatar />
       <Tooltip placement='bottom' title={<span>{menuVersion}</span>}>
-        <Space className={actionClassName}>{menuVersion}</Space>
+        <Space style={actionClassName}>{menuVersion}</Space>
       </Tooltip>
-      <SelectLang icon={<GlobalOutlined />} className={actionClassName} />
+      <SelectLang icon={<GlobalOutlined />} style={actionClassName} />
       <Switch
         key={'themeSwitch'}
         checked={theme === THEME.dark}

diff --git a/dinky-web/src/global.less b/dinky-web/src/global.less
@@ -24,8 +24,8 @@ body,
   overflow-x: auto;
   overflow-y: auto;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-    'Noto Color Emoji';
+  'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+  'Noto Color Emoji';
 }
 
 // .login-form style --- start ----
@@ -48,15 +48,17 @@ body,
 
 .logo {
   position: absolute;
-  top: -5vh;
-  left: -30vw;
+  top: 10vh;
+  left: 20vw;
   display: flex;
   flex: auto;
   flex-flow: column-reverse;
   width: 28vw;
 }
 
 .desc {
+  font-weight: 600;
+  font-size: 24px;
   margin-top: 2rem;
   margin-bottom: 1rem;
   //color: @text-color-secondary;
@@ -82,6 +84,7 @@ body,
     margin-bottom: -15vh;
     margin-left: 60vw;
     box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.4);
+    border-radius: 10px;
   }
 
   .loginform {
@@ -244,18 +247,12 @@ ol {
     .ant-tree-node-content-wrapper {
       display: flex;
 
-      :hover {
-        color: #1eef07;
-      }
     }
   }
 }
 .ant-tree-node-content-wrapper {
   display: flex;
 
-  :hover {
-    color: #1eef07;
-  }
 }
 .gitCodeTree {
   min-height: 70vh;
@@ -381,7 +378,7 @@ h5 {
   justify-content: space-between;
   line-height: 32px;
   padding-inline: 10px;
-  padding-block: 5px;
+  padding-block: 1px;
   border-block: 1px solid;
 }
 
@@ -421,3 +418,4 @@ h5 {
   display: flex !important;
   align-items: baseline !important;
 }
+
diff --git a/dinky-web/src/locales/en-US/pages.ts b/dinky-web/src/locales/en-US/pages.ts
@@ -71,12 +71,14 @@ export default {
   'home.job.failed.name': 'Job Name',
   'home.job.failed.time': 'Abnormal Time',
   'home.develop': 'Data Develop',
+  'home.job.development': 'Development',
   'home.job.batch': 'Batch Job',
   'home.job.stream': 'Streaming Job',
   'home.job.total': 'Number of Jobs',
   'home.job.onlineRate': 'Number of Jobs Online Rate',
   'home.job.type': 'Job Type',
   'home.job.rate': 'Proportion of Jobs',
+  'home.develop.re': 'Resource Registration',
   'home.develop.re.ci': 'Flink Cluster Instance',
   'home.develop.re.cc': 'Cluster Configuration',
   'home.develop.re.ds': 'Data Source',

diff --git a/dinky-web/src/locales/zh-CN/pages.ts b/dinky-web/src/locales/zh-CN/pages.ts
@@ -68,12 +68,14 @@ export default {
   'home.job.failed.name': '任务名称',
   'home.job.failed.time': '已异常时间',
   'home.develop': ' 数据开发',
+  'home.job.development': '建设情况',
   'home.job.batch': '批作业',
   'home.job.stream': '流作业',
   'home.job.total': '作业数',
   'home.job.onlineRate': '作业上线率',
   'home.job.type': '作业类型',
   'home.job.rate': '作业占比',
+  'home.develop.re': '资源注册情况',
   'home.develop.re.ci': 'Flink 集群实例',
   'home.develop.re.cc': '集群配置',
   'home.develop.re.ds': '数据源',

diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/JobModal/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/JobModal/index.tsx
@@ -125,7 +125,6 @@ const JobModal: React.FC<JobModalProps> = (props) => {
           name='note'
           label={l('catalog.note')}
           placeholder={l('catalog.note.placeholder')}
-          rules={[{ required: true, message: l('catalog.note.placeholder') }]}
         />
         {isUDF(jobType) && (
           <>

diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/function.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/function.tsx
@@ -41,7 +41,7 @@ export const buildProjectTree = (
   searchValue: string = '',
   path?: string[]
 ): any =>
-  data.map((item: Catalogue) => {
+  data?data.map((item: Catalogue) => {
     const currentPath = path ? [...path, item.name] : [item.name];
     return {
       // isLeaf: (item.type && item.children.length === 0) ,
@@ -60,7 +60,7 @@ export const buildProjectTree = (
       taskId: item.taskId,
       children: buildProjectTree(item.children, searchValue, currentPath)
     };
-  });
+  }):[];
 
 export const isUDF = (jobType: string) => {
   return jobType === 'Scala' || jobType === 'Python' || jobType === 'Java';