From: rajdeep11 <rajdeep.sin@samsung.com>
Date: Thu, 7 Dec 2023 17:53:39 +0000 (+0530)
Subject: gui changes for the mme
X-Git-Tag: 1.2.0~1
X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?a=commitdiff_plain;h=a3de037efcc03085557f03f0e259b7f89e74aed3;p=portal%2Faiml-dashboard.git

gui changes for the mme

Issue-Id: AIMLFW-65

Change-Id: I21d0afcb46fe85651e5ce29bf950929ad4172c85
Signed-off-by: rajdeep11 <rajdeep.sin@samsung.com>
---

diff --git a/src/components/home/form/CreateFeatureGroupForm.js b/src/components/home/form/CreateFeatureGroupForm.js
index 986defa..d4ef357 100644
--- a/src/components/home/form/CreateFeatureGroupForm.js
+++ b/src/components/home/form/CreateFeatureGroupForm.js
@@ -172,11 +172,9 @@ class CreateFeatureGroup extends React.Component {
             if (res.status === 200) {
                 alert("FeatureGroup Created")
                 this.resetForm()
-            } else {
-                this.logger("Error Occured", res)
-            }
+            } 
         })
-            .catch(function (error) {
+            .catch( (error)=> {
                 this.logger('Error creating featureGroup', error);
                 alert("Failed: " + error.response.data.Exception)
                 event.preventDefault();
diff --git a/src/components/home/form/CreateOrEditTrainingJobForm.js b/src/components/home/form/CreateOrEditTrainingJobForm.js
index 27d2b24..f89553f 100644
--- a/src/components/home/form/CreateOrEditTrainingJobForm.js
+++ b/src/components/home/form/CreateOrEditTrainingJobForm.js
@@ -20,45 +20,47 @@ import React from 'react'
 import Form from 'react-bootstrap/Form'
 import Button from 'react-bootstrap/Button'
 import axios from 'axios';
-import * as CONSTANTS from '../common/Constants' 
+import * as CONSTANTS from '../common/Constants'
 import './CreateOrEditTrainingJobForm.css'
-import {getDatalakeNameWithoutConversion, convertDatalakeDBName, convertToCommaSeparatedString} from '../common/CommonMethods'
+import { getDatalakeNameWithoutConversion, convertDatalakeDBName, convertToCommaSeparatedString } from '../common/CommonMethods'
 
 class CreateTrainingJob extends React.Component {
   constructor(props) {
     super(props);
-    
+
     this.state = {
-        ucName: '',
-        plName: '',
-        expName: '',
-        featureGroupName: '',
-        featureFilters: '',
-        hyparams: '',    
-        versioning: false,
-        ucDescription: '',
-        plList: [],
-        expList: [],
-        featureGroupList:[],
-        UCMgr_baseUrl: CONSTANTS.UCMgr_baseUrl,
-        plVerList: [],
-        plVerName: '',
-        plVerDescription: '',
-        datalakeSourceList: ["Influx DB"],
-        datalakeSourceName: '',
-        _measurement: '',
-        bucket: ''
+      ucName: '',
+      plName: '',
+      isMme: false,
+      modelName: '',
+      expName: '',
+      featureGroupName: '',
+      featureFilters: '',
+      hyparams: '',
+      versioning: false,
+      ucDescription: '',
+      plList: [],
+      expList: [],
+      featureGroupList: [],
+      UCMgr_baseUrl: CONSTANTS.UCMgr_baseUrl,
+      plVerList: [],
+      plVerName: '',
+      plVerDescription: '',
+      datalakeSourceList: ["Influx DB"],
+      datalakeSourceName: '',
+      _measurement: '',
+      bucket: ''
     };
 
     this.regName = new RegExp('\\W+')
-    this.logger=this.props.logger;
-	 
-    this.logger('Initial UCM URL, ' , this.state.UCMgr_baseUrl)
+    this.logger = this.props.logger;
+
+    this.logger('Initial UCM URL, ', this.state.UCMgr_baseUrl)
     this.logger('All env', process.env)
-    this.logger('ucm host port',process.env.REACT_APP_UCM_HOST ,process.env.REACT_APP_UCM_PORT);
-    
+    this.logger('ucm host port', process.env.REACT_APP_UCM_HOST, process.env.REACT_APP_UCM_PORT);
+
   }
-  
+
   componentDidMount() {
     this.logger("componentDidMount...");
     // this.logger(this.props.isCreateTrainingJobForm) this is true
@@ -68,64 +70,68 @@ class CreateTrainingJob extends React.Component {
       // this.fetchExperiments();
       this.fetchFeatureGroups();
 
-      if(this.state.plName !== ""){
+      if (this.state.plName !== "") {
         this.fetchPipelineVersions(this.state.plName, false);
       }
 
       let shouldChangeDatalakeSourceName = true;
-      for(const data of this.state.datalakeSourceList){
-        if(data === this.state.datalakeSourceName){
+      for (const data of this.state.datalakeSourceList) {
+        if (data === this.state.datalakeSourceName) {
           shouldChangeDatalakeSourceName = false;
           break;
         }
       }
-      if(shouldChangeDatalakeSourceName){
-        this.setState({datalakeSourceName : ''},()=>this.logger("current selected datalakeSourceName: ",this.state.datalakeSourceName));
+      if (shouldChangeDatalakeSourceName) {
+        this.setState({ datalakeSourceName: '' }, () => this.logger("current selected datalakeSourceName: ", this.state.datalakeSourceName));
       }
-      else{
-        this.logger("current selected datalakeSourceName: ",this.state.datalakeSourceName);
+      else {
+        this.logger("current selected datalakeSourceName: ", this.state.datalakeSourceName);
       }
 
     };
-
-    if(!this.props.isCreateTrainingJobForm){
+    if (!this.props.isCreateTrainingJobForm) {
       axios.get(`${CONSTANTS.UCMgr_baseUrl}/trainingjobs/${this.props.trainingjob_name}/${this.props.version}`)
-      .then(result =>{
-        this.setState({
-          ucName: result.data.trainingjob.trainingjob_name,
-          plName: result.data.trainingjob.pipeline_name,
-          expName: result.data.trainingjob.experiment_name,
-          featureGroupName: result.data.trainingjob.featuregroup_name,
-          featureFilters: result.data.trainingjob.query_filter,
-          hyparams: convertToCommaSeparatedString(result.data.trainingjob.arguments),    
-          versioning: result.data.trainingjob.enable_versioning,
-          ucDescription: result.data.trainingjob.description,
-          plList: [],
-          expList: [],
-          featureGroupList: [],
-          UCMgr_baseUrl: CONSTANTS.UCMgr_baseUrl,
-          plVerList: [],
-          plVerName: result.data.trainingjob.pipeline_version,
-          plVerDescription: '',
-          datalakeSourceList: ["Influx DB"],
-          datalakeSourceName: getDatalakeNameWithoutConversion(result.data.trainingjob.datalake_source),
-          _measurement: result.data.trainingjob._measurement,
-          bucket: result.data.trainingjob.bucket
-        }, ()=> task());
-      })
-      .catch(error =>{
-        this.logger(error);
-      }); 
+        .then(result => {
+          console.log("from result is: ", result.data.trainingjob);
+          this.setState({
+            ucName: result.data.trainingjob.trainingjob_name,
+            plName: result.data.trainingjob.pipeline_name,
+            isMme: result.data.trainingjob.is_mme,
+            modelName: result.data.trainingjob.model_name,
+            expName: result.data.trainingjob.experiment_name,
+            featureGroupName: result.data.trainingjob.feature_list,
+            featureFilters: result.data.trainingjob.query_filter,
+            hyparams: convertToCommaSeparatedString(result.data.trainingjob.arguments),
+            versioning: result.data.trainingjob.enable_versioning,
+            ucDescription: result.data.trainingjob.description,
+            plList: [],
+            expList: [],
+            featureGroupList: [],
+            UCMgr_baseUrl: CONSTANTS.UCMgr_baseUrl,
+            plVerList: [],
+            plVerName: result.data.trainingjob.pipeline_version,
+            plVerDescription: '',
+            datalakeSourceList: ["Influx DB"],
+            datalakeSourceName: getDatalakeNameWithoutConversion(result.data.trainingjob.datalake_source),
+            _measurement: result.data.trainingjob._measurement,
+            bucket: result.data.trainingjob.bucket
+          }, () => {
+            task()
+          });
+        })
+        .catch(error => {
+          this.logger(error);
+        });
     }
-    else{
+    else {
       task();
     }
   }
 
-  
+
   fetchPipelines() {
-    
-    axios.get( this.state.UCMgr_baseUrl + '/pipelines')
+
+    axios.get(this.state.UCMgr_baseUrl + '/pipelines')
       .then(res => {
         this.logger('Server reponded pl', res.data.pipeline_names)
         //setState because this is async response from axios, so re-render
@@ -135,60 +141,60 @@ class CreateTrainingJob extends React.Component {
           },
           () => {
             let shouldChangePlName = true;
-            for(const data of this.state.plList){
-              if(data === this.state.plName){
+            for (const data of this.state.plList) {
+              if (data === this.state.plName) {
                 shouldChangePlName = false;
                 break;
               }
             }
-            if(shouldChangePlName){
-              this.setState({plName : ''},()=>this.logger("current selected plName: ",this.state.plName));
+            if (shouldChangePlName) {
+              this.setState({ plName: '' }, () => this.logger("current selected plName: ", this.state.plName));
             }
-            else{
-              this.logger("current selected plName: ",this.state.plName);
+            else {
+              this.logger("current selected plName: ", this.state.plName);
             }
           }
         );
-               
+
       })
-      .catch(function (error) {
+      .catch( (error) =>{
         this.logger('Got some error' + error);
       })
       .then(function () {
       })
   }
 
-  getLatestVersion(whom){
-    if(whom === "plVerList"){
+  getLatestVersion(whom) {
+    if (whom === "plVerList") {
       let latest = "";
-      for(let version of this.state.plVerList){
-        if(isNaN(parseInt(version))){
-          if(latest === ""){
+      for (let version of this.state.plVerList) {
+        if (isNaN(parseInt(version))) {
+          if (latest === "") {
             latest = version;
           }
         }
-        else{
-          if(latest === "" || isNaN(parseInt(latest))){
-              latest = version;
+        else {
+          if (latest === "" || isNaN(parseInt(latest))) {
+            latest = version;
           }
-          else{
-            if(parseInt(latest)<parseInt(version)){
-              latest=version;
+          else {
+            if (parseInt(latest) < parseInt(version)) {
+              latest = version;
             }
           }
         }
       }
       return latest;
     }
-    else{
+    else {
       let latest = "";
-      for(let version of this.state.superModelVersionsList){
-        if(latest === ""){
+      for (let version of this.state.superModelVersionsList) {
+        if (latest === "") {
           latest = version;
         }
-        else{
-          if(parseInt(latest)<parseInt(version)){
-            latest=version;
+        else {
+          if (parseInt(latest) < parseInt(version)) {
+            latest = version;
           }
         }
       }
@@ -196,26 +202,26 @@ class CreateTrainingJob extends React.Component {
     }
   }
 
-  makingCorrectPlVerIfWrong(){
+  makingCorrectPlVerIfWrong() {
     let shouldChangePlVerName = true;
-    for(const data of this.state.plVerList){
-      if(data === this.state.plVerName){
+    for (const data of this.state.plVerList) {
+      if (data === this.state.plVerName) {
         shouldChangePlVerName = false;
         break;
       }
     }
-    if(shouldChangePlVerName){
-      this.setState({plVerName : ''},()=>this.logger("current selected plVerName: ",this.state.plVerName));
+    if (shouldChangePlVerName) {
+      this.setState({ plVerName: '' }, () => this.logger("current selected plVerName: ", this.state.plVerName));
     }
-    else{
-      this.logger("current selected plVerName: ",this.state.plVerName);
+    else {
+      this.logger("current selected plVerName: ", this.state.plVerName);
     }
   }
 
 
   fetchPipelineVersions(pipeline_name, shouldGetLatestVersion) {
-    
-    axios.get( `${this.state.UCMgr_baseUrl}/pipelines/${pipeline_name}/versions`)
+
+    axios.get(`${this.state.UCMgr_baseUrl}/pipelines/${pipeline_name}/versions`)
       .then(res => {
         this.logger('Server reponded pipeline versions list', res.data.versions_list)
         //setState because this is async response from axios, so re-render
@@ -224,20 +230,20 @@ class CreateTrainingJob extends React.Component {
             plVerList: res.data.versions_list
           },
           () => {
-  
-            if(shouldGetLatestVersion){
-              this.setState({ plVerName: this.getLatestVersion("plVerList")},() => {  
+
+            if (shouldGetLatestVersion) {
+              this.setState({ plVerName: this.getLatestVersion("plVerList") }, () => {
                 this.makingCorrectPlVerIfWrong();
               })
             }
-            else{
+            else {
               this.makingCorrectPlVerIfWrong();
             }
           }
         );
-               
+
       })
-      .catch(function (error) {
+      .catch( (error) =>{
         // handle error
         this.logger('Got some error' + error);
       })
@@ -259,22 +265,22 @@ class CreateTrainingJob extends React.Component {
           },
           () => {
             let shouldChangeExpName = true;
-            for(const data of this.state.expList){
-              if(data === this.state.expName){
+            for (const data of this.state.expList) {
+              if (data === this.state.expName) {
                 shouldChangeExpName = false;
                 break;
               }
             }
-            if(shouldChangeExpName){
-              this.setState({expName : ''},()=>this.logger("current selected expName: ",this.state.expName));
+            if (shouldChangeExpName) {
+              this.setState({ expName: '' }, () => this.logger("current selected expName: ", this.state.expName));
             }
-            else{
-              this.logger("current selected expName: ",this.state.expName);
+            else {
+              this.logger("current selected expName: ", this.state.expName);
             }
           }
         );
       })
-      .catch(function (error) {
+      .catch( (error) =>{
         // handle error
         this.logger('Got some error' + error);
       })
@@ -295,22 +301,22 @@ class CreateTrainingJob extends React.Component {
           },
           () => {
             let shouldChangeFGname = true;
-            for(const data of this.state.featureGroupList){
-              if(data === this.state.featureGroupName){
+            for (const data of this.state.featureGroupList) {
+              if (data.featuregroup_name === this.state.featureGroupName) {
                 shouldChangeFGname = false;
                 break;
               }
             }
-            if(shouldChangeFGname){
-              this.setState({expName : ''},()=>this.logger("current selected fGName: ",this.state.featureGroupName));
+            if (shouldChangeFGname) {
+              this.setState({ featureGroupName: '' }, () => this.logger("current selected fGName: ", this.state.featureGroupName));
             }
-            else{
-              this.logger("current selected fGName: ",this.state.featureGroupName);
+            else {
+              this.logger("current selected fGName: ", this.state.featureGroupName);
             }
           }
         );
       })
-      .catch(function (error) {
+      .catch( (error)=> {
         // handle error
         this.logger('Got some error' + error);
       })
@@ -325,6 +331,8 @@ class CreateTrainingJob extends React.Component {
     this.logger('Create TrainingJob clicked: ',
       this.state.ucName,
       this.state.plName,
+      this.state.isMme,
+      this.state.modelName,
       this.state.expName,
       this.state.featureGroupName,
       this.state.featureFilters,
@@ -335,10 +343,10 @@ class CreateTrainingJob extends React.Component {
       this.state.datalakeSourceName,
       this.state._measurement,
       this.state.bucket
-      );
+    );
 
-      this.invokeAddTrainingJob(event)
-      event.preventDefault();
+    this.invokeAddTrainingJob(event)
+    event.preventDefault();
   }
 
   handleEditSubmit = event => {
@@ -346,6 +354,8 @@ class CreateTrainingJob extends React.Component {
     this.logger('Edit usecase clicked: ',
       this.state.ucName,
       this.state.plName,
+      this.state.isMme,
+      this.state.modelName,
       this.state.expName,
       this.state.featureGroupName,
       this.state.featureFilters,
@@ -357,58 +367,60 @@ class CreateTrainingJob extends React.Component {
       this.state.datalakeSourceName,
       this.state._measurement,
       this.state.bucket
-      );
+    );
 
-      this.invokePutTrainingJob(event);
-      event.preventDefault();
+    this.invokePutTrainingJob(event);
+    event.preventDefault();
   }
 
-  invokeAddTrainingJob(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,
+    axios.post(this.state.UCMgr_baseUrl + '/trainingjobs/' + this.state.ucName, {
+      "trainingjob_name": this.state.ucName,
+      "is_mme": this.state.isMme,
+      "model_name": this.state.modelName,
+      "pipeline_name": this.state.plName,
       // "experiment_name" : this.state.expName,
-      "experiment_name" : "Default",
+      "experiment_name": "Default",
       "featureGroup_name": this.state.featureGroupName,
       "query_filter": this.state.featureFilters,
-      "arguments" : hyperParamsDict,
-      "enable_versioning" : this.state.versioning,
-      "description" : this.state.ucDescription,
+      "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.invokeStartTrainingForCreate();
+    })
+      .catch( (error) =>{
         this.logger('Error creating Training Job', error);
         alert("Failed: " + error.response.data.Exception)
         event.preventDefault();
       })
-      .then(function () {
-
-      })
 
   }
 
-  invokePutTrainingJob = event =>{
+  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,
+    this.logger('Add New Request is posted at ' + this.state.UCMgr_baseUrl + '/trainingjobs/' + this.state.ucName)
+    axios.put(this.state.UCMgr_baseUrl + '/trainingjobs/' + this.state.ucName, {
+      "trainingjob_name": this.state.ucName,
+      "is_mme": this.state.isMme,
+      "model_name": this.state.modelName,
+      "pipeline_name": this.state.plName,
       // "experiment_name" : this.state.expName,
-      "experiment_name" : "Default",
+      "experiment_name": "Default",
       "featureGroup_name": this.state.featureGroupName,
       "query_filter": this.state.featureFilters,
-      "arguments" : hyperParamsDict,
-      "enable_versioning" : this.state.versioning,
-      "description" : this.state.ucDescription,
+      "arguments": hyperParamsDict,
+      "enable_versioning": this.state.versioning,
+      "description": this.state.ucDescription,
       "pipeline_version": this.state.plVerName,
       "datalake_source": convertedDatalakeDBName,
       "_measurement": this.state._measurement,
@@ -416,9 +428,9 @@ class CreateTrainingJob extends React.Component {
       //"enable_versioning" : true
     }).then(res => {
       this.logger('UC created ', res.data)
-        this.invokeStartTrainingForEdit();
-      })
-      .catch(function (error) {
+      this.invokeStartTrainingForEdit();
+    })
+      .catch( (error) =>{
         // handle error
         this.logger('Error creating Use case', error);
         alert("Failed: " + error.response.data.Exception)
@@ -429,26 +441,22 @@ class CreateTrainingJob extends React.Component {
       })
   }
 
-  invokeStartTrainingForCreate(event){
+  invokeStartTrainingForCreate(event) {
     this.logger('Training called ')
-    axios.post(this.state.UCMgr_baseUrl 
+    axios.post(this.state.UCMgr_baseUrl
       + '/trainingjobs/' + this.state.ucName + '/training',
       {
-       "trainingjobs" : this.state.ucName,
+        "trainingjobs": this.state.ucName,
       }
-      ).then(res => {
-        this.logger('Training  responsed ', res)
-        if(res.status === 200) {
-          alert("Training Job created and training initiated")
-          this.resetFrom()
-          
-        } else {
-          this.logger('Training issue: ' , res)
-        }
-        
-      })
+    ).then(res => {
+      this.logger('Training  responsed ', res)
+      if (res.status === 200) {
+        alert("Training Job created and training initiated")
+        this.resetFrom()
+      }
+    })
       .catch(error => {
-        this.logger('Error in training api,response',error.response.data)
+        this.logger('Error in training api,response', error.response.data)
         alert("Training failed: " + error.response.data.Exception)
       })
       .then(function () {
@@ -456,26 +464,26 @@ class CreateTrainingJob extends React.Component {
       })
   }
 
-  invokeStartTrainingForEdit(event){
+  invokeStartTrainingForEdit(event) {
     this.logger('Training called ')
-    axios.post(this.state.UCMgr_baseUrl 
+    axios.post(this.state.UCMgr_baseUrl
       + '/trainingjobs/' + this.state.ucName + '/training',
       {
-       "trainingjobs" : this.state.ucName,
+        "trainingjobs": this.state.ucName,
       }
-      ).then(res => {
-        this.logger('Training  responsed ', res)
-        if(res.status === 200) {
-          alert("Training Job edited and training initiated");
-          this.props.onHideEditPopup();
-          this.props.fetchTrainingJobs();
-        } else {
-          this.logger('Training issue: ' , res)
-        }
-        
-      })
+    ).then(res => {
+      this.logger('Training  responsed ', res)
+      if (res.status === 200) {
+        alert("Training Job edited and training initiated");
+        this.props.onHideEditPopup();
+        this.props.fetchTrainingJobs();
+      } else {
+        this.logger('Training issue: ', res)
+      }
+
+    })
       .catch(error => {
-        this.logger('Error in training api,response',error.response.data)
+        this.logger('Error in training api,response', error.response.data)
         alert("Training failed: " + error.response.data.Exception)
       })
       .then(function () {
@@ -486,72 +494,72 @@ class CreateTrainingJob extends React.Component {
 
   buildFeatureNameList(f_names) {
 
-    this.logger("before changing in buildFeatureNameList: ",f_names);
-    this.logger("after changing in buildFeatureNameList: ",String(f_names).split(","))
+    this.logger("before changing in buildFeatureNameList: ", f_names);
+    this.logger("after changing in buildFeatureNameList: ", String(f_names).split(","))
     return String(f_names).split(",");
     //return ["Time", "DL PRB UTILIZATION %"];
   }
 
-  buildFeatureFilterDict(filters){
+  buildFeatureFilterDict(filters) {
 
-    this.logger("before changing in buildFeatureFilterDict: ",filters)
+    this.logger("before changing in buildFeatureFilterDict: ", filters)
 
-    if(filters === ""){
+    if (filters === "") {
       return {};
     }
 
     let fil_list = String(filters).split(",");
     let filtDict = {}
-    for ( const filter of fil_list) {
+    for (const filter of fil_list) {
       let token = filter.split(":");
       let key = token[0].trim();
       let value = this.getIntOrStringValue(token[1].trim());
 
       filtDict[key] = value;
     }
-        
-    this.logger('after changing in buildFeatureFilterDict: ',filtDict);
+
+    this.logger('after changing in buildFeatureFilterDict: ', filtDict);
     return filtDict;
 
   }
 
   //Fix : Code dumplication merge in common function
-  buildHyperparamsDict(hyperArgs){
+  buildHyperparamsDict(hyperArgs) {
 
-    this.logger("before changing in buildHyperparamsDict: ",hyperArgs);
+    this.logger("before changing in buildHyperparamsDict: ", hyperArgs);
 
-    if(hyperArgs === ""){
+    if (hyperArgs === "") {
       return {
-        'trainingjob_name' : this.state.ucName
+        'trainingjob_name': this.state.ucName
       };
     }
 
     let paramList = String(hyperArgs).split(",");
     let paramDict = {}
-    for ( const param of paramList) {
+    for (const param of paramList) {
       let token = param.split(":");
       let key = token[0].trim();
-      let value = token[1].trim();
+      let value = token[1].trim(); 
 
       paramDict[key] = value;
     }
     paramDict["trainingjob_name"] = this.state.ucName;
 
 
-    this.logger("after changing in buildHyperparamsDict: ",paramDict);
+    this.logger("after changing in buildHyperparamsDict: ", paramDict);
     return paramDict;
-    
+
   }
 
   getIntOrStringValue(inputValue) {
     //BUG: value 12.5 coverted to 12
 
-    this.logger('Before changing in getIntOrStringValue: ',inputValue)
+    this.logger('Before changing in getIntOrStringValue: ', inputValue)
     var value = parseInt(inputValue)
-    if(isNaN(value)) {
+    if (isNaN(value)) {
       value = inputValue
-    } 
-    this.logger('After changing in getIntOrStringValue: ',value)
+    }
+    this.logger('After changing in getIntOrStringValue: ', value)
     return value;
   }
 
@@ -562,27 +570,27 @@ class CreateTrainingJob extends React.Component {
     } else {
       this.setState({
         ucName: event.target.value
-      },() => {
+      }, () => {
         this.logger("after set state, ucName: ", this.state.ucName);
       })
     }
   }
 
   handlePLNameChange = (event) => {
-    
+
     this.setState({
       plName: event.target.value
-    },() => {
+    }, () => {
       this.logger("after set state, plName: ", this.state.plName);
       this.fetchPipelineVersions(this.state.plName, true);
     })
   }
 
   handleExpNameChange = (event) => {
-    
+
     this.setState({
       expName: event.target.value
-    },() => {
+    }, () => {
       this.logger("after set state, expName: ", this.state.expName);
     })
   }
@@ -590,7 +598,7 @@ class CreateTrainingJob extends React.Component {
   handleFeatureGroupNamesChange = (event) => {
     this.setState({
       featureGroupName: event.target.value
-    },() => {
+    }, () => {
       this.logger("after set state, FeatureGroup Name: ", this.state.featureGroupName);
     })
   }
@@ -598,7 +606,7 @@ class CreateTrainingJob extends React.Component {
   handleFeatFiltersChange = (event) => {
     this.setState({
       featureFilters: event.target.value
-    },() => {
+    }, () => {
       this.logger("after set state, featureFilters: ", this.state.featureFilters);
     })
   }
@@ -606,7 +614,7 @@ class CreateTrainingJob extends React.Component {
   handleHyparamsChange = (event) => {
     this.setState({
       hyparams: event.target.value
-    },() => {
+    }, () => {
       this.logger("after set state, hyparams: ", this.state.hyparams);
     })
   }
@@ -614,15 +622,15 @@ class CreateTrainingJob extends React.Component {
   handleVersioningChange = (event) => {
     this.setState({
       versioning: event.target.checked
-    },() => {
+    }, () => {
       this.logger("after set state, versioning: ", this.state.versioning);
     })
   }
-  
+
   handleTargetChange = (event) => {
     this.setState({
       targetName: event.target.value
-    },() => {
+    }, () => {
       this.logger("after set state, targetName: ", this.state.targetName);
     })
   }
@@ -630,7 +638,7 @@ class CreateTrainingJob extends React.Component {
   handleDatalakeSourceChange = (event) => {
     this.setState({
       datalakeSourceName: event.target.value
-    },() => {
+    }, () => {
       this.logger("after set state, datalakeSourceName: ", this.state.datalakeSourceName);
     })
   }
@@ -638,7 +646,7 @@ class CreateTrainingJob extends React.Component {
   handleUCDescriptionChange = (event) => {
     this.setState({
       ucDescription: event.target.value
-    },() => {
+    }, () => {
       this.logger("after set state, ucDescription: ", this.state.ucDescription);
     })
   }
@@ -646,13 +654,19 @@ class CreateTrainingJob extends React.Component {
   handlePipelineVersionChange = (event) => {
     this.setState({
       plVerName: event.target.value
-    },() => {
+    }, () => {
       this.logger("after set state, plVerName: ", this.state.plVerName);
     })
   }
 
- 
 
+  handleIsMme = (event) => {
+    this.setState({
+      isMme: event.target.checked
+    }, () => {
+      this.logger("after set state, isMme: ", this.state.isMme)
+    })
+  }
 
 
 
@@ -660,26 +674,35 @@ class CreateTrainingJob extends React.Component {
   handle_measurementChange = (event) => {
     this.setState({
       _measurement: event.target.value
-    },()=>{
+    }, () => {
       this.logger("after set state, _measurement: ", this.state._measurement);
     });
   }
 
   handleBucketChange = (event) => {
     this.setState({
-      bucket : event.target.value
-    },()=>{
+      bucket: event.target.value
+    }, () => {
       this.logger("after set state, bucket: ", this.state.bucket);
     });
   }
+  handleModelNameChange = (event) => {
+    this.setState({
+      modelName: event.target.value
+    }, () => {
+      this.logger("after set state, modelName: ", this.state.modelName);
+    });
+  }
 
 
-  resetFrom = ()=> {
+  resetFrom = () => {
 
     this.setState({
       ucName: '',
       plName: '',
       expName: '',
+      isMme: false,
+      modelName: '',
       featureGroupName: '',
       featureFilters: '',
       hyparams: '',
@@ -698,7 +721,7 @@ class CreateTrainingJob extends React.Component {
     })
   }
 
-  
+
 
   render() {
 
@@ -706,77 +729,130 @@ class CreateTrainingJob extends React.Component {
     return (
       <>
 
-      <Form 
-      className={this.props.isCreateTrainingJobForm?"create-form":"edit-form"}
-      onSubmit={this.props.isCreateTrainingJobForm?this.handleCreateSubmit:this.handleEditSubmit}>
+        <Form
+          className={this.props.isCreateTrainingJobForm ? "create-form" : "edit-form"}
+          onSubmit={this.props.isCreateTrainingJobForm ? this.handleCreateSubmit : this.handleEditSubmit}>
 
-      
-        <Form.Group controlId="ucName">
+
+          <Form.Group controlId="ucName">
             <Form.Label>Training Job Name*</Form.Label>
             {
-                this.props.isCreateTrainingJobForm
+              this.props.isCreateTrainingJobForm
                 ?
-                    (
-                        <Form.Control type="input"
-                        value={this.state.ucName}
-                        onChange={this.handleUCNameChange}
-                        placeholder="" 
-                        required/>
-                    ) 
+                (
+                  <Form.Control type="input"
+                    value={this.state.ucName}
+                    onChange={this.handleUCNameChange}
+                    placeholder=""
+                    required />
+                )
                 :
-                    (
-                        <Form.Control type="text" placeholder={this.state.ucName} readOnly />
+                (
+                  <Form.Control type="text" placeholder={this.state.ucName} readOnly />
+                )
+            }
+          </Form.Group>
+
+          <Form.Group controlId="isMme">
+            <Form.Check type="checkbox" label="Model Management Service"
+              checked={this.state.isMme} onChange={this.handleIsMme} />
+          </Form.Group>
+
+          {
+            (() => {
+              if (this.state.isMme == false){
+                  return (
+                    <div>
+                    <Form.Group controlId="plName">
+                      <Form.Label>Training Function*</Form.Label>
+                      <Form.Control as="select"
+                        required
+                        value={this.state.plName}
+                        onChange={this.handlePLNameChange}>
+    
+                        <option key="" value="" disabled> --- Select Training Function --- </option>
+                        {
+                          this.state.plList.map(data => <option key={data} value={data}>{data}</option>)
+                        }
+                      </Form.Control>
+                    </Form.Group>
+    
+                    <Form.Group controlId="fGName">
+                      <Form.Label>FeatureGroup Name*</Form.Label>
+                      <Form.Control as="select"
+                        required
+                        value={this.state.featureGroupName}
+                        onChange={this.handleFeatureGroupNamesChange}>
+    
+                        <option key="" value="" disabled> --- Select FeatureGroup Name --- </option>
+                        {
+                          this.state.featureGroupList.map(data => <option key={data.featuregroup_name} value={data.featuregroup_name}>{data.featuregroup_name}</option>)
+                        }
+    
+                      </Form.Control>
+                    </Form.Group>
+                  </div>
+                  )
+              }else if(this.state.isMme==true){
+                if(this.props.isCreateTrainingJobForm){
+                  return (
+                    <Form.Group controlId="modelName">
+                        <Form.Label>Model Name</Form.Label>
+                        <Form.Control type="text"
+                          value={this.state.modelName}
+                          onChange={this.handleModelNameChange}
+                          placeholder=""
+                          required />
+                      </Form.Group>
+                  )
+                }
+                  else {
+                    return (
+                      <Form.Control type="text" placeholder={this.state.modelName} readOnly />
                     )
-            }     
-        </Form.Group>
+                  }
+                
+              }
+              
+              return null;
+            })()
+          }
 
-        <Form.Group controlId="plName">
-          <Form.Label>Training Function*</Form.Label>
-          <Form.Control as="select"
-            required
-            value={this.state.plName}
-            onChange={this.handlePLNameChange}>
-          
-            <option key="" value="" disabled> --- Select Training Function --- </option>
-            {
-                this.state.plList.map(data => <option key={data} value={data}>{data}</option>)
-            }
-          </Form.Control>
-        </Form.Group>
-
-        {
-          this.state.plName !== '' 
-          && 
-          <div>
-            <Form.Group controlId="plVesName">
-              <Form.Label>Training Function Version Name*</Form.Label>
-              <Form.Control as="select"
-                required
-                value={this.state.plVerName}
-                onChange={this.handlePipelineVersionChange}>
-            
-                <option key="" value="" disabled> --- Select Training Function Version--- </option>
-                {
+
+
+          {
+            this.state.plName !== ''
+            &&
+            <div>
+              <Form.Group controlId="plVesName">
+                <Form.Label>Training Function Version Name*</Form.Label>
+                <Form.Control as="select"
+                  required
+                  value={this.state.plVerName}
+                  onChange={this.handlePipelineVersionChange}>
+
+                  <option key="" value="" disabled> --- Select Training Function Version--- </option>
+                  {
                     this.state.plVerList.map(data => {
-                      if(data === this.state.plName){
+                      if (data === this.state.plName) {
                         return <option key={data} value={data}>1</option>
                       }
-                      else{
+                      else {
                         return <option key={data} value={data}>{data}</option>
                       }
                     })
-                }
-              </Form.Control>
-            </Form.Group>
-            {/*<Form.Group controlId="plVerDescription">
+                  }
+                </Form.Control>
+              </Form.Group>
+              {/*<Form.Group controlId="plVerDescription">
               <Form.Label>Pipeline Version Description</Form.Label>
               <Form.Control as="textarea" name="plVerDescription" rows={3} value={this.state.plVerDescription} readOnly/>
             </Form.Group>*/}
-          </div>
-          
-        }
+            </div>
+
+          }
 
-        {/* <Form.Group controlId="expName">
+          {/* <Form.Group controlId="expName">
           <Form.Label>Experiment Name*</Form.Label>
           <Form.Control as="select"
             required
@@ -790,94 +866,81 @@ class CreateTrainingJob extends React.Component {
           </Form.Control>
         </Form.Group> */}
 
-        <Form.Group controlId="datalakeSource">
-          <Form.Label>Datalake Source*</Form.Label>
-         
-          <Form.Control as="select"
-            required
-            value={this.state.datalakeSourceName}
-            onChange={this.handleDatalakeSourceChange}>
+          <Form.Group controlId="datalakeSource">
+            <Form.Label>Datalake Source*</Form.Label>
 
-            <option key="" value="" disabled> --- Select Datalake Source --- </option>
-            {
-              this.state.datalakeSourceList.map(data => <option key={data} value={data}>{data}</option>)
-            }
-          
-          </Form.Control>
-        </Form.Group>
-
-        {
-          this.state.datalakeSourceName === "Influx DB" &&
-          <div>
-            <Form.Group controlId="_measurement">
-              <Form.Label>_measurement*</Form.Label>
-              <Form.Control type="text"
-                value={this.state._measurement}
-                onChange={this.handle_measurementChange}
-                placeholder="" 
-                required/>
-            </Form.Group>
-            <Form.Group controlId="bucket">
-              <Form.Label>bucket*</Form.Label>
-              <Form.Control type="text" 
-                value={this.state.bucket}
-                onChange={this.handleBucketChange}
-                placeholder=""
-                required/>
-            </Form.Group>
-          </div>
-          
-        }
+            <Form.Control as="select"
+              required
+              value={this.state.datalakeSourceName}
+              onChange={this.handleDatalakeSourceChange}>
 
-        <Form.Group controlId="fGName">
-          <Form.Label>FeatureGroup Name*</Form.Label>
-          <Form.Control as="select"
-            required
-            value={this.state.featureGroupName}
-            onChange={this.handleFeatureGroupNamesChange}>
+              <option key="" value="" disabled> --- Select Datalake Source --- </option>
+              {
+                this.state.datalakeSourceList.map(data => <option key={data} value={data}>{data}</option>)
+              }
 
-            <option key="" value="" disabled> --- Select FeatureGroup Name --- </option>
-            {
-              this.state.featureGroupList.map(data => <option key={data.featuregroup_name} value={data.featuregroup_name}>{data.featuregroup_name}</option>)
-            }
-          
-          </Form.Control>
-        </Form.Group>
-
-        <Form.Group controlId="ftFilter">
-          <Form.Label>Feature Filter</Form.Label>
-          <Form.Control type="text"
-            value={this.state.featureFilters}
-            onChange={this.handleFeatFiltersChange}
-            placeholder="" />
-        </Form.Group>
-
-        <Form.Group controlId="hyparams">
-          <Form.Label>Hyper Parameters</Form.Label>
-          <Form.Control type="text"
-            value={this.state.hyparams}
-            onChange={this.handleHyparamsChange}
-            placeholder="" />
-        </Form.Group>
-
-        {/* currently don't know difference between id and controlId in Form.group*/}
-        <Form.Group id="EnableVersioning">
+            </Form.Control>
+          </Form.Group>
+
+          {
+            this.state.datalakeSourceName === "Influx DB" &&
+            <div>
+              <Form.Group controlId="_measurement">
+                <Form.Label>_measurement*</Form.Label>
+                <Form.Control type="text"
+                  value={this.state._measurement}
+                  onChange={this.handle_measurementChange}
+                  placeholder=""
+                  required />
+              </Form.Group>
+              <Form.Group controlId="bucket">
+                <Form.Label>bucket*</Form.Label>
+                <Form.Control type="text"
+                  value={this.state.bucket}
+                  onChange={this.handleBucketChange}
+                  placeholder=""
+                  required />
+              </Form.Group>
+            </div>
+
+          }
+
+
+
+          <Form.Group controlId="ftFilter">
+            <Form.Label>Feature Filter</Form.Label>
+            <Form.Control type="text"
+              value={this.state.featureFilters}
+              onChange={this.handleFeatFiltersChange}
+              placeholder="" />
+          </Form.Group>
+
+          <Form.Group controlId="hyparams">
+            <Form.Label>Hyper Parameters</Form.Label>
+            <Form.Control type="text"
+              value={this.state.hyparams}
+              onChange={this.handleHyparamsChange}
+              placeholder="" />
+          </Form.Group>
+
+          {/* currently don't know difference between id and controlId in Form.group*/}
+          <Form.Group id="EnableVersioning">
             <Form.Check type="checkbox" label="Enable versioning"
-             checked={this.state.versioning} onChange={this.handleVersioningChange} />
-        </Form.Group>
+              checked={this.state.versioning} onChange={this.handleVersioningChange} />
+          </Form.Group>
+
 
-       
 
-        <Form.Group controlId="ucDescription">
-          <Form.Label>Description</Form.Label>
-          <Form.Control type="text"
-            value={this.state.ucDescription}
-            onChange={this.handleUCDescriptionChange}
-            placeholder="" />
-        </Form.Group>
+          <Form.Group controlId="ucDescription">
+            <Form.Label>Description</Form.Label>
+            <Form.Control type="text"
+              value={this.state.ucDescription}
+              onChange={this.handleUCDescriptionChange}
+              placeholder="" />
+          </Form.Group>
 
-        <Button type="submit"> Create Training Job </Button>
-      </Form>
+          <Button type="submit"> Create Training Job </Button>
+        </Form>
       </>
     );
   }
diff --git a/src/components/home/status/StatusPageRows.js b/src/components/home/status/StatusPageRows.js
index a6eafd2..8613e4c 100644
--- a/src/components/home/status/StatusPageRows.js
+++ b/src/components/home/status/StatusPageRows.js
@@ -95,7 +95,7 @@ const StatusPageRows = (props) => {
 
   const handleEdit  = (event) => {
     if(selectedFlatRows.length === 1){
-      logger(selectedFlatRows[0].original.trainingjob_name)
+      logger("selected training job: ",selectedFlatRows[0].original.trainingjob_name)
       setTraingingjobNameForEditPopup(selectedFlatRows[0].original.trainingjob_name);
       setVersionForEditPopup(selectedFlatRows[0].original.version);
       setEditPopup(true);
diff --git a/src/components/home/status/TrainingJobInfo.js b/src/components/home/status/TrainingJobInfo.js
index 528e27f..31e6caa 100644
--- a/src/components/home/status/TrainingJobInfo.js
+++ b/src/components/home/status/TrainingJobInfo.js
@@ -24,6 +24,8 @@ import {convertToCommaSeparatedString, getDatalakeNameWithoutConversion} from '.
 
 const TrainingJobInfo = (props) => {
     const [trainingJobName, setTrainingJobName] = useState("");
+    const [isMme, setIsMme] = useState(false);
+    const [modelName, setModelName]= useState("");
     const [version, setVersion] = useState("");
     const [description, setDescription] = useState("");
     const [featureNames, setFeatureNames] = useState("");
@@ -38,6 +40,7 @@ const TrainingJobInfo = (props) => {
     const [modelUrl, setModelUrl] = useState("");
     const [_measurement, set_measurement] = useState("");
     const [bucket, setBucket] = useState("");
+    const [modelInfo, setModelInfo] = useState("");
 
     useEffect(()=>{
         try{
@@ -46,6 +49,8 @@ const TrainingJobInfo = (props) => {
                 console.log(`response for ${UCMgr_baseUrl}/trainingjobs/${props.trainingjob_name_and_version.trainingjob_name}/${props.trainingjob_name_and_version.version}`, response);
                 console.log(response.data);
                 setTrainingJobName(response.data.trainingjob.trainingjob_name);
+                setIsMme(response.data.trainingjob.is_mme);
+                setModelName(response.data.trainingjob.model_name);
                 setVersion(response.data.trainingjob.version);
                 setDescription(response.data.trainingjob.description);
                 setFeatureNames(response.data.trainingjob.feature_list);
@@ -60,6 +65,7 @@ const TrainingJobInfo = (props) => {
                 setModelUrl(response.data.trainingjob.model_url);
                 set_measurement(response.data.trainingjob._measurement);
                 setBucket(response.data.trainingjob.bucket);
+                setModelInfo(response.data.trainingjob.model_info);
             })
             .catch(error => {
                 console.log(error);
@@ -78,6 +84,25 @@ const TrainingJobInfo = (props) => {
                     <Form.Label>Training Job Name</Form.Label>
                     <Form.Control type="text" value={trainingJobName} readOnly/>
                 </Form.Group>
+                <Form.Group controlId="isMme">
+                <Form.Check type="checkbox" label="Enable MME"
+                    checked={isMme} readOnly/>
+                </Form.Group>
+                {   isMme == true
+                    && 
+                    <div>
+                    <Form.Group controlId="modelName">
+                        <Form.Label>Model Name</Form.Label>
+                        <Form.Control type="text" value={modelName} readOnly />
+                    </Form.Group>
+
+                    <Form.Group controlId="modelInfo">
+                    <Form.Label>Model Info</Form.Label>
+                        <Form.Control type="text" value={modelInfo} readOnly />
+                    </Form.Group>
+                    </div>
+
+                }
                 <Form.Group controlId="version">
                     <Form.Label>Version</Form.Label>
                     <Form.Control type="text" value={version} readOnly />