[Fix] cluster edit bug ,header show lock (#2098)

* [Fix] cluster edit bug,header show lock * [Fix] addType form item
apache · Nov 25, 2022 · a2dbb6e · a2dbb6e
1 parent 4098916
commit a2dbb6e
Show file tree

Hide file tree

Showing 15 changed files with 153 additions and 64 deletions.
diff --git a/streampark-console/streampark-console-webapp/src/enums/appEnum.ts b/streampark-console/streampark-console-webapp/src/enums/appEnum.ts
@@ -66,3 +66,8 @@ export enum RouterTransitionEnum {
 export enum AuthUserName {
   ADMIN = 'admin',
 }
+
+export enum ClusterAddTypeEnum {
+  ADD_EXISTING = 0,
+  ADD_NEW = 1,
+}
diff --git a/...rk-console/streampark-console-webapp/src/layouts/default/header/components/LockScreen.vue b/...rk-console/streampark-console-webapp/src/layouts/default/header/components/LockScreen.vue
@@ -0,0 +1,43 @@
+<!--
+  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
+
+      https://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.
+-->
+<script lang="ts" setup>
+  import { Tooltip } from 'ant-design-vue';
+  import Icon from '/@/components/Icon';
+  import { useModal } from '/@/components/Modal';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  const LockAction = createAsyncComponent(() => import('./lock/LockModal.vue'));
+
+  const [register, { openModal }] = useModal();
+  const { t } = useI18n();
+  function handleLock() {
+    openModal(true);
+  }
+</script>
+<template>
+  <div>
+    <Tooltip :title="t('layout.header.tooltipLock')" placement="bottom" :mouseEnterDelay="0.5">
+      <Icon
+        icon="ant-design:lock-outlined"
+        class="!px-8px"
+        style="font-size: 19px !important"
+        @click="handleLock"
+      />
+    </Tooltip>
+    <LockAction @register="register" />
+  </div>
+</template>
diff --git a/...ampark-console/streampark-console-webapp/src/layouts/default/header/components/Slogan.vue b/...ampark-console/streampark-console-webapp/src/layouts/default/header/components/Slogan.vue
@@ -67,12 +67,12 @@
     }
   }
 
-  @media screen and (max-width: 1626px) {
+  @media screen and (max-width: 1670px) {
     .@{prefix-cls}:not(.collapse-slogo) {
       display: none;
     }
   }
-  @media screen and (max-width: 1420px) {
+  @media screen and (max-width: 1460px) {
     .@{prefix-cls}.collapse-slogo {
       display: none;
     }

diff --git a/streampark-console/streampark-console-webapp/src/layouts/default/header/components/index.ts b/streampark-console/streampark-console-webapp/src/layouts/default/header/components/index.ts
@@ -30,6 +30,7 @@ export const Github = createAsyncComponent(() => import('./Github.vue'));
 export const Slogan = createAsyncComponent(() => import('./Slogan.vue'));
 /* User Team */
 export const UserTeam = createAsyncComponent(() => import('./UserTeam.vue'));
+export const LockScreen = createAsyncComponent(() => import('./LockScreen.vue'));
 
 export const ErrorAction = createAsyncComponent(() => import('./ErrorAction.vue'));
 

diff --git a/...e/streampark-console-webapp/src/layouts/default/header/components/user-dropdown/index.vue b/...e/streampark-console-webapp/src/layouts/default/header/components/user-dropdown/index.vue
@@ -39,12 +39,6 @@
           v-if="getShowDoc"
         />
         <MenuDivider v-if="getShowDoc" />
-        <MenuItem
-          v-if="getUseLockPage"
-          key="lock"
-          :text="t('layout.header.tooltipLock')"
-          icon="ion:lock-closed-outline"
-        />
         <MenuItem
           key="logout"
           :text="t('layout.header.dropdownItemLoginOut')"
@@ -53,7 +47,6 @@
       </Menu>
     </template>
   </Dropdown>
-  <LockAction @register="register" />
   <PasswordModal @register="registerPasswordModal" />
 </template>
 <script lang="ts">
@@ -85,7 +78,6 @@
       Menu,
       MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')),
       MenuDivider: Menu.Divider,
-      LockAction: createAsyncComponent(() => import('../lock/LockModal.vue')),
       PasswordModal: createAsyncComponent(() => import('./PasswordModal.vue')),
     },
     props: {
@@ -94,19 +86,14 @@
     setup() {
       const { prefixCls } = useDesign('header-user-dropdown');
       const { t } = useI18n();
-      const { getShowDoc, getUseLockPage } = useHeaderSetting();
+      const { getShowDoc } = useHeaderSetting();
       const userStore = useUserStore();
 
       const getUserInfo = computed(() => {
         const { username = '', avatar, desc } = userStore.getUserInfo || {};
         return { username, avatar: avatar && avatar !== 'default.jpg' ? avatar : headerImg, desc };
       });
       const [registerPasswordModal, { openModal: openPasswordModal }] = useModal();
-      const [register, { openModal }] = useModal();
-
-      function handleLock() {
-        openModal(true);
-      }
 
       //  login out
       function handleLoginOut() {
@@ -133,9 +120,6 @@
           case 'password':
             openChangePassword();
             break;
-          case 'lock':
-            handleLock();
-            break;
         }
       }
 
@@ -145,8 +129,6 @@
         getUserInfo,
         handleMenuClick,
         getShowDoc,
-        register,
-        getUseLockPage,
         registerPasswordModal,
       };
     },

diff --git a/streampark-console/streampark-console-webapp/src/layouts/default/header/index.vue b/streampark-console/streampark-console-webapp/src/layouts/default/header/index.vue
@@ -68,6 +68,8 @@
 
       <FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
 
+      <LockScreen :class="`${prefixCls}-action__item lockscreen-item`" />
+
       <AppLocalePicker
         v-if="getShowLocalePicker"
         :reload="true"
@@ -107,6 +109,7 @@
     ErrorAction,
     Github,
     Slogan,
+    LockScreen,
   } from './components';
   import { useAppInject } from '/@/hooks/web/useAppInject';
   import { useDesign } from '/@/hooks/web/useDesign';
@@ -131,6 +134,7 @@
       ErrorAction,
       Github,
       Slogan,
+      LockScreen,
       Divider,
       AppDarkModeToggle,
     },

diff --git a/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/setting.ts b/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/setting.ts
@@ -79,6 +79,18 @@ export default {
     start: 'Start Cluster',
     edit: 'Edit Cluster',
     delete: 'Are you sure delete this cluster ?',
+    form: {
+      addType: 'Add Type',
+      addExisting: 'existing cluster',
+      addNew: 'new cluster',
+    },
+    placeholder: {
+      addType: 'Please select cluster Add Type',
+    },
+    required: {
+      address: 'cluster address is required',
+      clusterId: 'Yarn Session ClusterId is required',
+    },
   },
   env: {
     conf: 'Flink Conf',

diff --git a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/app.ts b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/app.ts
@@ -218,7 +218,7 @@ export default {
   },
   noteInfo: {
     note: '提示',
-    minutes: '分钟',
+    minute: '分钟',
     count: '次数',
     checkPointFailureOptions: 'CheckPoint失败策略',
     checkpointFailureRateInterval: 'checkpoint失败间隔',

diff --git a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/setting.ts b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/setting.ts
@@ -78,6 +78,18 @@ export default {
     start: '开启集群',
     edit: '编辑集群',
     delete: '确定要删除此集群 ?',
+    form: {
+      addType: '添加类型',
+      addExisting: '已有集群',
+      addNew: '全新集群',
+    },
+    placeholder: {
+      addType: '请选择集群添加类型',
+    },
+    required: {
+      address: '必须填写集群地址',
+      clusterId: 'Yarn Session ClusterId 为必填项',
+    },
   },
   env: {
     conf: 'Flink 配置',

diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/components/CustomForm.tsx b/streampark-console/streampark-console-webapp/src/views/flink/app/components/CustomForm.tsx
@@ -24,6 +24,7 @@ export interface CheckPointFailure {
   cpFailureAction: string;
 }
 import { cpTriggerAction } from '../data';
+import { useI18n } from '/@/hooks/web/useI18n';
 export default defineComponent({
   props: {
     value: {
@@ -33,6 +34,7 @@ export default defineComponent({
   },
   emits: ['updateValue'],
   setup(props, { emit }) {
+    const { t } = useI18n();
     const formItemContext = Form.useInjectFormItemContext();
     const triggerChange = (changedValue: Partial<CheckPointFailure>) => {
       emit('updateValue', { ...props.value, ...changedValue });
@@ -56,25 +58,25 @@ export default defineComponent({
               min={1}
               step={1}
               name="cpMaxFailureInterval"
-              placeholder="checkpoint failure rate interval"
+              placeholder={t('flink.app.noteInfo.checkpointFailureRateInterval')}
               allow-clear
               class="!w-260px mr-10px"
               value={props.value?.cpMaxFailureInterval}
               onChange={(value: any) => handleCpMaxFailureIntervalChange(value)}
             />
-            <Button style="width: 70px"> minute </Button>
+            <Button style="width: 70px"> {t('flink.app.noteInfo.minute')} </Button>
             <InputNumber
               style="margin-left: 1%"
               name="cpFailureRateInterval"
               min={1}
               step={1}
-              placeholder="max failures per interval"
+              placeholder={t('flink.app.noteInfo.maxFailuresPerInterval')}
               class="!mb-0 !w-200px"
               value={props.value?.cpFailureRateInterval}
               onChange={(value: any) => handleCpFailureRateIntervalChange(value)}
             />
 
-            <Button style="width: 70px"> count </Button>
+            <Button style="width: 70px"> {t('flink.app.noteInfo.count')} </Button>
             <Select
               name="cpFailureAction"
               style="margin-left: 1%"
@@ -101,11 +103,9 @@ export default defineComponent({
           <p class="conf-desc mt-10px">
             <span class="note-info">
               <Tag color="#2db7f5" class="tag-note">
-                Note
+                {t('flink.app.noteInfo.note')}
               </Tag>
-              Operation after checkpoint failure, e.g: Within 5 minutes (checkpoint failure rate
-              interval), if the number of checkpoint failures reaches 10 (max failures per
-              interval),action will be triggered(alert or restart job)
+              {t('flink.app.noteInfo.checkPointFailureNote')}
             </span>
           </p>
         </div>

diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/components/Dependency.vue b/streampark-console/streampark-console-webapp/src/views/flink/app/components/Dependency.vue
@@ -299,14 +299,14 @@
       @click="handleEditPom(dept)"
     >
       <template #message>
-        <Space @click="handleEditPom(value)" class="tag-dependency-pom">
+        <Space @click="handleEditPom(dept)" class="tag-dependency-pom">
           <Tag class="tag-dependency" color="#2db7f5">POM</Tag>
-          {{ value.artifactId }}-{{ value.version }}.jar
+          {{ dept.artifactId }}-{{ dept.version }}.jar
           <Icon
             :size="12"
             icon="ant-design:close-outlined"
             class="icon-close cursor-pointer"
-            @click.stop="handleRemovePom(value)"
+            @click.stop="handleRemovePom(dept)"
           />
         </Space>
       </template>
@@ -320,12 +320,12 @@
       <template #message>
         <Space>
           <Tag class="tag-dependency" color="#108ee9">JAR</Tag>
-          {{ value }}
+          {{ jar }}
           <Icon
             icon="ant-design:close-outlined"
             class="icon-close cursor-pointer"
             :size="12"
-            @click="handleRemoveJar(value)"
+            @click="handleRemoveJar(jar)"
           />
         </Space>
       </template>

diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useFlinkRender.tsx b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useFlinkRender.tsx
@@ -40,7 +40,9 @@ import { decodeByBase64 } from '/@/utils/cipher';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { SelectValue } from 'ant-design-vue/lib/select';
 import { CandidateTypeEnum } from '/@/enums/flinkEnum';
+import { useI18n } from '/@/hooks/web/useI18n';
 
+const { t } = useI18n();
 /* render input dropdown component */
 export const renderInputDropdown = (
   formModel: Recordable,
@@ -126,7 +128,7 @@ export const renderInputGroup = ({ model }) => {
   };
   return (
     <Form.Item
-      label="CheckPoint Failure Options"
+      label={t('flink.app.noteInfo.checkPointFailureOptions')}
       name="checkPointFailure"
       rules={[{ validator: () => handleCheckCheckpoint(model) }]}
     >
@@ -172,12 +174,9 @@ export const renderTotalMemory = ({ model, field }: RenderCallbackParams) => {
       <p class="conf-desc mt-10px">
         <span class="note-info">
           <Tag color="#2db7f5" class="tag-note">
-            Note
+            {t('flink.app.noteInfo.note')}
           </Tag>
-          Explicitly configuring both "total process memory" and "total Flink memory" is not
-          recommended. It may lead to deployment failures due to potential memory configuration
-          conflicts. Configuring other memory components also requires caution as it can produce
-          further configuration conflicts, The easiest way is to set "total process memory"
+          <span>{t('flink.app.noteInfo.totalMemoryNote')}</span>
         </span>
       </p>
     </div>

diff --git a/streampark-console/streampark-console-webapp/src/views/flink/setting/EditCluster.vue b/streampark-console/streampark-console-webapp/src/views/flink/setting/EditCluster.vue
@@ -54,6 +54,7 @@
     showActionButtonGroup: false,
   });
 
+  // submit edit
   async function handleSubmitCluster(values: Recordable) {
     try {
       changeLoading(true);
@@ -101,7 +102,7 @@
   async function getClusterInfo() {
     const res = await fetchGetCluster({ id: route?.query?.clusterId });
     Object.assign(cluster, res);
-    defaultOptions.value = JSON.parse(res.options || '{}');
+    Object.assign(defaultOptions, JSON.parse(res.options || '{}'));
     handleReset();
   }
   function handleReset() {