Skip to content

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

[Feature][web] Improve some internationalization (#1129) 

* 优化国际化相关代码

* Improve some internationalization

* Improve StudioHome Guide Page internationalization

* fix import useIntl error
parent e311f5df
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1687 additions and 1147 deletions
dlink-web/src/app.tsx
View file @ 6ba6cdb0
......@@ -161,7 +161,7 @@ export const layout: RunTimeLayoutConfig = ({initialState}) => {
? [
<Link to="/umi/plugin/openapi" target="_blank">
<LinkOutlined/>
<span>openAPI Document</span>
<span>OpenAPI Document</span>
</Link>,
<Link to="/~docs">
<BookOutlined/>
......
dlink-web/src/components/Chart/BarChartSetting/index.tsx
View file @ 6ba6cdb0
......@@ -20,7 +20,7 @@
import {Col, Form, Row, Select, Switch} from "antd";
import {StateType} from "@/pages/DataStudio/model";
import {connect} from "umi";
import {connect, useIntl} from "umi";
import styles from "./index.less";
import React, {useEffect} from "react";
......@@ -33,7 +33,7 @@ export type BarChartConfig = {
xField: string,
yField: string,
seriesField?: string,
label?: { },
label?: {},
};
export type BarChartProps = {
......@@ -44,7 +44,10 @@ export type BarChartProps = {
const BarChartSetting: React.FC<BarChartProps> = (props) => {
const {current,column,onChange: handleChange,dispatch} = props;
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {current, column, onChange: handleChange, dispatch} = props;
const [form] = Form.useForm();
useEffect(() => {
......@@ -57,8 +60,8 @@ const BarChartSetting: React.FC<BarChartProps> = (props) => {
isGroup: all.isGroup,
isStack: all.isStack,
isPercent: all.isPercent,
xField: all.xField?all.xField:column[0],
yField: all.yField?all.yField:column.length>1?column[1]:column[0],
xField: all.xField ? all.xField : column[0],
yField: all.yField ? all.yField : column.length > 1 ? column[1] : column[0],
label: {
position: 'middle',
content: (item) => {
......@@ -69,7 +72,7 @@ const BarChartSetting: React.FC<BarChartProps> = (props) => {
},
},
};
if(all.seriesField){
if (all.seriesField) {
config.seriesField = all.seriesField;
}
handleChange(config);
......@@ -97,12 +100,12 @@ const BarChartSetting: React.FC<BarChartProps> = (props) => {
<Form.Item
label="x 轴" className={styles.form_item} name="xField"
>
{column&&column.length > 0 ? (
{column && column.length > 0 ? (
<Select allowClear showSearch
defaultValue={column[0]} value={column[0]}>
{getColumnOptions()}
</Select>):(<Select allowClear showSearch>
{column&&getColumnOptions()}
</Select>) : (<Select allowClear showSearch>
{column && getColumnOptions()}
</Select>)}
</Form.Item>
</Col>
......@@ -110,12 +113,12 @@ const BarChartSetting: React.FC<BarChartProps> = (props) => {
<Form.Item
label="y 轴" className={styles.form_item} name="yField"
>
{column&&column.length > 1 ? (
{column && column.length > 1 ? (
<Select allowClear showSearch
defaultValue={column[1]} value={column[1]}>
{getColumnOptions()}
</Select>):(<Select allowClear showSearch>
{column&&getColumnOptions()}
</Select>) : (<Select allowClear showSearch>
{column && getColumnOptions()}
</Select>)}
</Form.Item>
</Col>
......@@ -125,11 +128,11 @@ const BarChartSetting: React.FC<BarChartProps> = (props) => {
<Form.Item
label="分组字段" className={styles.form_item} name="seriesField"
>
{column&&column.length > 0 ? (
{column && column.length > 0 ? (
<Select allowClear showSearch>
{getColumnOptions()}
</Select>):(<Select allowClear showSearch>
{column&&getColumnOptions()}
</Select>) : (<Select allowClear showSearch>
{column && getColumnOptions()}
</Select>)}
</Form.Item>
</Col>
......@@ -165,7 +168,7 @@ const BarChartSetting: React.FC<BarChartProps> = (props) => {
);
};
export default connect(({ Studio }: { Studio: StateType }) => ({
export default connect(({Studio}: { Studio: StateType }) => ({
current: Studio.current,
result: Studio.result,
}))(BarChartSetting);
dlink-web/src/components/Chart/LineChartSetting/index.tsx
View file @ 6ba6cdb0
......@@ -20,7 +20,7 @@
import {Col, Form, Row, Select, Switch} from "antd";
import {StateType} from "@/pages/DataStudio/model";
import {connect} from "umi";
import {connect, useIntl} from "umi";
import styles from "./index.less";
import React, {useEffect} from "react";
......@@ -46,7 +46,10 @@ export type LineChartProps = {
const LineChartSetting: React.FC<LineChartProps> = (props) => {
const {current,column,onChange: handleChange,dispatch} = props;
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {current, column, onChange: handleChange, dispatch} = props;
const [form] = Form.useForm();
useEffect(() => {
......@@ -57,16 +60,16 @@ const LineChartSetting: React.FC<LineChartProps> = (props) => {
const onValuesChange = (change: any, all: any) => {
let config: LineChartConfig = {
padding: 'auto',
xField: all.xField?all.xField:column[0],
yField: all.yField?all.yField:column.length>1?column[1]:column[0],
xField: all.xField ? all.xField : column[0],
yField: all.yField ? all.yField : column.length > 1 ? column[1] : column[0],
};
if(all.seriesField){
if (all.seriesField) {
config.seriesField = all.seriesField;
}
if(all.openStepType){
if (all.openStepType) {
config.stepType = 'hv';
}
if(all.openSlider){
if (all.openSlider) {
config.slider = {
start: 0,
end: 0.5,
......@@ -97,12 +100,12 @@ const LineChartSetting: React.FC<LineChartProps> = (props) => {
<Form.Item
label="x 轴" className={styles.form_item} name="xField"
>
{column&&column.length > 0 ? (
{column && column.length > 0 ? (
<Select allowClear showSearch
defaultValue={column[0]} value={column[0]}>
{getColumnOptions()}
</Select>):(<Select allowClear showSearch>
{column&&getColumnOptions()}
</Select>) : (<Select allowClear showSearch>
{column && getColumnOptions()}
</Select>)}
</Form.Item>
</Col>
......@@ -110,12 +113,12 @@ const LineChartSetting: React.FC<LineChartProps> = (props) => {
<Form.Item
label="y 轴" className={styles.form_item} name="yField"
>
{column&&column.length > 1 ? (
{column && column.length > 1 ? (
<Select allowClear showSearch
defaultValue={column[1]} value={column[1]}>
{getColumnOptions()}
</Select>):(<Select allowClear showSearch>
{column&&getColumnOptions()}
</Select>) : (<Select allowClear showSearch>
{column && getColumnOptions()}
</Select>)}
</Form.Item>
</Col>
......@@ -125,11 +128,11 @@ const LineChartSetting: React.FC<LineChartProps> = (props) => {
<Form.Item
label="分组字段" className={styles.form_item} name="seriesField"
>
{column&&column.length > 0 ? (
{column && column.length > 0 ? (
<Select allowClear showSearch>
{getColumnOptions()}
</Select>):(<Select allowClear showSearch>
{column&&getColumnOptions()}
</Select>) : (<Select allowClear showSearch>
{column && getColumnOptions()}
</Select>)}
</Form.Item>
</Col>
......@@ -157,7 +160,7 @@ const LineChartSetting: React.FC<LineChartProps> = (props) => {
);
};
export default connect(({ Studio }: { Studio: StateType }) => ({
export default connect(({Studio}: { Studio: StateType }) => ({
current: Studio.current,
result: Studio.result,
}))(LineChartSetting);
dlink-web/src/components/Chart/PieChartSetting/index.tsx
View file @ 6ba6cdb0
......@@ -20,7 +20,7 @@
import {Col, Form, Row, Select} from "antd";
import {StateType} from "@/pages/DataStudio/model";
import {connect} from "umi";
import {connect, useIntl} from "umi";
import styles from "./index.less";
import React, {useEffect} from "react";
......@@ -41,7 +41,10 @@ export type PieChartProps = {
const PieChartSetting: React.FC<PieChartProps> = (props) => {
const {current,column,onChange: handleChange,dispatch} = props;
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {current, column, onChange: handleChange, dispatch} = props;
const [form] = Form.useForm();
useEffect(() => {
......@@ -51,12 +54,12 @@ const PieChartSetting: React.FC<PieChartProps> = (props) => {
const onValuesChange = (change: any, all: any) => {
let config: PieChartConfig = {
angleField: all.angleField?all.angleField:column[0],
colorField: all.colorField?all.colorField:column.length>1?column[1]:column[0],
angleField: all.angleField ? all.angleField : column[0],
colorField: all.colorField ? all.colorField : column.length > 1 ? column[1] : column[0],
label: {
type: 'inner',
offset: '-30%',
content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
content: ({percent}) => `${(percent * 100).toFixed(0)}%`,
style: {
fontSize: 14,
textAlign: 'center',
......@@ -93,12 +96,12 @@ const PieChartSetting: React.FC<PieChartProps> = (props) => {
<Form.Item
label="弧轴" className={styles.form_item} name="angleField"
>
{column&&column.length > 0 ? (
{column && column.length > 0 ? (
<Select allowClear showSearch
defaultValue={column[0]} value={column[0]}>
{getColumnOptions()}
</Select>):(<Select allowClear showSearch>
{column&&getColumnOptions()}
</Select>) : (<Select allowClear showSearch>
{column && getColumnOptions()}
</Select>)}
</Form.Item>
</Col>
......@@ -106,12 +109,12 @@ const PieChartSetting: React.FC<PieChartProps> = (props) => {
<Form.Item
label="颜色" className={styles.form_item} name="colorField"
>
{column&&column.length > 1 ? (
{column && column.length > 1 ? (
<Select allowClear showSearch
defaultValue={column[1]} value={column[1]}>
{getColumnOptions()}
</Select>):(<Select allowClear showSearch>
{column&&getColumnOptions()}
</Select>) : (<Select allowClear showSearch>
{column && getColumnOptions()}
</Select>)}
</Form.Item>
</Col>
......@@ -121,7 +124,7 @@ const PieChartSetting: React.FC<PieChartProps> = (props) => {
);
};
export default connect(({ Studio }: { Studio: StateType }) => ({
export default connect(({Studio}: { Studio: StateType }) => ({
current: Studio.current,
result: Studio.result,
}))(PieChartSetting);
dlink-web/src/components/Chart/index.tsx
View file @ 6ba6cdb0
......@@ -20,7 +20,7 @@
import {Button, Col, Empty, Form, Row, Select} from "antd";
import {StateType} from "@/pages/DataStudio/model";
import {connect} from "umi";
import {connect, useIntl} from "umi";
import styles from "./index.less";
import {RedoOutlined} from '@ant-design/icons';
import {CHART, isSql} from "@/components/Studio/conf";
......@@ -35,9 +35,12 @@ import {Dispatch} from "@@/plugin-dva/connect";
const {Option} = Select;
const Chart = (props:any) => {
const Chart = (props: any) => {
const {current,result,height,dispatch} = props;
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {current, result, height, dispatch} = props;
const [config, setConfig] = useState(undefined);
const [type, setType] = useState<string>(CHART.LINE);
const [form] = Form.useForm();
......@@ -47,69 +50,69 @@ const Chart = (props:any) => {
}, [current.console.chart]);
const toRebuild = () => {
if(!isSql(current.task.dialect)){
showJobData(current.key,current.console.result.jobId,dispatch);
if (!isSql(current.task.dialect)) {
showJobData(current.key, current.console.result.jobId, dispatch);
}
};
const onValuesChange = (change: any, all: any) => {
if(change.type){
if (change.type) {
setConfig(undefined);
setType(change.type);
props.saveChart({type:change.type});
props.saveChart({type: change.type});
}
};
const renderChartSetting = () => {
if(!current.console.chart||!current.console.result.result){
if (!current.console.chart || !current.console.result.result) {
return undefined;
}
switch (type){
switch (type) {
case CHART.LINE:
return <LineChartSetting column={current.console.result.result.columns} onChange={(value) => {
setConfig(value);
props.saveChart({...value,type: current.console.chart.type});
}} />;
props.saveChart({...value, type: current.console.chart.type});
}}/>;
case CHART.BAR:
return <BarChartSetting column={current.console.result.result.columns} onChange={(value) => {
setConfig(value);
props.saveChart({...value,type: current.console.chart.type});
}} />;
props.saveChart({...value, type: current.console.chart.type});
}}/>;
case CHART.PIE:
return <PieChartSetting column={current.console.result.result.columns} onChange={(value) => {
setConfig(value);
props.saveChart({...value,type: current.console.chart.type});
}} />;
props.saveChart({...value, type: current.console.chart.type});
}}/>;
default:
return <LineChartSetting column={current.console.result.result.columns} onChange={(value) => {
setConfig(value);
props.saveChart({...value,type: current.console.chart.type});
}} />
props.saveChart({...value, type: current.console.chart.type});
}}/>
}
};
const renderChartContent = () => {
if(!current.console.result.result||!current.console.result.result.columns){
return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
if (!current.console.result.result || !current.console.result.result.columns) {
return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>;
}
switch (current.console.chart.type){
switch (current.console.chart.type) {
case CHART.LINE:
if(config){
if (config) {
return <Line data={current.console.result.result.rowData} {...config} />;
} else {
return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>;
}
case CHART.BAR:
if(config){
if (config) {
return <Bar data={current.console.result.result.rowData} {...config} />;
} else {
return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>;
}
case CHART.PIE:
if(config && config.angleField){
if (config && config.angleField) {
return <Pie data={current.console.result.result.rowData} {...config} />;
} else {
return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>;
}
default:
return <Line data={current.console.result.result.rowData} {...config} />;
......@@ -119,7 +122,7 @@ const Chart = (props:any) => {
return (
<div style={{width: '100%'}}>
<Row>
<Col span={16} style={{padding:'20px'}}>
<Col span={16} style={{padding: '20px'}}>
{renderChartContent()}
</Col>
<Col span={8}>
......@@ -140,11 +143,11 @@ const Chart = (props:any) => {
</Select>
</Form.Item>
</Col>
{ !isSql(current.task.dialect) ? <Col span={12}>
<Button type="primary" onClick={toRebuild} icon={<RedoOutlined />}>
{!isSql(current.task.dialect) ? <Col span={12}>
<Button type="primary" onClick={toRebuild} icon={<RedoOutlined/>}>
刷新数据
</Button>
</Col>:undefined}
</Col> : undefined}
</Row>
</Form>
{renderChartSetting()}
......@@ -154,14 +157,14 @@ const Chart = (props:any) => {
);
};
const mapDispatchToProps = (dispatch: Dispatch)=>({
saveChart:(chart: any)=>dispatch({
const mapDispatchToProps = (dispatch: Dispatch) => ({
saveChart: (chart: any) => dispatch({
type: "Studio/saveChart",
payload: chart,
}),
})
export default connect(({ Studio }: { Studio: StateType }) => ({
export default connect(({Studio}: { Studio: StateType }) => ({
current: Studio.current,
result: Studio.result,
}),mapDispatchToProps)(Chart);
}), mapDispatchToProps)(Chart);
dlink-web/src/components/Common/DTable.tsx
View file @ 6ba6cdb0
......@@ -23,9 +23,13 @@ import {SearchOutlined} from '@ant-design/icons';
import ProTable from '@ant-design/pro-table';
import {getData} from "@/components/Common/crud";
import {Button, Input, Space} from "antd";
import {useIntl} from "umi";
const DTable = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {dataSource, columns, scroll} = props;
const [data, setData] = useState<[]>([]);
......
dlink-web/src/components/Common/JobLifeCycle.tsx
View file @ 6ba6cdb0
......@@ -19,14 +19,11 @@
import {Tag} from 'antd';
import {
EditOutlined,
CameraOutlined,
CarryOutOutlined,
} from "@ant-design/icons";
import {CameraOutlined, CarryOutOutlined, EditOutlined,} from "@ant-design/icons";
import {useIntl} from "umi";
export type JobLifeCycleFormProps = {
step: number|undefined;
step: number | undefined;
};
export const JOB_LIFE_CYCLE = {
......@@ -48,16 +45,19 @@ export const isDeletedTask = (taskStep: number) => {
const JobLifeCycle = (props: JobLifeCycleFormProps) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {step} = props;
const renderJobLifeCycle = () => {
switch (step){
switch (step) {
case JOB_LIFE_CYCLE.DEVELOP:
return (<Tag icon={<EditOutlined />} color="default">开发中</Tag>);
return (<Tag icon={<EditOutlined/>} color="default">开发中</Tag>);
case JOB_LIFE_CYCLE.RELEASE:
return (<Tag icon={<CameraOutlined />} color="green">已发布</Tag>);
return (<Tag icon={<CameraOutlined/>} color="green">已发布</Tag>);
case JOB_LIFE_CYCLE.ONLINE:
return (<Tag icon={<CarryOutOutlined />} color="blue">已上线</Tag>);
return (<Tag icon={<CarryOutOutlined/>} color="blue">已上线</Tag>);
default:
return undefined;
}
......
dlink-web/src/components/Footer/index.tsx
View file @ 6ba6cdb0
......@@ -25,7 +25,7 @@ import {DefaultFooter} from '@ant-design/pro-layout';
export default () => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
return (
<DefaultFooter
......@@ -39,7 +39,7 @@ export default () => {
},
{
key: 'github',
title: <GithubOutlined />,
title: <GithubOutlined/>,
href: 'https://github.com/DataLinkDC/dlink',
blankTarget: true,
},
......
dlink-web/src/components/RightContent/AvatarDropdown.tsx
View file @ 6ba6cdb0
......@@ -64,8 +64,8 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({menu}) => {
const {initialState, setInitialState} = useModel('@@initialState');
const actionRef = useRef<ActionType>();
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const onMenuClick = useCallback(
(event: {
......@@ -80,7 +80,7 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({menu}) => {
loginOut();
return;
}
history.push(`/account/${key}`);
// history.push(`/account/${key}`);
},
[initialState, setInitialState],
);
......@@ -119,14 +119,13 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({menu}) => {
title={item.tenantCode}
icon={<SecurityScanOutlined/>}
onClick={(e) => {
console.log(e)
// get choose tenant title
let title = e.domEvent.target.textContent;
let title: string = e.domEvent.target.textContent;
// get choose tenantId
let tenantInfoId = e.key;
Modal.confirm({
title: l('menu.account.checkTenant'),
content: l('menu.account.checkTenantConfirm'),
content: l('menu.account.checkTenantConfirm', '', {tenantCode: title}),
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
......
dlink-web/src/components/Studio/StudioConsole/StudioCA/index.tsx
View file @ 6ba6cdb0
......@@ -18,53 +18,55 @@
*/
import {Tabs, Tooltip, Button, Modal, message, Empty} from "antd";
import {Button, Empty, message, Modal, Tabs, Tooltip} from "antd";
import {SearchOutlined, SnippetsOutlined} from "@ant-design/icons";
import {StateType} from "@/pages/DataStudio/model";
import {connect} from "umi";
import styles from "./index.less";
import {connect, useIntl} from "umi";
import {getLineage, getStreamGraph} from "@/pages/DataStudio/service";
import {useState} from "react";
import Lineage, {getInit} from "@/components/Lineage";
import Lineage from "@/components/Lineage";
import CodeShow from "@/components/Common/CodeShow";
import {DIALECT} from "@/components/Studio/conf";
const { TabPane } = Tabs;
const {TabPane} = Tabs;
const StudioCA = (props: any) => {
const {current} = props;
const [data, setData] = useState(undefined);
const handleLineage=()=>{
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const handleLineage = () => {
setData(undefined);
const res = getLineage({
statement:current.value,
statementSet:current.task.statementSet,
dialect:current.task.dialect,
databaseId:current.task.databaseId,
statement: current.value,
statementSet: current.task.statementSet,
dialect: current.task.dialect,
databaseId: current.task.databaseId,
type: 1,
});
res.then((result)=>{
if(result.datas){
res.then((result) => {
if (result.datas) {
setData(result.datas);
}else {
} else {
message.error(`获取作业血缘失败，原因：\n${result.msg}`);
}
})
};
const handleExportStreamGraphPlan=()=>{
const handleExportStreamGraphPlan = () => {
const res = getStreamGraph({
...current.task,
configJson: JSON.stringify(current.task.config),
statement: current.value,
});
res.then((result)=>{
res.then((result) => {
Modal.info({
title: current.task.alias + '的 StreamGraphPlan',
width: 1000,
content: (
<CodeShow code={JSON.stringify((result.datas?result.datas:result.msg), null, "\t")} language='json'
<CodeShow code={JSON.stringify((result.datas ? result.datas : result.msg), null, "\t")} language='json'
height='500px' theme="vs-dark"/>
),
onOk() {
......@@ -80,7 +82,7 @@ const StudioCA = (props: any) => {
<Tooltip title="重新计算血缘">
<Button
type="text"
icon={<SearchOutlined />}
icon={<SearchOutlined/>}
onClick={handleLineage}
>
计算血缘
......@@ -100,12 +102,12 @@ const StudioCA = (props: any) => {
</>}
>
<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>
</>)
};
export default connect(({ Studio }: { Studio: StateType }) => ({
export default connect(({Studio}: { Studio: StateType }) => ({
current: Studio.current,
}))(StudioCA);
dlink-web/src/components/Studio/StudioConsole/StudioExplain/index.tsx
View file @ 6ba6cdb0
......@@ -19,7 +19,7 @@
import {StateType} from "@/pages/DataStudio/model";
import {connect} from "umi";
import {connect, useIntl} from "umi";
import {Modal, Space, Tag, Typography,} from 'antd';
import {ConsoleSqlOutlined} from "@ant-design/icons";
import ProList from '@ant-design/pro-list';
......@@ -47,6 +47,10 @@ export type StudioExplainProps = {
data: Partial<ExplainItem>;
}
const StudioExplain = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const [explainData, setExplainData] = useState([]);
const [result, setResult] = useState(<Text>正在校验中...</Text>);
const {
......
dlink-web/src/components/Studio/StudioConsole/StudioFX/index.tsx
View file @ 6ba6cdb0
......@@ -27,10 +27,16 @@ import ProDescriptions from '@ant-design/pro-descriptions';
import type {DocumentTableListItem} from '@/pages/Document/data.d';
import {queryData,} from "@/components/Common/crud";
import {useIntl} from "umi";
const url = '/api/document';
const StudioFX = () => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const actionRef = useRef<ActionType>();
const [row, setRow] = useState<DocumentTableListItem>();
const columns: ProColumns<DocumentTableListItem>[] = [
......@@ -197,7 +203,7 @@ const StudioFX = () => {
hideInTable: true,
},
{
title: '是否启用',
title: l('global.table.isEnable'),
dataIndex: 'enabled',
hideInForm: true,
hideInSearch: true,
......@@ -219,7 +225,7 @@ const StudioFX = () => {
},
},
{
title: '创建时间',
title: l('global.table.createTime'),
dataIndex: 'createTime',
sorter: true,
valueType: 'dateTime',
......@@ -238,7 +244,7 @@ const StudioFX = () => {
},
},
{
title: '最近更新时间',
title: l('global.table.lastUpdateTime'),
dataIndex: 'updateTime',
sorter: true,
valueType: 'dateTime',
......
dlink-web/src/components/Studio/StudioConsole/StudioHistory/index.tsx
View file @ 6ba6cdb0
......@@ -19,7 +19,7 @@
import {StateType} from "@/pages/DataStudio/model";
import {connect} from "umi";
import {connect, useIntl} from "umi";
import {Badge, Divider, Modal, Space, Tag, Typography} from 'antd';
import {ClusterOutlined, FireOutlined, MessageOutlined, RocketOutlined} from "@ant-design/icons";
import ProList from '@ant-design/pro-list';
......@@ -59,6 +59,9 @@ type HistoryConfig = {
const url = '/api/history';
const StudioHistory = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {current, refs, dispatch} = props;
const [modalVisit, setModalVisit] = useState(false);
const [row, setRow] = useState<HistoryItem>();
......@@ -84,8 +87,8 @@ const StudioHistory = (props: any) => {
Modal.confirm({
title: '删除执行记录',
content: '确定删除该执行记录吗？',
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
await handleRemove(url, [row]);
refs.history?.current?.reload();
......@@ -212,7 +215,7 @@ const StudioHistory = (props: any) => {
<a key="delete" onClick={() => {
removeHistory(row)
}}>
删除
{l('button.delete')}
</a>,
],
search: false,
......
dlink-web/src/components/Studio/StudioConsole/StudioProcess/index.tsx
View file @ 6ba6cdb0
......@@ -20,7 +20,7 @@
import {Button, Divider, Dropdown, Empty, Menu, message, Modal, Select, Space, Tag, Tooltip} from "antd";
import {StateType} from "@/pages/DataStudio/model";
import {connect} from "umi";
import {connect, useIntl} from "umi";
import React, {useState} from "react";
import {DownOutlined, SearchOutlined} from '@ant-design/icons';
import ProTable from '@ant-design/pro-table';
......@@ -32,6 +32,9 @@ const {Option} = Select;
const StudioProcess = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {cluster} = props;
const [jobsData, setJobsData] = useState<any>({});
const [clusterId, setClusterId] = useState<number>();
......@@ -40,8 +43,8 @@ const StudioProcess = (props: any) => {
Modal.confirm({
title: key + '任务',
content: `确定${key}该作业吗？`,
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
if (!clusterId) return;
let res = savepointJob(clusterId, currentItem.jid, key, key, 0);
......@@ -142,7 +145,7 @@ const StudioProcess = (props: any) => {
)
}
}, {
title: '操作',
title: l('global.table.operate'),
dataIndex: 'option',
valueType: 'option',
render: (_, record) => {
......
dlink-web/src/components/Studio/StudioConsole/StudioTable/index.tsx
View file @ 6ba6cdb0
......@@ -18,9 +18,9 @@
*/
import {Button, Tag, Empty} from "antd";
import {Button, Empty, Tag} from "antd";
import {StateType} from "@/pages/DataStudio/model";
import {connect} from "umi";
import {connect, useIntl} from "umi";
import {FireOutlined, SearchOutlined} from '@ant-design/icons';
import {showJobData} from "@/components/Studio/StudioEvent/DQL";
import {isSql} from "@/components/Studio/conf";
......@@ -28,10 +28,13 @@ import DTable from "@/components/Common/DTable";
const StudioTable = (props: any) => {
const {current,dispatch} = props;
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const getColumns=(columns: [])=>{
let datas: any=[];
const {current, dispatch} = props;
const getColumns = (columns: []) => {
let datas: any = [];
columns?.map((item) => {
datas.push({
field: item,
......@@ -40,42 +43,44 @@ const StudioTable = (props: any) => {
return datas;
};
const showDetail=()=>{
showJobData(current.key,current.console.result.jobId,dispatch)
const showDetail = () => {
showJobData(current.key, current.console.result.jobId, dispatch)
};
const renderFlinkSQLContent = () => {
return (<>
{(current.console.result.jobId&&(current.console.result.jobId.indexOf('unknown') === -1)) ? (<>
{(current.console.result.jobId && (current.console.result.jobId.indexOf('unknown') === -1)) ? (<>
<Button type="primary" onClick={showDetail} icon={<SearchOutlined/>}>
获取最新数据
</Button> &nbsp;
<Tag color="blue" key={current.console.result.jobId}>
<FireOutlined /> {current.console.result.jobId}
</Tag></>):undefined}
{current.console.result.result&&current.console.result.result.columns?
<DTable dataSource={current.console.result.result.rowData} columns={getColumns(current.console.result.result.columns)}/>
:(<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />)
<FireOutlined/> {current.console.result.jobId}
</Tag></>) : undefined}
{current.console.result.result && current.console.result.result.columns ?
<DTable dataSource={current.console.result.result.rowData}
columns={getColumns(current.console.result.result.columns)}/>
: (<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>)
}
</>)
}
const renderSQLContent = () => {
return (<>
{current.console.result.result?
<DTable dataSource={current.console.result.result.rowData} columns={getColumns(current.console.result.result.columns)}/>
:(<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />)
{current.console.result.result ?
<DTable dataSource={current.console.result.result.rowData}
columns={getColumns(current.console.result.result.columns)}/>
: (<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>)
}
</>)
}
return (
<div style={{width: '100%'}}>
{current?(isSql(current.task.dialect)?renderSQLContent():renderFlinkSQLContent()):undefined}
{current ? (isSql(current.task.dialect) ? renderSQLContent() : renderFlinkSQLContent()) : undefined}
</div>
);
};
export default connect(({ Studio }: { Studio: StateType }) => ({
export default connect(({Studio}: { Studio: StateType }) => ({
current: Studio.current,
}))(StudioTable);
dlink-web/src/components/Studio/StudioConsole/index.tsx
View file @ 6ba6cdb0
......@@ -18,14 +18,18 @@
*/
import {Tabs, Empty} from "antd";
import {Empty, Tabs} from "antd";
import {
CodeOutlined, TableOutlined, RadarChartOutlined, CalendarOutlined, FileSearchOutlined, DesktopOutlined
, FunctionOutlined, ApartmentOutlined, BarChartOutlined
ApartmentOutlined,
BarChartOutlined,
CalendarOutlined,
CodeOutlined,
DesktopOutlined,
FunctionOutlined,
TableOutlined
} from "@ant-design/icons";
import {StateType} from "@/pages/DataStudio/model";
import {connect} from "umi";
import styles from "./index.less";
import {connect, useIntl} from "umi";
import StudioMsg from "./StudioMsg";
import StudioTable from "./StudioTable";
import StudioHistory from "./StudioHistory";
......@@ -34,15 +38,16 @@ import StudioCA from "./StudioCA";
import StudioProcess from "./StudioProcess";
import {Scrollbars} from 'react-custom-scrollbars';
import Chart from "@/components/Chart";
import {useIntl} from 'umi';
import {useEffect, useState} from "react";
import {useState} from "react";
const {TabPane} = Tabs;
const StudioConsole = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {height, current} = props;
let consoleHeight = (height - 37.6);
......@@ -60,7 +65,7 @@ const StudioConsole = (props: any) => {
tab={
<span>
<CodeOutlined/>
{l('pages.datastudio.label.info','信息')}
{l('pages.datastudio.label.info')}
</span>
}
key="StudioMsg"
......@@ -73,7 +78,7 @@ const StudioConsole = (props: any) => {
tab={
<span>
<TableOutlined/>
{l('pages.datastudio.label.result','结果')}
{l('pages.datastudio.label.result')}
</span>
}
key="StudioTable"
......@@ -99,7 +104,7 @@ const StudioConsole = (props: any) => {
tab={
<span>
<ApartmentOutlined/>
{l('pages.datastudio.label.lineage','血缘')}
{l('pages.datastudio.label.lineage')}
</span>
}
key="StudioConsanguinity"
......@@ -112,7 +117,7 @@ const StudioConsole = (props: any) => {
tab={
<span>
<DesktopOutlined/>
{l('pages.datastudio.label.process','进程')}
{l('pages.datastudio.label.process')}
</span>
}
key="StudioProcess"
......@@ -125,7 +130,7 @@ const StudioConsole = (props: any) => {
tab={
<span>
<CalendarOutlined/>
{l('pages.datastudio.label.history','历史')}
{l('pages.datastudio.label.history')}
</span>
}
key="StudioHistory"
......@@ -138,7 +143,7 @@ const StudioConsole = (props: any) => {
tab={
<span>
<FunctionOutlined/>
{l('pages.datastudio.label.function','函数')}
{l('pages.datastudio.label.function')}
</span>
}
key="StudioFX"
......
dlink-web/src/components/Studio/StudioHome/index.tsx
View file @ 6ba6cdb0
......@@ -17,9 +17,9 @@
*
*/
import {Typography,Divider} from 'antd';
import {Divider, Typography} from 'antd';
import React from 'react';
import {connect,useIntl} from 'umi';
import {connect, useIntl} from 'umi';
import {StateType} from '@/pages/DataStudio/model';
import {Scrollbars} from 'react-custom-scrollbars';
import {VERSION} from "@/components/Common/Version";
......@@ -28,56 +28,58 @@ const {Title, Paragraph, Text} = Typography;
const StudioHome = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {toolHeight} = props;
return (
<Scrollbars style={{height: toolHeight}}>
<Typography style={{padding:'15px'}}>
<Title level={4}>{l('pages.datastudio.label.welcomeuse','欢迎使用 Dinky v')}{VERSION}</Title>
<Typography style={{padding: '15px'}}>
<Title level={4}>{l('pages.datastudio.label.welcomeuse', '', {version: VERSION})}</Title>
<Paragraph>
<blockquote>{l('pages.datastudio.label.dinkydescribe','实时即未来，Dinky 为 Apache Flink 而生，让 Flink SQL 纵享丝滑，并致力于实时计算平台建设。')}</blockquote>
<blockquote>{l('pages.datastudio.label.dinkydescribe')}</blockquote>
</Paragraph>
<Title level={5}>快捷键</Title>
<Title level={5}>{l('shortcut.title')}</Title>
<Paragraph>
<Text keyboard>Ctrl + s</Text> 保存 <Divider type="vertical" />
<Text keyboard>Alt + 2</Text> 校验 <Divider type="vertical" />
<Text keyboard>Alt + 3</Text> 美化 <Divider type="vertical" />
<Text keyboard>F2</Text> 全屏 <Divider type="vertical" />
<Text keyboard>Esc</Text> 关闭弹框及全屏 <Divider type="vertical" />
<Text keyboard>F1</Text> 更多快捷键
<Text keyboard>Ctrl + s</Text> {l('shortcut.key.save')} <Divider type="vertical"/>
<Text keyboard>Alt + 2</Text> {l('shortcut.key.check')} <Divider type="vertical"/>
<Text keyboard>Alt + 3</Text> {l('shortcut.key.beautify')} <Divider type="vertical"/>
<Text keyboard>F2</Text> {l('shortcut.key.fullscreen')} <Divider type="vertical"/>
<Text keyboard>Esc</Text> {l('shortcut.key.fullscreenClose')} <Divider type="vertical"/>
<Text keyboard>F1</Text> {l('shortcut.key.more')}
</Paragraph>
<Paragraph>
<Text keyboard>Ctrl + F</Text> 搜索 <Divider type="vertical" />
<Text keyboard>Ctrl + H</Text> 替换 <Divider type="vertical" />
<Text keyboard>Ctrl + Z</Text> 撤销 <Divider type="vertical" />
<Text keyboard>Ctrl + Y</Text> 重做 <Divider type="vertical" />
<Text keyboard>Ctrl + /</Text> 注释
<Text keyboard>Ctrl + F</Text> {l('shortcut.key.search')} <Divider type="vertical"/>
<Text keyboard>Ctrl + H</Text> {l('shortcut.key.replace')} <Divider type="vertical"/>
<Text keyboard>Ctrl + Z</Text> {l('shortcut.key.revoke')} <Divider type="vertical"/>
<Text keyboard>Ctrl + Y</Text> {l('shortcut.key.redo')} <Divider type="vertical"/>
<Text keyboard>Ctrl + /</Text> {l('shortcut.key.notes')}
</Paragraph>
<Paragraph>
<Text keyboard>选中 + Tab</Text> 缩进 <Divider type="vertical" />
<Text keyboard>选中 + Shift + Tab</Text> 取消缩进 <Divider type="vertical" />
<Text keyboard>Shift + Alt + Right</Text> 选中后续 <Divider type="vertical" />
<Text keyboard>Shift + Alt + F</Text> 格式化
<Text keyboard>{l('shortcut.key.checked')} + Tab</Text> {l('shortcut.key.indent')} <Divider type="vertical"/>
<Text keyboard>{l('shortcut.key.checked')} + Shift + Tab</Text> {l('shortcut.key.removeIndent')} <Divider
type="vertical"/>
<Text keyboard>Shift + Alt + Right</Text> {l('shortcut.key.selectToEnd')} <Divider type="vertical"/>
<Text keyboard>Shift + Alt + F</Text> {l('shortcut.key.format')}
</Paragraph>
<Paragraph>
<Text keyboard>Ctrl + Shift + Up/Down</Text> 编辑多行 <Divider type="vertical" />
<Text keyboard>Shift + Alt + Up/Down</Text> 复制一行 <Divider type="vertical" />
<Text keyboard>Ctrl + Shift + K</Text> 删除一行
<Text keyboard>Ctrl + Shift + Up/Down</Text> {l('shortcut.key.editMultiline')} <Divider type="vertical"/>
<Text keyboard>Shift + Alt + Up/Down</Text> {l('shortcut.key.copyRow')} <Divider type="vertical"/>
<Text keyboard>Ctrl + Shift + K</Text> {l('shortcut.key.deleteRow')}
</Paragraph>
<Paragraph>
<Text keyboard>Ctrl + F3</Text> 匹配下一个 <Divider type="vertical" />
<Text keyboard>Ctrl + Shift + F3</Text> 匹配上一个 <Divider type="vertical" />
<Text keyboard>F7</Text> 前往下一个高亮 <Divider type="vertical" />
<Text keyboard>Shift +F7</Text> 前往上一个高亮
<Text keyboard>Ctrl + F3</Text> {l('shortcut.key.matchNext')} <Divider type="vertical"/>
<Text keyboard>Ctrl + Shift + F3</Text> {l('shortcut.key.matchPrevious')} <Divider type="vertical"/>
<Text keyboard>F7</Text> {l('shortcut.key.goNextHighlight')} <Divider type="vertical"/>
<Text keyboard>Shift +F7</Text> {l('shortcut.key.goPreviousHighlight')}
</Paragraph>
<Paragraph>
<Text keyboard>Ctrl + Shift + End</Text> 前面追加换行 <Divider type="vertical" />
<Text keyboard>Ctrl + End</Text> 追加换行 <Divider type="vertical" />
<Text keyboard>Alt + Up/Down</Text> 上下换位 <Divider type="vertical" />
<Text keyboard>Ctrl + Shift + [/]</Text> 折叠/展开
<Text keyboard>Ctrl + Shift + End</Text> {l('shortcut.key.appendLineBefore')} <Divider type="vertical"/>
<Text keyboard>Ctrl + End</Text> {l('shortcut.key.appendLine')} <Divider type="vertical"/>
<Text keyboard>Alt + Up/Down</Text> {l('shortcut.key.transpositionUpAndDown')} <Divider type="vertical"/>
<Text keyboard>Ctrl + Shift + [/]</Text> {l('shortcut.key.collapseOrExpand')}
</Paragraph>
</Typography>
</Scrollbars>
......
dlink-web/src/components/Studio/StudioKubernetes/index.tsx
View file @ 6ba6cdb0
......@@ -19,14 +19,16 @@
import {Divider, Form, Input, Space,} from 'antd';
import {Dispatch, DocumentStateType} from "@@/plugin-dva/connect";
import {connect} from "umi";
import {connect, useIntl} from "umi";
import Button from "antd/es/button/button";
import {useState} from "react";
import {
APP_CONFIG_LIST,
Config,
FLINK_CONFIG_LIST, FLINK_CONFIG_NAME_LIST,
KUBERNETES_CONFIG_LIST, KUBERNETES_CONFIG_NAME_LIST
FLINK_CONFIG_LIST,
FLINK_CONFIG_NAME_LIST,
KUBERNETES_CONFIG_LIST,
KUBERNETES_CONFIG_NAME_LIST
} from "@/pages/ClusterConfiguration/conf";
import {MinusCircleOutlined, PlusOutlined} from "@ant-design/icons";
import {getConfig} from "@/pages/ClusterConfiguration/function";
......@@ -39,6 +41,9 @@ const formLayout = {
const StudioKubernetes = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {
height = '100%',
width = '100%',
......@@ -60,6 +65,7 @@ const StudioKubernetes = (props: any) => {
}
return list;
}
//Merge pre-defined config
function mergeConfig(source: Record<string, unknown>, from: Record<string, unknown>) {
for (const key in from) {
......@@ -96,7 +102,6 @@ const StudioKubernetes = (props: any) => {
const [formVals, setFormVals] = useState<Record<string, unknown>>(initValue(conf));
const onValuesChange = (change: any, all: any) => {
all.type = "Kubernetes"
const values = getConfig(all)
......
dlink-web/src/components/Studio/StudioLeftTool/StudioCluster/index.tsx
View file @ 6ba6cdb0
......@@ -18,20 +18,12 @@
*/
import {
message, Button, Table, Empty, Divider,
Tooltip, Drawer, Modal
} from "antd";
import {Button, Drawer, Empty, Modal, Table, Tooltip} from "antd";
import ProDescriptions from '@ant-design/pro-descriptions';
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 {connect, useIntl} from "umi";
import React, {useState} from "react";
import {PlusOutlined, ReloadOutlined} from '@ant-design/icons';
import {showCluster} from "../../StudioEvent/DDL";
import {handleAddOrUpdate, handleRemove} from "@/components/Common/crud";
import ClusterForm from "@/pages/Cluster/components/ClusterForm";
......@@ -41,6 +33,9 @@ const url = '/api/cluster';
const StudioCluster = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {cluster, toolHeight, dispatch} = props;
const [createModalVisible, handleCreateModalVisible] = useState<boolean>(false);
const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
......@@ -146,7 +141,7 @@ const StudioCluster = (props: any) => {
dataIndex: 'note',
},
{
title: '是否启用',
title: l('global.table.isEnable'),
dataIndex: 'enabled',
filters: [
{
......@@ -186,29 +181,29 @@ const StudioCluster = (props: any) => {
{
title: '集群配置ID',
dataIndex: 'clusterConfigurationId',
},{
}, {
title: '作业ID',
dataIndex: 'taskId',
},
{
title: '创建时间',
title: l('global.table.createTime'),
dataIndex: 'createTime',
valueType: 'dateTime',
},
{
title: '最近更新时间',
title: l('global.table.lastUpdateTime'),
dataIndex: 'updateTime',
valueType: 'dateTime',
},
{
title: '操作',
title: l('global.table.operate'),
dataIndex: 'option',
valueType: 'option',
render: (_, record) => [
<Button type="dashed" onClick={() => onModifyCluster(record)}>
配置
{l('button.edit')}
</Button>, <Button danger onClick={() => onDeleteCluster(record)}>
删除
{l('button.delete')}
</Button>
],
},];
......@@ -231,8 +226,8 @@ const StudioCluster = (props: any) => {
Modal.confirm({
title: '删除集群',
content: `确定删除该集群【${record.alias}】吗？`,
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
await handleRemove(url, [record]);
setRow({});
......@@ -289,7 +284,7 @@ const StudioCluster = (props: any) => {
}}
modalVisible={updateModalVisible}
values={row}
/>):undefined}
/>) : undefined}
<Drawer
width={600}
visible={!!row?.id}
......
dlink-web/src/components/Studio/StudioLeftTool/StudioConnector/components/SessionForm.tsx
View file @ 6ba6cdb0
......@@ -19,10 +19,10 @@
import React, {useState} from 'react';
import {Form, Button, Input, Modal,Select,Tag,Switch} from 'antd';
import {Button, Form, Input, Modal, Select, Switch, Tag} from 'antd';
import {SessionItem} from '../data.d';
import {connect} from "umi";
import {connect, useIntl} from "umi";
import {StateType} from "@/pages/DataStudio/model";
export type UpdateFormProps = {
......@@ -41,6 +41,10 @@ const formLayout = {
};
const SessionForm: React.FC<UpdateFormProps> = (props) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const [formVals, setFormVals] = useState<Partial<SessionItem>>({
session: props.values.session,
type: props.values.type,
......@@ -65,13 +69,14 @@ const SessionForm: React.FC<UpdateFormProps> = (props) => {
handleUpdate({...formVals, ...fieldsValue});
};
const getClusterOptions = ()=>{
const getClusterOptions = () => {
let itemList = [(<Option value={0} label={(<><Tag color="default">Local</Tag>本地环境</>)}>
<Tag color="default">Local</Tag>
本地环境
</Option>)];
for(let item of cluster){
let tag =(<><Tag color={item.enabled?"processing":"error"}>{item.type}</Tag>{item.alias === "" ? item.name : item.alias}</>);
for (let item of cluster) {
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>)
......@@ -109,7 +114,7 @@ const SessionForm: React.FC<UpdateFormProps> = (props) => {
label="集群"
>
<Select
style={{ width: '100%' }}
style={{width: '100%'}}
placeholder="选择Flink集群"
optionLabelProp="label"
>
......@@ -123,9 +128,9 @@ const SessionForm: React.FC<UpdateFormProps> = (props) => {
const renderFooter = () => {
return (
<>
<Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
<Button onClick={() => handleUpdateModalVisible(false, values)}>{l('button.cancel')}</Button>
<Button type="primary" onClick={() => submitForm()}>
完成
{l('button.finish')}
</Button>
</>
);
......
dlink-web/src/components/Studio/StudioLeftTool/StudioConnector/index.tsx
View file @ 6ba6cdb0
......@@ -20,7 +20,7 @@
import {Button, Divider, Dropdown, Empty, Input, Menu, message, Space, Table, Tooltip} from "antd";
import {StateType} from "@/pages/DataStudio/model";
import {connect} from "umi";
import {connect, useIntl} from "umi";
import React, {useState} from "react";
import {
CommentOutlined,
......@@ -47,6 +47,9 @@ import {Scrollbars} from 'react-custom-scrollbars';
const StudioConnector = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {current, toolHeight, dispatch, currentSession, session} = props;
const [tableData, setTableData] = useState<[]>([]);
const [loadings, setLoadings] = useState<boolean[]>([]);
......@@ -130,12 +133,12 @@ const StudioConnector = (props: any) => {
overlay={
<Menu onClick={({key}) => keyEvent(key, item)}>
<Menu.Item key="desc">描述</Menu.Item>
<Menu.Item key="delete">删除</Menu.Item>
<Menu.Item key="delete">{l('button.delete')}</Menu.Item>
</Menu>
}
>
<a>
更多 <DownOutlined/>
{l('button.more')} <DownOutlined/>
</a>
</Dropdown>
);
......@@ -176,7 +179,7 @@ const StudioConnector = (props: any) => {
sorter: true,
...getColumnSearchProps("table name"),
}, {
title: '操作',
title: l('global.table.operate'),
dataIndex: 'option',
valueType: 'option',
render: (_, record) => [
......@@ -191,7 +194,7 @@ const StudioConnector = (props: any) => {
keyEvent('delete', record);
}}
>
删除
{l('button.delete')}
</a>
],
},];
......@@ -228,12 +231,12 @@ const StudioConnector = (props: any) => {
sorter: true,
...getColumnSearchProps("createUser"),
}, {
title: "创建时间",
title: l('global.table.createTime'),
dataIndex: "createTime",
key: "createTime",
sorter: true,
}, {
title: '操作',
title: l('global.table.operate'),
dataIndex: 'option',
valueType: 'option',
render: (_, record) => [
......@@ -248,7 +251,7 @@ const StudioConnector = (props: any) => {
keySessionsEvent('delete', record);
}}
>
删除
{l('button.delete')}
</a>
],
},];
......
dlink-web/src/components/Studio/StudioLeftTool/StudioDataBase/index.tsx
View file @ 6ba6cdb0
......@@ -20,7 +20,7 @@
import {Button, Drawer, Empty, Modal, Table, Tooltip} from "antd";
import {StateType} from "@/pages/DataStudio/model";
import {connect} from "umi";
import {connect, useIntl} from "umi";
import React, {useState} from "react";
import {PlusOutlined, ReloadOutlined} from '@ant-design/icons';
import {showDataBase} from "../../StudioEvent/DDL";
......@@ -31,6 +31,9 @@ import {handleRemove} from "@/components/Common/crud";
const StudioDataBase = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {database, toolHeight, dispatch} = props;
const [chooseDBModalVisible, handleDBFormModalVisible] = useState<boolean>(false);
const [values, setValues] = useState<any>({});
......@@ -131,7 +134,7 @@ const StudioDataBase = (props: any) => {
dataIndex: 'note',
},
{
title: '是否启用',
title: l('global.table.isEnable'),
dataIndex: 'enabled',
filters: [
{
......@@ -158,24 +161,24 @@ const StudioDataBase = (props: any) => {
dataIndex: 'heartbeatTime',
valueType: 'dateTime',
}, {
title: '创建时间',
title: l('global.table.createTime'),
dataIndex: 'createTime',
valueType: 'dateTime',
},
{
title: '最近更新时间',
title: l('global.table.lastUpdateTime'),
dataIndex: 'updateTime',
valueType: 'dateTime',
},
{
title: '操作',
title: l('global.table.operate'),
dataIndex: 'option',
valueType: 'option',
render: (_, record) => [
<Button type="dashed" onClick={() => onModifyDataBase(record)}>
配置
{l('button.edit')}
</Button>, <Button danger onClick={() => onDeleteDataBase(record)}>
删除
{l('button.delete')}
</Button>
],
},];
......@@ -199,8 +202,8 @@ const StudioDataBase = (props: any) => {
Modal.confirm({
title: '删除数据源',
content: `确定删除该数据源【${record.alias === "" ? record.name : record.alias}】吗？`,
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
await handleRemove('api/database', [record]);
setRow({});
......
dlink-web/src/components/Studio/StudioLeftTool/StudioFragment/index.tsx
View file @ 6ba6cdb0
......@@ -23,9 +23,13 @@ import {Drawer} from "antd";
import ProDescriptions from '@ant-design/pro-descriptions';
import {queryData} from "@/components/Common/crud";
import {FragmentVariableTableListItem} from "@/pages/FragmentVariable/data";
import {useIntl} from "umi";
const StudioFragment = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {toolHeight, dispatch} = props;
const [row, setRow] = useState<{}>();
......@@ -113,7 +117,7 @@ const StudioFragment = (props: any) => {
},
},
{
title: '创建时间',
title: l('global.table.createTime'),
dataIndex: 'createTime',
sorter: true,
valueType: 'dateTime',
......@@ -121,7 +125,7 @@ const StudioFragment = (props: any) => {
hideInTable: true,
},
{
title: '最近更新时间',
title: l('global.table.lastUpdateTime'),
dataIndex: 'updateTime',
sorter: true,
valueType: 'dateTime',
......
dlink-web/src/components/Studio/StudioLeftTool/StudioMetaData/index.tsx
View file @ 6ba6cdb0
......@@ -20,7 +20,7 @@
import {Button, Empty, Modal, Select, Tabs, Tag, Tree} from "antd";
import {StateType} from "@/pages/DataStudio/model";
import {connect} from "umi";
import {connect, useIntl} from "umi";
import React, {useState} from "react";
import {CodepenOutlined, DatabaseOutlined, DownOutlined, OrderedListOutlined, TableOutlined} from '@ant-design/icons';
import {showMetaDataTable} from "@/components/Studio/StudioEvent/DDL";
......@@ -36,6 +36,9 @@ const {TabPane} = Tabs;
const StudioMetaData = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {database, toolHeight, dispatch} = props;
const [databaseId, setDatabaseId] = useState<number>();
const [treeData, setTreeData] = useState<[]>([]);
......@@ -127,7 +130,7 @@ const StudioMetaData = (props: any) => {
<Button key="back" onClick={() => {
cancelHandle();
}}>
关闭
{l('button.close')}
</Button>,
]}
>
......
dlink-web/src/components/Studio/StudioLeftTool/StudioMetaStore/index.tsx
View file @ 6ba6cdb0
......@@ -19,8 +19,8 @@
import {Button, Col, Empty, message, Modal, Row, Select, Tabs, Tooltip, Tree} from "antd";
import {MetaStoreDataBaseType, MetaStoreTableType, StateType} from "@/pages/DataStudio/model";
import {connect} from "umi";
import {MetaStoreTableType, StateType} from "@/pages/DataStudio/model";
import {connect, useIntl} from "umi";
import React, {useState} from "react";
import {
AppstoreOutlined,
......@@ -48,6 +48,9 @@ const {TabPane} = Tabs;
const StudioMetaStore = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {current, toolHeight} = props;
const [catalog, setCatalog] = useState<string>();
const [database, setDatabase] = useState<string>();
......@@ -287,7 +290,7 @@ const StudioMetaStore = (props: any) => {
<Button key="back" onClick={() => {
cancelHandle();
}}>
关闭
{l('button.close')}
</Button>,
]}
>
......
dlink-web/src/components/Studio/StudioLeftTool/index.tsx
View file @ 6ba6cdb0
......@@ -30,7 +30,7 @@ import {
MessageOutlined
} from "@ant-design/icons";
import {StateType} from "@/pages/DataStudio/model";
import {connect,useIntl} from "umi";
import {connect, useIntl} from "umi";
import StudioTree from "../StudioTree";
import StudioConnector from "./StudioConnector";
import StudioDataBase from "./StudioDataBase";
......@@ -43,34 +43,39 @@ const {TabPane} = Tabs;
const StudioLeftTool = (props: any) => {
const l = (id: string, defaultMessage?: string) => useIntl().formatMessage({id,defaultMessage})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {toolHeight} = props;
return (
<Tabs defaultActiveKey="1" size="small" tabPosition="left" style={{height: toolHeight}}>
<TabPane tab={<span><BarsOutlined/> {l('pages.datastudio.label.directory','目录')}</span>} key="StudioTree">
<TabPane tab={<span><BarsOutlined/> {l('pages.datastudio.label.directory')}</span>} key="StudioTree">
<StudioTree/>
</TabPane>
<TabPane tab={<span><InsertRowAboveOutlined/> {l('pages.datastudio.label.structure','结构')}</span>} key="MetaStore">
<TabPane tab={<span><InsertRowAboveOutlined/> {l('pages.datastudio.label.structure')}</span>}
key="MetaStore">
<StudioMetaStore/>
</TabPane>
<TabPane tab={<span><MessageOutlined/> {l('pages.datastudio.label.session','会话')}</span>} key="Connectors">
<TabPane tab={<span><MessageOutlined/> {l('pages.datastudio.label.session')}</span>} key="Connectors">
<StudioConnector/>
</TabPane>
<TabPane tab={<span><ClusterOutlined/> {l('pages.datastudio.label.cluster','集群')}</span>} key="Cluster">
<TabPane tab={<span><ClusterOutlined/> {l('pages.datastudio.label.cluster')}</span>} key="Cluster">
<StudioCluster/>
</TabPane>
<TabPane tab={<span><DatabaseOutlined/> {l('pages.datastudio.label.datasource','数据源')}</span>} key="DataSource">
<TabPane tab={<span><DatabaseOutlined/> {l('pages.datastudio.label.datasource')}</span>}
key="DataSource">
<StudioDataBase/>
</TabPane>
<TabPane tab={<span><AppstoreOutlined/> {l('pages.datastudio.label.meta','元数据')}</span>} key="MetaData">
<TabPane tab={<span><AppstoreOutlined/> {l('pages.datastudio.label.meta')}</span>} key="MetaData">
<StudioMetaData/>
</TabPane>
<TabPane tab={<span><CloudOutlined/> {l('pages.datastudio.label.globalvariable','全局变量')}</span>} key="fragment">
<TabPane tab={<span><CloudOutlined/> {l('pages.datastudio.label.globalvariable')}</span>}
key="fragment">
<StudioFragment/>
</TabPane>
<TabPane tab={<span><FunctionOutlined/> {l('pages.datastudio.label.function','函数')}</span>} key="Function">
<TabPane tab={<span><FunctionOutlined/> {l('pages.datastudio.label.function')}</span>} key="Function">
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
</TabPane>
</Tabs>
......
dlink-web/src/components/Studio/StudioMenu/DolphinPush/index.tsx
View file @ 6ba6cdb0
......@@ -18,19 +18,19 @@
*/
import type {FormInstance} from 'antd/es/form';
import {Button, Form, InputNumber, message, Select, Switch, Checkbox, Row, Col} from "antd";
import {Button, Checkbox, Col, Form, InputNumber, message, Row, Select, Switch} from "antd";
import {StateType} from "@/pages/DataStudio/model";
import {connect} from "umi";
import React, {useState, useEffect} from "react";
import {
createTaskDefinition,
getTaskMainInfos,
updateTaskDefinition
} from "@/pages/DataStudio/service";
import {connect, useIntl} from "umi";
import React, {useEffect, useState} from "react";
import {createTaskDefinition, getTaskMainInfos, updateTaskDefinition} from "@/pages/DataStudio/service";
import {CODE} from "@/components/Common/crud";
import TextArea from "antd/es/input/TextArea";
const DolphinPush = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {data, taskCur, handleDolphinModalVisible} = props;
const [options, setOptions] = useState([]);
......@@ -196,7 +196,8 @@ const DolphinPush = (props: any) => {
<Form.Item name={['timeoutFlag']} style={{marginBottom: 10}} label="超时告警" valuePropName="checked">
<Switch checkedChildren="OPEN" unCheckedChildren="CLOSE" onChange={onSwitchChange}/>
</Form.Item>
<Form.Item name={['timeoutNotifyStrategy']} style={{marginBottom: 10}} hidden={!timeoutFlagHidden} label="超时策略">
<Form.Item name={['timeoutNotifyStrategy']} style={{marginBottom: 10}} hidden={!timeoutFlagHidden}
label="超时策略">
<CheckboxGroup>
<Row>
<Col span={12}>
......
dlink-web/src/components/Studio/StudioMenu/StudioHelp/index.tsx
View file @ 6ba6cdb0
......@@ -19,22 +19,28 @@
import {Typography} from "antd";
import {useIntl} from "umi";
const { Title, Paragraph, Link } = Typography;
const {Title, Paragraph, Link} = Typography;
const StudioMsg = () => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
return (
<Typography>
<Title level={3}>欢迎大家加入 Dinky 的官方社区，共建共赢~ </Title>
<Paragraph>
<ul>
<li>
<Link href="https://github.com/DataLinkDC/dlink" target="_blank">GitHub：https://github.com/DataLinkDC/dlink</Link>
<Link href="https://github.com/DataLinkDC/dlink"
target="_blank">GitHub：https://github.com/DataLinkDC/dlink</Link>
</li>
<li>
<Link href="https://gitee.com/DataLinkDC/Dinky" target="_blank">Gitee: https://gitee.com/DataLinkDC/Dinky</Link>
<Link href="https://gitee.com/DataLinkDC/Dinky" target="_blank">Gitee:
https://gitee.com/DataLinkDC/Dinky</Link>
</li>
<li>
公众号：DataLink数据中台
......
dlink-web/src/components/Studio/StudioMenu/index.tsx
View file @ 6ba6cdb0
......@@ -19,60 +19,68 @@
import styles from "./index.less";
import {Menu, Dropdown, Tooltip, Row, Col, notification, Modal, message} from "antd";
import {Col, Menu, message, Modal, notification, Row, Tooltip} from "antd";
import {
PauseCircleTwoTone, CarryOutTwoTone, DeleteTwoTone, PlayCircleTwoTone, CameraTwoTone, SnippetsTwoTone,
FileAddTwoTone, FolderOpenTwoTone, SafetyCertificateTwoTone, SaveTwoTone, FlagTwoTone, CodeTwoTone,
EnvironmentOutlined, SmileOutlined, RocketTwoTone, QuestionCircleTwoTone, MessageOutlined, ClusterOutlined
, EditTwoTone, RestTwoTone, ShrinkOutlined, ApiTwoTone, SendOutlined
ApiTwoTone,
CameraTwoTone,
CarryOutTwoTone,
ClusterOutlined,
CodeTwoTone,
DeleteTwoTone,
EditTwoTone,
EnvironmentOutlined,
FileAddTwoTone,
FlagTwoTone,
FolderOpenTwoTone,
MessageOutlined,
PauseCircleTwoTone,
PlayCircleTwoTone,
QuestionCircleTwoTone,
RestTwoTone,
RocketTwoTone,
SafetyCertificateTwoTone,
SaveTwoTone,
SendOutlined,
ShrinkOutlined,
SmileOutlined,
SnippetsTwoTone
} from "@ant-design/icons";
import Space from "antd/es/space";
import Divider from "antd/es/divider";
import Button from "antd/es/button/button";
import Breadcrumb from "antd/es/breadcrumb/Breadcrumb";
import {StateType} from "@/pages/DataStudio/model";
import {connect} from "umi";
import {connect, useIntl} from "umi";
import {CODE, postDataArray} from "@/components/Common/crud";
import {executeSql, getJobPlan, getTaskDefinition} from "@/pages/DataStudio/service";
import TaskAPI from "@/pages/API/TaskAPI";
import StudioHelp from "./StudioHelp";
import StudioGraph from "./StudioGraph";
import {
cancelTask, developTask,
cancelTask,
developTask,
offLineTask,
onLineTask, recoveryTask,
onLineTask,
recoveryTask,
releaseTask,
showCluster,
showTables
} from "@/components/Studio/StudioEvent/DDL";
import React, {useCallback, useEffect, useState, useRef} from "react";
import React, {useCallback, useEffect, useState} from "react";
import StudioExplain from "../StudioConsole/StudioExplain";
import {
DIALECT,
isExecuteSql,
isOnline,
isRunningTask,
isSql,
isTask,
} from "@/components/Studio/conf";
import {
ModalForm,
} from '@ant-design/pro-form';
import {DIALECT, isExecuteSql, isOnline, isRunningTask, isSql, isTask,} from "@/components/Studio/conf";
import {ModalForm,} from '@ant-design/pro-form';
import SqlExport from "@/pages/DataStudio/SqlExport";
import {Dispatch} from "@@/plugin-dva/connect";
import StudioTabs from "@/components/Studio/StudioTabs";
import {isDeletedTask, JOB_LIFE_CYCLE} from "@/components/Common/JobLifeCycle";
import DolphinPush from "@/components/Studio/StudioMenu/DolphinPush";
const menu = (
<Menu>
<Menu.Item>敬请期待</Menu.Item>
</Menu>
);
const StudioMenu = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {isFullScreen, tabs, current, currentPath, form, width, height, refs, dispatch, currentSession} = props;
const [modalVisible, handleModalVisible] = useState<boolean>(false);
const [exportModalVisible, handleExportModalVisible] = useState<boolean>(false);
......@@ -82,6 +90,12 @@ const StudioMenu = (props: any) => {
const [graphData, setGraphData] = useState();
const [dolphinData, setDolphinData] = useState();
const menu = (
<Menu>
<Menu.Item>敬请期待</Menu.Item>
</Menu>
);
const onKeyDown = useCallback((e) => {
if (e.keyCode === 83 && (e.ctrlKey === true || e.metaKey)) {
e.preventDefault();
......@@ -169,8 +183,8 @@ const StudioMenu = (props: any) => {
Modal.confirm({
title: '异步提交作业',
content: `确定异步提交作业【${current.task.alias}】到其配置的集群吗？请确认您的作业是否已经被保存！`,
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
let task = {
id: current.task.id,
......@@ -326,8 +340,8 @@ const StudioMenu = (props: any) => {
Modal.confirm({
title: '发布作业',
content: `确定发布作业【${current.task.alias}】吗？请确认您的作业是否已经被保存！`,
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
const res = releaseTask(current.task.id);
res.then((result) => {
......@@ -346,8 +360,8 @@ const StudioMenu = (props: any) => {
Modal.confirm({
title: '维护作业',
content: `确定维护作业【${current.task.alias}】吗？`,
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
const res = developTask(current.task.id);
res.then((result) => {
......@@ -364,8 +378,8 @@ const StudioMenu = (props: any) => {
Modal.confirm({
title: '上线作业',
content: `确定上线作业【${current.task.alias}】吗？`,
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
const res = onLineTask(current.task.id);
res.then((result) => {
......@@ -385,8 +399,8 @@ const StudioMenu = (props: any) => {
Modal.confirm({
title: '停止作业',
content: `确定停止作业【${current.task.alias}】吗？`,
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
const res = offLineTask(current.task.id, type);
res.then((result) => {
......@@ -408,8 +422,8 @@ const StudioMenu = (props: any) => {
Modal.confirm({
title: '下线作业',
content: `确定下线作业【${current.task.alias}】吗？`,
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
const res = offLineTask(current.task.id, type);
res.then((result) => {
......@@ -429,8 +443,8 @@ const StudioMenu = (props: any) => {
Modal.confirm({
title: '注销作业',
content: `确定注销作业【${current.task.alias}】吗？`,
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
const res = cancelTask(current.task.id);
res.then((result) => {
......@@ -449,8 +463,8 @@ const StudioMenu = (props: any) => {
Modal.confirm({
title: '恢复作业',
content: `确定恢复作业【${current.task.alias}】吗？`,
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
const res = recoveryTask(current.task.id);
res.then((result) => {
......
dlink-web/src/components/Studio/StudioRightTool/StudioConfig/index.tsx
View file @ 6ba6cdb0
......@@ -18,36 +18,37 @@
*/
import {connect,useIntl} from "umi";
import {connect, useIntl} from "umi";
import {StateType} from "@/pages/DataStudio/model";
import {
Form, InputNumber,Switch, Row, Col, Tooltip, Button,
} from "antd";
import {InfoCircleOutlined,MinusSquareOutlined} from "@ant-design/icons";
import {Button, Col, Form, InputNumber, Row, Switch, Tooltip,} from "antd";
import {InfoCircleOutlined, MinusSquareOutlined} from "@ant-design/icons";
import styles from "./index.less";
import { Scrollbars } from 'react-custom-scrollbars';
import {Scrollbars} from 'react-custom-scrollbars';
const StudioConfig = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {current,form,dispatch,tabs,toolHeight} = props;
const {current, form, dispatch, tabs, toolHeight} = props;
form.setFieldsValue(current.task);
const onValuesChange = (change:any,all:any)=>{
const onValuesChange = (change: any, all: any) => {
let newTabs = tabs;
for(let i=0;i<newTabs.panes.length;i++){
if(newTabs.panes[i].key==newTabs.activeKey){
for(let key in change){
newTabs.panes[i].task[key]=change[key];
for (let i = 0; i < newTabs.panes.length; i++) {
if (newTabs.panes[i].key == newTabs.activeKey) {
for (let key in change) {
newTabs.panes[i].task[key] = change[key];
}
break;
}
}
dispatch&&dispatch({
dispatch && dispatch({
type: "Studio/saveTabs",
payload: newTabs,
});
......@@ -61,13 +62,13 @@ const StudioConfig = (props: any) => {
<Tooltip title="最小化">
<Button
type="text"
icon={<MinusSquareOutlined />}
icon={<MinusSquareOutlined/>}
/>
</Tooltip>
</div>
</Col>
</Row>
<Scrollbars style={{height:(toolHeight-32)}}>
<Scrollbars style={{height: (toolHeight - 32)}}>
<Form
form={form}
layout="vertical"
......@@ -78,7 +79,7 @@ const StudioConfig = (props: any) => {
<Col span={12}>
<Form.Item
label="预览结果" className={styles.form_item} name="useResult" valuePropName="checked"
tooltip={{ title: '开启预览结果，将同步运行并返回数据结果', icon: <InfoCircleOutlined /> }}
tooltip={{title: '开启预览结果，将同步运行并返回数据结果', icon: <InfoCircleOutlined/>}}
>
<Switch checkedChildren="启用" unCheckedChildren="禁用"
/>
......@@ -87,7 +88,10 @@ const StudioConfig = (props: any) => {
<Col span={12}>
<Form.Item
label="打印流" className={styles.form_item} name="useChangeLog" valuePropName="checked"
tooltip={{ title: '开启打印流，将同步运行并返回含有 op 信息的 ChangeLog，默认不开启且返回最终结果 Table', icon: <InfoCircleOutlined /> }}
tooltip={{
title: '开启打印流，将同步运行并返回含有 op 信息的 ChangeLog，默认不开启且返回最终结果 Table',
icon: <InfoCircleOutlined/>
}}
>
<Switch checkedChildren="启用" unCheckedChildren="禁用"
/>
......@@ -100,13 +104,13 @@ const StudioConfig = (props: any) => {
label="最大行数" className={styles.form_item} name="maxRowNum"
tooltip='预览数据的最大行数'
>
<InputNumber min={1} max={9999} defaultValue={100} />
<InputNumber min={1} max={9999} defaultValue={100}/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="自动停止" className={styles.form_item} name="useAutoCancel" valuePropName="checked"
tooltip={{ title: '开启自动停止，将在捕获最大行数记录后自动停止任务', icon: <InfoCircleOutlined /> }}
tooltip={{title: '开启自动停止，将在捕获最大行数记录后自动停止任务', icon: <InfoCircleOutlined/>}}
>
<Switch checkedChildren="启用" unCheckedChildren="禁用"
/>
......
dlink-web/src/components/Studio/StudioRightTool/StudioEnvSetting/index.tsx
View file @ 6ba6cdb0
......@@ -18,10 +18,10 @@
*/
import {connect} from "umi";
import {connect, useIntl} from "umi";
import {StateType} from "@/pages/DataStudio/model";
import {Form, Switch, Row, Col,Tooltip, Button} from "antd";
import {InfoCircleOutlined,MinusSquareOutlined} from "@ant-design/icons";
import {Button, Col, Form, Row, Switch, Tooltip} from "antd";
import {InfoCircleOutlined, MinusSquareOutlined} from "@ant-design/icons";
import styles from "./index.less";
import {useEffect} from "react";
import {JarStateType} from "@/pages/Jar/model";
......@@ -29,7 +29,10 @@ import {Scrollbars} from "react-custom-scrollbars";
const StudioEnvSetting = (props: any) => {
const { current, form, dispatch, tabs, toolHeight} = props;
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {current, form, dispatch, tabs, toolHeight} = props;
useEffect(() => {
form.setFieldsValue(current.task);
......@@ -77,7 +80,10 @@ const StudioEnvSetting = (props: any) => {
<Col span={12}>
<Form.Item
label="Fragment" className={styles.form_item} name="fragment" valuePropName="checked"
tooltip={{title: '【增强特性】 开启FlinkSql片段机制，使用“:=”进行定义（以“;”结束），“${}”进行调用', icon: <InfoCircleOutlined/>}}
tooltip={{
title: '【增强特性】 开启FlinkSql片段机制，使用“:=”进行定义（以“;”结束），“${}”进行调用',
icon: <InfoCircleOutlined/>
}}
>
<Switch checkedChildren="启用" unCheckedChildren="禁用"
/>
......
dlink-web/src/components/Studio/StudioRightTool/StudioGuide/index.tsx
View file @ 6ba6cdb0
......@@ -18,50 +18,64 @@
*/
import {Typography,Divider} from 'antd';
import {Typography} from 'antd';
import React from 'react';
import {connect} from 'umi';
import {StateType} from '@/pages/DataStudio/model';
import {Scrollbars} from 'react-custom-scrollbars';
import { history,useIntl } from 'umi';
import {connect, history, useIntl} from 'umi';
const {Title, Paragraph,Link, Text} = Typography;
const {Title, Paragraph, Link, Text} = Typography;
const StudioGuide = (props: any) => {
const l = (id: string, defaultMessage?: string) => useIntl().formatMessage({id,defaultMessage});
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {toolHeight} = props;
return (
<Scrollbars style={{height: toolHeight}}>
<Typography style={{padding:'15px'}}>
<Title level={5}>{l('pages.datastudio.label.quickguide','快捷引导')}</Title>
<Typography style={{padding: '15px'}}>
<Title level={5}>{l('pages.datastudio.label.quickguide')}</Title>
<Paragraph>
<ul>
<li>
<Link onClick={()=>{history.push('/registration/cluster/clusterInstance')}}>{l('pages.datastudio.label.registcluster','注册集群实例')}</Link>
<Link onClick={() => {
history.push('/registration/cluster/clusterInstance')
}}>{l('pages.datastudio.label.registcluster')}</Link>
</li>
<li>
<Link onClick={()=>{history.push('/registration/cluster/clusterConfiguration')}}>{l('pages.datastudio.label.registclusterconfig','注册集群配置')}</Link>
<Link onClick={() => {
history.push('/registration/cluster/clusterConfiguration')
}}>{l('pages.datastudio.label.registclusterconfig')}</Link>
</li>
<li>
<Link onClick={()=>{history.push('/registration/jar')}}>{l('pages.datastudio.label.registjar','注册 Jar')}</Link>
<Link onClick={() => {
history.push('/registration/jar')
}}>{l('pages.datastudio.label.registjar')}</Link>
</li>
<li>
<Link onClick={()=>{history.push('/registration/database')}}>{l('pages.datastudio.label.registdatasource','注册数据源')}</Link>
<Link onClick={() => {
history.push('/registration/database')
}}>{l('pages.datastudio.label.registdatasource')}</Link>
</li>
<li>
<Link onClick={()=>{history.push('/registration/document')}}>{l('pages.datastudio.label.registdocument','注册文档')}</Link>
<Link onClick={() => {
history.push('/registration/document')
}}>{l('pages.datastudio.label.registdocument')}</Link>
</li>
<li>
<Link onClick={()=>{history.push('/settings')}}>{l('pages.datastudio.label.configsystemconfig','修改系统配置')}</Link>
<Link onClick={() => {
history.push('/settings')
}}>{l('pages.datastudio.label.configsystemconfig')}</Link>
</li>
<li>
<Link href="http://www.dlink.top/" target="_blank" >{l('pages.datastudio.label.officialdocumentation','官网文档')}</Link>
<Link href="http://www.dlink.top/"
target="_blank">{l('pages.datastudio.label.officialdocumentation')}</Link>
</li>
<li>
<Link href="https://github.com/DataLinkDC/dlink" target="_blank" >Github</Link>
<Link href="https://github.com/DataLinkDC/dlink" target="_blank">Github</Link>
</li>
</ul>
</Paragraph>
......
dlink-web/src/components/Studio/StudioRightTool/StudioHistory/index.tsx
View file @ 6ba6cdb0
......@@ -27,7 +27,7 @@ import {handleOption, queryData} from "@/components/Common/crud";
import {Scrollbars} from "react-custom-scrollbars";
import {TaskHistoryTableListItem} from "@/components/Studio/StudioRightTool/StudioHistory/data";
import {StateType} from "@/pages/DataStudio/model";
import {connect} from "umi";
import {connect, useIntl} from "umi";
import moment from "moment";
import {MonacoDiffEditor} from "react-monaco-editor";
......@@ -36,6 +36,10 @@ const url = '/api/task/version';
const StudioHistory = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {current, toolHeight} = props;
const [row, setRow] = useState<TaskHistoryTableListItem>();
const actionRef = useRef<ActionType>();
......@@ -56,8 +60,8 @@ const StudioHistory = (props: any) => {
let leftTitle = "Version：【" + versionDiffRow?.versionId + "】 创建时间: 【" + (moment(versionDiffRow?.createTime).format('YYYY-MM-DD HH:mm:ss')) + "】";
let rightTitle = "Version：【当前编辑版本】 创建时间: 【" + (moment(current?.task?.createTime).format('YYYY-MM-DD HH:mm:ss')) + "】 最后更新时间: 【" + (moment(current?.task?.updateTime).format('YYYY-MM-DD HH:mm:ss')) + "】"
let originalValue= versionDiffRow?.statement;
let currentValue= current?.task?.statement;
let originalValue = versionDiffRow?.statement;
let currentValue = current?.task?.statement;
return (
<>
......@@ -70,17 +74,18 @@ const StudioHistory = (props: any) => {
<Button key="back" onClick={() => {
cancelHandle();
}}>
关闭
{l('button.close')}
</Button>,
]}>
<div style={{display:"flex",flexDirection:"row", justifyContent: "space-between"}}>
<Tag color="green" style={{height:"20px"}} >
<div style={{display: "flex", flexDirection: "row", justifyContent: "space-between"}}>
<Tag color="green" style={{height: "20px"}}>
<RocketOutlined/> {leftTitle}
</Tag>
<Tag color="blue" style={{height:"20px"}}>
<Tag color="blue" style={{height: "20px"}}>
<SyncOutlined spin/> {rightTitle}
</Tag>
</div><br/>
</div>
<br/>
<Scrollbars style={{height: "98%"}}>
<React.StrictMode>
<MonacoDiffEditor options={{
......@@ -114,7 +119,7 @@ const StudioHistory = (props: any) => {
},
},
{
title: '创建时间',
title: l('global.table.createTime'),
dataIndex: 'createTime',
sorter: true,
valueType: 'dateTime',
......@@ -122,7 +127,7 @@ const StudioHistory = (props: any) => {
hideInSearch: true,
},
{
title: '操作',
title: l('global.table.operate'),
valueType: 'option',
align: "center",
render: (text, record, index) => (
......@@ -143,8 +148,8 @@ const StudioHistory = (props: any) => {
Modal.confirm({
title: '回滚Flink SQL版本',
content: `确定回滚Flink SQL版本至【${row.versionId}】吗？`,
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
const TaskHistoryRollbackItem = {
id: current.key, versionId: row.versionId
......
dlink-web/src/components/Studio/StudioRightTool/StudioJarSetting/index.tsx
View file @ 6ba6cdb0
......@@ -18,15 +18,14 @@
*/
import {connect} from "umi";
import {connect, useIntl} from "umi";
import {StateType} from "@/pages/DataStudio/model";
import {Form, InputNumber, Input, Select, Tag, Row, Col, Badge, Tooltip, Button, Space, Upload, message} from "antd";
import {Button, Col, Form, Input, InputNumber, message, Row, Select, Space, Tag, Tooltip, Upload} from "antd";
import {
InfoCircleOutlined,
PlusOutlined,
MinusSquareOutlined,
MinusCircleOutlined,
PaperClipOutlined,
MinusSquareOutlined,
PlusOutlined,
UploadOutlined
} from "@ant-design/icons";
import styles from "./index.less";
......@@ -35,15 +34,15 @@ import {JarStateType} from "@/pages/Jar/model";
import {Scrollbars} from "react-custom-scrollbars";
import {RUN_MODE} from "@/components/Studio/conf";
import {CODE} from "@/components/Common/crud";
import {
getConfigFormValues,
getHadoopConfigPathFromClusterConfigurationsById
} from "@/pages/ClusterConfiguration/function";
import {getHadoopConfigPathFromClusterConfigurationsById} from "@/pages/ClusterConfiguration/function";
const {Option} = Select;
const StudioJarSetting = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {clusterConfiguration, current, form, dispatch, tabs, jars, toolHeight} = props;
const [hadoopConfigPath, setHadoopConfigPath] = useState<string | undefined>(undefined);
const [jarPath, setJarPath] = useState<string | undefined>(undefined);
......
dlink-web/src/components/Studio/StudioRightTool/StudioKubernetesConfig/index.tsx
View file @ 6ba6cdb0
......@@ -18,10 +18,10 @@
*/
import {connect} from "umi";
import {connect, useIntl} from "umi";
import {StateType} from "@/pages/DataStudio/model";
import {Form, Input, Select, Row, Col, Tooltip, Button} from "antd";
import { MinusSquareOutlined} from "@ant-design/icons";
import {Button, Col, Form, Input, Row, Select, Tooltip} from "antd";
import {MinusSquareOutlined} from "@ant-design/icons";
import styles from "./index.less";
import {useEffect} from "react";
import {JarStateType} from "@/pages/Jar/model";
......@@ -33,7 +33,10 @@ const {Option} = Select;
const StudioKubernetesConfig = (props: any) => {
const { current, form, dispatch, tabs, group, toolHeight} = props;
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {current, form, dispatch, tabs, group, toolHeight} = props;
const getGroupOptions = () => {
......@@ -50,7 +53,7 @@ const StudioKubernetesConfig = (props: any) => {
useEffect(() => {
//Force set type k8s
current.task.type=RUN_MODE.KUBERNETES_APPLICATION
current.task.type = RUN_MODE.KUBERNETES_APPLICATION
form.setFieldsValue(current.task);
}, [current.task]);
......@@ -132,7 +135,7 @@ const StudioKubernetesConfig = (props: any) => {
);
};
export default connect(({Studio, Jar, Alert}: { Studio: StateType, Jar: JarStateType , Alert: AlertStateType }) => ({
export default connect(({Studio, Jar, Alert}: { Studio: StateType, Jar: JarStateType, Alert: AlertStateType }) => ({
sessionCluster: Studio.sessionCluster,
clusterConfiguration: Studio.clusterConfiguration,
current: Studio.current,
......
dlink-web/src/components/Studio/StudioRightTool/StudioSavePoint/index.tsx
View file @ 6ba6cdb0
......@@ -20,23 +20,27 @@
import React, {useRef, useState} from "react";
import {MinusSquareOutlined} from '@ant-design/icons';
import {ActionType, ProColumns} from "@ant-design/pro-table";
import {Drawer,Row,Col,Tooltip,Button} from 'antd';
import ProTable from '@ant-design/pro-table';
import ProTable, {ActionType, ProColumns} from "@ant-design/pro-table";
import {Button, Col, Drawer, Row, Tooltip} from 'antd';
import ProDescriptions from '@ant-design/pro-descriptions';
import {queryData} from "@/components/Common/crud";
import {SavePointTableListItem} from "@/components/Studio/StudioRightTool/StudioSavePoint/data";
import {StateType} from "@/pages/DataStudio/model";
import {connect} from "umi";
import { Scrollbars } from 'react-custom-scrollbars';
import {connect, useIntl} from "umi";
import {Scrollbars} from 'react-custom-scrollbars';
const url = '/api/savepoints';
const StudioSavePoint = (props: any) => {
const {current,toolHeight,dispatch} = props;
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {current, toolHeight, dispatch} = props;
const [row, setRow] = useState<SavePointTableListItem>();
const actionRef = useRef<ActionType>();
if(current.key){
if (current.key) {
actionRef.current?.reloadAndRest?.();
}
......@@ -81,7 +85,7 @@ const StudioSavePoint = (props: any) => {
hideInSearch: true,
},
{
title: '创建时间',
title: l('global.table.createTime'),
dataIndex: 'createTime',
sorter: true,
valueType: 'dateTime',
......@@ -101,17 +105,17 @@ const StudioSavePoint = (props: any) => {
<Tooltip title="最小化">
<Button
type="text"
icon={<MinusSquareOutlined />}
icon={<MinusSquareOutlined/>}
/>
</Tooltip>
</div>
</Col>
</Row>
<Scrollbars style={{height:(toolHeight-32)}}>
<Scrollbars style={{height: (toolHeight - 32)}}>
<ProTable<SavePointTableListItem>
actionRef={actionRef}
rowKey="id"
request={(params, sorter, filter) => queryData(url, {taskId:current.key,...params, sorter, filter})}
request={(params, sorter, filter) => queryData(url, {taskId: current.key, ...params, sorter, filter})}
columns={columns}
search={false}
/>
......@@ -139,10 +143,10 @@ const StudioSavePoint = (props: any) => {
</Drawer>
</Scrollbars>
</>
);
);
};
export default connect(({ Studio }: { Studio: StateType }) => ({
export default connect(({Studio}: { Studio: StateType }) => ({
current: Studio.current,
toolHeight: Studio.toolHeight,
}))(StudioSavePoint);
dlink-web/src/components/Studio/StudioRightTool/StudioSetting/index.tsx
View file @ 6ba6cdb0
......@@ -18,10 +18,16 @@
*/
import {connect} from "umi";
import {connect, useIntl} from "umi";
import {StateType} from "@/pages/DataStudio/model";
import {Form, InputNumber, Input, Switch, Select, Tag, Row, Col, Badge, Tooltip, Button, Typography, Space} from "antd";
import {InfoCircleOutlined, PlusOutlined, MinusSquareOutlined, MinusCircleOutlined,PaperClipOutlined} from "@ant-design/icons";
import {Badge, Button, Col, Form, Input, InputNumber, Row, Select, Space, Switch, Tag, Tooltip, Typography} from "antd";
import {
InfoCircleOutlined,
MinusCircleOutlined,
MinusSquareOutlined,
PaperClipOutlined,
PlusOutlined
} from "@ant-design/icons";
import styles from "./index.less";
import {useEffect} from "react";
import {showTables} from "@/components/Studio/StudioEvent/DDL";
......@@ -35,12 +41,27 @@ const {Text} = Typography;
const StudioSetting = (props: any) => {
const {sessionCluster, clusterConfiguration, current, form, dispatch, tabs, currentSession, env,group, toolHeight} = props;
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {
sessionCluster,
clusterConfiguration,
current,
form,
dispatch,
tabs,
currentSession,
env,
group,
toolHeight
} = props;
const getClusterOptions = () => {
const itemList = [];
for (const item of sessionCluster) {
const tag = (<><Tag color={item.enabled ? "processing" : "error"}>{item.type}</Tag>{item.alias === "" ? item.name : item.alias}</>);
const tag = (<><Tag
color={item.enabled ? "processing" : "error"}>{item.type}</Tag>{item.alias === "" ? item.name : item.alias}</>);
itemList.push(<Option key={item.id} value={item.id} label={tag}>
{tag}
</Option>)
......@@ -51,7 +72,8 @@ const StudioSetting = (props: any) => {
const getClusterConfigurationOptions = () => {
const itemList = [];
for (const item of clusterConfiguration) {
const tag = (<><Tag color={item.enabled ? "processing" : "error"}>{item.type}</Tag>{item.alias === "" ? item.name : item.alias}</>);
const tag = (<><Tag
color={item.enabled ? "processing" : "error"}>{item.type}</Tag>{item.alias === "" ? item.name : item.alias}</>);
itemList.push(<Option key={item.id} value={item.id} label={tag}>
{tag}
</Option>)
......@@ -65,7 +87,7 @@ const StudioSetting = (props: any) => {
</Option>];
for (const item of env) {
const tag = (<>{item.enabled ? <Badge status="success"/> : <Badge status="error"/>}
{item.fragment ? <PaperClipOutlined /> : undefined}{item.alias}</>);
{item.fragment ? <PaperClipOutlined/> : undefined}{item.alias}</>);
itemList.push(<Option key={item.id} value={item.id} label={tag}>
{tag}
</Option>)
......@@ -147,7 +169,8 @@ const StudioSetting = (props: any) => {
{(current.task.type === RUN_MODE.YARN_SESSION || current.task.type === RUN_MODE.KUBERNETES_SESSION || current.task.type === RUN_MODE.STANDALONE) ? (
<Row>
<Col span={24}>
<Form.Item label="Flink集群" tooltip={`选择Flink集群进行 ${current.task.type} 模式的远程提交任务`} name="clusterId"
<Form.Item label="Flink集群" tooltip={`选择Flink集群进行 ${current.task.type} 模式的远程提交任务`}
name="clusterId"
className={styles.form_item}>
{
currentSession.session ?
......@@ -167,10 +190,11 @@ const StudioSetting = (props: any) => {
</Form.Item>
</Col>
</Row>) : undefined}
{(current.task.type === RUN_MODE.YARN_PER_JOB || current.task.type === RUN_MODE.YARN_APPLICATION|| current.task.type === RUN_MODE.KUBERNETES_APPLICATION) ? (
{(current.task.type === RUN_MODE.YARN_PER_JOB || current.task.type === RUN_MODE.YARN_APPLICATION || current.task.type === RUN_MODE.KUBERNETES_APPLICATION) ? (
<Row>
<Col span={24}>
<Form.Item label="Flink集群配置" tooltip={`选择Flink集群配置进行 ${current.task.type} 模式的远程提交任务`}
<Form.Item label="Flink集群配置"
tooltip={`选择Flink集群配置进行 ${current.task.type} 模式的远程提交任务`}
name="clusterConfigurationId"
className={styles.form_item}>
<Select
......@@ -223,7 +247,10 @@ const StudioSetting = (props: any) => {
<Col span={12}>
<Form.Item
label="全局变量" className={styles.form_item} name="fragment" valuePropName="checked"
tooltip={{title: '【增强特性】 开启FlinkSql全局变量，使用“:=”进行定义（以“;”结束），“${}”进行调用', icon: <InfoCircleOutlined/>}}
tooltip={{
title: '【增强特性】 开启FlinkSql全局变量，使用“:=”进行定义（以“;”结束），“${}”进行调用',
icon: <InfoCircleOutlined/>
}}
>
<Switch checkedChildren="启用" unCheckedChildren="禁用"
/>
......@@ -316,7 +343,7 @@ const StudioSetting = (props: any) => {
);
};
export default connect(({Studio, Jar, Alert}: { Studio: StateType, Jar: JarStateType , Alert: AlertStateType }) => ({
export default connect(({Studio, Jar, Alert}: { Studio: StateType, Jar: JarStateType, Alert: AlertStateType }) => ({
sessionCluster: Studio.sessionCluster,
clusterConfiguration: Studio.clusterConfiguration,
current: Studio.current,
......
dlink-web/src/components/Studio/StudioRightTool/StudioSqlConfig/index.tsx
View file @ 6ba6cdb0
......@@ -18,39 +18,38 @@
*/
import {connect,useIntl} from "umi";
import {connect, useIntl} from "umi";
import {StateType} from "@/pages/DataStudio/model";
import {
Form, InputNumber, Select, Tag, Row, Col, Tooltip, Button,
} from "antd";
import {Button, Col, Form, InputNumber, Row, Select, Tag, Tooltip,} from "antd";
import {MinusSquareOutlined} from "@ant-design/icons";
import styles from "./index.less";
import {useEffect, useState} from "react";
import { Scrollbars } from 'react-custom-scrollbars';
import {Scrollbars} from 'react-custom-scrollbars';
const { Option } = Select;
const {Option} = Select;
const StudioSqlConfig = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {current,form,dispatch,tabs,database,toolHeight} = props;
const {current, form, dispatch, tabs, database, toolHeight} = props;
form.setFieldsValue(current.task);
const onValuesChange = (change:any,all:any)=>{
const onValuesChange = (change: any, all: any) => {
let newTabs = tabs;
for(let i=0;i<newTabs.panes.length;i++){
if(newTabs.panes[i].key==newTabs.activeKey){
for(let key in change){
newTabs.panes[i].task[key]=change[key];
for (let i = 0; i < newTabs.panes.length; i++) {
if (newTabs.panes[i].key == newTabs.activeKey) {
for (let key in change) {
newTabs.panes[i].task[key] = change[key];
}
break;
}
}
dispatch&&dispatch({
dispatch && dispatch({
type: "Studio/saveTabs",
payload: newTabs,
});
......@@ -60,8 +59,9 @@ const StudioSqlConfig = (props: any) => {
const getDataBaseOptions = () => {
const itemList = [];
for (const item of database) {
if(item.type.toUpperCase() === current.task.dialect.toUpperCase()) {
const tag = (<><Tag color={item.enabled ? "processing" : "error"}>{item.type}</Tag>{item.alias === "" ? item.name : item.alias}</>);
if (item.type.toUpperCase() === current.task.dialect.toUpperCase()) {
const tag = (<><Tag
color={item.enabled ? "processing" : "error"}>{item.type}</Tag>{item.alias === "" ? item.name : item.alias}</>);
itemList.push(<Option key={item.id} value={item.id} label={tag}>
{tag}
</Option>)
......@@ -78,13 +78,13 @@ const StudioSqlConfig = (props: any) => {
<Tooltip title="最小化">
<Button
type="text"
icon={<MinusSquareOutlined />}
icon={<MinusSquareOutlined/>}
/>
</Tooltip>
</div>
</Col>
</Row>
<Scrollbars style={{height:(toolHeight-32)}}>
<Scrollbars style={{height: (toolHeight - 32)}}>
<Form
form={form}
layout="vertical"
......@@ -93,7 +93,7 @@ const StudioSqlConfig = (props: any) => {
>
<Row>
<Col span={24}>
<Form.Item label={l('pages.datastudio.label.datasource','数据源')} tooltip={`选择 Sql 语句执行的数据源`}
<Form.Item label={l('pages.datastudio.label.datasource')} tooltip={`选择 Sql 语句执行的数据源`}
name="databaseId"
className={styles.form_item}>
<Select
......@@ -107,10 +107,10 @@ const StudioSqlConfig = (props: any) => {
</Col>
<Col span={24}>
<Form.Item
label={l('pages.datastudio.label.maxrows','最大行数')} className={styles.form_item} name="maxRowNum"
label={l('pages.datastudio.label.maxrows')} className={styles.form_item} name="maxRowNum"
tooltip='预览数据的最大行数'
>
<InputNumber min={1} max={9999} defaultValue={100} />
<InputNumber min={1} max={9999} defaultValue={100}/>
</Form.Item>
</Col>
</Row>
......
dlink-web/src/components/Studio/StudioRightTool/StudioTaskInfo/index.tsx
View file @ 6ba6cdb0
......@@ -18,11 +18,9 @@
*/
import {connect} from "umi";
import {connect, useIntl} from "umi";
import {StateType} from "@/pages/DataStudio/model";
import {
Form, Row, Col, Tooltip, Button, Input, Descriptions, Typography
} from "antd";
import {Button, Col, Descriptions, Form, Input, Row, Tooltip, Typography} from "antd";
import {MinusSquareOutlined} from "@ant-design/icons";
import styles from "./index.less";
import {Scrollbars} from 'react-custom-scrollbars';
......@@ -32,6 +30,9 @@ const {Paragraph} = Typography;
const StudioTaskInfo = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {current, form, dispatch, tabs, toolHeight} = props;
form.setFieldsValue(current.task);
......
dlink-web/src/components/Studio/StudioRightTool/StudioUDFInfo/index.tsx
View file @ 6ba6cdb0
......@@ -18,10 +18,10 @@
*/
import {connect} from "umi";
import {connect, useIntl} from "umi";
import {StateType} from "@/pages/DataStudio/model";
import {Form, Switch, Row, Col, Tooltip, Button, Input} from "antd";
import {InfoCircleOutlined,MinusSquareOutlined} from "@ant-design/icons";
import {Button, Col, Form, Input, Row, Tooltip} from "antd";
import {MinusSquareOutlined} from "@ant-design/icons";
import styles from "./index.less";
import {useEffect} from "react";
import {JarStateType} from "@/pages/Jar/model";
......@@ -29,7 +29,10 @@ import {Scrollbars} from "react-custom-scrollbars";
const StudioUDFInfo = (props: any) => {
const { current, form, toolHeight} = props;
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {current, form, toolHeight} = props;
useEffect(() => {
form.setFieldsValue(current.task);
......
dlink-web/src/components/Studio/StudioRightTool/index.tsx
View file @ 6ba6cdb0
......@@ -19,9 +19,9 @@
import {Tabs} from "antd";
import {SettingOutlined, ScheduleOutlined, ContainerOutlined} from "@ant-design/icons";
import {ContainerOutlined, ScheduleOutlined, SettingOutlined} from "@ant-design/icons";
import {StateType} from "@/pages/DataStudio/model";
import {connect} from "umi";
import {connect, useIntl} from "umi";
import StudioConfig from "./StudioConfig";
import StudioSetting from "./StudioSetting";
import StudioSavePoint from "./StudioSavePoint";
......@@ -39,6 +39,9 @@ const {TabPane} = Tabs;
const StudioRightTool = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {current, form, toolHeight} = props;
const renderContent = () => {
......@@ -121,8 +124,8 @@ const StudioRightTool = (props: any) => {
<TabPane tab={<span><ScheduleOutlined/> 保存点</span>} key="StudioSavePoint">
<StudioSavePoint/>
</TabPane>
<TabPane tab={<span><ScheduleOutlined /> 版本历史</span>} key="StudioHistory" >
<StudioHistory />
<TabPane tab={<span><ScheduleOutlined/> 版本历史</span>} key="StudioHistory">
<StudioHistory/>
</TabPane>
</>)
};
......
dlink-web/src/components/Studio/StudioTabs/index.tsx
View file @ 6ba6cdb0
......@@ -20,7 +20,7 @@
import {Dropdown, Menu, message, Tabs} from 'antd';
import React from 'react';
import {connect} from 'umi';
import {connect, useIntl} from 'umi';
import {StateType} from '@/pages/DataStudio/model';
import styles from './index.less';
import StudioEdit from '../StudioEdit';
......@@ -32,6 +32,10 @@ import StudioKubernetes from "@/components/Studio/StudioKubernetes";
const {TabPane} = Tabs;
const EditorTabs = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {tabs, current, toolHeight, width, height} = props;
const onChange = (activeKey: any) => {
......
dlink-web/src/components/Studio/StudioTree/components/SimpleTaskForm.tsx
View file @ 6ba6cdb0
......@@ -23,6 +23,7 @@ import {Button, Form, Input, Modal, Select} from 'antd';
import type {TaskTableListItem} from '../data.d';
import {DIALECT} from "@/components/Studio/conf";
import {useIntl} from "umi";
const {Option} = Select;
......@@ -40,6 +41,10 @@ const formLayout = {
};
const SimpleTaskForm: React.FC<UpdateFormProps> = (props) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const [formVals, setFormVals] = useState<Partial<TaskTableListItem>>({
id: props.values.id,
name: props.values.name,
......@@ -66,7 +71,7 @@ const SimpleTaskForm: React.FC<UpdateFormProps> = (props) => {
const renderContent = () => {
return (
<>
{isCreate?(<Form.Item
{isCreate ? (<Form.Item
label="作业类型" name="dialect"
tooltip='指定作业类型，默认为 FlinkSql'
>
......@@ -87,7 +92,7 @@ const SimpleTaskForm: React.FC<UpdateFormProps> = (props) => {
<Option value={DIALECT.JAVA}>{DIALECT.JAVA}</Option>
<Option value={DIALECT.SQL}>{DIALECT.SQL}</Option>
</Select>
</Form.Item>):undefined}
</Form.Item>) : undefined}
<Form.Item
name="name"
label="名称"
......@@ -109,7 +114,7 @@ const SimpleTaskForm: React.FC<UpdateFormProps> = (props) => {
<>
<Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
<Button type="primary" onClick={() => submitForm()}>
完成
{l('button.finish')}
</Button>
</>
);
......
dlink-web/src/components/Studio/StudioTree/components/UpdateCatalogueForm.tsx
View file @ 6ba6cdb0
......@@ -22,6 +22,7 @@ import React, {useState} from 'react';
import {Button, Form, Input, Modal} from 'antd';
import type {CatalogueTableListItem} from '../data.d';
import {useIntl} from "umi";
export type UpdateFormProps = {
onCancel: (flag?: boolean, formVals?: Partial<CatalogueTableListItem>) => void;
......@@ -38,6 +39,11 @@ const formLayout = {
};
const UpdateCatalogueForm: React.FC<UpdateFormProps> = (props) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const [formVals, setFormVals] = useState<Partial<CatalogueTableListItem>>({
id: props.values.id,
taskId: props.values.taskId,
......@@ -80,7 +86,7 @@ const UpdateCatalogueForm: React.FC<UpdateFormProps> = (props) => {
<>
<Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
<Button type="primary" onClick={() => submitForm()}>
完成
{l('button.finish')}
</Button>
</>
);
......
dlink-web/src/components/Studio/StudioTree/components/UploadModal.tsx
View file @ 6ba6cdb0
......@@ -19,33 +19,39 @@
import React from 'react';
import {Button, message,Modal,Upload} from "antd";
import {Button, message, Modal, Upload} from "antd";
import {UploadOutlined} from "@ant-design/icons";
import {useIntl} from "umi";
interface UploadModalProps {
visible: boolean;
action: string;
handleOk: ()=>void;
onCancel: ()=>void;
handleOk: () => void;
onCancel: () => void;
buttonTitle: string;
}
const UploadModal:React.FC<UploadModalProps> = (props:any) => {
const {visible,handleOk,onCancel,action,buttonTitle} = props;
const UploadModal: React.FC<UploadModalProps> = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {visible, handleOk, onCancel, action, buttonTitle} = props;
const handlers = {
name: 'file',
action: action,
maxCount: 1,
multiple: true,
onChange(info:any) {
onChange(info: any) {
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
console.log('info:',info);
if(info.file.response.code === 1){
console.log('info:', info);
if (info.file.response.code === 1) {
message.error(`${info.file.response.msg} `);
}else{
} else {
message.success(`${info.file.name} file uploaded successfully`);
}
} else if (info.file.status === 'error') {
......@@ -62,7 +68,7 @@ const UploadModal:React.FC<UploadModalProps> = (props:any) => {
maskClosable={false}
>
<Upload {...handlers}>
<Button size="small" icon={<UploadOutlined />}>{buttonTitle}</Button>
<Button size="small" icon={<UploadOutlined/>}>{buttonTitle}</Button>
</Upload>
</Modal>
</div>
......
dlink-web/src/components/Studio/StudioTree/index.tsx
View file @ 6ba6cdb0
......@@ -19,7 +19,7 @@
import React, {Key, useEffect, useState} from "react";
import {connect} from "umi";
import {connect, useIntl} from "umi";
import {DownloadOutlined, DownOutlined, FolderAddOutlined, SwitcherOutlined, UploadOutlined} from "@ant-design/icons";
import type {UploadProps} from 'antd';
import {Button, Col, Empty, Input, Menu, message, Modal, Row, Tooltip, Tree, Upload} from 'antd';
......@@ -94,6 +94,10 @@ const {DirectoryTree} = Tree;
const {Search} = Input;
const StudioTree: React.FC<StudioTreeProps> = (props) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {rightClickMenu, dispatch, tabs, refs, toolHeight} = props;
const [treeData, setTreeData] = useState<TreeDataNode[]>();
const [expandedKeys, setExpandedKeys] = useState<Key[]>();
......@@ -291,8 +295,8 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
Modal.confirm({
title: '提交作业',
content: '确定提交该作业到其配置的集群吗？',
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
let task = {
id: node?.taskId,
......@@ -409,8 +413,8 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
Modal.confirm({
title: `删除${label}`,
content: `确定删除该${label}【${node?.name}】吗？`,
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
await handleRemoveById('/api/catalogue', node!.id);
if (node?.taskId) {
......@@ -434,36 +438,36 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
let menuItems;
if (rightClickNode && rightClickNode.isLeaf) {
menuItems = (<>
<Menu.Item key='Open'>{'打开'}</Menu.Item>
<Menu.Item key='Submit'>{'异步提交'}</Menu.Item>
<Menu.Item key='ExportJson'>{'导出Json'}</Menu.Item>
<Menu.Item key='Rename'>{'重命名'}</Menu.Item>
<Menu.Item key='Copy'>{'复制'}</Menu.Item>
<Menu.Item key='Cut'>{'剪切'}</Menu.Item>
{cutId && <Menu.Item key='Paste'>{'粘贴'}</Menu.Item>}
<Menu.Item key='Delete'>{'删除'}</Menu.Item>
<Menu.Item key='Open'>{l('right.menu.open')}</Menu.Item>
<Menu.Item key='Submit'>{l('right.menu.submit')}</Menu.Item>
<Menu.Item key='ExportJson'>{l('right.menu.exportJson')}</Menu.Item>
<Menu.Item key='Rename'>{l('right.menu.rename')}</Menu.Item>
<Menu.Item key='Copy'>{l('right.menu.copy')}</Menu.Item>
<Menu.Item key='Cut'>{l('right.menu.cut')}</Menu.Item>
{cutId && <Menu.Item key='Paste'>{l('right.menu.paste')}</Menu.Item>}
<Menu.Item key='Delete'>{l('right.menu.delete')}</Menu.Item>
</>)
} else if (rightClickNode && rightClickNode.children && rightClickNode.children.length > 0) {
menuItems = (<>
<Menu.Item key='CreateCatalogue'>{'创建目录'}</Menu.Item>
<Menu.Item key='CreateRootCatalogue'>{'创建根目录'}</Menu.Item>
<Menu.Item key='ShowUploadModal'>{'上传zip包创建工程'}</Menu.Item>
<Menu.Item key='CreateTask'>{'创建作业'}</Menu.Item>
<Menu.Item key='Rename'>{'重命名'}</Menu.Item>
<Menu.Item key='Copy'>{'复制'}</Menu.Item>
<Menu.Item key='Cut'>{'剪切'}</Menu.Item>
{cutId && <Menu.Item key='Paste'>{'粘贴'}</Menu.Item>}
<Menu.Item disabled>{'删除'}</Menu.Item>
<Menu.Item key='CreateCatalogue'>{l('right.menu.createCatalogue')}</Menu.Item>
<Menu.Item key='CreateRootCatalogue'>{l('right.menu.createRootCatalogue')}</Menu.Item>
<Menu.Item key='ShowUploadModal'>{l('right.menu.uploadZipToCreate')}</Menu.Item>
<Menu.Item key='CreateTask'>{l('right.menu.createTask')}</Menu.Item>
<Menu.Item key='Rename'>{l('right.menu.rename')}</Menu.Item>
<Menu.Item key='Copy'>{l('right.menu.copy')}</Menu.Item>
<Menu.Item key='Cut'>{l('right.menu.cut')}</Menu.Item>
{cutId && <Menu.Item key='Paste'>{l('right.menu.paste')}</Menu.Item>}
<Menu.Item disabled>{l('right.menu.delete')}</Menu.Item>
</>)
} else {
menuItems = (<>
<Menu.Item key='CreateCatalogue'>{'创建目录'}</Menu.Item>
<Menu.Item key='CreateTask'>{'创建作业'}</Menu.Item>
<Menu.Item key='Rename'>{'重命名'}</Menu.Item>
<Menu.Item key='Copy'>{'复制'}</Menu.Item>
<Menu.Item key='Cut'>{'剪切'}</Menu.Item>
{cutId && <Menu.Item key='Paste'>{'粘贴'}</Menu.Item>}
<Menu.Item key='Delete'>{'删除'}</Menu.Item>
<Menu.Item key='CreateCatalogue'>{l('right.menu.createCatalogue')}</Menu.Item>
<Menu.Item key='CreateTask'>{l('right.menu.createTask')}</Menu.Item>
<Menu.Item key='Rename'>{l('right.menu.rename')}</Menu.Item>
<Menu.Item key='Copy'>{l('right.menu.copy')}</Menu.Item>
<Menu.Item key='Cut'>{l('right.menu.cut')}</Menu.Item>
{cutId && <Menu.Item key='Paste'>{l('right.menu.paste')}</Menu.Item>}
<Menu.Item key='Delete'>{l('right.menu.delete')}</Menu.Item>
</>)
}
const menu = (
......@@ -486,7 +490,7 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
isLeaf: false,
parentId: 0,
});
}}>创建目录</Button></Empty>);
}}>{l('button.createDir')}</Button></Empty>);
return (treeData && treeData.length == 0) ? empty : '';
};
......
dlink-web/src/components/Studio/index.tsx
View file @ 6ba6cdb0
......@@ -19,7 +19,7 @@
import React, {useCallback, useEffect, useState} from "react";
import {connect} from "umi";
import {connect, useIntl} from "umi";
import styles from './index.less';
import StudioMenu from "./StudioMenu";
import {Card, Col, Form, Row} from "antd";
......@@ -46,7 +46,10 @@ import {loadSettings} from "@/pages/SettingCenter/FlinkSettings/function";
const Studio = (props: any) => {
const {isFullScreen,rightClickMenu, toolHeight, toolLeftWidth,toolRightWidth,dispatch} = props;
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {isFullScreen, rightClickMenu, toolHeight, toolLeftWidth, toolRightWidth, dispatch} = props;
const [form] = Form.useForm();
const VIEW = {
leftToolWidth: 300,
......@@ -124,7 +127,7 @@ const Studio = (props: any) => {
<DraggleLayout
containerWidth={size.width}
containerHeight={toolHeight}
min={VIEW.leftMargin+VIEW.midMargin}
min={VIEW.leftMargin + VIEW.midMargin}
max={size.width - VIEW.rightMargin}
initLeftWidth={size.width - toolRightWidth}
isLeft={false}
......@@ -163,7 +166,7 @@ const Studio = (props: any) => {
}}/>
</Col>
<Col>
{!isFullScreen?<StudioTabs width={size.width - toolRightWidth - toolLeftWidth}/>:undefined}
{!isFullScreen ? <StudioTabs width={size.width - toolRightWidth - toolLeftWidth}/> : undefined}
</Col>
</DraggleLayout>
<Col id='StudioRightTool' className={styles["vertical-tabs"]}>
......
dlink-web/src/locales/en-US.ts
View file @ 6ba6cdb0
......@@ -26,6 +26,7 @@ import request from './en-US/request';
import settingDrawer from './en-US/settingDrawer';
import settings from './en-US/settings';
import button from './en-US/button';
import shortKey from './en-US/shortcutKey';
export default {
'navBar.lang': 'Languages',
......@@ -45,4 +46,5 @@ export default {
...pages,
...request,
...button,
...shortKey,
};
dlink-web/src/locales/en-US/button.ts
View file @ 6ba6cdb0
......@@ -38,11 +38,27 @@ export default {
'button.disable': 'Disable',
'button.reset': 'Reset',
'button.search': 'Search',
'button.upload': 'Upload',
'button.import': 'Import',
'button.export': 'Export',
'button.submit': 'Submit',
'right.menu.open': 'Open',
'right.menu.submit': 'Sync Submit',
'right.menu.exportJson': 'Export JSON',
'right.menu.rename': 'Rename',
'right.menu.copy': 'Copy',
'right.menu.cut': 'Cut',
'right.menu.paste': 'Paste',
'right.menu.delete': 'Delete',
'right.menu.createCatalogue': 'Creat Dire',
'right.menu.createRootCatalogue': 'Create Root Dir',
'right.menu.uploadZipToCreate': 'Upload Zip To Create',
'right.menu.createTask': 'Create Task',
'tips.selected': 'Selected',
'tips.selected': 'Selected {total} Item',
'tips.notSelected': 'Not Select',
'tips.item': 'Item',
'status.enabled': 'Enabled',
'status.disabled': 'Disabled',
......
dlink-web/src/locales/en-US/globalHeader.ts
View file @ 6ba6cdb0
......@@ -34,7 +34,7 @@ export default {
'component.noticeIcon.empty': 'No notifications',
'component.noticeIcon.view-more': 'View more',
'global.table.operate': 'Operate',
'global.table.operate': 'Operation',
'global.table.config': 'Config',
'global.table.edit': 'Edit',
'global.table.delete': 'Delete',
......@@ -50,9 +50,9 @@ export default {
'global.table.registType.manual': 'Manual',
'global.table.registType.automatic': 'Automatic',
'global.table.isUse': 'Is Use',
'global.table.inUse': 'In Use',
'global.table.notUse': 'Not Use',
'global.table.isEnable': 'Is Enable',
'global.table.enabled': 'Enabled',
'global.table.disabled': 'Disabled',
'global.table.status': 'Status',
'global.table.status.normal': 'Normal',
......@@ -95,8 +95,4 @@ export default {
'global.table.runmode': 'Run Mode',
};
dlink-web/src/locales/en-US/menu.ts
View file @ 6ba6cdb0
......@@ -70,7 +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.checkTenantConfirm': 'Are you sure to switch tenant [ {tenantCode} ] ?',
'menu.account.logout': 'Logout',
......
dlink-web/src/locales/en-US/pages.ts
View file @ 6ba6cdb0
......@@ -88,10 +88,6 @@ export default {
'pages.searchTable.batchDeletion': 'Batch Deletion',
'pages.searchTable.batchApproval': 'Batch Approval',
'pages.operate': 'Operation', // all table list of operation columns is use this item
'pages.devops.jobstatus.CREATED': 'Created',
'pages.devops.jobstatus.INITIALIZING': 'Initialize',
'pages.devops.jobstatus.RUNNING': 'Running',
......@@ -158,8 +154,7 @@ export default {
'pages.user.UserEnterNewPassword': 'Please enter new password',
'pages.user.UserEnterRepeatNewPassword': 'Please enter repeat new password',
'pages.user.UserNewPasswordNotMatch': 'The new passwords do not match',
'pages.user.disableTotalOf': 'Total Of ',
'pages.user.selectDisable': 'User Is Disabled ',
'pages.user.disableTotalOf': 'Total Of {total} User Is Disabled',
'pages.tenant.TenantManager': 'Tenant Management',
......@@ -198,8 +193,7 @@ export default {
'pages.nameSpace.update': 'Update NameSpace',
'pages.nameSpace.EnterNameSpaceCode': 'Please enter NameSpace Code!',
'pages.nameSpace.EnterNameSpaceNote': 'Please enter NameSpace Note!',
'pages.nameSpace.disableTotalOf': 'Total Of ',
'pages.nameSpace.selectDisable': 'Namespace Is Disabled ',
'pages.nameSpace.disableTotalOf': 'Total Of {total} Namespace Is Disabled',
'pages.role.roleManagement': 'Role Management',
'pages.role.roleCode': 'Role Code',
......@@ -273,7 +267,7 @@ export default {
'pages.datastudio.label.officialdocumentation': 'Official Documentation',
'pages.datastudio.label.quickguide': 'Quick Guide',
'pages.datastudio.label.welcomeuse': 'Welcome to Use Dinky v',
'pages.datastudio.label.welcomeuse': 'Welcome to Use Dinky v{version}',
'pages.datastudio.label.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.datastudio.label.maxrows': 'Max Rows',
......
dlink-web/src/locales/en-US/shortcutKey.ts 0 → 100644
View file @ 6ba6cdb0
/*
*
* 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 {
'shortcut.title': 'Shortcut key',
'shortcut.key.save': 'Save',
'shortcut.key.check': 'Check',
'shortcut.key.beautify': 'Beautify',
'shortcut.key.fullscreen': 'Full Screen',
'shortcut.key.fullscreenClose': 'Close the popup and full screen',
'shortcut.key.more': 'More shortcut keys',
'shortcut.key.search': 'Search',
'shortcut.key.replace': 'Replace',
'shortcut.key.revoke': 'Revoke',
'shortcut.key.redo': 'Redo',
'shortcut.key.notes': 'Notes',
'shortcut.key.indent': 'Indent',
'shortcut.key.removeIndent': 'Remove indent',
'shortcut.key.selectToEnd': 'Select subsequent',
'shortcut.key.format': 'Format',
'shortcut.key.editMultiline': 'Edit multiple lines',
'shortcut.key.copyRow': 'Copy a row',
'shortcut.key.deleteRow': 'Delete a row',
'shortcut.key.matchNext': 'Match Next',
'shortcut.key.matchPrevious': 'Match Previous',
'shortcut.key.goNextHighlight': 'Go to Next Highlight',
'shortcut.key.goPreviousHighlight': 'Go to Previous Highlight',
'shortcut.key.appendLineBefore': 'Append a Newline Before',
'shortcut.key.appendLine': 'Append Newline',
'shortcut.key.transpositionUpAndDown': 'Transposition up and down',
'shortcut.key.collapseOrExpand': 'Collapse/Expand',
'shortcut.key.checked': 'Checked',
}
dlink-web/src/locales/zh-CN.ts
View file @ 6ba6cdb0
......@@ -26,6 +26,7 @@ import settingDrawer from './zh-CN/settingDrawer';
import settings from './zh-CN/settings';
import pages from './zh-CN/pages';
import button from './zh-CN/button';
import shortKey from './zh-CN/shortcutKey';
export default {
'navBar.lang': '语言',
......@@ -45,4 +46,5 @@ export default {
...component,
...request,
...button,
...shortKey,
};
dlink-web/src/locales/zh-CN/button.ts
View file @ 6ba6cdb0
......@@ -38,11 +38,28 @@ export default {
'button.disable': '禁用',
'button.reset': '重置',
'button.search': '搜索',
'button.upload': '上传',
'button.import': '导入',
'button.export': '导出',
'button.submit': '提交',
'tips.selected': '已选择',
'right.menu.open': '打开',
'right.menu.submit': '异步提交',
'right.menu.exportJson': '导出 JSON',
'right.menu.rename': '重命名',
'right.menu.copy': '复制',
'right.menu.cut': '剪切',
'right.menu.paste': '粘贴',
'right.menu.delete': '删除',
'right.menu.createCatalogue': '创建目录',
'right.menu.createRootCatalogue': '创建根目录',
'right.menu.uploadZipToCreate': '上传zip包创建工程',
'right.menu.createTask': '创建作业',
'tips.selected': '已选择 {total} 项',
'tips.notSelected': '未选',
'tips.item': '项',
'status.enabled': '已启用',
'status.disabled': '已禁用',
......
dlink-web/src/locales/zh-CN/globalHeader.ts
View file @ 6ba6cdb0
......@@ -33,4 +33,65 @@ export default {
'component.noticeIcon.cleared': '清空了',
'component.noticeIcon.empty': '暂无数据',
'component.noticeIcon.view-more': '查看更多',
'global.table.operate': '操作',
'global.table.config': '配置',
'global.table.edit': '编辑',
'global.table.delete': '删除',
'global.table.more': '更多',
'global.table.updateTime': '更新时间',
'global.table.lastUpdateTime': '最近更新时间',
'global.table.createTime': '创建时间',
'global.table.startTime': '开始时间',
'global.table.endTime': '结束时间',
'global.table.useTime': '耗时',
'global.table.registType': '注册方式',
'global.table.registType.manual': '手动',
'global.table.registType.automatic': '自动',
'global.table.isEnable': '是否启用',
'global.table.enabled': '启用',
'global.table.disabled': '禁用',
'global.table.status': '状态',
'global.table.status.normal': '正常',
'global.table.status.abnormal': '异常',
'global.table.version': '版本',
'global.table.jobManagerAddress': 'JobManger 地址',
'global.table.jobManagerHaAddress': 'JobManger 高可用地址',
'global.table.type': '类型',
'global.table.nickName': '昵称',
'global.table.instanceName': '集群实例',
'global.table.instanceId': '实例 Id',
'global.table.clusterManagement': '集群管理',
'global.table.create': '创建',
'global.table.heartbeat': '心跳',
'global.table.recycle': '回收',
'global.table.refresh': '刷新',
'global.table.no': '序号',
'global.table.columnName': '字段名称',
'global.table.annotation': '注释',
'global.table.primarykey': '主键',
'global.table.automationAdd': '自增',
'global.table.isNull': '非空',
'global.table.default': '默认值',
'global.table.precision': '精度',
'global.table.decimalDigits': '小数范围',
'global.table.character': '字符集',
'global.table.collationRule': '排序规则',
'global.table.javaType': 'Java 类型',
'global.table.jobname': '任务名称',
'global.table.jobid': '作业ID',
'global.table.lifecycle': '生命周期',
'global.table.lifecycle.all': '全部',
'global.table.lifecycle.dev': '开发中',
'global.table.lifecycle.publish': '已发布',
'global.table.lifecycle.online': '已上线',
'global.table.lifecycle.unKnow': '未知',
'global.table.runmode': '运行模式',
};
dlink-web/src/locales/zh-CN/menu.ts
View file @ 6ba6cdb0
......@@ -76,6 +76,7 @@ export default {
'menu.account.settings': '个人设置',
'menu.account.changePassword': '修改密码',
'menu.account.checkTenant': '切换租户',
'menu.account.checkTenantConfirm': '你确定切换租户【{tenantCode}】吗？',
'menu.account.logout': '退出登录',
'menu.dataStudio': '数据开发',
......
dlink-web/src/locales/zh-CN/pages.ts
View file @ 6ba6cdb0
......@@ -89,9 +89,6 @@ export default {
'pages.searchTable.batchDeletion': '批量删除',
'pages.searchTable.batchApproval': '批量审批',
// ------------------------------------------------------------------------------
'pages.operate': '操作', // all table list of operation columns is use this item
'pages.devops.jobstatus.CREATED': '已创建',
'pages.devops.jobstatus.INITIALIZING': '初始化',
......@@ -109,21 +106,21 @@ export default {
'pages.settings.UserManagement': '用户管理',
'pages.settings.Flink': 'Flink 设置',
'pages.settings.FlinkURL': '提交 Jar 文件路径到 FlinkSQL',
'pages.settings.FlinkURL': '提交 FlinkSQL 的 Jar 文件路径',
'pages.settings.FlinkSQLJarMainParameter': '提交FlinkSQL的Jar的主类入参',
'pages.settings.FlinkSQLJarMainClass': '提交FlinkSQL的Jar主类',
'pages.settings.FlinkSQLJarMainParameter': '提交 FlinkSQL 的 Jar 的主类入参',
'pages.settings.FlinkSQLJarMainClass': '提交 FlinkSQL 的 Jar 的主类',
'pages.settings.FlinkRestAPI': '使用 Rest API',
'pages.settings.FlinkURLSplit': 'FlinkSQL 语句分隔符',
'pages.settings.FlinkSQLLogic': '使用逻辑计划计算血缘关系',
'pages.settings.FlinkJobID': '获取作业 ID 的最长等待时间（秒）',
'pages.settings.FlinkSQLLogic': '使用逻辑计划计算血缘',
'pages.settings.FlinkJobID': '获取 Job ID 的最大等待时间（秒）',
'pages.settings.FlinkNoSetting': '未设置',
'pages.settings.FlinkNoUseSetting': 'Flink任务开启后，通过 JobManager 的 RestAPI 进行 Savepoint、Stop等操作',
'pages.settings.FlinkLogic': 'Flink 任务的字段血缘分析计算是否基于逻辑计划 , 仅在 1.14 版本中支持',
'pages.settings.FlinkNoUseSetting': '启用后，Flink 任务的 savepoint、停止等操作将通过 JobManager 的 RestAPI 进行',
'pages.settings.FlinkLogic': '在计算 Flink 任务的字段血缘分析时是否基于逻辑计划进行，只支持 1.14 版本',
'pages.settings.FlinkUpdate': '修改',
'pages.settings.FlinkSave': '保存',
'pages.settings.FlinkCancel': '返回',
'pages.settings.FlinkCancel': '取消',
'pages.settings.FlinkUse': '启用',
'pages.settings.FlinkNotUse': '禁用',
......@@ -159,8 +156,7 @@ export default {
'pages.user.UserEnterNewPassword': '请输入新密码',
'pages.user.UserEnterRepeatNewPassword': '请重复输入新密码',
'pages.user.UserNewPasswordNotMatch': '两次输入的新密码不一致',
'pages.user.disableTotalOf': '被禁用的用户共 ',
'pages.user.selectDisable': ' 个',
'pages.user.disableTotalOf': '被禁用的用户共 {total} 个',
'pages.tenant.TenantManager': '租户管理',
......@@ -198,8 +194,7 @@ export default {
'pages.nameSpace.update': '修改命名空间',
'pages.nameSpace.EnterNameSpaceCode': '请输入命名空间编码!',
'pages.nameSpace.EnterNameSpaceNote': '请输入命名空间的备注/描述信息!',
'pages.nameSpace.disableTotalOf': '被禁用的命名空间共 ',
'pages.nameSpace.selectDisable': '个',
'pages.nameSpace.disableTotalOf': '被禁用的命名空间共 {total} 个',
'pages.role.roleManagement': '角色管理',
'pages.role.roleCode': '角色编码',
......@@ -226,4 +221,55 @@ export default {
'pages.regist.openAPI': 'OpenAPI 文档',
'pages.regist.BusinessComponent': '业务组件文档',
'pages.metadata.NoDatabaseSelected': '未选择数据源',
'pages.metadata.Application': 'Application',
'pages.metadata.TableInfo': '表信息',
'pages.metadata.Description': '描述',
'pages.metadata.DataSearch': '数据查询',
'pages.metadata.GenerateSQL': 'SQL 生成',
'pages.metadata.FieldInformation': '字段信息',
'pages.TableData.QueryConditions': '查询条件',
'pages.TableData.sorting': '排序',
'pages.TableData.data': '数据',
'pages.TableData.search': '搜索',
'pages.datastudio.label.info': '数据',
'pages.datastudio.label.result': '结果',
'pages.datastudio.label.lineage': '血缘',
'pages.datastudio.label.process': '进程',
'pages.datastudio.label.history': '历史',
'pages.datastudio.label.function': '函数',
'pages.datastudio.label.directory': '目录',
'pages.datastudio.label.structure': '结构',
'pages.datastudio.label.session': '会话',
'pages.datastudio.label.cluster': '集群',
'pages.datastudio.label.datasource': '数据源',
'pages.datastudio.label.meta': '元数据',
'pages.datastudio.label.globalvariable': '全局变量',
'pages.datastudio.label.guidepage': '引导页',
'pages.datastudio.label.registcluster': '注册集群实例',
'pages.datastudio.label.registclusterconfig': '注册集群配置',
'pages.datastudio.label.registjar': '注册 Jar',
'pages.datastudio.label.registdatasource': '注册数据源',
'pages.datastudio.label.registdocument': '注册文档',
'pages.datastudio.label.configsystemconfig': '修改系统配置',
'pages.datastudio.label.officialdocumentation': '官网文档',
'pages.datastudio.label.quickguide': '快捷引导',
'pages.datastudio.label.welcomeuse': '欢迎使用 Dinky v{version}',
'pages.datastudio.label.dinkydescribe': '实时即未来，Dinky 为 Apache Flink 而生，让 Flink SQL 纵享丝滑，并致力于实时计算平台建设。',
'pages.datastudio.label.maxrows': '最大行数',
'pages.devops.result.success': '操作成功',
'pages.devops.lable.online': '一键上线',
'pages.devops.lable.offline': '一键下线',
'pages.devops.lable.onlinelist': '上线明细',
'pages.devops.lable.offlinelist': '下线明细',
'pages.devops.lable.instance': '实例',
};
dlink-web/src/locales/zh-CN/shortcutKey.ts 0 → 100644
View file @ 6ba6cdb0
/*
*
* 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 {
'shortcut.title': '快捷键',
'shortcut.key.save': '保存',
'shortcut.key.check': '校验',
'shortcut.key.beautify': '美化',
'shortcut.key.fullscreen': '全屏',
'shortcut.key.fullscreenClose': '关闭弹框及全屏',
'shortcut.key.more': '更多快捷键',
'shortcut.key.search': '搜索',
'shortcut.key.replace': '替换',
'shortcut.key.revoke': '撤销',
'shortcut.key.redo': '重做',
'shortcut.key.notes': '注释',
'shortcut.key.indent': '缩进',
'shortcut.key.removeIndent': '取消缩进',
'shortcut.key.selectToEnd': '选中后续',
'shortcut.key.format': '格式化',
'shortcut.key.editMultiline': '编辑多行',
'shortcut.key.copyRow': '复制一行',
'shortcut.key.deleteRow': '删除一行',
'shortcut.key.matchNext': '匹配下一个',
'shortcut.key.matchPrevious': '匹配上一个',
'shortcut.key.goNextHighlight': '前往下一个高亮',
'shortcut.key.goPreviousHighlight': '前往上一个高亮',
'shortcut.key.appendLineBefore': '前面追加换行',
'shortcut.key.appendLine': '追加换行',
'shortcut.key.transpositionUpAndDown': '上下换位',
'shortcut.key.collapseOrExpand': '折叠/展开',
'shortcut.key.checked': '选中',
}
dlink-web/src/pages/404.tsx
View file @ 6ba6cdb0
......@@ -24,8 +24,8 @@ import {history, useIntl} from 'umi';
const NoFoundPage: React.FC = () => {
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
return (
<Result
......
dlink-web/src/pages/API/TaskAPI/index.tsx
View file @ 6ba6cdb0
......@@ -30,8 +30,10 @@ const {TabPane} = Tabs;
const TaskAPI = (props: any) => {
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {task} = props;
const [address, setAddress] = useState<string>('127.0.0.1:8888');
......
dlink-web/src/pages/Admin.tsx
View file @ 6ba6cdb0
......@@ -23,19 +23,22 @@ import {HeartTwoTone, SmileTwoTone} from '@ant-design/icons';
import {Alert, Card, Typography} from 'antd';
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import {useIntl} from 'umi';
import {VERSION} from "@/components/Common/Version";
export default (): React.ReactNode => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
return (
<PageHeaderWrapper
content={l('pages.admin.subPage.title',' 这个页面只有 admin 权限才能查看')}
content={l('pages.admin.subPage.title')}
>
<Card>
<Alert
message={l('pages.welcome.alertMessage','实时计算平台 Dlink & Apache Flink 即将发布，目前为体验版，版本号为0.1.0。')}
message={l('pages.welcome.alertMessage', '', {version: VERSION})}
type="success"
showIcon
banner
......
dlink-web/src/pages/AlertGroup/components/AlertGroupForm.tsx
View file @ 6ba6cdb0
......@@ -42,8 +42,9 @@ const formLayout = {
const AlertGroupForm: React.FC<AlertGroupFormProps> = (props) => {
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const [form] = Form.useForm();
const [formVals, setFormVals] = useState<Partial<AlertGroupTableListItem>>({
......@@ -121,9 +122,9 @@ const AlertGroupForm: React.FC<AlertGroupFormProps> = (props) => {
const renderFooter = () => {
return (
<>
<Button onClick={() => handleModalVisible(false)}>取消</Button>
<Button onClick={() => handleModalVisible(false)}>{l('button.cancel')}</Button>
<Button type="primary" onClick={() => submitForm()}>
完成
{l('button.finish')}
</Button>
</>
);
......
dlink-web/src/pages/AlertGroup/index.tsx
View file @ 6ba6cdb0
......@@ -34,8 +34,8 @@ 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 intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const [row, setRow] = useState<AlertGroupTableListItem>();
const [modalVisible, handleModalVisible] = useState<boolean>(false);
......@@ -56,8 +56,8 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
Modal.confirm({
title: '删除报警组配置',
content: '确定删除该报警组配置吗？',
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
await handleRemove(url, [currentItem]);
actionRef.current?.reloadAndRest?.();
......@@ -72,13 +72,13 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
<Dropdown
overlay={
<Menu onClick={({key}) => editAndDelete(key, item)}>
<Menu.Item key="edit">编辑</Menu.Item>
<Menu.Item key="delete">删除</Menu.Item>
<Menu.Item key="edit">{l('button.edit')}</Menu.Item>
<Menu.Item key="delete">{l('button.delete')}</Menu.Item>
</Menu>
}
>
<a>
更多 <DownOutlined/>
{l('button.more')} <DownOutlined/>
</a>
</Dropdown>
);
......@@ -148,20 +148,20 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
},
},
{
title: '创建时间',
title: l('global.table.createTime'),
dataIndex: 'createTime',
sorter: true,
valueType: 'dateTime',
hideInTable: true
},
{
title: '最近更新时间',
title: l('global.table.lastUpdateTime'),
dataIndex: 'updateTime',
sorter: true,
valueType: 'dateTime',
},
{
title: '操作',
title: l('global.table.operate'),
dataIndex: 'option',
valueType: 'option',
render: (_, record) => [
......@@ -171,7 +171,7 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
setFormValues(record);
}}
>
配置
{l('button.config')}
</a>,
<MoreBtn key="more" item={record}/>,
],
......@@ -189,7 +189,7 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
}}
toolBarRender={() => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined/> 新建
<PlusOutlined/> {l('button.create')}
</Button>,
]}
request={(params, sorter, filter) => queryData(url, {...params, sorter, filter})}
......@@ -206,8 +206,11 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
<FooterToolbar
extra={
<div>
已选择 <a style={{fontWeight: 600}}>{selectedRowsState.length}</a> 项&nbsp;&nbsp;
<span>
{l('tips.selected', '',
{
total: <a
style={{fontWeight: 600}}>{selectedRowsState.length}</a>
})} &nbsp;&nbsp; <span>
被禁用的报警组共 {selectedRowsState.length - selectedRowsState.reduce((pre, item) => pre + (item.enabled ? 1 : 0), 0)} 人
</span>
</div>
......@@ -218,8 +221,8 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
Modal.confirm({
title: '删除报警组',
content: '确定删除选中的报警组吗？',
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
await handleRemove(url, selectedRowsState);
setSelectedRows([]);
......@@ -228,15 +231,15 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
});
}}
>
批量删除
{l('button.batchDelete')}
</Button>
<Button type="primary"
onClick={() => {
Modal.confirm({
title: '启用报警组',
content: '确定启用选中的报警组吗？',
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
await updateEnabled(url, selectedRowsState, true);
setSelectedRows([]);
......@@ -244,14 +247,14 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
}
});
}}
>批量启用</Button>
>{l('button.batchEnable')}</Button>
<Button danger
onClick={() => {
Modal.confirm({
title: '禁用报警组',
content: '确定禁用选中的报警组吗？',
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
await updateEnabled(url, selectedRowsState, false);
setSelectedRows([]);
......@@ -259,7 +262,7 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
}
});
}}
>批量禁用</Button>
>{l('button.batchDisable')}</Button>
</FooterToolbar>
)}
<AlertGroupForm
......
dlink-web/src/pages/AlertInstance/components/AlertInstanceChooseForm.tsx
View file @ 6ba6cdb0
......@@ -41,8 +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 intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {
onSubmit: handleUpdate,
......
dlink-web/src/pages/AlertInstance/components/DingTalkForm.tsx
View file @ 6ba6cdb0
......@@ -40,8 +40,10 @@ const formLayout = {
const DingTalkForm: React.FC<AlertInstanceFormProps> = (props) => {
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const [form] = Form.useForm();
const [formVals, setFormVals] = useState<Partial<AlertInstanceTableListItem>>({
......@@ -178,10 +180,10 @@ const DingTalkForm: React.FC<AlertInstanceFormProps> = (props) => {
const renderFooter = () => {
return (
<>
<Button onClick={() => handleModalVisible(false)}>取消</Button>
<Button onClick={() => handleModalVisible(false)}>{l('button.cancel')}</Button>
<Button type="primary" onClick={() => sendTestForm()}>测试</Button>
<Button type="primary" onClick={() => submitForm()}>
完成
{l('button.finish')}
</Button>
</>
);
......
dlink-web/src/pages/AlertInstance/components/EmailForm.tsx
View file @ 6ba6cdb0
......@@ -40,8 +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 intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const [form] = Form.useForm();
const [formVals, setFormVals] = useState<Partial<AlertInstanceTableListItem>>({
......@@ -206,10 +207,10 @@ const EmailForm: React.FC<AlertInstanceFormProps> = (props) => {
const renderFooter = () => {
return (
<>
<Button onClick={() => handleModalVisible(false)}>取消</Button>
<Button onClick={() => handleModalVisible(false)}>{l('button.cancel')}</Button>
<Button type="primary" onClick={() => sendTestForm()}>测试</Button>
<Button type="primary" onClick={() => submitForm()}>
完成
{l('button.finish')}
</Button>
</>
);
......
dlink-web/src/pages/AlertInstance/components/FeiShuForm.tsx
View file @ 6ba6cdb0
......@@ -40,8 +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 intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const [form] = Form.useForm();
const [formVals, setFormVals] = useState<Partial<AlertInstanceTableListItem>>({
......@@ -175,10 +176,10 @@ const FeiShuForm: React.FC<AlertInstanceFormProps> = (props) => {
const renderFooter = () => {
return (
<>
<Button onClick={() => handleModalVisible(false)}>取消</Button>
<Button onClick={() => handleModalVisible(false)}>{l('button.cancel')}</Button>
<Button type="primary" onClick={() => sendTestForm()}>测试</Button>
<Button type="primary" onClick={() => submitForm()}>
完成
{l('button.finish')}
</Button>
</>
);
......
dlink-web/src/pages/AlertInstance/components/WeChatForm.tsx
View file @ 6ba6cdb0
......@@ -40,8 +40,10 @@ const formLayout = {
const WeChatForm: React.FC<AlertInstanceFormProps> = (props) => {
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const [form] = Form.useForm();
const [formVals, setFormVals] = useState<Partial<AlertInstanceTableListItem>>({
......@@ -184,10 +186,10 @@ const WeChatForm: React.FC<AlertInstanceFormProps> = (props) => {
const renderFooter = () => {
return (
<>
<Button onClick={() => handleModalVisible(false)}>取消</Button>
<Button onClick={() => handleModalVisible(false)}>{l('button.cancel')}</Button>
<Button type="primary" onClick={() => sendTestForm()}>测试</Button>
<Button type="primary" onClick={() => submitForm()}>
完成
{l('button.finish')}
</Button>
</>
);
......
dlink-web/src/pages/AlertInstance/index.tsx
View file @ 6ba6cdb0
......@@ -33,8 +33,10 @@ 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 intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const [row, setRow] = useState<AlertInstanceTableListItem>();
const [values, setValues] = useState<AlertInstanceTableListItem>();
......@@ -50,8 +52,8 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
Modal.confirm({
title: '删除报警实例',
content: '确定删除该报警实例吗？',
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
await handleRemove(url, [currentItem]);
actionRef.current?.reloadAndRest?.();
......@@ -66,13 +68,13 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
<Dropdown
overlay={
<Menu onClick={({key}) => editAndDelete(key, item)}>
<Menu.Item key="edit">编辑</Menu.Item>
<Menu.Item key="delete">删除</Menu.Item>
<Menu.Item key="edit">{l('button.edit')}</Menu.Item>
<Menu.Item key="delete">{l('button.delete')}</Menu.Item>
</Menu>
}
>
<a>
更多 <DownOutlined/>
{l('button.more')} <DownOutlined/>
</a>
</Dropdown>
);
......@@ -162,20 +164,20 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
},
},
{
title: '创建时间',
title: l('global.table.createTime'),
dataIndex: 'createTime',
sorter: true,
valueType: 'dateTime',
hideInTable: true
},
{
title: '最近更新时间',
title: l('global.table.lastUpdateTime'),
dataIndex: 'updateTime',
sorter: true,
valueType: 'dateTime',
},
{
title: '操作',
title: l('global.table.operate'),
dataIndex: 'option',
valueType: 'option',
render: (_, record) => [
......@@ -185,7 +187,7 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
setValues(record);
}}
>
配置
{l('button.config')}
</a>,
<MoreBtn key="more" item={record}/>,
],
......@@ -203,7 +205,7 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
}}
toolBarRender={() => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined/> 新建
<PlusOutlined/> {l('button.create')}
</Button>,
]}
request={(params, sorter, filter) => queryData(url, {...params, sorter, filter})}
......@@ -220,7 +222,11 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
<FooterToolbar
extra={
<div>
已选择 <a style={{fontWeight: 600}}>{selectedRowsState.length}</a> 项&nbsp;&nbsp;
{l('tips.selected', '',
{
total: <a
style={{fontWeight: 600}}>{selectedRowsState.length}</a>
})} &nbsp;&nbsp;
<span>
被禁用的报警实例共 {selectedRowsState.length - selectedRowsState.reduce((pre, item) => pre + (item.enabled ? 1 : 0), 0)} 人
</span>
......@@ -232,8 +238,8 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
Modal.confirm({
title: '删除报警实例',
content: '确定删除选中的报警实例吗？',
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
await handleRemove(url, selectedRowsState);
setSelectedRows([]);
......@@ -242,15 +248,15 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
});
}}
>
批量删除
{l('button.batchDelete')}
</Button>
<Button type="primary"
onClick={() => {
Modal.confirm({
title: '启用报警实例',
content: '确定启用选中的报警实例吗？',
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
await updateEnabled(url, selectedRowsState, true);
setSelectedRows([]);
......@@ -258,14 +264,14 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
}
});
}}
>批量启用</Button>
>{l('button.batchEnable')}</Button>
<Button danger
onClick={() => {
Modal.confirm({
title: '禁用报警实例',
content: '确定禁用选中的报警实例吗？',
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
await updateEnabled(url, selectedRowsState, false);
setSelectedRows([]);
......@@ -273,7 +279,7 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
}
});
}}
>批量禁用</Button>
>{l('button.batchDisable')}</Button>
</FooterToolbar>
)}
<AlertInstanceChooseForm onCancel={() => {
......
dlink-web/src/pages/AuthenticationCenter/NamespaceManager/components/NameSpaceForm.tsx
View file @ 6ba6cdb0
......@@ -38,8 +38,10 @@ const formLayout = {
const NameSpaceForm: React.FC<TenantFormProps> = (props) => {
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const [form] = Form.useForm();
const [formVals, setFormVals] = useState<Partial<NameSpaceTableListItem>>({
id: props.values?.id,
......
dlink-web/src/pages/AuthenticationCenter/NamespaceManager/index.tsx
View file @ 6ba6cdb0
......@@ -39,8 +39,10 @@ const NameSpaceFormList: React.FC<{}> = (props: any) => {
const actionRef = useRef<ActionType>();
const [selectedRowsState, setSelectedRows] = useState<NameSpaceTableListItem[]>([]);
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const editAndDelete = (key: string | number, currentItem: NameSpaceTableListItem) => {
if (key === 'edit') {
......@@ -48,7 +50,7 @@ const NameSpaceFormList: React.FC<{}> = (props: any) => {
setFormValues(currentItem);
} else if (key === 'delete') {
Modal.confirm({
title: l('pages.nameSpace.deleteNameSpace', '默认'),
title: l('pages.nameSpace.deleteNameSpace'),
content: l('pages.nameSpace.deleteNameSpaceConfirm'),
okText: l('button.confirm'),
cancelText: l('button.cancel'),
......@@ -142,7 +144,7 @@ const NameSpaceFormList: React.FC<{}> = (props: any) => {
valueType: 'dateTime',
},
{
title: l('pages.operate'),
title: l('global.table.operate'),
dataIndex: 'option',
valueType: 'option',
render: (_, record) => [
......@@ -187,10 +189,13 @@ const NameSpaceFormList: React.FC<{}> = (props: any) => {
<FooterToolbar
extra={
<div>
{l('tips.selected')} <a
style={{fontWeight: 600}}>{selectedRowsState.length}</a> {l('tips.item')}&nbsp;&nbsp;
{l('tips.selected', '',
{
total: <a
style={{fontWeight: 600}}>{selectedRowsState.length}</a>
})} &nbsp;&nbsp;
<span>
{l('pages.nameSpace.disableTotalOf')} {selectedRowsState.length - selectedRowsState.reduce((pre, item) => pre + (item.enabled ? 1 : 0), 0)} {l('pages.nameSpace.selectDisable')}
{l('pages.nameSpace.disableTotalOf', '', {total: selectedRowsState.length - selectedRowsState.reduce((pre, item) => pre + (item.enabled ? 1 : 0), 0)})}
</span>
</div>
}
......
dlink-web/src/pages/AuthenticationCenter/RoleManager/components/RoleForm.tsx
View file @ 6ba6cdb0
......@@ -45,8 +45,10 @@ const Option = Select.Option;
const RoleForm: React.FC<TenantFormProps> = (props) => {
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const [form] = Form.useForm();
const [formVals, setFormVals] = useState<Partial<RoleTableListItem>>({
......@@ -99,7 +101,7 @@ const RoleForm: React.FC<TenantFormProps> = (props) => {
<Form.Item
name="roleCode"
label={l('pages.role.roleCode')}
rules={[{required: true, message: l('pages.role.roleCode')}]}>
rules={[{required: true, message: l('pages.role.EnterRoleCode')}]}>
<Input placeholder={l('pages.role.EnterRoleCode')}/>
</Form.Item>
<Form.Item
......
dlink-web/src/pages/AuthenticationCenter/RoleManager/index.tsx
View file @ 6ba6cdb0
......@@ -42,8 +42,8 @@ const RoleFormList: React.FC<{}> = (props: any) => {
const [selectedRowsState, setSelectedRows] = useState<RoleTableListItem[]>([]);
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
useEffect(() => {
......@@ -152,7 +152,7 @@ const RoleFormList: React.FC<{}> = (props: any) => {
valueType: 'dateTime',
},
{
title: l('pages.operate'),
title: l('global.table.operate'),
dataIndex: 'option',
valueType: 'option',
render: (_, record) => [
......@@ -197,8 +197,11 @@ const RoleFormList: React.FC<{}> = (props: any) => {
<FooterToolbar
extra={
<div>
{l('tips.selected')} <a style={{fontWeight: 600}}>{selectedRowsState.length}</a> {l('tips.item')}
</div>
{l('tips.selected', '',
{
total: <a
style={{fontWeight: 600}}>{selectedRowsState.length}</a>
})} &nbsp;&nbsp; </div>
}
>
<Button type="primary" danger
......
dlink-web/src/pages/AuthenticationCenter/TenantManager/components/GrantTenantTransfer.tsx
View file @ 6ba6cdb0
......@@ -73,7 +73,9 @@ const GrantTenantTransfer = ({leftColumns, rightColumns, ...restProps}: TableTra
rowSelection={rowSelection}
columns={columns}
pagination={{
pageSize: 7,
defaultPageSize: 10,
showSizeChanger: true,
hideOnSinglePage: true,
}}
dataSource={filteredItems}
size="large"
......@@ -107,8 +109,9 @@ export type TableTransferFromProps = {
const GrantTenantToUserTableTransferFrom = (props: TableTransferFromProps) => {
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {tenant, onChange: handleChange} = props;
......@@ -177,9 +180,7 @@ const GrantTenantToUserTableTransferFrom = (props: TableTransferFromProps) => {
onChange={onChange}
onSelectChange={onSelectChange}
filterOption={(inputValue, item) =>
item.username!.indexOf(inputValue) !== -1
|| item.nickname!.indexOf(inputValue) !== -1
|| item.worknum!.indexOf(inputValue) !== -1
item.username!.indexOf(inputValue) !== -1 || item.nickname!.indexOf(inputValue) !== -1 || item.worknum!.indexOf(inputValue) !== -1
}
leftColumns={leftTableColumns}
rightColumns={rightTableColumns}
......
dlink-web/src/pages/AuthenticationCenter/TenantManager/components/TenantForm.tsx
View file @ 6ba6cdb0
......@@ -39,8 +39,9 @@ const FormItem = Form.Item;
const TenantForm: React.FC<TenantFormProps> = (props) => {
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const [form] = Form.useForm();
const [formVals, setFormVals] = useState<Partial<TenantTableListItem>>({
......
dlink-web/src/pages/AuthenticationCenter/TenantManager/index.tsx
View file @ 6ba6cdb0
......@@ -42,8 +42,8 @@ const TenantFormList: React.FC<{}> = (props: any) => {
const [formValues, setFormValues] = useState({});
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const editAndDelete = (key: string | number, currentItem: TenantTableListItem) => {
......@@ -174,7 +174,7 @@ const TenantFormList: React.FC<{}> = (props: any) => {
valueType: 'dateTime',
},
{
title: l('pages.operate'),
title: l('global.table.operate'),
dataIndex: 'option',
valueType: 'option',
render: (_, record: TenantTableListItem) => [
......@@ -227,8 +227,11 @@ const TenantFormList: React.FC<{}> = (props: any) => {
<FooterToolbar
extra={
<div>
{l('tips.selected')} <a
style={{fontWeight: 600}}>{selectedRowsState.length}</a> {l('tips.item')}
{l('tips.selected', '',
{
total: <a
style={{fontWeight: 600}}>{selectedRowsState.length}</a>
})} &nbsp;&nbsp;
</div>
}
>
......
dlink-web/src/pages/AuthenticationCenter/UserManager/components/PasswordForm.tsx
View file @ 6ba6cdb0
......@@ -38,8 +38,8 @@ const formLayout = {
const PasswordForm: React.FC<PasswordFormProps> = (props) => {
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const [form] = Form.useForm();
......
dlink-web/src/pages/AuthenticationCenter/UserManager/components/TableTransfer.tsx
View file @ 6ba6cdb0
......@@ -73,7 +73,9 @@ const TableTransfer = ({leftColumns, rightColumns, ...restProps}: TableTransferP
rowSelection={rowSelection}
columns={columns}
pagination={{
pageSize: 7,
defaultPageSize: 10,
showSizeChanger: true,
hideOnSinglePage: true,
}}
dataSource={filteredItems}
size="large"
......@@ -104,8 +106,9 @@ export type TableTransferFromProps = {
const TableTransferFrom = (props: TableTransferFromProps) => {
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {user, onChange: handleChange} = props;
......
dlink-web/src/pages/AuthenticationCenter/UserManager/components/UserForm.tsx
View file @ 6ba6cdb0
......@@ -38,8 +38,8 @@ const formLayout = {
const UserForm: React.FC<UserFormProps> = (props) => {
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const [form] = Form.useForm();
......
dlink-web/src/pages/AuthenticationCenter/UserManager/index.tsx
View file @ 6ba6cdb0
......@@ -44,8 +44,10 @@ const UserTableList: React.FC<{}> = (props: any) => {
const actionRef = useRef<ActionType>();
const [selectedRowsState, setSelectedRows] = useState<UserTableListItem[]>([]);
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const editAndDelete = (key: string | number, currentItem: UserTableListItem) => {
if (key === 'edit') {
......@@ -194,7 +196,7 @@ const UserTableList: React.FC<{}> = (props: any) => {
valueType: 'dateTime',
},
{
title: l('pages.operate'),
title: l('global.table.operate'),
dataIndex: 'option',
valueType: 'option',
render: (_, record) => [
......@@ -248,10 +250,13 @@ const UserTableList: React.FC<{}> = (props: any) => {
<FooterToolbar
extra={
<div>
{l('tips.selected')} <a
style={{fontWeight: 600}}>{selectedRowsState.length}</a> {l('tips.item')}&nbsp;&nbsp;
{l('tips.selected', '',
{
total: <a
style={{fontWeight: 600}}>{selectedRowsState.length}</a>
})} &nbsp;&nbsp;
<span>
{l('pages.user.disableTotalOf')} {selectedRowsState.length - selectedRowsState.reduce((pre, item) => pre + (item.enabled ? 1 : 0), 0)} {l('pages.user.selectDisable')}
{l('pages.user.disableTotalOf', '', {total: selectedRowsState.length - selectedRowsState.reduce((pre, item) => pre + (item.enabled ? 1 : 0), 0)})}
</span>
</div>
}
......
dlink-web/src/pages/Cluster/components/ClusterForm.tsx
View file @ 6ba6cdb0
......@@ -41,7 +41,8 @@ const formLayout = {
const ClusterForm: React.FC<ClusterFormProps> = (props) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const [form] = Form.useForm();
const [formVals, setFormVals] = useState<Partial<ClusterTableListItem>>({
......@@ -149,9 +150,9 @@ const ClusterForm: React.FC<ClusterFormProps> = (props) => {
const renderFooter = () => {
return (
<>
<Button onClick={() => handleModalVisible(false)}>取消</Button>
<Button onClick={() => handleModalVisible(false)}>{l('button.cancel')}</Button>
<Button type="primary" onClick={() => submitForm()}>
完成
{l('button.finish')}
</Button>
</>
);
......
dlink-web/src/pages/Cluster/index.tsx
View file @ 6ba6cdb0
This diff is collapsed.
dlink-web/src/pages/ClusterConfiguration/components/ClusterConfigurationForm.tsx
View file @ 6ba6cdb0
......@@ -44,8 +44,8 @@ const formLayout = {
const ClusterConfigurationForm: React.FC<ClusterConfigurationFormProps> = (props) => {
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const [form] = Form.useForm();
......@@ -369,12 +369,12 @@ const ClusterConfigurationForm: React.FC<ClusterConfigurationFormProps> = (props
const renderFooter = () => {
return (
<>
<Button onClick={() => handleModalVisible(false)}>取消</Button>
<Button onClick={() => handleModalVisible(false)}>{l('button.cancel')}</Button>
<Button type="primary" htmlType="button" onClick={testForm}>
测试
</Button>
<Button type="primary" onClick={() => submitForm()}>
完成
{l('button.finish')}
</Button>
</>
);
......
dlink-web/src/pages/ClusterConfiguration/index.tsx
View file @ 6ba6cdb0
......@@ -34,8 +34,8 @@ 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 intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {dispatch} = props;
......@@ -54,8 +54,8 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
Modal.confirm({
title: '删除集群配置',
content: '确定删除该集群配置吗？',
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
await handleRemove(url, [currentItem]);
actionRef.current?.reloadAndRest?.();
......@@ -70,13 +70,13 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
<Dropdown
overlay={
<Menu onClick={({key}) => editAndDelete(key, item)}>
<Menu.Item key="edit">编辑</Menu.Item>
<Menu.Item key="edit">{l('button.edit')}</Menu.Item>
<Menu.Item key="delete">删除</Menu.Item>
</Menu>
}
>
<a>
更多 <DownOutlined/>
{l('button.more')} <DownOutlined/>
</a>
</Dropdown>
);
......@@ -194,20 +194,20 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
},
},
{
title: '创建时间',
title: l('global.table.createTime'),
dataIndex: 'createTime',
sorter: true,
valueType: 'dateTime',
hideInTable: true,
},
{
title: '最近更新时间',
title: l('global.table.lastUpdateTime'),
dataIndex: 'updateTime',
sorter: true,
valueType: 'dateTime',
},
{
title: '操作',
title: l('global.table.operate'),
dataIndex: 'option',
valueType: 'option',
render: (_, record) => [
......@@ -217,7 +217,7 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
setFormValues(record);
}}
>
配置
{l('button.config')}
</a>,
<MoreBtn key="more" item={record}/>,
],
......@@ -235,7 +235,7 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
}}
toolBarRender={() => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined/> 新建
<PlusOutlined/> {l('button.create')}
</Button>,
]}
request={(params, sorter, filter) => queryData(url, {...params, sorter, filter})}
......@@ -252,7 +252,11 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
<FooterToolbar
extra={
<div>
已选择 <a style={{fontWeight: 600}}>{selectedRowsState.length}</a> 项&nbsp;&nbsp;
{l('tips.selected', '',
{
total: <a
style={{fontWeight: 600}}>{selectedRowsState.length}</a>
})} &nbsp;&nbsp;
<span>
被禁用的集群配置共 {selectedRowsState.length - selectedRowsState.reduce((pre, item) => pre + (item.enabled ? 1 : 0), 0)} 人
</span>
......@@ -264,8 +268,8 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
Modal.confirm({
title: '删除集群配置',
content: '确定删除选中的集群配置吗？',
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
await handleRemove(url, selectedRowsState);
setSelectedRows([]);
......@@ -274,15 +278,15 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
});
}}
>
批量删除
{l('button.batchDelete')}
</Button>
<Button type="primary"
onClick={() => {
Modal.confirm({
title: '启用集群配置',
content: '确定启用选中的集群配置吗？',
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
await updateEnabled(url, selectedRowsState, true);
setSelectedRows([]);
......@@ -290,14 +294,14 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
}
});
}}
>批量启用</Button>
>{l('button.batchEnable')}</Button>
<Button danger
onClick={() => {
Modal.confirm({
title: '禁用集群配置',
content: '确定禁用选中的集群配置吗？',
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
await updateEnabled(url, selectedRowsState, false);
setSelectedRows([]);
......@@ -305,7 +309,7 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
}
});
}}
>批量禁用</Button>
>{l('button.batchDisable')}</Button>
</FooterToolbar>
)}
<ClusterConfigurationForm
......
dlink-web/src/pages/Common/Build.tsx
View file @ 6ba6cdb0
......@@ -18,11 +18,16 @@
*/
import { Button, Result } from 'antd';
import {Button, Result} from 'antd';
import React from 'react';
import { history } from 'umi';
import {history, useIntl} from 'umi';
const BuildPage: React.FC = () => (
const BuildPage: React.FC = () => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
return (
<Result
status="404"
title="Building"
......@@ -33,6 +38,8 @@ const BuildPage: React.FC = () => (
</Button>
}
/>
);
);
};
export default BuildPage;
dlink-web/src/pages/DataBase/Columns/index.tsx
View file @ 6ba6cdb0
......@@ -26,31 +26,32 @@ import {useIntl} from 'umi';
const Columns = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {dbId, table, schema, scroll} = props;
const cols = [{
title: l('global.table.no','序号'),
title: l('global.table.no'),
dataIndex: 'position',
isString: false,
},
{
title: l('global.table.columnName','字段名称'),
title: l('global.table.columnName'),
dataIndex: 'name',
copyable: true,
},
{
title: l('global.table.annotation','注释'),
title: l('global.table.annotation'),
dataIndex: 'comment',
// ellipsis: true,
},
{
title: l('global.table.type','类型'),
title: l('global.table.type'),
dataIndex: 'type',
},
{
title: l('global.table.primarykey','主键'),
title: l('global.table.primarykey'),
dataIndex: 'keyFlag',
render: (_, record) => (
<>
......@@ -69,7 +70,7 @@ const Columns = (props: any) => {
],
openSearch: 'dict',
}, {
title: l('global.table.automationAdd','自增'),
title: l('global.table.automationAdd'),
dataIndex: 'autoIncrement',
render: (_, record) => (
<>
......@@ -88,7 +89,7 @@ const Columns = (props: any) => {
],
openSearch: 'dict',
}, {
title: l('global.table.isNull','非空'),
title: l('global.table.isNull'),
dataIndex: 'nullable',
render: (_, record) => (
<>
......@@ -107,24 +108,24 @@ const Columns = (props: any) => {
],
openSearch: 'dict',
}, {
title: l('global.table.default','默认值'),
title: l('global.table.default'),
dataIndex: 'defaultValue',
}, {
title: l('global.table.precision','精度'),
title: l('global.table.precision'),
dataIndex: 'precision',
isString: false,
}, {
title: l('global.table.decimalDigits','小数范围'),
title: l('global.table.decimalDigits'),
dataIndex: 'scale',
isString: false,
}, {
title: l('global.table.character','字符集'),
title: l('global.table.character'),
dataIndex: 'characterSet',
}, {
title: l('global.table.collationRule','排序规则'),
title: l('global.table.collationRule'),
dataIndex: 'collation',
}, {
title: l('global.table.javaType','Java 类型'),
title: l('global.table.javaType'),
dataIndex: 'javaType',
},]
return (
......
dlink-web/src/pages/DataBase/components/DBForm.tsx
View file @ 6ba6cdb0
......@@ -68,8 +68,8 @@ 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 intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {
......
dlink-web/src/pages/DataBase/components/DataBaseForm.tsx
View file @ 6ba6cdb0
......@@ -44,8 +44,9 @@ const formLayout = {
const DataBaseForm: React.FC<ClickHouseFormProps> = (props) => {
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const [formVals, setFormVals] = useState<Partial<DataBaseItem>>({
......
dlink-web/src/pages/DataBase/index.tsx
View file @ 6ba6cdb0
......@@ -53,8 +53,8 @@ const cardBodyStyle = {
const DataBaseTableList: React.FC<{}> = (props: any) => {
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const {dispatch} = props;
......@@ -81,8 +81,8 @@ const DataBaseTableList: React.FC<{}> = (props: any) => {
Modal.confirm({
title: '删除数据源',
content: `确定删除该数据源【${row.alias === "" ? row.name : row.alias}】吗？`,
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
await handleRemove('api/database', [row]);
onRefreshDataBase();
......@@ -101,7 +101,7 @@ const DataBaseTableList: React.FC<{}> = (props: any) => {
setValues({});
handleDBFormModalVisible(true);
}}>
<PlusOutlined/> 新建
<PlusOutlined/> {l('button.create')}
</Button>,
];
}}
......
dlink-web/src/pages/DataCenter/MetaData/TableData/index.tsx
View file @ 6ba6cdb0
......@@ -30,7 +30,8 @@ import {useIntl} from 'umi';
const TableData = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
// 数据库id，数据库名称，表名称
const {dbId, table, schema} = props;
......@@ -167,7 +168,7 @@ const TableData = (props: any) => {
})
}}
>
<Input addonBefore="WHERE" placeholder={l('pages.TableData.QueryConditions','查询条件')}
<Input addonBefore="WHERE" placeholder={l('pages.TableData.QueryConditions')}
onChange={(value) => {
setOptionInput({
whereInput: value.target.value,
......@@ -192,7 +193,7 @@ const TableData = (props: any) => {
}}
>
<Input addonBefore="ORDER BY"
placeholder={l('pages.TableData.sorting','排序')}
placeholder={l('pages.TableData.sorting')}
onChange={(value) => {
setOptionInput({
whereInput: optionInput.whereInput,
......@@ -202,7 +203,7 @@ const TableData = (props: any) => {
</AutoComplete>
</Col>
<Col span={2}>
<Tooltip title={l('pages.TableData.search','查询')}>
<Tooltip title={l('pages.TableData.search')}>
<Button type="primary" shape="circle" icon={<SearchOutlined/>} size="middle" onClick={(event) => {
fetchData(optionInput.whereInput, optionInput.orderInput)
}}/>
......@@ -213,7 +214,7 @@ const TableData = (props: any) => {
</div>
<Divider orientation="left" plain>{l('pages.TableData.data','数据')}</Divider>
<Divider orientation="left" plain>{l('pages.TableData.data')}</Divider>
<div>
<ProTable
......
dlink-web/src/pages/DataCenter/MetaData/index.tsx
View file @ 6ba6cdb0
......@@ -51,7 +51,8 @@ const {TabPane} = Tabs;
const MetaDataContainer: React.FC<{}> = (props: any) => {
const intl = useIntl();
const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
let [database, setDatabase] = useState<[{
id: number,
......@@ -170,10 +171,10 @@ const MetaDataContainer: React.FC<{}> = (props: any) => {
</Tag>
{(item.status) ?
(<Tag icon={<CheckCircleOutlined/>} color="success">
{l('global.table.status.normal','正常',)}
{l('global.table.status.normal')}
</Tag>) :
<Tag icon={<ExclamationCircleOutlined/>} color="warning">
{l('global.table.status.abnormal','异常',)}
{l('global.table.status.abnormal')}
</Tag>}
</div>
</Col>
......@@ -198,14 +199,14 @@ const MetaDataContainer: React.FC<{}> = (props: any) => {
refeshDataBase(databaseId)
setTableChecked(true)
}}
>{l('global.table.refresh','刷新')}</Button>
>{l('global.table.refresh')}</Button>
</div>
<div>{item.alias}</div>
</div>
)
}
}
return (<div>{l('pages.metadata.NoDatabaseSelected','未选择数据库')}</div>)
return (<div>{l('pages.metadata.NoDatabaseSelected')}</div>)
}
......@@ -259,13 +260,13 @@ const MetaDataContainer: React.FC<{}> = (props: any) => {
tab={
<span>
<ReadOutlined/>
{l('pages.metadata.Description','描述')}
{l('pages.metadata.Description')}
</span>
}
key="describe"
>
<Divider orientation="left" plain>
{l( 'pages.metadata.TableInfo', '表信息')}
{l('pages.metadata.TableInfo')}
</Divider>
{row ? (
<Tables table={row}/>
......@@ -273,7 +274,7 @@ const MetaDataContainer: React.FC<{}> = (props: any) => {
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
)}
<Divider orientation="left" plain>
{l('pages.metadata.FieldInformation','字段信息')}
{l('pages.metadata.FieldInformation')}
</Divider>
{row ? (
<Columns dbId={databaseId} schema={row.schema} table={row.table}/>
......@@ -286,7 +287,7 @@ const MetaDataContainer: React.FC<{}> = (props: any) => {
tab={
<span>
<BarsOutlined/>
{l('pages.metadata.DataSearch', '数据查询')}
{l('pages.metadata.DataSearch')}
</span>
}
key="exampleData"
......@@ -302,7 +303,7 @@ const MetaDataContainer: React.FC<{}> = (props: any) => {
tab={
<span>
<ConsoleSqlOutlined/>
{l('pages.metadata.GenerateSQL', 'SQL 生成')}
{l('pages.metadata.GenerateSQL')}
</span>
}
key="sqlGeneration"
......
dlink-web/src/pages/DevOps/JobInfo/Alert/index.tsx
View file @ 6ba6cdb0
......@@ -35,8 +35,8 @@ type AlertHistoryTableListItem = {
const Alert = (props: any) => {
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const url = '/api/alertGroup';
......
dlink-web/src/pages/DevOps/JobInfo/BaseInfo/index.tsx
View file @ 6ba6cdb0
......@@ -32,8 +32,8 @@ const BaseInfo = (props: any) => {
const {job} = props;
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const columns: ProColumns<VerticesTableListItem>[] = [
......
dlink-web/src/pages/DevOps/JobInfo/CheckPoints/index.tsx
View file @ 6ba6cdb0
......@@ -44,8 +44,8 @@ const CheckPoints = (props: any) => {
const {job} = props;
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const actionRef = useRef<ActionType>();
......@@ -213,8 +213,8 @@ const CheckPoints = (props: any) => {
Modal.confirm({
title: 'Recovery Of CheckPoint',
content: `确定从 CheckPoint 【${row.external_path}】恢复吗？`,
okText: '确认',
cancelText: '取消',
okText: l('button.confirm'),
cancelText: l('button.cancel'),
onOk: async () => {
const res = selectSavePointRestartTask(job?.instance?.taskId, job?.instance?.step == JOB_LIFE_CYCLE.ONLINE, row.external_path);
res.then((result) => {
......@@ -310,7 +310,7 @@ const CheckPoints = (props: any) => {
dataIndex: 'trigger_timestamp',
},
{
title: '操作',
title: l('global.table.operate'),
align: 'center',
render: (dom, entity) => {
return <>
......
dlink-web/src/pages/DevOps/JobInfo/Config/index.tsx
View file @ 6ba6cdb0
......@@ -29,8 +29,8 @@ const Config = (props: any) => {
const {job} = props;
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
return <>
......
dlink-web/src/pages/DevOps/JobInfo/DataMap/index.tsx
View file @ 6ba6cdb0
......@@ -30,8 +30,8 @@ const DataMap = (props: any) => {
const {job} = props;
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const [data, setData] = useState(undefined);
......
dlink-web/src/pages/DevOps/JobInfo/Exception/index.tsx
View file @ 6ba6cdb0
......@@ -28,8 +28,8 @@ const Exception = (props: any) => {
const {job} = props;
const international = useIntl();
const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
const intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
return (<>
......
dlink-web/src/pages/DevOps/JobInfo/FlinkClusterInfo/JobManager/index.tsx
View file @ 6ba6cdb0
......@@ -30,8 +30,9 @@ 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 intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const [jobManager, setJobManager] = useState<JobManagerConfiguration>();
......
dlink-web/src/pages/DevOps/JobInfo/FlinkClusterInfo/TaskManager/index.tsx
View file @ 6ba6cdb0
......@@ -26,15 +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";
import {useIntl} from "umi";
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 intl = useIntl();
const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
const actionRef = useRef<ActionType>();
......
dlink-web/src/pages/DevOps/index.tsx
View file @ 6ba6cdb0
This diff is collapsed.
dlink-web/src/pages/Document/index.tsx
View file @ 6ba6cdb0
This diff is collapsed.
dlink-web/src/pages/Jar/index.tsx
View file @ 6ba6cdb0
This diff is collapsed.
dlink-web/src/pages/Task/index.tsx
View file @ 6ba6cdb0
This diff is collapsed.
dlink-web/src/pages/Welcome.tsx
View file @ 6ba6cdb0
This diff is collapsed.
dlink-web/src/pages/user/Login/index.tsx
View file @ 6ba6cdb0
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