Skip to content

D
dlink
Commit 65f8ba05 authored by godkaikai's avatar godkaikai
Browse files
Options

session

parent 7ea40843
Show whitespace changes
Inline Side-by-side
Showing with 196 additions and 79 deletions
dlink-web/src/components/Studio/StudioConsole/index.tsx
View file @ 65f8ba05
import { Tabs,Empty } from "antd";
import {CodeOutlined, TableOutlined,RadarChartOutlined,CalendarOutlined,FileSearchOutlined,DesktopOutlined} from "@ant-design/icons";
import {CodeOutlined, TableOutlined,RadarChartOutlined,CalendarOutlined,FileSearchOutlined,DesktopOutlined
,FunctionOutlined} from "@ant-design/icons";
import {StateType} from "@/pages/FlinkSqlStudio/model";
import {connect} from "umi";
import styles from "./index.less";
......@@ -74,6 +75,17 @@ const StudioConsole = (props:any) => {
>
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
</TabPane>
<TabPane
tab={
<span>
<FunctionOutlined />
函数
</span>
}
key="6"
>
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
</TabPane>
<TabPane
tab={
<span>
......@@ -81,7 +93,7 @@ const StudioConsole = (props:any) => {
文档
</span>
}
key="6"
key="7"
>
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
</TabPane>
......
dlink-web/src/components/Studio/StudioMenu/index.tsx
View file @ 65f8ba05
......@@ -40,7 +40,6 @@ const StudioMenu = (props: any) => {
const saveSqlAndSettingToTask = async() => {
const fieldsValue = await form.validateFields();
console.log(fieldsValue);
if(current.task){
let task = {
id:current.key,
......@@ -57,7 +56,6 @@ const StudioMenu = (props: any) => {
}else{
}
console.log('获取' + current.value);
};
const runMenu = (
......
dlink-web/src/components/Studio/StudioSetting/index.tsx
View file @ 65f8ba05
import {connect} from "umi";
import {StateType} from "@/pages/FlinkSqlStudio/model";
import {Form, InputNumber,Input,Switch,Select,Tag} from "antd";
import {InfoCircleOutlined} from "@ant-design/icons";
import {Form, InputNumber,Input,Switch,Select,Tag,Row,Col,Divider} from "antd";
import {InfoCircleOutlined,PlusOutlined} from "@ant-design/icons";
import styles from "./index.less";
import {useEffect, useState} from "react";
......@@ -9,8 +9,9 @@ const { Option } = Select;
const StudioSetting = (props: any) => {
const {cluster,current,form,dispatch} = props;
const {cluster,current,form,dispatch,tabs,session} = props;
const [clusterOption, setClusterOption] = useState<[]>();
const [newSesstion, setNewSesstion] = useState<string>('');
const getCluster = ()=>{
......@@ -26,44 +27,62 @@ const StudioSetting = (props: any) => {
});
};
form.setFieldsValue(current.task);
useEffect(() => {
getCluster();
}, []);
const addSession = ()=>{
if(newSesstion!='') {
dispatch && dispatch({
type: "Studio/saveSession",
payload: newSesstion,
});
setNewSesstion('');
}
};
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){
newTabs.panes[i].task={
...all
};
break;
}
}
dispatch&&dispatch({
type: "Studio/saveTabs",
payload: newTabs,
});
};
const localOption = (<><Tag color="default">Local</Tag>本地环境</>);
return (
<Form
form={form}
layout="vertical"
className={styles.form_setting}
initialValues={current.task}
//initialValues={current.task}
onValuesChange={onValuesChange}
>
<Form.Item label="Flink集群" tooltip="选择Flink集群进行远程提交任务" name="clusterId"
className={styles.form_item}>
<Select
//mode="multiple"
style={{ width: '100%' }}
placeholder="选择Flink集群"
defaultValue={['0']}
optionLabelProp="label"
>
<Option value="0" label={localOption}>
<Tag color="default">Local</Tag>
本地环境
</Option>
{clusterOption}
</Select>
</Form.Item>
<Row>
<Col span={12}>
<Form.Item label="CheckPoint" tooltip="设置Flink任务的检查点步长，0 代表不启用" name="checkPoint"
className={styles.form_item}>
<InputNumber min={0} max={999999} defaultValue={0}/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="Parallelism" className={styles.form_item} name="parallelism"
tooltip="设置Flink任务的并行度，最小为 1"
>
<InputNumber min={1} max={9999} defaultValue={1}/>
<InputNumber min={1} max={9999} defaultValue={1} />
</Form.Item>
</Col>
</Row>
<Form.Item
label="Fragment" className={styles.form_item} name="fragment"
tooltip={{ title: '【增强特性】 开启FlinkSql片段机制，使用“:=”进行定义（以“;”结束），“${}”进行调用', icon: <InfoCircleOutlined /> }}
......@@ -78,6 +97,58 @@ const StudioSetting = (props: any) => {
>
<Input placeholder="hdfs://..." />
</Form.Item>
<Row>
<Col span={11}>
<Form.Item label="Flink集群" tooltip="选择Flink集群进行远程提交任务" name="clusterId"
className={styles.form_item}>
<Select
//mode="multiple"
style={{ width: '100%' }}
placeholder="选择Flink集群"
defaultValue={['0']}
optionLabelProp="label"
>
<Option value="0" label={localOption}>
<Tag color="default">Local</Tag>
本地环境
</Option>
{clusterOption}
</Select>
</Form.Item>
</Col>
<Col span={11} offset={1}>
<Form.Item
label="共享会话" tooltip="选择会话进行 Flink Catalog 的共享" name="session"
className={styles.form_item}>
<Select
placeholder="选择会话"
dropdownRender={menu => (
<div>
{menu}
<Divider style={{ margin: '4px 0' }} />
<div style={{ display: 'flex', flexWrap: 'nowrap', padding: 8 }}>
<Input style={{ flex: 'auto' }}
onChange={(e)=>{
setNewSesstion(e.target.value);
}}
/>
<a
style={{ flex: 'none', padding: '8px', display: 'block', cursor: 'pointer' }}
onClick={addSession}
>
<PlusOutlined />
</a>
</div>
</div>
)}
>
{session.map(item => (
<Option key={item}>{item}</Option>
))}
</Select>
</Form.Item>
</Col>
</Row>
</Form>
);
};
......@@ -85,4 +156,6 @@ const StudioSetting = (props: any) => {
export default connect(({Studio}: { Studio: StateType }) => ({
cluster: Studio.cluster,
current: Studio.current,
tabs: Studio.tabs,
session: Studio.session,
}))(StudioSetting);
dlink-web/src/components/Studio/StudioTabs/index.tsx
View file @ 65f8ba05
import { Tabs } from 'antd';
import {message, Tabs } from 'antd';
import React, {useState} from 'react';
import StudioEdit from "../StudioEdit";
import {connect} from "umi";
......@@ -13,8 +13,6 @@ const EditorTabs = (props: any) => {
const [panes, setPanes] = useState<any>(tabs.panes);
const onChange = (activeKey: any) => {
//setActiveKey(activeKey);
console.log(activeKey);
dispatch({
type: "Studio/changeActiveKey",
payload: activeKey,
......@@ -22,8 +20,6 @@ const EditorTabs = (props: any) => {
};
const onEdit = (targetKey: any, action: any) => {
console.log(targetKey)
console.log(action);
if(action=='add'){
add();
}else if(action=='remove'){
......@@ -31,22 +27,14 @@ const EditorTabs = (props: any) => {
}
};
const updateValue = (targetKey: any, val: string)=>{
panes.forEach((pane, i) => {
if (pane.key === targetKey) {
//pane.value = val;
return;
}
});
};
const add = () => {
let index = newTabIndex + 1;
message.warn('敬请期待');
/*let index = newTabIndex + 1;
const newPanes = [...panes];
newPanes.push({ title: `未命名${index}`,value:'', key: -index });
setPanes(newPanes);
setActiveKey(-index);
setNewTabIndex(index);
setNewTabIndex(index);*/
};
const remove = (targetKey:any) => {
......
dlink-web/src/components/Studio/StudioTree/index.tsx
View file @ 65f8ba05
......@@ -113,10 +113,7 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
newTabs.panes.push(newPane);
dispatch&&dispatch({
type: "Studio/saveTabs",
payload: {
current:newPane,
tabs:newTabs,
},
payload: newTabs,
});
})
}
......
dlink-web/src/components/Studio/index.tsx
View file @ 65f8ba05
import React, {useEffect, useState} from "react";
import {connect} from "umi";
import styles from './index.less';
import {BarsOutlined,SettingOutlined} from "@ant-design/icons";
import {BarsOutlined,SettingOutlined,AuditOutlined,ScheduleOutlined,AppstoreOutlined,GoldOutlined,DashboardOutlined,
FireOutlined} from "@ant-design/icons";
import StudioMenu from "./StudioMenu";
import {Row, Col, Card, Empty, Tabs, Form} from "antd";
......@@ -37,6 +38,9 @@ const Studio: React.FC<StudioProps> = ({sql}) => {
<TabPane tab={<span><BarsOutlined/>目录</span>} key="1" >
<StudioTree/>
</TabPane>
<TabPane tab={<span><AppstoreOutlined />元数据</span>} key="2" >
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
</TabPane>
</Tabs>
</Col>
<Col span={16}>
......@@ -48,6 +52,24 @@ const Studio: React.FC<StudioProps> = ({sql}) => {
<Tabs defaultActiveKey="1" size="small">
<TabPane tab={<span><SettingOutlined />配置</span>} key="1" >
<StudioSetting form={form} />
</TabPane>
<TabPane tab={<span><ScheduleOutlined />详情</span>} key="2" >
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
</TabPane>
<TabPane tab={<span><AuditOutlined />审计</span>} key="3" >
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
</TabPane>
</Tabs>
<Tabs defaultActiveKey="1" size="small">
<TabPane tab={<span>&nbsp;<GoldOutlined />Catalogue</span>} key="1" >
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
</TabPane>
<TabPane tab={<span>&nbsp;<DashboardOutlined />Overview</span>} key="2" >
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
</TabPane>
<TabPane tab={<span>&nbsp;<FireOutlined />Jobs</span>} key="3" >
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
</TabPane>
</Tabs>
</Col>
......
dlink-web/src/pages/FlinkSqlStudio/model.ts
View file @ 65f8ba05
......@@ -18,22 +18,23 @@ export type ClusterType = {
}
export type TaskType = {
id: number,
catalogueId: number,
name: string,
alias: string,
type: string,
checkPoint: number,
savePointPath: string,
parallelism: number,
fragment: boolean,
clusterId: number,
clusterName: string,
note: string,
enabled: boolean,
createTime: Date,
updateTime: Date,
statement: string,
id?: number,
catalogueId?: number,
name?: string,
alias?: string,
type?: string,
checkPoint?: number,
savePointPath?: string,
parallelism?: number,
fragment?: boolean,
clusterId?: any,
clusterName?: string,
note?: string,
enabled?: boolean,
createTime?: Date,
updateTime?: Date,
statement?: string,
session:string;
};
export type TabsItemType = {
......@@ -55,6 +56,7 @@ export type StateType = {
sql?: string;
currentPath?: string[];
tabs:TabsType;
session:string[];
};
export type ModelType = {
......@@ -69,18 +71,14 @@ export type ModelType = {
saveTabs: Reducer<StateType>;
changeActiveKey: Reducer<StateType>;
saveTaskData: Reducer<StateType>;
saveSession: Reducer<StateType>;
};
};
const getClusters = async () => {
try {
const msg = await postAll('api/cluster/listEnabledAll');
let data:any= [];
msg.then(value=>{
data = value.datas;
});
console.log(data);
return data;
const {datas} = await postAll('api/cluster/listEnabledAll');
return datas;
} catch (error) {
console.error('获取Flink集群失败');
return [];
......@@ -97,6 +95,14 @@ const Model: ModelType = {
key: 0 ,
value:'',
closable: false,
task:{
checkPoint: 0,
savePointPath: '',
parallelism: 1,
fragment: true,
clusterId: '0',
session:'admin',
},
},
sql: '',
currentPath: [],
......@@ -107,8 +113,17 @@ const Model: ModelType = {
key: 0 ,
value:'',
closable: false,
task:{
checkPoint: 0,
savePointPath: '',
parallelism: 1,
fragment: true,
clusterId: '0',
session:'admin',
},
}],
},
session:['admin'],
},
effects: {
......@@ -149,19 +164,19 @@ const Model: ModelType = {
};
},
saveTabs(state, { payload }) {
/*let newCurrent = state.current;
for(let i=0;i<payload.tabs.panes.length;i++){
if(payload.tabs.panes[i].key==payload.tabs.activeKey){
newCurrent=payload.tabs.panes[i];
let newCurrent = state.current;
for(let i=0;i<payload.panes.length;i++){
if(payload.panes[i].key==payload.activeKey){
newCurrent=payload.panes[i];
}
}
}*/
return {
...state,
current:{
...payload.current,
...newCurrent,
},
tabs:{
...payload.tabs,
...payload,
},
};
},
......@@ -188,9 +203,7 @@ const Model: ModelType = {
let newTabs = state.tabs;
for(let i=0;i<newTabs.panes.length;i++){
if(newTabs.panes[i].key==newTabs.activeKey){
newTabs.panes[i]={
...payload
};
newTabs.panes[i].task=payload;
}
}
return {
......@@ -200,6 +213,20 @@ const Model: ModelType = {
},
};
},
saveSession(state, { payload }) {
let newSession = state.session;
for(let i=0;i<newSession.length;i++){
if(newSession[i].key==payload){
return {};
}
}
newSession.push(payload);
console.log(newSession);
return {
...state,
session:newSession,
};
},
},
};
......
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