Skip to content

D
dlink
Unverified Commit 0305d3f8 authored by zhu-mingye's avatar zhu-mingye Committed by GitHub
Browse files
Options

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

* optimization Frontend code and internationalization

* optimization internationalization

* optimization internationalization code

* optimization global.less
parent 12f7e2ef
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1258 additions and 1147 deletions
dlink-web/src/components/Common/DTable.tsx
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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);
},
......@@ -267,8 +267,12 @@ const StudioFX = () => {
search={{
labelWidth: 120,
}}
request={(params, sorter, filter) => queryData(url,{...params, sorter, filter})}
request={(params, sorter, filter) => queryData(url, {...params, sorter, filter})}
columns={columns}
pagination={{
defaultPageSize: 5,
showSizeChanger: true,
}}
/>
<Drawer
width={600}
......
dlink-web/src/components/Studio/StudioConsole/StudioHistory/index.tsx
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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>('');
......@@ -316,7 +314,13 @@ const StudioConnector = (props: any) => {
</>)}
<Scrollbars style={{height: (toolHeight - 32)}}>
{currentSession.connectors && currentSession.connectors.length > 0 ? (
<Table dataSource={currentSession.connectors} columns={getColumns()} size="small"/>) : (
<Table
dataSource={currentSession.connectors}
pagination={{
defaultPageSize: 10,
showSizeChanger: true,
}}
columns={getColumns()} size="small"/>) : (
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>)}
<ModalForm
visible={modalVisit}
......
dlink-web/src/components/Studio/StudioLeftTool/StudioDataBase/index.tsx
View file @ 0305d3f8
......@@ -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',
......@@ -235,7 +227,14 @@ const StudioDataBase = (props: any) => {
</Tooltip>
<Scrollbars style={{height: (toolHeight - 32)}}>
{database.length > 0 ? (
<Table dataSource={database} columns={getColumns()} size="small"/>) : (
<Table
dataSource={database}
columns={getColumns()}
pagination={{
defaultPageSize: 10,
showSizeChanger: true,
}}
size="small"/>) : (
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>)}
<DBForm
onCancel={() => {
......
dlink-web/src/components/Studio/StudioLeftTool/StudioFragment/index.tsx
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
/*
*
* 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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -20,9 +20,14 @@
import {Button, Result} from 'antd';
import React from 'react';
import {history} from 'umi';
import {history, useIntl} from 'umi';
const NoFoundPage: React.FC = () => (
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"
......@@ -33,6 +38,7 @@ const NoFoundPage: React.FC = () => (
</Button>
}
/>
);
)
};
export default NoFoundPage;
dlink-web/src/pages/API/TaskAPI/index.tsx
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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>
......@@ -194,7 +200,7 @@ const DataBaseForm: React.FC<ClickHouseFormProps> = (props) => {
handleModalVisible(false)
}}>
返回
</Button>:undefined
</Button> : undefined
}
<Button htmlType="button" onClick={onReset}>
重置
......
dlink-web/src/pages/DataBase/index.tsx
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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,7 +197,9 @@ const TableData = (props: any) => {
})
}}
>
<Input addonBefore="ORDER BY" placeholder={intl.formatMessage({id: 'pages.TableData.sorting', defaultMessage: '排序',})} onChange={(value) => {
<Input addonBefore="ORDER BY"
placeholder={intl.formatMessage({id: 'pages.TableData.sorting', defaultMessage: '排序',})}
onChange={(value) => {
setOptionInput({
whereInput: optionInput.whereInput,
orderInput: value.target.value
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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>;
},
},
{
......@@ -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?
{job?.jobHistory?.job ?
<ProTable
columns={columns}
style={{width: '100%'}}
dataSource={job?.jobHistory?.job.vertices}
rowKey="name"
pagination={{
pageSize: 10,
defaultPageSize: 10,
showSizeChanger: true,
}}
toolBarRender={false}
search={false}
size="small"
/>:undefined}
/> : undefined}
</>)
};
......
dlink-web/src/pages/DevOps/JobInfo/CheckPoints/index.tsx
View file @ 0305d3f8
......@@ -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"
......
dlink-web/src/pages/DevOps/JobInfo/Config/index.tsx
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -26,26 +26,31 @@ 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={()=>{
onCancel={() => {
cancelHandle();
}}
footer={[
......@@ -55,7 +60,7 @@ const VersionList = (props: any) => {
关闭
</Button>,
]}>
<CodeShow language={"sql"} code={item?.statement} height={'600px'} />
<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,7 +92,7 @@ const VersionList = (props: any) => {
align: 'center',
render: (dom, entity) => {
return <>
{getIcon(entity.dialect) }
{getIcon(entity.dialect)}
{
<Tag color="blue">
{entity.dialect}
......@@ -124,12 +128,12 @@ 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
View file @ 0305d3f8
......@@ -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,10 +99,10 @@ const VersionTimeLineList = (props: any) => {
<div style={{
marginTop: "20px",
}}>
<Button type="primary" style={{ margin:"5px" }} onClick={handleClick}>
{reverse? "倒序": "正序"}
<Button type="primary" style={{margin: "5px"}} onClick={handleClick}>
{reverse ? "倒序" : "正序"}
</Button>
<Button type="primary" style={{ margin:"5px" }} onClick={refresh}>
<Button type="primary" style={{margin: "5px"}} onClick={refresh}>
刷新
</Button>
<Radio.Group
......@@ -106,10 +113,11 @@ const VersionTimeLineList = (props: any) => {
<Radio value="right">Right</Radio>
<Radio value="alternate">Alternate</Radio>
</Radio.Group>
<Card size="small" style={{ width: "auto" }}>
<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/>}>
<Timeline mode={mode} pending={moment().format("YYYY-MM-DD HH:mm:ss") + " Developing..."} reverse={reverse}
pendingDot={<SyncOutlined spin/>}>
{getTimelineForm()}
</Timeline>
<BackTop>
......
dlink-web/src/pages/DevOps/JobInfo/Version/index.tsx
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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/DevOps/index.tsx
View file @ 0305d3f8
This diff is collapsed.
dlink-web/src/pages/Document/components/DocumentForm.tsx
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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 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/Task/index.tsx
View file @ 0305d3f8
......@@ -18,26 +18,29 @@
*/
import {DownOutlined, PlusOutlined, UserOutlined} from '@ant-design/icons';
import {Button, message, Input, Drawer, Modal} from 'antd';
import React, {useState, useRef} from 'react';
import {PageContainer, FooterToolbar} from '@ant-design/pro-layout';
import type {ProColumns, ActionType} from '@ant-design/pro-table';
import {DownOutlined, PlusOutlined} from '@ant-design/icons';
import {Button, Drawer, Input, Modal} from 'antd';
import React, {useRef, useState} from 'react';
import {FooterToolbar, PageContainer} from '@ant-design/pro-layout';
import type {ActionType, ProColumns} from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import ProDescriptions from '@ant-design/pro-descriptions';
import CreateForm from './components/CreateForm';
import UpdateForm from './components/UpdateForm';
import type {TaskTableListItem} from './data.d';
import styles from './index.less';
import Dropdown from "antd/es/dropdown/dropdown";
import Menu from "antd/es/menu";
import {handleAddOrUpdate, handleRemove, handleSubmit, queryData, updateEnabled} from "@/components/Common/crud";
import {useIntl} from 'umi';
const url = '/api/task';
const TaskTableList: React.FC<{}> = () => {
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
const [formValues, setFormValues] = useState({});
......@@ -55,8 +58,8 @@ const TaskTableList: React.FC<{}> = () => {
content: '确定删除该作业吗？',
okText: '确认',
cancelText: '取消',
onOk:async () => {
await handleRemove(url,[currentItem]);
onOk: async () => {
await handleRemove(url, [currentItem]);
actionRef.current?.reloadAndRest?.();
}
});
......@@ -66,8 +69,8 @@ const TaskTableList: React.FC<{}> = () => {
content: '确定执行该作业吗？',
okText: '确认',
cancelText: '取消',
onOk:async () => {
await handleSubmit(url+'/submit','作业',[currentItem]);
onOk: async () => {
await handleSubmit(url + '/submit', '作业', [currentItem]);
actionRef.current?.reloadAndRest?.();
}
});
......@@ -207,8 +210,8 @@ const TaskTableList: React.FC<{}> = () => {
],
filterMultiple: false,
valueEnum: {
true: { text: '正常', status: 'Success' },
false: { text: '禁用', status: 'Error' },
true: {text: '正常', status: 'Success'},
false: {text: '禁用', status: 'Error'},
},
},
{
......@@ -217,14 +220,14 @@ const TaskTableList: React.FC<{}> = () => {
sorter: true,
valueType: 'dateTime',
hideInForm: true,
hideInTable:true,
renderFormItem: (item, { defaultRender, ...rest }, form) => {
hideInTable: 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);
},
......@@ -235,13 +238,13 @@ const TaskTableList: React.FC<{}> = () => {
sorter: true,
valueType: 'dateTime',
hideInForm: true,
renderFormItem: (item, { defaultRender, ...rest }, form) => {
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);
},
......@@ -278,11 +281,15 @@ const TaskTableList: React.FC<{}> = () => {
<PlusOutlined/> 新建
</Button>,
]}
request={(params, sorter, filter) => queryData(url,{...params, sorter, filter})}
request={(params, sorter, filter) => queryData(url, {...params, sorter, filter})}
columns={columns}
rowSelection={{
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
}}
pagination={{
defaultPageSize: 10,
showSizeChanger: true,
}}
/>
{selectedRowsState?.length > 0 && (
<FooterToolbar
......@@ -296,14 +303,14 @@ const TaskTableList: React.FC<{}> = () => {
}
>
<Button type="primary" danger
onClick ={()=>{
onClick={() => {
Modal.confirm({
title: '删除作业',
content: '确定删除选中的作业吗？',
okText: '确认',
cancelText: '取消',
onOk:async () => {
await handleRemove(url,selectedRowsState);
onOk: async () => {
await handleRemove(url, selectedRowsState);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}
......@@ -313,14 +320,14 @@ const TaskTableList: React.FC<{}> = () => {
批量删除
</Button>
<Button type="primary"
onClick ={()=>{
onClick={() => {
Modal.confirm({
title: '启用作业',
content: '确定启用选中的作业吗？',
okText: '确认',
cancelText: '取消',
onOk:async () => {
await updateEnabled(url,selectedRowsState, true);
onOk: async () => {
await updateEnabled(url, selectedRowsState, true);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}
......@@ -328,14 +335,14 @@ const TaskTableList: React.FC<{}> = () => {
}}
>批量启用</Button>
<Button danger
onClick ={()=>{
onClick={() => {
Modal.confirm({
title: '禁用作业',
content: '确定禁用选中的作业吗？',
okText: '确认',
cancelText: '取消',
onOk:async () => {
await updateEnabled(url,selectedRowsState, false);
onOk: async () => {
await updateEnabled(url, selectedRowsState, false);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}
......@@ -347,7 +354,7 @@ const TaskTableList: React.FC<{}> = () => {
<CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
<ProTable<TaskTableListItem, TaskTableListItem>
onSubmit={async (value) => {
const success = await handleAddOrUpdate(url,value);
const success = await handleAddOrUpdate(url, value);
if (success) {
handleModalVisible(false);
if (actionRef.current) {
......@@ -363,7 +370,7 @@ const TaskTableList: React.FC<{}> = () => {
{formValues && Object.keys(formValues).length ? (
<UpdateForm
onSubmit={async (value) => {
const success = await handleAddOrUpdate(url,value);
const success = await handleAddOrUpdate(url, value);
if (success) {
handleUpdateModalVisible(false);
setFormValues({});
......@@ -404,7 +411,7 @@ const TaskTableList: React.FC<{}> = () => {
)}
</Drawer>
</PageContainer>
);
);
};
export default TaskTableList;
dlink-web/src/pages/Welcome.tsx
View file @ 0305d3f8
......@@ -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
View file @ 0305d3f8
......@@ -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>
......
dlink-web/src/pages/user/index.tsx deleted 100644 → 0
View file @ 12f7e2ef
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment