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'
<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>
</>
);
<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>
--- /dev/null
+// ==================================================================================
+
+// 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
--- /dev/null
+// ==================================================================================
+
+// 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
Code Review / portal / aiml-dashboard.git / commitdiff