Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Web]Optimized the new UI #3904

Merged
merged 5 commits into from
Nov 12, 2024
Merged

[Web]Optimized the new UI #3904

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ae30048
Optimized the new UI
gaoyan1998 Nov 11, 2024
320a28c
Spotless Apply
gaoyan1998 Nov 11, 2024
b845c34
Merge remote-tracking branch 'upstream/dev' into opimze-UI
gaoyan1998 Nov 12, 2024
74f6358
Merge remote-tracking branch 'origin/opimze-UI' into opimze-UI
gaoyan1998 Nov 12, 2024
2fe984a
merge dev
gaoyan1998 Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion dinky-web/src/locales/en-US/pages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -509,7 +509,8 @@ export default {
'pages.datastudio.label.execConfig.maxrow': 'Maximum number of rows',
'pages.datastudio.label.execConfig.maxrow.tip': 'The maximum number of rows of preview data',
'pages.datastudio.label.execConfig.mocksink': 'SinkMock',
'pages.datastudio.label.execConfig.mocksink.tip': 'Mock the SinkFunction, result will not be written to the production environment during debugging, but can preview through dinky',
'pages.datastudio.label.execConfig.mocksink.tip':
'Mock the SinkFunction, result will not be written to the production environment during debugging, but can preview through dinky',
'pages.datastudio.label.jobConfig': 'Job Config',
'pages.datastudio.label.jobConfig.addConfig': 'Add Config item',
'pages.datastudio.label.jobConfig.addConfig.params': 'parameters',
Expand Down
3 changes: 2 additions & 1 deletion dinky-web/src/locales/zh-CN/pages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -454,7 +454,8 @@ export default {
'pages.datastudio.label.execConfig.maxrow': '最大行数',
'pages.datastudio.label.execConfig.maxrow.tip': '预览数据的最大行数',
'pages.datastudio.label.execConfig.mocksink': '开启SinkMock',
'pages.datastudio.label.execConfig.mocksink.tip': '将SinkFunction进行Mock，调试过程中不会向线上环境执行写入，但可以通过dinky预览Sink结果',
'pages.datastudio.label.execConfig.mocksink.tip':
'将SinkFunction进行Mock，调试过程中不会向线上环境执行写入，但可以通过dinky预览Sink结果',
'pages.datastudio.label.jobConfig': '作业配置',
'pages.datastudio.label.jobConfig.addConfig': '添加配置项',
'pages.datastudio.label.jobConfig.addConfig.params': '参数',
Expand Down
3 changes: 2 additions & 1 deletion dinky-web/src/pages/DataStudio/BottomContainer/Result/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
*/

import {
assert, convertMockResultToList,
assert,
convertMockResultToList,
getCurrentData,
getCurrentTab,
isDataStudioTabsItemType,
Expand Down
4 changes: 2 additions & 2 deletions dinky-web/src/pages/DataStudio/RightContainer/PreViewConfig/FlinkSql/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,13 +83,13 @@ const ExecuteConfigFlinkSql = (props: any) => {
/>
<ProFormSwitch
label={l('pages.datastudio.label.execConfig.mocksink')}
name= 'mockSinkFunction'
name='mockSinkFunction'
tooltip={{
title: l('pages.datastudio.label.execConfig.mocksink.tip'),
icon: <InfoCircleOutlined />
}}
{...SWITCH_OPTIONS()}
/>
/>
</ProFormGroup>
<ProFormGroup>
<ProFormDigit
Expand Down
34 changes: 18 additions & 16 deletions dinky-web/src/pages/DataStudio/function.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,14 @@ import {
TabsPageType,
TaskDataType
} from '@/pages/DataStudio/model';
import {CONFIG_MODEL_ASYNC} from '@/pages/SettingCenter/GlobalSetting/model';
import {DIALECT} from '@/services/constants';
import {UserBaseInfo} from '@/types/AuthCenter/data.d';
import {Cluster, DataSources} from '@/types/RegCenter/data';
import {TaskOwnerLockingStrategy} from '@/types/SettingCenter/data.d';
import {l} from '@/utils/intl';
import {Dispatch} from '@@/plugin-dva/types';
import {Col, Row} from 'antd';
import { CONFIG_MODEL_ASYNC } from '@/pages/SettingCenter/GlobalSetting/model';
import { DIALECT } from '@/services/constants';
import { UserBaseInfo } from '@/types/AuthCenter/data.d';
import { Cluster, DataSources } from '@/types/RegCenter/data';
import { TaskOwnerLockingStrategy } from '@/types/SettingCenter/data.d';
import { l } from '@/utils/intl';
import { Dispatch } from '@@/plugin-dva/types';
import { Col, Row } from 'antd';

export const mapDispatchToProps = (dispatch: Dispatch) => ({
updateToolContentHeight: (key: number) =>
Expand Down Expand Up @@ -246,9 +246,9 @@ export const getFooterValue = (panes: any, activeKey: string): Partial<FooterTyp
const currentTab = getCurrentTab(panes, activeKey);
return isDataStudioTabsItemType(currentTab)
? {
codePosition: [1, 1],
codeType: currentTab.subType
}
codePosition: [1, 1],
codeType: currentTab.subType
}
: {};
};

Expand Down Expand Up @@ -397,7 +397,7 @@ export const isEmpty = (value: any): boolean => {
* 转换多表的SelectResult
* @param data
*/
export const convertMockResultToList = (data: any): any [] => {
export const convertMockResultToList = (data: any): any[] => {
const rowDataResults: any[] = [];
// 对于每个MockResult的Column，一个元素代表一个表信息
data.columns.forEach((columnString: string) => {
Expand All @@ -411,7 +411,7 @@ export const convertMockResultToList = (data: any): any [] => {
const columnJsonInfo = JSON.parse(columnString);
// 提取column信息
if (columnJsonInfo['dinkySinkResultColumnIdentifier']) {
columnArr = columnJsonInfo['dinkySinkResultColumnIdentifier']
columnArr = columnJsonInfo['dinkySinkResultColumnIdentifier'];
}
// 提取表名
if (columnJsonInfo['dinkySinkResultTableIdentifier']) {
Expand All @@ -422,14 +422,16 @@ export const convertMockResultToList = (data: any): any [] => {
if (rowDataElement.dinkySinkResultTableIdentifier == tableName) {
rowDataArr.push(rowDataElement);
}
})
});
// 构建constant对象
const rowDataResult = {
'tableName': tableName, columns: columnArr, rowData: rowDataArr
tableName: tableName,
columns: columnArr,
rowData: rowDataArr
};
rowDataResults.push(rowDataResult);
});

console.log(rowDataResults)
console.log(rowDataResults);
return rowDataResults;
};
4 changes: 2 additions & 2 deletions dinky-web/src/pages/DataStudioNew/CenterTabContent/TaskConfig/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,13 +114,13 @@ export default (props: {
/>
<ProFormSwitch
label={l('pages.datastudio.label.execConfig.mocksink')}
name= 'mockSinkFunction'
name='mockSinkFunction'
tooltip={{
title: l('pages.datastudio.label.execConfig.mocksink.tip'),
icon: <InfoCircleOutlined />
}}
{...SWITCH_OPTIONS()}
/>
/>
</>
);
}
Expand Down
28 changes: 11 additions & 17 deletions dinky-web/src/pages/DataStudioNew/Toolbar/Service/Result/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,12 +63,10 @@ export default (props: { taskId: number; action: any; dialect: string }) => {
const [searchText, setSearchText] = useState('');
const [searchedColumn, setSearchedColumn] = useState('');
const searchInput = useRef<InputRef>(null);

useEffect(() => {
if (actionType === DataStudioActionType.TASK_PREVIEW_RESULT
|| actionType === DataStudioActionType.TASK_RUN_DEBUG) {
if (actionType === DataStudioActionType.TASK_PREVIEW_RESULT) {
if (data.mockSinkResult == true) {
setDataList(convertMockResultToList({ columns: params.columns, rowData: params.rowData }))
setDataList(convertMockResultToList({ columns: params.columns, rowData: params.rowData }));
} else {
setData({ columns: params.columns, rowData: params.rowData });
}
Expand All @@ -79,7 +77,6 @@ export default (props: { taskId: number; action: any; dialect: string }) => {
clearFilters();
setSearchText('');
};

const handleSearch = (
selectedKeys: string[],
confirm: (param?: FilterConfirmProps) => void,
Expand All @@ -94,8 +91,7 @@ export default (props: { taskId: number; action: any; dialect: string }) => {
setSearchedColumn('');
}
};

const convertMockResultToList = (data: any): any [] => {
const convertMockResultToList = (data: any): any[] => {
const rowDataResults: any[] = [];
// 对于每个MockResult的Column，一个元素代表一个表信息
data.columns.forEach((columnString: string) => {
Expand All @@ -109,7 +105,7 @@ export default (props: { taskId: number; action: any; dialect: string }) => {
const columnJsonInfo = JSON.parse(columnString);
// 提取column信息
if (columnJsonInfo['dinkySinkResultColumnIdentifier']) {
columnArr = columnJsonInfo['dinkySinkResultColumnIdentifier']
columnArr = columnJsonInfo['dinkySinkResultColumnIdentifier'];
}
// 提取表名
if (columnJsonInfo['dinkySinkResultTableIdentifier']) {
Expand All @@ -120,16 +116,18 @@ export default (props: { taskId: number; action: any; dialect: string }) => {
if (rowDataElement.dinkySinkResultTableIdentifier == tableName) {
rowDataArr.push(rowDataElement);
}
})
});
// 构建constant对象
const rowDataResult = {
'tableName': tableName, columns: columnArr, rowData: rowDataArr
tableName: tableName,
columns: columnArr,
rowData: rowDataArr
};
rowDataResults.push(rowDataResult);
});

return rowDataResults;
};

const getColumnSearchProps = (dataIndex: string): ColumnType<Data> => ({
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}>
Expand Down Expand Up @@ -198,13 +196,13 @@ export default (props: { taskId: number; action: any; dialect: string }) => {
const data = tableData.data;
if (tableData.success && data?.success) {
if (data.mockSinkResult == true) {
setDataList(convertMockResultToList(data))
setDataList(convertMockResultToList(data));
} else {
setData(data);
}
} else {
setData({});
setDataList([])
setDataList([]);
}
}

Expand Down Expand Up @@ -249,7 +247,6 @@ export default (props: { taskId: number; action: any; dialect: string }) => {
</>
);
};

const renderDownloadButton = () => {
if (data.columns) {
const _utf = '\uFEFF';
Expand All @@ -261,7 +258,6 @@ export default (props: { taskId: number; action: any; dialect: string }) => {
}
return undefined;
};

const renderAVA = () => {
return (
<Button
Expand Down Expand Up @@ -293,9 +289,7 @@ export default (props: { taskId: number; action: any; dialect: string }) => {
</>
);
};

const handleCloseAva = useCallback(() => setOpenAVA(false), []);

return (
<div style={{ width: '100%', paddingInline: 10 }}>
<Flex justify={'right'}>
Expand Down
10 changes: 6 additions & 4 deletions dinky-web/src/pages/DataStudioNew/Toolbar/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@toolbar-icon-container-background-color: var(--btn-background-color);
@toolbar-icon-container-hover-color: var(--second-color);
@toolbar-icon-container-color: var(--btn-color);

/*工具栏样式*/
Expand All @@ -16,7 +17,8 @@

/* 工具栏 图标样式*/
.toolbar-icon {
font-size: 20px;
//这里定义font-size没有用，根据高度固定的
//font-size: 1px;
}

/* 工具栏 图标容器样式*/
Expand All @@ -28,12 +30,12 @@

.toolbar-icon-container:hover {
color: #1f1f1f;
border-radius: 50%;
background-color: @toolbar-icon-container-background-color;
border-radius: 15%;
background-color: @toolbar-icon-container-hover-color;
}

.toolbar-icon-container-select {
border-radius: 0 !important;
border-radius: 15%;
color: var(--btn-active-color) !important;
background-color: @toolbar-icon-container-background-color !important;
}
Expand Down
58 changes: 30 additions & 28 deletions dinky-web/src/pages/DataStudioNew/Toolbar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,36 +81,38 @@ export default React.memo((props: ToolbarProp) => {
className += ' toolbar-icon-container-open';
}
return (
<Tooltip title={item.title()} placement={'right'} arrow={false} key={item.key}>
<Row
id={item.key}
className={className}
style={{ height }}
align={'middle'}
justify={'center'}
key={item.key}
onClick={() => {
onClick(item);
}}
>
<span
style={{
width: '100%',
textAlign: 'center'
<div style={{ padding: '5px 5px 0' }}>
<Tooltip title={item.title()} placement={'right'} arrow={false} key={item.key}>
<Row
id={item.key}
className={className}
style={{ height }}
align={'middle'}
justify={'center'}
key={item.key}
onClick={() => {
onClick(item);
}}
>
{React.cloneElement(item.icon, {
className: 'toolbar-icon',
style: { fontSize: height === 60 ? 25 : 20 }
})}
</span>
{showDesc && (
<Typography.Paragraph className={'toolbar-desc'}>
{item.title()}
</Typography.Paragraph>
)}
</Row>
</Tooltip>
<span
style={{
width: '100%',
textAlign: 'center'
}}
>
{React.cloneElement(item.icon, {
className: 'toolbar-icon',
style: { fontSize: height === 60 ? 23 : 18 }
})}
</span>
{showDesc && (
<Typography.Paragraph className={'toolbar-desc'}>
{item.title()}
</Typography.Paragraph>
)}
</Row>
</Tooltip>
</div>
);
})}
</ReactSortable>
Expand Down
2 changes: 1 addition & 1 deletion dinky-web/src/pages/DataStudioNew/css/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
--btn-background-color: #e6f7ff;
--border-color: #dfe1e4;
--text-color: #424242;
--panel-extra-btn-color: red;
--panel-extra-btn-color: #000000;
--scroll-bg-color: #daecff;
}

Expand Down
5 changes: 3 additions & 2 deletions dinky-web/src/pages/DataStudioNew/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
display: inline-block;
width: 18px;
height: 24px;
margin-right: 3px;
text-align: center;
opacity: 0.3;
transition: all 0.25s ease-in-out;
Expand All @@ -30,10 +31,10 @@

// 设置分隔面板线的宽度和长度
.dock-hbox > .dock-divider {
flex: 0 0 2px;
flex: 0 0 1px;
}
.dock-vbox > .dock-divider {
flex: 0 0 2px;
flex: 0 0 1px;
}

// keep-alive div设置成满屏
Expand Down
2 changes: 1 addition & 1 deletion dinky-web/src/pages/DataStudioNew/model.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,7 +266,7 @@ const StudioModel: StudioModelType = {
}
},
theme: {
compact: true
compact: false
},
centerContent: {
tabs: [],
Expand Down
Loading