|
|
@@ -1,24 +1,21 @@
|
|
|
-import {
|
|
|
- Button,
|
|
|
- Form,
|
|
|
- Input,
|
|
|
- Select,
|
|
|
- Radio,
|
|
|
- Space,
|
|
|
- Upload,
|
|
|
- Steps,
|
|
|
- message,
|
|
|
-} from 'antd'
|
|
|
-import type { RadioChangeEvent } from 'antd'
|
|
|
-import type { UploadProps } from 'antd'
|
|
|
-import { UploadOutlined } from '@ant-design/icons'
|
|
|
-import React, { useState, Component, useEffect } from 'react'
|
|
|
-import styled from 'styled-components'
|
|
|
-import JobStepOne from './JobStepOne'
|
|
|
-import JobStepTwo from './JobStepTwo'
|
|
|
+import { Button, Form, Input, Select, Radio, Space, Upload, Steps, message, Divider } from 'antd';
|
|
|
+import type { RadioChangeEvent} from 'antd';
|
|
|
+import type { UploadProps } from 'antd';
|
|
|
+import { UploadOutlined, PlusOutlined } from '@ant-design/icons';
|
|
|
+import React, { useState , Component, useEffect, useRef, props } from 'react';
|
|
|
+import styled from 'styled-components';
|
|
|
+import JobStepOne from './JobStepOne';
|
|
|
+import JobStepTwo from './JobStepTwo';
|
|
|
+import JobStepThree from './JobStepThree';
|
|
|
+import { useNavigate } from 'react-router'
|
|
|
+import bus from '../../../bus.js'
|
|
|
+import { getJobTypes, createJob } from '../services'
|
|
|
+
|
|
|
|
|
|
const JobCre = styled.div``
|
|
|
const CreContent = styled.div`
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ height: 960px;
|
|
|
margin-left: 24px;
|
|
|
.ant-form {
|
|
|
display: flex;
|
|
|
@@ -28,13 +25,16 @@ const CreContent = styled.div`
|
|
|
flex-wrap: wrap;
|
|
|
align-items: stretch;
|
|
|
}
|
|
|
+ .script_file {
|
|
|
+ margin-left: -29px !important;
|
|
|
+ }
|
|
|
.creTitle {
|
|
|
width: 120px;
|
|
|
height: 60px;
|
|
|
margin-left: 15px;
|
|
|
display: flex;
|
|
|
}
|
|
|
- .bluetTitle {
|
|
|
+ .bluetTitle {
|
|
|
background-color: rgba(24, 129, 218, 1);
|
|
|
width: 3px;
|
|
|
height: 16px;
|
|
|
@@ -43,7 +43,7 @@ const CreContent = styled.div`
|
|
|
}
|
|
|
.creText {
|
|
|
width: 105px;
|
|
|
- height: 20px;
|
|
|
+ height: 20px;
|
|
|
margin-left: 10px;
|
|
|
overflow-wrap: break-word;
|
|
|
color: rgba(74, 74, 74, 1);
|
|
|
@@ -54,45 +54,67 @@ const CreContent = styled.div`
|
|
|
line-height: 67px;
|
|
|
font-weight: 800;
|
|
|
}
|
|
|
+ .JobName {
|
|
|
+ margin-left: 25px;
|
|
|
+ }
|
|
|
+ .MMir {
|
|
|
+ margin-left: -17px !important;
|
|
|
+ }
|
|
|
.ant-select-arrow {
|
|
|
top: 36%;
|
|
|
padding-left: 7px;
|
|
|
height: 20px;
|
|
|
- border-left: 1px solid;
|
|
|
+ border-left: 1px solid
|
|
|
}
|
|
|
.ant-col {
|
|
|
flex: unset;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.ant-select {
|
|
|
width: 295px;
|
|
|
height: 32px;
|
|
|
}
|
|
|
.ant-form-item-control-input {
|
|
|
- width: 295px;
|
|
|
+ width:295px;
|
|
|
}
|
|
|
.ant-row {
|
|
|
margin-left: 60px;
|
|
|
}
|
|
|
- .JsPyInfo {
|
|
|
- width: 464px;
|
|
|
+ .JaPyInfo {
|
|
|
+ width:464px;
|
|
|
.ant-form {
|
|
|
align-content: end;
|
|
|
}
|
|
|
- .choseJs {
|
|
|
+ .choseJa {
|
|
|
.ant-row {
|
|
|
margin-left: 43px;
|
|
|
- }
|
|
|
- ,
|
|
|
+ },
|
|
|
.ant-form-item-control-input {
|
|
|
- left: 11px;
|
|
|
+ left: 11px;
|
|
|
+ }
|
|
|
+ .upButton {
|
|
|
+ width: 88px;
|
|
|
+ height: 32px;
|
|
|
+ margin-left: 7px;
|
|
|
+ background-color: #4883FB;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .JaPySubmit {
|
|
|
+ display: flex;
|
|
|
+ margin-left: 60px;
|
|
|
+ .Submit {
|
|
|
+ margin-left: 20px;
|
|
|
+ .ant-btn {
|
|
|
+ color: #1881DA;
|
|
|
+ border-color: #1881DA;
|
|
|
+ }
|
|
|
}
|
|
|
- .upButton {
|
|
|
- width: 88px;
|
|
|
- height: 32px;
|
|
|
- margin-left: 7px;
|
|
|
- background-color: #4883fb;
|
|
|
- color: white;
|
|
|
+ .Cancel {
|
|
|
+ .ant-btn {
|
|
|
+ color: #1881DA;
|
|
|
+ border-color: #1881DA;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -117,14 +139,14 @@ const CreContent = styled.div`
|
|
|
margin-left: 67px;
|
|
|
}
|
|
|
.ant-steps-label-vertical .ant-steps-item-content {
|
|
|
- width: 220px;
|
|
|
+ width:220px
|
|
|
}
|
|
|
}
|
|
|
-`
|
|
|
+ `
|
|
|
|
|
|
-const { Option } = Select
|
|
|
+const { Option } = Select;
|
|
|
const FormItem = Form.Item
|
|
|
-const RadioGroup = Radio.Group
|
|
|
+const RadioGroup = Radio.Group;
|
|
|
|
|
|
const layout = {
|
|
|
labelCol: {
|
|
|
@@ -133,42 +155,91 @@ const layout = {
|
|
|
wrapperCol: {
|
|
|
span: 16,
|
|
|
},
|
|
|
-}
|
|
|
+};
|
|
|
const tailLayout = {
|
|
|
wrapperCol: {
|
|
|
offset: 8,
|
|
|
span: 16,
|
|
|
},
|
|
|
-}
|
|
|
-export default function JobCreate() {
|
|
|
- const [form] = Form.useForm()
|
|
|
- const { Step } = Steps
|
|
|
-
|
|
|
- // 显示/隐藏配置Js作业信息模块
|
|
|
- const [JsIsShow, setJsIsShow] = useState('none')
|
|
|
+};
|
|
|
+export default function JobCreate (props) {
|
|
|
+ // 设置背景颜色
|
|
|
+ document.body.style.background = '#F0F2F5'
|
|
|
+ const [form] = Form.useForm();
|
|
|
+ const { Step } = Steps
|
|
|
+ // 路由导航
|
|
|
+ const navigate = useNavigate()
|
|
|
+ // 显示/隐藏配置Ja作业信息模块
|
|
|
+ const [JaIsShow,setJaIsShow]=useState('none')
|
|
|
|
|
|
// 显示/隐藏配置Python作业信息模块
|
|
|
- const [PyIsShow, setPyIsShow] = useState('none')
|
|
|
+ const [PyIsShow,setPyIsShow]=useState('none')
|
|
|
|
|
|
// 显示/隐藏配置Dag作业信息模块
|
|
|
- const [DagIsShow, setDagIsShow] = useState('none')
|
|
|
+ const [DagIsShow,setDagIsShow]=useState('none')
|
|
|
|
|
|
// 单选框动态传值
|
|
|
- const [value, setValue] = useState(1)
|
|
|
+ const [value, setValue] = useState(1);
|
|
|
|
|
|
// 步骤数
|
|
|
const [currentStep, setCurrentStep] = useState(0)
|
|
|
-
|
|
|
- const [drawDataForm] = Form.useForm()
|
|
|
-
|
|
|
- const [currentForm, setCurrentForm] = useState(drawDataForm)
|
|
|
+
|
|
|
+ //作业类型
|
|
|
+ const [jobTypeOptions, setJobTypeOptions] = useState()
|
|
|
+
|
|
|
+ //作业分类
|
|
|
+ const [jobTags, setJobTags] = useState([])
|
|
|
+
|
|
|
+ //dag第一步表单数据
|
|
|
+ const [ConfigDataForm] = Form.useForm()
|
|
|
+ //dag第二步表单数据
|
|
|
+ const [InputDataForm] = Form.useForm()
|
|
|
+ //dag第三步表单数据
|
|
|
+ const [OutputDataForm] = Form.useForm()
|
|
|
+
|
|
|
+ //当前表单数据
|
|
|
+ const [currentForm, setCurrentForm] = useState(ConfigDataForm)
|
|
|
+
|
|
|
+ //java表单数据
|
|
|
+ const [JavaDataForm] = Form.useForm()
|
|
|
+ //python表单数据
|
|
|
+ const [PythonDataForm] = Form.useForm()
|
|
|
+
|
|
|
+ //当前选择的作业类型
|
|
|
+ const [currentJobType, setCurrentJobType] = useState('')
|
|
|
+
|
|
|
+ const JobTagInputRef = useRef(null);
|
|
|
+
|
|
|
+ const [tagName, setTagName] = useState('');
|
|
|
+
|
|
|
+ const [dagData, setDagData] = useState()
|
|
|
+
|
|
|
+ //动态改变作业分类的值
|
|
|
+ const onNameChange = (event) => {
|
|
|
+ setTagName(event.target.value);
|
|
|
+ };
|
|
|
+
|
|
|
+ //添加自定义作业分类
|
|
|
+ const addTagItem = (e) => {
|
|
|
+ if (tagName) {
|
|
|
+ console.log(tagName);
|
|
|
+ e.preventDefault();
|
|
|
+ setJobTags([...jobTags,tagName])
|
|
|
+ setTagName('')
|
|
|
+ setTimeout(() => {
|
|
|
+ JobTagInputRef.current?.focus();
|
|
|
+ }, 0);
|
|
|
+ } else {
|
|
|
+ message.error('请输入自定义作业分类名称')
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
// 设置单选框value值
|
|
|
- const onChange = e => {
|
|
|
- console.log('radio checked', e.target.value)
|
|
|
- setValue(e.target.value)
|
|
|
- }
|
|
|
-
|
|
|
+ const onChange = (e) => {
|
|
|
+ console.log('radio checked', e.target.value);
|
|
|
+ setValue(e.target.value);
|
|
|
+ };
|
|
|
+
|
|
|
//上传文件配置
|
|
|
const UpProps: UploadProps = {
|
|
|
name: 'file',
|
|
|
@@ -180,30 +251,39 @@ export default function JobCreate() {
|
|
|
// 上传文件提交状态
|
|
|
onChange(info) {
|
|
|
if (info.file.status !== 'uploading') {
|
|
|
- console.log(info.file, info.fileList)
|
|
|
+ console.log(info.file, info.fileList);
|
|
|
}
|
|
|
if (info.file.status === 'done') {
|
|
|
- message.success(`${info.file.name} file uploaded successfully`)
|
|
|
+ message.success(`${info.file.name} file uploaded successfully`);
|
|
|
} else if (info.file.status === 'error') {
|
|
|
- message.error(`${info.file.name} file upload failed.`)
|
|
|
+ message.error(`${info.file.name} file upload failed.`);
|
|
|
}
|
|
|
},
|
|
|
- }
|
|
|
+ };
|
|
|
|
|
|
//根据作业类型做出判断
|
|
|
- const onGenderChange = value => {
|
|
|
- if (value === 'Java') {
|
|
|
- setJsIsShow('block')
|
|
|
+ const onGenderChange = (value) => {
|
|
|
+ if (value === "java") {
|
|
|
+ setJaIsShow('block')
|
|
|
setDagIsShow('none')
|
|
|
- setPyIsShow('none')
|
|
|
- } else if (value === 'Python') {
|
|
|
- setJsIsShow('none')
|
|
|
+ setPyIsShow('none')
|
|
|
+ setCurrentJobType('Java')
|
|
|
+ setCurrentForm(JavaDataForm)
|
|
|
+ }
|
|
|
+ else if (value === "python") {
|
|
|
+ setJaIsShow('none')
|
|
|
setDagIsShow('none')
|
|
|
setPyIsShow('block')
|
|
|
- } else if (value === 'Dag') {
|
|
|
- setJsIsShow('none')
|
|
|
+ setCurrentJobType('Python')
|
|
|
+ setCurrentForm(PythonDataForm)
|
|
|
+
|
|
|
+ }
|
|
|
+ else if (value === "DAG") {
|
|
|
+ setJaIsShow('none')
|
|
|
setDagIsShow('block')
|
|
|
setPyIsShow('none')
|
|
|
+ setCurrentJobType('Dag')
|
|
|
+ setCurrentForm(ConfigDataForm)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -212,287 +292,480 @@ export default function JobCreate() {
|
|
|
setCurrentStep(currentStep + num)
|
|
|
}
|
|
|
|
|
|
+ //提交DAG
|
|
|
+ const DagSubmit = async () => {
|
|
|
+ const data = await createJob({...ConfigDataForm.getFieldValue(),'script_file': '', 'type': currentJobType, 'dag_uuid': 'test', 'user_id': 'test', 'project_id': 'test', 'image_url': 'test', 'relation_list': []})
|
|
|
+ }
|
|
|
+
|
|
|
//下一步
|
|
|
const nextStep = () => {
|
|
|
- changeStep(1)
|
|
|
+ currentForm.validateFields().then(() => {
|
|
|
+ // finishSubmit()
|
|
|
+ changeStep(1)
|
|
|
+ console.log('Successfully');
|
|
|
+
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log(err,currentForm.getFieldValue());
|
|
|
+ message.error('请检查表单数据是否完整')
|
|
|
+ })
|
|
|
+ if (currentStep === 2) {
|
|
|
+ DagSubmit()
|
|
|
+ navigate(-1)
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
useEffect(() => {
|
|
|
switch (currentStep) {
|
|
|
case 0:
|
|
|
- setCurrentForm(drawDataForm)
|
|
|
- console.log(drawDataForm)
|
|
|
+ setCurrentForm(ConfigDataForm)
|
|
|
+ console.log(ConfigDataForm.getFieldValue());
|
|
|
+ break
|
|
|
+ case 1:
|
|
|
+ setCurrentForm(InputDataForm)
|
|
|
+ break
|
|
|
+ case 2:
|
|
|
+ setCurrentForm(OutputDataForm)
|
|
|
break
|
|
|
default:
|
|
|
break
|
|
|
}
|
|
|
- }, [currentStep])
|
|
|
+ getJobType()
|
|
|
+ bus.on('DAGSend', data => {
|
|
|
+ console.log('-----------09090---------------------');
|
|
|
+ console.log(data);
|
|
|
+ setDagData(data)
|
|
|
+ })
|
|
|
+ bus.emit('DAGSend',dagData)
|
|
|
+ },[currentStep])
|
|
|
+
|
|
|
+ //获取作业类型和分类
|
|
|
+ const getJobType = async () => {
|
|
|
+ const JobTypes = await getJobTypes('作业类型')
|
|
|
+ const JobTags = await getJobTypes('作业分类')
|
|
|
+ if (JobTypes.data.length !== 0) {
|
|
|
+ setJobTypeOptions(JobTypes.data.data.map(item => {
|
|
|
+ return {
|
|
|
+ label: item,
|
|
|
+ value: item
|
|
|
+ }
|
|
|
+ }))
|
|
|
+ setJobTags(JobTags.data.data)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const finishSubmit = async () => {
|
|
|
+ console.log(currentForm.getFieldValue());
|
|
|
+ const params = {...currentForm.getFieldValue(), 'type': currentJobType, 'dag_uuid': 'test', 'user_id': 'test', 'project_id': 'test', 'dag_url': 'test', 'image_url': 'test', 'relation_list': []}
|
|
|
+ console.log(params);
|
|
|
+ await createJob(params)
|
|
|
+ navigate(-1)
|
|
|
+ }
|
|
|
+
|
|
|
+ //java or python提交
|
|
|
+ const JaPySubmit = () => {
|
|
|
+ console.log(currentJobType)
|
|
|
+ const Jay = JavaDataForm.getFieldValue()
|
|
|
+ currentForm.validateFields().then(() => {
|
|
|
+ console.log(currentForm.getFieldValue());
|
|
|
+ finishSubmit()
|
|
|
+ console.log('Successfully');
|
|
|
+
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ message.error('请检查表单数据是否完整')
|
|
|
+ console.log(err);
|
|
|
+ })
|
|
|
+ // bus.emit('sendDataForm',{
|
|
|
+ // Jay,
|
|
|
+ // })
|
|
|
+ }
|
|
|
+ const cancel = () => {
|
|
|
+ navigate(-1)
|
|
|
+ }
|
|
|
return (
|
|
|
<JobCre>
|
|
|
- <CreContent>
|
|
|
- <div className="choseJob">
|
|
|
- <div className="creTitle">
|
|
|
- <div className="bluetTitle" />
|
|
|
- <span className="creText">配置作业类型</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- {/* 作业类型选择 */}
|
|
|
- <Form {...layout} form={form} name="control-hooks">
|
|
|
- <FormItem
|
|
|
- name="type
|
|
|
+ <div>
|
|
|
+ <header style={{
|
|
|
+ height: '40px',
|
|
|
+ fontSize: '14px',
|
|
|
+ paddingLeft: '24px',
|
|
|
+ lineHeight: '40px',
|
|
|
+ backgroundColor: 'white',
|
|
|
+ marginBottom: '16px',
|
|
|
+ }}>
|
|
|
+ <span>
|
|
|
+ 作业列表
|
|
|
+ </span>
|
|
|
+ </header>
|
|
|
+ </div>
|
|
|
+ <CreContent>
|
|
|
+ <div className="choseJob">
|
|
|
+ <div className='creTitle'>
|
|
|
+ <div className='bluetTitle' />
|
|
|
+ <span className='creText'>配置作业类型</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 作业类型选择 */}
|
|
|
+ <Form {...layout} form={form} name="control-hooks" >
|
|
|
+ <FormItem
|
|
|
+ name="type
|
|
|
"
|
|
|
- label="选择作业类型"
|
|
|
- rules={[
|
|
|
- {
|
|
|
- required: true,
|
|
|
- },
|
|
|
- ]}>
|
|
|
- <Select
|
|
|
- placeholder="请选择作业类型..."
|
|
|
- onChange={onGenderChange}
|
|
|
- allowClear
|
|
|
- value={value}>
|
|
|
- <Option value="Java">Java</Option>
|
|
|
- <Option value="Python">Python</Option>
|
|
|
- <Option value="Dag">Dag</Option>
|
|
|
- </Select>
|
|
|
- </FormItem>
|
|
|
- </Form>
|
|
|
- </div>
|
|
|
- <div className="DagInfo" style={{ display: DagIsShow }}>
|
|
|
- <Steps labelPlacement="vertical" size="small" current={currentStep}>
|
|
|
- <Step title="步骤1: 配置作业信息" />
|
|
|
- <Step title="步骤2: 定义输入数据源" />
|
|
|
- <Step title="步骤3: 定义输出数据源" />
|
|
|
- </Steps>
|
|
|
- <div className="creTitle">
|
|
|
- <div className="bluetTitle" />
|
|
|
- <span className="creText">配置作业信息</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- {/* 配置Dag作业信息 */}
|
|
|
-
|
|
|
- {/* 第一步 */}
|
|
|
- {currentStep === 0 && <JobStepOne drawDataForm={drawDataForm} />}
|
|
|
-
|
|
|
- {/* 第二步 */}
|
|
|
- {currentStep === 1 && <JobStepTwo />}
|
|
|
-
|
|
|
- <Space style={{ margin: '20px' }}>
|
|
|
- <Button
|
|
|
- onClick={() => {
|
|
|
- changeStep(-1)
|
|
|
- }}>
|
|
|
- 上一步
|
|
|
+ label="选择作业类型"
|
|
|
+ rules={[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ <Select
|
|
|
+ placeholder="请选择作业类型..."
|
|
|
+ onSelect={onGenderChange}
|
|
|
+ value = {value}
|
|
|
+ options={jobTypeOptions}
|
|
|
+ />
|
|
|
+ </FormItem>
|
|
|
+ </Form>
|
|
|
+ </div>
|
|
|
+ <div className="DagInfo" style={{display: DagIsShow}}>
|
|
|
+ <Steps labelPlacement="vertical" size="small" current={currentStep}>
|
|
|
+ <Step title="步骤1: 配置作业信息" />
|
|
|
+ <Step title="步骤2: 定义输入数据源" />
|
|
|
+ <Step title="步骤3: 定义输出数据源" />
|
|
|
+ </Steps>
|
|
|
+ <div className='creTitle'>
|
|
|
+ <div className='bluetTitle' />
|
|
|
+ <span className='creText'>配置作业信息</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 配置Dag作业信息 */}
|
|
|
+
|
|
|
+ {/* 第一步 */}
|
|
|
+ {currentStep === 0 && (
|
|
|
+ <JobStepOne
|
|
|
+ ConfigDataForm={ConfigDataForm}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+
|
|
|
+ {/* 第二步 */}
|
|
|
+ {currentStep === 1 && (
|
|
|
+ <JobStepTwo
|
|
|
+ InputDataForm={InputDataForm}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+
|
|
|
+ {/* 第三步 */}
|
|
|
+ {currentStep === 2 && (
|
|
|
+ <JobStepThree
|
|
|
+ OutputDataForm={OutputDataForm}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+
|
|
|
+ <Space style={{ margin: '20px' }}>
|
|
|
+ <Button onClick={
|
|
|
+ () => {
|
|
|
+ if (currentStep !== 0) {
|
|
|
+ changeStep(-1)
|
|
|
+ } else {
|
|
|
+ navigate(-1)
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ >{currentStep === 0 ? '取消' : '上一步'}</Button>
|
|
|
+ <Button type="primary" onClick={nextStep}>{currentStep === 2 ? '提交' : '下一步'}</Button>
|
|
|
+ </Space>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ {/* 配置Java作业信息 */}
|
|
|
+ <div className="JaPyInfo" style={{display: JaIsShow}}>
|
|
|
+ <div className='creTitle'>
|
|
|
+ <div className='bluetTitle' />
|
|
|
+ <span className='creText'>配置作业信息</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 输入作业名称 */}
|
|
|
+ <Form {...layout} form={JavaDataForm} name="control-hooks" >
|
|
|
+ <FormItem
|
|
|
+ name="name"
|
|
|
+ label="作业名称"
|
|
|
+ className="JobName"
|
|
|
+ rules={[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入作业名称'
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ <Input
|
|
|
+ placeholder="请输入作业名称..."
|
|
|
+ allowClear
|
|
|
+ >
|
|
|
+ </Input>
|
|
|
+ </FormItem>
|
|
|
+
|
|
|
+ {/* 选择作业分类 */}
|
|
|
+ <FormItem
|
|
|
+ shouldUpdate
|
|
|
+ name="tag"
|
|
|
+ label="作业分类"
|
|
|
+ className="JobName"
|
|
|
+ rules={[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请选择作业分类',
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ <Select
|
|
|
+ placeholder="请选择作业分类..."
|
|
|
+ allowClear
|
|
|
+ dropdownRender={(menu) => (
|
|
|
+ <>
|
|
|
+ {menu}
|
|
|
+ <Divider
|
|
|
+ style={{
|
|
|
+ margin: '8px 0',
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <Space
|
|
|
+ style={{
|
|
|
+ padding: '0 8px 4px',
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Input
|
|
|
+ placeholder="添加作业分类"
|
|
|
+ ref={JobTagInputRef}
|
|
|
+ value={tagName}
|
|
|
+ onChange={onNameChange}
|
|
|
+ />
|
|
|
+ <Button type="text" icon={<PlusOutlined />} onClick={addTagItem}>
|
|
|
+ 添加分类
|
|
|
+ </Button>
|
|
|
+ </Space>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ >
|
|
|
+ {jobTags.map((item) => (
|
|
|
+ <Option key={item}>{item}</Option>
|
|
|
+ ))
|
|
|
+ }
|
|
|
+ </Select>
|
|
|
+ </FormItem>
|
|
|
+
|
|
|
+ {/* 选择执行镜像 */}
|
|
|
+ <FormItem
|
|
|
+ className='mirrorLeft MMir'
|
|
|
+ name="dag_url"
|
|
|
+ label="配置执行的镜像"
|
|
|
+ rules={[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请选择配置执行的镜像',
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ <Select
|
|
|
+ placeholder="请选择镜像..."
|
|
|
+ allowClear
|
|
|
+ >
|
|
|
+ <Option value="/test/images/example">/test/images/example</Option>
|
|
|
+ </Select>
|
|
|
+ </FormItem>
|
|
|
+
|
|
|
+ {/* 选择执行的Java脚本 */}
|
|
|
+ <FormItem
|
|
|
+ className='mirrorLeft choseJa script_file'
|
|
|
+ label="配置执行的Java脚本"
|
|
|
+ name="script_file"
|
|
|
+ rules={[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请选择配置执行的Java脚本',
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ <RadioGroup onChange={onChange} value={value}>
|
|
|
+ <Space direction="vertical" className='jsSel'>
|
|
|
+ <Radio value={'fromList'}>
|
|
|
+ <Select
|
|
|
+ placeholder="在工作目录中选择"
|
|
|
+ allowClear
|
|
|
+ className='javaSelect'
|
|
|
+ disabled={value === 'fromList' ? false : true}
|
|
|
+ >
|
|
|
+ <Option value="/test/scripts/example">/test/scripts/example</Option>
|
|
|
+ </Select>
|
|
|
+ </Radio>
|
|
|
+
|
|
|
+ <Radio value={'fromLocal'}>
|
|
|
+ <Upload {...UpProps}>
|
|
|
+ <Button
|
|
|
+ disabled={value === 'fromLocal' ? false : true}
|
|
|
+ className='upButton'>
|
|
|
+ 本地上传
|
|
|
</Button>
|
|
|
- <Button type="primary" onClick={nextStep}>
|
|
|
- 下一步
|
|
|
+ </Upload>
|
|
|
+ </Radio>
|
|
|
+ </Space>
|
|
|
+ </RadioGroup>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem>
|
|
|
+ <div className="JaPySubmit">
|
|
|
+ <div className="Cancel">
|
|
|
+ <Button onClick={cancel}>取消</Button>
|
|
|
+ </div>
|
|
|
+ <div className="Submit">
|
|
|
+ <Button onClick={JaPySubmit}>提交</Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </FormItem>
|
|
|
+ </Form>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 配置Python作业信息 */}
|
|
|
+ <div className="JaPyInfo" style={{display: PyIsShow}}>
|
|
|
+ <div className='creTitle'>
|
|
|
+ <div className='bluetTitle' />
|
|
|
+ <span className='creText'>配置作业信息</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 输入作业名称 */}
|
|
|
+ <Form {...layout} form={PythonDataForm} name="control-hooks" >
|
|
|
+ <FormItem
|
|
|
+ name="name"
|
|
|
+ label="作业名称"
|
|
|
+ className="JobName"
|
|
|
+ rules={[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入作业名称'
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ <Input
|
|
|
+ placeholder="请输入作业名称..."
|
|
|
+ allowClear
|
|
|
+ >
|
|
|
+ </Input>
|
|
|
+ </FormItem>
|
|
|
+ {/* 选择作业分类 */}
|
|
|
+ <FormItem
|
|
|
+ name="tag"
|
|
|
+ label="作业分类"
|
|
|
+ className='JobName'
|
|
|
+ rules={[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请选则作业分类'
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ <Select
|
|
|
+ placeholder="请选择作业分类..."
|
|
|
+ allowClear
|
|
|
+ dropdownRender={(menu) => (
|
|
|
+ <>
|
|
|
+ {menu}
|
|
|
+ <Divider
|
|
|
+ style={{
|
|
|
+ margin: '8px 0',
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <Space
|
|
|
+ style={{
|
|
|
+ padding: '0 8px 4px',
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Input
|
|
|
+ placeholder="添加作业分类"
|
|
|
+ ref={JobTagInputRef}
|
|
|
+ value={tagName}
|
|
|
+ onChange={onNameChange}
|
|
|
+ />
|
|
|
+ <Button type="text" icon={<PlusOutlined />} onClick={addTagItem}>
|
|
|
+ 添加分类
|
|
|
</Button>
|
|
|
</Space>
|
|
|
- </div>
|
|
|
-
|
|
|
- {/* 配置Js作业信息 */}
|
|
|
- <div className="JsPyInfo" style={{ display: JsIsShow }}>
|
|
|
- <div className="creTitle">
|
|
|
- <div className="bluetTitle" />
|
|
|
- <span className="creText">配置作业信息</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- {/* 输入作业名称 */}
|
|
|
- <Form {...layout} form={form} name="control-hooks">
|
|
|
- <FormItem
|
|
|
- name="JsJobName
|
|
|
- "
|
|
|
- label="作业名称"
|
|
|
- rules={[
|
|
|
- {
|
|
|
- required: true,
|
|
|
- },
|
|
|
- ]}>
|
|
|
- <Input placeholder="请输入作业名称..." allowClear></Input>
|
|
|
- </FormItem>
|
|
|
- </Form>
|
|
|
-
|
|
|
- {/* 选择作业分类 */}
|
|
|
- <Form {...layout} form={form} name="control-hooks">
|
|
|
- <FormItem
|
|
|
- name="JsJobSort
|
|
|
- "
|
|
|
- label="作业分类"
|
|
|
- rules={[
|
|
|
- {
|
|
|
- required: true,
|
|
|
- },
|
|
|
- ]}>
|
|
|
- <Select placeholder="请选择作业分类..." allowClear>
|
|
|
- <Option value="Java">Java</Option>
|
|
|
- <Option value="Python">Python</Option>
|
|
|
- <Option value="Dag">Dag</Option>
|
|
|
- </Select>
|
|
|
- </FormItem>
|
|
|
- </Form>
|
|
|
-
|
|
|
- {/* 选择执行镜像 */}
|
|
|
- <Form {...layout} form={form} name="control-hooks">
|
|
|
- <FormItem
|
|
|
- className="mirrorLeft"
|
|
|
- name="JsMirror
|
|
|
- "
|
|
|
- label="配置执行的镜像"
|
|
|
- rules={[
|
|
|
- {
|
|
|
- required: true,
|
|
|
- },
|
|
|
- ]}>
|
|
|
- <Select placeholder="请选择镜像..." allowClear>
|
|
|
- <Option value="Java">Java</Option>
|
|
|
- <Option value="Python">Python</Option>
|
|
|
- <Option value="Dag">Dag</Option>
|
|
|
- </Select>
|
|
|
- </FormItem>
|
|
|
- </Form>
|
|
|
-
|
|
|
- {/* 选择执行的Java脚本 */}
|
|
|
- <Form
|
|
|
- {...layout}
|
|
|
- form={form}
|
|
|
- name="control-hooks"
|
|
|
- className="choseJs">
|
|
|
- <FormItem
|
|
|
- className="mirrorLeft"
|
|
|
- label="配置执行的Java脚本"
|
|
|
- name="JsScripter"
|
|
|
- rules={[
|
|
|
- {
|
|
|
- required: true,
|
|
|
- },
|
|
|
- ]}>
|
|
|
- <RadioGroup onChange={onChange} value={value}>
|
|
|
- <Space direction="vertical" className="jsSel">
|
|
|
- <Radio value={1}>
|
|
|
- <Select
|
|
|
- placeholder="在工作目录中选择"
|
|
|
- allowClear
|
|
|
- className="javaSelect"
|
|
|
- disabled={value === 1 ? false : true}>
|
|
|
- <Option value="Java">Java</Option>
|
|
|
- <Option value="Python">Python</Option>
|
|
|
- <Option value="Dag">Dag</Option>
|
|
|
- </Select>
|
|
|
- </Radio>
|
|
|
-
|
|
|
- <Radio value={4}>
|
|
|
- <Upload {...UpProps}>
|
|
|
- <Button className="upButton">本地上传</Button>
|
|
|
- </Upload>
|
|
|
- </Radio>
|
|
|
- </Space>
|
|
|
- </RadioGroup>
|
|
|
- </FormItem>
|
|
|
- </Form>
|
|
|
- </div>
|
|
|
-
|
|
|
- {/* 配置Python作业信息 */}
|
|
|
- <div className="JsPyInfo" style={{ display: PyIsShow }}>
|
|
|
- <div className="creTitle">
|
|
|
- <div className="bluetTitle" />
|
|
|
- <span className="creText">配置作业信息</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- {/* 输入作业名称 */}
|
|
|
- <Form {...layout} form={form} name="control-hooks">
|
|
|
- <FormItem
|
|
|
- name="PyJobName
|
|
|
- "
|
|
|
- label="作业名称"
|
|
|
- rules={[
|
|
|
- {
|
|
|
- required: true,
|
|
|
- },
|
|
|
- ]}>
|
|
|
- <Input placeholder="请输入作业名称..." allowClear></Input>
|
|
|
- </FormItem>
|
|
|
- </Form>
|
|
|
-
|
|
|
- {/* 选择作业分类 */}
|
|
|
- <Form {...layout} form={form} name="control-hooks">
|
|
|
- <FormItem
|
|
|
- name="PyJobSort
|
|
|
- "
|
|
|
- label="作业分类"
|
|
|
- rules={[
|
|
|
- {
|
|
|
- required: true,
|
|
|
- },
|
|
|
- ]}>
|
|
|
- <Select placeholder="请选择作业分类..." allowClear>
|
|
|
- <Option value="Java">Java</Option>
|
|
|
- <Option value="Python">Python</Option>
|
|
|
- <Option value="Dag">Dag</Option>
|
|
|
- </Select>
|
|
|
- </FormItem>
|
|
|
- </Form>
|
|
|
-
|
|
|
- {/* 选择执行镜像 */}
|
|
|
- <Form {...layout} form={form} name="control-hooks">
|
|
|
- <FormItem
|
|
|
- className="mirrorLeft"
|
|
|
- name="PyMirror
|
|
|
- "
|
|
|
- label="配置执行的镜像"
|
|
|
- rules={[
|
|
|
- {
|
|
|
- required: true,
|
|
|
- },
|
|
|
- ]}>
|
|
|
- <Select placeholder="请选择镜像..." allowClear>
|
|
|
- <Option value="Java">Java</Option>
|
|
|
- <Option value="Python">Python</Option>
|
|
|
- <Option value="Dag">Dag</Option>
|
|
|
- </Select>
|
|
|
- </FormItem>
|
|
|
- </Form>
|
|
|
-
|
|
|
- {/* 选择执行的Java脚本 */}
|
|
|
- <Form
|
|
|
- {...layout}
|
|
|
- form={form}
|
|
|
- name="control-hooks"
|
|
|
- className="choseJs">
|
|
|
- <FormItem
|
|
|
- className="mirrorLeft"
|
|
|
- label="配置执行的Java脚本"
|
|
|
- name="PyScripter"
|
|
|
- rules={[
|
|
|
- {
|
|
|
- required: true,
|
|
|
- },
|
|
|
- ]}>
|
|
|
- <RadioGroup onChange={onChange} value={value}>
|
|
|
- <Space direction="vertical" className="jsSel">
|
|
|
- <Radio value={1}>
|
|
|
- <Select
|
|
|
- placeholder="在工作目录中选择"
|
|
|
- allowClear
|
|
|
- className="javaSelect"
|
|
|
- disabled={value === 1 ? false : true}>
|
|
|
- <Option value="Java">Java</Option>
|
|
|
- <Option value="Python">Python</Option>
|
|
|
- <Option value="Dag">Dag</Option>
|
|
|
- </Select>
|
|
|
- </Radio>
|
|
|
-
|
|
|
- <Radio value={2}>
|
|
|
- <Upload {...UpProps}>
|
|
|
- <Button className="upButton">本地上传</Button>
|
|
|
- </Upload>
|
|
|
- </Radio>
|
|
|
- </Space>
|
|
|
- </RadioGroup>
|
|
|
- </FormItem>
|
|
|
- </Form>
|
|
|
- </div>
|
|
|
- </CreContent>
|
|
|
- </JobCre>
|
|
|
- )
|
|
|
-}
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ >
|
|
|
+ {jobTags.map((item) => (
|
|
|
+ <Option key={item}>{item}</Option>
|
|
|
+ ))
|
|
|
+ }
|
|
|
+ </Select>
|
|
|
+ </FormItem>
|
|
|
+ {/* 选择执行镜像 */}
|
|
|
+ <FormItem
|
|
|
+ className='mirrorLeft MMir'
|
|
|
+ name="dag_url "
|
|
|
+ label="配置执行的镜像"
|
|
|
+ rules={[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请配置执行的镜像'
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ <Select
|
|
|
+ placeholder="请选择镜像..."
|
|
|
+ allowClear
|
|
|
+ >
|
|
|
+ <Option value="test">test</Option>
|
|
|
+ </Select>
|
|
|
+ </FormItem>
|
|
|
+
|
|
|
+ {/* 选择执行的Java脚本 */}
|
|
|
+ <FormItem
|
|
|
+ className='mirrorLeft choseJa script_file'
|
|
|
+ label="配置执行的Java脚本"
|
|
|
+ name="script_file"
|
|
|
+ rules={[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请配置执行的Java脚本'
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ <RadioGroup onChange={onChange} value={value} className='PyScript_file'>
|
|
|
+ <Space direction="vertical">
|
|
|
+ <Radio value={'fromList'}>
|
|
|
+ <Select
|
|
|
+ placeholder="在工作目录中选择"
|
|
|
+ allowClear
|
|
|
+ className='javaSelect'
|
|
|
+ disabled={value === 'fromList' ? false : true}
|
|
|
+ >
|
|
|
+ <Option value="test">test</Option>
|
|
|
+ </Select>
|
|
|
+ </Radio>
|
|
|
+ <Radio value={'fromLocal'}>
|
|
|
+ <Upload {...UpProps}>
|
|
|
+ <Button
|
|
|
+ className='upButton'
|
|
|
+ disabled={value === 'fromLocal' ? false : true}>
|
|
|
+ 本地上传
|
|
|
+ </Button>
|
|
|
+ </Upload>
|
|
|
+ </Radio>
|
|
|
+ </Space>
|
|
|
+ </RadioGroup>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem>
|
|
|
+ <div className="JaPySubmit">
|
|
|
+ <div className="Cancel">
|
|
|
+ <Button onClick={cancel}>取消</Button>
|
|
|
+ </div>
|
|
|
+ <div className="Submit">
|
|
|
+ <Button onClick={JaPySubmit}>提交</Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </FormItem>
|
|
|
+ </Form>
|
|
|
+ </div>
|
|
|
+ </CreContent>
|
|
|
+ </JobCre>
|
|
|
+ );
|
|
|
+};
|
Alkuttt