From ea2cbe9785da9c81ad8a441df0aef89726a28b6b Mon Sep 17 00:00:00 2001
From: rajdeep11 <rajdeep.sin@samsung.com>
Date: Tue, 25 Apr 2023 17:44:55 +0530
Subject: [PATCH] gui for list feature group

Issue-Id: AIMLFW-40

Change-Id: I31e45671e003367bb9a61ccf0fcd238824607b8d
Signed-off-by: rajdeep11 <rajdeep.sin@samsung.com>
---
 src/components/home/HomePage.js                |   4 +-
 src/components/home/navbar/NavbarComponent.js  |   1 +
 src/components/home/status/FeatureGroupInfo.js | 120 +++++++++++++++++
 src/components/home/status/ListFeatureGroup.js | 179 +++++++++++++++++++++++++
 4 files changed, 303 insertions(+), 1 deletion(-)
 create mode 100644 src/components/home/status/FeatureGroupInfo.js
 create mode 100644 src/components/home/status/ListFeatureGroup.js

diff --git a/src/components/home/HomePage.js b/src/components/home/HomePage.js
index 9f5bf7f..c3f5504 100644
--- a/src/components/home/HomePage.js
+++ b/src/components/home/HomePage.js
@@ -24,6 +24,7 @@ import CreateFeatureGroup from './create/CreateFeatureGroup'
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import NavbarComponent from './navbar/NavbarComponent';
 import * as CONSTANTS from './common/Constants';
+import ListFeatureGroup from './status/ListFeatureGroup';
 
 
 var DEBUG=CONSTANTS.debug_var==='true'
@@ -46,7 +47,8 @@ class HomePage extends React.Component {
               <Route path='/TrainingJob/TrainingJobsStatus' render={() => <StatusPageRows logger={logger} />} />
               <Route path='/TrainingJob/Pipeline' render={() => <UploadPipelineForm logger={logger} />} />
               <Route path='/TrainingJob/CreateFeatureGroup' render={()=><CreateFeatureGroup logger={logger}/>} />
-            </Switch>
+              <Route path='/TrainingJob/ListFeatureGroups' render={()=><ListFeatureGroup logger={logger}/>} />
+              </Switch>
           </Router>
         </>
       );
diff --git a/src/components/home/navbar/NavbarComponent.js b/src/components/home/navbar/NavbarComponent.js
index 49e83d1..08393a8 100644
--- a/src/components/home/navbar/NavbarComponent.js
+++ b/src/components/home/navbar/NavbarComponent.js
@@ -33,6 +33,7 @@ function NavbarComponent() {
                     <NavDropdown.Item href="/TrainingJob/TrainingJobsStatus">Training Job Status</NavDropdown.Item>
                     <NavDropdown.Item href="/TrainingJob/Pipeline">Pipelines</NavDropdown.Item>
                     <NavDropdown.Item href="/TrainingJob/CreateFeatureGroup">Create Feature Group</NavDropdown.Item>
+                    <NavDropdown.Item href="/TrainingJob/ListFeatureGroups">List Feature Group</NavDropdown.Item>
                 </NavDropdown>
             </Nav>
         </Container>
diff --git a/src/components/home/status/FeatureGroupInfo.js b/src/components/home/status/FeatureGroupInfo.js
new file mode 100644
index 0000000..4be78a3
--- /dev/null
+++ b/src/components/home/status/FeatureGroupInfo.js
@@ -0,0 +1,120 @@
+// ==================================================================================
+
+//        Copyright (c) 2022 Samsung Electronics Co., Ltd. All Rights Reserved.
+
+//    Licensed under the Apache License, Version 2.0 (the "License");
+//    you may not use this file except in compliance with the License.
+//    You may obtain a copy of the License at
+
+//           http://www.apache.org/licenses/LICENSE-2.0
+
+//    Unless required by applicable law or agreed to in writing, software
+//    distributed under the License is distributed on an "AS IS" BASIS,
+//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//    See the License for the specific language governing permissions and
+//    limitations under the License.
+
+// ==================================================================================
+
+import React, { useEffect, useState } from 'react';
+import { Form } from 'react-bootstrap';
+import axios from 'axios';
+import { UCMgr_baseUrl } from '../common/Constants';
+
+const FeatureGroupInfo = (props) => {
+    const [featureGroupName, setFeatureGroupName] = useState("");
+    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("")
+
+    useEffect(()=>{
+        try{
+            axios.get(`${UCMgr_baseUrl}/trainingjobs/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)
+
+            })
+            .catch(error => {
+                console.log(error);
+            });
+        }
+        catch(error){
+            console.log(error);
+        }
+    },[props.featureGroupName]);
+
+
+    return (
+        <>
+            <Form>
+                <Form.Group controlId="FeatureGroupName">
+                    <Form.Label>Feature Group Name</Form.Label>
+                    <Form.Control type="text" value={featureGroupName} readOnly/>
+                </Form.Group>
+                <Form.Group controlId="features">
+                    <Form.Label>Features</Form.Label>
+                    <Form.Control type="text" value={features} readOnly />
+                </Form.Group>
+                <Form.Group controlId="datalake">
+                    <Form.Label>Datalake</Form.Label>
+                    <Form.Control type="text" value={datalake} readOnly />
+                </Form.Group>
+                {   dme === true &&
+                    <div>
+
+                                <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>
+                    </div>
+                }
+
+            </Form>
+        </>
+    );
+}
+
+export default FeatureGroupInfo;
\ No newline at end of file
diff --git a/src/components/home/status/ListFeatureGroup.js b/src/components/home/status/ListFeatureGroup.js
new file mode 100644
index 0000000..2c50551
--- /dev/null
+++ b/src/components/home/status/ListFeatureGroup.js
@@ -0,0 +1,179 @@
+// ==================================================================================
+
+//        Copyright (c) 2023 Samsung Electronics Co., Ltd. All Rights Reserved.
+
+//    Licensed under the Apache License, Version 2.0 (the "License");
+//    you may not use this file except in compliance with the License.
+//    You may obtain a copy of the License at
+
+//           http://www.apache.org/licenses/LICENSE-2.0
+
+//    Unless required by applicable law or agreed to in writing, software
+//    distributed under the License is distributed on an "AS IS" BASIS,
+//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//    See the License for the specific language governing permissions and
+//    limitations under the License.
+
+// ==================================================================================
+
+import React, { useMemo, useState, useEffect } from 'react';
+import BTable from 'react-bootstrap/Table';
+import Button from 'react-bootstrap/Button';
+import { useTable, useRowSelect } from 'react-table';
+import { UCMgr_baseUrl } from '../common/Constants';
+import axios from 'axios';
+import { Checkbox } from './Checkbox';
+import Popup from './Popup';
+import FeatureGroupInfo from './FeatureGroupInfo';
+
+
+const ListFeatureGroup = (props) => {
+    const logger = props.logger
+    const [featureGroups, setFeatureGroups] = useState([])
+    const [infoPopup, setInfoPopup] = useState(false);
+    const closeInfoPopup = () => setInfoPopup(false);
+    const [featureGroupName, setFeatureGroupName] = useState(null);
+    useEffect(() => {
+        logger('useEffect');
+        fetchFeatureGroups();
+        const timer = setInterval(async () => {
+            fetchFeatureGroups();
+        }, 5000);
+        return () => clearInterval(timer);
+    }, []);
+
+
+    const fetchFeatureGroups = async () => {
+        logger('fetchFeatureGroup UCMgr_baseUrl', UCMgr_baseUrl)
+        try {
+            const result = await axios.get(`${UCMgr_baseUrl}/trainingjobs/featureGroup`);
+            logger('fetchFeatureGroup Result', result);
+            logger('feature groups are --> ', result.data.featuregroups)
+            setFeatureGroups(result.data.featuregroups);
+        } catch (e) {
+            console.error(e)
+        }
+    }
+    const handleInfoClick = (featuregroup_name) => {
+        console.log("feature group name is : ", featuregroup_name)
+        setFeatureGroupName({
+            featureGroupName : featuregroup_name
+        });
+        setInfoPopup(true);
+      };
+
+    const handleDme =(dme)=>{
+        if(dme===true)return <p>Enabled</p>;
+        else return <p>Disabled</p>
+    };
+
+    const columns = useMemo(() => [
+        {
+            id: 'selection',
+            Header: ({ getToggleAllRowsSelectedProps }) => (
+                <div>
+                    <Checkbox {...getToggleAllRowsSelectedProps()} />
+                </div>
+            ),
+            Cell: ({ row }) => (
+                <div>
+                    <Checkbox {...row.getToggleRowSelectedProps()} />
+                </div>
+            ),
+        },
+        {
+            id: 'featuregroup_name',
+            Header: 'Feature Group Name',
+            accessor: 'featuregroup_name'
+        },
+        {
+            id: 'features',
+            Header: 'Features',
+            accessor: 'features'
+        },
+        {
+            id: 'datalake',
+            Header: 'DataLake',
+            accessor: 'datalake'
+        },
+        {   
+            id: 'dme',
+            Header: 'DME',
+            accessor: 'dme',
+            Cell: ({row}) => {
+                return (
+                    <div >
+                        {handleDme(row.original.dme)}
+                    </div>
+                );   
+              }
+
+        },
+        {
+            id: 'info',
+            Header: 'Info',
+            Cell : ({row}) => {
+                return (
+                    <div>
+                <Button variant="info" onClick={() => handleInfoClick(row.original.featuregroup_name)}>Info</Button>
+                    </div>
+                );   
+              }
+    }
+    ], []);
+    const data = useMemo(() => featureGroups, [featureGroups]);
+    const {
+        getTableProps,
+        headerGroups,
+        rows,
+        prepareRow,
+        selectedFlatRows,
+        toggleAllRowsSelected
+    } = useTable(
+        {
+            columns,
+            data,
+            autoResetSelectedRows: false
+        },
+        useRowSelect
+    )
+    return (
+        <>
+        <BTable className="Status_table" responsive striped bordered hover size="sm"  {...getTableProps()}>
+            <thead>
+                {headerGroups.map(headerGroup => (
+                    <tr {...headerGroup.getHeaderGroupProps()}>
+                        {headerGroup.headers.map(column => (
+                            <th {...column.getHeaderProps()}>
+                                {column.render('Header')}
+                            </th>
+                        ))}
+                    </tr>
+                ))}
+            </thead>
+            <tbody>
+                {rows.map((row, i) => {
+                    prepareRow(row)
+                    return (
+                        <tr {...row.getRowProps()}>
+                            {row.cells.map(cell => {
+                                return (
+                                    <th {...cell.getCellProps()}>
+                                        {cell.render('Cell')}
+                                    </th>
+                                )
+                            })}
+                        </tr>
+                    )
+                })}
+            </tbody>
+            </BTable>
+            <Popup show={infoPopup} onHide={closeInfoPopup} title="Feature Group Info">
+                <FeatureGroupInfo featureGroupName={featureGroupName} />
+            </Popup>
+        </>
+
+    );
+}
+
+export default ListFeatureGroup;
\ No newline at end of file
-- 
2.16.6