refactor training job code

- fix typo
- use map instead for
- remove unnecessary code

Issue-ID: AIMLFW-224
Change-Id: I1209ebc12bd9dcad860e6d99189f71d2cab64d57
Signed-off-by: KwonYongHyun <a48209952@gmail.com>

diff --git a/src/components/home/form/CreateOrEditTrainingJobForm.js b/src/components/home/form/CreateOrEditTrainingJobForm.js
index 4938cb4..c71b673 100644 (file)
--- a/src/components/home/form/CreateOrEditTrainingJobForm.js
+++ b/src/components/home/form/CreateOrEditTrainingJobForm.js
@@ -526,7 +526,7 @@ class CreateTrainingJob extends React.Component {
   }
 
   getIntOrStringValue(inputValue) {
-    //BUG: value 12.5 coverted to 12
+    //BUG: value 12.5 converted to 12
 
     this.logger('Before changing in getIntOrStringValue: ', inputValue);
     var value = parseInt(inputValue);
@@ -537,173 +537,12 @@ class CreateTrainingJob extends React.Component {
     return value;
   }
 
-  handleModelNameChange = event => {
-    this.setState(
-      {
-        modelName: event.target.value,
-      },
-      () => {
-        this.logger('after set state, modelName: ', this.state.modelName);
-      },
-    );
-  };
-
-  handleModelVersionChange = event => {
-    this.setState(
-      {
-        modelVersion: event.target.value,
-      },
-      () => {
-        this.logger('after set state, modelVersion: ', this.state.modelVersion);
-      },
-    );
-  };
-
-  handleTrainingConfigDescriptionChange = event => {
-    this.setState(
-      {
-        trainingConfigDescription: event.target.value,
-      },
-      () => {
-        this.logger('after set state, trainingConfigDescription: ', this.state.trainingConfigDescription);
-      },
-    );
-  };
-
-  handleFeatureGroupNamesChange = event => {
-    this.setState(
-      {
-        featureGroupName: event.target.value,
-      },
-      () => {
-        this.logger('after set state, FeatureGroup Name: ', this.state.featureGroupName);
-      },
-    );
-  };
-
-  handleQueryFilterChange = event => {
-    this.setState(
-      {
-        queryFilter: event.target.value,
-      },
-      () => {
-        this.logger('after set state, queryFilter: ', this.state.queryFilter);
-      },
-    );
-  };
-
-  handleArgumentsChange = event => {
-    this.setState(
-      {
-        arguments: event.target.value,
-      },
-      () => {
-        this.logger('after set state, arguments: ', this.state.arguments);
-      },
-    );
-  };
-
-  handleTrainingPipelineNameChange = event => {
-    this.setState(
-      {
-        trainingPipelineName: event.target.value,
-      },
-      () => {
-        this.logger('after set state, trainingPipelineName: ', this.state.trainingPipelineName);
-      },
-    );
-  };
-
-  handleTrainingPipelineVersionChange = event => {
-    this.setState(
-      {
-        trainingPipelineVersion: event.target.value,
-      },
-      () => {
-        this.logger('after set state, trainingPipelineVersion: ', this.state.trainingPipelineVersion);
-      },
-    );
-  };
-
-  handleRetrainingPipelineNameChange = event => {
-    this.setState(
-      {
-        retrainingPipelineName: event.target.value,
-      },
-      () => {
-        this.logger('after set state, retrainingPipelineName: ', this.state.retrainingPipelineName);
-      },
-    );
-  };
-
-  handleRetrainingPipelineVersionChange = event => {
-    this.setState(
-      {
-        retrainingPipelineVersion: event.target.value,
-      },
-      () => {
-        this.logger('after set state, retrainingPipelineVersion: ', this.state.retrainingPipelineVersion);
-      },
-    );
-  };
-
-  handleTrainingDatasetChange = event => {
-    this.setState(
-      {
-        trainingDataset: event.target.value,
-      },
-      () => {
-        this.logger('after set state, trainingDataset: ', this.state.trainingDataset);
-      },
-    );
-  };
-
-  handleValidationDatasetChange = event => {
-    this.setState(
-      {
-        validationDataset: event.target.value,
-      },
-      () => {
-        this.logger('after set state, validationDataset: ', this.state.validationDataset);
-      },
-    );
-  };
-
-  handleNotificationUrlChange = event => {
-    this.setState(
-      {
-        notificationUrl: event.target.value,
-      },
-      () => {
-        this.logger('after set state, notificationUrl: ', this.state.notificationUrl);
-      },
-    );
-  };
-
-  handleConsumerRappIdChange = event => {
-    this.setState(
-      {
-        consumerRappId: event.target.value,
-      },
-      () => {
-        this.logger('after set state, consumerRappId: ', this.state.consumerRappId);
-      },
-    );
-  };
-
-  handleProducerRappIdChange = event => {
-    this.setState(
-      {
-        producerRappId: event.target.value,
-      },
-      () => {
-        this.logger('after set state, producerRappId: ', this.state.producerRappId);
-      },
-    );
+  handleInputChange = (fieldName) => (event) => {
+    this.setState({ [fieldName]: event.target.value }, () => {
+      this.logger(`after set state, ${fieldName}: `, this.state[fieldName]);
+    });
   };
 
-
-
   resetFrom = () => {
     this.setState({
       modelName: '',
@@ -741,7 +580,7 @@ class CreateTrainingJob extends React.Component {
             <Form.Control
               type='text'
               value={this.state.modelName}
-              onChange={this.handleModelNameChange}
+              onChange={this.handleInputChange('modelName')}
               placeholder=''
               required
             />
@@ -751,7 +590,7 @@ class CreateTrainingJob extends React.Component {
             <Form.Control
               type='text'
               value={this.state.modelVersion}
-              onChange={this.handleModelVersionChange}
+              onChange={this.handleInputChange('modelVersion')}
               placeholder=''
               required
             />
@@ -762,7 +601,7 @@ class CreateTrainingJob extends React.Component {
             <Form.Control
               type='text'
               value={this.state.trainingConfigDescription}
-              onChange={this.handleTrainingConfigDescriptionChange}
+              onChange={this.handleInputChange('trainingConfigDescription')}
               placeholder=''
             />
           </Form.Group>
@@ -772,7 +611,7 @@ class CreateTrainingJob extends React.Component {
               as='select'
               required
               value={this.state.featureGroupName}
-              onChange={this.handleFeatureGroupNamesChange}
+              onChange={this.handleInputChange('featureGroupName')}
             >
               <option key='' value='' disabled>
                 {' '}
@@ -790,13 +629,13 @@ class CreateTrainingJob extends React.Component {
             <Form.Control
               type='text'
               value={this.state.queryFilter}
-              onChange={this.handleQueryFilterChange}
+              onChange={this.handleInputChange('queryFilter')}
               placeholder=''
             />
           </Form.Group>
           <Form.Group controlId='arguments'>
             <Form.Label>Data Pipeline Arguments</Form.Label>
-            <Form.Control type='text' value={this.state.arguments} onChange={this.handleArgumentsChange} placeholder='' />
+            <Form.Control type='text' value={this.state.arguments} onChange={this.handleInputChange('arguments')} placeholder='' />
           </Form.Group>
 
           <Form.Group controlId='trainingPipelineName'>
@@ -804,7 +643,7 @@ class CreateTrainingJob extends React.Component {
             <Form.Control
               type='text'
               value={this.state.trainingPipelineName}
-              onChange={this.handleTrainingPipelineNameChange}
+              onChange={this.handleInputChange('trainingPipelineName')}
               placeholder=''
             />
           </Form.Group>
@@ -813,7 +652,7 @@ class CreateTrainingJob extends React.Component {
             <Form.Control
               type='text'
               value={this.state.trainingPipelineVersion}
-              onChange={this.handleTrainingPipelineVersionChange}
+              onChange={this.handleInputChange('trainingPipelineVersion')}
               placeholder=''
             />
           </Form.Group>
@@ -822,7 +661,7 @@ class CreateTrainingJob extends React.Component {
             <Form.Control
               type='text'
               value={this.state.retrainingPipelineName}
-              onChange={this.handleRetrainingPipelineNameChange}
+              onChange={this.handleInputChange('retrainingPipelineName')}
               placeholder=''
             />
           </Form.Group>
@@ -831,7 +670,7 @@ class CreateTrainingJob extends React.Component {
             <Form.Control
               type='text'
               value={this.state.retrainingPipelineVersion}
-              onChange={this.handleRetrainingPipelineVersionChange}
+              onChange={this.handleInputChange('retrainingPipelineVersion')}
               placeholder=''
             />
           </Form.Group>
@@ -841,7 +680,7 @@ class CreateTrainingJob extends React.Component {
             <Form.Control
               type='text'
               value={this.state.trainingDataset}
-              onChange={this.handleTrainingDatasetChange}
+              onChange={this.handleInputChange('trainingDataset')}
               placeholder=''
             />
           </Form.Group>
@@ -850,7 +689,7 @@ class CreateTrainingJob extends React.Component {
             <Form.Control
               type='text'
               value={this.state.validationDataset}
-              onChange={this.handleValidationDatasetChange}
+              onChange={this.handleInputChange('validationDataset')}
               placeholder=''
             />
           </Form.Group>
@@ -859,7 +698,7 @@ class CreateTrainingJob extends React.Component {
             <Form.Control
               type='text'
               value={this.state.notificationUrl}
-              onChange={this.handleNotificationUrlChange}
+              onChange={this.handleInputChange('notificationUrl')}
               placeholder=''
             />
           </Form.Group>
@@ -868,7 +707,7 @@ class CreateTrainingJob extends React.Component {
             <Form.Control
               type='text'
               value={this.state.consumerRappId}
-              onChange={this.handleConsumerRappIdChange}
+              onChange={this.handleInputChange('consumerRappId')}
               placeholder=''
             />
           </Form.Group>
@@ -877,7 +716,7 @@ class CreateTrainingJob extends React.Component {
             <Form.Control
               type='text'
               value={this.state.producerRappId}
-              onChange={this.handleProducerRappIdChange}
+              onChange={this.handleInputChange('producerRappId')}
               placeholder=''
             />
           </Form.Group>

diff --git a/src/components/home/status/StatusPageRows.js b/src/components/home/status/StatusPageRows.js
index 035766e..02ff1cd 100644 (file)
--- a/src/components/home/status/StatusPageRows.js
+++ b/src/components/home/status/StatusPageRows.js
@@ -35,7 +35,7 @@ const StatusPageRows = props => {
   const [createPopup, setCreatePopup] = useState(false);
   const [editPopup, setEditPopup] = useState(false);
   const [versionForEditPopup, setVersionForEditPopup] = useState(null);
-  const [traingingjobNameForEditPopup, setTraingingjobNameForEditPopup] = useState(null);
+  const [trainingjobNameForEditPopup, setTrainingjobNameForEditPopup] = useState(null);
   const closeEditPopup = () => setEditPopup(false);
   const closeCreatePopup = () => setCreatePopup(false);
   const [stepsStatePopup, setStepsStatePopup] = useState(false);
@@ -56,7 +56,7 @@ const StatusPageRows = props => {
 
   useEffect(() => {
     toggleAllRowsSelected(false);
-  }, [traingingjobNameForEditPopup]);
+  }, [trainingjobNameForEditPopup]);
 
   const fetchTrainingJobs = async () => {
     logger('fetchTrainingJobs UCMgr_baseUrl', UCMgr_baseUrl);
@@ -74,12 +74,10 @@ const StatusPageRows = props => {
     console.log('handleRetrain starts..');
 
     if (selectedFlatRows.length > 0) {
-      let trainingjobNames = [];
-      for (const row of selectedFlatRows) {
-        trainingjobNames.push({
-          trainingjob_name: row.original.trainingjob_name,
-        });
-      }
+      const trainingjobNames = selectedFlatRows.map(row => ({
+        trainingjob_name: row.original.trainingjob_name,
+      }));
+
       console.log('selected trainingjobs: ', trainingjobNames);
       try {
         await invokeStartTraining(trainingjobNames);
@@ -100,24 +98,22 @@ const StatusPageRows = props => {
   const handleEdit = event => {
     if (selectedFlatRows.length === 1) {
       logger('selected training job: ', selectedFlatRows[0].original.trainingjob_name);
-      setTraingingjobNameForEditPopup(selectedFlatRows[0].original.trainingjob_name);
+      setTrainingjobNameForEditPopup(selectedFlatRows[0].original.trainingjob_name);
       setVersionForEditPopup(selectedFlatRows[0].original.version);
       setEditPopup(true);
       toggleAllRowsSelected(false);
     } else {
-      alert('please select exactly one trainingjob');
+      alert('Please select exactly one trainingjob');
     }
   };
 
   const handleDelete = async event => {
     console.log('handleDelete starts..');
     if (selectedFlatRows.length > 0) {
-      let deleteTJList = [];
-      for (const row of selectedFlatRows) {
-        let trainingjobDict = {};
-        trainingjobDict['id'] = row.original.id;
-        deleteTJList.push(trainingjobDict);
-      }
+      const deleteTJList = selectedFlatRows.map(row => ({
+        id: row.original.id,
+      }));
+
       console.log('Selected trainingjobs for deletion : ', deleteTJList);
       try {
         await deleteTrainingjobs(deleteTJList);
@@ -256,7 +252,7 @@ const StatusPageRows = props => {
       </Popup>
       <Popup show={editPopup} onHide={closeEditPopup} title='Edit usecase'>
         <CreateOrEditTrainingJobForm
-          trainingjob_name={traingingjobNameForEditPopup}
+          trainingjob_name={trainingjobNameForEditPopup}
           version={versionForEditPopup}
           isCreateTrainingJobForm={false}
           onHideEditPopup={closeEditPopup}