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 5eb9f1b31 [Improve] flink cluster runState FE style improvement
5eb9f1b31 is described below
commit 5eb9f1b3134a63a8130fd9b58751f244bfeafac9
Author: benjobs <[email protected]>
AuthorDate: Sun Jan 21 18:40:19 2024 +0800
[Improve] flink cluster runState FE style improvement
---
.../src/locales/lang/en/flink/app.ts | 9 ++++++
.../src/locales/lang/zh-CN/flink/app.ts | 8 +++++
.../src/views/flink/app/components/AppConf.tsx | 14 ++++++---
.../src/views/flink/app/components/State.tsx | 2 +-
.../flink/app/hooks/useCreateAndEditSchema.ts | 34 +++++++--------------
.../src/views/flink/app/hooks/useFlinkRender.tsx | 35 +++++++++++++++++++++-
.../src/views/setting/FlinkCluster/index.vue | 6 ++--
7 files changed, 74 insertions(+), 34 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 8cab36c2b..366fef9d7 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
@@ -14,6 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+
export default {
id: 'ID',
appName: 'Job Name',
@@ -44,6 +45,8 @@ export default {
yarnQueue: 'Yarn Queue',
mavenPom: 'Maven pom',
uploadJar: 'Upload Jar',
+ useExisting: 'use existing',
+ reselect: 'reselect',
kubernetesNamespace: 'Kubernetes Namespace',
kubernetesClusterId: 'Kubernetes ClusterId',
kubernetesCluster: 'Kubernetes Cluster',
@@ -92,6 +95,12 @@ export default {
releasing: 'RELEASING',
pending: 'PENDING',
},
+ clusterState: {
+ created: 'CREATED',
+ started: 'STARTED',
+ canceled: 'SHUTDOWN',
+ lost: 'LOST',
+ },
release: {
releaseTitle: 'The current release of the application is in progress.',
releaseDesc: 'are you sure you want to force another build',
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 c07376071..863a909b7 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
@@ -51,6 +51,8 @@ export default {
restServiceExposedType: 'K8S服务对外类型',
resourceFrom: '资源来源',
uploadJobJar: '上传jar文件',
+ useExisting: '使用当前配置',
+ reselect: '重新选择配置',
mainClass: '程序入口类',
project: '项目',
module: '模块',
@@ -90,6 +92,12 @@ export default {
releaseFail: '发布作业失败',
releasing: '当前作业正在发布中',
},
+ clusterState: {
+ created: '新增',
+ started: '运行中',
+ canceled: '停止',
+ lost: '失联',
+ },
detail: {
detailTitle: '作业详情',
flinkWebUi: 'Flink Web UI',
diff --git
a/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppConf.tsx
b/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppConf.tsx
index 778956738..9a036cd7c 100644
---
a/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppConf.tsx
+++
b/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppConf.tsx
@@ -1,4 +1,4 @@
-/*
+/*
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.
@@ -12,7 +12,7 @@
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.
+ limitations under the License.
*/
import { defineComponent, toRefs, unref } from 'vue';
@@ -27,6 +27,8 @@ import { fetchAppConf, fetchName } from
'/@/api/flink/app/app';
import { SettingTwoTone } from '@ant-design/icons-vue';
import { fetchListConf } from '/@/api/flink/project';
import { UseStrategyEnum } from '/@/enums/flinkEnum';
+import { useI18n } from '/@/hooks/web/useI18n';
+const { t } = useI18n();
export default defineComponent({
name: 'AppConf',
@@ -79,8 +81,12 @@ export default defineComponent({
value={unref(model).strategy}
onChange={(value: any) => handleChangeStrategy(value)}
>
- <Select.Option value={UseStrategyEnum.USE_EXIST}>use
existing</Select.Option>
- <Select.Option
value={UseStrategyEnum.RESELECT}>reselect</Select.Option>
+ <Select.Option value={UseStrategyEnum.USE_EXIST}>
+ {t('flink.app.useExisting')}
+ </Select.Option>
+ <Select.Option value={UseStrategyEnum.RESELECT}>
+ {t('flink.app.reselect')}
+ </Select.Option>
</Select>
{unref(model).strategy == UseStrategyEnum.USE_EXIST && (
<Form.Item style="width: calc(75% - 75px);margin-left:10px;">
diff --git
a/streampark-console/streampark-console-webapp/src/views/flink/app/components/State.tsx
b/streampark-console/streampark-console-webapp/src/views/flink/app/components/State.tsx
index a9647c038..564b32d01 100644
---
a/streampark-console/streampark-console-webapp/src/views/flink/app/components/State.tsx
+++
b/streampark-console/streampark-console-webapp/src/views/flink/app/components/State.tsx
@@ -61,7 +61,7 @@ export const stateMap = {
title: t('flink.app.runState.reconciling'),
class: 'status-processing-reconciling',
},
- [AppStateEnum.LOST]: { color: '#000000', title: t('flink.app.runState.lost')
},
+ [AppStateEnum.LOST]: { color: '#333333', title: t('flink.app.runState.lost')
},
[AppStateEnum.MAPPING]: {
color: '#13c2c2',
title: t('flink.app.runState.mapping'),
diff --git
a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useCreateAndEditSchema.ts
b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useCreateAndEditSchema.ts
index fba0fc31b..fd8af4ef6 100644
---
a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useCreateAndEditSchema.ts
+++
b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useCreateAndEditSchema.ts
@@ -28,6 +28,7 @@ import {
renderOptionsItems,
renderTotalMemory,
renderYarnQueue,
+ renderFlinkCluster,
} from './useFlinkRender';
import { fetchCheckName } from '/@/api/flink/app/app';
@@ -50,7 +51,7 @@ 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 { AppTypeEnum, ClusterStateEnum, ExecModeEnum, JobTypeEnum } from
'/@/enums/flinkEnum';
+import { AppTypeEnum, ExecModeEnum, JobTypeEnum } from '/@/enums/flinkEnum';
import { isK8sExecMode } from '../utils';
import { useI18n } from '/@/hooks/web/useI18n';
import { fetchCheckHadoop } from '/@/api/flink/setting';
@@ -90,18 +91,10 @@ export const useCreateAndEditSchema = (
/* filter cluster */
const getExecutionCluster = (
executionMode: number,
- valueKey: string,
- ): Array<{ label: string; value: string }> => {
+ ): Array<{ id: string; label: string; state: number }> => {
return (unref(flinkClusters) || [])
- .filter((o) => {
- // Edit mode has one more filter condition
- if (edit?.mode) {
- return o.executionMode == executionMode && o.clusterState ===
ClusterStateEnum.STARTED;
- } else {
- return o.executionMode == executionMode;
- }
- })
- .map((i) => ({ label: i.clusterName, value: i[valueKey] }));
+ .filter((o) => o.executionMode == executionMode)
+ .map((item) => ({ id: item.id, label: item.clusterName, state:
item.clusterState }));
};
const getFlinkSqlSchema = computed((): FormSchema[] => {
@@ -203,10 +196,7 @@ export const useCreateAndEditSchema = (
field: 'remoteClusterId',
label: t('flink.app.flinkCluster'),
component: 'Select',
- componentProps: {
- placeholder: t('flink.app.flinkCluster'),
- options: getExecutionCluster(ExecModeEnum.REMOTE, 'id'),
- },
+ render: (param) =>
renderFlinkCluster(getExecutionCluster(ExecModeEnum.REMOTE), param),
ifShow: ({ values }) => values.executionMode == ExecModeEnum.REMOTE,
rules: [
{ required: true, message:
t('flink.app.addAppTips.flinkClusterIsRequiredMessage') },
@@ -216,10 +206,8 @@ export const useCreateAndEditSchema = (
field: 'yarnSessionClusterId',
label: t('flink.app.flinkCluster'),
component: 'Select',
- componentProps: {
- placeholder: t('flink.app.flinkCluster'),
- options: getExecutionCluster(ExecModeEnum.YARN_SESSION, 'id'),
- },
+ render: (param) =>
+ renderFlinkCluster(getExecutionCluster(ExecModeEnum.YARN_SESSION),
param),
ifShow: ({ values }) => values.executionMode ==
ExecModeEnum.YARN_SESSION,
rules: [
{ required: true, message:
t('flink.app.addAppTips.flinkClusterIsRequiredMessage') },
@@ -229,10 +217,8 @@ export const useCreateAndEditSchema = (
field: 'k8sSessionClusterId',
label: t('flink.app.flinkCluster'),
component: 'Select',
- componentProps: {
- placeholder: t('flink.app.flinkCluster'),
- options: getExecutionCluster(ExecModeEnum.KUBERNETES_SESSION, 'id'),
- },
+ render: (param) =>
+
renderFlinkCluster(getExecutionCluster(ExecModeEnum.KUBERNETES_SESSION), param),
ifShow: ({ values }) => values.executionMode ==
ExecModeEnum.KUBERNETES_SESSION,
rules: [
{ required: true, message:
t('flink.app.addAppTips.flinkClusterIsRequiredMessage') },
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
index 068911c83..07e222003 100644
---
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
@@ -42,6 +42,7 @@ import { SelectValue } from 'ant-design-vue/lib/select';
import {
AppTypeEnum,
CandidateTypeEnum,
+ ClusterStateEnum,
ExecModeEnum,
FailoverStrategyEnum,
} from '/@/enums/flinkEnum';
@@ -306,6 +307,38 @@ export const renderJobName = ({ model, field }:
RenderCallbackParams) => {
);
};
+export const renderFlinkCluster = (clusters, { model, field }:
RenderCallbackParams) => {
+ return (
+ <Select
+ placeholder={t('flink.app.flinkCluster')}
+ value={model[field]}
+ onChange={(value: any) => (model[field] = value)}
+ >
+ {clusters.map((item) => {
+ return (
+ <Select.Option key={item.id}>
+ {item.label}
+ <span style="margin-left: 50px;">
+ {item.state == ClusterStateEnum.CREATED && (
+ <Tag
color="#108ee9">{t('flink.app.clusterState.created')}</Tag>
+ )}
+ {item.state == ClusterStateEnum.STARTED && (
+ <Tag
color="#52c41a">{t('flink.app.clusterState.started')}</Tag>
+ )}
+ {item.state == ClusterStateEnum.CANCELED && (
+ <Tag
color="#fa8c16">{t('flink.app.clusterState.canceled')}</Tag>
+ )}
+ {item.state == ClusterStateEnum.LOST && (
+ <Tag color="#333333">{t('flink.app.clusterState.lost')}</Tag>
+ )}
+ </span>
+ </Select.Option>
+ );
+ })}
+ </Select>
+ );
+};
+
/* render memory option */
export const renderDynamicProperties = ({ model, field }:
RenderCallbackParams) => {
return (
@@ -484,7 +517,7 @@ export const renderSqlHistory = (
if (!isCompareSelect) return false;
return compareSQL.value.length == 2 && compareSQL.value.findIndex((i) =>
i === ver.id) === -1;
};
- console.log('flinkSqlHistory', flinkSqlHistory);
+
return (flinkSqlHistory || []).map((ver) => {
return (
<Select.Option key={ver.id} disabled={isDisabled(ver)}>
diff --git
a/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/index.vue
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/index.vue
index 8cd7b8dfa..2e43765f5 100644
---
a/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/index.vue
+++
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/index.vue
@@ -15,9 +15,8 @@
limitations under the License.
-->
<script lang="ts">
- import { defineComponent } from 'vue';
+ import { defineComponent, onUnmounted } from 'vue';
import { useTimeoutFn } from '@vueuse/core';
- import { onUnmounted } from 'vue';
export default defineComponent({
name: 'FlinkClusterSetting',
@@ -107,8 +106,7 @@
async function getFlinkCluster() {
try {
loading.value = true;
- const clusterList = await fetchFlinkCluster();
- clusters.value = clusterList;
+ clusters.value = await fetchFlinkCluster();
} catch (error) {
console.error(error);
} finally {
