Block and alert against the improper inputs for Training Job name and Feature Group...

Change-Id: Ib640b93b67ec81bd07c1571f3cc45ea52f88c9f9
Signed-off-by: Taewan Kim <t25.kim@samsung.com>

diff --git a/src/components/home/create/CreateTrainingJob.js b/src/components/home/create/CreateTrainingJob.js
index 5fe3390..ec193ed 100644 (file)
--- a/src/components/home/create/CreateTrainingJob.js
+++ b/src/components/home/create/CreateTrainingJob.js
@@ -34,10 +34,10 @@ class CreateTrainingJob extends React.Component {
       <Popover.Content>
         <strong>Training Job Name</strong> 
         <br></br>
-         Name of the Training Job. <br></br>
-         It must be between 3 and 63 characters long <br></br>
-        It can only consist of lowercase Letters and numbers
-         <br></br> 
+        Name of the Training Job. <br></br>
+        It must be between 3 and 63 characters long. <br></br>
+        It can only consist of Letters and numbers and underscore.
+        <br></br>
         <strong>Training Function Name</strong>
         <br></br>
         Select an existing training function name corresponding to a ML model

diff --git a/src/components/home/form/CreateFeatureGroupForm.js b/src/components/home/form/CreateFeatureGroupForm.js
index ceb3d08..dc34cd9 100644 (file)
--- a/src/components/home/form/CreateFeatureGroupForm.js
+++ b/src/components/home/form/CreateFeatureGroupForm.js
@@ -44,10 +44,9 @@ class CreateFeatureGroup extends React.Component {
             UCMgr_baseUrl: CONSTANTS.UCMgr_baseUrl,
         };
 
+        this.regName = new RegExp('\\W+')
         this.logger = this.props.logger;
         this.logger('Initial UCM URL, ', this.state.UCMgr_baseUrl)
-
-
     }
 
     handleCreateSubmit = event => {
@@ -68,12 +67,18 @@ class CreateFeatureGroup extends React.Component {
     }
 
     handleFGNameChange = (event) => {
-        this.setState({
-            featureGroupName: event.target.value
-        }, () => {
-            this.logger("after set state, FeatureGroup Name: ", this.state.featureGroupName);
-        })
+        if (this.regName.test(event.target.value)) {
+            event.preventDefault();
+            alert("Please use alphabet, number, and underscore to Feature Group Name.");
+        } else {
+            this.setState({
+                featureGroupName: event.target.value
+            }, () => {
+                this.logger("after set state, FeatureGroup Name: ", this.state.featureGroupName);
+            })
+        }
     }
+
     handleDmeHostChange = (event) => {
         this.setState({
             dmeHost: event.target.value
@@ -81,6 +86,7 @@ class CreateFeatureGroup extends React.Component {
             this.logger("after set state, Hostname: ", this.state.dmeHost);
         })
     }
+
     handleDmePortChange = (event) => {
         this.setState({
             dmePort: event.target.value

diff --git a/src/components/home/form/CreateOrEditTrainingJobForm.js b/src/components/home/form/CreateOrEditTrainingJobForm.js
index 13cadbb..1e183bd 100644 (file)
--- a/src/components/home/form/CreateOrEditTrainingJobForm.js
+++ b/src/components/home/form/CreateOrEditTrainingJobForm.js
@@ -48,7 +48,8 @@ class CreateTrainingJob extends React.Component {
         _measurement: '',
         bucket: ''
     };
-    
+
+    this.regName = new RegExp('\\W+')
     this.logger=this.props.logger;
         
     this.logger('Initial UCM URL, ' , this.state.UCMgr_baseUrl)
@@ -280,112 +281,111 @@ class CreateTrainingJob extends React.Component {
 
   }
 
-    handleCreateSubmit = event => {
-      this.logger('Create TrainingJob clicked: ',
-        this.state.ucName,
-        this.state.plName,
-        this.state.expName,
-        this.state.featureNames,
-        this.state.featureFilters,
-        this.state.hyparams,
-        this.state.targetName,
-        this.state.ucDescription,
-        this.state.plVerName,
-        this.state.datalakeSourceName,
-        this.state._measurement,
-        this.state.bucket
-        );
-        
-        this.invokeAddTrainingJob(event)
-        event.preventDefault();
-    }
+  handleCreateSubmit = event => {
+    this.logger('Create TrainingJob clicked: ',
+      this.state.ucName,
+      this.state.plName,
+      this.state.expName,
+      this.state.featureNames,
+      this.state.featureFilters,
+      this.state.hyparams,
+      this.state.targetName,
+      this.state.ucDescription,
+      this.state.plVerName,
+      this.state.datalakeSourceName,
+      this.state._measurement,
+      this.state.bucket
+      );
+
+      this.invokeAddTrainingJob(event)
+      event.preventDefault();
+  }
 
-    handleEditSubmit = event => {
-
-      this.logger('Edit usecase clicked: ',
-        this.state.ucName,
-        this.state.plName,
-        this.state.expName,
-        this.state.featureNames,
-        this.state.featureFilters,
-        this.state.hyparams,
-        this.state.versioning,
-        this.state.targetName,
-        this.state.ucDescription,
-        this.state.plVerName,
-        this.state.datalakeSourceName,
-        this.state._measurement,
-        this.state.bucket
-        );
+  handleEditSubmit = event => {
+
+    this.logger('Edit usecase clicked: ',
+      this.state.ucName,
+      this.state.plName,
+      this.state.expName,
+      this.state.featureNames,
+      this.state.featureFilters,
+      this.state.hyparams,
+      this.state.versioning,
+      this.state.targetName,
+      this.state.ucDescription,
+      this.state.plVerName,
+      this.state.datalakeSourceName,
+      this.state._measurement,
+      this.state.bucket
+      );
+
+      this.invokePutTrainingJob(event);
+      event.preventDefault();
+  }
 
-        this.invokePutTrainingJob(event);
+  invokeAddTrainingJob(event){
+    let hyperParamsDict = this.buildHyperparamsDict(this.state.hyparams);
+    let convertedDatalakeDBName = convertDatalakeDBName(this.state.datalakeSourceName)
+    this.logger('Add New Request is posted at ' + this.state.UCMgr_baseUrl + '/trainingjobs/' + this.state.ucName)
+    axios.post(this.state.UCMgr_baseUrl + '/trainingjobs/' + this.state.ucName,{
+      "trainingjob_name" : this.state.ucName,
+      "pipeline_name" : this.state.plName,
+      "experiment_name" : this.state.expName,
+      "feature_list": this.state.featureNames,
+      "query_filter": this.state.featureFilters,
+      "arguments" : hyperParamsDict,
+      "enable_versioning" : this.state.versioning,
+      "description" : this.state.ucDescription,
+      "pipeline_version": this.state.plVerName,
+      "datalake_source": convertedDatalakeDBName,
+      "_measurement": this.state._measurement,
+      "bucket": this.state.bucket
+    }).then(res => {
+      this.logger('UC created ', res.data)
+        this.invokeStartTrainingForCreate();
+      })
+      .catch(function (error) {
+        this.logger('Error creating Training Job', error);
+        alert("Failed: " + error.response.data.Exception)
         event.preventDefault();
-    }
+      })
+      .then(function () {
 
-invokeAddTrainingJob(event){
-  let hyperParamsDict = this.buildHyperparamsDict(this.state.hyparams);
-  let convertedDatalakeDBName = convertDatalakeDBName(this.state.datalakeSourceName)
-  this.logger('Add New Request is posted at ' + this.state.UCMgr_baseUrl + '/trainingjobs/' + this.state.ucName)
-  axios.post(this.state.UCMgr_baseUrl + '/trainingjobs/' + this.state.ucName,{
-    "trainingjob_name" : this.state.ucName,
-    "pipeline_name" : this.state.plName,
-    "experiment_name" : this.state.expName,
-    "feature_list": this.state.featureNames,
-    "query_filter": this.state.featureFilters,
-    "arguments" : hyperParamsDict,   
-    "enable_versioning" : this.state.versioning,
-    "description" : this.state.ucDescription,
-    "pipeline_version": this.state.plVerName,
-    "datalake_source": convertedDatalakeDBName,
-    "_measurement": this.state._measurement,
-    "bucket": this.state.bucket
-  }).then(res => {
-    this.logger('UC created ', res.data)
-      this.invokeStartTrainingForCreate();
-    })
-    .catch(function (error) {
-    
-      this.logger('Error creating Training Job', error);
-      alert("Failed: " + error.response.data.Exception)
-      event.preventDefault();
-    })
-    .then(function () {
-      
-    })
+      })
 
-}
+  }
 
-invokePutTrainingJob = event =>{
-  let hyperParamsDict = this.buildHyperparamsDict(this.state.hyparams);
-  let convertedDatalakeDBName = convertDatalakeDBName(this.state.datalakeSourceName);
-  axios.put(this.state.UCMgr_baseUrl + '/trainingjobs/' + this.state.ucName,{
-    "trainingjob_name" : this.state.ucName,
-    "pipeline_name" : this.state.plName,
-    "experiment_name" : this.state.expName,
-    "feature_list": this.state.featureNames,
-    "query_filter": this.state.featureFilters,
-    "arguments" : hyperParamsDict,   
-    "enable_versioning" : this.state.versioning,
-    "description" : this.state.ucDescription,
-    "pipeline_version": this.state.plVerName,
-    "datalake_source": convertedDatalakeDBName,
-    "_measurement": this.state._measurement,
-    "bucket": this.state.bucket
-    //"enable_versioning" : true
-  }).then(res => {
-    this.logger('UC created ', res.data)
-      this.invokeStartTrainingForEdit();
-    })
-    .catch(function (error) {
-      // handle error
-      this.logger('Error creating Use case', error);
-      alert("Failed: " + error.response.data.Exception)
-      event.preventDefault();
-    })
-    .then(function () {
-      // always executed
-    })
-}
+  invokePutTrainingJob = event =>{
+    let hyperParamsDict = this.buildHyperparamsDict(this.state.hyparams);
+    let convertedDatalakeDBName = convertDatalakeDBName(this.state.datalakeSourceName);
+    axios.put(this.state.UCMgr_baseUrl + '/trainingjobs/' + this.state.ucName,{
+      "trainingjob_name" : this.state.ucName,
+      "pipeline_name" : this.state.plName,
+      "experiment_name" : this.state.expName,
+      "feature_list": this.state.featureNames,
+      "query_filter": this.state.featureFilters,
+      "arguments" : hyperParamsDict,
+      "enable_versioning" : this.state.versioning,
+      "description" : this.state.ucDescription,
+      "pipeline_version": this.state.plVerName,
+      "datalake_source": convertedDatalakeDBName,
+      "_measurement": this.state._measurement,
+      "bucket": this.state.bucket
+      //"enable_versioning" : true
+    }).then(res => {
+      this.logger('UC created ', res.data)
+        this.invokeStartTrainingForEdit();
+      })
+      .catch(function (error) {
+        // handle error
+        this.logger('Error creating Use case', error);
+        alert("Failed: " + error.response.data.Exception)
+        event.preventDefault();
+      })
+      .then(function () {
+        // always executed
+      })
+  }
 
   invokeStartTrainingForCreate(event){
     this.logger('Training called ')
@@ -514,11 +514,16 @@ invokePutTrainingJob = event =>{
   }
 
   handleUCNameChange = (event) => {
-    this.setState({
-      ucName: event.target.value
-    },() => {
-      this.logger("after set state, ucName: ", this.state.ucName);
-    })
+    if (this.regName.test(event.target.value)) {
+      event.preventDefault();
+      alert("Please use alphabet, number, and underscore to Training Job Name.");
+    } else {
+      this.setState({
+        ucName: event.target.value
+      },() => {
+        this.logger("after set state, ucName: ", this.state.ucName);
+      })
+    }
   }
 
   handlePLNameChange = (event) => {