Skip to content

Commit

Permalink
optimize job diff modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@gaoyan1998
gaoyan1998 committed Oct 14, 2023
1 parent b2ed547 commit d90bfed
Show file tree
Hide file tree
Showing 14 changed files with 443 additions and 250 deletions.
25 changes: 8 additions & 17 deletions dinky-web/src/components/CallBackButton/LoadingBtn.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,17 @@
import React, {useState} from "react";
import {Button} from "antd";
import {ButtonProps} from "antd/es/button/button";


import { Button } from 'antd';
import { ButtonProps } from 'antd/es/button/button';
import React, { useState } from 'react';

export const LoadingBtn: React.FC<ButtonProps> = (props) => {

const [loading, setLoading] = useState(false);

const handleClick = async (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
if (props.onClick) {
setLoading(true)
await props.onClick(event)
setLoading(false)
setLoading(true);
await props.onClick(event);
setLoading(false);
}
}
};

return (
<Button
{...props}
loading={loading}
onClick={(event) =>handleClick(event)}
></Button>
);
return <Button {...props} loading={loading} onClick={(event) => handleClick(event)}></Button>;
};
21 changes: 19 additions & 2 deletions dinky-web/src/locales/en-US/pages.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -309,9 +309,11 @@ export default {
'pages.datastudio.editor.stop.job': 'Stop job',
'pages.datastudio.editor.stop.jobConfirm': 'Are you sure to stop the job [{jobName}]? ',
'pages.datastudio.editor.submitting': 'The new task [{jobName}] is executing',
'pages.datastudio.editor.onlyread': 'Task has been published, modification is prohibited, please go offline first',
'pages.datastudio.editor.onlyread':
'Task has been published, modification is prohibited, please go offline first',
'pages.datastudio.editor.notsave': 'Current changes are not saved! ',
'pages.datastudio.editor.notsave.note': 'Continue will discard the changes, are you sure to continue?',
'pages.datastudio.editor.notsave.note':
'Continue will discard the changes, are you sure to continue?',
'pages.datastudio.to.jobDetail': 'Operation Center',
'pages.datastudio.explain.validate': 'Validating...',
'pages.datastudio.explain.validate.allright': 'All Right',
Expand All @@ -326,6 +328,21 @@ export default {
'pages.datastudio.footer.codeType': 'Code Type',
'pages.datastudio.footer.lineSeparator': 'Line Separator',
'pages.datastudio.footer.memDetails': 'Maximum heap size',

'pages.datastudio.sql.sqlChanged': 'Code recovery',
'pages.datastudio.sql.sqlChangedPrompt':
'The code you modified is not saved, it is inconsistent with the server, we cached the last modification for you, please select the version',
'pages.datastudio.sql.sqldiff.title': 'Code comparison',
'pages.datastudio.sql.paramdiff.title': 'Configuration comparison',
'pages.datastudio.sql.nochange': 'No change in job content',
'pages.datastudio.sql.useCache': 'Use cached version',
'pages.datastudio.sql.useServer': 'Use server version',
'pages.datastudio.sql.cacheVersion': 'Local cache code',
'pages.datastudio.sql.serverVersion': 'server-side code',
'pages.datastudio.sql.configItem': 'Configuration Item',
'pages.datastudio.sql.cacheConfigItem': 'Local cache configuration',
'pages.datastudio.sql.serverConfigItem': 'server-side configuration',

'pages.datastudio.help.sqlChanged': 'Sql context or configure changed',
'pages.datastudio.help.sqlChangedPrompt':
'the remote context is not the same as the current page , will the data be flushed?',
Expand Down
17 changes: 15 additions & 2 deletions dinky-web/src/locales/zh-CN/pages.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -319,8 +319,21 @@ export default {
'pages.datastudio.footer.codeType': '代码类型：',
'pages.datastudio.footer.lineSeparator': '行分隔符：',
'pages.datastudio.footer.memDetails': '最大堆大小：{max}\n已使用： {used}M',
'pages.datastudio.help.sqlChanged': 'Sql内容或配置变更',
'pages.datastudio.help.sqlChangedPrompt': '检测到当前页与远端不一致，是否刷新更新数据？',

'pages.datastudio.sql.sqlChanged': '代码恢复',
'pages.datastudio.sql.sqlChangedPrompt':
'您修改的代码未保存，与服务端不一致，我们为您缓存了上次修改，请选择版本',
'pages.datastudio.sql.sqldiff.title': '代码对比',
'pages.datastudio.sql.paramdiff.title': '配置对比',
'pages.datastudio.sql.nochange': '作业内容无变化',
'pages.datastudio.sql.useCache': '使用缓存版本',
'pages.datastudio.sql.useServer': '使用服务器版本',
'pages.datastudio.sql.cacheVersion': '本地缓存代码',
'pages.datastudio.sql.serverVersion': '服务端代码',
'pages.datastudio.sql.configItem': '配置项',
'pages.datastudio.sql.cacheConfigItem': '本地缓存配置',
'pages.datastudio.sql.serverConfigItem': '服务端配置',

'pages.datastudio.label.execConfig': '执行配置',
'pages.datastudio.label.execConfig.autostop': '自动停止',
'pages.datastudio.label.execConfig.autostop.tip':
Expand Down
89 changes: 44 additions & 45 deletions dinky-web/src/pages/DataStudio/HeaderContainer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@
* limitations under the License.
*
*/
import {LoadingBtn} from '@/components/CallBackButton/LoadingBtn';
import {FlexCenterDiv} from '@/components/StyledComponents';
import {getCurrentData, getCurrentTab, mapDispatchToProps} from '@/pages/DataStudio/function';
import { LoadingBtn } from '@/components/CallBackButton/LoadingBtn';
import { FlexCenterDiv } from '@/components/StyledComponents';
import { getCurrentData, getCurrentTab, mapDispatchToProps } from '@/pages/DataStudio/function';
import Explain from '@/pages/DataStudio/HeaderContainer/Explain';
import FlinkGraph from '@/pages/DataStudio/HeaderContainer/FlinkGraph';
import {
Expand All @@ -38,33 +38,34 @@ import {
DataStudioTabsItemType,
MetadataTabsItemType,
StateType,
TabsPageSubType,
TabsPageType,
TaskDataType,
VIEW
} from '@/pages/DataStudio/model';
import {JOB_LIFE_CYCLE, JOB_STATUS} from '@/pages/DevOps/constants';
import {ConfigStateType} from '@/pages/SettingCenter/GlobalSetting/model';
import {SettingConfigKeyEnum} from '@/pages/SettingCenter/GlobalSetting/SettingOverView/constants';
import {handlePutDataJson} from '@/services/BusinessCrud';
import {BaseConfigProperties} from '@/types/SettingCenter/data';
import {l} from '@/utils/intl';
import {connect} from '@@/exports';
import { JOB_LIFE_CYCLE, JOB_STATUS } from '@/pages/DevOps/constants';
import { ConfigStateType } from '@/pages/SettingCenter/GlobalSetting/model';
import { SettingConfigKeyEnum } from '@/pages/SettingCenter/GlobalSetting/SettingOverView/constants';
import { handlePutDataJson } from '@/services/BusinessCrud';
import { BaseConfigProperties } from '@/types/SettingCenter/data';
import { l } from '@/utils/intl';
import { connect } from '@@/exports';
import {
ApartmentOutlined,
CaretRightFilled,
EnvironmentOutlined,
FundOutlined,
MergeCellsOutlined,
MoreOutlined,
PauseOutlined, PlayCircleTwoTone,
PauseOutlined,
RotateRightOutlined,
SaveOutlined,
ScheduleOutlined,
SendOutlined
} from '@ant-design/icons';
import {Breadcrumb, Descriptions, message, Modal, Space} from 'antd';
import {ButtonProps} from 'antd/es/button/button';
import React, {useEffect, useState} from 'react';
import { Breadcrumb, Descriptions, message, Modal, Space } from 'antd';
import { ButtonProps } from 'antd/es/button/button';
import React, { useEffect, useState } from 'react';

const headerStyle: React.CSSProperties = {
display: 'inline-flex',
Expand All @@ -90,7 +91,7 @@ const HeaderContainer = (props: any) => {
const {
size,
activeBreadcrumbTitle,
tabs: {panes, activeKey},
tabs: { panes, activeKey },
saveTabs,
updateJobRunningMsg,
queryDsConfig,
Expand Down Expand Up @@ -127,7 +128,7 @@ const HeaderContainer = (props: any) => {

const handleSave = async () => {
const saved = await handlePutDataJson('/api/task', currentData);
saveTabs({...props.tabs});
saveTabs({ ...props.tabs });
if (currentTab) currentTab.isModified = false;
return saved;
};
Expand All @@ -145,7 +146,7 @@ const HeaderContainer = (props: any) => {
onOk: async () => {
cancelTask(l('pages.datastudio.editor.stop.job'), currentData.id).then(() => {
currentData.status = JOB_STATUS.CANCELED;
saveTabs({...props.tabs});
saveTabs({ ...props.tabs });
});
}
});
Expand All @@ -156,7 +157,7 @@ const HeaderContainer = (props: any) => {
const saved = currentData.step == JOB_LIFE_CYCLE.ONLINE ? true : await handleSave();
if (saved) {
const res = await executeSql(
l('pages.datastudio.editor.submitting', '', {jobName: currentData.name}),
l('pages.datastudio.editor.submitting', '', { jobName: currentData.name }),
currentData.id
);
if (!res) return;
Expand All @@ -169,9 +170,8 @@ const HeaderContainer = (props: any) => {
});
messageApi.success(l('pages.datastudio.editor.exec.success'));
currentData.status = JOB_STATUS.RUNNING;
saveTabs({...props.tabs});
saveTabs({ ...props.tabs });
}

};

const handleChangeJobLife = async () => {
Expand All @@ -186,7 +186,7 @@ const HeaderContainer = (props: any) => {
currentData.step = JOB_LIFE_CYCLE.ONLINE;
}
}
saveTabs({...props.tabs});
saveTabs({ ...props.tabs });
};

const showDagGraph = async () => {
Expand All @@ -196,8 +196,8 @@ const HeaderContainer = (props: any) => {
title: l('pages.datastudio.editor.explan.tip'),
width: '100%',
icon: null,
content: <FlinkGraph data={result.datas}/>,
cancelButtonProps: {style: {display: 'none'}}
content: <FlinkGraph data={result.datas} />,
cancelButtonProps: { style: { display: 'none' } }
});
}
};
Expand All @@ -207,8 +207,8 @@ const HeaderContainer = (props: any) => {
title: l('pages.datastudio.explain.validate.msg'),
width: '100%',
icon: null,
content: <Explain/>,
cancelButtonProps: {style: {display: 'none'}}
content: <Explain />,
cancelButtonProps: { style: { display: 'none' } }
});
};

Expand All @@ -218,7 +218,7 @@ const HeaderContainer = (props: any) => {
hotKey: (e: KeyboardEvent) => e.ctrlKey && e.key === 's',
hotKeyDesc: 'Ctrl+S',
isShow: projectCommonShow(currentTab?.type),
icon: <SaveOutlined/>,
icon: <SaveOutlined />,
title: l('button.save'),
click: () => handleSave(),
props: {
Expand All @@ -227,61 +227,61 @@ const HeaderContainer = (props: any) => {
},
{
// 执行图按钮
icon: <ApartmentOutlined/>,
icon: <ApartmentOutlined />,
title: l('button.graph'),
isShow: projectCommonShow(currentTab?.type),
click: async () => showDagGraph()
},
{
// 检查 sql按钮
icon: <ScheduleOutlined/>,
icon: <ScheduleOutlined />,
title: l('pages.datastudio.editor.check'),
click: () => showExplain(),
isShow: projectCommonShow(currentTab?.type)
},
{
// 推送海豚, 此处需要将系统设置中的 ds 的配置拿出来做判断 启用才展示
icon: <SendOutlined className={'blue-icon'}/>,
icon: <SendOutlined className={'blue-icon'} />,
title: l('button.push'),
hotKey: (e: KeyboardEvent) => e.ctrlKey && e.key === 's',
isShow: enableDs
},
{
// 发布按钮
icon: isOnline(currentData) ? <MergeCellsOutlined/> : <FundOutlined/>,
icon: isOnline(currentData) ? <MergeCellsOutlined /> : <FundOutlined />,
title: isOnline(currentData) ? l('button.offline') : l('button.publish'),
isShow: currentTab?.type == TabsPageType.project,
click: () => handleChangeJobLife()
},
{
// flink jobdetail跳转
icon: <RotateRightOutlined/>,
icon: <RotateRightOutlined />,
title: l('pages.datastudio.to.jobDetail'),
isShow:
currentTab?.type == TabsPageType.project &&
currentData?.jobInstanceId &&
currentTab.subType == 'flinksql',
currentTab.subType == TabsPageSubType.flinkSql,
props: {
href: `/#/devops/job-detail?id=${currentData?.jobInstanceId}`,
target: '_blank'
}
},
{
// 执行按钮
icon: <CaretRightFilled/>,
icon: <CaretRightFilled />,
title: l('pages.datastudio.editor.exec'),
click: handlerSubmit,
hotKey: (e: KeyboardEvent) => e.shiftKey && e.key === 'F10',
hotKeyDesc: 'Shift+F10',
isShow: currentTab?.type == TabsPageType.project && !isRunning(currentData),
props: {
style: {background: "#52c41a"},
type: 'primary',
style: { background: '#52c41a' },
type: 'primary'
}
},
{
// 停止按钮
icon: <PauseOutlined/>,
icon: <PauseOutlined />,
title: l('pages.datastudio.editor.stop'),
click: handlerStop,
isShow: currentTab?.type == TabsPageType.project && isRunning(currentData),
Expand All @@ -293,10 +293,9 @@ const HeaderContainer = (props: any) => {
}
},
{
icon: <MoreOutlined/>,
icon: <MoreOutlined />,
title: '',
click: () => {
},
click: () => {},
isShow: true
// hotKey: (e: KeyboardEvent) => e.ctrlKey && e.key === 's'
}
Expand All @@ -309,15 +308,15 @@ const HeaderContainer = (props: any) => {
if (!activeBreadcrumbTitle) {
return (
<Space>
<EnvironmentOutlined/>
<EnvironmentOutlined />
<span>Guide Page</span>
</Space>
);
}

return (
<FlexCenterDiv style={{width: (size.width - 2 * VIEW.paddingInline) / 2}}>
<Breadcrumb separator={'>'} items={buildBreadcrumbItems(activeBreadcrumbTitle)}/>
<FlexCenterDiv style={{ width: (size.width - 2 * VIEW.paddingInline) / 2 }}>
<Breadcrumb separator={'>'} items={buildBreadcrumbItems(activeBreadcrumbTitle)} />
</FlexCenterDiv>
);
};
Expand All @@ -336,7 +335,7 @@ const HeaderContainer = (props: any) => {
*/
const renderRightButtons = () => {
return (
<div style={{padding: '4px'}}>
<div style={{ padding: '4px' }}>
<Space size={'small'} align={'center'} direction={'horizontal'} wrap>
{routes
.filter((x) => x.isShow)
Expand Down Expand Up @@ -368,15 +367,15 @@ const HeaderContainer = (props: any) => {
return (
<Descriptions column={2} size={'middle'} layout={'horizontal'} key={'h'} style={headerStyle}>
<Descriptions.Item>{renderBreadcrumbItems()}</Descriptions.Item>
<Descriptions.Item contentStyle={{display: 'flex', flexDirection: 'row-reverse'}}>
<Descriptions.Item contentStyle={{ display: 'flex', flexDirection: 'row-reverse' }}>
{renderRightButtons()}
</Descriptions.Item>
</Descriptions>
);
};

export default connect(
({Studio, Config}: { Studio: StateType; Config: ConfigStateType }) => ({
({ Studio, Config }: { Studio: StateType; Config: ConfigStateType }) => ({
tabs: Studio.tabs,
dsConfig: Config.dsConfig
}),
Expand Down
Loading

0 comments on commit d90bfed

Please sign in to comment.