[Feature][scaleph-ui-react] update flink kubernetes session cluster w…

…eb (#677) * feature: add xflow event listener * feature: update flink kubernetes session cluster * feature: add tooltip for flink kubernetes * feature: add tooltip for flink kubernetes --------- Co-authored-by: wangqi <wangqi@xinxuan.net>
flowerfine · Dec 29, 2023 · 5c14b28 · 5c14b28
1 parent d79bdbd
commit 5c14b28
Show file tree

Hide file tree

Showing 16 changed files with 235 additions and 125 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
@@ -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': '模板详情',
@@ -834,20 +834,25 @@ 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.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': '实例',
+  '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',
@@ -865,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',
 
@@ -892,7 +898,7 @@ export default {
   'pages.project.flink.kubernetes.job.state': 'Deploy State',
   'pages.project.flink.kubernetes.job.error': 'Error',
 
-  'pages.project.flink.kubernetes.job.detail': '详情',
+  'pages.project.flink.kubernetes.job.detail': '任务详情',
   'pages.project.flink.kubernetes.job.detail.deploy': 'Deploy',
   'pages.project.flink.kubernetes.job.detail.deploy.resource': 'Resource',
   'pages.project.flink.kubernetes.job.detail.deploy.resource.jobManagerCpu': 'JobManager CPU',

diff --git a/...models/project/workspace/kubernetes/sessionCluster/flinkKubernetesSessionClusterDetail.ts b/...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<StateType>;
+    updateSessionCluster: Reducer<StateType>;
   };
 }
 
@@ -25,20 +28,36 @@ 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)
+        }
+      });
     },
   },
 
   reducers: {
     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/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])
 });
diff --git a/...-ui-react/src/pages/Project/Workspace/Kubernetes/Deployment/Steps/New/ClusterStepForm.tsx b/...-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) => {
       <ProFormSelect
         name="clusterCredentialId"
         label={intl.formatMessage({id: 'pages.project.flink.kubernetes.deployment.steps.cluster.cluster'})}
+        tooltip={{
+          title: intl.formatMessage({id: 'pages.project.flink.kubernetes.deployment.steps.cluster.cluster.tooltip'}),
+          icon: <InfoCircleOutlined/>,
+        }}
         rules={[{required: true}]}
         allowClear={false}
         request={((params, props) => {
@@ -39,6 +43,10 @@ const DeploymentClusterStepForm: React.FC = (props: any) => {
       <ProFormText
         name="namespace"
         label={intl.formatMessage({id: 'pages.project.flink.kubernetes.deployment.namespace'})}
+        tooltip={{
+          title: intl.formatMessage({id: 'pages.project.flink.kubernetes.template.namespace.tooltip'}),
+          icon: <InfoCircleOutlined/>,
+        }}
         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
@@ -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 = () => {
               />
             </Tooltip>
           )}
-          {access.canAccess(PRIVILEGE_CODE.datadevJobEdit) && (
-            <Tooltip title={intl.formatMessage({id: 'pages.project.flink.kubernetes.deployment.detail'})}>
-              <Button
-                shape="default"
-                type="link"
-                icon={<EyeOutlined/>}
-                onClick={() => {
-                  history.push("/workspace/flink/kubernetes/deployment/detail", record)
-                }}
-              />
-            </Tooltip>
-          )}
           {access.canAccess(PRIVILEGE_CODE.datadevDatasourceDelete) && (
             <Tooltip title={intl.formatMessage({id: 'app.common.operate.delete.label'})}>
               <Button

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
@@ -209,12 +209,11 @@ const FlinkKubernetesJobDetailWeb: React.FC = (props: any) => {
   ]
   return (
     <div>
-      <PageContainer>
+      <PageContainer title={intl.formatMessage({id: 'pages.project.flink.kubernetes.job.detail'})}>
         <ProDescriptions
           column={3}
           dataSource={props.jobDetail.job}
           columns={descriptionColumns}
-          // extra={buttons}
         />
         <Tabs
           type="card"

diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Job/JobForm.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Kubernetes/Job/JobForm.tsx
@@ -8,7 +8,8 @@ import {
   ProFormGroup,
   ProFormRadio,
   ProFormSelect,
-  ProFormText
+  ProFormText,
+  ProFormTextArea
 } from "@ant-design/pro-components";
 import {ModalFormProps} from '@/app.d';
 import {
@@ -39,8 +40,6 @@ const FlinkKubernetesJobForm: React.FC<ModalFormProps<WsFlinkKubernetesJob>> = (
   const [form] = Form.useForm();
   const projectId = localStorage.getItem(WORKSPACE_CONF.projectId);
 
-  console.log('FlinkKubernetesJobForm', data)
-
   return (
     <Modal
       open={visible}
@@ -270,7 +269,7 @@ const FlinkKubernetesJobForm: React.FC<ModalFormProps<WsFlinkKubernetesJob>> = (
           }}
         </ProFormDependency>
 
-        <ProFormText
+        <ProFormTextArea
           name={"remark"}
           label={intl.formatMessage({id: 'app.common.data.remark'})}
         />

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
@@ -26,7 +26,8 @@ const FlinkKubernetesJobWeb: React.FC = () => {
   const tableColumns: ProColumns<WsFlinkKubernetesJob>[] = [
     {
       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 <Tooltip title={record.jobInstance?.state?.remark}>{record.jobInstance?.state?.label}</Tooltip>
@@ -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 <Tooltip title={record.jobInstance?.jobState?.value}>{record.jobInstance?.jobState?.label}</Tooltip>
@@ -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/...rkspace/Kubernetes/SessionCluster/Detail/YAML/FlinkKubernetesSessionClusterStatusYaml.tsx b/...rkspace/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 (
+    <Editor
+      width="730"
+      height="600px"
+      language="yaml"
+      theme="vs-white"
+      value={props.flinkKubernetesSessionClusterDetail.sessionClusterStatusYaml}
+      options={{
+        selectOnLineNumbers: true,
+        readOnly: true,
+        minimap: {
+          enabled: false
+        }
+      }}
+      onMount={handleEditorDidMount}
+    />
+  );
+}
+
+const mapModelToProps = ({flinkKubernetesSessionClusterDetail}: any) => ({flinkKubernetesSessionClusterDetail})
+export default connect(mapModelToProps)(FlinkKubernetesSessionClusterDetailStatusYaml);