Skip to content

Commit

Permalink
Refactor: some code (DataLinkDC#2383)
Browse files Browse the repository at this point in the history
* refactor: front web

Signed-off-by: licho <lecho.sun@gmail.com>

* feat: default flink sql type ane others refactor

* refactor: equalsIgnoreCase

* Spotless Apply

---------

Signed-off-by: licho <lecho.sun@gmail.com>
Co-authored-by: leechor <leechor@users.noreply.github.com>
  • Loading branch information
leechor and leechor authored Oct 13, 2023
1 parent 38e8932 commit 5bd9efc
Show file tree
Hide file tree
Showing 13 changed files with 196 additions and 212 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ public Optional<? extends TableResult> execute(Executor executor) {
.from(temporalTable.getTableName())
.createTemporalTableFunction(timeColumn, targetColumn);

if (temporalTable.getFunctionType().toUpperCase().equals("TEMPORARY SYSTEM")) {
if (temporalTable.getFunctionType().equalsIgnoreCase("TEMPORARY SYSTEM")) {
customTableEnvironmentImpl.createTemporarySystemFunction(temporalTable.getFunctionName(), ttf);
} else {
customTableEnvironmentImpl.createTemporaryFunction(temporalTable.getFunctionName(), ttf);
Expand Down
25 changes: 8 additions & 17 deletions dinky-web/src/components/CallBackButton/LoadingBtn.tsx
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>;
};
65 changes: 36 additions & 29 deletions dinky-web/src/components/FlinkDag/functions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,37 +69,44 @@ export const buildDag = (job: Jobs.JobPlan) => {
export const updateDag = (job: Jobs.JobVertices[], graph?: Graph) => {
if (!job || !graph) return;

if (job && graph) {
job.forEach((vertice) => {
const node = graph.getCellById(vertice.id);
if (node) {
node.setData({ ...node.getData(), ...vertice });
}
});
job.forEach((vertices) => {
const node = graph.getCellById(vertices.id);
if (node) {
node.setData({ ...node.getData(), ...vertices });
}
});

graph.getEdges().forEach((edge) => {
const nodeData = edge.getSourceNode()?.getData();
if (nodeData.status == JOB_STATUS.RUNNING) {
edge.attr({ line: { stroke: '#3471F9' } });
edge.attr('line/strokeDasharray', 5);
edge.attr('line/strokeWidth', 2);
edge.attr('line/style/animation', 'running-line 30s infinite linear');
} else {
edge.attr('line/strokeDasharray', 0);
edge.attr('line/style/animation', '');
edge.attr('line/strokeWidth', 1);
if (nodeData.status == JOB_STATUS.FINISHED) {
edge.attr('line/stroke', '#52c41a');
} else if (nodeData.status == JOB_STATUS.CANCELED) {
edge.attr('line/stroke', '#ffe7ba');
} else if (nodeData.status == JOB_STATUS.FAILED) {
edge.attr('line/stroke', '#ff4d4f');
} else {
edge.attr('line/stroke', '#bfbfbf');
}
graph.getEdges().forEach((edge) => {
const nodeData = edge.getSourceNode()?.getData();
let stroke = '#bfbfbf';
let strokeDasharray = 0;
let strokeWidth = 1;
let animation = '';

switch (nodeData.status) {
case JOB_STATUS.RUNNING: {
stroke = '#3471F9';
strokeDasharray = 5;
strokeWidth = 2;
animation = 'running-line 30s infinite linear';
break;
}
});
}
case JOB_STATUS.FINISHED:
stroke = '#52c41a';
break;
case JOB_STATUS.CANCELED:
stroke = '#ffe7ba';
break;
case JOB_STATUS.FAILED:
stroke = '#ff4d4f';
break;
}

edge.attr({ line: { strokeDasharray: strokeDasharray } });
edge.attr({ line: { strokeWidth: strokeWidth } });
edge.attr({ line: { animation: animation } });
edge.attr({ line: { stroke: stroke } });
});
};

export const regConnect = (sourcePoint: any, targetPoint: any) => {
Expand Down
181 changes: 94 additions & 87 deletions dinky-web/src/components/FlinkDag/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,87 @@ export type DagProps = {
};
const { Paragraph } = Typography;

const RenderCheckpoint = (id: string, checkPoints: any) => {
const [selectPath, setSelectPath] = useState<string>('');
const key = id + selectPath;
const [itemChildren, setItemChildren] = useState({ [key]: [] as TabsProps['items'] });

const checkpointArray = ((checkPoints.history ?? []) as any[])
.filter((x) => x.status === 'COMPLETED')
.map((x) => {
return { checkpointType: x.checkpoint_type, path: x.external_path, id: x.id };
});

useEffect(() => {
if (!(selectPath && id)) {
return;
}

if (itemChildren[key]) {
return;
}

getData(API_CONSTANTS.READ_CHECKPOINT, { path: selectPath, operatorId: id }).then((res) => {
const genData = Object.keys(res.datas).map((x) => {
const datum = res.datas[x];
return {
key: x,
label: x,
children: (
<Tabs
items={Object.keys(datum).map((y) => {
return {
key: y,
label: y,
children: (
<Table
dataSource={datum[y].datas}
columns={(datum[y].headers as string[]).map((z) => {
return {
title: z,
dataIndex: z,
key: z,
render: (text) => (
<Paragraph copyable ellipsis={{ rows: 3 }}>
{text}
</Paragraph>
)
};
})}
/>
)
};
})}
tabBarStyle={{ marginBlock: 0 }}
tabBarGutter={10}
/>
)
};
});
setItemChildren({ ...itemChildren, [key]: genData });
});
}, [selectPath, id]);

return (
<>
<Select
defaultValue={selectPath}
style={{ width: '100%' }}
placeholder='Select a person'
optionFilterProp='children'
options={checkpointArray.map((x) => {
return { label: x.id, value: x.path };
})}
onChange={(path) => {
setSelectPath(path);
}}
/>

<Tabs items={itemChildren[key]} tabBarStyle={{ marginBlock: 0 }} tabBarGutter={10} />
</>
);
};

const FlinkDag = (props: DagProps) => {
const container = useRef(null);

Expand All @@ -69,19 +150,21 @@ const FlinkDag = (props: DagProps) => {

const initListen = (graph: Graph) => {
graph.on('node:selected', ({ cell }) => {
if (!onlyPlan) {
setOpen(true);
setZoom((oldValue) => {
originPosition = { zoom: oldValue };
return 1;
});
graph.zoomTo(1);
setCurrentSelect(cell);
graph.positionPoint(Rectangle.create(cell.getBBox()).getLeftMiddle(), '10%', '50%');
if (onlyPlan) {
return;
}

setOpen(true);
setZoom((oldValue) => {
originPosition = { zoom: oldValue };
return 1;
});
graph.zoomTo(1);
setCurrentSelect(cell);
graph.positionPoint(Rectangle.create(cell.getBBox()).getLeftMiddle(), '10%', '50%');
});

graph.on('node:unselected', ({ cell }) => {
graph.on('node:unselected', () => {
setZoom(originPosition.zoom);
handleClose();
});
Expand Down Expand Up @@ -150,82 +233,6 @@ const FlinkDag = (props: DagProps) => {
graph?.zoomTo(zoom);
}, [zoom]);

const renderCheckpoint = (id: string) => {
const [selectPath, setSelectPath] = useState<string>('');
const key = id + selectPath;
const [itemChildren, setItemChildren] = useState({ [key]: [] as TabsProps['items'] });
const checkpointArray = ((checkPoints.history ?? []) as any[])
.filter((x) => x.status === 'COMPLETED')
.map((x) => {
return { checkpointType: x.checkpoint_type, path: x.external_path, id: x.id };
});
useEffect(() => {
if (selectPath && id) {
if (!itemChildren[key]) {
getData(API_CONSTANTS.READ_CHECKPOINT, { path: selectPath, operatorId: id }).then(
(res) => {
const genData = Object.keys(res.datas).map((x) => {
const datum = res.datas[x];
return {
key: x,
label: x,
children: (
<Tabs
items={Object.keys(datum).map((y) => {
return {
key: y,
label: y,
children: (
<Table
dataSource={datum[y].datas}
columns={(datum[y].headers as string[]).map((z) => {
return {
title: z,
dataIndex: z,
key: z,
render: (text) => (
<Paragraph copyable ellipsis={{ rows: 3 }}>
{text}
</Paragraph>
)
};
})}
/>
)
};
})}
tabBarStyle={{ marginBlock: 0 }}
tabBarGutter={10}
/>
)
};
});
setItemChildren({ ...itemChildren, [key]: genData });
}
);
}
}
}, [selectPath, id]);

return (
<>
<Select
defaultValue={selectPath}
style={{ width: '100%' }}
placeholder='Select a person'
optionFilterProp='children'
options={checkpointArray.map((x) => {
return { label: x.id, value: x.path };
})}
onChange={(path) => {
setSelectPath(path);
}}
/>

<Tabs items={itemChildren[key]} tabBarStyle={{ marginBlock: 0 }} tabBarGutter={10} />
</>
);
};
return (
<span>
<div
Expand Down Expand Up @@ -274,7 +281,7 @@ const FlinkDag = (props: DagProps) => {
{
key: '2',
label: 'CheckPointRead',
children: renderCheckpoint(currentSelect?.id)
children: RenderCheckpoint(currentSelect?.id, checkPoints)
}
]}
tabBarGutter={10}
Expand Down
17 changes: 4 additions & 13 deletions dinky-web/src/pages/DataStudio/HeaderContainer/function.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,33 +23,24 @@ import { HomeOutlined } from '@ant-design/icons';

/**
* @description: 生成面包屑
* @type {({title: JSX.Element} | {title: string})[]}
*/
export const buildBreadcrumbItems = (breadcrumb: string) => {
const items = [{ title: <HomeOutlined /> }];

// 如果有 activeBreadcrumbTitle, 则切割 activeBreadcrumbTitle, 生成面包屑数组, 并映射
const activeBreadcrumbTitleList = Array.from(breadcrumb.split('/')).map((title) => ({
title: <>{title}</>
}));
items.push(...activeBreadcrumbTitleList);
return items;

return [{ title: <HomeOutlined /> }, ...activeBreadcrumbTitleList];
};

export const projectCommonShow = (type?: TabsPageType) => {
return type === TabsPageType.project;
};

export const isOnline = (data: TaskDataType | undefined) => {
if (data) {
return JOB_LIFE_CYCLE.ONLINE == data.step;
}
return false;
return data ? JOB_LIFE_CYCLE.ONLINE == data.step : false;
};

export const isRunning = (data: TaskDataType | undefined) => {
if (data) {
return JOB_STATUS.RUNNING == data.status;
}
return false;
return data ? JOB_STATUS.RUNNING == data.status : false;
};
8 changes: 4 additions & 4 deletions dinky-web/src/pages/DataStudio/HeaderContainer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ import {
FundOutlined,
MergeCellsOutlined,
MoreOutlined,
PauseOutlined, PlayCircleTwoTone,
PauseOutlined,
RotateRightOutlined,
SaveOutlined,
ScheduleOutlined,
Expand Down Expand Up @@ -261,15 +261,15 @@ const HeaderContainer = (props: any) => {
},
{
// 执行按钮
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'
}
},
{
Expand Down
Loading

0 comments on commit 5bd9efc

Please sign in to comment.