From 72046421dd2e6d4c92ea1088ef7c4a339c7da80f Mon Sep 17 00:00:00 2001 From: wangqi Date: Fri, 29 Dec 2023 17:12:27 +0800 Subject: [PATCH 1/4] feature: add xflow event listener --- .../DI/DiJobFlow/Dag/config-graph.tsx | 32 ++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Artifact/DI/DiJobFlow/Dag/config-graph.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Artifact/DI/DiJobFlow/Dag/config-graph.tsx index c7d964c74..80a76502d 100644 --- a/scaleph-ui-react/src/pages/Project/Workspace/Artifact/DI/DiJobFlow/Dag/config-graph.tsx +++ b/scaleph-ui-react/src/pages/Project/Workspace/Artifact/DI/DiJobFlow/Dag/config-graph.tsx @@ -3,7 +3,7 @@ import type { EventArgs } from '@antv/x6/lib/graph/events'; import { createGraphConfig, createHookConfig, - DisposableCollection, + DisposableCollection, IEvent, NsGraph, NsNodeCmd, XFlowNodeCommands, @@ -206,4 +206,34 @@ export const useGraphConfig = createGraphConfig((config) => { }, }, }); + + // 配置不同组件的 node 和 edge 组件 + config.setNodeRender(DND_RENDER_ID, BaseNode) + + // 节点事件 + const edgeAdded: IEvent<'edge:added'> = { + eventName: 'edge:added', + callback: (eventArgs, command, modelService) => { + console.log('edge:added', eventArgs, e) + }, + } + const edgeRemoved: IEvent<'edge:removed'> = { + eventName: 'edge:removed', + callback: (eventArgs, command, modelService) => { + console.log('edge:removed', eventArgs, e) + }, + } + const nodeAdded: IEvent<'node:added'> = { + eventName: 'node:added', + callback: (eventArgs, command, modelService) => { + console.log('node:added', eventArgs, e) + }, + } + const nodeRemoved: IEvent<'node:removed'> = { + eventName: 'node:removed', + callback: (eventArgs, command, modelService) => { + console.log('node:removed', eventArgs, e) + }, + } + config.setEvents([edgeAdded, edgeRemoved, nodeAdded, nodeRemoved]) }); From 6708cbb8eb4663e92a41af82550149ca2fea5226 Mon Sep 17 00:00:00 2001 From: wangqi Date: Fri, 29 Dec 2023 20:36:34 +0800 Subject: [PATCH 2/4] feature: update flink kubernetes session cluster --- .../src/locales/zh-CN/pages/project.ts | 10 ++- .../flinkKubernetesSessionClusterDetail.ts | 29 +++++-- .../Workspace/Kubernetes/Job/Detail/index.tsx | 1 - .../Workspace/Kubernetes/Job/JobForm.tsx | 7 +- .../Workspace/Kubernetes/Job/index.tsx | 12 ++- ...linkKubernetesSessionClusterStatusYaml.tsx | 38 ++++++++++ .../FlinkKubernetesSessionClusterYaml.tsx | 38 ++++++++++ .../SessionCluster/Detail/YAML/index.tsx | 76 +++++-------------- .../SessionCluster/Detail/index.tsx | 52 ++++++++----- .../Kubernetes/SessionCluster/index.tsx | 7 +- .../src/services/project/typings.d.ts | 1 + 11 files changed, 173 insertions(+), 98 deletions(-) create mode 100644 scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/FlinkKubernetesSessionClusterStatusYaml.tsx create mode 100644 scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/FlinkKubernetesSessionClusterYaml.tsx diff --git a/scaleph-ui-react/src/locales/zh-CN/pages/project.ts b/scaleph-ui-react/src/locales/zh-CN/pages/project.ts index 0ff809c13..f827c3557 100644 --- a/scaleph-ui-react/src/locales/zh-CN/pages/project.ts +++ b/scaleph-ui-react/src/locales/zh-CN/pages/project.ts @@ -834,20 +834,24 @@ export default { 'pages.project.flink.kubernetes.template.step.yaml': 'YAML', 'pages.project.flink.kubernetes.session-cluster': 'SessionCluster', + 'pages.project.flink.kubernetes.session-cluster.sessionClusterId': 'ID', 'pages.project.flink.kubernetes.session-cluster.name': '名称', - 'pages.project.flink.kubernetes.session-cluster.flinkVersion': 'Flink 版本', + 'pages.project.flink.kubernetes.session-cluster.flinkVersion': 'Flink', 'pages.project.flink.kubernetes.session-cluster.image': '镜像', 'pages.project.flink.kubernetes.session-cluster.namespace': 'Namespace', 'pages.project.flink.kubernetes.session-cluster.sql-gateway': 'Sql Gateway', - 'pages.project.flink.kubernetes.session-cluster.state': 'State', - 'pages.project.flink.kubernetes.session-cluster.error': 'Error', + 'pages.project.flink.kubernetes.session-cluster.state': '状态', + 'pages.project.flink.kubernetes.session-cluster.error': '异常', 'pages.project.flink.kubernetes.session-cluster.remark': 'remark', 'pages.project.flink.kubernetes.session-cluster.steps.cluster': 'Cluster & Template', 'pages.project.flink.kubernetes.session-cluster.steps.cluster.template': 'Template', 'pages.project.flink.kubernetes.session-cluster.steps.cluster.cluster': 'Cluster', 'pages.project.flink.kubernetes.session-cluster.steps.options': 'Options', 'pages.project.flink.kubernetes.session-cluster.steps.yaml': 'YAML', + 'pages.project.flink.kubernetes.session-cluster.steps.yaml.instance': '实例', + 'pages.project.flink.kubernetes.session-cluster.steps.yaml.status': '状态', + 'pages.project.flink.kubernetes.session-cluster.detail': 'Session集群详情', 'pages.project.flink.kubernetes.session-cluster.detail.deploy': 'Deploy', 'pages.project.flink.kubernetes.session-cluster.detail.suspend': 'Suspend', 'pages.project.flink.kubernetes.session-cluster.detail.shutdown': 'Shutdown', diff --git a/scaleph-ui-react/src/models/project/workspace/kubernetes/sessionCluster/flinkKubernetesSessionClusterDetail.ts b/scaleph-ui-react/src/models/project/workspace/kubernetes/sessionCluster/flinkKubernetesSessionClusterDetail.ts index f484e57e1..c7eee452d 100644 --- a/scaleph-ui-react/src/models/project/workspace/kubernetes/sessionCluster/flinkKubernetesSessionClusterDetail.ts +++ b/scaleph-ui-react/src/models/project/workspace/kubernetes/sessionCluster/flinkKubernetesSessionClusterDetail.ts @@ -1,9 +1,12 @@ import {WsFlinkKubernetesSessionCluster} from "@/services/project/typings"; import {Effect, Reducer} from "umi"; import {WsFlinkKubernetesSessionClusterService} from "@/services/project/WsFlinkKubernetesSessionClusterService"; +import YAML from "yaml"; export interface StateType { sessionCluster: WsFlinkKubernetesSessionCluster, + sessionClusterYaml: string, + sessionClusterStatusYaml: string, } export interface ModelType { @@ -12,11 +15,11 @@ export interface ModelType { state: StateType; effects: { - queryTemplate: Effect; + querySessionCluster: Effect; }; reducers: { - updateTemplate: Reducer; + updateSessionCluster: Reducer; }; } @@ -25,12 +28,26 @@ const model: ModelType = { state: { sessionCluster: null, + sessionClusterYaml: null, + sessionClusterStatusYaml: null, }, effects: { - *querySessionCluster({payload}, {call, put}) { + * querySessionCluster({payload}, {call, put}) { const {data} = yield call(WsFlinkKubernetesSessionClusterService.selectOne, payload); - yield put({type: 'updateSessionCluster', payload: {sessionCluster: data}}); + const param = {...data} + param.deployed = undefined + param.state = undefined + const response = yield call(WsFlinkKubernetesSessionClusterService.asYAML, param); + const statusReponse = yield call(WsFlinkKubernetesSessionClusterService.status, param); + yield put({ + type: 'updateSessionCluster', + payload: { + sessionCluster: data, + sessionClusterYaml: YAML.stringify(response.data), + sessionClusterStatusYaml: YAML.stringify(statusReponse.data) + } + }); }, }, @@ -38,7 +55,9 @@ const model: ModelType = { updateSessionCluster(state, {payload}) { return { ...state, - sessionCluster: payload.sessionCluster + sessionCluster: payload.sessionCluster, + sessionClusterYaml: payload.sessionClusterYaml, + sessionClusterStatusYaml: payload.sessionClusterStatusYaml }; }, }, diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Job/Detail/index.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Job/Detail/index.tsx index cac9eeea2..a6b17d761 100644 --- a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Job/Detail/index.tsx +++ b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Job/Detail/index.tsx @@ -214,7 +214,6 @@ const FlinkKubernetesJobDetailWeb: React.FC = (props: any) => { column={3} dataSource={props.jobDetail.job} columns={descriptionColumns} - // extra={buttons} /> > = ( const [form] = Form.useForm(); const projectId = localStorage.getItem(WORKSPACE_CONF.projectId); - console.log('FlinkKubernetesJobForm', data) - return ( > = ( }} - diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Job/index.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Job/index.tsx index 6a330ebbb..642942470 100644 --- a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Job/index.tsx +++ b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Job/index.tsx @@ -26,7 +26,8 @@ const FlinkKubernetesJobWeb: React.FC = () => { const tableColumns: ProColumns[] = [ { title: intl.formatMessage({id: 'pages.project.flink.kubernetes.job.name'}), - dataIndex: 'name' + dataIndex: 'name', + width: '10%' }, { title: intl.formatMessage({id: 'pages.project.flink.kubernetes.job.executionMode'}), @@ -87,7 +88,6 @@ const FlinkKubernetesJobWeb: React.FC = () => { { title: intl.formatMessage({id: 'pages.project.flink.kubernetes.job.state'}), dataIndex: 'state', - width: 100, hideInSearch: true, render: (dom, record) => { return {record.jobInstance?.state?.label} @@ -99,7 +99,6 @@ const FlinkKubernetesJobWeb: React.FC = () => { { title: intl.formatMessage({id: 'pages.project.flink.kubernetes.job.jobState'}), dataIndex: 'jobState', - width: 100, hideInSearch: true, render: (dom, record) => { return {record.jobInstance?.jobState?.label} @@ -119,20 +118,19 @@ const FlinkKubernetesJobWeb: React.FC = () => { { title: intl.formatMessage({id: 'app.common.data.remark'}), dataIndex: 'remark', - hideInSearch: true, - width: 180, + hideInSearch: true }, { title: intl.formatMessage({id: 'app.common.data.createTime'}), dataIndex: 'createTime', hideInSearch: true, - width: 180, + width: '8%', }, { title: intl.formatMessage({id: 'app.common.data.updateTime'}), dataIndex: 'updateTime', hideInSearch: true, - width: 180, + width: '8%', }, { title: intl.formatMessage({id: 'app.common.operate.label'}), diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/FlinkKubernetesSessionClusterStatusYaml.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/FlinkKubernetesSessionClusterStatusYaml.tsx new file mode 100644 index 000000000..c3bb2ee58 --- /dev/null +++ b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/FlinkKubernetesSessionClusterStatusYaml.tsx @@ -0,0 +1,38 @@ +import React, {useEffect, useRef} from "react"; +import Editor, {Monaco, useMonaco} from "@monaco-editor/react"; +import {connect} from "umi"; + +const FlinkKubernetesSessionClusterDetailStatusYaml: React.FC = (props: any) => { + const editorRef = useRef(null); + const monaco = useMonaco(); + + useEffect(() => { + // do conditional chaining + monaco?.languages.typescript.javascriptDefaults.setEagerModelSync(true); + }, [monaco]); + + const handleEditorDidMount = (editor, monaco: Monaco) => { + editorRef.current = editor; + } + + return ( + + ); +} + +const mapModelToProps = ({flinkKubernetesSessionClusterDetail}: any) => ({flinkKubernetesSessionClusterDetail}) +export default connect(mapModelToProps)(FlinkKubernetesSessionClusterDetailStatusYaml); diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/FlinkKubernetesSessionClusterYaml.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/FlinkKubernetesSessionClusterYaml.tsx new file mode 100644 index 000000000..4a33b8a46 --- /dev/null +++ b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/FlinkKubernetesSessionClusterYaml.tsx @@ -0,0 +1,38 @@ +import React, {useEffect, useRef} from "react"; +import Editor, {Monaco, useMonaco} from "@monaco-editor/react"; +import {connect} from "umi"; + +const FlinkKubernetesSessionClusterDetailYaml: React.FC = (props: any) => { + const editorRef = useRef(null); + const monaco = useMonaco(); + + useEffect(() => { + // do conditional chaining + monaco?.languages.typescript.javascriptDefaults.setEagerModelSync(true); + }, [monaco]); + + const handleEditorDidMount = (editor, monaco: Monaco) => { + editorRef.current = editor; + } + + return ( + + ); +} + +const mapModelToProps = ({flinkKubernetesSessionClusterDetail}: any) => ({flinkKubernetesSessionClusterDetail}) +export default connect(mapModelToProps)(FlinkKubernetesSessionClusterDetailYaml); diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/index.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/index.tsx index f18fc911b..3590113e4 100644 --- a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/index.tsx +++ b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/index.tsx @@ -1,62 +1,26 @@ -import React, {useEffect, useRef, useState} from "react"; -import Editor, {Monaco, useMonaco} from "@monaco-editor/react"; -import YAML from "yaml"; -import {WsFlinkKubernetesSessionCluster} from "@/services/project/typings"; -import {WsFlinkKubernetesSessionClusterService} from "@/services/project/WsFlinkKubernetesSessionClusterService"; -import {connect} from "umi"; +import React from "react"; +import {useIntl} from "umi"; +import {ProCard} from "@ant-design/pro-components"; +import {Divider} from "antd"; +import FlinkKubernetesSessionClusterDetailYaml + from "@/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/FlinkKubernetesSessionClusterYaml"; +import FlinkKubernetesSessionClusterDetailStatusYaml + from "@/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML/FlinkKubernetesSessionClusterStatusYaml"; -const FlinkKubernetesSessinClusterDetailYAMLWeb: React.FC = (props: any) => { - const editorRef = useRef(null); - const monaco = useMonaco(); - const [sessionCluster, setSessionCluster] = useState() - - useEffect(() => { - // do conditional chaining - monaco?.languages.typescript.javascriptDefaults.setEagerModelSync(true); - }, [monaco]); - - useEffect(() => { - if (props.flinkKubernetesSessionClusterDetail.sessionCluster) { - const sessionCluster: WsFlinkKubernetesSessionCluster = {...props.flinkKubernetesSessionClusterDetail.sessionCluster} - sessionCluster.supportSqlGateway = null - refreshYaml(sessionCluster) - } - }, [props.flinkKubernetesSessionClusterDetail.sessionCluster]); - - const refreshYaml = (sessionCluster: WsFlinkKubernetesSessionCluster) => { - if (sessionCluster.state) { - WsFlinkKubernetesSessionClusterService.status(sessionCluster).then((response) => { - setSessionCluster(YAML.stringify(response.data)) - }) - } else { - WsFlinkKubernetesSessionClusterService.asYAML(sessionCluster).then((response) => { - setSessionCluster(YAML.stringify(response.data)) - }) - } - } - - const handleEditorDidMount = (editor, monaco: Monaco) => { - editorRef.current = editor; - } +const FlinkKubernetesSessionClusterDetailYAMLWeb: React.FC = () => { + const intl = useIntl(); return ( - + + + + + + + + + ); } -const mapModelToProps = ({flinkKubernetesSessionClusterDetail}: any) => ({flinkKubernetesSessionClusterDetail}) -export default connect(mapModelToProps)(FlinkKubernetesSessinClusterDetailYAMLWeb); +export default FlinkKubernetesSessionClusterDetailYAMLWeb; diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/index.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/index.tsx index 66a115bce..ae1991ef2 100644 --- a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/index.tsx +++ b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/index.tsx @@ -1,6 +1,6 @@ import {connect, useAccess, useIntl, useLocation} from "umi"; import React, {useEffect} from "react"; -import {PageContainer, ProDescriptions} from "@ant-design/pro-components"; +import {PageContainer, ProCard, ProDescriptions} from "@ant-design/pro-components"; import {ProDescriptionsItemProps} from "@ant-design/pro-descriptions"; import {Button, message, Popconfirm, Space, Tabs} from "antd"; import { @@ -14,7 +14,8 @@ import { } from "@ant-design/icons"; import {WsFlinkKubernetesSessionCluster} from "@/services/project/typings"; import {WsFlinkKubernetesSessionClusterService} from "@/services/project/WsFlinkKubernetesSessionClusterService"; -import FlinkKubernetesSessinClusterDetailYAMLWeb from "@/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML"; +import FlinkKubernetesSessionClusterDetailYAMLWeb + from "@/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/YAML"; import FlinkKubernetesSessinClusterDetailFlinkConfigurationWeb from "@/pages/Project/Workspace/Kubernetes/SessionCluster/Detail/Configuration"; import FlinkKubernetesSessinClusterDetailOptionsWeb @@ -52,16 +53,24 @@ const FlinkKubernetesSessionClusterDetailWeb: React.FC = (props: any) => { key: `name`, dataIndex: 'name', }, + { + title: intl.formatMessage({id: 'pages.project.flink.kubernetes.session-cluster.sessionClusterId'}), + key: `sessionClusterId`, + dataIndex: 'sessionClusterId', + }, + { + title: intl.formatMessage({id: 'pages.project.flink.kubernetes.session-cluster.image'}), + key: `image`, + dataIndex: 'image', + render: (dom, entity, index, action, schema) => { + return entity.kubernetesOptions?.image + } + }, { title: intl.formatMessage({id: 'pages.project.flink.kubernetes.session-cluster.namespace'}), key: `namespace`, dataIndex: 'namespace' }, - { - title: intl.formatMessage({id: 'app.common.data.remark'}), - key: `remark`, - dataIndex: 'remark', - }, { title: intl.formatMessage({id: 'app.common.data.createTime'}), key: `createTime`, @@ -182,22 +191,27 @@ const FlinkKubernetesSessionClusterDetailWeb: React.FC = (props: any) => { { label: intl.formatMessage({id: 'pages.project.flink.kubernetes.session-cluster.detail.tab.yaml'}), key: 'yaml', - children: + children: }, ] return ( - - - + + + + + + + + + ); } diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/index.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/index.tsx index 6c71f75d3..e62ac6306 100644 --- a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/index.tsx +++ b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/SessionCluster/index.tsx @@ -42,7 +42,7 @@ const FlinkKubernetesSessionClusterWeb: React.FC = () => { { title: intl.formatMessage({id: 'pages.project.flink.kubernetes.session-cluster.name'}), dataIndex: 'name', - width: 200, + width: '10%', }, { title: intl.formatMessage({id: 'pages.project.flink.kubernetes.session-cluster.flinkVersion'}), @@ -106,6 +106,7 @@ const FlinkKubernetesSessionClusterWeb: React.FC = () => { title: intl.formatMessage({id: 'pages.project.flink.kubernetes.session-cluster.error'}), dataIndex: 'error', hideInSearch: true, + ellipsis: true }, { title: intl.formatMessage({id: 'app.common.data.remark'}), @@ -116,13 +117,13 @@ const FlinkKubernetesSessionClusterWeb: React.FC = () => { title: intl.formatMessage({id: 'app.common.data.createTime'}), dataIndex: 'createTime', hideInSearch: true, - width: 180, + width: '8%', }, { title: intl.formatMessage({id: 'app.common.data.updateTime'}), dataIndex: 'updateTime', hideInSearch: true, - width: 180, + width: '8%', }, { title: intl.formatMessage({id: 'app.common.operate.label'}), diff --git a/scaleph-ui-react/src/services/project/typings.d.ts b/scaleph-ui-react/src/services/project/typings.d.ts index f9f187c3e..0aa638e99 100644 --- a/scaleph-ui-react/src/services/project/typings.d.ts +++ b/scaleph-ui-react/src/services/project/typings.d.ts @@ -266,6 +266,7 @@ export type WsFlinkKubernetesSessionCluster = { projectId: number; clusterCredentialId: number; name: string; + sessionClusterId: string; namespace: string; kubernetesOptions?: KubernetesOptionsVO; jobManager?: Record; From cb7606be682fac559bd6f52bbae3a15795296faa Mon Sep 17 00:00:00 2001 From: wangqi Date: Fri, 29 Dec 2023 20:51:10 +0800 Subject: [PATCH 3/4] feature: add tooltip for flink kubernetes --- .../src/locales/zh-CN/pages/project.ts | 6 ++++-- .../Deployment/Steps/New/ClusterStepForm.tsx | 12 +++++++++-- .../Workspace/Kubernetes/Deployment/index.tsx | 21 ++++--------------- .../Steps/New/ClusterStepForm.tsx | 9 ++++++++ .../Workspace/Kubernetes/Template/index.tsx | 5 ++--- 5 files changed, 29 insertions(+), 24 deletions(-) diff --git a/scaleph-ui-react/src/locales/zh-CN/pages/project.ts b/scaleph-ui-react/src/locales/zh-CN/pages/project.ts index f827c3557..eac9daf1a 100644 --- a/scaleph-ui-react/src/locales/zh-CN/pages/project.ts +++ b/scaleph-ui-react/src/locales/zh-CN/pages/project.ts @@ -822,7 +822,7 @@ export default { 'pages.project.flink.kubernetes.template.deploymentKind': '部署模式', 'pages.project.flink.kubernetes.template.namespace': 'Namespace', 'pages.project.flink.kubernetes.template.namespace.tooltip': '填写 Kubernetes Namespace', - 'pages.project.flink.kubernetes.template.flinkVersion': 'Flink 版本', + 'pages.project.flink.kubernetes.template.flinkVersion': 'Flink', 'pages.project.flink.kubernetes.template.image': '镜像', 'pages.project.flink.kubernetes.template.update': '修改模板', 'pages.project.flink.kubernetes.template.detail': '模板详情', @@ -846,6 +846,7 @@ export default { 'pages.project.flink.kubernetes.session-cluster.steps.cluster': 'Cluster & Template', 'pages.project.flink.kubernetes.session-cluster.steps.cluster.template': 'Template', 'pages.project.flink.kubernetes.session-cluster.steps.cluster.cluster': 'Cluster', + 'pages.project.flink.kubernetes.session-cluster.steps.cluster.cluster.tooltip': '选择部署的 Kubernetes', 'pages.project.flink.kubernetes.session-cluster.steps.options': 'Options', 'pages.project.flink.kubernetes.session-cluster.steps.yaml': 'YAML', 'pages.project.flink.kubernetes.session-cluster.steps.yaml.instance': '实例', @@ -869,12 +870,13 @@ export default { 'pages.project.flink.kubernetes.deployment.kind': '类型', 'pages.project.flink.kubernetes.deployment.name': '名称', 'pages.project.flink.kubernetes.deployment.type': '类型', - 'pages.project.flink.kubernetes.deployment.flinkVersion': 'Flink 版本', + 'pages.project.flink.kubernetes.deployment.flinkVersion': 'Flink', 'pages.project.flink.kubernetes.deployment.image': '镜像', 'pages.project.flink.kubernetes.deployment.namespace': 'Namespace', 'pages.project.flink.kubernetes.deployment.steps.cluster': 'Cluster & Template', 'pages.project.flink.kubernetes.deployment.steps.cluster.template': 'Template', 'pages.project.flink.kubernetes.deployment.steps.cluster.cluster': 'Cluster', + 'pages.project.flink.kubernetes.deployment.steps.cluster.cluster.tooltip': '选择部署的 Kubernetes', 'pages.project.flink.kubernetes.deployment.steps.options': 'Options', 'pages.project.flink.kubernetes.deployment.steps.yaml': 'YAML', diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Deployment/Steps/New/ClusterStepForm.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Deployment/Steps/New/ClusterStepForm.tsx index 03ae328e0..03d8057f2 100644 --- a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Deployment/Steps/New/ClusterStepForm.tsx +++ b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Deployment/Steps/New/ClusterStepForm.tsx @@ -1,12 +1,12 @@ -import {useIntl} from "umi"; +import {connect, useIntl} from "umi"; import React from "react"; import {ProCard, ProFormSelect, ProFormText, ProFormTextArea} from "@ant-design/pro-components"; +import {InfoCircleOutlined} from "@ant-design/icons"; import {WsFlinkKubernetesTemplateService} from "@/services/project/WsFlinkKubernetesTemplateService"; import {WsFlinkKubernetesTemplateParam} from "@/services/project/typings"; import {ClusterCredentialService} from "@/services/resource/clusterCredential.service"; import {ClusterCredentialListParam} from "@/services/resource/typings"; import {WORKSPACE_CONF} from "@/constants/constant"; -import {connect} from "umi"; import {DeploymentKind} from "@/constants/enum"; const DeploymentClusterStepForm: React.FC = (props: any) => { @@ -23,6 +23,10 @@ const DeploymentClusterStepForm: React.FC = (props: any) => { , + }} rules={[{required: true}]} allowClear={false} request={((params, props) => { @@ -39,6 +43,10 @@ const DeploymentClusterStepForm: React.FC = (props: any) => { , + }} rules={[{required: true}]} initialValue={"default"} /> diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Deployment/index.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Deployment/index.tsx index db9e7c99e..c153bf18b 100644 --- a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Deployment/index.tsx +++ b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Deployment/index.tsx @@ -1,7 +1,7 @@ import {history, useAccess, useIntl} from "umi"; import React, {useRef, useState} from "react"; import {Button, message, Modal, Space, Tag, Tooltip} from "antd"; -import {DeleteOutlined, EditOutlined, EyeOutlined} from "@ant-design/icons"; +import {DeleteOutlined, EditOutlined} from "@ant-design/icons"; import {ActionType, ProColumns, ProFormInstance, ProFormSelect, ProTable} from "@ant-design/pro-components"; import {WORKSPACE_CONF} from "@/constants/constant"; import {PRIVILEGE_CODE} from "@/constants/privilegeCode"; @@ -22,7 +22,7 @@ const FlinkKubernetesDeploymentWeb: React.FC = () => { { title: intl.formatMessage({id: 'pages.project.flink.kubernetes.deployment.name'}), dataIndex: 'name', - width: 200, + width: '10%', }, { title: intl.formatMessage({id: 'pages.project.flink.kubernetes.deployment.flinkVersion'}), @@ -58,19 +58,18 @@ const FlinkKubernetesDeploymentWeb: React.FC = () => { title: intl.formatMessage({id: 'app.common.data.remark'}), dataIndex: 'remark', hideInSearch: true, - width: 180, }, { title: intl.formatMessage({id: 'app.common.data.createTime'}), dataIndex: 'createTime', hideInSearch: true, - width: 180, + width: '8%', }, { title: intl.formatMessage({id: 'app.common.data.updateTime'}), dataIndex: 'updateTime', hideInSearch: true, - width: 180, + width: '8%', }, { title: intl.formatMessage({id: 'app.common.operate.label'}), @@ -93,18 +92,6 @@ const FlinkKubernetesDeploymentWeb: React.FC = () => { /> )} - {access.canAccess(PRIVILEGE_CODE.datadevJobEdit) && ( - -