From: rajdeep11 <rajdeep.sin@samsung.com>
Date: Tue, 3 Oct 2023 10:17:42 +0000 (+0530)
Subject: changes in the feature group gui
X-Git-Tag: 1.2.0~7
X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?a=commitdiff_plain;h=refs%2Fchanges%2F45%2F11845%2F1;p=portal%2Faiml-dashboard.git

changes in the feature group gui

Issue-Id: AIMLFW-58

Change-Id: I4362a453b7bc6452f9692c2d9487e566b594c4ac
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 b7edb97..986defa 100644
--- a/src/components/home/form/CreateFeatureGroupForm.js
+++ b/src/components/home/form/CreateFeatureGroupForm.js
@@ -35,13 +35,14 @@ class CreateFeatureGroup extends React.Component {
             featureNames: '',
             dataLake: "Influx DB",
             dme: false,
-            dmeHost: '',
+            host: '',
+            port: '',
             dmePort: '',
             bucketName: '',
             token: '',
             sourceName: '',
             dbOrg: '',
-            measuredObjClass:'',
+            measuredObjClass: '',
             UCMgr_baseUrl: CONSTANTS.UCMgr_baseUrl,
         };
 
@@ -80,11 +81,19 @@ class CreateFeatureGroup extends React.Component {
         }
     }
 
-    handleDmeHostChange = (event) => {
+    handleHostChange = (event) => {
         this.setState({
-            dmeHost: event.target.value
+            host: event.target.value
         }, () => {
-            this.logger("after set state, Hostname: ", this.state.dmeHost);
+            this.logger("after set state, Hostname: ", this.state.host);
+        })
+    }
+
+    handlePortChange = (event) => {
+        this.setState({
+            port: event.target.value
+        }, () => {
+            this.logger("after set state, Port: ", this.state.port);
         })
     }
 
@@ -135,11 +144,11 @@ class CreateFeatureGroup extends React.Component {
         })
     }
 
-    handleMeasuredObjClass = (event)=>{
+    handleMeasuredObjClass = (event) => {
         this.setState({
-            measuredObjClass:event.target.value
-        },()=>{
-            this.logger("after set state, measuredObjClass: ", this.state.measuredObjClass) 
+            measuredObjClass: event.target.value
+        }, () => {
+            this.logger("after set state, measuredObjClass: ", this.state.measuredObjClass)
         })
     }
     invokeAddFeatureGroup(event) {
@@ -150,8 +159,9 @@ class CreateFeatureGroup extends React.Component {
             "feature_list": this.state.featureNames,
             "datalake_source": convertedDatalakeDBName,
             "enable_Dme": this.state.dme,
-            "DmeHost": this.state.dmeHost,
-            "DmePort": this.state.dmePort,
+            "Host": this.state.host,
+            "Port": this.state.port,
+            "dmePort": this.state.dmePort,
             "bucket": this.state.bucketName,
             "token": this.state.token,
             "source_name": this.state.sourceName,
@@ -164,7 +174,7 @@ class CreateFeatureGroup extends React.Component {
                 this.resetForm()
             } else {
                 this.logger("Error Occured", res)
-            }   
+            }
         })
             .catch(function (error) {
                 this.logger('Error creating featureGroup', error);
@@ -181,12 +191,13 @@ class CreateFeatureGroup extends React.Component {
             featureNames: '',
             dataLake: "Influx DB",
             dme: false,
-            dmeHost: '',
-            dmePort: '',
+            host: '',
+            port: '',
+            dmePort:'',
             bucketName: '',
             token: '',
             sourceName: '',
-            measuredObjClass:'',
+            measuredObjClass: '',
             dbOrg: ''
         })
     }
@@ -217,60 +228,77 @@ class CreateFeatureGroup extends React.Component {
                         </Form.Group>
                     </Col>
                 </Row>
-                <Form.Group controlId="DataLake">
-                    <Form.Label>Datalake </Form.Label>
-                    <Form.Control type="text" placeholder={this.state.dataLake} readOnly />
-                </Form.Group>
+                <Row>
+                    <Col md>
+                        <Form.Group controlId="DataLake">
+                            <Form.Label>Datalake </Form.Label>
+                            <Form.Control type="text" placeholder={this.state.dataLake} readOnly />
+                        </Form.Group>
+                    </Col>
+                    <Col md>
+                        <Form.Group controlId="db_org">
+                            <Form.Label>Db Org</Form.Label>
+                            <Form.Control type="text"
+                                value={this.state.dbOrg}
+                                onChange={this.handledbOrg}
+                                placeholder=""
+                                required />
+                        </Form.Group>
+                    </Col>
+
+
+                </Row>
+
+                <Row>
+                    <Col md>
+                        <Form.Group controlId="host">
+                            <Form.Label>Host </Form.Label>
+                            <Form.Control type="text"
+                                value={this.state.host}
+                                onChange={this.handleHostChange}
+                                placeholder=""
+                                required />
+                        </Form.Group>
+                    </Col>
+                    <Col md>
+                        <Form.Group controlId="port">
+                            <Form.Label>Port </Form.Label>
+                            <Form.Control type="text"
+                                value={this.state.port}
+                                onChange={this.handlePortChange}
+                                placeholder=""
+                                required />
+                        </Form.Group>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md>
+                        <Form.Group controlId="bucketname">
+                            <Form.Label>Bucket Name </Form.Label>
+                            <Form.Control type="text"
+                                value={this.state.bucketName}
+                                onChange={this.handleBucketNameChange}
+                                placeholder=""
+                                required />
+                        </Form.Group>
+                    </Col>
+                    <Col md>
+                        <Form.Group controlId="buckettoken">
+                            <Form.Label>DB Token </Form.Label>
+                            <Form.Control type="text"
+                                value={this.state.token}
+                                onChange={this.handledbTokenChange}
+                                placeholder=""
+                                required />
+                        </Form.Group>
+                    </Col>
+                </Row>
                 <Form.Group controlId="DME">
                     <Form.Check type="checkbox" label="DME"
                         checked={this.state.dme} onChange={this.handleDmeChange} />
                 </Form.Group>
-                {   this.state.dme === true &&
+                {this.state.dme === true &&
                     <div>
-                        <Row>
-                            <Col md>
-                                <Form.Group controlId="DMEhost">
-                                    <Form.Label>DME Host </Form.Label>
-                                    <Form.Control type="text"
-                                        value={this.state.dmeHost}
-                                        onChange={this.handleDmeHostChange}
-                                        placeholder=""
-                                        required />
-                                </Form.Group>
-                            </Col>
-                            <Col md>
-                                <Form.Group controlId="DMEport">
-                                    <Form.Label>DME Port </Form.Label>
-                                    <Form.Control type="text"
-                                        value={this.state.dmePort}
-                                        onChange={this.handleDmePortChange}
-                                        placeholder=""
-                                        required />
-                                </Form.Group>
-                            </Col>
-                        </Row>
-                        <Row>
-                            <Col md>
-                                <Form.Group controlId="bucketname">
-                                    <Form.Label>Bucket Name </Form.Label>
-                                    <Form.Control type="text"
-                                        value={this.state.bucketName}
-                                        onChange={this.handleBucketNameChange}
-                                        placeholder=""
-                                        required />
-                                </Form.Group>
-                            </Col>
-                            <Col md>
-                                <Form.Group controlId="buckettoken">
-                                    <Form.Label>DB Token </Form.Label>
-                                    <Form.Control type="text"
-                                        value={this.state.token}
-                                        onChange={this.handledbTokenChange}
-                                        placeholder=""
-                                        required />
-                                </Form.Group>
-                            </Col>
-                        </Row>
                         <Row>
                             <Col md>
                                 <Form.Group controlId="SourceName">
@@ -282,24 +310,25 @@ class CreateFeatureGroup extends React.Component {
                                         required />
                                 </Form.Group>
                             </Col>
+
+                        </Row>
+                        <Row>
                             <Col md>
-                                <Form.Group controlId="db_org">
-                                    <Form.Label>Db Org</Form.Label>
+                                <Form.Group controlId="measuredObjClass">
+                                    <Form.Label>Measured Obj Class</Form.Label>
                                     <Form.Control type="text"
-                                        value={this.state.dbOrg}
-                                        onChange={this.handledbOrg}
+                                        value={this.state.measuredObjClass}
+                                        onChange={this.handleMeasuredObjClass}
                                         placeholder=""
                                         required />
                                 </Form.Group>
                             </Col>
-                        </Row>
-                        <Row>
                             <Col md>
-                            <Form.Group controlId="measuredObjClass">
-                                    <Form.Label>Measured Obj Class</Form.Label>
+                                <Form.Group controlId="dmeport">
+                                    <Form.Label>Dme port</Form.Label>
                                     <Form.Control type="text"
-                                        value={this.state.measuredObjClass}
-                                        onChange={this.handleMeasuredObjClass}
+                                        value={this.state.dmePort}
+                                        onChange={this.handleDmePortChange}
                                         placeholder=""
                                         required />
                                 </Form.Group>
diff --git a/src/components/home/form/CreateOrEditTrainingJobForm.js b/src/components/home/form/CreateOrEditTrainingJobForm.js
index 1e183bd..6a6a4e4 100644
--- a/src/components/home/form/CreateOrEditTrainingJobForm.js
+++ b/src/components/home/form/CreateOrEditTrainingJobForm.js
@@ -789,7 +789,7 @@ class CreateTrainingJob extends React.Component {
         }
 
         <Form.Group controlId="ftName">
-          <Form.Label>Feature Name*</Form.Label>
+          <Form.Label>FeatureGroup Name*</Form.Label>
           <Form.Control type="text"
             value={this.state.featureNames}
             onChange={this.handleFeatureNamesChange}
diff --git a/src/components/home/status/FeatureGroupInfo.js b/src/components/home/status/FeatureGroupInfo.js
index 8dd93fb..8d91b7b 100644
--- a/src/components/home/status/FeatureGroupInfo.js
+++ b/src/components/home/status/FeatureGroupInfo.js
@@ -26,40 +26,42 @@ const FeatureGroupInfo = (props) => {
     const [features, setfeatures] = useState("");
     const [datalake, setdatalake] = useState("");
     const [dme, setDme] = useState(false);
-    const [dmeHost, setDmeHost]=useState("")
-    const [dmePort, setDmePort]=useState("")
-    const [sourceName, setSourceName]=useState("")
-    const [dbOrg, setDbOrg]=useState("")
-    const [bucketName, setBucketName]=useState("")
-    const [dbToken, setDbToken]=useState("")
+    const [host, setHost] = useState("")
+    const [port, setPort] = useState("")
+    const [dmePort, setDmePort] = useState("")
+    const [sourceName, setSourceName] = useState("")
+    const [dbOrg, setDbOrg] = useState("")
+    const [bucketName, setBucketName] = useState("")
+    const [dbToken, setDbToken] = useState("")
     const [measuredObjClass, setMeasureObjectClass] = useState("")
 
-    useEffect(()=>{
-        try{
+    useEffect(() => {
+        try {
             axios.get(`${UCMgr_baseUrl}/featureGroup/${props.featureGroupName.featureGroupName}`)
-            .then(response => {
-                console.log(`response for ${UCMgr_baseUrl}/trainingjobs/featureGroup/${props.featureGroupName.featureGroupName}`, response)
-                setFeatureGroupName(response.data.featuregroup[0].featuregroup_name)
-                setfeatures(response.data.featuregroup[0].features)
-                setDme(response.data.featuregroup[0].dme)
-                setdatalake(response.data.featuregroup[0].datalake)
-                setDmeHost(response.data.featuregroup[0].dme_host)
-                setDmePort(response.data.featuregroup[0].dme_port)
-                setSourceName(response.data.featuregroup[0].source_name)
-                setDbOrg(response.data.featuregroup[0].db_org)
-                setBucketName(response.data.featuregroup[0].bucket)
-                setDbToken(response.data.featuregroup[0].token)
-                setMeasureObjectClass(response.data.featuregroup[0].measured_obj_class)
-
-            })
-            .catch(error => {
-                console.log(error);
-            });
+                .then(response => {
+                    console.log(`response for ${UCMgr_baseUrl}/trainingjobs/featureGroup/${props.featureGroupName.featureGroupName}`, response)
+                    setFeatureGroupName(response.data.featuregroup[0].featuregroup_name)
+                    setfeatures(response.data.featuregroup[0].features)
+                    setDme(response.data.featuregroup[0].dme)
+                    setdatalake(response.data.featuregroup[0].datalake)
+                    setHost(response.data.featuregroup[0].host)
+                    setPort(response.data.featuregroup[0].port)
+                    setDbToken(response.data.featuregroup[0].token)
+                    setDbOrg(response.data.featuregroup[0].db_org)
+                    setSourceName(response.data.featuregroup[0].source_name)
+                    setBucketName(response.data.featuregroup[0].bucket)
+                    setDmePort(response.data.featuregroup[0].dme_port)
+                    setMeasureObjectClass(response.data.featuregroup[0].measured_obj_class)
+
+                })
+                .catch(error => {
+                    console.log(error);
+                });
         }
-        catch(error){
+        catch (error) {
             console.log(error);
         }
-    },[props.featureGroupName]);
+    }, [props.featureGroupName]);
 
 
     return (
@@ -67,7 +69,7 @@ const FeatureGroupInfo = (props) => {
             <Form>
                 <Form.Group controlId="FeatureGroupName">
                     <Form.Label>Feature Group Name</Form.Label>
-                    <Form.Control type="text" value={featureGroupName} readOnly/>
+                    <Form.Control type="text" value={featureGroupName} readOnly />
                 </Form.Group>
                 <Form.Group controlId="features">
                     <Form.Label>Features</Form.Label>
@@ -77,44 +79,45 @@ const FeatureGroupInfo = (props) => {
                     <Form.Label>Datalake</Form.Label>
                     <Form.Control type="text" value={datalake} readOnly />
                 </Form.Group>
-                {   dme === true &&
-                    <div>
+                <Form.Group controlId="host">
+                    <Form.Label>Host </Form.Label>
+                    <Form.Control type="text" value={host} readOnly />
+                </Form.Group>
+
+                <Form.Group controlId="port">
+                    <Form.Label>Port </Form.Label>
+                    <Form.Control type="text" value={port} readOnly />
+                </Form.Group>
+
+                <Form.Group controlId="bucketname">
+                    <Form.Label>Bucket Name </Form.Label>
+                    <Form.Control type="text" value={bucketName} readOnly />
+                </Form.Group>
 
-                                <Form.Group controlId="DMEhost">
-                                    <Form.Label>DME Host </Form.Label>
-                                    <Form.Control type="text" value={dmeHost} readOnly />
-                                </Form.Group>
-
-                                <Form.Group controlId="DMEport">
-                                    <Form.Label>DME Port </Form.Label>
-                                    <Form.Control type="text" value={dmePort} readOnly />
-                                </Form.Group>
-
-
-                                <Form.Group controlId="bucketname">
-                                    <Form.Label>Bucket Name </Form.Label>
-                                    <Form.Control type="text" value={bucketName} readOnly />
-                                </Form.Group>
-
-                                <Form.Group controlId="buckettoken">
-                                    <Form.Label>DB Token </Form.Label>
-                                    <Form.Control type="text" value={dbToken} readOnly />
-                                </Form.Group>
-
-
-                                <Form.Group controlId="SourceName">
-                                    <Form.Label>Source Name </Form.Label>
-                                    <Form.Control type="text" value={sourceName} readOnly />
-                                </Form.Group>
-
-                                <Form.Group controlId="db_org">
-                                    <Form.Label>Db Org</Form.Label>
-                                    <Form.Control type="text" value={dbOrg} readOnly />
-                                </Form.Group>
-                                <Form.Group controlId="measured_obj_class">
-                                    <Form.Label>Measured Object Class</Form.Label>
-                                    <Form.Control type="text" value={measuredObjClass} readOnly />
-                                </Form.Group>
+                <Form.Group controlId="buckettoken">
+                    <Form.Label>DB Token </Form.Label>
+                    <Form.Control type="text" value={dbToken} readOnly />
+                </Form.Group>
+                <Form.Group controlId="db_org">
+                    <Form.Label>Db Org</Form.Label>
+                    <Form.Control type="text" value={dbOrg} readOnly />
+                </Form.Group>
+
+                {dme === true &&
+                    <div>
+                        <Form.Group controlId="SourceName">
+                            <Form.Label>Source Name </Form.Label>
+                            <Form.Control type="text" value={sourceName} readOnly />
+                        </Form.Group>
+
+                        <Form.Group controlId="dmePort">
+                            <Form.Label>Dme Port </Form.Label>
+                            <Form.Control type="text" value={dmePort} readOnly />
+                        </Form.Group>
+                        <Form.Group controlId="measured_obj_class">
+                            <Form.Label>Measured Object Class</Form.Label>
+                            <Form.Control type="text" value={measuredObjClass} readOnly />
+                        </Form.Group>
                     </div>
                 }