You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampark.apache.org by be...@apache.org on 2022/11/04 14:32:41 UTC
[incubator-streampark] branch dev updated: [Fix]: project icon,drawer cannot be closed,program args,project update (#1964)
This is an automated email from the ASF dual-hosted git repository.
benjobs pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampark.git
The following commit(s) were added to refs/heads/dev by this push:
new c9d19194c [Fix]: project icon,drawer cannot be closed,program args,project update (#1964)
c9d19194c is described below
commit c9d19194c9a5314eb218216522c0e622e042ea31
Author: Sizhu Wang <12...@qq.com>
AuthorDate: Fri Nov 4 22:32:35 2022 +0800
[Fix]: project icon,drawer cannot be closed,program args,project update (#1964)
* [Fix]: project icon,drawer cannot be closed,program args,project update
* [Improve]: add application execution mode enum
---
.../Modal/src/components/ModalWrapper.vue | 1 -
.../src/components/Modal/src/index.less | 2 +-
.../src/enums/flinkEnum.ts | 32 +++++-----
.../src/hooks/web/useMonaco.ts | 15 +++--
.../src/locales/lang/en/flink/app.ts | 2 +-
.../src/views/base/login/Login.vue | 68 +++++-----------------
.../src/views/base/login/LoginForm.vue | 7 +--
.../src/views/flink/app/Detail.vue | 9 ++-
.../src/views/flink/app/EditFlink.vue | 2 +
.../src/views/flink/app/EditStreamPark.vue | 2 +-
.../flink/app/components/AppView/LogModal.vue | 1 +
.../components/AppView/StartApplicationModal.vue | 3 +-
.../src/views/flink/app/components/Dependency.vue | 3 +-
.../flink/app/components/HadoopConfDrawer.vue | 1 -
.../src/views/flink/app/components/Mergely.vue | 1 +
.../app/components/PodTemplate/HistoryDrawer.vue | 1 -
.../app/components/PodTemplate/HostAliasDrawer.vue | 1 -
.../app/components/PodTemplate/PomTemplateTab.vue | 6 +-
.../components/PodTemplate/TemplateButtonGroup.vue | 36 ++++++------
.../src/views/flink/app/components/ProgramArgs.vue | 14 +++--
.../flink/app/components/UseSysHadoopConf.vue | 46 ++++++++-------
.../src/views/flink/app/components/flinkSql.vue | 53 ++++++++---------
.../src/views/flink/app/data/index.ts | 14 ++---
.../src/views/flink/app/hooks/useAppTableAction.ts | 5 +-
.../flink/app/hooks/useCreateAndEditSchema.ts | 34 +++++------
.../src/views/flink/app/hooks/useCreateSchema.ts | 3 +-
.../views/flink/app/hooks/useEditFlinkSchema.ts | 6 +-
.../src/views/flink/app/hooks/useEditStreamPark.ts | 4 +-
.../src/views/flink/app/hooks/useFlinkRender.tsx | 10 +++-
.../src/views/flink/app/hooks/useFlinkSchema.ts | 65 +++++++++++++--------
.../src/views/flink/app/hooks/useLog.ts | 45 ++++++++++++--
.../src/views/flink/app/styles/Add.less | 15 +----
.../src/views/flink/app/utils/index.ts | 22 +++++--
.../views/flink/project/components/ListItem.vue | 2 +-
.../views/flink/project/components/LogModal.vue | 48 +++++++++------
.../src/views/flink/project/useProject.ts | 2 +-
.../setting/components/FlinkClusterSetting.vue | 12 +++-
.../views/flink/setting/hooks/useClusterSetting.ts | 61 +++++++++++--------
38 files changed, 365 insertions(+), 289 deletions(-)
diff --git a/streampark-console/streampark-console-newui/src/components/Modal/src/components/ModalWrapper.vue b/streampark-console/streampark-console-newui/src/components/Modal/src/components/ModalWrapper.vue
index bf2a58174..a2fc28b25 100644
--- a/streampark-console/streampark-console-newui/src/components/Modal/src/components/ModalWrapper.vue
+++ b/streampark-console/streampark-console-newui/src/components/Modal/src/components/ModalWrapper.vue
@@ -63,7 +63,6 @@
const spinRef = ref<ElRef>(null);
const realHeightRef = ref(0);
const minRealHeightRef = ref(0);
-
let realHeight = 0;
let stopElResizeFn: Fn = () => {};
diff --git a/streampark-console/streampark-console-newui/src/components/Modal/src/index.less b/streampark-console/streampark-console-newui/src/components/Modal/src/index.less
index 2fbb39088..d17c7f328 100644
--- a/streampark-console/streampark-console-newui/src/components/Modal/src/index.less
+++ b/streampark-console/streampark-console-newui/src/components/Modal/src/index.less
@@ -101,7 +101,7 @@
position: absolute;
left: 0;
right: 0;
- border-top: 1px solid #f0f0f0;
+ border-top: 1px solid @border-color-dark;
}
> * {
diff --git a/streampark-console/streampark-console-newui/src/enums/flinkEnum.ts b/streampark-console/streampark-console-newui/src/enums/flinkEnum.ts
index f479e55ad..36c256f81 100644
--- a/streampark-console/streampark-console-newui/src/enums/flinkEnum.ts
+++ b/streampark-console/streampark-console-newui/src/enums/flinkEnum.ts
@@ -22,26 +22,32 @@ export enum BuildEnum {
FAILED = 2,
}
/* ExecutionMode */
-export enum ExecutionModeEnum {
- /* remote (standalone) */
+export enum ExecModeEnum {
+ /** remote (standalone) */
REMOTE = 1,
- /* yarn per-job (deprecated, please use yarn-application mode) */
+ /** yarn per-job (deprecated, please use yarn-application mode) */
YARN_PER_JOB = 2,
- /* yarn session */
+ /** yarn session */
YARN_SESSION = 3,
- /* yarn application */
+ /** yarn application */
YARN_APPLICATION = 4,
- /* kubernetes session */
+ /** kubernetes session */
KUBERNETES_SESSION = 5,
- /* kubernetes application */
+ /** kubernetes application */
KUBERNETES_APPLICATION = 6,
}
export const executionMap = {
- REMOTE: ExecutionModeEnum.REMOTE,
- YARN_PER_JOB: ExecutionModeEnum.YARN_PER_JOB,
- YARN_SESSION: ExecutionModeEnum.YARN_SESSION,
- YARN_APPLICATION: ExecutionModeEnum.YARN_APPLICATION,
- KUBERNETES_SESSION: ExecutionModeEnum.KUBERNETES_SESSION,
- KUBERNETES_APPLICATION: ExecutionModeEnum.KUBERNETES_APPLICATION,
+ /**1. remote (standalone) */
+ REMOTE: ExecModeEnum.REMOTE,
+ /**2. yarn per-job (deprecated, please use yarn-application mode) */
+ YARN_PER_JOB: ExecModeEnum.YARN_PER_JOB,
+ /**3. yarn session */
+ YARN_SESSION: ExecModeEnum.YARN_SESSION,
+ /**4. yarn application */
+ YARN_APPLICATION: ExecModeEnum.YARN_APPLICATION,
+ /**5. kubernetes session */
+ KUBERNETES_SESSION: ExecModeEnum.KUBERNETES_SESSION,
+ /**6. kubernetes application */
+ KUBERNETES_APPLICATION: ExecModeEnum.KUBERNETES_APPLICATION,
};
diff --git a/streampark-console/streampark-console-newui/src/hooks/web/useMonaco.ts b/streampark-console/streampark-console-newui/src/hooks/web/useMonaco.ts
index ea23f14c1..e183f3c13 100644
--- a/streampark-console/streampark-console-newui/src/hooks/web/useMonaco.ts
+++ b/streampark-console/streampark-console-newui/src/hooks/web/useMonaco.ts
@@ -101,13 +101,15 @@ export function useMonaco(
return suggestions;
};
- const registerCompletion = (monaco: any, languageId: string, callbackIds: any[]) => {
+ const registerCompletion = async (monaco: any, languageId: string, callbackIds: any[]) => {
if (callbackIds && callbackIds.length > 0) {
suggestLabels = callbackIds;
if (registerCompletionMap.has(languageId)) {
return;
}
registerCompletionMap.set(languageId, 1);
+ // remove last suggestions
+ disposable?.dispose();
disposable = monaco.languages.registerCompletionItemProvider(languageId, {
// triggerCharacters: ['${'],
@@ -149,6 +151,13 @@ export function useMonaco(
}
};
+ const setMonacoSuggest = async (suggestions: any[]) => {
+ await until(isSetup).toBeTruthy();
+ if (monacoInstance) {
+ registerCompletion(monacoInstance, options.language, suggestions);
+ }
+ };
+
const disposeInstance = async () => {
editor?.dispose();
};
@@ -165,9 +174,6 @@ export function useMonaco(
if (!el) {
return;
}
- if (options.suggestions && options.suggestions.length > 0) {
- registerCompletion(monaco, options.language, options.suggestions);
- }
const model = monaco.editor.createModel(options.code, options.language);
const defaultOptions = {
model,
@@ -218,6 +224,7 @@ export function useMonaco(
return {
onChange: changeEventHook.on,
setContent,
+ setMonacoSuggest,
getContent,
getInstance,
getMonacoInstance,
diff --git a/streampark-console/streampark-console-newui/src/locales/lang/en/flink/app.ts b/streampark-console/streampark-console-newui/src/locales/lang/en/flink/app.ts
index c93080805..f546244c3 100644
--- a/streampark-console/streampark-console-newui/src/locales/lang/en/flink/app.ts
+++ b/streampark-console/streampark-console-newui/src/locales/lang/en/flink/app.ts
@@ -63,7 +63,7 @@ export default {
format: 'Format',
fullScreen: 'Full Screen',
exit: 'Exit',
- successful: 'successful',
+ successful: 'Verification success',
compareFlinkSQL: 'Compare Flink SQL',
},
hadoopConfigTitle: 'System Hadoop Conifguration',
diff --git a/streampark-console/streampark-console-newui/src/views/base/login/Login.vue b/streampark-console/streampark-console-newui/src/views/base/login/Login.vue
index b5c9a5101..e728e74a2 100644
--- a/streampark-console/streampark-console-newui/src/views/base/login/Login.vue
+++ b/streampark-console/streampark-console-newui/src/views/base/login/Login.vue
@@ -34,7 +34,7 @@
<SvgIcon name="block" class="text-secondary" :size="200" />
</figure>
</div>
- <div class="container pb-2">
+ <div class="w-full px-100px mx-auto pb-2">
<Row :gutter="24">
<Col :md="12" :span="24" class="self-center pr-5 z-100 -enter-x">
<LoginSlogan />
@@ -42,7 +42,7 @@
<Col :md="12" :span="24">
<div
:class="`${prefixCls}-form`"
- class="relative w-auto m-auto max-w-460px px-12 bg-[rgba(0,0,0,0.5)] rounded-5px py-5 shadow-2xl shadow-blue-500 enter-x z-100"
+ class="relative w-auto m-auto max-w-420px bg-[rgba(0,0,0,0.5)] rounded-2px px-10 py-5 shadow-2xl shadow-blue-500 enter-x z-100"
>
<LoginForm />
</div>
@@ -102,16 +102,6 @@
) !important;
}
- .overlay {
- border-radius: inherit;
- height: 100%;
- left: 0;
- opacity: 0.5;
- position: absolute;
- top: 0;
- width: 100%;
- }
-
.@{prefix-cls}-form {
.ant-input {
padding-top: 3px;
@@ -133,49 +123,17 @@
}
}
}
-
- .waves {
- position: relative;
- width: 100%;
- height: 24vh;
- margin-bottom: -7px;
- /* 修复 Safari 等浏览器下方空隙 */
- min-height: 150px;
- max-height: 280px;
- width: 100%;
- }
-
- .parallax > use {
- animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
- }
-
- .parallax > use:nth-child(1) {
- animation-delay: -2s;
- animation-duration: 7s;
- }
-
- .parallax > use:nth-child(2) {
- animation-delay: -3s;
- animation-duration: 8s;
- }
-
- .parallax > use:nth-child(3) {
- animation-delay: -4s;
- animation-duration: 9s;
- }
-
- .parallax > use:nth-child(4) {
- animation-delay: -5s;
- animation-duration: 10s;
- }
-
- @keyframes move-forever {
- 0% {
- transform: translate3d(-90px, 0, 0);
- }
-
- 100% {
- transform: translate3d(85px, 0, 0);
+ [data-theme='dark']{
+ .@{prefix-cls}-form{
+ .ant-form-item-has-error :not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper,
+ .ant-input-affix-wrapper,
+ .ant-input {
+ color:rgba(0, 0, 0, 0.85);
+ background-color:white;
+ &::placeholder {
+ color: #bdbdbe !important;
+ }
+ }
}
}
</style>
diff --git a/streampark-console/streampark-console-newui/src/views/base/login/LoginForm.vue b/streampark-console/streampark-console-newui/src/views/base/login/LoginForm.vue
index 1b66aa9e4..022715a06 100644
--- a/streampark-console/streampark-console-newui/src/views/base/login/LoginForm.vue
+++ b/streampark-console/streampark-console-newui/src/views/base/login/LoginForm.vue
@@ -15,10 +15,9 @@
limitations under the License.
-->
<template>
- <div class="enter-x mb-20px text-light-50">
+ <div class="enter-x mb-50px text-light-50">
<div class="text-center enter-x">
- <img class="logo w-140px mx-auto my-30px" src="/@/assets/images/logo.png" />
- <div class="text-4xl form-title">{{ title }}</div>
+ <img class="logo w-160px mx-auto my-20px" src="/@/assets/images/logo.png" />
</div>
</div>
<Form
@@ -80,7 +79,6 @@
import { useI18n } from '/@/hooks/web/useI18n';
import { useMessage } from '/@/hooks/web/useMessage';
- import { useGlobSetting } from '/@/hooks/setting';
import { useUserStore } from '/@/store/modules/user';
import {
@@ -100,7 +98,6 @@
const FormItem = Form.Item;
const InputPassword = Input.Password;
- const { title } = useGlobSetting();
const { t } = useI18n();
const { createErrorModal, createMessage } = useMessage();
const { prefixCls } = useDesign('login');
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/Detail.vue b/streampark-console/streampark-console-newui/src/views/flink/app/Detail.vue
index 1f46721fb..671bd1418 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/Detail.vue
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/Detail.vue
@@ -16,6 +16,7 @@
-->
<script lang="ts">
import { defineComponent } from 'vue';
+ import { ExecModeEnum } from '/@/enums/flinkEnum';
export default defineComponent({
name: 'ApplicationDetail',
});
@@ -144,7 +145,13 @@
});
// Get data for the first time
if (Object.keys(app).length == 0) {
- if ([2, 3, 4].includes(res.executionMode)) {
+ if (
+ [
+ ExecModeEnum.YARN_PER_JOB,
+ ExecModeEnum.YARN_SESSION,
+ ExecModeEnum.YARN_APPLICATION,
+ ].includes(res.executionMode)
+ ) {
handleYarn();
}
handleDetailTabs();
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/EditFlink.vue b/streampark-console/streampark-console-newui/src/views/flink/app/EditFlink.vue
index 95760064d..0a65ff491 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/EditFlink.vue
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/EditFlink.vue
@@ -103,6 +103,8 @@
k8sNamespace: app.k8sNamespace,
alertId: selectAlertId,
yarnSessionClusterId: app.yarnSessionClusterId,
+ projectName: app.projectName,
+ module: app.module,
...resetParams,
};
if (!executionMode) {
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/EditStreamPark.vue b/streampark-console/streampark-console-newui/src/views/flink/app/EditStreamPark.vue
index f815dd1fa..9d5772010 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/EditStreamPark.vue
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/EditStreamPark.vue
@@ -61,7 +61,6 @@
const uploadLoading = ref(false);
const uploadJar = ref('');
- const flinkSql = ref();
const dependencyRef = ref();
const programArgRef = ref();
@@ -75,6 +74,7 @@
const {
alerts,
flinkEnvs,
+ flinkSql,
flinkClusters,
getEditStreamParkFormSchema,
registerDifferentDrawer,
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/components/AppView/LogModal.vue b/streampark-console/streampark-console-newui/src/views/flink/app/components/AppView/LogModal.vue
index c759c1491..9f82058c2 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/components/AppView/LogModal.vue
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/components/AppView/LogModal.vue
@@ -87,6 +87,7 @@
<template>
<BasicModal
canFullscreen
+ defaultFullscreen
:scrollTop="false"
@register="registerModal"
width="80%"
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/components/AppView/StartApplicationModal.vue b/streampark-console/streampark-console-newui/src/views/flink/app/components/AppView/StartApplicationModal.vue
index a5dfffa99..6dbf1ba6e 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/components/AppView/StartApplicationModal.vue
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/components/AppView/StartApplicationModal.vue
@@ -18,6 +18,7 @@
import { reactive, defineComponent } from 'vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { exceptionPropWidth } from '/@/utils';
+ import { isK8sExecMode } from '../../utils';
export default defineComponent({
name: 'StartApplicationModal',
@@ -62,7 +63,7 @@
},
defaultValue: false,
afterItem: h('span', { class: 'conf-switch' }, 'flame Graph support'),
- ifShow: () => [5, 6].includes(receiveData.executionMode),
+ ifShow: () => isK8sExecMode(receiveData.executionMode),
},
{
field: 'startSavePointed',
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/components/Dependency.vue b/streampark-console/streampark-console-newui/src/views/flink/app/components/Dependency.vue
index 4848cacda..b45af62fb 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/components/Dependency.vue
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/components/Dependency.vue
@@ -18,6 +18,7 @@
import { computed, defineComponent, onMounted, reactive, ref } from 'vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { toPomString } from '../utils/Pom';
+ import { isK8sExecMode } from '../utils';
export default defineComponent({
name: 'Dependency',
@@ -267,7 +268,7 @@
</a-button>
</TabPane>
<TabPane key="jar" tab="Upload Jar">
- <template v-if="[5, 6].includes(formModel?.executionMode)">
+ <template v-if="isK8sExecMode(formModel?.executionMode)">
<Select
mode="multiple"
placeholder="Search History Uploads"
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/components/HadoopConfDrawer.vue b/streampark-console/streampark-console-newui/src/views/flink/app/components/HadoopConfDrawer.vue
index 5a6005a9a..7cb2fded9 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/components/HadoopConfDrawer.vue
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/components/HadoopConfDrawer.vue
@@ -53,7 +53,6 @@
@register="registerHadoopConf"
:title="t('flink.app.hadoopConfigTitle')"
:width="800"
- :closable="false"
item-layout="vertical"
>
<Tabs tabPosition="top">
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/components/Mergely.vue b/streampark-console/streampark-console-newui/src/views/flink/app/components/Mergely.vue
index 90e71493c..3da355998 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/components/Mergely.vue
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/components/Mergely.vue
@@ -136,6 +136,7 @@
<template>
<BasicDrawer
@register="registerMergelyDrawer"
+ :keyboard="false"
:closable="false"
:mask-closable="false"
width="80%"
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/components/PodTemplate/HistoryDrawer.vue b/streampark-console/streampark-console-newui/src/views/flink/app/components/PodTemplate/HistoryDrawer.vue
index c2ebaa500..ee7a34d96 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/components/PodTemplate/HistoryDrawer.vue
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/components/PodTemplate/HistoryDrawer.vue
@@ -54,7 +54,6 @@
:title="drawerTitleMap[visualType]"
item-layout="vertical"
:width="700"
- :closable="false"
>
<Empty v-if="dataSource.length == 0" />
<Card
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/components/PodTemplate/HostAliasDrawer.vue b/streampark-console/streampark-console-newui/src/views/flink/app/components/PodTemplate/HostAliasDrawer.vue
index 4c0f76d3c..863918c83 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/components/PodTemplate/HostAliasDrawer.vue
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/components/PodTemplate/HostAliasDrawer.vue
@@ -95,7 +95,6 @@
<BasicDrawer
@register="registerDrawerInner"
item-layout="vertical"
- :closable="false"
:mask-closable="false"
:width="500"
:title="getTitle"
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/components/PodTemplate/PomTemplateTab.vue b/streampark-console/streampark-console-newui/src/views/flink/app/components/PodTemplate/PomTemplateTab.vue
index 866149e04..754414db2 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/components/PodTemplate/PomTemplateTab.vue
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/components/PodTemplate/PomTemplateTab.vue
@@ -270,33 +270,33 @@
<template>
<Tabs type="card" v-model:activeKey="podTemplateTab" class="pom-card">
<TabPane key="pod-template" tab="Pod Template" forceRender>
+ <div ref="podTemplateRef" class="pod-template-box syntax-true"></div>
<TemplateButtonGroup
visualType="ptVisual"
@click-history="showPodTemplateDrawer('ptVisual')"
@click-init="handleGetInitPodTemplate('ptVisual')"
@click-host-alias="showTemplateHostAliasDrawer('ptVisual')"
/>
- <div ref="podTemplateRef" class="pod-template-box syntax-true"></div>
</TabPane>
<TabPane key="jm-pod-template" tab="JM Pod Template" forceRender>
+ <div ref="jmpodTemplateRef" class="jm-pod-template-box syntax-true"></div>
<TemplateButtonGroup
visualType="ptVisual"
@click-history="showPodTemplateDrawer('jmPtVisual')"
@click-init="handleGetInitPodTemplate('jmPtVisual')"
@click-host-alias="showTemplateHostAliasDrawer('jmPtVisual')"
/>
- <div ref="jmpodTemplateRef" class="jm-pod-template-box syntax-true"></div>
</TabPane>
<TabPane key="tm-pod-template" tab="TM Pod Template" forceRender>
+ <div ref="tmpodTemplateRef" class="tm-pod-template-box syntax-true"></div>
<TemplateButtonGroup
visualType="ptVisual"
@click-history="showPodTemplateDrawer('tmPtVisual')"
@click-init="handleGetInitPodTemplate('tmPtVisual')"
@click-host-alias="showTemplateHostAliasDrawer('tmPtVisual')"
/>
- <div ref="tmpodTemplateRef" class="tm-pod-template-box syntax-true"></div>
</TabPane>
</Tabs>
<!-- history -->
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/components/PodTemplate/TemplateButtonGroup.vue b/streampark-console/streampark-console-newui/src/views/flink/app/components/PodTemplate/TemplateButtonGroup.vue
index 0b3f0143b..f69323821 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/components/PodTemplate/TemplateButtonGroup.vue
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/components/PodTemplate/TemplateButtonGroup.vue
@@ -38,37 +38,37 @@
<template>
<ButtonGroup class="pod-template-tool">
<a-button
- size="small"
type="primary"
class="pod-template-tool-item"
@click="emit('clickHistory', visualType)"
>
- <Icon icon="ant-design:history-outlined" />
- {{ t('common.history') }}
+ <div class="flex items-center">
+ <Icon icon="ant-design:history-outlined" class="pr-5px" />
+ {{ t('common.history') }}
+ </div>
</a-button>
- <a-button
- type="default"
- size="small"
- class="pod-template-tool-item"
- @click="emit('clickInit', visualType)"
- >
- <Icon icon="ant-design:copy-outlined" />
-
- {{ t('flink.app.pod.init') }}
+ <a-button type="default" class="pod-template-tool-item" @click="emit('clickInit', visualType)">
+ <div class="flex items-center">
+ <Icon icon="ant-design:copy-outlined" class="pr-5px" />
+ {{ t('flink.app.pod.init') }}
+ </div>
</a-button>
<a-button
type="default"
- size="small"
class="pod-template-tool-item"
@click="emit('clickHostAlias', visualType)"
>
- <Icon icon="ant-design:share-alt-outlined" />
+ <div class="flex items-center">
+ <Icon icon="ant-design:share-alt-outlined" class="pr-5px" />
- {{ t('flink.app.pod.host') }}
+ {{ t('flink.app.pod.host') }}
+ </div>
</a-button>
- <a-button type="default" size="small" disabled class="pod-template-tool-item">
- <Icon icon="ant-design:hdd-outlined" />
- PVC
+ <a-button type="default" disabled class="pod-template-tool-item">
+ <div class="flex items-center">
+ <Icon icon="ant-design:hdd-outlined" class="pr-5px" />
+ PVC
+ </div>
</a-button>
</ButtonGroup>
</template>
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/components/ProgramArgs.vue b/streampark-console/streampark-console-newui/src/views/flink/app/components/ProgramArgs.vue
index 99dff4994..d9c8f4988 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/components/ProgramArgs.vue
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/components/ProgramArgs.vue
@@ -29,12 +29,12 @@
</div>
</template>
<script lang="ts">
- export default defineComponent({
+ export default {
name: 'ProgramArg',
- });
+ };
</script>
<script lang="ts" setup>
- import { defineComponent, computed, ref, toRefs } from 'vue';
+ import { computed, ref, toRefs, watchEffect } from 'vue';
import { getMonacoOptions } from '../data';
import Icon from '/@/components/Icon';
import { useMonaco } from '/@/hooks/web/useMonaco';
@@ -51,15 +51,19 @@
const { value, suggestions } = toRefs(props);
const emit = defineEmits(['update:value', 'preview']);
const programArgRef = ref();
- const { onChange, setContent } = useMonaco(programArgRef, {
+ const { onChange, setContent, setMonacoSuggest } = useMonaco(programArgRef, {
language: 'plaintext',
code: '',
- suggestions: suggestions.value,
options: {
...(getMonacoOptions(false) as any),
autoClosingBrackets: 'never',
},
});
+ watchEffect(() => {
+ if (suggestions.value.length > 0) {
+ setMonacoSuggest(suggestions.value);
+ }
+ });
const canReview = computed(() => {
return /\${.+}/.test(value.value);
});
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/components/UseSysHadoopConf.vue b/streampark-console/streampark-console-newui/src/views/flink/app/components/UseSysHadoopConf.vue
index 920dd19fd..8c77734ab 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/components/UseSysHadoopConf.vue
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/components/UseSysHadoopConf.vue
@@ -40,27 +40,31 @@
</script>
<template>
- <Switch
- checked-children="ON"
- un-checked-children="OFF"
- :checked="hadoopConf"
- @change="(checked) => emit('update:hadoopConf', checked)"
- />
- <Space>
- <Popover title="Tips">
- <template #content>
- <p>Automatically copy configuration files from system environment parameters</p>
- <p><b>HADOOP_CONF_PATH</b> and <b>HIVE_CONF_PATH</b> to Flink Docker image</p>
- </template>
- <Icon icon="ant-design:question-circle-outlined" class="ml-10px" />
- </Popover>
- <transition name="slide-fade">
- <a-button size="small" v-if="hadoopConf" @click="openHadoopConfDrawer(true, {})">
- <Icon icon="ant-design:eye-outlined" class="ml-10px" />
+ <div class="flex items-center">
+ <Switch
+ checked-children="ON"
+ un-checked-children="OFF"
+ :checked="hadoopConf"
+ @change="(checked) => emit('update:hadoopConf', checked)"
+ />
+ <Space>
+ <Popover title="Tips">
+ <template #content>
+ <p>Automatically copy configuration files from system environment parameters</p>
+ <p><b>HADOOP_CONF_PATH</b> and <b>HIVE_CONF_PATH</b> to Flink Docker image</p>
+ </template>
+ <Icon icon="ant-design:question-circle-outlined" class="ml-10px" />
+ </Popover>
+ <transition name="slide-fade">
+ <a-button size="small" v-if="hadoopConf" @click="openHadoopConfDrawer(true, {})">
+ <div class="flex items-center">
+ <Icon icon="ant-design:eye-outlined" class="pr-5px" />
- {{ t('common.view') }}
- </a-button>
- </transition>
- </Space>
+ {{ t('common.view') }}
+ </div>
+ </a-button>
+ </transition>
+ </Space>
+ </div>
<HadoopConfDrawer @register="registerHadoopConf" />
</template>
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/components/flinkSql.vue b/streampark-console/streampark-console-newui/src/views/flink/app/components/flinkSql.vue
index 27d4afcba..e0162eedc 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/components/flinkSql.vue
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/components/flinkSql.vue
@@ -21,7 +21,7 @@
</script>
<script setup lang="ts" name="FlinkSql">
- import { computed, reactive, ref, unref } from 'vue';
+ import { computed, reactive, ref, unref, watchEffect } from 'vue';
import { getMonacoOptions } from '../data';
import { Icon } from '/@/components/Icon';
import { useMonaco } from '/@/hooks/web/useMonaco';
@@ -145,15 +145,23 @@
unref(flinkSql).style.height = isFullscreen.value ? '100vh' : '550px';
}, 100);
}
- const { onChange, setContent, getInstance, getMonacoInstance } = useMonaco(flinkSql, {
- language: 'sql',
- code: props.value || defaultValue,
- suggestions: props.suggestions,
- options: {
- minimap: { enabled: true },
- ...(getMonacoOptions(false) as any),
- autoClosingBrackets: 'never',
+ const { onChange, setContent, getInstance, getMonacoInstance, setMonacoSuggest } = useMonaco(
+ flinkSql,
+ {
+ language: 'sql',
+ code: props.value || defaultValue,
+ options: {
+ minimap: { enabled: true },
+ ...(getMonacoOptions(false) as any),
+ autoClosingBrackets: 'never',
+ },
},
+ );
+
+ watchEffect(() => {
+ if (props.suggestions.length > 0) {
+ setMonacoSuggest(props.suggestions);
+ }
});
const canPreview = computed(() => {
return /\${.+}/.test(props.value);
@@ -169,31 +177,20 @@
<template>
<div>
<div ref="flinkScreen">
- <div
- class="sql-box"
- ref="flinkSql"
- :class="'syntax-' + (vertifyRes.errorMsg ? 'false' : 'true')"
- ></div>
-
<ButtonGroup class="flinksql-tool">
- <a-button
- class="flinksql-tool-item"
- v-if="canPreview"
- size="small"
- @click="emit('preview', value)"
- >
+ <a-button class="flinksql-tool-item" v-if="canPreview" @click="emit('preview', value)">
<Icon icon="ant-design:eye-outlined" />
preview
</a-button>
- <a-button class="flinksql-tool-item" type="primary" size="small" @click="handleVerifySql">
+ <a-button class="flinksql-tool-item" type="primary" @click="handleVerifySql">
<Icon icon="ant-design:check-outlined" />
{{ t('flink.app.flinkSql.verify') }}
</a-button>
- <a-button class="flinksql-tool-item" size="small" type="default" @click="handleFormatSql">
+ <a-button class="flinksql-tool-item" type="default" @click="handleFormatSql">
<Icon icon="ant-design:thunderbolt-outlined" />
{{ t('flink.app.flinkSql.format') }}
</a-button>
- <a-button class="flinksql-tool-item" type="default" size="small" @click="handleBigScreen">
+ <a-button class="flinksql-tool-item" type="default" @click="handleBigScreen">
<Icon
:icon="
isFullscreen
@@ -205,10 +202,14 @@
{{ t('flink.app.flinkSql.fullScreen') }}
</a-button>
</ButtonGroup>
-
+ <div
+ class="sql-box"
+ ref="flinkSql"
+ :class="'syntax-' + (vertifyRes.errorMsg ? 'false' : 'true')"
+ ></div>
<p class="conf-desc mt-10px">
<span class="text-red-600" v-if="vertifyRes.errorMsg"> {{ vertifyRes.errorMsg }} </span>
- <span v-else class="sql-desc text-green-600">
+ <span v-else class="text-green-700">
<span v-if="vertifyRes.verified"> {{ t('flink.app.flinkSql.successful') }} </span>
</span>
</p>
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/data/index.ts b/streampark-console/streampark-console-newui/src/views/flink/app/data/index.ts
index 9f48a077d..b01c19694 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/data/index.ts
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/data/index.ts
@@ -16,7 +16,7 @@
*/
import { dateToDuration } from '/@/utils/dateUtil';
import { BasicColumn } from '/@/components/Table';
-import { ExecutionModeEnum } from '/@/enums/flinkEnum';
+import { ExecModeEnum } from '/@/enums/flinkEnum';
/* app */
export const getAppColumns = (): BasicColumn[] => [
@@ -103,18 +103,18 @@ export const k8sRestExposedType = [
];
export const executionModes = [
- { label: 'remote (standalone)', value: ExecutionModeEnum.REMOTE, disabled: false },
- { label: 'yarn application', value: ExecutionModeEnum.YARN_APPLICATION, disabled: false },
- { label: 'yarn session', value: ExecutionModeEnum.YARN_SESSION, disabled: false },
- { label: 'kubernetes session', value: ExecutionModeEnum.KUBERNETES_SESSION, disabled: false },
+ { label: 'remote (standalone)', value: ExecModeEnum.REMOTE, disabled: false },
+ { label: 'yarn application', value: ExecModeEnum.YARN_APPLICATION, disabled: false },
+ { label: 'yarn session', value: ExecModeEnum.YARN_SESSION, disabled: false },
+ { label: 'kubernetes session', value: ExecModeEnum.KUBERNETES_SESSION, disabled: false },
{
label: 'kubernetes application',
- value: ExecutionModeEnum.KUBERNETES_APPLICATION,
+ value: ExecModeEnum.KUBERNETES_APPLICATION,
disabled: false,
},
{
label: 'yarn per-job (deprecated, please use yarn-application mode)',
- value: ExecutionModeEnum.YARN_PER_JOB,
+ value: ExecModeEnum.YARN_PER_JOB,
disabled: false,
},
];
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useAppTableAction.ts b/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useAppTableAction.ts
index 7616ad140..bc5eab9eb 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useAppTableAction.ts
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useAppTableAction.ts
@@ -24,6 +24,7 @@ import { AppListRecord } from '/@/api/flink/app/app.type';
import { fetchFlamegraph } from '/@/api/flink/app/metrics';
import { ActionItem, FormProps } from '/@/components/Table';
import { useMessage } from '/@/hooks/web/useMessage';
+import { ExecModeEnum } from '/@/enums/flinkEnum';
export enum JobTypeEnum {
JAR = 1,
SQL = 2,
@@ -98,7 +99,9 @@ export const useAppTableAction = (
},
{
tooltip: { title: 'See Flink Start log' },
- ifShow: [5, 6].includes(record.executionMode),
+ ifShow: [ExecModeEnum.KUBERNETES_SESSION, ExecModeEnum.KUBERNETES_APPLICATION].includes(
+ record.executionMode,
+ ),
auth: 'app:detail',
icon: 'ant-design:sync-outlined',
onClick: () => openLogModal(true, { app: record }),
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useCreateAndEditSchema.ts b/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useCreateAndEditSchema.ts
index c3f64d31a..00dc07c25 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useCreateAndEditSchema.ts
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useCreateAndEditSchema.ts
@@ -48,12 +48,13 @@ import { fetchFlinkEnv } from '/@/api/flink/setting/flinkEnv';
import { FlinkEnv } from '/@/api/flink/setting/types/flinkEnv.type';
import { AlertSetting } from '/@/api/flink/setting/types/alert.type';
import { FlinkCluster } from '/@/api/flink/setting/types/flinkCluster.type';
+import { ExecModeEnum } from '/@/enums/flinkEnum';
+import { isK8sExecMode } from '../utils';
export interface HistoryRecord {
k8sNamespace: Array<string>;
k8sSessionClusterId: Array<string>;
flinkImage: Array<string>;
}
-
export const useCreateAndEditSchema = (
dependencyRef: Ref | null,
edit?: { appId: string; mode: 'streampark' | 'flink' },
@@ -134,9 +135,9 @@ export const useCreateAndEditSchema = (
component: 'Switch',
ifShow: ({ values }) => {
if (edit?.appId) {
- return values?.jobType == 2 && ![5, 6].includes(values.executionMode);
+ return values?.jobType == 2 && !isK8sExecMode(values.executionMode);
} else {
- return values?.jobType == 'sql' && ![5, 6].includes(values.executionMode);
+ return values?.jobType == 'sql' && !isK8sExecMode(values.executionMode);
}
},
render({ model, field }) {
@@ -212,7 +213,7 @@ export const useCreateAndEditSchema = (
placeholder: 'Flink Cluster',
options: getExecutionCluster(1, 'id'),
},
- ifShow: ({ values }) => values.executionMode == 1,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.REMOTE,
rules: [{ required: true, message: 'Flink Cluster is required' }],
},
{
@@ -225,14 +226,14 @@ export const useCreateAndEditSchema = (
options: getExecutionCluster(3, 'clusterId'),
};
},
- ifShow: ({ values }) => values.executionMode == 3,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.YARN_SESSION,
rules: [{ required: true, message: 'Flink Cluster is required' }],
},
{
field: 'k8sNamespace',
label: 'Kubernetes Namespace',
component: 'Input',
- ifShow: ({ values }) => [5, 6].includes(values.executionMode),
+ ifShow: ({ values }) => isK8sExecMode(values.executionMode),
render: ({ model, field }) =>
renderInputDropdown(model, field, {
placeholder: 'default',
@@ -249,14 +250,14 @@ export const useCreateAndEditSchema = (
onChange: (e) => (formModel.jobName = e.target.value),
};
},
- ifShow: ({ values }) => values.executionMode == 6,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.KUBERNETES_APPLICATION,
rules: [{ required: true, message: 'Kubernetes clusterId is required' }],
},
{
field: 'clusterId',
label: 'Kubernetes ClusterId',
component: 'Select',
- ifShow: ({ values }) => values.executionMode == 5,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.KUBERNETES_SESSION,
componentProps: {
placeholder: 'Please enter Kubernetes clusterId',
options: getExecutionCluster(5, 'clusterId'),
@@ -267,7 +268,7 @@ export const useCreateAndEditSchema = (
field: 'flinkImage',
label: 'Flink Base Docker Image',
component: 'Input',
- ifShow: ({ values }) => values.executionMode == 6,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.KUBERNETES_APPLICATION,
render: ({ model, field }) =>
renderInputDropdown(model, field, {
placeholder:
@@ -279,7 +280,7 @@ export const useCreateAndEditSchema = (
{
field: 'k8sRestExposedType',
label: 'Rest-Service Exposed Type',
- ifShow: ({ values }) => values.executionMode == 6,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.KUBERNETES_APPLICATION,
component: 'Select',
componentProps: {
placeholder: 'kubernetes.rest-service.exposed.type',
@@ -370,7 +371,7 @@ export const useCreateAndEditSchema = (
field: 'restartSize',
label: 'Fault Restart Size',
ifShow: ({ values }) =>
- edit?.mode == 'flink' ? true : ![5, 6].includes(values.executionMode),
+ edit?.mode == 'flink' ? true : !isK8sExecMode(values.executionMode),
component: 'InputNumber',
componentProps: { placeholder: 'restart max size', ...commonInputNum },
},
@@ -389,8 +390,7 @@ export const useCreateAndEditSchema = (
label: 'CheckPoint Failure Options',
component: 'InputNumber',
renderColContent: renderInputGroup,
- show: ({ values }) =>
- edit?.mode == 'flink' ? true : ![5, 6].includes(values.executionMode),
+ show: ({ values }) => (edit?.mode == 'flink' ? true : !isK8sExecMode(values.executionMode)),
},
...getConfigSchemas(),
{
@@ -453,14 +453,14 @@ export const useCreateAndEditSchema = (
label: 'Yarn Queue',
component: 'Input',
componentProps: { placeholder: 'Please enter yarn queue' },
- ifShow: ({ values }) => values.executionMode == 4,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.YARN_APPLICATION,
},
{
field: 'podTemplate',
label: 'Kubernetes Pod Template',
component: 'Input',
slot: 'podTemplate',
- ifShow: ({ values }) => values.executionMode == 6,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.KUBERNETES_APPLICATION,
},
{
field: 'properties',
@@ -520,7 +520,7 @@ export const useCreateAndEditSchema = (
];
});
- onMounted(() => {
+ onMounted(async () => {
/* Get project data */
fetchSelect({}).then((res) => {
projectList.value = res;
@@ -542,7 +542,7 @@ export const useCreateAndEditSchema = (
fetchK8sNamespaces().then((res) => {
historyRecord.k8sNamespace = res;
});
- fetchSessionClusterIds({ executionMode: 5 }).then((res) => {
+ fetchSessionClusterIds({ executionMode: ExecModeEnum.KUBERNETES_SESSION }).then((res) => {
historyRecord.k8sSessionClusterId = res;
});
fetchFlinkBaseImages().then((res) => {
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useCreateSchema.ts b/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useCreateSchema.ts
index 37a390096..eb2b44dfa 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useCreateSchema.ts
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useCreateSchema.ts
@@ -18,6 +18,7 @@ import { FormSchema } from '/@/components/Table';
import { computed, h, Ref, ref, unref } from 'vue';
import { executionModes } from '../data';
import { fetchCheckHadoop } from '/@/api/flink/setting';
+import { ExecModeEnum } from '/@/enums/flinkEnum';
import Icon, { SvgIcon } from '/@/components/Icon';
import { useCreateAndEditSchema } from './useCreateAndEditSchema';
@@ -298,7 +299,7 @@ export const useCreateSchema = (dependencyRef: Ref) => {
component: 'Switch',
slot: 'useSysHadoopConf',
defaultValue: false,
- ifShow: ({ values }) => values.executionMode == 6,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.KUBERNETES_APPLICATION,
},
...getFlinkFormOtherSchemas.value,
];
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useEditFlinkSchema.ts b/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useEditFlinkSchema.ts
index 62e95d59f..c679beb72 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useEditFlinkSchema.ts
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useEditFlinkSchema.ts
@@ -15,19 +15,17 @@
* limitations under the License.
*/
import { FormSchema } from '/@/components/Table';
-import { computed, h, reactive, Ref, ref, unref } from 'vue';
+import { computed, h, Ref, ref, unref } from 'vue';
import { executionModes } from '../data';
import { useCreateAndEditSchema } from './useCreateAndEditSchema';
import { getAlertSvgIcon } from './useFlinkRender';
import { Alert } from 'ant-design-vue';
-import { AppListRecord } from '/@/api/flink/app/app.type';
import { useRoute } from 'vue-router';
import { fetchMain } from '/@/api/flink/app/app';
export const useEditFlinkSchema = (jars: Ref) => {
const flinkSql = ref();
- const app = reactive<Partial<AppListRecord>>({});
const route = useRoute();
const {
alerts,
@@ -74,7 +72,7 @@ export const useEditFlinkSchema = (jars: Ref) => {
field: 'module',
label: 'Module',
component: 'Input',
- render: () => h(Alert, { message: app.module, type: 'info' }),
+ render: ({ model }) => h(Alert, { message: model.module, type: 'info' }),
ifShow: ({ model }) => model.resourceFrom == 1,
},
{
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useEditStreamPark.ts b/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useEditStreamPark.ts
index 0c363aebb..5559cd116 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useEditStreamPark.ts
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useEditStreamPark.ts
@@ -17,6 +17,7 @@
import { FormSchema } from '/@/components/Table';
import { computed, h, Ref, ref, unref } from 'vue';
import { executionModes } from '../data';
+import { ExecModeEnum } from '/@/enums/flinkEnum';
import { useCreateAndEditSchema } from './useCreateAndEditSchema';
import { renderSqlHistory } from './useFlinkRender';
@@ -53,6 +54,7 @@ export const useEditStreamParkSchema = (
async function handleChangeSQL(v: string) {
const res = await fetchFlinkSql({ id: v });
flinkSql.value?.setContent(decodeByBase64(res.sql));
+ console.log('res', flinkSql.value);
unref(dependencyRef)?.setDefaultValue(JSON.parse(res.dependency || '{}'));
}
// start compare flinksql version
@@ -171,7 +173,7 @@ export const useEditStreamParkSchema = (
component: 'Switch',
slot: 'useSysHadoopConf',
defaultValue: false,
- ifShow: ({ values }) => values.executionMode == 6,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.KUBERNETES_APPLICATION,
},
...getFlinkFormOtherSchemas.value,
];
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useFlinkRender.tsx b/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useFlinkRender.tsx
index 2d214ff45..1001f0e42 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useFlinkRender.tsx
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useFlinkRender.tsx
@@ -19,7 +19,7 @@ import { Icon, SvgIcon } from '/@/components/Icon';
import options from '../data/option';
import Mergely from '../components/Mergely.vue';
-import CustomForm from '../components/customForm';
+import CustomForm from '../components/CustomForm';
import {
Alert,
Dropdown,
@@ -324,13 +324,19 @@ export const renderIsSetConfig = (
});
}
}
+ function handleConfChange(checked: boolean) {
+ model[field] = checked;
+ if (checked) {
+ handleSQLConf(true);
+ }
+ }
return (
<div>
<Switch
checked-children="ON"
un-checked-children="OFF"
checked={model[field]}
- onChange={(checked) => (model[field] = checked)}
+ onChange={handleConfChange}
/>
{model[field] && (
<SettingTwoTone
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useFlinkSchema.ts b/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useFlinkSchema.ts
index 0f805aae8..4eccb6a9e 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useFlinkSchema.ts
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useFlinkSchema.ts
@@ -19,6 +19,8 @@ import { h, onMounted, reactive, ref, unref, toRaw } from 'vue';
import optionData from '../data/option';
import { fetchFlinkCluster } from '/@/api/flink/setting/flinkCluster';
import { FlinkCluster } from '/@/api/flink/setting/types/flinkCluster.type';
+import { ExecModeEnum } from '/@/enums/flinkEnum';
+
import {
fetchFlinkBaseImages,
fetchK8sNamespaces,
@@ -42,16 +44,17 @@ import Icon from '/@/components/Icon';
import { Alert } from 'ant-design-vue';
import { useDrawer } from '/@/components/Drawer';
import { fetchSelect } from '/@/api/flink/project';
+import { isK8sExecMode } from '../utils';
export const useFlinkSchema = (editModel?: string) => {
const [registerConfDrawer, { openDrawer: openConfDrawer }] = useDrawer();
const getExecutionCluster = (executionMode) => {
if (editModel) {
return (toRaw(unref(flinkClusters)) || []).filter(
- (o) => o.executionMode === executionMode && o.clusterState === 1,
+ (o) => o.executionMode == executionMode && o.clusterState === 1,
);
} else {
- return (toRaw(unref(flinkClusters)) || []).filter((o) => o.executionMode === executionMode);
+ return (toRaw(unref(flinkClusters)) || []).filter((o) => o.executionMode == executionMode);
}
};
@@ -74,7 +77,7 @@ export const useFlinkSchema = (editModel?: string) => {
value: i.id,
})),
},
- ifShow: ({ values }) => values.executionMode == 1,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.REMOTE,
rules: [{ required: true, message: 'Flink Cluster is required' }],
},
{
@@ -88,14 +91,14 @@ export const useFlinkSchema = (editModel?: string) => {
options: options.map((i) => ({ label: i.clusterName, value: i.clusterId })),
};
},
- ifShow: ({ values }) => values.executionMode == 3,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.YARN_SESSION,
rules: [{ required: true, message: 'Flink Cluster is required' }],
},
{
field: 'k8sNamespace',
label: 'Kubernetes Namespace',
component: 'Input',
- ifShow: ({ values }) => [5, 6].includes(values.executionMode),
+ ifShow: ({ values }) => isK8sExecMode(values.executionMode),
render: ({ model, field }) =>
renderInputDropdown(model, field, {
placeholder: 'default',
@@ -112,14 +115,14 @@ export const useFlinkSchema = (editModel?: string) => {
onChange: (e) => (formModel.jobName = e.target.value),
};
},
- ifShow: ({ values }) => values.executionMode == 6,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.KUBERNETES_APPLICATION,
rules: [{ required: true, message: 'Kubernetes clusterId is required' }],
},
{
field: 'clusterId',
label: 'Kubernetes ClusterId',
component: 'Select',
- ifShow: ({ values }) => values.executionMode == 5,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.KUBERNETES_SESSION,
componentProps: {
placeholder: 'Please enter Kubernetes clusterId',
options: (getExecutionCluster(5) || []).map((i) => ({
@@ -133,7 +136,7 @@ export const useFlinkSchema = (editModel?: string) => {
field: 'flinkImage',
label: 'Flink Base Docker Image',
component: 'Input',
- ifShow: ({ values }) => values.executionMode == 6,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.KUBERNETES_APPLICATION,
render: ({ model, field }) =>
renderInputDropdown(model, field, {
placeholder:
@@ -145,7 +148,7 @@ export const useFlinkSchema = (editModel?: string) => {
{
field: 'k8sRestExposedType',
label: 'Rest-Service Exposed Type',
- ifShow: ({ values }) => values.executionMode == 6,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.KUBERNETES_APPLICATION,
component: 'Select',
componentProps: {
placeholder: 'kubernetes.rest-service.exposed.type',
@@ -244,8 +247,7 @@ export const useFlinkSchema = (editModel?: string) => {
{
field: 'restartSize',
label: 'Fault Restart Size',
- ifShow: ({ values }) =>
- editModel == 'flink' ? true : ![5, 6].includes(values.executionMode),
+ ifShow: ({ values }) => (editModel == 'flink' ? true : !isK8sExecMode(values.executionMode)),
component: 'InputNumber',
componentProps: {
placeholder: 'restart max size',
@@ -269,7 +271,7 @@ export const useFlinkSchema = (editModel?: string) => {
label: 'CheckPoint Failure Options',
component: 'InputNumber',
renderColContent: renderInputGroup,
- show: ({ values }) => (editModel == 'flink' ? true : ![5, 6].includes(values.executionMode)),
+ show: ({ values }) => (editModel == 'flink' ? true : !isK8sExecMode(values.executionMode)),
},
...getConfigSchemas(),
{
@@ -334,14 +336,14 @@ export const useFlinkSchema = (editModel?: string) => {
componentProps: {
placeholder: 'Please enter yarn queue',
},
- ifShow: ({ values }) => values.executionMode == 4,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.YARN_APPLICATION,
},
{
field: 'podTemplate',
label: 'Kubernetes Pod Template',
component: 'Input',
slot: 'podTemplate',
- ifShow: ({ values }) => values.executionMode == 6,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.KUBERNETES_APPLICATION,
},
{
field: 'properties',
@@ -440,9 +442,9 @@ export const useFlinkSchema = (editModel?: string) => {
component: 'Switch',
ifShow: ({ values }) => {
if (appId) {
- return values?.jobType == 2 && ![5, 6].includes(values.executionMode);
+ return values?.jobType == 2 && !isK8sExecMode(values.executionMode);
} else {
- return values?.jobType == 'sql' && ![5, 6].includes(values.executionMode);
+ return values?.jobType == 'sql' && !isK8sExecMode(values.executionMode);
}
},
render: ({ model, field }) =>
@@ -472,14 +474,29 @@ export const useFlinkSchema = (editModel?: string) => {
onMounted(async () => {
/* Get project data */
- projectList.value = await fetchSelect({});
- /* Get alarm data */
- alerts.value = await fetchAlertSetting();
- const cluster = await fetchFlinkCluster();
- flinkClusters.value = cluster;
- historyRecord.k8sNamespace = await fetchK8sNamespaces();
- historyRecord.k8sSessionClusterId = await fetchSessionClusterIds({ executionMode: 5 });
- historyRecord.flinkImage = await fetchFlinkBaseImages();
+ fetchSelect({}).then((res) => {
+ projectList.value = res;
+ });
+
+ /* Get alert data */
+ fetchAlertSetting().then((res) => {
+ alerts.value = res;
+ });
+
+ //get flinkCluster
+ fetchFlinkCluster().then((res) => {
+ flinkClusters.value = res;
+ });
+
+ fetchK8sNamespaces().then((res) => {
+ historyRecord.k8sNamespace = res;
+ });
+ fetchSessionClusterIds({ executionMode: ExecModeEnum.KUBERNETES_SESSION }).then((res) => {
+ historyRecord.k8sSessionClusterId = res;
+ });
+ fetchFlinkBaseImages().then((res) => {
+ historyRecord.flinkImage = res;
+ });
});
return {
getFlinkClusterSchemas,
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useLog.ts b/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useLog.ts
index 7e2e8c09d..f8b2c8d32 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useLog.ts
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/hooks/useLog.ts
@@ -14,11 +14,14 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { ref, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
import { useMonaco, isDark } from '/@/hooks/web/useMonaco';
+import { useThrottleFn } from '@vueuse/core';
export const useLog = () => {
- const logRef = ref();
+ const logRef = ref<HTMLElement>();
+ const autoScroll = ref(true);
+ let editor: any;
const { setContent, getInstance, getMonacoInstance } = useMonaco(
logRef,
{
@@ -30,6 +33,7 @@ export const useLog = () => {
overviewRulerBorder: false, // Don't scroll bar borders
tabSize: 2, // tab indent length
minimap: { enabled: true },
+ smoothScrolling: true,
scrollbar: {
useShadows: false,
vertical: 'visible',
@@ -54,16 +58,43 @@ export const useLog = () => {
},
{ immediate: true },
);
+ watch(
+ () => logRef.value,
+ async () => {
+ if (!logRef.value) return;
+ const editorHeight = logRef.value.clientHeight;
+ editor = await getInstance();
+ editor?.onDidScrollChange(
+ useThrottleFn((e: any) => {
+ if (e.scrollTop > 0) {
+ if (editorHeight + e.scrollTop + 15 >= e.scrollHeight) {
+ autoScroll.value = true;
+ } else {
+ autoScroll.value = false;
+ console.log('close');
+ }
+ }
+ }, 500),
+ );
+ },
+ );
+ function setAutoScroll(scroll: boolean) {
+ autoScroll.value = scroll;
+ }
+ const getAutoScroll = computed(() => {
+ return autoScroll.value;
+ });
/* registered language */
async function handleLogMonaco(monaco: any) {
monaco.languages.register({ id: 'log' });
monaco.languages.setMonarchTokensProvider('log', {
tokenizer: {
root: [
- [/\[20\d+-\d+-\d+\s+\d+:\d+:\d+\d+|.\d+]/, 'custom-date-time'],
+ [/\[?20\d+-\d+-\d+\s+\d+:\d+:\d+\d+|.\d+/, 'custom-date-time'],
[/\[error.*/, 'custom-error'],
[/\[notice.*/, 'custom-notice'],
[/\[info.*/, 'custom-info'],
+ [/INFO/, 'custom-info-keyword'],
[/\[[a-zA-Z 0-9:]+\]/, 'custom-date'],
],
},
@@ -75,6 +106,7 @@ export const useLog = () => {
colors: {},
rules: [
{ token: 'custom-info', foreground: '808080' },
+ { token: 'custom-info-keyword', foreground: '008800' },
{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
{ token: 'custom-notice', foreground: 'FFA500' },
{ token: 'custom-date', foreground: '008800' },
@@ -94,11 +126,12 @@ export const useLog = () => {
],
});
}
- async function handleRevealLine() {
- const editor = await getInstance();
+
+ function handleRevealLine() {
+ if (!autoScroll.value) return;
if (editor) {
editor.revealLine(editor.getModel()?.getLineCount() || 0);
}
}
- return { setContent, logRef, handleRevealLine };
+ return { setAutoScroll, getInstance, getAutoScroll, setContent, logRef, handleRevealLine };
};
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/styles/Add.less b/streampark-console/streampark-console-newui/src/views/flink/app/styles/Add.less
index 7781a1997..f8a37c854 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/styles/Add.less
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/styles/Add.less
@@ -107,12 +107,7 @@
.flinksql-tool {
z-index: 99;
- bottom: 50px;
- float: right;
- right: 22px;
cursor: pointer;
- height: 26px;
- padding: 0 10px;
}
.flinksql-tool-item {
@@ -123,17 +118,11 @@
.pod-template-tool {
z-index: 99;
- position: absolute;
- bottom: 20px;
- float: right;
- right: 22px;
cursor: pointer;
- height: 26px;
- padding: 0 10px;
}
.pod-template-tool-item {
- font-size: 12px;
+ font-size: 13px;
}
.pod-template-tool-drawer-submit-cancel {
@@ -182,7 +171,7 @@
.verify-sql {
z-index: 99;
position: absolute;
- bottom: 40px;
+ bottom: 20px;
float: right;
right: 20px;
cursor: pointer;
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/utils/index.ts b/streampark-console/streampark-console-newui/src/views/flink/app/utils/index.ts
index cc2bd0e13..25e473882 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/utils/index.ts
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/utils/index.ts
@@ -18,6 +18,7 @@ import { optionsKeyMapping } from '../data/option';
import { fetchYarn } from '/@/api/flink/app/app';
import { AppListRecord } from '/@/api/flink/app/app.type';
import { fetchActiveURL } from '/@/api/flink/setting/flinkCluster';
+import { ExecModeEnum } from '/@/enums/flinkEnum';
export function handleAppBuildStatusColor(statusCode) {
switch (statusCode) {
@@ -102,10 +103,14 @@ export function descriptionFilter(option) {
export async function handleView(app: AppListRecord, yarn: Nullable<string>) {
const executionMode = app['executionMode'];
- if (executionMode === 1) {
+ if (executionMode == ExecModeEnum.REMOTE) {
const res = await fetchActiveURL(app.flinkClusterId);
window.open(res + '/#/job/' + app.jobId + '/overview');
- } else if ([2, 3, 4].includes(executionMode)) {
+ } else if (
+ [ExecModeEnum.YARN_PER_JOB, ExecModeEnum.YARN_SESSION, ExecModeEnum.YARN_APPLICATION].includes(
+ executionMode,
+ )
+ ) {
if (yarn == null) {
const res = await fetchYarn();
window.open(res + '/proxy/' + app['appId'] + '/');
@@ -155,7 +160,7 @@ export function handleIsStart(app, optionApps) {
}
export function handleYarnQueue(values) {
- if (values.executionMode === 4) {
+ if (values.executionMode == ExecModeEnum.YARN_APPLICATION) {
const queue = values['yarnQueue'];
if (queue != null && queue !== '' && queue !== undefined) {
return queue;
@@ -268,7 +273,7 @@ export function handleSubmitParams(
flinkImage: values.flinkImage || null,
yarnSessionClusterId: values.yarnSessionClusterId || null,
});
- if (params.executionMode === 6) {
+ if (params.executionMode == ExecModeEnum.KUBERNETES_APPLICATION) {
Object.assign(params, {
k8sPodTemplate: k8sTemplate.podTemplate,
k8sJmPodTemplate: k8sTemplate.jmPodTemplate,
@@ -281,3 +286,12 @@ export function handleSubmitParams(
export const filterOption = (input: string, options: Recordable) => {
return options.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
+
+// k8s mode
+export function isK8sExecMode(mode: number): boolean {
+ return [ExecModeEnum.KUBERNETES_SESSION, ExecModeEnum.KUBERNETES_APPLICATION].includes(mode);
+}
+// session mode
+export function isSessionMode(mode: number): boolean {
+ return [ExecModeEnum.YARN_SESSION, ExecModeEnum.KUBERNETES_SESSION].includes(mode);
+}
diff --git a/streampark-console/streampark-console-newui/src/views/flink/project/components/ListItem.vue b/streampark-console/streampark-console-newui/src/views/flink/project/components/ListItem.vue
index 3032a871e..1066c20e7 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/project/components/ListItem.vue
+++ b/streampark-console/streampark-console-newui/src/views/flink/project/components/ListItem.vue
@@ -64,7 +64,7 @@
</ul>
<div class="operation">
<a-tooltip title="See Build log">
- <a-button shape="circle" @click="handleSeeLog">
+ <a-button shape="circle" @click="handleSeeLog" class="!leading-26px">
<Icon icon="ant-design:eye-outlined" />
</a-button>
</a-tooltip>
diff --git a/streampark-console/streampark-console-newui/src/views/flink/project/components/LogModal.vue b/streampark-console/streampark-console-newui/src/views/flink/project/components/LogModal.vue
index 70c5f9444..037aca9f9 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/project/components/LogModal.vue
+++ b/streampark-console/streampark-console-newui/src/views/flink/project/components/LogModal.vue
@@ -15,15 +15,14 @@
limitations under the License.
-->
<script lang="ts">
- import { defineComponent } from 'vue';
- import { useI18n } from '/@/hooks/web/useI18n';
- import { useLog } from '../../app/hooks/useLog';
- import { buildLog } from '/@/api/flink/project';
- export default defineComponent({
+ export default {
name: 'BuildLogModal',
- });
+ };
</script>
<script setup lang="ts" name="BuildLogModal">
+ import { useI18n } from '/@/hooks/web/useI18n';
+ import { useLog } from '../../app/hooks/useLog';
+ import { buildLog } from '/@/api/flink/project';
import { reactive, ref, unref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { Icon } from '/@/components/Icon';
@@ -37,18 +36,20 @@
const getLogLoading = ref<boolean>(false);
const showRefresh = ref<boolean>(false);
const project = reactive<Recordable>({});
+
const [registerModal, { changeLoading, closeModal }] = useModalInner((data) => {
data && onReceiveModalData(data);
});
const { setContent, logRef, handleRevealLine } = useLog();
- function onReceiveModalData(data: Recordable) {
+
+ async function onReceiveModalData(data: Recordable) {
showRefresh.value = true;
Object.assign(project, unref(data.project));
changeLoading(true);
- refreshLog();
+ await refreshLog();
start();
}
- const { start, stop } = useTimeoutFn(
+ const { isPending, start, stop } = useTimeoutFn(
() => {
refreshLog();
},
@@ -85,10 +86,15 @@
async function handleClose() {
stop();
}
+ function handleLogStatus() {
+ if (isPending.value) stop();
+ else start();
+ }
</script>
<template>
<BasicModal
canFullscreen
+ defaultFullscreen
:scrollTop="false"
@register="registerModal"
width="80%"
@@ -103,16 +109,20 @@
<div class="flex align-items-center">
<div class="flex-1 text-left">{{ t('flink.app.view.refreshTime') }}:{{ logTime }}</div>
<div class="button-group">
- <a-button
- key="refresh"
- v-if="showRefresh"
- type="primary"
- @click="refreshLog"
- :loading="getLogLoading"
- >
- {{ t('flink.app.view.refresh') }}
- </a-button>
- <a-button key="close" type="primary" @click="closeModal()">
+ <template v-if="showRefresh">
+ <a-button
+ key="status"
+ :type="isPending ? 'error' : 'primary'"
+ @click="handleLogStatus()"
+ >
+ {{ isPending ? 'pause' : 'resume' }}
+ </a-button>
+ <a-button key="refresh" type="primary" @click="refreshLog" :loading="getLogLoading">
+ {{ t('flink.app.view.refresh') }}
+ </a-button>
+ </template>
+
+ <a-button key="stop" type="primary" @click="closeModal()">
{{ t('common.closeText') }}
</a-button>
</div>
diff --git a/streampark-console/streampark-console-newui/src/views/flink/project/useProject.ts b/streampark-console/streampark-console-newui/src/views/flink/project/useProject.ts
index dec8b043a..062be31a7 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/project/useProject.ts
+++ b/streampark-console/streampark-console-newui/src/views/flink/project/useProject.ts
@@ -195,7 +195,7 @@ export const useProject = () => {
});
if (res === 0) {
if (branchList.value.length === 0) {
- handleBranches(values);
+ await handleBranches(values);
}
if (!branchList.value.find((v) => v.value == values.branches)) {
createErrorSwal(
diff --git a/streampark-console/streampark-console-newui/src/views/flink/setting/components/FlinkClusterSetting.vue b/streampark-console/streampark-console-newui/src/views/flink/setting/components/FlinkClusterSetting.vue
index 466ee4df4..eceb9b7d3 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/setting/components/FlinkClusterSetting.vue
+++ b/streampark-console/streampark-console-newui/src/views/flink/setting/components/FlinkClusterSetting.vue
@@ -17,6 +17,7 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { exceptionPropWidth } from '/@/utils';
+ import { executionMap } from '/@/enums/flinkEnum';
export default defineComponent({
name: 'FlinkClusterSetting',
});
@@ -56,6 +57,10 @@
created: new Map(),
stoped: new Map(),
};
+ function isSessionMode(mode: number): boolean {
+ return [executionMap.YARN_SESSION, executionMap.KUBERNETES_SESSION].includes(mode);
+ }
+
/* Get flink environmental data*/
async function getFlinkClusterSetting() {
const clusterList = await fetchFlinkCluster();
@@ -71,6 +76,7 @@
}
}
}
+
function handleAdd() {
go('/flink/setting/add_cluster');
}
@@ -211,7 +217,7 @@
<template #actions>
<Tooltip :title="t('flink.setting.cluster.edit')">
<a-button
- v-if="handleIsStart(item) && item.executionMode === 3"
+ v-if="handleIsStart(item) && item.executionMode == executionMap.YARN_SESSION"
v-auth="'app:update'"
:disabled="true"
@click="handleEditCluster(item)"
@@ -222,7 +228,7 @@
<EditOutlined />
</a-button>
<a-button
- v-if="!handleIsStart(item) || item.executionMode === 1"
+ v-if="!handleIsStart(item) || item.executionMode == executionMap.REMOTE"
v-auth="'app:update'"
@click="handleEditCluster(item)"
shape="circle"
@@ -235,7 +241,7 @@
<template v-if="!handleIsStart(item)">
<Tooltip :title="t('flink.setting.cluster.start')">
<a-button
- v-if="item.executionMode === 3 || item.executionMode === 5"
+ v-if="isSessionMode(item.executionMode)"
v-auth="'cluster:create'"
@click="handleDeployCluser(item)"
shape="circle"
diff --git a/streampark-console/streampark-console-newui/src/views/flink/setting/hooks/useClusterSetting.ts b/streampark-console/streampark-console-newui/src/views/flink/setting/hooks/useClusterSetting.ts
index fbbe197a2..09a4eedff 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/setting/hooks/useClusterSetting.ts
+++ b/streampark-console/streampark-console-newui/src/views/flink/setting/hooks/useClusterSetting.ts
@@ -1,3 +1,4 @@
+import { ExecModeEnum } from '/@/enums/flinkEnum';
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
@@ -33,7 +34,7 @@ import {
fetchK8sNamespaces,
fetchSessionClusterIds,
} from '/@/api/flink/app/flinkHistory';
-import { handleFormValue, handleYarnQueue } from '../../app/utils';
+import { handleFormValue, handleYarnQueue, isSessionMode } from '../../app/utils';
import { useMessage } from '/@/hooks/web/useMessage';
export const useClusterSetting = () => {
@@ -130,7 +131,7 @@ export const useClusterSetting = () => {
componentProps: {
placeholder: 'Please enter yarn queue',
},
- ifShow: ({ values }) => values.executionMode == 3,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.YARN_SESSION,
},
{
field: 'address',
@@ -139,13 +140,13 @@ export const useClusterSetting = () => {
componentProps: ({ formModel }) => {
return {
placeholder:
- formModel.executionMode == 1
+ formModel.executionMode == ExecModeEnum.REMOTE
? "Please enter cluster address, multiple addresses use ',' split e.g: http://host:port,http://host1:port2"
: 'Please enter cluster address, e.g: http://host:port',
};
},
dynamicRules: ({ model }) => {
- return [{ required: model.executionMode == 1 }];
+ return [{ required: model.executionMode == ExecModeEnum.REMOTE }];
},
},
{
@@ -155,12 +156,12 @@ export const useClusterSetting = () => {
componentProps: {
placeholder: 'Please enter Yarn Session clusterId',
},
- ifShow: ({ values }) => values.executionMode == 3,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.YARN_SESSION,
},
{
field: 'k8sNamespace',
label: 'Kubernetes Namespace',
- ifShow: ({ values }) => values.executionMode == 5,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.KUBERNETES_SESSION,
component: 'Input',
render: ({ model, field }) =>
renderInputDropdown(model, field, {
@@ -171,7 +172,7 @@ export const useClusterSetting = () => {
{
field: 'clusterId',
label: 'Kubernetes ClusterId',
- ifShow: ({ values }) => values.executionMode == 5,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.KUBERNETES_SESSION,
component: 'Input',
defaultValue: unref(flinkEnvs).filter((v) => v.isDefault)[0],
render: ({ model, field }) =>
@@ -183,7 +184,7 @@ export const useClusterSetting = () => {
{
field: 'serviceAccount',
label: 'Service Account',
- ifShow: ({ values }) => values.executionMode == 5,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.KUBERNETES_SESSION,
component: 'Input',
render: ({ model, field }) =>
renderInputDropdown(model, field, {
@@ -194,7 +195,7 @@ export const useClusterSetting = () => {
{
field: 'k8sConf',
label: 'Kube Conf File',
- ifShow: ({ values }) => values.executionMode == 5,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.KUBERNETES_SESSION,
component: 'Input',
render: ({ model, field }) =>
renderInputDropdown(model, field, {
@@ -205,7 +206,7 @@ export const useClusterSetting = () => {
{
field: 'flinkImage',
label: 'Flink Base Docker Image',
- ifShow: ({ values }) => values.executionMode == 5,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.KUBERNETES_SESSION,
component: 'Input',
render: ({ model, field }) =>
renderInputDropdown(model, field, {
@@ -218,7 +219,7 @@ export const useClusterSetting = () => {
{
field: 'k8sRestExposedType',
label: 'Rest-Service Exposed Type',
- ifShow: ({ values }) => values.executionMode == 5,
+ ifShow: ({ values }) => values.executionMode == ExecModeEnum.KUBERNETES_SESSION,
component: 'Select',
componentProps: {
placeholder: 'kubernetes.rest-service.exposed.type',
@@ -228,7 +229,7 @@ export const useClusterSetting = () => {
{
field: 'resolveOrder',
label: 'Resolve Order',
- ifShow: ({ values }) => [3, 5].includes(values.executionMode),
+ ifShow: ({ values }) => isSessionMode(values.executionMode),
component: 'Select',
componentProps: { placeholder: 'classloader.resolve-order', options: resolveOrder },
rules: [{ required: true, message: 'Resolve Order is required', type: 'number' }],
@@ -236,7 +237,7 @@ export const useClusterSetting = () => {
{
field: 'slot',
label: 'Task Slots',
- ifShow: ({ values }) => [3, 5].includes(values.executionMode),
+ ifShow: ({ values }) => isSessionMode(values.executionMode),
component: 'InputNumber',
componentProps: {
placeholder: 'Number of slots per TaskManager',
@@ -248,14 +249,14 @@ export const useClusterSetting = () => {
{
field: 'totalOptions',
label: 'Total Memory Options',
- ifShow: ({ values }) => [3, 5].includes(values.executionMode),
+ ifShow: ({ values }) => isSessionMode(values.executionMode),
component: 'Select',
render: (renderCallbackParams) => renderTotalMemory(renderCallbackParams),
},
{
field: 'totalItem',
label: 'totalItem',
- ifShow: ({ values }) => [3, 5].includes(values.executionMode),
+ ifShow: ({ values }) => isSessionMode(values.executionMode),
component: 'Select',
renderColContent: ({ model, field }) =>
renderOptionsItems(model, 'totalOptions', field, '.memory', true),
@@ -263,7 +264,7 @@ export const useClusterSetting = () => {
{
field: 'jmOptions',
label: 'JM Memory Options',
- ifShow: ({ values }) => [3, 5].includes(values.executionMode),
+ ifShow: ({ values }) => isSessionMode(values.executionMode),
component: 'Select',
componentProps: {
showSearch: true,
@@ -278,7 +279,7 @@ export const useClusterSetting = () => {
{
field: 'jmOptionsItem',
label: 'jmOptionsItem',
- ifShow: ({ values }) => [3, 5].includes(values.executionMode),
+ ifShow: ({ values }) => isSessionMode(values.executionMode),
component: 'Select',
renderColContent: ({ model, field }) =>
renderOptionsItems(model, 'jmOptions', field, 'jobmanager.memory.'),
@@ -286,7 +287,7 @@ export const useClusterSetting = () => {
{
field: 'tmOptions',
label: 'TM Memory Options',
- ifShow: ({ values }) => [3, 5].includes(values.executionMode),
+ ifShow: ({ values }) => isSessionMode(values.executionMode),
component: 'Select',
componentProps: {
showSearch: true,
@@ -301,7 +302,7 @@ export const useClusterSetting = () => {
{
field: 'tmOptionsItem',
label: 'tmOptionsItem',
- ifShow: ({ values }) => [3, 5].includes(values.executionMode),
+ ifShow: ({ values }) => isSessionMode(values.executionMode),
component: 'Select',
renderColContent: ({ model, field }) =>
renderOptionsItems(model, 'tmOptions', field, 'taskmanager.memory.'),
@@ -309,7 +310,7 @@ export const useClusterSetting = () => {
{
field: 'properties',
label: 'Properties',
- ifShow: ({ values }) => [3, 5].includes(values.executionMode),
+ ifShow: ({ values }) => isSessionMode(values.executionMode),
component: 'Input',
render: (renderCallbackParams) => renderProperties(renderCallbackParams),
},
@@ -368,11 +369,21 @@ export const useClusterSetting = () => {
return {};
}
}
- onMounted(async () => {
- flinkEnvs.value = await fetchFlinkEnv();
- historyRecord.k8sNamespace = await fetchK8sNamespaces();
- historyRecord.k8sSessionClusterId = await fetchSessionClusterIds({ executionMode: 5 });
- historyRecord.flinkImage = await fetchFlinkBaseImages();
+ onMounted(() => {
+ fetchFlinkEnv().then((res) => {
+ flinkEnvs.value = res;
+ });
+ fetchK8sNamespaces().then((res) => {
+ historyRecord.k8sNamespace = res;
+ });
+ fetchSessionClusterIds({
+ executionMode: ExecModeEnum.KUBERNETES_SESSION,
+ }).then((res) => {
+ historyRecord.k8sSessionClusterId = res;
+ });
+ fetchFlinkBaseImages().then((res) => {
+ historyRecord.flinkImage = res;
+ });
});
return { getClusterSchema, handleSubmitParams, changeLoading, getLoading };
};