This is an automated email from the ASF dual-hosted git repository.
benjobs pushed a commit to branch dev-2.1.5
in repository https://gitbox.apache.org/repos/asf/incubator-streampark.git
The following commit(s) were added to refs/heads/dev-2.1.5 by this push:
new 3bd1114b4 [Improve] flink-cluster state improvements
3bd1114b4 is described below
commit 3bd1114b47e3867a66d0d25bf8428036178eeb97
Author: benjobs <[email protected]>
AuthorDate: Tue Sep 24 20:57:37 2024 +0800
[Improve] flink-cluster state improvements
---
.../src/locales/lang/en/setting/flinkCluster.ts | 1 +
.../src/locales/lang/zh-CN/setting/flinkCluster.ts | 1 +
.../src/views/setting/FlinkCluster/State.less | 64 ++++++++++++++++++++++
.../src/views/setting/FlinkCluster/State.tsx | 64 ++++++++++++++++++++++
.../src/views/setting/FlinkCluster/index.vue | 5 ++
5 files changed, 135 insertions(+)
diff --git
a/streampark-console/streampark-console-webapp/src/locales/lang/en/setting/flinkCluster.ts
b/streampark-console/streampark-console-webapp/src/locales/lang/en/setting/flinkCluster.ts
index 377a5fbf3..a002c1bb5 100644
---
a/streampark-console/streampark-console-webapp/src/locales/lang/en/setting/flinkCluster.ts
+++
b/streampark-console/streampark-console-webapp/src/locales/lang/en/setting/flinkCluster.ts
@@ -30,6 +30,7 @@ export default {
versionId: 'Flink Version',
addExisting: 'existing cluster',
addNew: 'new cluster',
+ clusterState: 'Cluster State',
yarnQueue: 'Yarn Queue',
yarnSessionClusterId: 'Yarn Session Cluster',
k8sNamespace: 'Kubernetes Namespace',
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 ac2154789..dbf37abd5 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
@@ -30,6 +30,7 @@ export default {
addType: '添加类型',
addExisting: '已有集群',
addNew: '全新集群',
+ clusterState: '集群状态',
yarnQueue: 'Yarn 队列',
yarnSessionClusterId: 'Yarn Session 模式集群ID',
k8sNamespace: 'K8S 命名空间',
diff --git
a/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/State.less
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/State.less
new file mode 100644
index 000000000..9051b9a43
--- /dev/null
+++
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/State.less
@@ -0,0 +1,64 @@
+/*
+ * 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.
+ */
+
+.status-processing-starting {
+ animation: starting-color 800ms ease-out infinite alternate;
+}
+
+.status-processing-running {
+ animation: running-color 800ms ease-out infinite alternate;
+}
+
+.status-processing-cancelling {
+ animation: cancelling-color 800ms ease-out infinite alternate;
+}
+
+@keyframes starting-color {
+ 0% {
+ border-color: #1ab58e;
+ box-shadow: 0 0 1px #1ab58e, inset 0 0 2px #1ab58e;
+ }
+
+ 100% {
+ border-color: #1ab58e;
+ box-shadow: 0 0 10px #1ab58e, inset 0 0 5px #1ab58e;
+ }
+}
+
+@keyframes running-color {
+ 0% {
+ border-color: #52c41a;
+ box-shadow: 0 0 1px #52c41a, inset 0 0 2px #52c41a;
+ }
+
+ 100% {
+ border-color: #52c41a;
+ box-shadow: 0 0 10px #52c41a, inset 0 0 5px #52c41a;
+ }
+}
+
+@keyframes cancelling-color {
+ 0% {
+ border-color: #faad14;
+ box-shadow: 0 0 1px #faad14, inset 0 0 2px #faad14;
+ }
+
+ 100% {
+ border-color: #faad14;
+ box-shadow: 0 0 10px #faad14, inset 0 0 5px #faad14;
+ }
+}
diff --git
a/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/State.tsx
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/State.tsx
new file mode 100644
index 000000000..4e0cf1dbc
--- /dev/null
+++
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/State.tsx
@@ -0,0 +1,64 @@
+/*
+ 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 { defineComponent, toRefs, unref } from 'vue';
+import { Tag } from 'ant-design-vue';
+import './State.less';
+import { ClusterStateEnum } from '/@/enums/flinkEnum';
+
+/* state map*/
+const stateMap = {
+ [ClusterStateEnum.CREATED]: { color: '#2f54eb', title: 'CREATED' },
+ [ClusterStateEnum.STARTED]: {
+ color: '#52c41a',
+ title: 'RUNNING',
+ class: 'status-processing-running',
+ },
+ [ClusterStateEnum.CANCELED]: { color: '#fa8c16', title: 'CANCELED' },
+ [ClusterStateEnum.LOST]: { color: '#99A3A4', title: 'LOST' },
+};
+
+export default defineComponent({
+ name: 'State',
+ props: {
+ option: {
+ type: String,
+ default: 'state',
+ },
+ data: {
+ type: Object as PropType<Recordable>,
+ default: () => ({}),
+ },
+ },
+ setup(props) {
+ const { data } = toRefs(props);
+ const renderTag = (map: Recordable, key: number) => {
+ if (!Reflect.has(map, key)) {
+ return;
+ }
+ return <Tag {...map[key]}>{map[key].title}</Tag>;
+ };
+
+ const renderState = () => {
+ return <div class="bold-tag">{renderTag(stateMap,
unref(data).clusterState)}</div>;
+ };
+
+ return () => {
+ return <span>{renderState()}</span>;
+ };
+ },
+});
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 7fc631668..d4b942cd7 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
@@ -33,6 +33,7 @@
import { useI18n } from '/@/hooks/web/useI18n';
import { PageWrapper } from '/@/components/Page';
import { BasicTable, TableAction, useTable } from '/@/components/Table';
+ import State from './State';
defineOptions({
name: 'FlinkClusterSetting',
});
@@ -60,6 +61,7 @@
{ dataIndex: 'clusterName', title:
t('setting.flinkCluster.form.clusterName') },
{ dataIndex: 'executionMode', title:
t('setting.flinkCluster.form.executionMode') },
{ dataIndex: 'address', title: t('setting.flinkCluster.form.address') },
+ { dataIndex: 'clusterState', title:
t('setting.flinkCluster.form.clusterState') },
{ dataIndex: 'description', title: t('setting.flinkHome.description') },
],
formConfig: {
@@ -201,6 +203,9 @@
</a>
<span v-else> - </span>
</template>
+ <template v-if="column.dataIndex === 'clusterState'">
+ <State :data="{ clusterState: record.clusterState }" />
+ </template>
<template v-if="column.dataIndex === 'action'">
<TableAction
:actions="[
