[optimization][web] optimization Frontend code and internationalization (#1118)

* optimization Frontend code and internationalization

* optimization internationalization

* optimization internationalization code

* optimization global.less

dlink-web/src/components/Common/DTable.tsx

@@ -94,7 +94,8 @@ const DTable = (props: any) => {
       dataSource={dataSource ? (dataSource.url ? data : dataSource) : []}
       rowKey="name"
       pagination={{
-        pageSize: 10,
+        defaultPageSize: 10,
+        showSizeChanger: true,
       }}
       toolBarRender={false}
       search={false}

dlink-web/src/components/RightContent/AvatarDropdown.tsx

@@ -27,13 +27,12 @@ import {
   UserSwitchOutlined
 } from '@ant-design/icons';
 import {Avatar, Menu, Modal, Spin} from 'antd';
-import {history, useModel} from 'umi';
+import {history, useIntl, useModel} from 'umi';
 import {stringify} from 'querystring';
 import HeaderDropdown from '../HeaderDropdown';
 import styles from './index.less';
 import {outLogin} from '@/services/ant-design-pro/api';
 import {ActionType} from "@ant-design/pro-table";
-import {useIntl} from "@@/plugin-locale/localeExports";
 
 export type GlobalHeaderRightProps = {
   menu?: boolean;
@@ -64,7 +63,9 @@ const requestUrl = '/api/tenant/switchTenant';
 const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({menu}) => {
   const {initialState, setInitialState} = useModel('@@initialState');
   const actionRef = useRef<ActionType>();
-  const intl = useIntl();
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
 
   const onMenuClick = useCallback(
     (event: {
@@ -124,10 +125,10 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({menu}) => {
               // get choose tenantId
               let tenantInfoId = e.key;
               Modal.confirm({
-                title: intl.formatMessage({id: 'menu.account.checkTenant'}),
-                content: '确定切换【' + title + '】租户吗?',
-                okText: intl.formatMessage({id: 'button.confirm'}),
-                cancelText: intl.formatMessage({id: 'button.cancel'}),
+                title: l('menu.account.checkTenant'),
+                content: l('menu.account.checkTenantConfirm'),
+                okText: l('button.confirm'),
+                cancelText: l('button.cancel'),
                 onOk: async () => {
                   // 目前先直接退出登录 重新选择租户登录
                   loginOut();
@@ -153,7 +154,7 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({menu}) => {
     return <>
       <Menu.SubMenu
         key="chooseTenantList"
-        title={intl.formatMessage({id: 'menu.account.checkTenant'})}
+        title={l('menu.account.checkTenant')}
         icon={<UserSwitchOutlined/>}
       >
         {chooseTenantList}
@@ -170,19 +171,19 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({menu}) => {
       {menu && (
         <Menu.Item key="personSettings" disabled>
           <SettingOutlined/>
-          {intl.formatMessage({id: 'menu.account.settings'})}
+          {l('menu.account.settings')}
         </Menu.Item>
       )}
       {menu && (
         <Menu.Item key="changePassWord" disabled>
           <SafetyOutlined/>
-          {intl.formatMessage({id: 'menu.account.changePassword'})}
+          {l('menu.account.changePassword')}
         </Menu.Item>
       )}
       {menu && <Menu.Divider/>}
       <Menu.Item key="logout">
         <LogoutOutlined/>
-        {intl.formatMessage({id: 'menu.account.logout'})}
+        {l('menu.account.logout')}
       </Menu.Item>
     </Menu>
   );

dlink-web/src/components/Studio/StudioConsole/StudioFX/index.tsx

@@ -18,15 +18,15 @@
  */
 
 
-import { Input, Drawer, Modal} from 'antd';
-import React, {useState, useRef} from 'react';
-import type {ProColumns, ActionType} from '@ant-design/pro-table';
+import {Drawer, Input} from 'antd';
+import React, {useRef, useState} from 'react';
+import type {ActionType, ProColumns} from '@ant-design/pro-table';
 import ProTable from '@ant-design/pro-table';
 import ProDescriptions from '@ant-design/pro-descriptions';
 
 import type {DocumentTableListItem} from '@/pages/Document/data.d';
 
-import { queryData,} from "@/components/Common/crud";
+import {queryData,} from "@/components/Common/crud";
 
 const url = '/api/document';
 
@@ -38,7 +38,7 @@ const StudioFX = () => {
       title: '函数',
       dataIndex: 'name',
       sorter: true,
-      width:'400px',
+      width: '400px',
       render: (dom, entity) => {
         return <a onClick={() => setRow(entity)}>{dom}</a>;
       },
@@ -65,7 +65,7 @@ const StudioFX = () => {
       ],
       filterMultiple: false,
       valueEnum: {
-        'function': { text: '函数'},
+        'function': {text: '函数'},
       },
     },
     {
@@ -87,8 +87,8 @@ const StudioFX = () => {
       ],
       filterMultiple: false,
       valueEnum: {
-        '内置函数': { text: '内置函数'},
-        'UDF': { text: 'UDF'},
+        '内置函数': {text: '内置函数'},
+        'UDF': {text: 'UDF'},
       },
     },
     {
@@ -106,68 +106,68 @@ const StudioFX = () => {
         {
           text: '逻辑函数',
           value: '逻辑函数',
-        },{
+        }, {
           text: '算术函数',
           value: '算术函数',
-        },{
+        }, {
           text: '字符串函数',
           value: '字符串函数',
-        },{
+        }, {
           text: '时间函数',
           value: '时间函数',
-        },{
+        }, {
           text: '条件函数',
           value: '条件函数',
-        },{
+        }, {
           text: '类型转换函数',
           value: '类型转换函数',
-        },{
+        }, {
           text: 'Collection 函数',
           value: 'Collection 函数',
-        },{
+        }, {
           text: 'Value Collection 函数',
           value: 'Value Collection 函数',
-        },{
+        }, {
           text: 'Value Access 函数',
           value: 'Value Access 函数',
-        },{
+        }, {
           text: '分组函数',
           value: '分组函数',
-        },{
+        }, {
           text: 'hash函数',
           value: 'hash函数',
-        },{
+        }, {
           text: '聚合函数',
           value: '聚合函数',
-        },{
+        }, {
           text: '列函数',
           value: '列函数',
-        },{
+        }, {
           text: '表值聚合函数',
           value: '表值聚合函数',
-        },{
+        }, {
           text: '其他函数',
           value: '其他函数',
         },
       ],
       filterMultiple: false,
       valueEnum: {
-        '比较函数': { text: '比较函数'},
-        '逻辑函数': { text: '逻辑函数'},
-        '算术函数': { text: '算术函数'},
-        '字符串函数': { text: '字符串函数'},
-        '时间函数': { text: '时间函数'},
-        '条件函数': { text: '条件函数'},
-        '类型转换函数': { text: '类型转换函数'},
-        'Collection 函数': { text: 'Collection 函数'},
-        'Value Collection 函数': { text: 'Value Collection 函数'},
-        'Value Access 函数': { text: 'Value Access 函数'},
-        '分组函数': { text: '分组函数'},
-        'hash函数': { text: 'hash函数'},
-        '聚合函数': { text: '聚合函数'},
-        '列函数': { text: '列函数'},
-        '表值聚合函数': { text: '表值聚合函数'},
-        '其他函数': { text: '其他函数'},
+        '比较函数': {text: '比较函数'},
+        '逻辑函数': {text: '逻辑函数'},
+        '算术函数': {text: '算术函数'},
+        '字符串函数': {text: '字符串函数'},
+        '时间函数': {text: '时间函数'},
+        '条件函数': {text: '条件函数'},
+        '类型转换函数': {text: '类型转换函数'},
+        'Collection 函数': {text: 'Collection 函数'},
+        'Value Collection 函数': {text: 'Value Collection 函数'},
+        'Value Access 函数': {text: 'Value Access 函数'},
+        '分组函数': {text: '分组函数'},
+        'hash函数': {text: 'hash函数'},
+        '聚合函数': {text: '聚合函数'},
+        '列函数': {text: '列函数'},
+        '表值聚合函数': {text: '表值聚合函数'},
+        '其他函数': {text: '其他函数'},
       },
     },
     {
@@ -178,7 +178,7 @@ const StudioFX = () => {
       hideInForm: false,
       hideInSearch: false,
       hideInTable: false,
-      width:'400px',
+      width: '400px',
     },
     {
       title: '版本',
@@ -214,8 +214,8 @@ const StudioFX = () => {
       ],
       filterMultiple: false,
       valueEnum: {
-        true: { text: '已启用', status: 'Success' },
-        false: { text: '已禁用', status: 'Error' },
+        true: {text: '已启用', status: 'Success'},
+        false: {text: '已禁用', status: 'Error'},
       },
     },
     {
@@ -224,15 +224,15 @@ const StudioFX = () => {
       sorter: true,
       valueType: 'dateTime',
       hideInForm: true,
-      hideInTable:true,
-      hideInSearch:true,
-      renderFormItem: (item, { defaultRender, ...rest }, form) => {
+      hideInTable: true,
+      hideInSearch: true,
+      renderFormItem: (item, {defaultRender, ...rest}, form) => {
         const status = form.getFieldValue('status');
         if (`${status}` === '0') {
           return false;
         }
         if (`${status}` === '3') {
-          return <Input {...rest} placeholder="请输入异常原因！" />;
+          return <Input {...rest} placeholder="请输入异常原因！"/>;
         }
         return defaultRender(item);
       },
@@ -243,15 +243,15 @@ const StudioFX = () => {
       sorter: true,
       valueType: 'dateTime',
       hideInForm: true,
-      hideInTable:true,
-      hideInSearch:true,
-      renderFormItem: (item, { defaultRender, ...rest }, form) => {
+      hideInTable: true,
+      hideInSearch: true,
+      renderFormItem: (item, {defaultRender, ...rest}, form) => {
         const status = form.getFieldValue('status');
         if (`${status}` === '0') {
           return false;
         }
         if (`${status}` === '3') {
-          return <Input {...rest} placeholder="请输入异常原因！" />;
+          return <Input {...rest} placeholder="请输入异常原因！"/>;
         }
         return defaultRender(item);
       },
@@ -265,33 +265,37 @@ const StudioFX = () => {
         actionRef={actionRef}
         rowKey="id"
         search={{
-        labelWidth: 120,
-      }}
-        request={(params, sorter, filter) => queryData(url,{...params, sorter, filter})}
+          labelWidth: 120,
+        }}
+        request={(params, sorter, filter) => queryData(url, {...params, sorter, filter})}
         columns={columns}
-        />
-        <Drawer
-          width={600}
-          visible={!!row}
-          onClose={() => {
-            setRow(undefined);
-          }}
-          closable={false}
-        >
-          {row?.name && (
-            <ProDescriptions<DocumentTableListItem>
-              column={2}
-              title={row?.name}
-              request={async () => ({
+        pagination={{
+          defaultPageSize: 5,
+          showSizeChanger: true,
+        }}
+      />
+      <Drawer
+        width={600}
+        visible={!!row}
+        onClose={() => {
+          setRow(undefined);
+        }}
+        closable={false}
+      >
+        {row?.name && (
+          <ProDescriptions<DocumentTableListItem>
+            column={2}
+            title={row?.name}
+            request={async () => ({
               data: row || {},
             })}
-              params={{
+            params={{
               id: row?.name,
             }}
-              columns={columns}
-              />
-              )}
-        </Drawer>
+            columns={columns}
+          />
+        )}
+      </Drawer>
     </>);
 };
 

dlink-web/src/components/Studio/StudioConsole/StudioHistory/index.tsx

@@ -113,7 +113,8 @@ const StudioHistory = (props: any) => {
         headerTitle="执行历史"
         request={(params, sorter, filter) => queryData(url, {...params, sorter: {id: 'descend'}, filter})}
         pagination={{
-          pageSize: 5,
+          defaultPageSize: 5,
+          showSizeChanger: true,
         }}
         showActions="hover"
         metas={{

dlink-web/src/components/Studio/StudioConsole/StudioProcess/index.tsx

@@ -38,19 +38,19 @@ const StudioProcess = (props: any) => {
 
   const savepoint = (key: string | number, currentItem: {}) => {
     Modal.confirm({
-      title: key+'任务',
+      title: key + '任务',
       content: `确定${key}该作业吗？`,
       okText: '确认',
       cancelText: '取消',
       onOk: async () => {
         if (!clusterId) return;
-        let res = savepointJob(clusterId, currentItem.jid,key,key,0);
+        let res = savepointJob(clusterId, currentItem.jid, key, key, 0);
         res.then((result) => {
           if (result.datas == true) {
-            message.success(key+"成功");
+            message.success(key + "成功");
             onRefreshJobs();
           } else {
-            message.error(key+"失败");
+            message.error(key + "失败");
           }
         });
       }
@@ -119,16 +119,25 @@ const StudioProcess = (props: any) => {
       sorter: true,
       render: (_, row) => {
         return (<>
-            {row.tasks.total>0?(<Tooltip title="TOTAL"><Tag color="#666">{row.tasks.total}</Tag></Tooltip>):''}
-            {row.tasks.created>0?(<Tooltip title="CREATED"><Tag color="#666">{row.tasks.created}</Tag></Tooltip>):''}
-            {row.tasks.deploying>0?(<Tooltip title="DEPLOYING"><Tag color="#666">{row.tasks.deploying}</Tag></Tooltip>):''}
-            {row.tasks.running>0?(<Tooltip title="RUNNING"><Tag color="#44b549">{row.tasks.running}</Tag></Tooltip>):''}
-            {row.tasks.failed>0?(<Tooltip title="FAILED"><Tag color="#ff4d4f">{row.tasks.failed}</Tag></Tooltip>):''}
-            {row.tasks.finished>0?(<Tooltip title="FINISHED"><Tag color="#108ee9">{row.tasks.finished}</Tag></Tooltip>):''}
-            {row.tasks.reconciling>0?(<Tooltip title="RECONCILING"><Tag color="#666">{row.tasks.reconciling}</Tag></Tooltip>):''}
-            {row.tasks.scheduled>0?(<Tooltip title="SCHEDULED"><Tag color="#666">{row.tasks.scheduled}</Tag></Tooltip>):''}
-            {row.tasks.canceling>0?(<Tooltip title="CANCELING"><Tag color="#feb72b">{row.tasks.canceling}</Tag></Tooltip>):''}
-            {row.tasks.canceled>0?(<Tooltip title="CANCELED"><Tag color="#db970f">{row.tasks.canceled}</Tag></Tooltip>):''}
+            {row.tasks.total > 0 ? (<Tooltip title="TOTAL"><Tag color="#666">{row.tasks.total}</Tag></Tooltip>) : ''}
+            {row.tasks.created > 0 ? (
+              <Tooltip title="CREATED"><Tag color="#666">{row.tasks.created}</Tag></Tooltip>) : ''}
+            {row.tasks.deploying > 0 ? (
+              <Tooltip title="DEPLOYING"><Tag color="#666">{row.tasks.deploying}</Tag></Tooltip>) : ''}
+            {row.tasks.running > 0 ? (
+              <Tooltip title="RUNNING"><Tag color="#44b549">{row.tasks.running}</Tag></Tooltip>) : ''}
+            {row.tasks.failed > 0 ? (
+              <Tooltip title="FAILED"><Tag color="#ff4d4f">{row.tasks.failed}</Tag></Tooltip>) : ''}
+            {row.tasks.finished > 0 ? (
+              <Tooltip title="FINISHED"><Tag color="#108ee9">{row.tasks.finished}</Tag></Tooltip>) : ''}
+            {row.tasks.reconciling > 0 ? (
+              <Tooltip title="RECONCILING"><Tag color="#666">{row.tasks.reconciling}</Tag></Tooltip>) : ''}
+            {row.tasks.scheduled > 0 ? (
+              <Tooltip title="SCHEDULED"><Tag color="#666">{row.tasks.scheduled}</Tag></Tooltip>) : ''}
+            {row.tasks.canceling > 0 ? (
+              <Tooltip title="CANCELING"><Tag color="#feb72b">{row.tasks.canceling}</Tag></Tooltip>) : ''}
+            {row.tasks.canceled > 0 ? (
+              <Tooltip title="CANCELED"><Tag color="#db970f">{row.tasks.canceled}</Tag></Tooltip>) : ''}
           </>
         )
       }
@@ -144,7 +153,7 @@ const StudioProcess = (props: any) => {
         >
           详情
         </a>];
-        if(record.state=='RUNNING'||record.state=='RECONCILING'||record.state=='SCHEDULED'){
+        if (record.state == 'RUNNING' || record.state == 'RECONCILING' || record.state == 'SCHEDULED') {
           option.push(<Divider type="vertical"/>);
           option.push(<a
             onClick={() => {
@@ -161,7 +170,7 @@ const StudioProcess = (props: any) => {
     return columns;
   };
 
-  const onCancel = (jobId:string)=>{
+  const onCancel = (jobId: string) => {
     Modal.confirm({
       title: `确认停止作业【${jobId}】？`,
       okText: '停止',
@@ -184,7 +193,8 @@ const StudioProcess = (props: any) => {
   const getClusterOptions = () => {
     let itemList = [];
     for (let item of cluster) {
-      let tag = (<><Tag color={item.enabled ? "processing" : "error"}>{item.type}</Tag>{item.alias === "" ? item.name : item.alias}</>);
+      let tag = (<><Tag
+        color={item.enabled ? "processing" : "error"}>{item.type}</Tag>{item.alias === "" ? item.name : item.alias}</>);
       itemList.push(<Option value={item.id} label={tag}>
         {tag}
       </Option>)
@@ -197,14 +207,14 @@ const StudioProcess = (props: any) => {
     onRefreshJobs();
   };
 
-  const onRefreshJobs = ()=>{
-    if(!clusterId) return;
+  const onRefreshJobs = () => {
+    if (!clusterId) return;
     let res = showFlinkJobs(clusterId);
     res.then((result) => {
-      for(let i in result.datas){
-        result.datas[i].duration = result.datas[i].duration*0.001;
-        if(result.datas[i]['end-time']==-1){
-          result.datas[i]['end-time']=null;
+      for (let i in result.datas) {
+        result.datas[i].duration = result.datas[i].duration * 0.001;
+        if (result.datas[i]['end-time'] == -1) {
+          result.datas[i]['end-time'] = null;
         }
       }
       setJobsData(result.datas);
@@ -222,12 +232,13 @@ const StudioProcess = (props: any) => {
         >
           {getClusterOptions()}
         </Select>
-        <Button type="primary" icon={<SearchOutlined />} onClick={onRefreshJobs} />
+        <Button type="primary" icon={<SearchOutlined/>} onClick={onRefreshJobs}/>
       </Space>
       {jobsData.length > 0 ?
         (<ProTable dataSource={jobsData} columns={getColumns()} size="small" search={false} toolBarRender={false}
                    pagination={{
-                     pageSize: 5,
+                     defaultPageSize: 5,
+                     showSizeChanger: true,
                    }}
         />) : (<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>)}
     </div>

dlink-web/src/components/Studio/StudioLeftTool/StudioConnector/index.tsx

@@ -18,38 +18,36 @@
  */
 
 
-import {
-  message, Input, Button, Space, Table, Dropdown, Menu, Empty, Divider,
-  Tooltip
-} from "antd";
+import {Button, Divider, Dropdown, Empty, Input, Menu, message, Space, Table, Tooltip} from "antd";
 import {StateType} from "@/pages/DataStudio/model";
 import {connect} from "umi";
-import {useState} from "react";
-import styles from "./index.less";
+import React, {useState} from "react";
 import {
-  SearchOutlined,
-  ReloadOutlined,
-  DownOutlined,
-  DeleteOutlined,
   CommentOutlined,
+  DeleteOutlined,
+  DownOutlined,
+  PlusOutlined,
   PoweroffOutlined,
-  PlusOutlined
+  ReloadOutlined,
+  SearchOutlined
 } from '@ant-design/icons';
-import React from "react";
 import {
-  removeTable, showTables, clearSession, changeSession, quitSession,
-  createSession, listSession
+  changeSession,
+  clearSession,
+  createSession,
+  listSession,
+  quitSession,
+  removeTable,
+  showTables
 } from "@/components/Studio/StudioEvent/DDL";
-import {
-  ModalForm,
-} from '@ant-design/pro-form';
+import {ModalForm,} from '@ant-design/pro-form';
 import ProDescriptions from '@ant-design/pro-descriptions';
 import SessionForm from "@/components/Studio/StudioLeftTool/StudioConnector/components/SessionForm";
-import { Scrollbars } from 'react-custom-scrollbars';
+import {Scrollbars} from 'react-custom-scrollbars';
 
 const StudioConnector = (props: any) => {
 
-  const {current,toolHeight, dispatch, currentSession, session} = props;
+  const {current, toolHeight, dispatch, currentSession, session} = props;
   const [tableData, setTableData] = useState<[]>([]);
   const [loadings, setLoadings] = useState<boolean[]>([]);
   const [searchText, setSearchText] = useState<string>('');
@@ -281,86 +279,92 @@ const StudioConnector = (props: any) => {
           onClick={createSessions}
         />
       </Tooltip>
-        {session.length > 0 ? (
-          <Tooltip title="切换会话">
+      {session.length > 0 ? (
+        <Tooltip title="切换会话">
+          <Button
+            type="text"
+            icon={<CommentOutlined/>}
+            onClick={showSessions}
+          />
+        </Tooltip>
+      ) : ''}
+      {currentSession.session && (
+        <>
+          <Tooltip title="退出会话">
+            <Button
+              type="text"
+              icon={<PoweroffOutlined/>}
+              onClick={quitSessions}
+            />
+          </Tooltip>
+          <Tooltip title="刷新连接器">
             <Button
               type="text"
-              icon={<CommentOutlined/>}
-              onClick={showSessions}
+              icon={<ReloadOutlined/>}
+              onClick={getTables}
             />
           </Tooltip>
-        ) : ''}
-        {currentSession.session && (
-          <>
-            <Tooltip title="退出会话">
-              <Button
-                type="text"
-                icon={<PoweroffOutlined/>}
-                onClick={quitSessions}
-              />
-            </Tooltip>
-            <Tooltip title="刷新连接器">
-              <Button
-                type="text"
-                icon={<ReloadOutlined/>}
-                onClick={getTables}
-              />
-            </Tooltip>
-            <Tooltip title="注销会话">
-              <Button
-                type="text"
-                icon={<DeleteOutlined/>}
-                onClick={onClearSession}
-              />
-            </Tooltip>
-          </>)}
+          <Tooltip title="注销会话">
+            <Button
+              type="text"
+              icon={<DeleteOutlined/>}
+              onClick={onClearSession}
+            />
+          </Tooltip>
+        </>)}
       <Scrollbars style={{height: (toolHeight - 32)}}>
-      {currentSession.connectors && currentSession.connectors.length > 0 ? (
-        <Table dataSource={currentSession.connectors} columns={getColumns()} size="small"/>) : (
-        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>)}
-      <ModalForm
-        visible={modalVisit}
-        onFinish={async () => {
-          setSessionData(undefined);
-        }}
-        onVisibleChange={setModalVisit}
-        submitter={{
-          submitButtonProps: {
-            style: {
-              display: 'none',
+        {currentSession.connectors && currentSession.connectors.length > 0 ? (
+          <Table
+            dataSource={currentSession.connectors}
+            pagination={{
+              defaultPageSize: 10,
+              showSizeChanger: true,
+            }}
+            columns={getColumns()} size="small"/>) : (
+          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>)}
+        <ModalForm
+          visible={modalVisit}
+          onFinish={async () => {
+            setSessionData(undefined);
+          }}
+          onVisibleChange={setModalVisit}
+          submitter={{
+            submitButtonProps: {
+              style: {
+                display: 'none',
+              },
             },
-          },
-        }}
-      >
-        {type == 1 &&
-        (<ProDescriptions
-            column={2}
-            title='全部共享会话'
-          >
-            <ProDescriptions.Item span={2}>
-              {session.length > 0 ?
-                (<Table dataSource={session} columns={getSessionsColumns()} size="small"
-                />) : (<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>)}
-            </ProDescriptions.Item>
-          </ProDescriptions>
-        )
-        }
-      </ModalForm>
-      <SessionForm
-        onSubmit={async (value) => {
-          createSession(value, dispatch);
-          handleCreateSessionModalVisible(false);
-        }}
-        onCancel={() => {
-          handleCreateSessionModalVisible(false);
-        }}
-        updateModalVisible={createSessionModalVisible}
-        values={{
-          session: '',
-          type: 'PUBLIC',
-          useRemote: true,
-        }}
-      />
+          }}
+        >
+          {type == 1 &&
+            (<ProDescriptions
+                column={2}
+                title='全部共享会话'
+              >
+                <ProDescriptions.Item span={2}>
+                  {session.length > 0 ?
+                    (<Table dataSource={session} columns={getSessionsColumns()} size="small"
+                    />) : (<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>)}
+                </ProDescriptions.Item>
+              </ProDescriptions>
+            )
+          }
+        </ModalForm>
+        <SessionForm
+          onSubmit={async (value) => {
+            createSession(value, dispatch);
+            handleCreateSessionModalVisible(false);
+          }}
+          onCancel={() => {
+            handleCreateSessionModalVisible(false);
+          }}
+          updateModalVisible={createSessionModalVisible}
+          values={{
+            session: '',
+            type: 'PUBLIC',
+            useRemote: true,
+          }}
+        />
       </Scrollbars>
     </>
   );

dlink-web/src/components/Studio/StudioLeftTool/StudioDataBase/index.tsx

@@ -18,28 +18,20 @@
  */
 
 
-import {
-  message, Button, Table, Empty, Divider,
-  Tooltip, Drawer, Modal
-} from "antd";
+import {Button, Drawer, Empty, Modal, Table, Tooltip} from "antd";
 import {StateType} from "@/pages/DataStudio/model";
 import {connect} from "umi";
-import {useState} from "react";
-import styles from "./index.less";
-import {
-  ReloadOutlined,
-  PlusOutlined
-} from '@ant-design/icons';
-import React from "react";
+import React, {useState} from "react";
+import {PlusOutlined, ReloadOutlined} from '@ant-design/icons';
 import {showDataBase} from "../../StudioEvent/DDL";
 import DBForm from "@/pages/DataBase/components/DBForm";
-import { Scrollbars } from 'react-custom-scrollbars';
+import {Scrollbars} from 'react-custom-scrollbars';
 import ProDescriptions from "@ant-design/pro-descriptions";
 import {handleRemove} from "@/components/Common/crud";
 
 const StudioDataBase = (props: any) => {
 
-  const {database,toolHeight, dispatch} = props;
+  const {database, toolHeight, dispatch} = props;
   const [chooseDBModalVisible, handleDBFormModalVisible] = useState<boolean>(false);
   const [values, setValues] = useState<any>({});
   const [row, setRow] = useState<{}>();
@@ -61,7 +53,7 @@ const StudioDataBase = (props: any) => {
       title: "ID",
       dataIndex: "id",
       key: "id",
-    },{
+    }, {
       title: "数据源名",
       dataIndex: "alias",
     }, {
@@ -87,7 +79,7 @@ const StudioDataBase = (props: any) => {
           {
             text: '备份',
             value: '备份',
-          },{
+          }, {
             text: '其他',
             value: '其他',
           },
@@ -161,11 +153,11 @@ const StudioDataBase = (props: any) => {
         title: '最近的健康时间',
         dataIndex: 'healthTime',
         valueType: 'dateTime',
-      },{
+      }, {
         title: '最近的心跳检测时间',
         dataIndex: 'heartbeatTime',
         valueType: 'dateTime',
-      },{
+      }, {
         title: '创建时间',
         dataIndex: 'createTime',
         valueType: 'dateTime',
@@ -180,7 +172,7 @@ const StudioDataBase = (props: any) => {
         dataIndex: 'option',
         valueType: 'option',
         render: (_, record) => [
-          <Button  type="dashed" onClick={() => onModifyDataBase(record)}>
+          <Button type="dashed" onClick={() => onModifyDataBase(record)}>
             配置
           </Button>, <Button danger onClick={() => onDeleteDataBase(record)}>
             删除
@@ -234,21 +226,28 @@ const StudioDataBase = (props: any) => {
         />
       </Tooltip>
       <Scrollbars style={{height: (toolHeight - 32)}}>
-      {database.length > 0 ? (
-        <Table dataSource={database} columns={getColumns()} size="small"/>) : (
-        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>)}
-      <DBForm
-        onCancel={() => {
-          handleDBFormModalVisible(false);
-          setValues({});
-        }}
-        modalVisible={chooseDBModalVisible}
-        onSubmit={() => {
-          setRow({});
-          onRefreshDataBase();
-        }}
-        values={values}
-      />
+        {database.length > 0 ? (
+          <Table
+            dataSource={database}
+            columns={getColumns()}
+            pagination={{
+              defaultPageSize: 10,
+              showSizeChanger: true,
+            }}
+            size="small"/>) : (
+          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>)}
+        <DBForm
+          onCancel={() => {
+            handleDBFormModalVisible(false);
+            setValues({});
+          }}
+          modalVisible={chooseDBModalVisible}
+          onSubmit={() => {
+            setRow({});
+            onRefreshDataBase();
+          }}
+          values={values}
+        />
         <Drawer
           width={600}
           visible={!!row?.id}

dlink-web/src/components/Studio/StudioLeftTool/StudioFragment/index.tsx

@@ -29,10 +29,10 @@ const StudioFragment = (props: any) => {
   const {toolHeight, dispatch} = props;
   const [row, setRow] = useState<{}>();
 
-  const url ="/api/fragment"
+  const url = "/api/fragment"
 
 
-  const getColumns : ProColumns<FragmentVariableTableListItem>[] =  [
+  const getColumns: ProColumns<FragmentVariableTableListItem>[] = [
     {
       title: '名称',
       dataIndex: 'name',
@@ -44,11 +44,11 @@ const StudioFragment = (props: any) => {
     },
     {
       title: '引用名称',
-      copyable : true,
+      copyable: true,
       render: (dom, entity) => {
         return <>
-          ${"{"+ entity?.name +"}"}
-        </> ;
+          ${"{" + entity?.name + "}"}
+        </>;
       },
     },
     {
@@ -137,11 +137,12 @@ const StudioFragment = (props: any) => {
         style={{width: '100%'}}
         request={(params, sorter, filter) => queryData(url, {params, sorter, filter})}
         pagination={{
-          showLessItems:false,
-          pageSize: 10,
+          defaultPageSize: 10,
+          showSizeChanger: true,
         }}
         search={false}
         size="small"
+
       />
       <Drawer
         width={600}

dlink-web/src/global.less

@@ -17,7 +17,6 @@
  *
  */
 
-
 @import '~antd/es/style/themes/default.less';
 
 html,
@@ -33,6 +32,7 @@ body,
 .ant-layout {
   min-height: 100vh;
 }
+
 .ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed {
   left: unset;
 }
@@ -56,11 +56,13 @@ ol {
   .ant-table {
     width: 100%;
     overflow-x: auto;
+
     &-thead > tr,
     &-tbody > tr {
       > th,
       > td {
         white-space: pre;
+
         > span {
           display: block;
         }
@@ -79,13 +81,13 @@ ol {
 .ant-pro-basicLayout-content {
   position: relative;
   margin: 24px;
-  margin-bottom: 0!important;
+  margin-bottom: 0 !important;
 }
 
 //div .ant-pro-card-body {
 //  padding: 2px;
 //}
-div .ant-pro-page-container{
+div .ant-pro-page-container {
   padding-top: 0px;
 }
 
@@ -93,10 +95,10 @@ div .ant-page-header {
   padding-top: 0px;
 }
 
-div .ant-pro-page-container-children-content{
-  padding-top: 0px;
+div .ant-pro-page-container-children-content {
+  padding-top: 3px;
 }
 
 .ant-tabs-top > .ant-tabs-nav, .ant-tabs-bottom > .ant-tabs-nav, .ant-tabs-top > div > .ant-tabs-nav, .ant-tabs-bottom > div > .ant-tabs-nav {
-  margin: 0 0 0px 0!important;
+  margin: 0 0 0px 0 !important;
 }

dlink-web/src/locales/en-US/button.ts

@@ -36,6 +36,9 @@ export default {
   'button.changePassword': 'Change Password',
   'button.enable': 'Enable',
   'button.disable': 'Disable',
+  'button.reset': 'Reset',
+  'button.search': 'Search',
+
 
   'tips.selected': 'Selected',
   'tips.notSelected': 'Not Select',

dlink-web/src/locales/en-US/menu.ts

@@ -70,6 +70,7 @@ export default {
   'menu.account.settings': 'Account Settings',
   'menu.account.changePassword': 'Change Password',
   'menu.account.checkTenant': 'Check Tenant',
+  'menu.account.checkTenantConfirm': 'Are you sure you want to switch the selected tenant？',
   'menu.account.logout': 'Logout',
 
 

dlink-web/src/locales/en-US/pages.ts

+/*
+ *
+ *  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
+ *
+ *     http://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.
+ *
+ */
+
 export default {
   'pages.layouts.userLayout.title': 'Dinky Real-time Computing Platform',
 
@@ -203,58 +222,67 @@ export default {
   'pages.role.disable': 'Disable Role',
   'pages.role.disableConfirm': 'Are you sure you want to disable this Role？',
 
+  // registration center pages
+  'pages.register.alert.group': '',
+  'pages.register.alert.instance': '',
+
+  'pages.register.database': '',
+  'pages.register.jar': '',
+  'pages.register.1': '',
+  'pages.register.2': '',
+
 
-  'pages.regist.openAPI': 'openAPI Document',
+  'pages.regist.openAPI': 'OpenAPI Document',
   'pages.regist.BusinessComponent': 'Business Component Document',
 
-  'pages.matedata.NoDatabaseSelected' : 'No database selected',
-  'pages.matedata.Application' : 'Application',
-  'pages.matedata.TableInfo' : 'Table Info',
-  'pages.matedata.Description' : 'Description',
-  'pages.matedata.DataSerch' : 'Data Serch',
-  'pages.matedata.GenerateSQL' : 'Generate SQL',
-  'pages.matedata.FieldInformation' : 'Field information',
+  'pages.matedata.NoDatabaseSelected': 'No database selected',
+  'pages.matedata.Application': 'Application',
+  'pages.matedata.TableInfo': 'Table Info',
+  'pages.matedata.Description': 'Description',
+  'pages.matedata.DataSerch': 'Data Serch',
+  'pages.matedata.GenerateSQL': 'Generate SQL',
+  'pages.matedata.FieldInformation': 'Field information',
 
-  'pages.TableData.QueryConditions' : 'Query Conditions',
-  'pages.TableData.sorting' : 'Sorting',
-  'pages.TableData.data' : 'Data',
-  'pages.TableData.serch' : 'Serch',
+  'pages.TableData.QueryConditions': 'Query Conditions',
+  'pages.TableData.sorting': 'Sorting',
+  'pages.TableData.data': 'Data',
+  'pages.TableData.serch': 'Serch',
 
-  'pages.datastadio.lable.info' : 'Info',
-  'pages.datastadio.lable.result' : 'Result',
-  'pages.datastadio.lable.bloodsource' : 'Blood Source',
-  'pages.datastadio.lable.process' : 'Process',
-  'pages.datastadio.lable.history' : 'History',
-  'pages.datastadio.lable.function' : 'Function',
+  'pages.datastadio.lable.info': 'Info',
+  'pages.datastadio.lable.result': 'Result',
+  'pages.datastadio.lable.bloodsource': 'Blood Source',
+  'pages.datastadio.lable.process': 'Process',
+  'pages.datastadio.lable.history': 'History',
+  'pages.datastadio.lable.function': 'Function',
 
-  'pages.datastadio.lable.directory' : 'Directory',
-  'pages.datastadio.lable.structure' : 'Structure',
-  'pages.datastadio.lable.session' : 'Session',
-  'pages.datastadio.lable.cluster' : 'Cluster',
-  'pages.datastadio.lable.datasource' : 'Data Source',
-  'pages.datastadio.lable.mate' : 'Mate Data',
-  'pages.datastadio.lable.globalvariable' : 'Global Variable',
-  'pages.datastadio.lable.guidepage' : 'Guide Page',
+  'pages.datastadio.lable.directory': 'Directory',
+  'pages.datastadio.lable.structure': 'Structure',
+  'pages.datastadio.lable.session': 'Session',
+  'pages.datastadio.lable.cluster': 'Cluster',
+  'pages.datastadio.lable.datasource': 'Data Source',
+  'pages.datastadio.lable.mate': 'Mate Data',
+  'pages.datastadio.lable.globalvariable': 'Global Variable',
+  'pages.datastadio.lable.guidepage': 'Guide Page',
 
-  'pages.datastadio.lable.registcluster' : 'Regist Cluster',
-  'pages.datastadio.lable.registclusterconfig' : 'Regist Cluster Config',
-  'pages.datastadio.lable.registjar' : 'Regist Jar',
-  'pages.datastadio.lable.registdatasource' : 'Regist Datasource',
-  'pages.datastadio.lable.registdocument' : 'Regist Document',
-  'pages.datastadio.lable.configsystemconfig' : 'Config System Config',
-  'pages.datastadio.lable.officialdocumentation' : 'Official Documentation',
-  'pages.datastadio.lable.quickguide' : 'Quick Guide',
+  'pages.datastadio.lable.registcluster': 'Regist Cluster',
+  'pages.datastadio.lable.registclusterconfig': 'Regist Cluster Config',
+  'pages.datastadio.lable.registjar': 'Regist Jar',
+  'pages.datastadio.lable.registdatasource': 'Regist Datasource',
+  'pages.datastadio.lable.registdocument': 'Regist Document',
+  'pages.datastadio.lable.configsystemconfig': 'Config System Config',
+  'pages.datastadio.lable.officialdocumentation': 'Official Documentation',
+  'pages.datastadio.lable.quickguide': 'Quick Guide',
 
-  'pages.datastadio.lable.welcomeuse' : 'Welcome to Use Dinky v',
-  'pages.datastadio.lable.dinkydescribe' : 'Real Time is the Future,Dinky is the best partner of Flink, making Flink SQL easier to use, and is committed to the construction of stream batch integrated development platform',
-  'pages.datastadio.lable.maxrows' : 'Max Rows',
+  'pages.datastadio.lable.welcomeuse': 'Welcome to Use Dinky v',
+  'pages.datastadio.lable.dinkydescribe': 'Real Time is the Future,Dinky is the best partner of Flink, making Flink SQL easier to use, and is committed to the construction of stream batch integrated development platform',
+  'pages.datastadio.lable.maxrows': 'Max Rows',
 
 
-  'pages.devops.result.success' : 'Successful',
-  'pages.devops.lable.online' : 'Online',
-  'pages.devops.lable.offline' : 'Offline',
-  'pages.devops.lable.onlinelist' : 'Online List',
-  'pages.devops.lable.offlinelist' : 'Offline List',
-  'pages.devops.lable.instance' : 'Instance',
+  'pages.devops.result.success': 'Successful',
+  'pages.devops.lable.online': 'Online',
+  'pages.devops.lable.offline': 'Offline',
+  'pages.devops.lable.onlinelist': 'Online List',
+  'pages.devops.lable.offlinelist': 'Offline List',
+  'pages.devops.lable.instance': 'Instance',
 };
 

dlink-web/src/locales/zh-CN/button.ts

@@ -36,6 +36,8 @@ export default {
   'button.changePassword': '修改密码',
   'button.enable': '启用',
   'button.disable': '禁用',
+  'button.reset': '重置',
+  'button.search': '搜索',
 
 
   'tips.selected': '已选择',

dlink-web/src/locales/zh-CN/pages.ts

@@ -94,14 +94,14 @@ export default {
   'pages.operate': '操作', // all table list of operation columns is use this item
 
   'pages.devops.jobstatus.CREATED': '已创建',
-  'pages.devops.jobstatus.INITIALIZING': '初始化中',
+  'pages.devops.jobstatus.INITIALIZING': '初始化',
   'pages.devops.jobstatus.RUNNING': '运行中',
   'pages.devops.jobstatus.FINISHED': '已完成',
   'pages.devops.jobstatus.FAILING': '异常中',
-  'pages.devops.jobstatus.FAILED': '已失败',
+  'pages.devops.jobstatus.FAILED': '已异常',
   'pages.devops.jobstatus.SUSPENDED': '已暂停',
-  'pages.devops.jobstatus.CANCELLING': '取消中',
-  'pages.devops.jobstatus.CANCELED': '已取消',
+  'pages.devops.jobstatus.CANCELLING': '停止中',
+  'pages.devops.jobstatus.CANCELED': '停止',
   'pages.devops.jobstatus.RESTARTING': '重启中',
   'pages.devops.jobstatus.UNKNOWN': '未知',
 

dlink-web/src/pages/404.tsx

@@ -20,19 +20,25 @@
 
 import {Button, Result} from 'antd';
 import React from 'react';
-import {history} from 'umi';
+import {history, useIntl} from 'umi';
 
-const NoFoundPage: React.FC = () => (
-  <Result
-    status="404"
-    title="404"
-    subTitle="Sorry, the page you visited does not exist."
-    extra={
-      <Button type="primary" onClick={() => history.push('/')}>
-        Back Home
-      </Button>
-    }
-  />
-);
+const NoFoundPage: React.FC = () => {
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+  return (
+    <Result
+      status="404"
+      title="404"
+      subTitle="Sorry, the page you visited does not exist."
+      extra={
+        <Button type="primary" onClick={() => history.push('/')}>
+          Back Home
+        </Button>
+      }
+    />
+  )
+};
 
 export default NoFoundPage;

dlink-web/src/pages/API/TaskAPI/index.tsx

@@ -18,10 +18,11 @@
  */
 
 
-import {Typography, Tabs, Badge, Empty} from "antd";
+import {Tabs, Typography} from "antd";
 import CodeShow from "@/components/Common/CodeShow";
 import {useEffect, useState} from "react";
 import {getTaskAPIAddress} from "@/pages/API/service";
+import {useIntl} from "umi";
 
 
 const {Title, Paragraph, Text, Link} = Typography;
@@ -29,6 +30,9 @@ const {TabPane} = Tabs;
 
 const TaskAPI = (props: any) => {
 
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const {task} = props;
   const [address, setAddress] = useState<string>('127.0.0.1:8888');
 
@@ -38,8 +42,8 @@ const TaskAPI = (props: any) => {
 
   const getAddress = () => {
     const res = getTaskAPIAddress();
-    res.then((result)=>{
-      if(result.datas){
+    res.then((result) => {
+      if (result.datas) {
         setAddress(result.datas);
       }
     })
@@ -92,7 +96,8 @@ const TaskAPI = (props: any) => {
         }
         key="taskInstance"
       >
-        <CodeShow code={`curl http://${address}/openapi/getJobInstanceByTaskId?id=${(task ? task.id : '1')}`} language='shell'
+        <CodeShow code={`curl http://${address}/openapi/getJobInstanceByTaskId?id=${(task ? task.id : '1')}`}
+                  language='shell'
                   height='500px' theme="vs-dark"/>
       </TabPane>
       <TabPane

dlink-web/src/pages/Admin.tsx

@@ -25,6 +25,10 @@ import {PageHeaderWrapper} from '@ant-design/pro-layout';
 import {useIntl} from 'umi';
 
 export default (): React.ReactNode => {
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const intl = useIntl();
   return (
     <PageHeaderWrapper
@@ -47,11 +51,11 @@ export default (): React.ReactNode => {
             marginBottom: 48,
           }}
         />
-        <Typography.Title level={2} style={{ textAlign: 'center' }}>
-          <SmileTwoTone /> Ant Design Pro <HeartTwoTone twoToneColor="#eb2f96" /> You
+        <Typography.Title level={2} style={{textAlign: 'center'}}>
+          <SmileTwoTone/> Ant Design Pro <HeartTwoTone twoToneColor="#eb2f96"/> You
         </Typography.Title>
       </Card>
-      <p style={{ textAlign: 'center', marginTop: 24 }}>
+      <p style={{textAlign: 'center', marginTop: 24}}>
         Want to add more pages? Please refer to{' '}
         <a href="https://pro.ant.design/docs/block-cn" target="_blank" rel="noopener noreferrer">
           use block

dlink-web/src/pages/AlertGroup/components/AlertGroupForm.tsx

@@ -21,7 +21,7 @@
 import React, {useState} from 'react';
 import {Button, Form, Input, Modal, Select, Switch, Tag} from 'antd';
 import {AlertGroupTableListItem} from "@/pages/AlertGroup/data";
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import {AlertStateType} from "@/pages/AlertInstance/model";
 import {AlertInstanceTableListItem} from "@/pages/AlertInstance/data";
 import {buildFormData, getFormData} from "@/pages/AlertGroup/function";
@@ -42,13 +42,16 @@ const formLayout = {
 
 const AlertGroupForm: React.FC<AlertGroupFormProps> = (props) => {
 
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const [form] = Form.useForm();
   const [formVals, setFormVals] = useState<Partial<AlertGroupTableListItem>>({
     id: props.values.id,
     name: props.values.name,
     alertInstanceIds: props.values.alertInstanceIds,
     note: props.values.note,
-    enabled: props.values.enabled?props.values.enabled:true,
+    enabled: props.values.enabled ? props.values.enabled : true,
   });
 
   const {
@@ -71,8 +74,8 @@ const AlertGroupForm: React.FC<AlertGroupFormProps> = (props) => {
 
   const submitForm = async () => {
     const fieldsValue = await form.validateFields();
-    setFormVals(buildFormData(formVals,fieldsValue));
-    handleSubmit(buildFormData(formVals,fieldsValue));
+    setFormVals(buildFormData(formVals, fieldsValue));
+    handleSubmit(buildFormData(formVals, fieldsValue));
   };
 
   const renderContent = (formVals) => {
@@ -131,7 +134,7 @@ const AlertGroupForm: React.FC<AlertGroupFormProps> = (props) => {
       width={1200}
       bodyStyle={{padding: '32px 40px 48px'}}
       destroyOnClose
-      title={formVals.id?"维护报警组":"创建报警组"}
+      title={formVals.id ? "维护报警组" : "创建报警组"}
       visible={modalVisible}
       footer={renderFooter()}
       onCancel={() => handleModalVisible()}
@@ -149,4 +152,4 @@ const AlertGroupForm: React.FC<AlertGroupFormProps> = (props) => {
 
 export default connect(({Alert}: { Alert: AlertStateType }) => ({
   instance: Alert.instance,
-})) (AlertGroupForm);
+}))(AlertGroupForm);

dlink-web/src/pages/AlertGroup/index.tsx

@@ -28,11 +28,15 @@ import {AlertGroupTableListItem} from "@/pages/AlertGroup/data";
 import {handleAddOrUpdate, handleRemove, queryData, updateEnabled} from "@/components/Common/crud";
 import AlertGroupForm from "@/pages/AlertGroup/components/AlertGroupForm";
 import {showAlertInstance} from "@/components/Studio/StudioEvent/DDL";
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 
 const url = '/api/alertGroup';
 const AlertGroupTableList: React.FC<{}> = (props: any) => {
   const {dispatch} = props;
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const [row, setRow] = useState<AlertGroupTableListItem>();
   const [modalVisible, handleModalVisible] = useState<boolean>(false);
   const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
@@ -193,6 +197,10 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
         rowSelection={{
           onChange: (_, selectedRows) => setSelectedRows(selectedRows),
         }}
+        pagination={{
+          defaultPageSize: 10,
+          showSizeChanger: true,
+        }}
       />
       {selectedRowsState?.length > 0 && (
         <FooterToolbar

dlink-web/src/pages/AlertInstance/components/AlertInstanceChooseForm.tsx

@@ -22,7 +22,7 @@ import React, {useState} from 'react';
 import {Card, List, Modal} from 'antd';
 
 import {AlertInstanceTableListItem} from '../data.d';
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import {ALERT_CONFIG_LIST, ALERT_TYPE, AlertConfig} from "@/pages/AlertInstance/conf";
 import {getAlertIcon} from "@/pages/AlertInstance/icon";
 import {AlertStateType} from "@/pages/AlertInstance/model";
@@ -41,6 +41,9 @@ export type UpdateFormProps = {
 
 const AlertInstanceChooseForm: React.FC<UpdateFormProps> = (props) => {
 
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const {
     onSubmit: handleUpdate,
     onCancel: handleChooseModalVisible,

dlink-web/src/pages/AlertInstance/components/DingTalkForm.tsx

@@ -23,6 +23,7 @@ import {Button, Divider, Form, Input, Modal, Radio, Switch} from 'antd';
 import {AlertInstanceTableListItem} from "@/pages/AlertInstance/data";
 import {buildJSONData, getJSONData} from "@/pages/AlertInstance/function";
 import {ALERT_TYPE} from "@/pages/AlertInstance/conf";
+import {useIntl} from "umi";
 
 export type AlertInstanceFormProps = {
   onCancel: (flag?: boolean) => void;
@@ -39,6 +40,9 @@ const formLayout = {
 
 const DingTalkForm: React.FC<AlertInstanceFormProps> = (props) => {
 
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const [form] = Form.useForm();
   const [formVals, setFormVals] = useState<Partial<AlertInstanceTableListItem>>({
     id: props.values?.id,
@@ -197,10 +201,10 @@ const DingTalkForm: React.FC<AlertInstanceFormProps> = (props) => {
       <Form
         {...formLayout}
         form={form}
-        initialValues={getJSONData(formVals)}
+        initialValues={getJSONData(formVals as AlertInstanceTableListItem)}
         onValuesChange={onValuesChange}
       >
-        {renderContent(getJSONData(formVals))}
+        {renderContent(getJSONData(formVals as AlertInstanceTableListItem))}
       </Form>
     </Modal>
   );

dlink-web/src/pages/AlertInstance/components/EmailForm.tsx

@@ -23,6 +23,7 @@ import {Button, Divider, Form, Input, Modal, Radio, Switch} from 'antd';
 import {AlertInstanceTableListItem} from "@/pages/AlertInstance/data";
 import {buildJSONData, getJSONData} from "@/pages/AlertInstance/function";
 import {ALERT_TYPE} from "@/pages/AlertInstance/conf";
+import {useIntl} from "umi";
 
 export type AlertInstanceFormProps = {
   onCancel: (flag?: boolean) => void;
@@ -39,6 +40,9 @@ const formLayout = {
 
 const EmailForm: React.FC<AlertInstanceFormProps> = (props) => {
 
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const [form] = Form.useForm();
   const [formVals, setFormVals] = useState<Partial<AlertInstanceTableListItem>>({
     id: props.values?.id,
@@ -225,10 +229,10 @@ const EmailForm: React.FC<AlertInstanceFormProps> = (props) => {
       <Form
         {...formLayout}
         form={form}
-        initialValues={getJSONData(formVals)}
+        initialValues={getJSONData(formVals as AlertInstanceTableListItem)}
         onValuesChange={onValuesChange}
       >
-        {renderContent(getJSONData(formVals))}
+        {renderContent(getJSONData(formVals as AlertInstanceTableListItem))}
       </Form>
     </Modal>
   );

dlink-web/src/pages/AlertInstance/components/FeiShuForm.tsx

@@ -23,6 +23,7 @@ import {Button, Divider, Form, Input, Modal, Radio, Switch} from 'antd';
 import {AlertInstanceTableListItem} from "@/pages/AlertInstance/data";
 import {buildJSONData, getJSONData} from "@/pages/AlertInstance/function";
 import {ALERT_TYPE} from "@/pages/AlertInstance/conf";
+import {useIntl} from "umi";
 
 export type AlertInstanceFormProps = {
   onCancel: (flag?: boolean) => void;
@@ -39,6 +40,9 @@ const formLayout = {
 
 const FeiShuForm: React.FC<AlertInstanceFormProps> = (props) => {
 
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const [form] = Form.useForm();
   const [formVals, setFormVals] = useState<Partial<AlertInstanceTableListItem>>({
     id: props.values?.id,
@@ -194,10 +198,10 @@ const FeiShuForm: React.FC<AlertInstanceFormProps> = (props) => {
       <Form
         {...formLayout}
         form={form}
-        initialValues={getJSONData(formVals)}
+        initialValues={getJSONData(formVals as AlertInstanceTableListItem)}
         onValuesChange={onValuesChange}
       >
-        {renderContent(getJSONData(formVals))}
+        {renderContent(getJSONData(formVals as AlertInstanceTableListItem))}
       </Form>
     </Modal>
   );

dlink-web/src/pages/AlertInstance/components/WeChatForm.tsx

@@ -23,6 +23,7 @@ import {Button, Divider, Form, Input, Modal, Radio, Switch} from 'antd';
 import {AlertInstanceTableListItem} from "@/pages/AlertInstance/data";
 import {buildJSONData, getJSONData} from "@/pages/AlertInstance/function";
 import {ALERT_TYPE} from "@/pages/AlertInstance/conf";
+import {useIntl} from "umi";
 
 export type AlertInstanceFormProps = {
   onCancel: (flag?: boolean) => void;
@@ -39,6 +40,9 @@ const formLayout = {
 
 const WeChatForm: React.FC<AlertInstanceFormProps> = (props) => {
 
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const [form] = Form.useForm();
   const [formVals, setFormVals] = useState<Partial<AlertInstanceTableListItem>>({
     id: props.values?.id,
@@ -203,10 +207,10 @@ const WeChatForm: React.FC<AlertInstanceFormProps> = (props) => {
       <Form
         {...formLayout}
         form={form}
-        initialValues={getJSONData(formVals)}
+        initialValues={getJSONData(formVals as AlertInstanceTableListItem)}
         onValuesChange={onValuesChange}
       >
-        {renderContent(getJSONData(formVals))}
+        {renderContent(getJSONData(formVals as AlertInstanceTableListItem))}
       </Form>
     </Modal>
   );

dlink-web/src/pages/AlertInstance/index.tsx

@@ -27,10 +27,15 @@ import ProDescriptions from '@ant-design/pro-descriptions';
 import {AlertInstanceTableListItem} from "@/pages/AlertInstance/data";
 import {handleRemove, queryData, updateEnabled} from "@/components/Common/crud";
 import AlertInstanceChooseForm from "@/pages/AlertInstance/components/AlertInstanceChooseForm";
+import {useIntl} from "umi";
 
 const url = '/api/alertInstance';
 const AlertInstanceTableList: React.FC<{}> = (props: any) => {
   const {dispatch} = props;
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const [row, setRow] = useState<AlertInstanceTableListItem>();
   const [values, setValues] = useState<AlertInstanceTableListItem>();
   const [modalVisible, handleModalVisible] = useState<boolean>(false);
@@ -206,6 +211,10 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
         rowSelection={{
           onChange: (_, selectedRows) => setSelectedRows(selectedRows),
         }}
+        pagination={{
+          defaultPageSize: 10,
+          showSizeChanger: true,
+        }}
       />
       {selectedRowsState?.length > 0 && (
         <FooterToolbar

dlink-web/src/pages/AuthenticationCenter/NamespaceManager/components/NameSpaceForm.tsx

@@ -22,7 +22,7 @@ import React, {useState} from 'react';
 import {Button, Form, Input, Modal, Switch} from 'antd';
 import {NameSpaceTableListItem} from "@/pages/AuthenticationCenter/data.d";
 import {getStorageTenantId} from "@/components/Common/crud";
-import {useIntl} from "@@/plugin-locale/localeExports";
+import {useIntl} from "umi";
 
 export type TenantFormProps = {
   onCancel: (flag?: boolean) => void;
@@ -40,7 +40,6 @@ const NameSpaceForm: React.FC<TenantFormProps> = (props) => {
 
   const international = useIntl();
   const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
-
   const [form] = Form.useForm();
   const [formVals, setFormVals] = useState<Partial<NameSpaceTableListItem>>({
     id: props.values?.id,

dlink-web/src/pages/AuthenticationCenter/NamespaceManager/index.tsx

@@ -27,7 +27,7 @@ import ProDescriptions from '@ant-design/pro-descriptions';
 import {handleAddOrUpdate, handleRemove, queryData, updateEnabled} from "@/components/Common/crud";
 import {NameSpaceTableListItem} from "@/pages/AuthenticationCenter/data.d";
 import NameSpaceForm from "@/pages/AuthenticationCenter/NamespaceManager/components/NameSpaceForm";
-import {useIntl} from "@@/plugin-locale/localeExports";
+import {useIntl} from "umi";
 
 const url = '/api/namespace';
 
@@ -178,6 +178,10 @@ const NameSpaceFormList: React.FC<{}> = (props: any) => {
         rowSelection={{
           onChange: (_, selectedRows) => setSelectedRows(selectedRows),
         }}
+        pagination={{
+          defaultPageSize: 10,
+          showSizeChanger: true,
+        }}
       />
       {selectedRowsState?.length > 0 && (
         <FooterToolbar

dlink-web/src/pages/AuthenticationCenter/RoleManager/components/RoleForm.tsx

@@ -22,10 +22,9 @@ import React, {useState} from 'react';
 import {Button, Form, Input, Modal, Select, Tag} from 'antd';
 import {NameSpaceTableListItem, RoleTableListItem} from "@/pages/AuthenticationCenter/data.d";
 import {getStorageTenantId} from "@/components/Common/crud";
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import {NameSpaceStateType} from "@/pages/AuthenticationCenter/RoleManager/model";
 import {buildFormData, getFormData} from "@/pages/AuthenticationCenter/function";
-import {useIntl} from "@@/plugin-locale/localeExports";
 
 
 export type TenantFormProps = {
@@ -49,7 +48,6 @@ const RoleForm: React.FC<TenantFormProps> = (props) => {
   const international = useIntl();
   const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
 
-
   const [form] = Form.useForm();
   const [formVals, setFormVals] = useState<Partial<RoleTableListItem>>({
     id: props.values?.id,

dlink-web/src/pages/AuthenticationCenter/RoleManager/index.tsx

@@ -28,8 +28,7 @@ import {getStorageTenantId, handleAddOrUpdate, handleRemove, queryData} from "@/
 import {RoleTableListItem} from "@/pages/AuthenticationCenter/data.d";
 import RoleForm from "@/pages/AuthenticationCenter/RoleManager/components/RoleForm";
 import {getNameSpaceList} from "@/pages/AuthenticationCenter/service";
-import {connect} from "umi";
-import {useIntl} from "@@/plugin-locale/localeExports";
+import {connect, useIntl} from "umi";
 
 const url = '/api/role';
 
@@ -42,6 +41,7 @@ const RoleFormList: React.FC<{}> = (props: any) => {
   const actionRef = useRef<ActionType>();
   const [selectedRowsState, setSelectedRows] = useState<RoleTableListItem[]>([]);
 
+
   const international = useIntl();
   const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
 
@@ -188,6 +188,10 @@ const RoleFormList: React.FC<{}> = (props: any) => {
         rowSelection={{
           onChange: (_, selectedRows) => setSelectedRows(selectedRows),
         }}
+        pagination={{
+          defaultPageSize: 10,
+          showSizeChanger: true,
+        }}
       />
       {selectedRowsState?.length > 0 && (
         <FooterToolbar

dlink-web/src/pages/AuthenticationCenter/TenantManager/components/GrantTenantTransfer.tsx

@@ -24,7 +24,7 @@ import React, {useEffect, useState} from 'react';
 import {getData} from "@/components/Common/crud";
 import {Scrollbars} from 'react-custom-scrollbars';
 import {TenantTableListItem, UserTableListItem} from "@/pages/AuthenticationCenter/data.d";
-import {useIntl} from "@@/plugin-locale/localeExports";
+import {useIntl} from "umi";
 
 
 interface TableTransferProps extends TransferProps<UserTableListItem> {
@@ -105,7 +105,11 @@ export type TableTransferFromProps = {
 };
 
 const GrantTenantToUserTableTransferFrom = (props: TableTransferFromProps) => {
-  const intl = useIntl();
+
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const {tenant, onChange: handleChange} = props;
 
   const [targetKeys, setTargetKeys] = useState<string[]>([]);
@@ -129,30 +133,30 @@ const GrantTenantToUserTableTransferFrom = (props: TableTransferFromProps) => {
 
   const leftTableColumns: ColumnsType<UserTableListItem> = [
     {
-      title: intl.formatMessage({id: 'pages.user.UserName'}),
+      title: l('pages.user.UserName'),
       dataIndex: 'username',
     },
     {
-      title: intl.formatMessage({id: 'pages.user.UserNickName'}),
+      title: l('pages.user.UserNickName'),
       dataIndex: 'nickname',
     },
     {
-      title: intl.formatMessage({id: 'pages.user.UserJobNumber'}),
+      title: l('pages.user.UserJobNumber'),
       dataIndex: 'worknum',
     },
   ];
 
   const rightTableColumns: ColumnsType<UserTableListItem> = [
     {
-      title: intl.formatMessage({id: 'pages.user.UserName'}),
+      title: l('pages.user.UserName'),
       dataIndex: 'username',
     },
     {
-      title: intl.formatMessage({id: 'pages.user.UserNickName'}),
+      title: l('pages.user.UserNickName'),
       dataIndex: 'nickname',
     },
     {
-      title: intl.formatMessage({id: 'pages.user.UserJobNumber'}),
+      title: l('pages.user.UserJobNumber'),
       dataIndex: 'worknum',
     },
   ];

dlink-web/src/pages/AuthenticationCenter/TenantManager/components/TenantForm.tsx

@@ -21,7 +21,7 @@
 import React, {useState} from 'react';
 import {Button, Form, Input, Modal} from 'antd';
 import {TenantTableListItem} from "@/pages/AuthenticationCenter/data.d";
-import {useIntl} from "@@/plugin-locale/localeExports";
+import {useIntl} from "umi";
 
 export type TenantFormProps = {
   onCancel: (flag?: boolean) => void;
@@ -38,7 +38,9 @@ const FormItem = Form.Item;
 
 const TenantForm: React.FC<TenantFormProps> = (props) => {
 
-  const intl = useIntl();
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
 
   const [form] = Form.useForm();
   const [formVals, setFormVals] = useState<Partial<TenantTableListItem>>({
@@ -68,16 +70,16 @@ const TenantForm: React.FC<TenantFormProps> = (props) => {
       <>
         <FormItem
           name="tenantCode"
-          label={intl.formatMessage({id: 'pages.tenant.TenantCode'})}
-          rules={[{required: true, message: intl.formatMessage({id: 'pages.tenant.EnterTenantCode'})}]}>
-          <Input allowClear placeholder={intl.formatMessage({id: 'pages.tenant.EnterTenantCode'})}/>
+          label={l('pages.tenant.TenantCode')}
+          rules={[{required: true, message: l('pages.tenant.EnterTenantCode')}]}>
+          <Input allowClear placeholder={l('pages.tenant.EnterTenantCode')}/>
         </FormItem>
         <FormItem
           name="note"
-          label={intl.formatMessage({id: 'pages.tenant.Note'})}
-          rules={[{required: true, message: intl.formatMessage({id: 'pages.tenant.EnterTenantNote'})}]}
+          label={l('pages.tenant.Note')}
+          rules={[{required: true, message: l('pages.tenant.EnterTenantNote')}]}
         >
-          <Input.TextArea placeholder={intl.formatMessage({id: 'pages.tenant.EnterTenantNote'})} allowClear
+          <Input.TextArea placeholder={l('pages.tenant.EnterTenantNote')} allowClear
                           autoSize={{minRows: 3, maxRows: 10}}/>
         </FormItem>
       </>
@@ -87,9 +89,9 @@ const TenantForm: React.FC<TenantFormProps> = (props) => {
   const renderFooter = () => {
     return (
       <>
-        <Button onClick={() => handleModalVisible(false)}>{intl.formatMessage({id: 'button.cancel'})}</Button>
+        <Button onClick={() => handleModalVisible(false)}>{l('button.cancel')}</Button>
         <Button type="primary" onClick={() => submitForm()}>
-          {intl.formatMessage({id: 'button.finish'})}
+          {l('button.finish')}
         </Button>
       </>
     );
@@ -100,7 +102,7 @@ const TenantForm: React.FC<TenantFormProps> = (props) => {
       width={"40%"}
       bodyStyle={{padding: '32px 40px 48px'}}
       destroyOnClose
-      title={formVals.id ? intl.formatMessage({id: 'pages.tenant.update'}) : intl.formatMessage({id: 'pages.tenant.create'})}
+      title={formVals.id ? l('pages.tenant.update') : l('pages.tenant.create')}
       visible={modalVisible}
       footer={renderFooter()}
       onCancel={() => handleModalVisible()}

dlink-web/src/pages/AuthenticationCenter/TenantManager/index.tsx

@@ -41,6 +41,7 @@ const TenantFormList: React.FC<{}> = (props: any) => {
   const [selectedRowsState, setSelectedRows] = useState<TenantTableListItem[]>([]);
   const [formValues, setFormValues] = useState({});
 
+
   const international = useIntl();
   const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
 
@@ -217,6 +218,10 @@ const TenantFormList: React.FC<{}> = (props: any) => {
         rowSelection={{
           onChange: (_, selectedRows) => setSelectedRows(selectedRows),
         }}
+        pagination={{
+          defaultPageSize: 10,
+          showSizeChanger: true,
+        }}
       />
       {selectedRowsState?.length > 0 && (
         <FooterToolbar

dlink-web/src/pages/AuthenticationCenter/UserManager/components/PasswordForm.tsx

@@ -37,6 +37,7 @@ const formLayout = {
 
 const PasswordForm: React.FC<PasswordFormProps> = (props) => {
 
+
   const international = useIntl();
   const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
 

dlink-web/src/pages/AuthenticationCenter/UserManager/components/TableTransfer.tsx

@@ -24,7 +24,7 @@ import {useEffect, useState} from 'react';
 import {getData} from "@/components/Common/crud";
 import {Scrollbars} from 'react-custom-scrollbars';
 import {RoleTableListItem, UserTableListItem} from "@/pages/AuthenticationCenter/data.d";
-import {useIntl} from "@@/plugin-locale/localeExports";
+import {useIntl} from "umi";
 
 
 interface TableTransferProps extends TransferProps<RoleTableListItem> {
@@ -103,6 +103,7 @@ export type TableTransferFromProps = {
 
 const TableTransferFrom = (props: TableTransferFromProps) => {
 
+
   const international = useIntl();
   const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
 

dlink-web/src/pages/AuthenticationCenter/UserManager/components/UserForm.tsx

@@ -37,6 +37,7 @@ const formLayout = {
 
 const UserForm: React.FC<UserFormProps> = (props) => {
 
+
   const international = useIntl();
   const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
 

dlink-web/src/pages/AuthenticationCenter/UserManager/index.tsx

@@ -29,7 +29,7 @@ import {UserTableListItem} from "@/pages/AuthenticationCenter/data.d";
 import UserForm from "@/pages/AuthenticationCenter/UserManager/components/UserForm";
 import PasswordForm from "@/pages/AuthenticationCenter/UserManager/components/PasswordForm";
 import TableTransferFrom from "@/pages/AuthenticationCenter/UserManager/components/TableTransfer";
-import {useIntl} from "@@/plugin-locale/localeExports";
+import {useIntl} from "umi";
 
 const url = '/api/user';
 const UserTableList: React.FC<{}> = (props: any) => {
@@ -239,6 +239,10 @@ const UserTableList: React.FC<{}> = (props: any) => {
           rowSelection={{
             onChange: (_, selectedRows) => setSelectedRows(selectedRows),
           }}
+          pagination={{
+            defaultPageSize: 10,
+            showSizeChanger: true,
+          }}
         />
         {selectedRowsState?.length > 0 && (
           <FooterToolbar

dlink-web/src/pages/Cluster/components/ClusterForm.tsx

@@ -23,6 +23,7 @@ import {Button, Form, Input, Modal, Select, Switch} from 'antd';
 
 import {ClusterTableListItem} from "@/pages/Cluster/data";
 import {RUN_MODE} from "@/components/Studio/conf";
+import {useIntl} from 'umi';
 
 export type ClusterFormProps = {
   onCancel: (flag?: boolean) => void;
@@ -39,6 +40,11 @@ const formLayout = {
 
 const ClusterForm: React.FC<ClusterFormProps> = (props) => {
 
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+
   const [form] = Form.useForm();
   const [formVals, setFormVals] = useState<Partial<ClusterTableListItem>>({
     id: props.values.id,

dlink-web/src/pages/Cluster/index.tsx

@@ -48,6 +48,12 @@ const url = '/api/cluster';
 
 const ClusterTableList: React.FC<{}> = (props: any) => {
   const intl = useIntl();
+
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+
   const {dispatch} = props;
   const [modalVisible, handleModalVisible] = useState<boolean>(false);
   const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
@@ -389,6 +395,10 @@ const ClusterTableList: React.FC<{}> = (props: any) => {
         rowSelection={{
           onChange: (_, selectedRows) => setSelectedRows(selectedRows),
         }}
+        pagination={{
+          defaultPageSize: 10,
+          showSizeChanger: true,
+        }}
       />
       {selectedRowsState?.length > 0 && (
         <FooterToolbar

dlink-web/src/pages/ClusterConfiguration/components/ClusterConfigurationForm.tsx

@@ -26,6 +26,7 @@ import {FLINK_CONFIG_LIST, HADOOP_CONFIG_LIST, KUBERNETES_CONFIG_LIST} from "@/p
 import {testClusterConfigurationConnect} from "@/pages/ClusterConfiguration/service";
 import type {ClusterConfigurationTableListItem} from "@/pages/ClusterConfiguration/data";
 import {CODE} from "@/components/Common/crud";
+import {useIntl} from 'umi';
 
 export type ClusterConfigurationFormProps = {
   onCancel: (flag?: boolean) => void;
@@ -42,6 +43,11 @@ const formLayout = {
 
 const ClusterConfigurationForm: React.FC<ClusterConfigurationFormProps> = (props) => {
 
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+
   const [form] = Form.useForm();
   const [formVals, setFormVals] = useState<Partial<ClusterConfigurationTableListItem>>({
     id: props.values.id,

dlink-web/src/pages/ClusterConfiguration/index.tsx

@@ -28,9 +28,16 @@ import {ClusterConfigurationTableListItem} from "@/pages/ClusterConfiguration/da
 import {handleAddOrUpdate, handleRemove, queryData, updateEnabled} from "@/components/Common/crud";
 import {showClusterConfiguration} from "@/components/Studio/StudioEvent/DDL";
 import ClusterConfigurationForm from "@/pages/ClusterConfiguration/components/ClusterConfigurationForm";
+import {useIntl} from "umi";
 
 const url = '/api/clusterConfiguration';
 const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
+
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+
   const {dispatch} = props;
   const [row, setRow] = useState<ClusterConfigurationTableListItem>();
   const [modalVisible, handleModalVisible] = useState<boolean>(false);
@@ -236,6 +243,10 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
         rowSelection={{
           onChange: (_, selectedRows) => setSelectedRows(selectedRows),
         }}
+        pagination={{
+          defaultPageSize: 10,
+          showSizeChanger: true,
+        }}
       />
       {selectedRowsState?.length > 0 && (
         <FooterToolbar

dlink-web/src/pages/DataBase/Columns/index.tsx

@@ -21,9 +21,15 @@
 import React from "react";
 import {CheckSquareOutlined, KeyOutlined} from '@ant-design/icons';
 import DTable from "@/components/Common/DTable";
-import { useIntl } from 'umi';
+import {useIntl} from 'umi';
 
 const Columns = (props: any) => {
+
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+
   const intl = useIntl();
 
   const {dbId, table, schema, scroll} = props;

dlink-web/src/pages/DataBase/components/DBForm.tsx

@@ -22,7 +22,7 @@ import React, {useState} from 'react';
 import {Card, Image, List, Modal} from 'antd';
 
 import {DataBaseItem} from '../data.d';
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import {StateType} from "@/pages/DataStudio/model";
 import {FALLBACK, getDBImage} from "@/pages/DataBase/DB";
 import DataBaseForm from "@/pages/DataBase/components/DataBaseForm";
@@ -67,6 +67,11 @@ const data: any = [
 
 const DBForm: React.FC<UpdateFormProps> = (props) => {
 
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+
   const {
     onSubmit: handleUpdate,
     onCancel: handleChooseDBModalVisible,

dlink-web/src/pages/DataBase/components/DataBaseForm.tsx

@@ -24,6 +24,7 @@ import {Button, Divider, Form, Input, Select, Space} from 'antd';
 import Switch from "antd/es/switch";
 import TextArea from "antd/es/input/TextArea";
 import {DataBaseItem} from "@/pages/DataBase/data";
+import {useIntl} from 'umi';
 
 
 export type ClickHouseFormProps = {
@@ -42,6 +43,11 @@ const formLayout = {
 };
 
 const DataBaseForm: React.FC<ClickHouseFormProps> = (props) => {
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+
   const [formVals, setFormVals] = useState<Partial<DataBaseItem>>({
     id: props.values.id,
     name: props.values.name,
@@ -69,14 +75,14 @@ const DataBaseForm: React.FC<ClickHouseFormProps> = (props) => {
 
   const submitForm = async () => {
     const fieldsValue = await form.validateFields();
-    setFormVals({type,...formVals, ...fieldsValue});
-    handleUpdate({type,...formVals, ...fieldsValue});
+    setFormVals({type, ...formVals, ...fieldsValue});
+    handleUpdate({type, ...formVals, ...fieldsValue});
   };
 
   const testForm = async () => {
     const fieldsValue = await form.validateFields();
-    setFormVals({type,...formVals, ...fieldsValue});
-    handleTest({type,...formVals, ...fieldsValue});
+    setFormVals({type, ...formVals, ...fieldsValue});
+    handleTest({type, ...formVals, ...fieldsValue});
   };
 
   const onReset = () => {
@@ -103,7 +109,7 @@ const DataBaseForm: React.FC<ClickHouseFormProps> = (props) => {
           name="groupName"
           label="分组类型"
         >
-          <Select >
+          <Select>
             <Option value="来源">来源</Option>
             <Option value="数仓">数仓</Option>
             <Option value="应用">应用</Option>
@@ -132,20 +138,20 @@ const DataBaseForm: React.FC<ClickHouseFormProps> = (props) => {
         </Form.Item>
         {type !== "Hive" &&
           <>
-         <Form.Item
-          name="flinkConfig"
-          label="Flink 连接配置"
-        >
-          <TextArea placeholder="请指定 Flink With 的默认配置" allowClear
-                    autoSize={{minRows: 3, maxRows: 10}}/>
-        </Form.Item>
-        <Form.Item
-          name="flinkTemplate"
-          label="Flink 连接模板"
-        >
-          <TextArea placeholder="请指定 Flink With 的生成模板" allowClear
-                    autoSize={{minRows: 3, maxRows: 10}}/>
-        </Form.Item>
+            <Form.Item
+              name="flinkConfig"
+              label="Flink 连接配置"
+            >
+              <TextArea placeholder="请指定 Flink With 的默认配置" allowClear
+                        autoSize={{minRows: 3, maxRows: 10}}/>
+            </Form.Item>
+            <Form.Item
+              name="flinkTemplate"
+              label="Flink 连接模板"
+            >
+              <TextArea placeholder="请指定 Flink With 的生成模板" allowClear
+                        autoSize={{minRows: 3, maxRows: 10}}/>
+            </Form.Item>
           </>}
         <Form.Item
           name="note"
@@ -156,7 +162,7 @@ const DataBaseForm: React.FC<ClickHouseFormProps> = (props) => {
         <Form.Item
           name="enabled"
           label="是否启用"
-          >
+        >
           <Switch checkedChildren="启用" unCheckedChildren="禁用"
                   defaultChecked={formVals.enabled}/>
         </Form.Item>
@@ -166,51 +172,51 @@ const DataBaseForm: React.FC<ClickHouseFormProps> = (props) => {
 
   return (
     <>{
-        modalVisible && (
-          <>
-            <Form
-              {...formLayout}
-              form={form}
-              initialValues={{
-                id: formVals.id,
-                name: formVals.name,
-                alias: formVals.alias,
-                type: formVals.type,
-                groupName: formVals.groupName,
-                url: formVals.url,
-                username: formVals.username,
-                password: formVals.password,
-                note: formVals.note,
-                flinkConfig: formVals.flinkConfig,
-                flinkTemplate: formVals.flinkTemplate,
-                enabled: formVals.enabled,
-              }}
-            >
-              {renderContent(formVals)}
-              <Form.Item wrapperCol={{offset: 8, span: 16}}>
-                <Space>
-                  {!formVals.id ?
-                    <Button htmlType="button" onClick={() => {
-                      handleModalVisible(false)
-                    }}>
-                      返回
-                    </Button>:undefined
-                  }
-                  <Button htmlType="button" onClick={onReset}>
-                    重置
-                  </Button>
-                  <Button type="primary" htmlType="button" onClick={testForm}>
-                    测试
-                  </Button>
-                  <Button type="primary" htmlType="button" onClick={submitForm}>
-                    保存
-                  </Button>
-                </Space>
-              </Form.Item>
-            </Form>
-          </>
-        )
-      }</>
+      modalVisible && (
+        <>
+          <Form
+            {...formLayout}
+            form={form}
+            initialValues={{
+              id: formVals.id,
+              name: formVals.name,
+              alias: formVals.alias,
+              type: formVals.type,
+              groupName: formVals.groupName,
+              url: formVals.url,
+              username: formVals.username,
+              password: formVals.password,
+              note: formVals.note,
+              flinkConfig: formVals.flinkConfig,
+              flinkTemplate: formVals.flinkTemplate,
+              enabled: formVals.enabled,
+            }}
+          >
+            {renderContent(formVals)}
+            <Form.Item wrapperCol={{offset: 8, span: 16}}>
+              <Space>
+                {!formVals.id ?
+                  <Button htmlType="button" onClick={() => {
+                    handleModalVisible(false)
+                  }}>
+                    返回
+                  </Button> : undefined
+                }
+                <Button htmlType="button" onClick={onReset}>
+                  重置
+                </Button>
+                <Button type="primary" htmlType="button" onClick={testForm}>
+                  测试
+                </Button>
+                <Button type="primary" htmlType="button" onClick={submitForm}>
+                  保存
+                </Button>
+              </Space>
+            </Form.Item>
+          </Form>
+        </>
+      )
+    }</>
   );
 };
 

dlink-web/src/pages/DataBase/index.tsx

@@ -40,6 +40,7 @@ import styles from './index.less';
 import {DataBaseItem} from "@/pages/DataBase/data";
 import {checkHeartBeat} from "@/pages/DataBase/service";
 import {showDataBase} from "@/components/Studio/StudioEvent/DDL";
+import {useIntl} from "umi";
 
 const {Text} = Typography;
 
@@ -51,6 +52,11 @@ const cardBodyStyle = {
 };
 
 const DataBaseTableList: React.FC<{}> = (props: any) => {
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+
   const {dispatch} = props;
   const [chooseDBModalVisible, handleDBFormModalVisible] = useState<boolean>(false);
   const [values, setValues] = useState<any>({});

dlink-web/src/pages/DataCenter/MetaData/TableData/index.tsx

@@ -25,12 +25,16 @@ import styles from './index.less';
 import {SearchOutlined} from "@ant-design/icons";
 import Divider from "antd/es/divider";
 import {ProTable} from "@ant-design/pro-table";
-import { useIntl } from 'umi';
+import {useIntl} from 'umi';
 
 const TableData = (props: any) => {
 
   const intl = useIntl();
 
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+
   // 数据库id，数据库名称，表名称
   const {dbId, table, schema} = props;
   // 表数据
@@ -166,7 +170,10 @@ const TableData = (props: any) => {
                   })
                 }}
               >
-                <Input addonBefore="WHERE" placeholder= {intl.formatMessage({id: 'pages.TableData.QueryConditions', defaultMessage: '查询条件',})}
+                <Input addonBefore="WHERE" placeholder={intl.formatMessage({
+                  id: 'pages.TableData.QueryConditions',
+                  defaultMessage: '查询条件',
+                })}
                        onChange={(value) => {
                          setOptionInput({
                            whereInput: value.target.value,
@@ -190,12 +197,14 @@ const TableData = (props: any) => {
                   })
                 }}
               >
-                <Input addonBefore="ORDER BY" placeholder={intl.formatMessage({id: 'pages.TableData.sorting', defaultMessage: '排序',})} onChange={(value) => {
-                  setOptionInput({
-                    whereInput: optionInput.whereInput,
-                    orderInput: value.target.value
-                  })
-                }}/>
+                <Input addonBefore="ORDER BY"
+                       placeholder={intl.formatMessage({id: 'pages.TableData.sorting', defaultMessage: '排序',})}
+                       onChange={(value) => {
+                         setOptionInput({
+                           whereInput: optionInput.whereInput,
+                           orderInput: value.target.value
+                         })
+                       }}/>
               </AutoComplete>
             </Col>
             <Col span={2}>
@@ -210,7 +219,10 @@ const TableData = (props: any) => {
         </div>
 
 
-        <Divider orientation="left" plain>{intl.formatMessage({id: 'pages.TableData.data', defaultMessage: '数据',})}</Divider>
+        <Divider orientation="left" plain>{intl.formatMessage({
+          id: 'pages.TableData.data',
+          defaultMessage: '数据',
+        })}</Divider>
 
         <div>
           <ProTable
@@ -218,7 +230,8 @@ const TableData = (props: any) => {
             columns={tableData.columns}
             dataSource={tableData.rowData}
             pagination={{
-              pageSize: 10,
+              defaultPageSize: 10,
+              showSizeChanger: true,
             }}
             scroll={{y: "80vh", x: true}}
             dateFormatter="string"

dlink-web/src/pages/DataCenter/MetaData/index.tsx

@@ -43,7 +43,7 @@ import Generation from '@/pages/DataBase/Generation';
 import TableData from '@/pages/DataCenter/MetaData/TableData';
 import {FALLBACK, getDBImage} from "@/pages/DataBase/DB";
 import Meta from "antd/lib/card/Meta";
-import { useIntl } from 'umi';
+import {useIntl} from 'umi';
 
 const {DirectoryTree} = Tree;
 const {TabPane} = Tabs;
@@ -52,6 +52,10 @@ const MetaDataContainer: React.FC<{}> = (props: any) => {
 
   const intl = useIntl();
 
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+
   let [database, setDatabase] = useState<[{
     id: number,
     name: string,

dlink-web/src/pages/DevOps/JobInfo/Alert/index.tsx

@@ -18,12 +18,12 @@
  */
 
 
-import { Typography} from 'antd';
-import ProTable from '@ant-design/pro-table';
-import {ProColumns} from "@ant-design/pro-table";
+import {Typography} from 'antd';
+import ProTable, {ProColumns} from '@ant-design/pro-table';
 import {queryData} from "@/components/Common/crud";
+import {useIntl} from "umi";
 
-const { Text } = Typography;
+const {Text} = Typography;
 type AlertHistoryTableListItem = {
   title: string,
   content: string,
@@ -35,6 +35,10 @@ type AlertHistoryTableListItem = {
 
 const Alert = (props: any) => {
 
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+
   const url = '/api/alertGroup';
   const {job} = props;
 
@@ -43,14 +47,14 @@ const Alert = (props: any) => {
       title: '标题',
       dataIndex: 'title',
       render: (dom, entity) => {
-        return  <Text style={{ width: 200 }} ellipsis={{ tooltip:entity.title }}>{entity.title}</Text>;
+        return <Text style={{width: 200}} ellipsis={{tooltip: entity.title}}>{entity.title}</Text>;
       },
     },
     {
       title: '正文',
       dataIndex: 'content',
       render: (dom, entity) => {
-        return  <Text style={{ width: 500 }} ellipsis={{ tooltip:entity.content }}>{entity.content}</Text>;
+        return <Text style={{width: 500}} ellipsis={{tooltip: entity.content}}>{entity.content}</Text>;
       },
     },
     {
@@ -58,14 +62,14 @@ const Alert = (props: any) => {
       dataIndex: 'status',
       sorter: true,
       render: (dom, entity) => {
-        return  entity.status === 1?<Text type="success">成功</Text>:<Text type="danger">失败</Text>;
+        return entity.status === 1 ? <Text type="success">成功</Text> : <Text type="danger">失败</Text>;
       },
     },
     {
       title: '日志',
       dataIndex: 'log',
       render: (dom, entity) => {
-        return  <Text style={{ width: 500 }} ellipsis={{ tooltip:entity.log }}>{entity.log}</Text>;
+        return <Text style={{width: 500}} ellipsis={{tooltip: entity.log}}>{entity.log}</Text>;
       },
     },
     {
@@ -79,10 +83,16 @@ const Alert = (props: any) => {
     <ProTable
       columns={columns}
       style={{width: '100%'}}
-      request={(params, sorter, filter) => queryData(url+'/history', {...params, jobInstanceId:job.instance?.id,sorter, filter})}
+      request={(params, sorter, filter) => queryData(url + '/history', {
+        ...params,
+        jobInstanceId: job.instance?.id,
+        sorter,
+        filter
+      })}
       rowKey="name"
       pagination={{
-        pageSize: 10,
+        defaultPageSize: 10,
+        showSizeChanger: true,
       }}
       toolBarRender={false}
       search={false}

dlink-web/src/pages/DevOps/JobInfo/BaseInfo/index.tsx

@@ -20,24 +20,28 @@
 
 import {Descriptions, Typography} from 'antd';
 import StatusCounts from "@/components/Common/StatusCounts";
-import ProTable from '@ant-design/pro-table';
-import {ProColumns} from "@ant-design/pro-table";
+import ProTable, {ProColumns} from '@ant-design/pro-table';
 import {VerticesTableListItem} from "@/pages/DevOps/data";
 import JobStatus from "@/components/Common/JobStatus";
 import {parseByteStr, parseMilliSecondStr, parseNumStr, parseSecondStr} from "@/components/Common/function";
+import {useIntl} from "umi";
 
-const { Text } = Typography;
+const {Text} = Typography;
 
 const BaseInfo = (props: any) => {
 
   const {job} = props;
 
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+
   const columns: ProColumns<VerticesTableListItem>[] = [
     {
       title: '名称',
       dataIndex: 'name',
       render: (dom, entity) => {
-        return  <Text style={{ width: 500 }} ellipsis={{ tooltip:entity.name }}>{entity.name}</Text>;
+        return <Text style={{width: 500}} ellipsis={{tooltip: entity.name}}>{entity.name}</Text>;
       },
     },
     {
@@ -45,31 +49,31 @@ const BaseInfo = (props: any) => {
       dataIndex: 'status',
       sorter: true,
       render: (dom, entity) => {
-        return  <JobStatus status={entity.status}/>;
+        return <JobStatus status={entity.status}/>;
       },
     },
     {
       title: '接收字节',
       render: (dom, entity) => {
-        return  parseByteStr(entity.metrics['read-bytes']);
+        return parseByteStr(entity.metrics['read-bytes']);
       },
     },
     {
       title: '接收记录',
       render: (dom, entity) => {
-        return  parseNumStr(entity.metrics['read-records']);
+        return parseNumStr(entity.metrics['read-records']);
       },
     },
     {
       title: '发送字节',
       render: (dom, entity) => {
-        return  parseByteStr(entity.metrics['write-bytes']);
+        return parseByteStr(entity.metrics['write-bytes']);
       },
     },
     {
       title: '发送记录',
       render: (dom, entity) => {
-        return  parseNumStr(entity.metrics['write-records']);
+        return parseNumStr(entity.metrics['write-records']);
       },
     },
     {
@@ -104,27 +108,29 @@ const BaseInfo = (props: any) => {
   return (<>
     <Descriptions bordered size="small">
       <Descriptions.Item label="作业状态">
-        {job?.jobHistory?.job?<StatusCounts statusCounts={job?.jobHistory?.job['status-counts']}/>:undefined}
+        {job?.jobHistory?.job ? <StatusCounts statusCounts={job?.jobHistory?.job['status-counts']}/> : undefined}
       </Descriptions.Item>
-      <Descriptions.Item label="重启次数">{job?.instance?.failedRestartCount?job?.instance?.failedRestartCount:0}</Descriptions.Item>
+      <Descriptions.Item
+        label="重启次数">{job?.instance?.failedRestartCount ? job?.instance?.failedRestartCount : 0}</Descriptions.Item>
       <Descriptions.Item label="耗时">{parseSecondStr(job?.instance?.duration)}</Descriptions.Item>
       <Descriptions.Item label="启动时间">{job?.instance?.createTime}</Descriptions.Item>
       <Descriptions.Item label="更新时间">{job?.instance?.updateTime}</Descriptions.Item>
       <Descriptions.Item label="完成时间">{job?.instance?.finishTime}</Descriptions.Item>
     </Descriptions>
-    {job?.jobHistory?.job?
-    <ProTable
-      columns={columns}
-      style={{width: '100%'}}
-      dataSource={job?.jobHistory?.job.vertices}
-      rowKey="name"
-      pagination={{
-        pageSize: 10,
-      }}
-      toolBarRender={false}
-      search={false}
-      size="small"
-    />:undefined}
+    {job?.jobHistory?.job ?
+      <ProTable
+        columns={columns}
+        style={{width: '100%'}}
+        dataSource={job?.jobHistory?.job.vertices}
+        rowKey="name"
+        pagination={{
+          defaultPageSize: 10,
+          showSizeChanger: true,
+        }}
+        toolBarRender={false}
+        search={false}
+        size="small"
+      /> : undefined}
   </>)
 };
 

dlink-web/src/pages/DevOps/JobInfo/CheckPoints/index.tsx

@@ -34,7 +34,7 @@ import {CheckPointsDetailInfo} from "@/pages/DevOps/data";
 import {CODE, queryData} from "@/components/Common/crud";
 import {selectSavePointRestartTask} from "@/pages/DevOps/service";
 import {JOB_LIFE_CYCLE} from "@/components/Common/JobLifeCycle";
-import {history} from 'umi';
+import {history, useIntl} from 'umi';
 import {SavePointTableListItem} from "@/components/Studio/StudioRightTool/StudioSavePoint/data";
 import moment from "moment";
 
@@ -43,6 +43,11 @@ const {TabPane} = Tabs;
 const CheckPoints = (props: any) => {
 
   const {job} = props;
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+
   const actionRef = useRef<ActionType>();
 
   const JsonParseObject = (item: any) => {
@@ -329,7 +334,8 @@ const CheckPoints = (props: any) => {
           actionRef={actionRef}
           rowKey="id"
           pagination={{
-            pageSize: 10,
+            defaultPageSize: 10,
+            showSizeChanger: true,
           }}
           toolBarRender={false}
           dateFormatter="string"
@@ -487,37 +493,37 @@ const CheckPoints = (props: any) => {
 
   return (<>
     {(job?.jobHistory?.checkpoints || job?.jobHistory?.checkpointsConfig) &&
-    <Tabs defaultActiveKey="overview" size="small" tabPosition="top" style={{
-      border: "1px solid #f0f0f0",
-    }}>
-      <TabPane tab={<span>&nbsp; Overview &nbsp;</span>} key="overview">
-        {!JSON.stringify(job?.jobHistory?.checkpoints).includes("errors") ?
-          getOverview(JsonParseObject(job?.jobHistory?.checkpoints)) :
-          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>}
-      </TabPane>
-
-      <TabPane tab={<span>&nbsp; History &nbsp;</span>} key="history">
-        {getHistory(JsonParseObject(job?.jobHistory?.checkpoints))}
-      </TabPane>
-
-      <TabPane tab={<span>&nbsp; Summary &nbsp;</span>} key="summary">
-        {!JSON.stringify(job?.jobHistory?.checkpoints).includes("errors") ?
-          getSummary(JsonParseObject(job?.jobHistory?.checkpoints)) :
-          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
-        }
-      </TabPane>
+      <Tabs defaultActiveKey="overview" size="small" tabPosition="top" style={{
+        border: "1px solid #f0f0f0",
+      }}>
+        <TabPane tab={<span>&nbsp; Overview &nbsp;</span>} key="overview">
+          {!JSON.stringify(job?.jobHistory?.checkpoints).includes("errors") ?
+            getOverview(JsonParseObject(job?.jobHistory?.checkpoints)) :
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>}
+        </TabPane>
+
+        <TabPane tab={<span>&nbsp; History &nbsp;</span>} key="history">
+          {getHistory(JsonParseObject(job?.jobHistory?.checkpoints))}
+        </TabPane>
+
+        <TabPane tab={<span>&nbsp; Summary &nbsp;</span>} key="summary">
+          {!JSON.stringify(job?.jobHistory?.checkpoints).includes("errors") ?
+            getSummary(JsonParseObject(job?.jobHistory?.checkpoints)) :
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
+          }
+        </TabPane>
 
-      <TabPane tab={<span>&nbsp; Configuration &nbsp;</span>} key="configuration">
-        {!JSON.stringify(job?.jobHistory?.checkpointsConfig).includes("errors") ?
-          getConfiguration(JsonParseObject(job?.jobHistory?.checkpointsConfig)) :
-          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
-        }
-      </TabPane>
+        <TabPane tab={<span>&nbsp; Configuration &nbsp;</span>} key="configuration">
+          {!JSON.stringify(job?.jobHistory?.checkpointsConfig).includes("errors") ?
+            getConfiguration(JsonParseObject(job?.jobHistory?.checkpointsConfig)) :
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
+          }
+        </TabPane>
 
-      <TabPane tab={<span>&nbsp; SavePoint &nbsp;</span>} key="savepoint">
-        {getSavePoint()}
-      </TabPane>
-    </Tabs>}
+        <TabPane tab={<span>&nbsp; SavePoint &nbsp;</span>} key="savepoint">
+          {getSavePoint()}
+        </TabPane>
+      </Tabs>}
   </>)
 };
 export default CheckPoints;

dlink-web/src/pages/DevOps/JobInfo/Config/index.tsx

@@ -20,12 +20,19 @@
 
 import {Descriptions, Divider, Tag, Typography} from 'antd';
 import {RocketOutlined} from '@ant-design/icons';
+import {useIntl} from "umi";
 
 const {Text, Link} = Typography;
 
 const Config = (props: any) => {
 
   const {job} = props;
+
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+
   return <>
     <>
       <Divider children={"Dinky Job Configuration"} orientation={"left"}/>

dlink-web/src/pages/DevOps/JobInfo/DataMap/index.tsx

@@ -18,21 +18,28 @@
  */
 
 
-import {Tabs, Empty} from 'antd';
+import {Empty, Tabs} from 'antd';
 import {getLineage} from "@/pages/DevOps/service";
 import {useEffect, useState} from "react";
-import Lineage, {getInit} from "@/components/Lineage";
+import Lineage from "@/components/Lineage";
+import {useIntl} from "umi";
+
 const {TabPane} = Tabs;
 
 const DataMap = (props: any) => {
 
   const {job} = props;
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+
   const [data, setData] = useState(undefined);
 
   const getData = () => {
     setData(undefined);
     const res = getLineage(job.instance?.id);
-    res.then((result)=>{
+    res.then((result) => {
       result.datas?.tables.forEach(table => {
         table.isExpand = true;
         table.isFold = false;
@@ -50,7 +57,7 @@ const DataMap = (props: any) => {
       border: "1px solid #f0f0f0"
     }}>
       <TabPane tab={<span>血缘分析</span>} key="Lineage">
-        {data?<Lineage datas={data}/>:<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>}
+        {data ? <Lineage datas={data}/> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>}
       </TabPane>
     </Tabs>
   </>)

dlink-web/src/pages/DevOps/JobInfo/Exception/index.tsx

@@ -18,8 +18,9 @@
  */
 
 
-import {Tabs, Empty} from 'antd';
+import {Empty, Tabs} from 'antd';
 import CodeShow from "@/components/Common/CodeShow";
+import {useIntl} from "umi";
 
 const {TabPane} = Tabs;
 
@@ -27,6 +28,10 @@ const Exception = (props: any) => {
 
   const {job} = props;
 
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+
   return (<>
     {job.jobHistory?.exceptions && <Tabs defaultActiveKey="RootException" size="small" tabPosition="top" style={{
       border: "1px solid #f0f0f0"

dlink-web/src/pages/DevOps/JobInfo/FlinkClusterInfo/JobManager/index.tsx

@@ -23,11 +23,16 @@ import CodeShow from "@/components/Common/CodeShow";
 import {getJobManagerInfo} from "@/pages/DevOps/service";
 import {useEffect, useState} from "react";
 import {JobManagerConfiguration} from "@/pages/DevOps/data";
+import {useIntl} from "umi";
 
 const {TabPane} = Tabs;
 
 const JobManagerInfo = (props: any) => {
   const {job} = props;
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const [jobManager, setJobManager] = useState<JobManagerConfiguration>();
 
   const refreshJobManagerInfo = () => {

dlink-web/src/pages/DevOps/JobInfo/FlinkClusterInfo/TaskManager/index.tsx

@@ -26,11 +26,16 @@ import {TaskContainerConfigInfo, TaskManagerConfiguration} from "@/pages/DevOps/
 import {useEffect, useRef, useState} from "react";
 import {HomeOutlined} from "@ant-design/icons";
 import {getTaskManagerInfo} from "@/pages/DevOps/service";
+import {useIntl} from "@@/plugin-locale/localeExports";
 
 const {TabPane} = Tabs;
 
 const TaskManagerInfo = (props: any) => {
   const {job} = props;
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const actionRef = useRef<ActionType>();
 
   const [activeContainer, setActiveContainer] = useState<TaskContainerConfigInfo>();

dlink-web/src/pages/DevOps/JobInfo/Version/VersionList/index.tsx

@@ -26,36 +26,41 @@ import {getIcon} from "@/components/Studio/icon";
 import {Button, Modal, Tag} from "antd";
 import {FullscreenOutlined} from "@ant-design/icons";
 import CodeShow from "@/components/Common/CodeShow";
+import {useIntl} from "umi";
 
 const url = '/api/task/version';
 const VersionList = (props: any) => {
   const {job} = props;
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+
   const actionRef = useRef<ActionType>();
   const [row, setRow] = useState<TaskVersion>();
   const [modalVisible, setModalVisible] = useState<boolean>(false);
 
 
-
   const cancelHandle = () => {
     setRow(undefined);
     setModalVisible(false);
   }
 
-  const handleShowStatement = (item: any) =>{
+  const handleShowStatement = (item: any) => {
     return (
       <div style={{width: "1100px"}}>
         <Modal title="作业执行 SQL" visible={modalVisible} destroyOnClose={true} width={"60%"}
-         onCancel={()=>{
-           cancelHandle();
-         }}
-         footer={[
-           <Button key="back" onClick={() => {
-             cancelHandle();
-           }}>
-             关闭
-           </Button>,
-         ]}>
-          <CodeShow language={"sql"} code={item?.statement} height={'600px'} />
+               onCancel={() => {
+                 cancelHandle();
+               }}
+               footer={[
+                 <Button key="back" onClick={() => {
+                   cancelHandle();
+                 }}>
+                   关闭
+                 </Button>,
+               ]}>
+          <CodeShow language={"sql"} code={item?.statement} height={'600px'}/>
         </Modal>
       </div>
     )
@@ -63,7 +68,6 @@ const VersionList = (props: any) => {
   }
 
 
-
   const columns: ProColumns<TaskVersion>[] = [
     {
       title: '作业ID',
@@ -88,12 +92,12 @@ const VersionList = (props: any) => {
       align: 'center',
       render: (dom, entity) => {
         return <>
-            {getIcon(entity.dialect) }
-            {
+          {getIcon(entity.dialect)}
+          {
             <Tag color="blue">
               {entity.dialect}
             </Tag>
-            }
+          }
         </>;
       },
     },
@@ -124,19 +128,19 @@ const VersionList = (props: any) => {
       render: (dom, entity) => {
         return <>
           {<>
-            <a onClick={()=>{
+            <a onClick={() => {
               setRow(entity)
               setModalVisible(true);
             }}>
               <Tag color="green">
-                <FullscreenOutlined title={"查看作业详情"}  />
+                <FullscreenOutlined title={"查看作业详情"}/>
               </Tag> 查看作业详情
             </a>
 
           </>
           }
         </>
-        ;
+          ;
       },
     },
     {
@@ -175,7 +179,8 @@ const VersionList = (props: any) => {
         actionRef={actionRef}
         rowKey="id"
         pagination={{
-          pageSize: 10,
+          defaultPageSize: 10,
+          showSizeChanger: true,
         }}
         bordered
         search={false}

dlink-web/src/pages/DevOps/JobInfo/Version/VersionTimeLineList/index.tsx

@@ -24,12 +24,18 @@ import {queryData} from "@/components/Common/crud";
 import moment from "moment";
 import {TaskVersion} from "@/pages/DevOps/data";
 import {CheckCircleOutlined, SyncOutlined} from "@ant-design/icons";
+import {useIntl} from "umi";
 // import {Scrollbars} from "react-custom-scrollbars";
 
 const url = '/api/task/version';
 
 const VersionTimeLineList = (props: any) => {
   const {job} = props;
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+
   const [mode, setMode] = useState<'left' | 'alternate' | 'right'>('alternate');
   const [reverse, setReverse] = useState(false);
   const onChange = (e: RadioChangeEvent) => {
@@ -38,7 +44,7 @@ const VersionTimeLineList = (props: any) => {
 
   const [taskVersionData, setTaskVersionData] = useState<TaskVersion>();
 
-  let taskId =job.instance.taskId;
+  let taskId = job.instance.taskId;
   const getVersionData = () => {
     setTaskVersionData(undefined);
     const res = queryData(url, {taskId, sorter: {versionId: 'descend'}});
@@ -72,7 +78,8 @@ const VersionTimeLineList = (props: any) => {
     let tempData = taskVersionData
     for (let key in tempData) {
       formList.push(
-        <Timeline.Item dot={(<CheckCircleOutlined/>)} label={moment(tempData[key].createTime).format("YYYY-MM-DD HH:mm:ss")} color="green">
+        <Timeline.Item dot={(<CheckCircleOutlined/>)}
+                       label={moment(tempData[key].createTime).format("YYYY-MM-DD HH:mm:ss")} color="green">
           <p>{tempData[key].name}: Create Version 【{tempData[key].versionId}】
             {/*site 【{ moment(tempData[key].createTime).format("YYYY-MM-DD HH:mm:ss")}】*/}
           </p>
@@ -92,29 +99,30 @@ const VersionTimeLineList = (props: any) => {
     <div style={{
       marginTop: "20px",
     }}>
-        <Button type="primary" style={{  margin:"5px"  }} onClick={handleClick}>
-          {reverse? "倒序": "正序"}
-        </Button>
-        <Button type="primary" style={{  margin:"5px" }} onClick={refresh}>
-          刷新
-        </Button>
-        <Radio.Group
-          onChange={onChange}
-          value={mode}
-        >
-          <Radio value="left">Left</Radio>
-          <Radio value="right">Right</Radio>
-          <Radio value="alternate">Alternate</Radio>
-        </Radio.Group>
-      <Card size="small"  style={{ width: "auto" }}>
+      <Button type="primary" style={{margin: "5px"}} onClick={handleClick}>
+        {reverse ? "倒序" : "正序"}
+      </Button>
+      <Button type="primary" style={{margin: "5px"}} onClick={refresh}>
+        刷新
+      </Button>
+      <Radio.Group
+        onChange={onChange}
+        value={mode}
+      >
+        <Radio value="left">Left</Radio>
+        <Radio value="right">Right</Radio>
+        <Radio value="alternate">Alternate</Radio>
+      </Radio.Group>
+      <Card size="small" style={{width: "auto"}}>
         {/*<Scrollbars  style={{height: "450px"}} >*/}
-          <br/><br/>
-          <Timeline mode={mode}  pending={moment().format("YYYY-MM-DD HH:mm:ss")+" Developing..."} reverse={reverse} pendingDot={<SyncOutlined spin/>}>
-            {getTimelineForm()}
-          </Timeline>
-          <BackTop>
-            <div style={style}>Top</div>
-          </BackTop>
+        <br/><br/>
+        <Timeline mode={mode} pending={moment().format("YYYY-MM-DD HH:mm:ss") + " Developing..."} reverse={reverse}
+                  pendingDot={<SyncOutlined spin/>}>
+          {getTimelineForm()}
+        </Timeline>
+        <BackTop>
+          <div style={style}>Top</div>
+        </BackTop>
         {/*</Scrollbars>*/}
       </Card>
 

dlink-web/src/pages/DevOps/JobInfo/Version/index.tsx

@@ -21,11 +21,15 @@
 import {Tabs} from "antd";
 import VersionList from "@/pages/DevOps/JobInfo/Version/VersionList";
 import VersionTimeLineList from "@/pages/DevOps/JobInfo/Version/VersionTimeLineList";
+import {useIntl} from "umi";
 
 const {TabPane} = Tabs;
 const TaskVersionInfo = (props: any) => {
   const {job} = props;
 
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   return (<>
     <Tabs defaultActiveKey="overview" size="small" tabPosition="top" style={{
       border: "1px solid #f0f0f0",

dlink-web/src/pages/DevOps/JobInfo/index.tsx

@@ -19,7 +19,7 @@
 
 
 import {useEffect, useState} from 'react';
-import {history, useLocation} from 'umi';
+import {history, useIntl, useLocation} from 'umi';
 import {ClusterOutlined, EllipsisOutlined, FireOutlined, RedoOutlined, RocketOutlined} from '@ant-design/icons';
 import {Button, Dropdown, Empty, Menu, message, Modal, Space, Tag, Typography} from 'antd';
 import {PageContainer} from '@ant-design/pro-layout';
@@ -46,6 +46,9 @@ const {Link} = Typography;
 
 const JobInfo = (props: any) => {
 
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const params = useLocation();
   const {} = props;
   const id = params.query.id;

dlink-web/src/pages/DevOps/JobInstanceTable/index.tsx

@@ -18,11 +18,10 @@
  */
 
 
-
-import { useIntl, Link, history, FormattedMessage, SelectLang, useModel } from 'umi';
+import {history, useIntl} from 'umi';
 import {queryData} from "@/components/Common/crud";
-import {useState, useRef, useEffect} from "react";
-import type {ProColumns, ActionType} from '@ant-design/pro-table';
+import {useEffect, useRef, useState} from "react";
+import type {ActionType, ProColumns} from '@ant-design/pro-table';
 import ProTable from "@ant-design/pro-table";
 import {Badge, message} from 'antd'
 import {JobInstanceTableListItem} from "@/pages/DevOps/data";
@@ -32,11 +31,7 @@ import JobStatus from "@/components/Common/JobStatus";
 import JobLifeCycle, {JOB_LIFE_CYCLE} from "@/components/Common/JobLifeCycle";
 import OpsStatusModal from "@/pages/DevOps/OpsStatusModel/index";
 import StatusDetailedModal from "@/pages/DevOps/StatusDetailedModel/index";
-import {
-  queryOneClickOperatingTaskStatus,
-  onClickOperatingTask,
-  queryAllCatalogue
-} from "@/pages/DevOps/service";
+import {onClickOperatingTask, queryAllCatalogue, queryOneClickOperatingTaskStatus} from "@/pages/DevOps/service";
 
 
 const OPS_STATUS_COLOR = {
@@ -51,6 +46,10 @@ const JobInstanceTable = (props: any) => {
 
   const intl = useIntl();
 
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+
   const {status, activeKey, isHistory, taskStatus} = props;
   const [time, setTime] = useState(() => Date.now());
   const [opsStatusVisible, setOpsStatusVisible] = useState<boolean>(false);
@@ -272,10 +271,14 @@ const JobInstanceTable = (props: any) => {
         filterType: 'light',
       }}
 
-      headerTitle={intl.formatMessage({id: 'pages.devops.JobInstanceTable.LastUpdateTime', defaultMessage: intl.formatMessage({id: 'global.table.lastUpdateTime', defaultMessage: '上次更新时间',}),})+`：${moment(time).format('HH:mm:ss')}`}
+      headerTitle={intl.formatMessage({
+        id: 'pages.devops.JobInstanceTable.LastUpdateTime',
+        defaultMessage: intl.formatMessage({id: 'global.table.lastUpdateTime', defaultMessage: '上次更新时间',}),
+      }) + `：${moment(time).format('HH:mm:ss')}`}
       polling={status == activeKey ? 3000 : undefined}
       pagination={{
-        pageSize: 10,
+        defaultPageSize: 10,
+        showSizeChanger: true,
       }}
       onRow={record => {
         return {

dlink-web/src/pages/DevOps/OpsStatusModel/index.tsx

@@ -17,11 +17,12 @@
  *
  */
 
-import React, {useState, useRef, useEffect} from 'react'
-import {Modal, Card, Select, Checkbox, Form, Divider, Row, Col, TreeSelect, Button} from 'antd'
+import React, {useEffect, useRef, useState} from 'react'
+import {Button, Card, Checkbox, Col, Divider, Form, Modal, Row, Select, TreeSelect} from 'antd'
 import {queryOnClickOperatingTask} from '../service'
 import type {CheckboxChangeEvent} from 'antd/es/checkbox';
 import type {CheckboxValueType} from 'antd/es/checkbox/Group';
+import {useIntl} from 'umi';
 
 interface IOpsStatusModalProps {
   opsStatusVisible: boolean;
@@ -39,6 +40,11 @@ const {Option} = Select
 const CheckboxGroup = Checkbox.Group;
 
 const OpsStatusModal: React.FC<IOpsStatusModalProps> = (props): React.ReactElement => {
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+
   const {opsStatusVisible, opsStatus, opsStatusListTree, onOpsStatusCallBack} = props
   const formRef = useRef<any>(null)
   const [opsStatusList, setOpsStatusList] = useState<any[]>([])
@@ -47,7 +53,7 @@ const OpsStatusModal: React.FC<IOpsStatusModalProps> = (props): React.ReactEleme
   useEffect(() => {
     setTreeValue(null)
     setOpsStatusList([])
-    formRef.current?.resetFields(['tasks','checkoutAll'])
+    formRef.current?.resetFields(['tasks', 'checkoutAll'])
     console.log(opsStatus)
     if (opsStatus === '1') {
       formRef.current?.setFieldsValue({

dlink-web/src/pages/DevOps/StatusDetailedModel/index.tsx

@@ -18,7 +18,8 @@
  */
 
 import React from 'react';
-import {Modal, Table, Button, Tooltip} from 'antd'
+import {Button, Modal, Table, Tooltip} from 'antd'
+import {useIntl} from 'umi';
 
 interface IStatusDetailedModal {
   statusDetailedVisible: boolean;
@@ -36,6 +37,11 @@ export const OpsStatusTitle = {
 const StatusDetailedModal: React.FC<IStatusDetailedModal> = (props): React.ReactElement => {
   const {statusDetailedVisible, statusDetailedList, opsStatus, onCancelStatusDetailed} = props
 
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+
   const columns = [{
     title: '名称',
     dataIndex: 'name'

dlink-web/src/pages/Document/components/DocumentForm.tsx

@@ -23,6 +23,7 @@ import {Button, Form, Input, Modal, Select, Switch} from 'antd';
 import {DocumentTableListItem} from "@/pages/Document/data";
 import TextArea from "antd/es/input/TextArea";
 import {getDocumentFormData,} from "@/pages/Document/function";
+import {useIntl} from 'umi';
 
 export type DocumentFormProps = {
   onCancel: (flag?: boolean) => void;
@@ -43,6 +44,9 @@ const formLayout = {
 
 const DocumentForm: React.FC<DocumentFormProps> = (props) => {
 
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const [form] = Form.useForm();
   const [formVals, setFormVals] = useState<Partial<DocumentTableListItem>>({
     id: props.values.id,

dlink-web/src/pages/Document/index.tsx

@@ -30,11 +30,15 @@ import Dropdown from "antd/es/dropdown/dropdown";
 import Menu from "antd/es/menu";
 import {handleAddOrUpdate, handleRemove, queryData, updateEnabled} from "@/components/Common/crud";
 import DocumentForm from "./components/DocumentForm";
+import {useIntl} from 'umi';
 
 const url = '/api/document';
 
 const DocumentTableList: React.FC<{}> = (props: any) => {
 
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const [modalVisible, handleModalVisible] = useState<boolean>(false);
   const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
   const [formValues, setFormValues] = useState({});
@@ -491,6 +495,10 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
         rowSelection={{
           onChange: (_, selectedRows) => setSelectedRows(selectedRows),
         }}
+        pagination={{
+          defaultPageSize: 10,
+          showSizeChanger: true,
+        }}
       />
       {selectedRowsState?.length > 0 && (
         <FooterToolbar

dlink-web/src/pages/Flink/FlinkColumns/index.tsx

@@ -22,9 +22,13 @@ import React from "react";
 import {CheckSquareOutlined, KeyOutlined} from '@ant-design/icons';
 import DTable from "@/components/Common/DTable";
 import {DIALECT} from "@/components/Studio/conf";
+import {useIntl} from 'umi';
 
 const FlinkColumns = (props: any) => {
 
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const {envId, catalog, database, table} = props;
 
   const cols = [{

dlink-web/src/pages/FragmentVariable/components/FragmentForm.tsx

@@ -21,6 +21,7 @@ import React, {useState} from 'react';
 import {Button, Form, Input, Modal, Switch} from 'antd';
 import TextArea from "antd/es/input/TextArea";
 import {FragmentVariableTableListItem} from "@/pages/FragmentVariable/data";
+import {useIntl} from 'umi';
 
 export type FragmentFormProps = {
   onCancel: (flag?: boolean) => void;
@@ -40,6 +41,9 @@ const formLayout = {
 
 const FragmentForm: React.FC<FragmentFormProps> = (props: any) => {
 
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const [form] = Form.useForm();
   const [formVals, setFormVals] = useState<Partial<FragmentVariableTableListItem>>({
     id: props.values.id,

dlink-web/src/pages/FragmentVariable/index.tsx

@@ -29,11 +29,15 @@ import Menu from "antd/es/menu";
 import {handleAddOrUpdate, handleRemove, queryData, updateEnabled} from "@/components/Common/crud";
 import FragmentForm from "@/pages/FragmentVariable/components/FragmentForm";
 import {FragmentVariableTableListItem} from "./data.d";
+import {useIntl} from 'umi';
 
 const url = '/api/fragment';
 
 const FragmentTableList: React.FC<{}> = (props: any) => {
 
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const [modalVisible, handleModalVisible] = useState<boolean>(false);
   const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
   const [formValues, setFormValues] = useState({});
@@ -205,6 +209,10 @@ const FragmentTableList: React.FC<{}> = (props: any) => {
 
           },
         }}
+        pagination={{
+          defaultPageSize: 10,
+          showSizeChanger: true,
+        }}
       />
       {selectedRowsState?.length > 0 && (
         <FooterToolbar

dlink-web/src/pages/Jar/components/JarForm.tsx

@@ -21,6 +21,7 @@
 import React, {useState} from 'react';
 import {Button, Divider, Form, Input, Modal, Select, Switch} from 'antd';
 import {JarTableListItem} from "@/pages/Jar/data";
+import {useIntl} from 'umi';
 
 export type JarFormProps = {
   onCancel: (flag?: boolean) => void;
@@ -37,6 +38,9 @@ const formLayout = {
 
 const JarForm: React.FC<JarFormProps> = (props) => {
 
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const [form] = Form.useForm();
   const [formVals, setFormVals] = useState<Partial<JarTableListItem>>({
     id: props.values.id,

dlink-web/src/pages/Jar/index.tsx

@@ -27,10 +27,16 @@ import ProDescriptions from '@ant-design/pro-descriptions';
 import {JarTableListItem} from "@/pages/Jar/data";
 import {CODE, handleAddOrUpdate, handleRemove, queryData, updateEnabled} from "@/components/Common/crud";
 import JarForm from "@/pages/Jar/components/JarForm";
+import {useIntl} from 'umi';
 
 const url = '/api/jar';
 const JarTableList: React.FC<{}> = (props: any) => {
   const {dispatch} = props;
+
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const [row, setRow] = useState<JarTableListItem>();
   const [modalVisible, handleModalVisible] = useState<boolean>(false);
   const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
@@ -246,6 +252,10 @@ const JarTableList: React.FC<{}> = (props: any) => {
         rowSelection={{
           onChange: (_, selectedRows) => setSelectedRows(selectedRows),
         }}
+        pagination={{
+          defaultPageSize: 10,
+          showSizeChanger: true,
+        }}
       />
       {selectedRowsState?.length > 0 && (
         <FooterToolbar

dlink-web/src/pages/SettingCenter/FlinkSettings/components/flinkConfig.tsx

@@ -39,6 +39,11 @@ const FlinkConfigView: React.FC<FlinkConfigProps> = (props) => {
 
   const intl = useIntl();
 
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+
   const {
     sqlSubmitJarPath,
     sqlSubmitJarParas,

dlink-web/src/pages/Task/components/CreateForm.tsx

@@ -19,7 +19,8 @@
 
 
 import React from 'react';
-import { Modal } from 'antd';
+import {Modal} from 'antd';
+import {useIntl} from 'umi';
 
 type CreateFormProps = {
   modalVisible: boolean;
@@ -27,7 +28,10 @@ type CreateFormProps = {
 };
 
 const CreateForm: React.FC<CreateFormProps> = (props) => {
-  const { modalVisible, onCancel } = props;
+  const {modalVisible, onCancel} = props;
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
 
   return (
     <Modal

dlink-web/src/pages/Task/components/updateForm.tsx

@@ -18,11 +18,12 @@
  */
 
 
-import React, { useState} from 'react';
-import {Form, Button, Input, Modal} from 'antd';
+import React, {useState} from 'react';
+import {Button, Form, Input, Modal} from 'antd';
 
-import  {TaskTableListItem} from "@/pages/Task/data";
+import {TaskTableListItem} from "@/pages/Task/data";
 import Switch from "antd/es/switch";
+import {useIntl} from 'umi';
 
 export type UpdateFormProps = {
   onCancel: (flag?: boolean, formVals?: Partial<TaskTableListItem>) => void;
@@ -38,6 +39,10 @@ const formLayout = {
 };
 
 const UpdateForm: React.FC<UpdateFormProps> = (props) => {
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const [formVals, setFormVals] = useState<Partial<TaskTableListItem>>({
     id: props.values.id,
     name: props.values.name,
@@ -67,7 +72,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
     handleUpdate({...formVals, ...fieldsValue});
   };
 
-  const renderContent = (formVals:any) => {
+  const renderContent = (formVals: any) => {
     return (
       <>
         <FormItem

dlink-web/src/pages/Welcome.tsx

@@ -33,6 +33,11 @@ const CodePreview: React.FC = ({children}) => (
 );
 
 export default (): React.ReactNode => {
+
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const intl = useIntl();
   return (
     <>
@@ -137,11 +142,13 @@ export default (): React.ReactNode => {
                   <Link>支持以 SPI 的方式扩展任意 Connector，同 Flink 官网</Link>
                 </li>
                 <li>
-                  <Link>提供了 dlink-connector-jdbc，额外支持 Oracle 和 ClickHouse 读写，该扩展包可直接上传 Flink 集群的 lib
+                  <Link>提供了 dlink-connector-jdbc，额外支持 Oracle 和 ClickHouse 读写，该扩展包可直接上传 Flink 集群的
+                    lib
                     进行远程使用，无需重新编译</Link>
                 </li>
                 <li>
-                  <Link>提供了 dlink-client-1.12，支持 Flink 1.12.0+ 多集群的远程使用与本地隔离使用，1.10、1.11 和 1.13 集群可能存在问题</Link>
+                  <Link>提供了 dlink-client-1.12，支持 Flink 1.12.0+ 多集群的远程使用与本地隔离使用，1.10、1.11 和 1.13
+                    集群可能存在问题</Link>
                 </li>
                 <li>
                   <Link>优化了 FlinkSQL 执行与提交到远程集群的任务名，默认为作业的中文别名</Link>

dlink-web/src/pages/user/Login/index.tsx

@@ -21,7 +21,7 @@ import {LockOutlined, UserOutlined,} from '@ant-design/icons';
 import {Button, message, Modal} from 'antd';
 import React, {useEffect, useState} from 'react';
 import ProForm, {ProFormCheckbox, ProFormText} from '@ant-design/pro-form';
-import {FormattedMessage, history, Link, SelectLang, useIntl, useModel} from 'umi';
+import {history, Link, SelectLang, useIntl, useModel} from 'umi';
 import Footer from '@/components/Footer';
 import {login} from '@/services/ant-design-pro/api';
 import {CheckCard} from '@ant-design/pro-components';
@@ -53,7 +53,10 @@ const Login: React.FC = () => {
   const [tenant, setTenant] = useState<TenantTableListItem[]>([]);
 
   const [checkDisabled, setCheckDisabled] = useState<boolean>(true);
-  const intl = useIntl();
+
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
 
   const fetchUserInfo = async () => {
     const userInfo = await initialState?.fetchUserInfo?.();
@@ -93,30 +96,17 @@ const Login: React.FC = () => {
       // 登录
       const msg = await login({...values, type});
       if (msg.code === 0 && msg.datas != undefined) {
-        const defaultloginSuccessMessage = intl.formatMessage({
-          id: 'pages.login.success',
-          defaultMessage: '登录成功！',
-        });
-        message.success(defaultloginSuccessMessage);
+        message.success(l('pages.login.success'));
         await fetchUserInfo();
         goto();
         return;
       } else {
-        const defaultloginFailureMessage = intl.formatMessage({
-          id: msg.msg,
-          defaultMessage: msg.msg,
-        });
-        message.error(defaultloginFailureMessage);
+        message.error(l(msg.msg, msg.msg));
       }
       // 如果失败去设置用户错误信息
       setUserLoginState(msg.datas);
     } catch (error) {
-      const defaultloginFailureMessage = intl.formatMessage({
-        id: 'pages.login.failure',
-        defaultMessage: '登录失败，请重试！',
-      });
-
-      message.error(defaultloginFailureMessage);
+      message.error(l('pages.login.failure'));
     }
     setSubmitting(false);
   };
@@ -126,7 +116,7 @@ const Login: React.FC = () => {
   const handleShowTenant = () => {
 
     return <>
-      <Modal title={intl.formatMessage({id: 'pages.login.chooseTenant'})} visible={chooseTenant} destroyOnClose={true}
+      <Modal title={l('pages.login.chooseTenant')} visible={chooseTenant} destroyOnClose={true}
              width={"60%"}
              onCancel={() => {
                setChooseTenant(false);
@@ -135,7 +125,7 @@ const Login: React.FC = () => {
                <Button key="back" onClick={() => {
                  setChooseTenant(false);
                }}>
-                 {intl.formatMessage({id: 'button.close'})}
+                 {l('button.close')}
                </Button>,
                <Button disabled={checkDisabled} type="primary" key="submit" loading={submitting}
                        onClick={async () => {
@@ -143,7 +133,7 @@ const Login: React.FC = () => {
                          localStorage.setItem("dlink-tenantId", tenantId.toString());
                          await handleSubmit(userParamsState);
                        }}>
-                 {intl.formatMessage({id: 'button.confirm'})}
+                 {l('button.confirm')}
                </Button>
              ]}>
         <CheckCard.Group
@@ -188,7 +178,7 @@ const Login: React.FC = () => {
             </Link>
           </div>
           <div className={styles.desc}>
-            {intl.formatMessage({id: 'pages.layouts.userLayout.title'})}
+            {l('pages.layouts.userLayout.title')}
           </div>
         </div>
 
@@ -199,10 +189,7 @@ const Login: React.FC = () => {
             }}
             submitter={{
               searchConfig: {
-                submitText: intl.formatMessage({
-                  id: 'pages.login.submit',
-                  defaultMessage: '登录',
-                }),
+                submitText: l('pages.login.submit'),
               },
               render: (_, dom) => dom.pop(),
               submitButtonProps: {
@@ -229,19 +216,11 @@ const Login: React.FC = () => {
                     size: 'large',
                     prefix: <UserOutlined className={styles.prefixIcon}/>,
                   }}
-                  placeholder={intl.formatMessage({
-                    id: 'pages.login.username.placeholder',
-                    defaultMessage: '用户名:',
-                  })}
+                  placeholder={l('pages.login.username.placeholder')}
                   rules={[
                     {
                       required: true,
-                      message: (
-                        <FormattedMessage
-                          id="pages.login.username.required"
-                          defaultMessage="请输入用户名!"
-                        />
-                      ),
+                      message: l('pages.login.username.required'),
                     },
                   ]}
                 />
@@ -251,19 +230,11 @@ const Login: React.FC = () => {
                     size: 'large',
                     prefix: <LockOutlined className={styles.prefixIcon}/>,
                   }}
-                  placeholder={intl.formatMessage({
-                    id: 'pages.login.password.placeholder',
-                    defaultMessage: '密码:',
-                  })}
+                  placeholder={l('pages.login.password.placeholder')}
                   rules={[
                     {
                       required: true,
-                      message: (
-                        <FormattedMessage
-                          id="pages.login.password.required"
-                          defaultMessage="请输入密码！"
-                        />
-                      ),
+                      message: l('pages.login.password.required'),
                     },
                   ]}
                 />
@@ -277,14 +248,14 @@ const Login: React.FC = () => {
               }}
             >
               <ProFormCheckbox noStyle name="autoLogin">
-                <FormattedMessage id="pages.login.rememberMe" defaultMessage="自动登录"/>
+                {l('pages.login.rememberMe')}
               </ProFormCheckbox>
               <a
                 style={{
                   float: 'right',
                 }}
               >
-                <FormattedMessage id="pages.login.forgotPassword" defaultMessage="忘记密码"/>
+                {l('pages.login.forgotPassword')}
               </a>
             </div>
           </ProForm>