From 0d6684b7ddb1dd65eb594b02d6ef306dc031015f Mon Sep 17 00:00:00 2001 From: Taewan Kim Date: Fri, 26 May 2023 13:11:54 +0900 Subject: [PATCH] Block and alert against the improper inputs for Training Job name and Feature Group name Change-Id: Ib640b93b67ec81bd07c1571f3cc45ea52f88c9f9 Signed-off-by: Taewan Kim --- src/components/home/create/CreateTrainingJob.js | 8 +- src/components/home/form/CreateFeatureGroupForm.js | 20 +- .../home/form/CreateOrEditTrainingJobForm.js | 217 +++++++++++---------- 3 files changed, 128 insertions(+), 117 deletions(-) diff --git a/src/components/home/create/CreateTrainingJob.js b/src/components/home/create/CreateTrainingJob.js index 5fe3390..ec193ed 100644 --- a/src/components/home/create/CreateTrainingJob.js +++ b/src/components/home/create/CreateTrainingJob.js @@ -34,10 +34,10 @@ class CreateTrainingJob extends React.Component { Training Job Name

- Name of the Training Job.

- It must be between 3 and 63 characters long

- It can only consist of lowercase Letters and numbers -

+ Name of the Training Job.

+ It must be between 3 and 63 characters long.

+ It can only consist of Letters and numbers and underscore. +

Training Function Name

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 --- 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 --- 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) => { -- 2.16.6