Skip to content

D
dlink
Commit 237e05c2 authored by wenmo's avatar wenmo
Browse files
Options

修改草稿为引导页

parent ea875c21
Hide whitespace changes
Inline Side-by-side
Showing with 221 additions and 141 deletions
dlink-web/config/routes.ts
View file @ 237e05c2
......@@ -25,6 +25,7 @@ export default [
path: '/flinksqlstudio',
name: 'flinksqlstudio',
icon: 'consoleSql',
footerRender: false,
component: './FlinkSqlStudio',
},
{
......
dlink-web/src/app.tsx
View file @ 237e05c2
......@@ -121,7 +121,7 @@ export const layout: RunTimeLayoutConfig = ({ initialState }) => {
/*waterMarkProps: {
content: initialState?.currentUser?.name,
},*/
// footerRender: () => <Footer />,
footerRender: () => <Footer />,
onPageChange: () => {
const { location } = history;
// 如果没有登录，重定向到 login
......
dlink-web/src/components/Studio/StudioConsole/StudioMsg/index.tsx
View file @ 237e05c2
......@@ -56,7 +56,7 @@ const StudioMsg = (props:any) => {
return (
<Typography>
{current.console.result.startTime?(isSql(current.task.dialect) ? renderCommonSqlContent():
{current&&current.console.result.startTime?(isSql(current.task.dialect) ? renderCommonSqlContent():
renderFlinkSqlContent() ):<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
}
</Typography>
......
dlink-web/src/components/Studio/StudioConsole/StudioTable/index.tsx
View file @ 237e05c2
......@@ -6,13 +6,13 @@ import {showJobData} from "@/components/Studio/StudioEvent/DQL";
import {isSql} from "@/components/Studio/conf";
import DTable from "@/components/Common/DTable";
const StudioTable = (props:any) => {
const StudioTable = (props: any) => {
const {current,result,dispatch} = props;
const {current,dispatch} = props;
const getColumns=(columns:[])=>{
let datas:any=[];
columns.map((item)=> {
const getColumns=(columns: [])=>{
let datas: any=[];
columns.map((item) => {
datas.push({
field: item,
});
......@@ -22,6 +22,7 @@ const StudioTable = (props:any) => {
const showDetail=()=>{
showJobData(current.console.result.jobId,dispatch)
console.log(current.console.result.result);
};
const renderFlinkSQLContent = () => {
......@@ -50,12 +51,11 @@ const StudioTable = (props:any) => {
return (
<div style={{width: '100%'}}>
{isSql(current.task.dialect)?renderSQLContent():renderFlinkSQLContent()}
{current?(isSql(current.task.dialect)?renderSQLContent():renderFlinkSQLContent()):undefined}
</div>
);
};
export default connect(({ Studio }: { Studio: StateType }) => ({
current: Studio.current,
result: Studio.result,
}))(StudioTable);
dlink-web/src/components/Studio/StudioConsole/index.tsx
View file @ 237e05c2
......@@ -19,7 +19,7 @@ const {TabPane} = Tabs;
const StudioConsole = (props: any) => {
const {height} = props;
const {height,current} = props;
let consoleHeight = (height - 37.6);
return (
<Tabs defaultActiveKey="StudioMsg" size="small" tabPosition="top" style={{
......@@ -35,7 +35,7 @@ const StudioConsole = (props: any) => {
key="StudioMsg"
>
<Scrollbars style={{height: consoleHeight}}>
<StudioMsg/>
{current?<StudioMsg/>:<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>}
</Scrollbars>
</TabPane>
<TabPane
......@@ -48,7 +48,7 @@ const StudioConsole = (props: any) => {
key="StudioTable"
>
<Scrollbars style={{height: consoleHeight}}>
<StudioTable/>
{current?<StudioTable/>:<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>}
</Scrollbars>
</TabPane>
<TabPane
......@@ -61,7 +61,7 @@ const StudioConsole = (props: any) => {
key="StudioChart"
>
<Scrollbars style={{height: consoleHeight}}>
<Chart height={consoleHeight} />
{current? <Chart height={consoleHeight} />:<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>}
</Scrollbars>
</TabPane>
<TabPane
......@@ -87,7 +87,7 @@ const StudioConsole = (props: any) => {
key="StudioConsanguinity"
>
<Scrollbars style={{height: consoleHeight}}>
<StudioCA/>
{current?<StudioCA/>:<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>}
</Scrollbars>
</TabPane>
<TabPane
......@@ -148,4 +148,5 @@ const StudioConsole = (props: any) => {
export default connect(({Studio}: { Studio: StateType }) => ({
sql: Studio.sql,
current: Studio.current,
}))(StudioConsole);
dlink-web/src/components/Studio/StudioHome/index.tsx 0 → 100644
View file @ 237e05c2
import {Typography,Divider} from 'antd';
import React from 'react';
import {connect} from 'umi';
import {StateType} from '@/pages/FlinkSqlStudio/model';
import {Scrollbars} from 'react-custom-scrollbars';
const {Title, Paragraph, Text} = Typography;
const StudioHome = (props: any) => {
const {toolHeight} = props;
return (
<Scrollbars style={{height: toolHeight}}>
<Typography style={{padding:'15px'}}>
<Title level={4}>欢迎使用 Dinky v0.5.0</Title>
<Paragraph>
<blockquote>实时即未来，Dinky 为 Apache Flink 而生，让 Flink SQL 纵享丝滑，并致力于实时计算平台建设。</blockquote>
</Paragraph>
<Title level={5}>快捷键</Title>
<Paragraph>
<Text keyboard>Ctrl + s</Text> 保存 <Divider type="vertical" />
<Text keyboard>Alt + 1</Text> 保存 <Divider type="vertical" />
<Text keyboard>Alt + 2</Text> 校验 <Divider type="vertical" />
<Text keyboard>Alt + 3</Text> 美化 <Divider type="vertical" />
<Text keyboard>Esc</Text> 关闭弹框 <Divider type="vertical" />
<Text keyboard>F1</Text> 更多快捷键
</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> 注释
</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> 格式化
</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> 删除一行
</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> 前往上一个高亮
</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> 折叠/展开
</Paragraph>
</Typography>
</Scrollbars>
);
};
export default connect(({Studio}: { Studio: StateType }) => ({
current: Studio.current,
sql: Studio.sql,
tabs: Studio.tabs,
toolHeight: Studio.toolHeight,
}))(StudioHome);
dlink-web/src/components/Studio/StudioMenu/index.tsx
View file @ 237e05c2
......@@ -15,14 +15,15 @@ import { postDataArray} from "@/components/Common/crud";
import {executeSql, getJobPlan} from "@/pages/FlinkSqlStudio/service";
import StudioHelp from "./StudioHelp";
import StudioGraph from "./StudioGraph";
import {showCluster, showTables, saveTask} from "@/components/Studio/StudioEvent/DDL";
import {useEffect, useState} from "react";
import {showCluster, showTables} from "@/components/Studio/StudioEvent/DDL";
import {useCallback, useEffect, useState} from "react";
import StudioExplain from "../StudioConsole/StudioExplain";
import {DIALECT, isOnline, isSql} from "@/components/Studio/conf";
import {
ModalForm,
} from '@ant-design/pro-form';
import SqlExport from "@/pages/FlinkSqlStudio/SqlExport";
import {Dispatch} from "@@/plugin-dva/connect";
const menu = (
<Menu>
......@@ -39,6 +40,22 @@ const StudioMenu = (props: any) => {
const [graphModalVisible, handleGraphModalVisible] = useState<boolean>(false);
const [graphData, setGraphData] = useState();
const onKeyDown = useCallback((e) => {
if(e.keyCode === 83 && e.ctrlKey === true){
e.preventDefault();
if(current) {
props.saveTask(current);
}
}
}, [current]);
useEffect(() => {
document.addEventListener("keydown", onKeyDown)
return () => {
document.removeEventListener("keydown", onKeyDown)
};
}, [current]);
const execute = () => {
if(!isSql(current.task.dialect)&&!isOnline(current.task.type)){
message.warn(`该任务执行模式为【${current.task.type}】，不支持 SQL 查询，请手动保存后使用右侧按钮——作业提交`);
......@@ -224,7 +241,7 @@ const StudioMenu = (props: any) => {
}
const saveSqlAndSettingToTask = () => {
saveTask(current,dispatch);
props.saveTask(current);
};
const exportSql = () => {
......@@ -311,6 +328,7 @@ const StudioMenu = (props: any) => {
</Breadcrumb>
)}
</Col>
{current?
<Col span={8}>
<Button
type="text"
......@@ -401,7 +419,7 @@ const StudioMenu = (props: any) => {
onClick={showHelp}
/>
</Tooltip>
</Col>
</Col>:undefined}
</Row>
</Col>
<StudioExplain
......@@ -418,6 +436,7 @@ const StudioMenu = (props: any) => {
>
<StudioGraph data={graphData} />
</Modal>
{current?
<ModalForm
title={`${current.task.alias} 的 ${current.task.dialect} 导出`}
visible={exportModalVisible}
......@@ -438,15 +457,23 @@ const StudioMenu = (props: any) => {
}}
>
<SqlExport id={current.task.id} />
</ModalForm>
</ModalForm>:undefined}
</Row>
);
};
const mapDispatchToProps = (dispatch: Dispatch)=>({
saveTask:(current: any)=>dispatch({
type: "Studio/saveTask",
payload: current.task,
}),
});
export default connect(({Studio}: { Studio: StateType }) => ({
current: Studio.current,
currentPath: Studio.currentPath,
tabs: Studio.tabs,
refs: Studio.refs,
currentSession: Studio.currentSession,
}))(StudioMenu);
}),mapDispatchToProps)(StudioMenu);
dlink-web/src/components/Studio/StudioRightTool/StudioGuide/index.tsx 0 → 100644
View file @ 237e05c2
import {Typography,Divider} from 'antd';
import React from 'react';
import {connect} from 'umi';
import {StateType} from '@/pages/FlinkSqlStudio/model';
import {Scrollbars} from 'react-custom-scrollbars';
import { history } from 'umi';
const {Title, Paragraph,Link, Text} = Typography;
const StudioGuide = (props: any) => {
const {toolHeight} = props;
return (
<Scrollbars style={{height: toolHeight}}>
<Typography style={{padding:'15px'}}>
<Title level={5}>快捷引导</Title>
<Paragraph>
<ul>
<li>
<Link onClick={()=>{history.push('/registration/cluster')}}>注册集群实例</Link>
</li>
<li>
<Link onClick={()=>{history.push('/registration/clusterConfiguration')}}>注册集群配置</Link>
</li>
<li>
<Link onClick={()=>{history.push('/registration/jar')}}>注册 Jar</Link>
</li>
<li>
<Link onClick={()=>{history.push('/registration/database')}}>注册数据源</Link>
</li>
<li>
<Link onClick={()=>{history.push('/registration/document')}}>注册文档</Link>
</li>
<li>
<Link onClick={()=>{history.push('/settings')}}>修改系统配置</Link>
</li>
<li>
<Link href="http://www.dlink.top/" target="_blank" >官网文档</Link>
</li>
<li>
<Link href="https://github.com/DataLinkDC/dlink" target="_blank" >Github</Link>
</li>
</ul>
</Paragraph>
</Typography>
</Scrollbars>
);
};
export default connect(({Studio}: { Studio: StateType }) => ({
current: Studio.current,
sql: Studio.sql,
tabs: Studio.tabs,
toolHeight: Studio.toolHeight,
}))(StudioGuide);
dlink-web/src/components/Studio/StudioRightTool/index.tsx
View file @ 237e05c2
......@@ -2,20 +2,18 @@ import {Tabs, Empty, Form} from "antd";
import {SettingOutlined,ScheduleOutlined,AuditOutlined} from "@ant-design/icons";
import {StateType} from "@/pages/FlinkSqlStudio/model";
import {connect} from "umi";
import styles from "./index.less";
import StudioConfig from "./StudioConfig";
import StudioSetting from "./StudioSetting";
import StudioSavePoint from "./StudioSavePoint";
import StudioEnvSetting from "./StudioEnvSetting";
import StudioSqlConfig from "./StudioSqlConfig";
import StudioUDFInfo from "./StudioUDFInfo";
import StudioGuide from "./StudioGuide";
import {DIALECT, isSql} from "@/components/Studio/conf";
const { TabPane } = Tabs;
const StudioRightTool = (props:any) => {
const StudioRightTool = (props: any) => {
const {current,form,toolHeight} = props;
......@@ -72,9 +70,12 @@ const StudioRightTool = (props:any) => {
};
return (
<>
{ current?
<Tabs defaultActiveKey="1" size="small" tabPosition="right" style={{ height: toolHeight}}>
{renderContent()}
</Tabs>
</Tabs>:<StudioGuide toolHeight={toolHeight} />}
</>
);
};
......
dlink-web/src/components/Studio/StudioTabs/index.tsx
View file @ 237e05c2
......@@ -4,7 +4,6 @@ import {connect} from 'umi';
import {StateType} from '@/pages/FlinkSqlStudio/model';
import styles from './index.less';
import StudioEdit from '../StudioEdit';
import {saveTask} from '@/components/Studio/StudioEvent/DDL';
import {DIALECT} from '../conf';
const {TabPane} = Tabs;
......@@ -25,17 +24,17 @@ const EditorTabs = (props: any) => {
};
const onEdit = (targetKey: any, action: any) => {
if (action == 'add') {
if (action === 'add') {
add();
} else if (action == 'remove') {
} else if (action === 'remove') {
dispatch &&
dispatch({
type: 'Studio/saveToolHeight',
payload: toolHeight - 0.0001,
});
if (current.isModified) {
saveTask(current, dispatch);
}
// if (current.isModified) {
// saveTask(current, dispatch);
// }
remove(targetKey);
}
};
......
dlink-web/src/components/Studio/index.tsx
View file @ 237e05c2
......@@ -5,6 +5,7 @@ import {} from "@ant-design/icons";
import StudioMenu from "./StudioMenu";
import {Row, Col, Card, Form} from "antd";
import StudioTabs from "./StudioTabs";
import StudioHome from "./StudioHome";
import {StateType} from "@/pages/FlinkSqlStudio/model";
import StudioConsole from "./StudioConsole";
import StudioLeftTool from "./StudioLeftTool";
......@@ -16,15 +17,11 @@ import {
import {loadSettings} from "@/pages/Settings/function";
import DraggleLayout from "@/components/DraggleLayout";
import DraggleVerticalLayout from "@/components/DraggleLayout/DraggleVerticalLayout";
import {Dispatch} from "@@/plugin-dva/connect";
type StudioProps = {
rightClickMenu: StateType['rightClickMenu'];
dispatch: any;
};
const Studio: React.FC<StudioProps> = (props) => {
const Studio = (props: any) => {
const {rightClickMenu, toolHeight, toolLeftWidth,toolRightWidth, dispatch} = props;
const {rightClickMenu, toolHeight, toolLeftWidth,toolRightWidth,tabs,current, dispatch} = props;
const [form] = Form.useForm();
const VIEW = {
leftToolWidth: 300,
......@@ -136,7 +133,7 @@ const Studio: React.FC<StudioProps> = (props) => {
}}/>
</Col>
<Col>
<StudioTabs width={size.width - toolRightWidth - toolLeftWidth}/>
{tabs.panes.length === 0 ?<StudioHome width={size.width - toolRightWidth - toolLeftWidth} />:<StudioTabs width={size.width - toolRightWidth - toolLeftWidth}/>}
</Col>
</DraggleLayout>
<Col id='StudioRightTool' className={styles["vertical-tabs"]}>
......@@ -151,6 +148,7 @@ const Studio: React.FC<StudioProps> = (props) => {
</Row>
</DraggleVerticalLayout>
</Card>
</div>
)
};
......@@ -160,4 +158,6 @@ export default connect(({Studio}: { Studio: StateType }) => ({
toolHeight: Studio.toolHeight,
toolLeftWidth: Studio.toolLeftWidth,
toolRightWidth: Studio.toolRightWidth,
tabs: Studio.tabs,
current: Studio.current,
}))(Studio);
dlink-web/src/pages/FlinkSqlStudio/model.ts
View file @ 237e05c2
......@@ -204,95 +204,13 @@ const Model: ModelType = {
currentSession: {
connectors: [],
},
current: {
title: '草稿',
key: 0,
value: '',
closable: false,
path: ['草稿'],
isModified: false,
task: {
jobName: '草稿',
type: 'local',
checkPoint: 0,
savePointStrategy: 0,
savePointPath: '',
parallelism: 1,
fragment: true,
statementSet: false,
clusterId: 0,
clusterName: "本地环境",
clusterConfigurationId:undefined,
clusterConfigurationName:undefined,
databaseId:undefined,
databaseName:undefined,
jarId:undefined,
envId:undefined,
maxRowNum: 100,
config: [],
session: '',
alias: '草稿',
dialect: 'FlinkSql',
useResult:true,
useChangeLog:false,
useAutoCancel:false,
useSession:false,
useRemote:false,
},
console: {
result: {},
chart: {},
},
monaco: {},
sqlMetaData: undefined,
},
current: undefined,
sql: '',
monaco: {},
currentPath: ['草稿'],
currentPath: ['引导页'],
tabs: {
activeKey: 0,
panes: [{
title: '草稿',
key: 0,
value: '',
closable: false,
isModified: false,
path: ['草稿'],
task: {
jobName: '草稿',
type: 'local',
checkPoint: 0,
savePointStrategy: 0,
savePointPath: '',
parallelism: 1,
fragment: true,
statementSet: false,
clusterId: 0,
clusterName: "本地环境",
clusterConfigurationId:undefined,
clusterConfigurationName:undefined,
databaseId:undefined,
databaseName:undefined,
jarId:undefined,
envId:undefined,
session: '',
config: [],
maxRowNum: 100,
alias: '草稿',
dialect: 'FlinkSql',
useResult:true,
useChangeLog:false,
useAutoCancel:false,
useSession:false,
useRemote:false,
},
console: {
result: {},
chart: {},
},
monaco: {},
sqlMetaData: undefined,
}],
panes: [],
},
session: [],
result:{},
......@@ -381,8 +299,8 @@ const Model: ModelType = {
}
return {
...state,
current: newCurrent,
tabs: newTabs,
current: {...newCurrent},
tabs: {...newTabs},
};
},
saveTabs(state, {payload}) {
......@@ -392,6 +310,15 @@ const Model: ModelType = {
newCurrent = payload.panes[i];
}
}
if(payload.panes.length === 0){
return {
...state,
current: undefined,
tabs: {
...payload,
},
};
}
return {
...state,
current: {
......@@ -472,16 +399,20 @@ const Model: ModelType = {
},
saveTaskData(state, {payload}) {
const newTabs = state.tabs;
const newCurrent = state.current;
for (let i = 0; i < newTabs.panes.length; i++) {
if (newTabs.panes[i].key == newTabs.activeKey) {
if (newTabs.panes[i].key === payload.key) {
newTabs.panes[i].task = payload;
newTabs.panes[i].isModified = false;
if(newCurrent.key === payload.key){
newCurrent = newTabs.panes[i];
}
}
}
return {
...state,
tabs: {
...newTabs,
},
current: {...newCurrent},
tabs: {...newTabs},
};
},
saveSession(state, {payload}) {
......@@ -514,13 +445,7 @@ const Model: ModelType = {
};
},
saveResult(state, {payload}) {
// return {
// ...state,
// result: {
// ...payload
// },
// };
let newTabs = state?.tabs;
const newTabs = state?.tabs;
let newCurrent = state?.current;
for (let i = 0; i < newTabs.panes.length; i++) {
if (newTabs.panes[i].key === newTabs.activeKey) {
......@@ -531,8 +456,8 @@ const Model: ModelType = {
}
return {
...state,
current: newCurrent,
tabs: newTabs,
current: {...newCurrent},
tabs: {...newTabs},
};
},
saveCluster(state, {payload}) {
......@@ -572,8 +497,8 @@ const Model: ModelType = {
}
return {
...state,
current: newCurrent,
tabs: newTabs,
current: {...newCurrent},
tabs: {...newTabs},
};
},
},
......
dlink-web/src/pages/Welcome.tsx
View file @ 237e05c2
......@@ -556,6 +556,9 @@ export default (): React.ReactNode => {
<li>
<Link>新增 BI选项卡的折线图、条形图、饼图</Link>
</li>
<li>
<Link>修改 草稿为引导页</Link>
</li>
</ul>
</Paragraph>
</Timeline.Item>
......
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