Integrate TrainingJob Create and Status Page

Issue-ID: AIMLFW-149

Change-Id: Ie4591fb26d61b2bc4205848f93a902f38869bbb8
Signed-off-by: Kim Do Young <difbfl4750@gmail.com>

diff --git a/src/components/home/create/CreateTrainingJob.js b/src/components/home/create/CreateTrainingJob.js
index 14505f3..789e35e 100644 (file)
--- a/src/components/home/create/CreateTrainingJob.js
+++ b/src/components/home/create/CreateTrainingJob.js
@@ -25,6 +25,7 @@ import CreateOrEditTrainingJobForm from '../form/CreateOrEditTrainingJobForm';
 class CreateTrainingJob extends React.Component {
   constructor(props) {
     super(props);
+    this.fetchTrainingJobs = this.props.fetchTrainingJobs;
     this.logger = this.props.logger;
   }
   popover = () => (
@@ -83,7 +84,11 @@ class CreateTrainingJob extends React.Component {
           </Button>
         </OverlayTrigger>
 
-        <CreateOrEditTrainingJobForm isCreateTrainingJobForm={true} logger={this.logger}></CreateOrEditTrainingJobForm>
+        <CreateOrEditTrainingJobForm
+          isCreateTrainingJobForm={true}
+          logger={this.logger}
+          fetchTrainingJobs={this.fetchTrainingJobs}
+        ></CreateOrEditTrainingJobForm>
       </>
     );
   }

diff --git a/src/components/home/status/StatusPageRows.js b/src/components/home/status/StatusPageRows.js
index 18ac2a5..783f83b 100644 (file)
--- a/src/components/home/status/StatusPageRows.js
+++ b/src/components/home/status/StatusPageRows.js
@@ -28,14 +28,17 @@ import TrainingJobInfo from './TrainingJobInfo';
 import { invokeStartTraining, deleteTrainingjobs } from './API_STATUS';
 import StepsState from './StepsState';
 import CreateOrEditTrainingJobForm from '../form/CreateOrEditTrainingJobForm';
+import CreateTrainingJob from '../create/CreateTrainingJob';
 
 const StatusPageRows = props => {
   const logger = props.logger;
   const [trainingJobs, setTrainingJobs] = useState([]);
+  const [createPopup, setCreatePopup] = useState(false);
   const [editPopup, setEditPopup] = useState(false);
   const [versionForEditPopup, setVersionForEditPopup] = useState(null);
   const [traingingjobNameForEditPopup, setTraingingjobNameForEditPopup] = useState(null);
   const closeEditPopup = () => setEditPopup(false);
+  const closeCreatePopup = () => setCreatePopup(false);
   const [stepsStatePopup, setStepsStatePopup] = useState(false);
   const [stepsStateTrainingJobAndVersion, setStepsStateTrainingJobNameAndVersion] = useState(null);
   const closeStepsStatePopup = () => setStepsStatePopup(false);
@@ -91,6 +94,10 @@ const StatusPageRows = props => {
     }
   };
 
+  const handleCreate = event => {
+    setCreatePopup(true);
+  };
+
   const handleEdit = event => {
     if (selectedFlatRows.length === 1) {
       logger('selected training job: ', selectedFlatRows[0].original.trainingjob_name);
@@ -213,6 +220,9 @@ const StatusPageRows = props => {
 
   return (
     <>
+      <Button variant='success' size='sm' onClick={e => handleCreate(e)}>
+        Create
+      </Button>{' '}
       <Button variant='success' size='sm' onClick={e => handleEdit(e)}>
         Edit
       </Button>{' '}
@@ -246,6 +256,9 @@ const StatusPageRows = props => {
           })}
         </tbody>
       </BTable>
+      <Popup show={createPopup} onHide={closeCreatePopup} title='Create Training Job' size='lg'>
+        <CreateTrainingJob logger={logger} fetchTrainingJobs={fetchTrainingJobs} />
+      </Popup>
       <Popup show={editPopup} onHide={closeEditPopup} title='Edit usecase'>
         <CreateOrEditTrainingJobForm
           trainingjob_name={traingingjobNameForEditPopup}