This is an automated email from the ASF dual-hosted git repository.
benjobs pushed a commit to branch dev-2.1.3
in repository https://gitbox.apache.org/repos/asf/incubator-streampark.git
The following commit(s) were added to refs/heads/dev-2.1.3 by this push:
new 5b7f85d13 [Improve] FE check k8s clusterId improvement
5b7f85d13 is described below
commit 5b7f85d13caf8da5234689b6f70e5cd860a2eb6a
Author: benjobs <[email protected]>
AuthorDate: Mon Jan 29 21:52:12 2024 +0800
[Improve] FE check k8s clusterId improvement
---
.../src/locales/lang/en/flink/app.ts | 1 +
.../src/locales/lang/zh-CN/flink/app.ts | 3 +-
.../src/locales/lang/zh-CN/setting/flinkCluster.ts | 8 ++--
.../src/views/setting/FlinkCluster/AddCluster.vue | 3 ++
.../src/views/setting/FlinkCluster/Cluster.less | 30 +++++++++++++
.../src/views/setting/FlinkCluster/EditCluster.vue | 3 ++
.../src/views/setting/FlinkCluster/useCluster.tsx | 52 ++++++++++++++++++++++
.../setting/FlinkCluster/useClusterSetting.ts | 8 ++--
8 files changed, 98 insertions(+), 10 deletions(-)
diff --git
a/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/app.ts
b/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/app.ts
index cd5a17f8e..aa6b306fb 100644
---
a/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/app.ts
+++
b/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/app.ts
@@ -279,6 +279,7 @@ export default {
kubernetesClusterIdPlaceholder: 'Please enter Kubernetes clusterId',
appNameValid: 'The job name is invalid',
appNameRole: 'The job name is invalid',
+ K8sSessionClusterIdRole: 'The K8s clusterId must follow the following
rules:',
appNameK8sClusterIdRole:
'The current deployment mode is K8s Application mode, and the job name
will be used as the clusterId in K8s. Therefore, the job name must follow the
following rules:',
appNameK8sClusterIdRoleLength: 'must be no more than 45 characters',
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
index d1f6b79f8..8e81ba93e 100644
---
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
@@ -258,8 +258,9 @@ export default {
appNameExistsInK8sMessage: '该应用程序名称已经在K8S集群中存在，不能重复。请检查',
appNameValid: '应用程序名称不合法',
appNameRole: '应用名称必须遵循以下规则：',
+ K8sSessionClusterIdRole: 'K8S集群ID必要遵循以下规则:',
appNameK8sClusterIdRole:
- '当前部署模式是 K8s Application模式，会将作业名称作为k8s的 clusterId，因此作业名称要遵循以下规则：',
+ '当前部署模式是 K8s Application模式，会将作业名称作为k8s的 clusterId，因此作业名称要遵循以下规则:',
appNameK8sClusterIdRoleLength: '不应超过 45 个字符',
appNameK8sClusterIdRoleRegexp:
'只能由小写字母、数字、字符、和"-" 组成，必须满足正则格式 [a-z]([-a-z0-9]*[a-z0-9])',
diff --git
a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/setting/flinkCluster.ts
b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/setting/flinkCluster.ts
index 6d9df6bec..92be88546 100644
---
a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/setting/flinkCluster.ts
+++
b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/setting/flinkCluster.ts
@@ -31,11 +31,11 @@ export default {
addNew: '全新集群',
yarnQueue: 'Yarn队列',
yarnSessionClusterId: 'Yarn Session模式集群ID',
- k8sNamespace: 'k8s命名空间',
- k8sClusterId: 'k8s集群ID',
+ k8sNamespace: 'K8S命名空间',
+ k8sClusterId: 'K8S集群ID',
k8sSessionCluster: 'k8s Session集群',
- serviceAccount: 'k8s服务账号',
- k8sConf: 'k8s环境Kube配置文件',
+ serviceAccount: 'K8S服务账号',
+ k8sConf: 'K8S环境Kube配置文件',
flinkImage: 'Flink基础docker镜像',
k8sRestExposedType: 'K8S服务对外类型',
resolveOrder: '类加载顺序',
diff --git
a/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/AddCluster.vue
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/AddCluster.vue
index 2211451d7..2ce5a85fa 100644
---
a/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/AddCluster.vue
+++
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/AddCluster.vue
@@ -97,3 +97,6 @@
</BasicForm>
</PageWrapper>
</template>
+<style lang="less">
+ @import url('./Cluster.less');
+</style>
diff --git
a/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/Cluster.less
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/Cluster.less
new file mode 100644
index 000000000..4a42554b7
--- /dev/null
+++
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/Cluster.less
@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+
+.note-info {
+ color: #666;
+ line-height: 30px;
+ display: inline-table;
+}
+
+.note-elem {
+ border: 1px solid @border-color-base;
+ background-color: @background-color-base;
+ padding: 0 4px;
+ border-radius: 4px;
+ margin-top: 14px;
+}
diff --git
a/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/EditCluster.vue
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/EditCluster.vue
index c3da53cfe..340b21ac3 100644
---
a/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/EditCluster.vue
+++
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/EditCluster.vue
@@ -136,3 +136,6 @@
>
</PageWrapper>
</template>
+<style lang="less">
+ @import url('./Cluster.less');
+</style>
diff --git
a/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/useCluster.tsx
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/useCluster.tsx
new file mode 100644
index 000000000..6646ee2f2
--- /dev/null
+++
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/useCluster.tsx
@@ -0,0 +1,52 @@
+/*
+ * 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.
+ */
+import { useI18n } from '/@/hooks/web/useI18n';
+const { t } = useI18n();
+
+import { Input, Tag } from 'ant-design-vue';
+import { RenderCallbackParams } from '/@/components/Form';
+
+export const renderClusterId = ({ model, field }: RenderCallbackParams) => {
+ return (
+ <div>
+ <Input
+ name="clusterId"
+ placeholder={t('flink.app.addAppTips.clusterIdPlaceholder')}
+ value={model[field]}
+ onInput={(e: ChangeEvent) => (model[field] = e?.target?.value)}
+ />
+ <p class="conf-desc mt-10px">
+ <span class="note-info">
+ <Tag color="#2db7f5" class="tag-note">
+ {t('flink.app.noteInfo.note')}
+ </Tag>
+ <span>
+ {t('flink.app.addAppTips.K8sSessionClusterIdRole')}
+ <div>
+ <Tag color="orange"> 1.</Tag>
+ {t('flink.app.addAppTips.appNameK8sClusterIdRoleLength')}
+ </div>
+ <div>
+ <Tag color="orange"> 2.</Tag>
+ {t('flink.app.addAppTips.appNameK8sClusterIdRoleRegexp')}
+ </div>
+ </span>
+ </span>
+ </p>
+ </div>
+ );
+};
diff --git
a/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/useClusterSetting.ts
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/useClusterSetting.ts
index e88e1d04a..dcbf76d9a 100644
---
a/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/useClusterSetting.ts
+++
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/useClusterSetting.ts
@@ -38,6 +38,7 @@ import {
import { handleFormValue } from '../../flink/app/utils';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
+import { renderClusterId } from '/@/views/setting/FlinkCluster/useCluster';
export const useClusterSetting = () => {
const { createMessage } = useMessage();
@@ -162,11 +163,8 @@ export const useClusterSetting = () => {
ifShow: ({ values }) => values.executionMode ==
ExecModeEnum.KUBERNETES_SESSION,
component: 'Input',
defaultValue: unref(flinkEnvs).filter((v) => v.isDefault)[0],
- render: ({ model, field }) =>
- renderInputDropdown(model, field, {
- placeholder: 'default',
- options: historyRecord.k8sSessionClusterId,
- }),
+ render: (renderCallbackParams) =>
renderClusterId(renderCallbackParams),
+ rules: [{ required: true, message:
t('setting.flinkCluster.required.clusterId') }],
},
{
field: 'k8sNamespace',
