<!-- limitations under the License. -->
<!-- -->
<!-- ================================================================================== -->
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
- <meta
- name="description"
- content="Web site created using create-react-app"
- />
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-
+ <meta name="description" content="Web site created using create-react-app" />
+ <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
- /* ==================================================================================
+/* ==================================================================================
Copyright (c) 2022 Samsung Electronics Co., Ltd. All Rights Reserved.
.status-buttons {
color: rgb(94, 83, 83);
- background-color: #4CAF50;
+ background-color: #4caf50;
}
.create-tab {
height: 40vmin;
pointer-events: none;
}
-
+
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
-
+
.App-header {
background-color: #282c34;
min-height: 100vh;
.App-link {
color: #61dafb;
}
-
+
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
to {
transform: rotate(360deg);
}
-}
\ No newline at end of file
+}
function App() {
return (
- <div className="App">
- <HomePage/>
+ <div className='App'>
+ <HomePage />
</div>
);
}
-
+
export default App;
import React from 'react';
import CreateTrainingJob from './create/CreateTrainingJob';
import StatusPageRows from './status/StatusPageRows';
-import UploadPipelineForm from './pipelines/UploadPipeline'
-import CreateFeatureGroup from './create/CreateFeatureGroup'
+import UploadPipelineForm from './pipelines/UploadPipeline';
+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'
-var logger = function(){
- if(DEBUG){
- console.log.apply(console, arguments);
- }
-}
+var DEBUG = CONSTANTS.debug_var === 'true';
+var logger = function () {
+ if (DEBUG) {
+ console.log.apply(console, arguments);
+ }
+};
class HomePage extends React.Component {
-
render() {
- return (
- <>
- <Router>
- <NavbarComponent />
- <Switch>
- <Route path='/' exact component={Home} />
- <Route path='/TrainingJob/CreateTrainingJob' render={() => <CreateTrainingJob logger={logger} />} />
- <Route path='/TrainingJob/TrainingJobsStatus' render={() => <StatusPageRows logger={logger} />} />
- <Route path='/TrainingJob/Pipeline' render={() => <UploadPipelineForm logger={logger} />} />
- <Route path='/TrainingJob/CreateFeatureGroup' render={()=><CreateFeatureGroup logger={logger}/>} />
- <Route path='/TrainingJob/ListFeatureGroups' render={()=><ListFeatureGroup logger={logger}/>} />
- </Switch>
- </Router>
- </>
- );
+ return (
+ <>
+ <Router>
+ <NavbarComponent />
+ <Switch>
+ <Route path='/' exact component={Home} />
+ <Route path='/TrainingJob/CreateTrainingJob' render={() => <CreateTrainingJob logger={logger} />} />
+ <Route path='/TrainingJob/TrainingJobsStatus' render={() => <StatusPageRows logger={logger} />} />
+ <Route path='/TrainingJob/Pipeline' render={() => <UploadPipelineForm logger={logger} />} />
+ <Route path='/TrainingJob/CreateFeatureGroup' render={() => <CreateFeatureGroup logger={logger} />} />
+ <Route path='/TrainingJob/ListFeatureGroups' render={() => <ListFeatureGroup logger={logger} />} />
+ </Switch>
+ </Router>
+ </>
+ );
}
}
export default HomePage;
-
-class Home extends React.Component{
+class Home extends React.Component {
render() {
return <></>;
}
}
-
// ==================================================================================
-export function getDatalakeNameWithoutConversion(datalakeNameWhichIsConverted){
- if(datalakeNameWhichIsConverted === 'InfluxSource'){
- return 'Influx DB';
- }
- else if(datalakeNameWhichIsConverted === 'CassandraSource'){
- return 'Cassandra DB';
+export function getDatalakeNameWithoutConversion(datalakeNameWhichIsConverted) {
+ if (datalakeNameWhichIsConverted === 'InfluxSource') {
+ return 'Influx DB';
+ } else if (datalakeNameWhichIsConverted === 'CassandraSource') {
+ return 'Cassandra DB';
}
return null;
}
-export function convertDatalakeDBName(datalakeNameWithoutConversion){
- if(datalakeNameWithoutConversion === 'Influx DB'){
+export function convertDatalakeDBName(datalakeNameWithoutConversion) {
+ if (datalakeNameWithoutConversion === 'Influx DB') {
return 'InfluxSource';
- }
- else if(datalakeNameWithoutConversion === 'Cassandra DB'){
+ } else if (datalakeNameWithoutConversion === 'Cassandra DB') {
return 'CassandraSource';
}
return null;
}
-export function convertToCommaSeparatedString(obj){
- console.log("before changing in convertToCommaSeparatedString: ", obj);
- let cs_string = "";
+export function convertToCommaSeparatedString(obj) {
+ console.log('before changing in convertToCommaSeparatedString: ', obj);
+ let cs_string = '';
let counter = 0;
// Object.entries(obj).map(([key, value]) => {
- for(const [key,value] of Object.entries(obj)){
- if(key !== "usecase"){
- if (counter > 0){
- cs_string += ","
+ for (const [key, value] of Object.entries(obj)) {
+ if (key !== 'usecase') {
+ if (counter > 0) {
+ cs_string += ',';
}
- cs_string += key.toString() + ":" + value.toString();
+ cs_string += key.toString() + ':' + value.toString();
counter += 1;
- }
- };
- console.log("after changing in convertToCommaSeparatedString: ", cs_string);
+ }
+ }
+ console.log('after changing in convertToCommaSeparatedString: ', cs_string);
return cs_string;
}
// ==================================================================================
-export const UCMgr_baseUrl = 'http://' + process.env.REACT_APP_UCM_HOST +':' + process.env.REACT_APP_UCM_PORT
-export const notebook_url = 'http://' + process.env.REACT_APP_NOTEBOOK_HOST +':' + process.env.REACT_APP_NOTEBOOK_PORT
-export const ServiceMgr_baseUrl = 'http://' + process.env.REACT_APP_ServiceMgr_HOST +':' + process.env.REACT_APP_ServiceMgr_PORT
-export const debug_var = process.env.REACT_APP_DEBUG
-// export const UCMgr_baseUrl = 'http://localhost:32002'
-// export const notebook_url = 'http://localhost:32088'
-// export const ServiceMgr_baseUrl = 'http://localhost:30180'
\ No newline at end of file
+export const UCMgr_baseUrl = 'http://' + process.env.REACT_APP_UCM_HOST + ':' + process.env.REACT_APP_UCM_PORT;
+export const notebook_url = 'http://' + process.env.REACT_APP_NOTEBOOK_HOST + ':' + process.env.REACT_APP_NOTEBOOK_PORT;
+export const ServiceMgr_baseUrl =
+ 'http://' + process.env.REACT_APP_ServiceMgr_HOST + ':' + process.env.REACT_APP_ServiceMgr_PORT;
+export const debug_var = process.env.REACT_APP_DEBUG;
+// export const UCMgr_baseUrl = 'http://localhost:32002'
+// export const notebook_url = 'http://localhost:32088'
+// export const ServiceMgr_baseUrl = 'http://localhost:30180'
// limitations under the License.
// ==================================================================================
-import React from 'react'
-import Button from 'react-bootstrap/Button'
-import CreateFeatureGroupForm from '../form/CreateFeatureGroupForm'
-import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
-import Popover from 'react-bootstrap/Popover'
-
-
+import React from 'react';
+import Button from 'react-bootstrap/Button';
+import CreateFeatureGroupForm from '../form/CreateFeatureGroupForm';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Popover from 'react-bootstrap/Popover';
class CreateFeatureGroup extends React.Component {
- constructor(props) {
- super(props);
- this.logger = this.props.logger;
- }
- popover = () => (
- <Popover id="popover-basic">
- <Popover.Title as="h3">Field descriptions</Popover.Title>
- <Popover.Content>
- <strong>Feature Group Name</strong>
- <br></br>
- Name of the Feature Group<br></br>
- It must be between 3 and 63 characters long <br></br>
- It can only consist of Letters and numbers and underscore
- <br></br>
- <strong>Features</strong>
- <br></br>
- The Feature have to be added as comma seperated string<br></br>
- eg: a,b<br></br>
- <strong>DataLake</strong>
- <br></br>
- Right now it is fixed to InfluxDB but in the future, we will add support<br></br>
- other datalakes too. <br></br>
- <strong>Influx db Info</strong>
- <br></br>
- Provide the InfluxDB Org, Host, Port, Bucket Name and token.<br></br>
- <strong>DME</strong>
- <br></br>
- Select DME to add the dme job info like SourceName, Measured Obj Class and dmePort.
- <br></br>
- </Popover.Content>
- </Popover>
- );
- render() {
- return (
- <>
- <OverlayTrigger trigger="click" placement="right" overlay={this.popover()}>
- <Button className="from-tooltip" placement="right" variant="secondary">?</Button>
- </OverlayTrigger>
+ constructor(props) {
+ super(props);
+ this.logger = this.props.logger;
+ }
+ popover = () => (
+ <Popover id='popover-basic'>
+ <Popover.Title as='h3'>Field descriptions</Popover.Title>
+ <Popover.Content>
+ <strong>Feature Group Name</strong>
+ <br></br>
+ Name of the Feature Group<br></br>
+ It must be between 3 and 63 characters long <br></br>
+ It can only consist of Letters and numbers and underscore
+ <br></br>
+ <strong>Features</strong>
+ <br></br>
+ The Feature have to be added as comma seperated string<br></br>
+ eg: a,b<br></br>
+ <strong>DataLake</strong>
+ <br></br>
+ Right now it is fixed to InfluxDB but in the future, we will add support<br></br>
+ other datalakes too. <br></br>
+ <strong>Influx db Info</strong>
+ <br></br>
+ Provide the InfluxDB Org, Host, Port, Bucket Name and token.<br></br>
+ <strong>DME</strong>
+ <br></br>
+ Select DME to add the dme job info like SourceName, Measured Obj Class and dmePort.
+ <br></br>
+ </Popover.Content>
+ </Popover>
+ );
+ render() {
+ return (
+ <>
+ <OverlayTrigger trigger='click' placement='right' overlay={this.popover()}>
+ <Button className='from-tooltip' placement='right' variant='secondary'>
+ ?
+ </Button>
+ </OverlayTrigger>
- <CreateFeatureGroupForm logger={this.logger}></CreateFeatureGroupForm>
- </>
- );
- }
+ <CreateFeatureGroupForm logger={this.logger}></CreateFeatureGroupForm>
+ </>
+ );
+ }
}
-export default CreateFeatureGroup;
\ No newline at end of file
+export default CreateFeatureGroup;
// ==================================================================================
-import React from 'react'
-import Button from 'react-bootstrap/Button'
-import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
-import Popover from 'react-bootstrap/Popover'
-import CreateOrEditTrainingJobForm from '../form/CreateOrEditTrainingJobForm'
-
+import React from 'react';
+import Button from 'react-bootstrap/Button';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Popover from 'react-bootstrap/Popover';
+import CreateOrEditTrainingJobForm from '../form/CreateOrEditTrainingJobForm';
class CreateTrainingJob extends React.Component {
- constructor(props){
+ constructor(props) {
super(props);
- this.logger=this.props.logger;
+ this.logger = this.props.logger;
}
- popover = () =>(
- <Popover id="popover-basic">
- <Popover.Title as="h3">Field descriptions</Popover.Title>
+ popover = () => (
+ <Popover id='popover-basic'>
+ <Popover.Title as='h3'>Field descriptions</Popover.Title>
<Popover.Content>
- <strong>Training Job Name</strong>
+ <strong>Training Job Name</strong>
<br></br>
Name of the Training Job. <br></br>
It must be between 3 and 63 characters long. <br></br>
<br></br>
<strong>Training Function Name</strong>
<br></br>
- Select an existing training function name corresponding to a ML model, when model management service is disabled.
+ Select an existing training function name corresponding to a ML model, when model management service is
+ disabled.
<br></br>
<strong>Feature Names</strong>
<br></br>
- Select from existing feature groups, when model management service is disabled.
+ Select from existing feature groups, when model management service is disabled.
<br></br>
<strong>Feature Filter</strong>
<br></br>
Filtering Clause for the Selected KPI's<br></br>
- Example --> enb > 10
- <br></br>
- Example --> cellNum => 10 and enb == 7
+ Example --> enb > 10
<br></br>
+ Example --> cellNum => 10 and enb == 7<br></br>
<strong>Hyper Parameters</strong>
<br></br>
Comma separated, key-value pair of model tuning<br></br>
render() {
return (
<>
- <OverlayTrigger trigger="click" placement="right" overlay={this.popover()}>
- <Button className="from-tooltip" placement="right" variant="secondary">?</Button>
+ <OverlayTrigger trigger='click' placement='right' overlay={this.popover()}>
+ <Button className='from-tooltip' placement='right' variant='secondary'>
+ ?
+ </Button>
</OverlayTrigger>
<CreateOrEditTrainingJobForm isCreateTrainingJobForm={true} logger={this.logger}></CreateOrEditTrainingJobForm>
- /* ==================================================================================
+/* ==================================================================================
Copyright (c) 2023 Samsung Electronics Co., Ltd. All Rights Reserved.
================================================================================== */
.create-form {
- font-weight: bold;
- width: 50%;
- padding-right: 15px;
- padding-left: 15px;
- margin-right: auto;
- margin-left: auto;
- }
\ No newline at end of file
+ font-weight: bold;
+ width: 50%;
+ padding-right: 15px;
+ padding-left: 15px;
+ margin-right: auto;
+ margin-left: auto;
+}
// ==================================================================================
-import React from 'react'
-import Form from 'react-bootstrap/Form'
-import Button from 'react-bootstrap/Button'
-import * as CONSTANTS from '../common/Constants'
-import { convertDatalakeDBName } from '../common/CommonMethods'
+import React from 'react';
+import Form from 'react-bootstrap/Form';
+import Button from 'react-bootstrap/Button';
+import * as CONSTANTS from '../common/Constants';
+import { convertDatalakeDBName } from '../common/CommonMethods';
import axios from 'axios';
-import './CreateFeatureGroupForm.css'
-import { Row, Col } from 'react-bootstrap'
-
+import './CreateFeatureGroupForm.css';
+import { Row, Col } from 'react-bootstrap';
class CreateFeatureGroup extends React.Component {
- constructor(props) {
- super(props);
-
- this.state = {
- featureGroupName: '',
- featureNames: '',
- dataLake: "Influx DB",
- dme: false,
- host: '',
- port: '',
- dmePort: '',
- bucketName: '',
- token: '',
- sourceName: '',
- dbOrg: '',
- measuredObjClass: '',
- _measurement: '',
- UCMgr_baseUrl: CONSTANTS.UCMgr_baseUrl,
- };
-
- this.regName = new RegExp('\\W+')
- this.logger = this.props.logger;
- this.logger('Initial UCM URL, ', this.state.UCMgr_baseUrl)
- }
+ constructor(props) {
+ super(props);
- handleCreateSubmit = event => {
- this.logger('Create Feature Group clicked: ',
- );
+ this.state = {
+ featureGroupName: '',
+ featureNames: '',
+ dataLake: 'Influx DB',
+ dme: false,
+ host: '',
+ port: '',
+ dmePort: '',
+ bucketName: '',
+ token: '',
+ sourceName: '',
+ dbOrg: '',
+ measuredObjClass: '',
+ _measurement: '',
+ UCMgr_baseUrl: CONSTANTS.UCMgr_baseUrl,
+ };
- this.invokeAddFeatureGroup(event)
- event.preventDefault();
-
- }
+ this.regName = new RegExp('\\W+');
+ this.logger = this.props.logger;
+ this.logger('Initial UCM URL, ', this.state.UCMgr_baseUrl);
+ }
- handleDmeChange = (event) => {
- this.setState({
- dme: event.target.checked
- }, () => {
- this.logger("after set state, dme: ", this.state.dme);
- })
- }
+ handleCreateSubmit = event => {
+ this.logger('Create Feature Group clicked: ');
- handleFGNameChange = (event) => {
- if (this.regName.test(event.target.value)) {
- event.preventDefault();
- alert("Please use alphabet, number, and underscore to Feature Group Name.");
- } else {
- this.setState({
- featureGroupName: event.target.value
- }, () => {
- this.logger("after set state, FeatureGroup Name: ", this.state.featureGroupName);
- })
- }
- }
+ this.invokeAddFeatureGroup(event);
+ event.preventDefault();
+ };
- handleHostChange = (event) => {
- this.setState({
- host: event.target.value
- }, () => {
- this.logger("after set state, Hostname: ", this.state.host);
- })
- }
+ handleDmeChange = event => {
+ this.setState(
+ {
+ dme: event.target.checked,
+ },
+ () => {
+ this.logger('after set state, dme: ', this.state.dme);
+ },
+ );
+ };
- handlePortChange = (event) => {
- this.setState({
- port: event.target.value
- }, () => {
- this.logger("after set state, Port: ", this.state.port);
- })
+ handleFGNameChange = event => {
+ if (this.regName.test(event.target.value)) {
+ event.preventDefault();
+ alert('Please use alphabet, number, and underscore to Feature Group Name.');
+ } else {
+ this.setState(
+ {
+ featureGroupName: event.target.value,
+ },
+ () => {
+ this.logger('after set state, FeatureGroup Name: ', this.state.featureGroupName);
+ },
+ );
}
+ };
- handleDmePortChange = (event) => {
- this.setState({
- dmePort: event.target.value
- }, () => {
- this.logger("after set state, Port: ", this.state.dmePort);
- })
- }
+ handleHostChange = event => {
+ this.setState(
+ {
+ host: event.target.value,
+ },
+ () => {
+ this.logger('after set state, Hostname: ', this.state.host);
+ },
+ );
+ };
- handleFeatureNamesChange = (event) => {
- this.logger('handleFeatureNamesChange', event.target.value)
- this.setState({
- featureNames: event.target.value
- }, () => {
- this.logger("after set state, featureNames: ", this.state.featureNames);
- })
- }
+ handlePortChange = event => {
+ this.setState(
+ {
+ port: event.target.value,
+ },
+ () => {
+ this.logger('after set state, Port: ', this.state.port);
+ },
+ );
+ };
- handleBucketNameChange = (event) => {
- this.setState({
- bucketName: event.target.value
- }, () => {
- this.logger("after set state, bucketName: ", this.state.bucketName);
- })
- }
- handledbTokenChange = (event) => {
- this.setState({
- token: event.target.value
- }, () => {
- this.logger("after set state, influxDBToken: ", this.state.token);
- })
- }
+ handleDmePortChange = event => {
+ this.setState(
+ {
+ dmePort: event.target.value,
+ },
+ () => {
+ this.logger('after set state, Port: ', this.state.dmePort);
+ },
+ );
+ };
- handleSourceNameChange = (event) => {
- this.setState({
- sourceName: event.target.value
- }, () => {
- this.logger("after set state, sourceName: ", this.state.sourceName);
- })
- }
- handledbOrg = (event) => {
- this.setState({
- dbOrg: event.target.value
- }, () => {
- this.logger("after set state, dbOrg: ", this.state.dbOrg)
- })
- }
+ handleFeatureNamesChange = event => {
+ this.logger('handleFeatureNamesChange', event.target.value);
+ this.setState(
+ {
+ featureNames: event.target.value,
+ },
+ () => {
+ this.logger('after set state, featureNames: ', this.state.featureNames);
+ },
+ );
+ };
- handleMeasuredObjClass = (event) => {
- this.setState({
- measuredObjClass: event.target.value
- }, () => {
- this.logger("after set state, measuredObjClass: ", this.state.measuredObjClass)
- })
- }
- handle_measurementChange =(event)=>{
- this.setState({
- _measurement: event.target.value
- }, () =>{
- this.logger("after set state, dbOrg: ", this.state.dbOrg)
- })
- }
- invokeAddFeatureGroup(event) {
- this.logger('Add New Request is posted at ' + this.state.UCMgr_baseUrl + "/featureGroup")
- let convertedDatalakeDBName = convertDatalakeDBName(this.state.dataLake);
- axios.post(this.state.UCMgr_baseUrl + "/featureGroup", {
- "featureGroupName": this.state.featureGroupName,
- "feature_list": this.state.featureNames,
- "datalake_source": convertedDatalakeDBName,
- "enable_Dme": this.state.dme,
- "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,
- "measured_obj_class": this.state.measuredObjClass,
- '_measurement': this.state._measurement,
- "dbOrg": this.state.dbOrg
- }).then(res => {
- this.logger('featureGroup Created', res.data)
- if (res.status === 200) {
- alert("FeatureGroup Created")
- this.resetForm()
- }
- })
- .catch((error) => {
- this.logger('Error creating featureGroup', error);
- alert("Failed: " + error.response.data.Exception)
- event.preventDefault();
- }).then(function () {
- // always executed
- })
- }
+ handleBucketNameChange = event => {
+ this.setState(
+ {
+ bucketName: event.target.value,
+ },
+ () => {
+ this.logger('after set state, bucketName: ', this.state.bucketName);
+ },
+ );
+ };
+ handledbTokenChange = event => {
+ this.setState(
+ {
+ token: event.target.value,
+ },
+ () => {
+ this.logger('after set state, influxDBToken: ', this.state.token);
+ },
+ );
+ };
- resetForm = () => {
- this.setState({
- featureGroupName: '',
- featureNames: '',
- dataLake: "Influx DB",
- dme: false,
- host: '',
- port: '',
- dmePort: '',
- bucketName: '',
- token: '',
- sourceName: '',
- measuredObjClass: '',
- _measurement: '',
- dbOrg: ''
- })
- }
+ handleSourceNameChange = event => {
+ this.setState(
+ {
+ sourceName: event.target.value,
+ },
+ () => {
+ this.logger('after set state, sourceName: ', this.state.sourceName);
+ },
+ );
+ };
+ handledbOrg = event => {
+ this.setState(
+ {
+ dbOrg: event.target.value,
+ },
+ () => {
+ this.logger('after set state, dbOrg: ', this.state.dbOrg);
+ },
+ );
+ };
- render() {
- return (
- <Form onSubmit={this.handleCreateSubmit}
- className="create-form">
- <Row>
- <Col md>
- <Form.Group controlId="FGname">
- <Form.Label>Feature Group Name* </Form.Label>
- <Form.Control type="text"
- value={this.state.featureGroupName}
- onChange={this.handleFGNameChange}
- placeholder=""
- required />
- </Form.Group>
- </Col>
- <Col md>
- <Form.Group controlId="Features">
- <Form.Label>Features* </Form.Label>
- <Form.Control type="text"
- value={this.state.featureNames}
- onChange={this.handleFeatureNamesChange}
- placeholder=""
- required />
- </Form.Group>
- </Col>
- </Row>
- <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>
+ handleMeasuredObjClass = event => {
+ this.setState(
+ {
+ measuredObjClass: event.target.value,
+ },
+ () => {
+ this.logger('after set state, measuredObjClass: ', this.state.measuredObjClass);
+ },
+ );
+ };
+ handle_measurementChange = event => {
+ this.setState(
+ {
+ _measurement: event.target.value,
+ },
+ () => {
+ this.logger('after set state, dbOrg: ', this.state.dbOrg);
+ },
+ );
+ };
+ invokeAddFeatureGroup(event) {
+ this.logger('Add New Request is posted at ' + this.state.UCMgr_baseUrl + '/featureGroup');
+ let convertedDatalakeDBName = convertDatalakeDBName(this.state.dataLake);
+ axios
+ .post(this.state.UCMgr_baseUrl + '/featureGroup', {
+ featureGroupName: this.state.featureGroupName,
+ feature_list: this.state.featureNames,
+ datalake_source: convertedDatalakeDBName,
+ enable_Dme: this.state.dme,
+ 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,
+ measured_obj_class: this.state.measuredObjClass,
+ _measurement: this.state._measurement,
+ dbOrg: this.state.dbOrg,
+ })
+ .then(res => {
+ this.logger('featureGroup Created', res.data);
+ if (res.status === 200) {
+ alert('FeatureGroup Created');
+ this.resetForm();
+ }
+ })
+ .catch(error => {
+ this.logger('Error creating featureGroup', error);
+ alert('Failed: ' + error.response.data.Exception);
+ event.preventDefault();
+ })
+ .then(function () {
+ // always executed
+ });
+ }
+ resetForm = () => {
+ this.setState({
+ featureGroupName: '',
+ featureNames: '',
+ dataLake: 'Influx DB',
+ dme: false,
+ host: '',
+ port: '',
+ dmePort: '',
+ bucketName: '',
+ token: '',
+ sourceName: '',
+ measuredObjClass: '',
+ _measurement: '',
+ dbOrg: '',
+ });
+ };
- </Row>
+ render() {
+ return (
+ <Form onSubmit={this.handleCreateSubmit} className='create-form'>
+ <Row>
+ <Col md>
+ <Form.Group controlId='FGname'>
+ <Form.Label>Feature Group Name* </Form.Label>
+ <Form.Control
+ type='text'
+ value={this.state.featureGroupName}
+ onChange={this.handleFGNameChange}
+ placeholder=''
+ required
+ />
+ </Form.Group>
+ </Col>
+ <Col md>
+ <Form.Group controlId='Features'>
+ <Form.Label>Features* </Form.Label>
+ <Form.Control
+ type='text'
+ value={this.state.featureNames}
+ onChange={this.handleFeatureNamesChange}
+ placeholder=''
+ required
+ />
+ </Form.Group>
+ </Col>
+ </Row>
+ <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>
- <Row>
- <Col>
- <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>
- </Col>
- </Row>
- <Form.Group controlId="DME">
- <Form.Check type="checkbox" label="DME"
- checked={this.state.dme} onChange={this.handleDmeChange} />
+ <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>
+ <Row>
+ <Col>
+ <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>
+ </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 && (
+ <div>
+ <Row>
+ <Col md>
+ <Form.Group controlId='SourceName'>
+ <Form.Label>Source Name </Form.Label>
+ <Form.Control
+ type='text'
+ value={this.state.sourceName}
+ onChange={this.handleSourceNameChange}
+ placeholder=''
+ required
+ />
</Form.Group>
- {this.state.dme === true &&
- <div>
- <Row>
- <Col md>
- <Form.Group controlId="SourceName">
- <Form.Label>Source Name </Form.Label>
- <Form.Control type="text"
- value={this.state.sourceName}
- onChange={this.handleSourceNameChange}
- placeholder=""
- required />
- </Form.Group>
- </Col>
-
- </Row>
- <Row>
- <Col md>
- <Form.Group controlId="measuredObjClass">
- <Form.Label>Measured Obj Class</Form.Label>
- <Form.Control type="text"
- value={this.state.measuredObjClass}
- onChange={this.handleMeasuredObjClass}
- 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>
- </div>
- }
-
- <Button type="submit" class="btn btn-primary">Create Feature Group</Button>
- </Form>
+ </Col>
+ </Row>
+ <Row>
+ <Col md>
+ <Form.Group controlId='measuredObjClass'>
+ <Form.Label>Measured Obj Class</Form.Label>
+ <Form.Control
+ type='text'
+ value={this.state.measuredObjClass}
+ onChange={this.handleMeasuredObjClass}
+ 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>
+ </div>
+ )}
- );
- }
+ <Button type='submit' class='btn btn-primary'>
+ Create Feature Group
+ </Button>
+ </Form>
+ );
+ }
}
-export default CreateFeatureGroup;
\ No newline at end of file
+export default CreateFeatureGroup;
- /* ==================================================================================
+/* ==================================================================================
Copyright (c) 2022 Samsung Electronics Co., Ltd. All Rights Reserved.
================================================================================== */
.create-form {
- font-weight: bold;
- width: 50%;
- padding-right: 15px;
- padding-left: 15px;
- margin-right: auto;
- margin-left: auto;
- }
+ font-weight: bold;
+ width: 50%;
+ padding-right: 15px;
+ padding-left: 15px;
+ margin-right: auto;
+ margin-left: auto;
+}
-.edit-form{
- font-weight: bold;
-}
\ No newline at end of file
+.edit-form {
+ font-weight: bold;
+}
// ==================================================================================
-import React from 'react'
-import Form from 'react-bootstrap/Form'
-import Button from 'react-bootstrap/Button'
+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 './CreateOrEditTrainingJobForm.css'
-import { getDatalakeNameWithoutConversion, convertDatalakeDBName, convertToCommaSeparatedString } from '../common/CommonMethods'
+import * as CONSTANTS from '../common/Constants';
+import './CreateOrEditTrainingJobForm.css';
+import {
+ getDatalakeNameWithoutConversion,
+ convertDatalakeDBName,
+ convertToCommaSeparatedString,
+} from '../common/CommonMethods';
class CreateTrainingJob extends React.Component {
constructor(props) {
plVerList: [],
plVerName: '',
plVerDescription: '',
- datalakeSourceList: ["Influx DB"],
- datalakeSourceName: ''
+ datalakeSourceList: ['Influx DB'],
+ datalakeSourceName: '',
};
- this.regName = new RegExp('\\W+')
+ this.regName = new RegExp('\\W+');
this.logger = this.props.logger;
- this.logger('Initial UCM URL, ', this.state.UCMgr_baseUrl)
- this.logger('All env', process.env)
+ 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);
-
}
componentDidMount() {
- this.logger("componentDidMount...");
+ this.logger('componentDidMount...');
// this.logger(this.props.isCreateTrainingJobForm) this is true
const task = () => {
- this.logger("called the task");
+ this.logger('called the task');
this.fetchPipelines();
// this.fetchExperiments();
this.fetchFeatureGroups();
- if (this.state.plName !== "") {
+ if (this.state.plName !== '') {
this.fetchPipelineVersions(this.state.plName, false);
}
}
}
if (shouldChangeDatalakeSourceName) {
- this.setState({ datalakeSourceName: '' }, () => this.logger("current selected datalakeSourceName: ", this.state.datalakeSourceName));
- }
- else {
- this.logger("current selected datalakeSourceName: ", this.state.datalakeSourceName);
+ this.setState({ datalakeSourceName: '' }, () =>
+ this.logger('current selected datalakeSourceName: ', this.state.datalakeSourceName),
+ );
+ } else {
+ this.logger('current selected datalakeSourceName: ', this.state.datalakeSourceName);
}
-
};
if (!this.props.isCreateTrainingJobForm) {
- axios.get(`${CONSTANTS.UCMgr_baseUrl}/trainingjobs/${this.props.trainingjob_name}/${this.props.version}`)
+ axios
+ .get(`${CONSTANTS.UCMgr_baseUrl}/trainingjobs/${this.props.trainingjob_name}/${this.props.version}`)
.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)
- }, () => {
- task()
- });
+ 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),
+ },
+ () => {
+ 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)
+ this.logger('Server reponded pl', res.data.pipeline_names);
//setState because this is async response from axios, so re-render
this.setState(
{
- plList: res.data.pipeline_names
+ plList: res.data.pipeline_names,
},
() => {
let shouldChangePlName = true;
}
}
if (shouldChangePlName) {
- this.setState({ plName: '' }, () => this.logger("current selected plName: ", this.state.plName));
+ 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( (error) =>{
+ .catch(error => {
this.logger('Got some error' + error);
})
- .then(function () {
- })
+ .then(function () {});
}
getLatestVersion(whom) {
- if (whom === "plVerList") {
- let latest = "";
+ if (whom === 'plVerList') {
+ let latest = '';
for (let version of this.state.plVerList) {
if (isNaN(parseInt(version))) {
- if (latest === "") {
+ if (latest === '') {
latest = version;
}
- }
- else {
- if (latest === "" || isNaN(parseInt(latest))) {
+ } else {
+ if (latest === '' || isNaN(parseInt(latest))) {
latest = version;
- }
- else {
+ } else {
if (parseInt(latest) < parseInt(version)) {
latest = version;
}
}
}
return latest;
- }
- else {
- let latest = "";
+ } else {
+ let latest = '';
for (let version of this.state.superModelVersionsList) {
- if (latest === "") {
+ if (latest === '') {
latest = version;
- }
- else {
+ } else {
if (parseInt(latest) < parseInt(version)) {
latest = version;
}
}
}
if (shouldChangePlVerName) {
- this.setState({ plVerName: '' }, () => this.logger("current selected plVerName: ", this.state.plVerName));
- }
- else {
- this.logger("current selected plVerName: ", this.state.plVerName);
+ this.setState({ plVerName: '' }, () => 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)
+ this.logger('Server reponded pipeline versions list', res.data.versions_list);
//setState because this is async response from axios, so re-render
this.setState(
{
- plVerList: res.data.versions_list
+ plVerList: res.data.versions_list,
},
() => {
-
if (shouldGetLatestVersion) {
- this.setState({ plVerName: this.getLatestVersion("plVerList") }, () => {
+ this.setState({ plVerName: this.getLatestVersion('plVerList') }, () => {
this.makingCorrectPlVerIfWrong();
- })
- }
- else {
+ });
+ } else {
this.makingCorrectPlVerIfWrong();
}
- }
+ },
);
-
})
- .catch( (error) =>{
+ .catch(error => {
// handle error
this.logger('Got some error' + error);
})
.then(function () {
// always executed
- })
+ });
}
-
-
fetchExperiments() {
- axios.get(this.state.UCMgr_baseUrl + '/experiments')
+ axios
+ .get(this.state.UCMgr_baseUrl + '/experiments')
.then(res => {
this.logger('Server reponded exp', res.data.experiment_names);
//setState because this is async response from axios, so re-render
this.setState(
{
- expList: res.data.experiment_names
+ expList: res.data.experiment_names,
},
() => {
let shouldChangeExpName = true;
}
}
if (shouldChangeExpName) {
- this.setState({ expName: '' }, () => this.logger("current selected expName: ", this.state.expName));
+ 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( (error) =>{
+ .catch(error => {
// handle error
this.logger('Got some error' + error);
})
.then(function () {
// always executed
- })
-
+ });
}
fetchFeatureGroups() {
- axios.get(this.state.UCMgr_baseUrl + '/featureGroup')
+ axios
+ .get(this.state.UCMgr_baseUrl + '/featureGroup')
.then(res => {
this.logger('Server reponded FG', res.data.featuregroups);
//setState because this is async response from axios, so re-render
this.setState(
{
- featureGroupList: res.data.featuregroups
+ featureGroupList: res.data.featuregroups,
},
() => {
let shouldChangeFGname = true;
}
}
if (shouldChangeFGname) {
- this.setState({ featureGroupName: '' }, () => this.logger("current selected fGName: ", this.state.featureGroupName));
- }
- else {
- this.logger("current selected fGName: ", this.state.featureGroupName);
+ this.setState({ featureGroupName: '' }, () =>
+ this.logger('current selected fGName: ', this.state.featureGroupName),
+ );
+ } else {
+ this.logger('current selected fGName: ', this.state.featureGroupName);
}
- }
+ },
);
})
- .catch( (error)=> {
+ .catch(error => {
// handle error
this.logger('Got some error' + error);
})
.then(function () {
// always executed
- })
-
+ });
}
-
handleCreateSubmit = event => {
- this.logger('Create TrainingJob clicked: ',
+ this.logger(
+ 'Create TrainingJob clicked: ',
this.state.ucName,
this.state.plName,
this.state.isMme,
this.state.targetName,
this.state.ucDescription,
this.state.plVerName,
- this.state.datalakeSourceName
+ this.state.datalakeSourceName,
);
- this.invokeAddTrainingJob(event)
+ this.invokeAddTrainingJob(event);
event.preventDefault();
- }
+ };
handleEditSubmit = event => {
-
- this.logger('Edit usecase clicked: ',
+ this.logger(
+ 'Edit usecase clicked: ',
this.state.ucName,
this.state.plName,
this.state.isMme,
this.state.targetName,
this.state.ucDescription,
this.state.plVerName,
- this.state.datalakeSourceName
+ this.state.datalakeSourceName,
);
this.invokePutTrainingJob(event);
event.preventDefault();
- }
+ };
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,
- "is_mme": this.state.isMme,
- "model_name": this.state.modelName,
- "pipeline_name": this.state.plName,
- // "experiment_name" : this.state.expName,
- "experiment_name": "Default",
- "featureGroup_name": this.state.featureGroupName,
- "query_filter": this.state.featureFilters,
- "arguments": hyperParamsDict,
- "enable_versioning": this.state.versioning,
- "description": this.state.ucDescription,
- "pipeline_version": this.state.plVerName,
- "datalake_source": convertedDatalakeDBName
- }).then(res => {
- this.logger('UC created ', res.data)
- this.invokeStartTrainingForCreate();
- })
- .catch( (error) =>{
+ 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,
+ is_mme: this.state.isMme,
+ model_name: this.state.modelName,
+ pipeline_name: this.state.plName,
+ // "experiment_name" : this.state.expName,
+ experiment_name: 'Default',
+ featureGroup_name: this.state.featureGroupName,
+ query_filter: this.state.featureFilters,
+ arguments: hyperParamsDict,
+ enable_versioning: this.state.versioning,
+ description: this.state.ucDescription,
+ pipeline_version: this.state.plVerName,
+ datalake_source: convertedDatalakeDBName,
+ })
+ .then(res => {
+ this.logger('UC created ', res.data);
+ this.invokeStartTrainingForCreate();
+ })
+ .catch(error => {
this.logger('Error creating Training Job', error);
- alert("Failed: " + error.response.data.Exception)
+ alert('Failed: ' + error.response.data.Exception);
event.preventDefault();
- })
-
+ });
}
invokePutTrainingJob = 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.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",
- "featureGroup_name": this.state.featureGroupName,
- "query_filter": this.state.featureFilters,
- "arguments": hyperParamsDict,
- "enable_versioning": this.state.versioning,
- "description": this.state.ucDescription,
- "pipeline_version": this.state.plVerName,
- "datalake_source": convertedDatalakeDBName
- //"enable_versioning" : true
- }).then(res => {
- this.logger('UC created ', res.data)
- this.invokeStartTrainingForEdit();
- })
- .catch( (error) =>{
+ 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',
+ featureGroup_name: this.state.featureGroupName,
+ query_filter: this.state.featureFilters,
+ arguments: hyperParamsDict,
+ enable_versioning: this.state.versioning,
+ description: this.state.ucDescription,
+ pipeline_version: this.state.plVerName,
+ datalake_source: convertedDatalakeDBName,
+ //"enable_versioning" : true
+ })
+ .then(res => {
+ this.logger('UC created ', res.data);
+ this.invokeStartTrainingForEdit();
+ })
+ .catch(error => {
// handle error
this.logger('Error creating Use case', error);
- alert("Failed: " + error.response.data.Exception)
+ alert('Failed: ' + error.response.data.Exception);
event.preventDefault();
})
.then(function () {
// always executed
- })
- }
+ });
+ };
invokeStartTrainingForCreate(event) {
- this.logger('Training called ')
- axios.post(this.state.UCMgr_baseUrl
- + '/trainingjobs/' + this.state.ucName + '/training',
- {
- "trainingjobs": this.state.ucName,
- }
- ).then(res => {
- this.logger('Training responsed ', res)
- if (res.status === 200) {
- alert("Training Job created and training initiated")
- this.resetFrom()
- }
- })
+ this.logger('Training called ');
+ axios
+ .post(this.state.UCMgr_baseUrl + '/trainingjobs/' + this.state.ucName + '/training', {
+ trainingjobs: this.state.ucName,
+ })
+ .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)
- alert("Training failed: " + error.response.data.Exception)
+ this.logger('Error in training api,response', error.response.data);
+ alert('Training failed: ' + error.response.data.Exception);
})
.then(function () {
// always executed
- })
+ });
}
invokeStartTrainingForEdit(event) {
- this.logger('Training called ')
- axios.post(this.state.UCMgr_baseUrl
- + '/trainingjobs/' + this.state.ucName + '/training',
- {
- "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)
- }
-
- })
+ this.logger('Training called ');
+ axios
+ .post(this.state.UCMgr_baseUrl + '/trainingjobs/' + this.state.ucName + '/training', {
+ 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);
+ }
+ })
.catch(error => {
- this.logger('Error in training api,response', error.response.data)
- alert("Training failed: " + error.response.data.Exception)
+ this.logger('Error in training api,response', error.response.data);
+ alert('Training failed: ' + error.response.data.Exception);
})
.then(function () {
// always executed
- })
+ });
}
-
buildFeatureNameList(f_names) {
-
- this.logger("before changing in buildFeatureNameList: ", f_names);
- this.logger("after changing in buildFeatureNameList: ", String(f_names).split(","))
- return 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) {
+ 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 = {}
+ let fil_list = String(filters).split(',');
+ let filtDict = {};
for (const filter of fil_list) {
- let token = filter.split(":");
+ let token = filter.split(':');
let key = token[0].trim();
let value = this.getIntOrStringValue(token[1].trim());
this.logger('after changing in buildFeatureFilterDict: ', filtDict);
return filtDict;
-
}
//Fix : Code dumplication merge in common function
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 = {}
+ let paramList = String(hyperArgs).split(',');
+ let paramDict = {};
for (const param of paramList) {
- let token = param.split(":");
+ 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;
+ 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)
- var value = parseInt(inputValue)
+ this.logger('Before changing in getIntOrStringValue: ', inputValue);
+ var value = parseInt(inputValue);
if (isNaN(value)) {
- value = inputValue
+ value = inputValue;
}
- this.logger('After changing in getIntOrStringValue: ', value)
+ this.logger('After changing in getIntOrStringValue: ', value);
return value;
}
- handleUCNameChange = (event) => {
+ handleUCNameChange = event => {
if (this.regName.test(event.target.value)) {
event.preventDefault();
- alert("Please use alphabet, number, and underscore to Training Job Name.");
+ alert('Please use alphabet, number, and underscore to Training Job Name.');
} else {
- this.setState({
- ucName: event.target.value
- }, () => {
- this.logger("after set state, ucName: ", this.state.ucName);
- })
+ 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);
- })
- }
-
- handleFeatureGroupNamesChange = (event) => {
- this.setState({
- featureGroupName: event.target.value
- }, () => {
- this.logger("after set state, FeatureGroup Name: ", this.state.featureGroupName);
- })
- }
+ handlePLNameChange = event => {
+ this.setState(
+ {
+ plName: event.target.value,
+ },
+ () => {
+ this.logger('after set state, plName: ', this.state.plName);
+ this.fetchPipelineVersions(this.state.plName, true);
+ },
+ );
+ };
- handleFeatFiltersChange = (event) => {
- this.setState({
- featureFilters: event.target.value
- }, () => {
- this.logger("after set state, featureFilters: ", this.state.featureFilters);
- })
- }
+ handleExpNameChange = event => {
+ this.setState(
+ {
+ expName: event.target.value,
+ },
+ () => {
+ this.logger('after set state, expName: ', this.state.expName);
+ },
+ );
+ };
- handleHyparamsChange = (event) => {
- this.setState({
- hyparams: event.target.value
- }, () => {
- this.logger("after set state, hyparams: ", this.state.hyparams);
- })
- }
+ handleFeatureGroupNamesChange = event => {
+ this.setState(
+ {
+ featureGroupName: event.target.value,
+ },
+ () => {
+ this.logger('after set state, FeatureGroup Name: ', this.state.featureGroupName);
+ },
+ );
+ };
- handleVersioningChange = (event) => {
- this.setState({
- versioning: event.target.checked
- }, () => {
- this.logger("after set state, versioning: ", this.state.versioning);
- })
- }
+ handleFeatFiltersChange = event => {
+ this.setState(
+ {
+ featureFilters: event.target.value,
+ },
+ () => {
+ this.logger('after set state, featureFilters: ', this.state.featureFilters);
+ },
+ );
+ };
- handleTargetChange = (event) => {
- this.setState({
- targetName: event.target.value
- }, () => {
- this.logger("after set state, targetName: ", this.state.targetName);
- })
- }
+ handleHyparamsChange = event => {
+ this.setState(
+ {
+ hyparams: event.target.value,
+ },
+ () => {
+ this.logger('after set state, hyparams: ', this.state.hyparams);
+ },
+ );
+ };
- handleDatalakeSourceChange = (event) => {
- this.setState({
- datalakeSourceName: event.target.value
- }, () => {
- this.logger("after set state, datalakeSourceName: ", this.state.datalakeSourceName);
- })
- }
+ handleVersioningChange = event => {
+ this.setState(
+ {
+ versioning: event.target.checked,
+ },
+ () => {
+ this.logger('after set state, versioning: ', this.state.versioning);
+ },
+ );
+ };
- handleUCDescriptionChange = (event) => {
- this.setState({
- ucDescription: event.target.value
- }, () => {
- this.logger("after set state, ucDescription: ", this.state.ucDescription);
- })
- }
+ handleTargetChange = event => {
+ this.setState(
+ {
+ targetName: event.target.value,
+ },
+ () => {
+ this.logger('after set state, targetName: ', this.state.targetName);
+ },
+ );
+ };
- handlePipelineVersionChange = (event) => {
- this.setState({
- plVerName: event.target.value
- }, () => {
- this.logger("after set state, plVerName: ", this.state.plVerName);
- })
- }
+ handleDatalakeSourceChange = event => {
+ this.setState(
+ {
+ datalakeSourceName: event.target.value,
+ },
+ () => {
+ this.logger('after set state, datalakeSourceName: ', this.state.datalakeSourceName);
+ },
+ );
+ };
+ handleUCDescriptionChange = event => {
+ this.setState(
+ {
+ ucDescription: event.target.value,
+ },
+ () => {
+ this.logger('after set state, ucDescription: ', this.state.ucDescription);
+ },
+ );
+ };
- handleIsMme = (event) => {
- this.setState({
- isMme: event.target.checked
- }, () => {
- this.logger("after set state, isMme: ", this.state.isMme)
- })
- }
+ handlePipelineVersionChange = event => {
+ this.setState(
+ {
+ plVerName: event.target.value,
+ },
+ () => {
+ this.logger('after set state, plVerName: ', this.state.plVerName);
+ },
+ );
+ };
- handleModelNameChange = (event) => {
- this.setState({
- modelName: event.target.value
- }, () => {
- this.logger("after set state, modelName: ", this.state.modelName);
- });
- }
+ handleIsMme = event => {
+ this.setState(
+ {
+ isMme: event.target.checked,
+ },
+ () => {
+ this.logger('after set state, isMme: ', this.state.isMme);
+ },
+ );
+ };
+ handleModelNameChange = event => {
+ this.setState(
+ {
+ modelName: event.target.value,
+ },
+ () => {
+ this.logger('after set state, modelName: ', this.state.modelName);
+ },
+ );
+ };
resetFrom = () => {
-
this.setState({
ucName: '',
plName: '',
datalakeSourceName: '',
superModel: '',
superModelVersion: '',
- superModelVersionsList: []
- })
- }
-
-
+ superModelVersionsList: [],
+ });
+ };
render() {
-
-
return (
<>
-
<Form
- className={this.props.isCreateTrainingJobForm ? "create-form" : "edit-form"}
- onSubmit={this.props.isCreateTrainingJobForm ? this.handleCreateSubmit : this.handleEditSubmit}>
-
-
- <Form.Group controlId="ucName">
+ className={this.props.isCreateTrainingJobForm ? 'create-form' : 'edit-form'}
+ onSubmit={this.props.isCreateTrainingJobForm ? this.handleCreateSubmit : this.handleEditSubmit}
+ >
+ <Form.Group controlId='ucName'>
<Form.Label>Training Job Name*</Form.Label>
- {
- this.props.isCreateTrainingJobForm
- ?
- (
- <Form.Control type="input"
- value={this.state.ucName}
- onChange={this.handleUCNameChange}
- placeholder=""
- required />
- )
- :
- (
- <Form.Control type="text" placeholder={this.state.ucName} readOnly />
- )
- }
+ {this.props.isCreateTrainingJobForm ? (
+ <Form.Control
+ type='input'
+ value={this.state.ucName}
+ onChange={this.handleUCNameChange}
+ placeholder=''
+ required
+ />
+ ) : (
+ <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 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 />
- )
- }
-
+ {(() => {
+ 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 />;
}
-
- return null;
- })()
- }
-
+ }
+ return null;
+ })()}
- {
- this.state.plName !== ''
- &&
+ {this.state.plName !== '' && (
<div>
- <Form.Group controlId="plVesName">
+ <Form.Group controlId='plVesName'>
<Form.Label>Training Function Version Name*</Form.Label>
- <Form.Control as="select"
+ <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) {
- return <option key={data} value={data}>1</option>
- }
- else {
- return <option key={data} value={data}>{data}</option>
- }
- })
- }
+ onChange={this.handlePipelineVersionChange}
+ >
+ <option key='' value='' disabled>
+ {' '}
+ --- Select Training Function Version---{' '}
+ </option>
+ {this.state.plVerList.map(data => {
+ if (data === this.state.plName) {
+ return (
+ <option key={data} value={data}>
+ 1
+ </option>
+ );
+ } else {
+ return (
+ <option key={data} value={data}>
+ {data}
+ </option>
+ );
+ }
+ })}
</Form.Control>
</Form.Group>
{/*<Form.Group controlId="plVerDescription">
<Form.Control as="textarea" name="plVerDescription" rows={3} value={this.state.plVerDescription} readOnly/>
</Form.Group>*/}
</div>
-
- }
+ )}
{/* <Form.Group controlId="expName">
<Form.Label>Experiment Name*</Form.Label>
</Form.Control>
</Form.Group> */}
- <Form.Group controlId="datalakeSource">
+ <Form.Group controlId='datalakeSource'>
<Form.Label>Datalake Source*</Form.Label>
- <Form.Control as="select"
+ <Form.Control
+ as='select'
required
value={this.state.datalakeSourceName}
- onChange={this.handleDatalakeSourceChange}>
-
- <option key="" value="" disabled> --- Select Datalake Source --- </option>
- {
- this.state.datalakeSourceList.map(data => <option key={data} value={data}>{data}</option>)
- }
-
+ onChange={this.handleDatalakeSourceChange}
+ >
+ <option key='' value='' disabled>
+ {' '}
+ --- Select Datalake Source ---{' '}
+ </option>
+ {this.state.datalakeSourceList.map(data => (
+ <option key={data} value={data}>
+ {data}
+ </option>
+ ))}
</Form.Control>
</Form.Group>
- <Form.Group controlId="ftFilter">
+ <Form.Group controlId='ftFilter'>
<Form.Label>Feature Filter</Form.Label>
- <Form.Control type="text"
+ <Form.Control
+ type='text'
value={this.state.featureFilters}
onChange={this.handleFeatFiltersChange}
- placeholder="" />
+ placeholder=''
+ />
</Form.Group>
- <Form.Group controlId="hyparams">
+ <Form.Group controlId='hyparams'>
<Form.Label>Hyper Parameters</Form.Label>
- <Form.Control type="text"
- value={this.state.hyparams}
- onChange={this.handleHyparamsChange}
- placeholder="" />
+ <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 id='EnableVersioning'>
+ <Form.Check
+ type='checkbox'
+ label='Enable versioning'
+ checked={this.state.versioning}
+ onChange={this.handleVersioningChange}
+ />
</Form.Group>
-
-
- <Form.Group controlId="ucDescription">
+ <Form.Group controlId='ucDescription'>
<Form.Label>Description</Form.Label>
- <Form.Control type="text"
+ <Form.Control
+ type='text'
value={this.state.ucDescription}
onChange={this.handleUCDescriptionChange}
- placeholder="" />
+ placeholder=''
+ />
</Form.Group>
- <Button type="submit"> Create Training Job </Button>
+ <Button type='submit'> Create Training Job </Button>
</Form>
</>
);
- /* ==================================================================================
+/* ==================================================================================
Copyright (c) 2022 Samsung Electronics Co., Ltd. All Rights Reserved.
limitations under the License.
================================================================================== */
-.nav-bar{
- margin-bottom: 5px;
+.nav-bar {
+ margin-bottom: 5px;
}
-.nav-drop-down{
- font-size: large;
+.nav-drop-down {
+ font-size: large;
}
-.logo{
- width : 130px;
+.logo {
+ width: 130px;
}
import React from 'react';
import { Container, Nav, Navbar, NavDropdown } from 'react-bootstrap';
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router-dom';
import './NavbarComponent.css';
function NavbarComponent() {
-
-
- return (
- <Navbar bg="primary" variant="dark" className="nav-bar">
- <Container>
- <Navbar.Brand href="/">AI/ML Management Dashboard</Navbar.Brand>
- <Nav>
- <NavDropdown title="Training Jobs" className="nav-drop-down">
- <NavDropdown.Item href="/TrainingJob/CreateTrainingJob">Create Training Job</NavDropdown.Item>
- <NavDropdown.Item href="/TrainingJob/TrainingJobsStatus">Training Job Status</NavDropdown.Item>
- <NavDropdown.Item href="/TrainingJob/Pipeline">Training function</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>
- </Navbar>
- );
+ return (
+ <Navbar bg='primary' variant='dark' className='nav-bar'>
+ <Container>
+ <Navbar.Brand href='/'>AI/ML Management Dashboard</Navbar.Brand>
+ <Nav>
+ <NavDropdown title='Training Jobs' className='nav-drop-down'>
+ <NavDropdown.Item href='/TrainingJob/CreateTrainingJob'>Create Training Job</NavDropdown.Item>
+ <NavDropdown.Item href='/TrainingJob/TrainingJobsStatus'>Training Job Status</NavDropdown.Item>
+ <NavDropdown.Item href='/TrainingJob/Pipeline'>Training function</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>
+ </Navbar>
+ );
}
export default NavbarComponent;
-
// ==================================================================================
-import React from 'react'
-import Form from 'react-bootstrap/Form'
-import Button from 'react-bootstrap/Button'
+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 OverlayTrigger from 'react-bootstrap/OverlayTrigger'
-import Popover from 'react-bootstrap/Popover'
+import * as CONSTANTS from '../common/Constants';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Popover from 'react-bootstrap/Popover';
class UploadPipelineForm extends React.Component {
constructor(props) {
this.state = {
fileName: '',
plName: '',
- UCMgr_baseUrl: CONSTANTS.UCMgr_baseUrl
- }
+ UCMgr_baseUrl: CONSTANTS.UCMgr_baseUrl,
+ };
this.handleInputChange = this.handleInputChange.bind(this);
}
- popover = () =>(
- <Popover id="popover-basic">
- <Popover.Title as="h3">Field descriptions</Popover.Title>
+ popover = () => (
+ <Popover id='popover-basic'>
+ <Popover.Title as='h3'>Field descriptions</Popover.Title>
<Popover.Content>
- <strong> Training Function Name</strong>
+ <strong> Training Function Name</strong>
+ <br></br>
+ Name of the Training Function. <br></br>
+ should only contain lower or upper case alphanumerical characters and underscore <br></br>
<br></br>
- Name of the Training Function. <br></br>
- should only contain lower or upper case alphanumerical characters and underscore <br></br>
- <br></br>
</Popover.Content>
</Popover>
);
handleInputChange(event) {
- console.log(event)
+ console.log(event);
this.setState({
- fileName: event.target.files[0]
- })
- console.log('handleInputChange',this.fileName)
+ fileName: event.target.files[0],
+ });
+ console.log('handleInputChange', this.fileName);
}
- handlePlNameChange = (event) => {
+ handlePlNameChange = event => {
this.setState({
- plName: event.target.value
- })
- }
-
+ plName: event.target.value,
+ });
+ };
-
- resetFrom = (event)=> {
- this.setState({
+ resetFrom = event => {
+ this.setState({
fileName: '',
- plName: '',
- })
- console.log(this.state)
+ plName: '',
+ });
+ console.log(this.state);
event.target.value = null;
- }
+ };
handleSubmit = event => {
- const data = new FormData()
- data.append('file', this.state.fileName)
-
- let url = this.state.UCMgr_baseUrl + "/pipelines/" + this.state.plName + "/upload";
+ const data = new FormData();
+ data.append('file', this.state.fileName);
+
+ let url = this.state.UCMgr_baseUrl + '/pipelines/' + this.state.plName + '/upload';
//Option-3
- axios.post(url,data
- ).then(res => {
- console.log('Pipeline responsed ', res)
- console.log('Status responsed ', res.status)
- if(res.status === 200) {
- console.log('Pipeline uploaded ', res.status)
- alert(res.data.result)
- this.resetFrom(event)
-
+ axios
+ .post(url, data)
+ .then(res => {
+ console.log('Pipeline responsed ', res);
+ console.log('Status responsed ', res.status);
+ if (res.status === 200) {
+ console.log('Pipeline uploaded ', res.status);
+ alert(res.data.result);
+ this.resetFrom(event);
} else {
- console.log('Upload pipeline error:' , res)
+ console.log('Upload pipeline error:', res);
}
})
.catch(error => {
- console.log('Error in uploading pipeline',error.response)
- alert("Pipeline upload failed: " + error.response.data.result)
+ console.log('Error in uploading pipeline', error.response);
+ alert('Pipeline upload failed: ' + error.response.data.result);
})
.then(function () {
// always executed
- })
+ });
- console.log('something')
- event.preventDefault();
- }
+ console.log('something');
+ event.preventDefault();
+ };
- handleCreatePipeline = event => {
- console.log('handleCreatePipeline clicked..', event)
- window.open(CONSTANTS.notebook_url + '/tree', "_blank")
- }
+ handleCreatePipeline = event => {
+ console.log('handleCreatePipeline clicked..', event);
+ window.open(CONSTANTS.notebook_url + '/tree', '_blank');
+ };
render() {
return (
- <>
- <div className="upload-pipeline">
- <OverlayTrigger trigger="click" placement="right" overlay={this.popover()}>
- <Button className="from-tooltip" placement="right" variant="secondary">?</Button>
- </OverlayTrigger>
- <div className="upload-pl-form" >
- <Button variant="success" size="sm" onClick={e => this.handleCreatePipeline(e)} >
- Create Training Function
- </Button>{' '}
-
- <Form onSubmit={this.handleSubmit}>
- <Form.Group controlId="plName">
- <Form.Label>Training Function Name*</Form.Label>
- <Form.Control type="input"
- value={this.state.plName}
- onChange={this.handlePlNameChange}
- placeholder=""
- required/>
- </Form.Group>
-
- <input type="file" className="form-control"
- name="upload_file" onChange={this.handleInputChange} />
-
- <Button type="submit" > Upload </Button>
-
- </Form>
- </div>
- </div>
- </>
-
+ <>
+ <div className='upload-pipeline'>
+ <OverlayTrigger trigger='click' placement='right' overlay={this.popover()}>
+ <Button className='from-tooltip' placement='right' variant='secondary'>
+ ?
+ </Button>
+ </OverlayTrigger>
+ <div className='upload-pl-form'>
+ <Button variant='success' size='sm' onClick={e => this.handleCreatePipeline(e)}>
+ Create Training Function
+ </Button>{' '}
+ <Form onSubmit={this.handleSubmit}>
+ <Form.Group controlId='plName'>
+ <Form.Label>Training Function Name*</Form.Label>
+ <Form.Control
+ type='input'
+ value={this.state.plName}
+ onChange={this.handlePlNameChange}
+ placeholder=''
+ required
+ />
+ </Form.Group>
+
+ <input type='file' className='form-control' name='upload_file' onChange={this.handleInputChange} />
+
+ <Button type='submit'> Upload </Button>
+ </Form>
+ </div>
+ </div>
+ </>
);
}
}
-export default UploadPipelineForm;
\ No newline at end of file
+export default UploadPipelineForm;
// ==================================================================================
import axios from 'axios';
-import * as CONSTANTS from '../common/Constants'
+import * as CONSTANTS from '../common/Constants';
-export const invokeStartTraining = async (trainingjobNames) => {
+export const invokeStartTraining = async trainingjobNames => {
console.log('Retraining called ', trainingjobNames);
- try{
- let res = await axios.post(`${CONSTANTS.UCMgr_baseUrl}/trainingjobs/retraining`,
- {
- "trainingjobs_list": trainingjobNames
- }
- );
+ try {
+ let res = await axios.post(`${CONSTANTS.UCMgr_baseUrl}/trainingjobs/retraining`, {
+ trainingjobs_list: trainingjobNames,
+ });
console.log('Retraining response', res);
- let result = 'Retraining initiated for selected trainingjob(s),Result'
- + '\n' + JSON.stringify(res.data)
+ let result = 'Retraining initiated for selected trainingjob(s),Result' + '\n' + JSON.stringify(res.data);
alert(result);
- }
- catch(error){
+ } catch (error) {
console.log(error);
- }
+ }
};
-export const deleteTrainingjobs = async (deleteTJList) =>{
+export const deleteTrainingjobs = async deleteTJList => {
console.log('Delete API called ', deleteTJList);
- try{
- let res = await axios.delete(CONSTANTS.UCMgr_baseUrl + '/trainingjobs',
- {
- data : {
- "list" : deleteTJList
- }
- }
- );
- console.log('Delete API response', res)
- let result = 'trainingjob deletion initiated for selected trainingjob(s),Result'
- + '\n' + JSON.stringify(res.data);
+ try {
+ let res = await axios.delete(CONSTANTS.UCMgr_baseUrl + '/trainingjobs', {
+ data: {
+ list: deleteTJList,
+ },
+ });
+ console.log('Delete API response', res);
+ let result = 'trainingjob deletion initiated for selected trainingjob(s),Result' + '\n' + JSON.stringify(res.data);
alert(result);
- }
- catch(error){
+ } catch (error) {
console.log(error);
}
};
-export const deleteFeatureGroups = async (featureGroup_names) => {
+export const deleteFeatureGroups = async featureGroup_names => {
console.log('deleting feature groups', featureGroup_names);
try {
- let res = await axios.delete(`${CONSTANTS.UCMgr_baseUrl}/featureGroup`,
- {
- data: {
- "featuregroups_list": featureGroup_names
- }
-
- }
- );
+ let res = await axios.delete(`${CONSTANTS.UCMgr_baseUrl}/featureGroup`, {
+ data: {
+ featuregroups_list: featureGroup_names,
+ },
+ });
console.log('Deletion response', res);
- let result = 'FeatureGroup deletion initiated for selected featureGroups ,Result'
- + '\n' + JSON.stringify(res.data);
+ let result = 'FeatureGroup deletion initiated for selected featureGroups ,Result' + '\n' + JSON.stringify(res.data);
alert(result);
-
} catch (error) {
- console.log("error is : ", error);
+ console.log('error is : ', error);
}
-};
\ No newline at end of file
+};
// ==================================================================================
-import React from 'react'
-
-export const Checkbox = React.forwardRef(
- ({ indeterminate, ...rest }, ref) => {
- const defaultRef = React.useRef()
- const resolvedRef = ref || defaultRef
-
- React.useEffect(() => {
- resolvedRef.current.indeterminate = indeterminate
- }, [resolvedRef, indeterminate])
-
- return (
- <>
- <input type="checkbox" ref={resolvedRef} {...rest} />
- </>
- )
- }
- )
-
\ No newline at end of file
+import React from 'react';
+
+export const Checkbox = React.forwardRef(({ indeterminate, ...rest }, ref) => {
+ const defaultRef = React.useRef();
+ const resolvedRef = ref || defaultRef;
+
+ React.useEffect(() => {
+ resolvedRef.current.indeterminate = indeterminate;
+ }, [resolvedRef, indeterminate]);
+
+ return (
+ <>
+ <input type='checkbox' ref={resolvedRef} {...rest} />
+ </>
+ );
+});
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 [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 [measurement, setMeasurement] = useState("")
- const [measuredObjClass, setMeasureObjectClass] = useState("")
-
- 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)
- 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)
- setMeasurement(response.data.featuregroup[0].measurement)
- setMeasureObjectClass(response.data.featuregroup[0].measured_obj_class)
-
- })
- .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>
- <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="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>
- <Form.Group controlId="measurement">
- <Form.Label>Measurement</Form.Label>
- <Form.Control type="text" value={measurement} 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>
- }
-
- </Form>
- </>
- );
-}
-
-export default FeatureGroupInfo;
\ No newline at end of file
+const FeatureGroupInfo = props => {
+ const [featureGroupName, setFeatureGroupName] = useState('');
+ const [features, setfeatures] = useState('');
+ const [datalake, setdatalake] = useState('');
+ const [dme, setDme] = useState(false);
+ 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 [measurement, setMeasurement] = useState('');
+ const [measuredObjClass, setMeasureObjectClass] = useState('');
+
+ 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);
+ 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);
+ setMeasurement(response.data.featuregroup[0].measurement);
+ setMeasureObjectClass(response.data.featuregroup[0].measured_obj_class);
+ })
+ .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>
+ <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='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>
+ <Form.Group controlId='measurement'>
+ <Form.Label>Measurement</Form.Label>
+ <Form.Control type='text' value={measurement} 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>
+ )}
+ </Form>
+ </>
+ );
+};
+
+export default FeatureGroupInfo;
import { Checkbox } from './Checkbox';
import Popup from './Popup';
import FeatureGroupInfo from './FeatureGroupInfo';
-import {deleteFeatureGroups} from './API_STATUS';
-
-
-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}/featureGroup`);
- logger('fetchFeatureGroup Result', result);
- logger('feature groups are --> ', result.data.featuregroups)
- setFeatureGroups(result.data.featuregroups);
- } catch (e) {
- console.error(e)
- }
+import { deleteFeatureGroups } from './API_STATUS';
+
+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}/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
+ };
+ const handleInfoClick = featuregroup_name => {
+ console.log('feature group name is : ', featuregroup_name);
+ setFeatureGroupName({
+ featureGroupName: featuregroup_name,
+ });
+ setInfoPopup(true);
+ };
+
+ const handleDelete = async event => {
+ console.log('handle delete starts..');
+
+ if (selectedFlatRows.length > 0) {
+ let featureGroup_names = [];
+ for (const row of selectedFlatRows) {
+ featureGroup_names.push({
+ featureGroup_name: row.original.featuregroup_name,
});
- setInfoPopup(true);
- };
-
- const handleDelete = async (event) => {
- console.log('handle delete starts..');
-
- if (selectedFlatRows.length > 0) {
- let featureGroup_names = [];
- for (const row of selectedFlatRows) {
- featureGroup_names.push({
- featureGroup_name: row.original.featuregroup_name
- })
- }
- console.log('selected featureGroups are :', featureGroup_names)
- try {
- await deleteFeatureGroups(featureGroup_names);
- await fetchFeatureGroups();
- } catch (error) {
- console.log(error)
- }
- toggleAllRowsSelected(false);
- } else {
- alert('Please select more than one row')
- }
-
+ }
+ console.log('selected featureGroups are :', featureGroup_names);
+ try {
+ await deleteFeatureGroups(featureGroup_names);
+ await fetchFeatureGroups();
+ } catch (error) {
+ console.log(error);
+ }
+ toggleAllRowsSelected(false);
+ } else {
+ alert('Please select more than one row');
}
-
- 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'
+ };
+
+ 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: '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
+ },
+ {
+ id: 'info',
+ Header: 'Info',
+ Cell: ({ row }) => {
+ return (
+ <div>
+ <Button variant='info' onClick={() => handleInfoClick(row.original.featuregroup_name)}>
+ Info
+ </Button>
+ </div>
+ );
},
- useRowSelect
- )
- return (
- <>
- <Button variant="success" size="sm" onClick={e => handleDelete(e)}>Delete</Button>{' '}
- <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 (
- <td {...cell.getCellProps()}>
- {cell.render('Cell')}
- </td>
- )
- })}
- </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
+ },
+ ],
+ [],
+ );
+ const data = useMemo(() => featureGroups, [featureGroups]);
+ const { getTableProps, headerGroups, rows, prepareRow, selectedFlatRows, toggleAllRowsSelected } = useTable(
+ {
+ columns,
+ data,
+ autoResetSelectedRows: false,
+ },
+ useRowSelect,
+ );
+ return (
+ <>
+ <Button variant='success' size='sm' onClick={e => handleDelete(e)}>
+ Delete
+ </Button>{' '}
+ <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 <td {...cell.getCellProps()}>{cell.render('Cell')}</td>;
+ })}
+ </tr>
+ );
+ })}
+ </tbody>
+ </BTable>
+ <Popup show={infoPopup} onHide={closeInfoPopup} title='Feature Group Info'>
+ <FeatureGroupInfo featureGroupName={featureGroupName} />
+ </Popup>
+ </>
+ );
+};
+
+export default ListFeatureGroup;
// ==================================================================================
-
import React from 'react';
-import {Modal} from 'react-bootstrap';
+import { Modal } from 'react-bootstrap';
-function Popup(props){
+function Popup(props) {
return (
<>
- <Modal show={props.show} onHide={props.onHide} size={props.hasOwnProperty('size') ? props.size : 'medium'} centered>
- <Modal.Header closeButton>
- <Modal.Title>
- {props.title}
- </Modal.Title>
- </Modal.Header>
- <Modal.Body>
- {props.children}
- </Modal.Body>
+ <Modal
+ show={props.show}
+ onHide={props.onHide}
+ size={props.hasOwnProperty('size') ? props.size : 'medium'}
+ centered
+ >
+ <Modal.Header closeButton>
+ <Modal.Title>{props.title}</Modal.Title>
+ </Modal.Header>
+ <Modal.Body>{props.children}</Modal.Body>
</Modal>
</>
);
}
-export default Popup;
\ No newline at end of file
+export default Popup;
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 { UCMgr_baseUrl } from '../common/Constants';
import axios from 'axios';
import { Checkbox } from './Checkbox';
import Popup from './Popup';
import TrainingJobInfo from './TrainingJobInfo';
-import {invokeStartTraining, deleteTrainingjobs} from './API_STATUS';
+import { invokeStartTraining, deleteTrainingjobs } from './API_STATUS';
import StepsState from './StepsState';
import CreateOrEditTrainingJobForm from '../form/CreateOrEditTrainingJobForm';
-const StatusPageRows = (props) => {
- const logger=props.logger
- const [trainingJobs, setTrainingJobs] = useState([])
- const [editPopup , setEditPopup] = useState(false);
+const StatusPageRows = props => {
+ const logger = props.logger;
+ const [trainingJobs, setTrainingJobs] = useState([]);
+ const [editPopup, setEditPopup] = useState(false);
const [versionForEditPopup, setVersionForEditPopup] = useState(null);
const [traingingjobNameForEditPopup, setTraingingjobNameForEditPopup] = useState(null);
const closeEditPopup = () => setEditPopup(false);
useEffect(() => {
logger('useEffect');
fetchTrainingJobs();
- const timer = setInterval(async ()=>{
+ const timer = setInterval(async () => {
fetchTrainingJobs();
}, 5000);
- return ()=>clearInterval(timer);
+ return () => clearInterval(timer);
}, []);
- useEffect(()=> {
+ useEffect(() => {
toggleAllRowsSelected(false);
- },[traingingjobNameForEditPopup]);
+ }, [traingingjobNameForEditPopup]);
const fetchTrainingJobs = async () => {
- logger('fetchTrainingJobs UCMgr_baseUrl', UCMgr_baseUrl)
- try {
+ logger('fetchTrainingJobs UCMgr_baseUrl', UCMgr_baseUrl);
+ try {
const result = await axios.get(`${UCMgr_baseUrl}/trainingjobs/latest`);
logger('fetchTrainingJobs Result', result);
- logger('Training Jobs are --> ', result.data.trainingjobs)
+ logger('Training Jobs are --> ', result.data.trainingjobs);
setTrainingJobs(result.data.trainingjobs);
-
} catch (e) {
- console.error(e)
+ console.error(e);
}
- }
-
- const handleRetrain = async (event) => {
+ };
+
+ const handleRetrain = async event => {
console.log('handleRetrain starts..');
-
- if(selectedFlatRows.length > 0) {
- let trainingjobNames = [];
+
+ if (selectedFlatRows.length > 0) {
+ let trainingjobNames = [];
for (const row of selectedFlatRows) {
trainingjobNames.push({
- trainingjob_name: row.original.trainingjob_name
- })
+ trainingjob_name: row.original.trainingjob_name,
+ });
}
- console.log('selected trainingjobs: ',trainingjobNames);
- try{
+ console.log('selected trainingjobs: ', trainingjobNames);
+ try {
await invokeStartTraining(trainingjobNames);
await fetchTrainingJobs();
- }
- catch(error) {
+ } catch (error) {
console.log(error);
}
toggleAllRowsSelected(false);
} else {
- alert('Please select atleast one trainingjob')
+ alert('Please select atleast one trainingjob');
}
- }
+ };
- const handleEdit = (event) => {
- if(selectedFlatRows.length === 1){
- logger("selected training job: ",selectedFlatRows[0].original.trainingjob_name)
+ const handleEdit = event => {
+ if (selectedFlatRows.length === 1) {
+ logger('selected training job: ', selectedFlatRows[0].original.trainingjob_name);
setTraingingjobNameForEditPopup(selectedFlatRows[0].original.trainingjob_name);
setVersionForEditPopup(selectedFlatRows[0].original.version);
setEditPopup(true);
toggleAllRowsSelected(false);
+ } else {
+ alert('please select exactly one trainingjob');
}
- else{
- alert("please select exactly one trainingjob");
- }
- }
+ };
- const handleDelete = async (event) => {
-
+ const handleDelete = async event => {
console.log('handleDelete starts..');
- if(selectedFlatRows.length > 0) {
- let deleteTJList = []
+ if (selectedFlatRows.length > 0) {
+ let deleteTJList = [];
for (const row of selectedFlatRows) {
- let trainingjobDict = {};
- trainingjobDict['trainingjob_name'] = row.original.trainingjob_name
- trainingjobDict['version'] = row.original.version
- deleteTJList.push(trainingjobDict)
- }
- console.log('Selected trainingjobs for deletion : ',deleteTJList);
- try{
+ let trainingjobDict = {};
+ trainingjobDict['trainingjob_name'] = row.original.trainingjob_name;
+ trainingjobDict['version'] = row.original.version;
+ deleteTJList.push(trainingjobDict);
+ }
+ console.log('Selected trainingjobs for deletion : ', deleteTJList);
+ try {
await deleteTrainingjobs(deleteTJList);
await fetchTrainingJobs();
+ } catch (error) {
+ console.log(error);
}
- catch(error) {
- console.log(error)
- }
toggleAllRowsSelected(false);
+ } else {
+ alert('Please select atleast one trainingjob');
}
- else{
- alert('Please select atleast one trainingjob')
- }
- }
+ };
const handleStepStateClick = (trainingjob_name, version) => {
setStepsStateTrainingJobNameAndVersion({
- trainingjob_name : trainingjob_name,
- version : version
+ trainingjob_name: trainingjob_name,
+ version: version,
});
setStepsStatePopup(true);
};
-
+
const handleInfoClick = (trainingjob_name, version) => {
setInfoTrainingJobNameAndVersion({
- trainingjob_name : trainingjob_name,
- version : version
+ trainingjob_name: trainingjob_name,
+ version: version,
});
setInfoPopup(true);
};
- const columns = useMemo(() => [
- {
- id: 'selection',
- Header: ({ getToggleAllRowsSelectedProps }) => (
- <div>
- <Checkbox {...getToggleAllRowsSelectedProps()} />
- </div>
- ),
- Cell: ({ row }) => (
- <div>
- <Checkbox {...row.getToggleRowSelectedProps()} />
- </div>
- ),
- },
- {
- id : 'trainingjob_name',
- Header : 'Training Job Name',
- accessor : 'trainingjob_name'
- },
- {
- id : 'version',
- Header : 'Version',
- accessor : 'version'
- },
- {
- id : 'overall_status',
- Header : 'Overall Status',
- accessor : row => row.overall_status === 'IN_PROGRESS' ? 'IN PROGRESS' : row.overall_status
- },
+ const columns = useMemo(
+ () => [
+ {
+ id: 'selection',
+ Header: ({ getToggleAllRowsSelectedProps }) => (
+ <div>
+ <Checkbox {...getToggleAllRowsSelectedProps()} />
+ </div>
+ ),
+ Cell: ({ row }) => (
+ <div>
+ <Checkbox {...row.getToggleRowSelectedProps()} />
+ </div>
+ ),
+ },
+ {
+ id: 'trainingjob_name',
+ Header: 'Training Job Name',
+ accessor: 'trainingjob_name',
+ },
+ {
+ id: 'version',
+ Header: 'Version',
+ accessor: 'version',
+ },
+ {
+ id: 'overall_status',
+ Header: 'Overall Status',
+ accessor: row => (row.overall_status === 'IN_PROGRESS' ? 'IN PROGRESS' : row.overall_status),
+ },
+ {
+ id: 'stepsState',
+ Header: 'Detailed Status',
+ Cell: ({ row }) => {
+ return (
+ <Button
+ variant='info'
+ onClick={() => handleStepStateClick(row.original.trainingjob_name, row.original.version)}
+ >
+ Detailed Status
+ </Button>
+ );
+ },
+ },
+ {
+ id: 'info',
+ Header: 'Info',
+ Cell: ({ row }) => {
+ return (
+ <Button variant='info' onClick={() => handleInfoClick(row.original.trainingjob_name, row.original.version)}>
+ Info
+ </Button>
+ );
+ },
+ },
+ ],
+ [],
+ );
+ const data = useMemo(() => trainingJobs, [trainingJobs]);
+
+ const { getTableProps, headerGroups, rows, prepareRow, selectedFlatRows, toggleAllRowsSelected } = useTable(
{
- id : 'stepsState',
- Header : 'Detailed Status',
- Cell : ({row}) => {
- return (
- <Button variant="info" onClick={() => handleStepStateClick(row.original.trainingjob_name, row.original.version)}>Detailed Status</Button>
- );
- }
+ columns,
+ data,
+ autoResetSelectedRows: false,
},
- {
- id : 'info',
- Header : 'Info',
- Cell : ({row}) => {
- return (
- <Button variant="info" onClick={() => handleInfoClick(row.original.trainingjob_name, row.original.version)}>Info</Button>
- );
- }
- }
- ], []);
- const data = useMemo(() => trainingJobs, [trainingJobs]);
+ useRowSelect,
+ );
- const {
- getTableProps,
- headerGroups,
- rows,
- prepareRow,
- selectedFlatRows,
- toggleAllRowsSelected
- } = useTable(
- {
- columns,
- data,
- autoResetSelectedRows : false
- },
- useRowSelect
- )
-
- return (
+ return (
<>
- <Button variant="success" size="sm" onClick={e => handleEdit(e)} >
+ <Button variant='success' size='sm' onClick={e => handleEdit(e)}>
Edit
</Button>{' '}
- <Button variant="success" size="sm" onClick={e => handleRetrain(e)} >
+ <Button variant='success' size='sm' onClick={e => handleRetrain(e)}>
Train
</Button>{' '}
- <Button variant="success" size="sm" onClick={e => handleDelete(e)} >
+ <Button variant='success' size='sm' onClick={e => handleDelete(e)}>
Delete
</Button>{' '}
- <BTable className="Status_table" responsive striped bordered hover size="sm" {...getTableProps()}>
-
+ <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>
+ <th {...column.getHeaderProps()}>{column.render('Header')}</th>
))}
</tr>
))}
<tbody>
{rows.map((row, i) => {
- prepareRow(row)
+ prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
- return (
- <td {...cell.getCellProps()}>
- {cell.render('Cell')}
- </td>
- )
+ return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>;
})}
</tr>
- )
+ );
})}
</tbody>
</BTable>
- <Popup show={editPopup} onHide={closeEditPopup} title="Edit usecase">
- <CreateOrEditTrainingJobForm
- trainingjob_name={traingingjobNameForEditPopup}
- version={versionForEditPopup}
- isCreateTrainingJobForm={false}
- onHideEditPopup={closeEditPopup}
+ <Popup show={editPopup} onHide={closeEditPopup} title='Edit usecase'>
+ <CreateOrEditTrainingJobForm
+ trainingjob_name={traingingjobNameForEditPopup}
+ version={versionForEditPopup}
+ isCreateTrainingJobForm={false}
+ onHideEditPopup={closeEditPopup}
fetchTrainingJobs={fetchTrainingJobs}
- logger={logger}></CreateOrEditTrainingJobForm>
+ logger={logger}
+ ></CreateOrEditTrainingJobForm>
</Popup>
- <Popup size="sm" show={stepsStatePopup} onHide={closeStepsStatePopup} title="Detailed Status">
- <StepsState trainingjob_name_and_version={stepsStateTrainingJobAndVersion}></StepsState>
+ <Popup size='sm' show={stepsStatePopup} onHide={closeStepsStatePopup} title='Detailed Status'>
+ <StepsState trainingjob_name_and_version={stepsStateTrainingJobAndVersion}></StepsState>
</Popup>
- <Popup show={infoPopup} onHide={closeInfoPopup} title="Training Job Info">
- <TrainingJobInfo trainingjob_name_and_version={infoTrainingJobAndVersion}/>
+ <Popup show={infoPopup} onHide={closeInfoPopup} title='Training Job Info'>
+ <TrainingJobInfo trainingjob_name_and_version={infoTrainingJobAndVersion} />
</Popup>
</>
);
-}
+};
export default StatusPageRows;
- /* ==================================================================================
+/* ==================================================================================
Copyright (c) 2022 Samsung Electronics Co., Ltd. All Rights Reserved.
limitations under the License.
================================================================================== */
-
-.step-progressbar-wrapper{
-
-}
-.state{
- background-color: white;
- border: 2px solid black;
- height: 30px;
- width: 30px;
- border-radius: 50%;
- display: flex;
- justify-content: center;
- align-items: center;
+.step-progressbar-wrapper {
}
-.step{
- max-width: 400px;
+.state {
+ background-color: white;
+ border: 2px solid black;
+ height: 30px;
+ width: 30px;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
-.step-progress-bar-box{
- display: flex;
- align-items: center;
- column-gap: 20px;
- border: 2px solid pink;
- padding: 10px;
+.step {
+ max-width: 400px;
}
-.step-progress-bar-box-line{
- border-right: 3px solid black;
- height: 50px;
- width: 50%;
+.step-progress-bar-box {
+ display: flex;
+ align-items: center;
+ column-gap: 20px;
+ border: 2px solid pink;
+ padding: 10px;
}
-.container-for-step-progress-bar-box-line-and-message{
- display: flex;
- column-gap: 20px;
+.step-progress-bar-box-line {
+ border-right: 3px solid black;
+ height: 50px;
+ width: 50%;
}
-.step-progress-bar-box-line-messsage{
- display: flex;
- justify-content: center;
- align-items: center;
+.container-for-step-progress-bar-box-line-and-message {
+ display: flex;
+ column-gap: 20px;
}
-
-
-
+.step-progress-bar-box-line-messsage {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
// ==================================================================================
import React, { useEffect, useState } from 'react';
-import axios from "axios";
+import axios from 'axios';
import './StepsState.css';
import { UCMgr_baseUrl } from '../common/Constants';
-const StepsState = (props) => {
- const [boxesState, setBoxesState] = useState([]);
- const [connectionsState, setConnectionsState] = useState([]);
- const [boxes, setBoxes] = useState([]);
- useEffect(()=>{
- const periodicTask = async () => {
- let res = null;
- try{
- res = await axios.get(`${UCMgr_baseUrl}/trainingjobs/${props.trainingjob_name_and_version.trainingjob_name}/${props.trainingjob_name_and_version.version}/steps_state`);
- }
- catch(error){
- console.log(error);
- }
- const json_from_backend = res.data;
- console.log(`response for ${UCMgr_baseUrl}/trainingjobs/${props.trainingjob_name_and_version.trainingjob_name}/${props.trainingjob_name_and_version.version}/steps_state` , res);
- const newBoxesState = [];
- const newConnectionsState = [];
- const newBoxes = ['Data extraction' , 'Training', 'Trained Model'];
-
+const StepsState = props => {
+ const [boxesState, setBoxesState] = useState([]);
+ const [connectionsState, setConnectionsState] = useState([]);
+ const [boxes, setBoxes] = useState([]);
+ useEffect(() => {
+ const periodicTask = async () => {
+ let res = null;
+ try {
+ res = await axios.get(
+ `${UCMgr_baseUrl}/trainingjobs/${props.trainingjob_name_and_version.trainingjob_name}/${props.trainingjob_name_and_version.version}/steps_state`,
+ );
+ } catch (error) {
+ console.log(error);
+ }
+ const json_from_backend = res.data;
+ console.log(
+ `response for ${UCMgr_baseUrl}/trainingjobs/${props.trainingjob_name_and_version.trainingjob_name}/${props.trainingjob_name_and_version.version}/steps_state`,
+ res,
+ );
+ const newBoxesState = [];
+ const newConnectionsState = [];
+ const newBoxes = ['Data extraction', 'Training', 'Trained Model'];
- newBoxesState.push(json_from_backend.DATA_EXTRACTION);
- newBoxesState.push(json_from_backend.TRAINING);
- newBoxesState.push(json_from_backend.TRAINED_MODEL);
- if(json_from_backend.hasOwnProperty('DEPLOYMENT')){
- newBoxesState.push(json_from_backend.DEPLOYMENT);
- newBoxes.push('Deployment');
- }
- setBoxesState(newBoxesState);
- setBoxes(newBoxes);
+ newBoxesState.push(json_from_backend.DATA_EXTRACTION);
+ newBoxesState.push(json_from_backend.TRAINING);
+ newBoxesState.push(json_from_backend.TRAINED_MODEL);
+ if (json_from_backend.hasOwnProperty('DEPLOYMENT')) {
+ newBoxesState.push(json_from_backend.DEPLOYMENT);
+ newBoxes.push('Deployment');
+ }
+ setBoxesState(newBoxesState);
+ setBoxes(newBoxes);
- newConnectionsState.push(json_from_backend.DATA_EXTRACTION_AND_TRAINING);
- newConnectionsState.push(json_from_backend.TRAINING_AND_TRAINED_MODEL);
- if(json_from_backend.hasOwnProperty('TRAINED_MODEL_AND_DEPLOYMENT')){
- newConnectionsState.push(json_from_backend.TRAINED_MODEL_AND_DEPLOYMENT);
- }
- setConnectionsState(newConnectionsState);
- };
- periodicTask();
- const timer = setInterval( async () => {
- periodicTask();
- }, 5000);
- return () => clearInterval(timer);
-
-
- },[props.trainingjob_name_and_version]);
+ newConnectionsState.push(json_from_backend.DATA_EXTRACTION_AND_TRAINING);
+ newConnectionsState.push(json_from_backend.TRAINING_AND_TRAINED_MODEL);
+ if (json_from_backend.hasOwnProperty('TRAINED_MODEL_AND_DEPLOYMENT')) {
+ newConnectionsState.push(json_from_backend.TRAINED_MODEL_AND_DEPLOYMENT);
+ }
+ setConnectionsState(newConnectionsState);
+ };
+ periodicTask();
+ const timer = setInterval(async () => {
+ periodicTask();
+ }, 5000);
+ return () => clearInterval(timer);
+ }, [props.trainingjob_name_and_version]);
- return (
- <div className='step-progressbar-wrapper'>
- {
- boxes.map((item, index) => {
- return (
- <div key={index}>
- <div className='step-progress-bar-box'>
- <div className='state'>
- {boxesState[index] === 'NOT_STARTED' ? index + 1 :
- boxesState[index] === 'FINISHED' ? '✔' :
- boxesState[index] === 'FAILED' ? '❌' :
- '⌛'}
- </div>
- <div className='step'>
- {item}
- </div>
- </div>
- { index + 1 !== boxes.length &&
-
- <div className='container-for-step-progress-bar-box-line-and-message'>
- <div className='step-progress-bar-box-line'/>
- <div className='step-progress-bar-box-line-messsage'>
- {
- connectionsState[index] === 'NOT_STARTED' ? 'Not started' :
- connectionsState[index] === 'FINISHED' ? '✔ Finished' :
- connectionsState[index] === 'FAILED' ? '❌ Failed' :
- '⌛ In progress'
- }
- </div>
- </div>
- }
- </div>
- )
- })
- }
- </div>
- );
+ return (
+ <div className='step-progressbar-wrapper'>
+ {boxes.map((item, index) => {
+ return (
+ <div key={index}>
+ <div className='step-progress-bar-box'>
+ <div className='state'>
+ {boxesState[index] === 'NOT_STARTED'
+ ? index + 1
+ : boxesState[index] === 'FINISHED'
+ ? '✔'
+ : boxesState[index] === 'FAILED'
+ ? '❌'
+ : '⌛'}
+ </div>
+ <div className='step'>{item}</div>
+ </div>
+ {index + 1 !== boxes.length && (
+ <div className='container-for-step-progress-bar-box-line-and-message'>
+ <div className='step-progress-bar-box-line' />
+ <div className='step-progress-bar-box-line-messsage'>
+ {connectionsState[index] === 'NOT_STARTED'
+ ? 'Not started'
+ : connectionsState[index] === 'FINISHED'
+ ? '✔ Finished'
+ : connectionsState[index] === 'FAILED'
+ ? '❌ Failed'
+ : '⌛ In progress'}
+ </div>
+ </div>
+ )}
+ </div>
+ );
+ })}
+ </div>
+ );
};
-export default StepsState;
\ No newline at end of file
+export default StepsState;
import { Form } from 'react-bootstrap';
import axios from 'axios';
import { UCMgr_baseUrl } from '../common/Constants';
-import {convertToCommaSeparatedString, getDatalakeNameWithoutConversion} from '../common/CommonMethods';
+import { convertToCommaSeparatedString, getDatalakeNameWithoutConversion } from '../common/CommonMethods';
-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("");
- const [pipeLineName, setPipelineName] = useState("");
- const [experimentName, setExperimentName] = useState("");
- const [featureFilter, setFeatureFilter] = useState("");
- const [hyperParameters, setHyperParameters] = useState("");
- const [metrics, setMetrics] = useState("");
- const [enableVersioning, setEnableVersioning] = useState(false);
- const [pipelineVersion, setPipelineVersion] = useState("");
- const [datalakeSource, setDatalakeSource] = useState("");
- const [modelUrl, setModelUrl] = useState("");
- const [modelInfo, setModelInfo] = useState("");
+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('');
+ const [pipeLineName, setPipelineName] = useState('');
+ const [experimentName, setExperimentName] = useState('');
+ const [featureFilter, setFeatureFilter] = useState('');
+ const [hyperParameters, setHyperParameters] = useState('');
+ const [metrics, setMetrics] = useState('');
+ const [enableVersioning, setEnableVersioning] = useState(false);
+ const [pipelineVersion, setPipelineVersion] = useState('');
+ const [datalakeSource, setDatalakeSource] = useState('');
+ const [modelUrl, setModelUrl] = useState('');
+ const [modelInfo, setModelInfo] = useState('');
- useEffect(()=>{
- try{
- axios.get(`${UCMgr_baseUrl}/trainingjobs/${props.trainingjob_name_and_version.trainingjob_name}/${props.trainingjob_name_and_version.version}`)
- .then(response => {
- 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);
- setPipelineName(response.data.trainingjob.pipeline_name);
- setExperimentName(response.data.trainingjob.experiment_name);
- setFeatureFilter(response.data.trainingjob.query_filter);
- setHyperParameters(convertToCommaSeparatedString(response.data.trainingjob.arguments));
- setMetrics(response.data.trainingjob.accuracy);
- setEnableVersioning(response.data.trainingjob.enable_versioning);
- setPipelineVersion(response.data.trainingjob.pipeline_version === response.data.trainingjob.pipeline_name ? "1" : response.data.trainingjob.pipeline_version);
- setDatalakeSource(getDatalakeNameWithoutConversion(response.data.trainingjob.datalake_source));
- setModelUrl(response.data.trainingjob.model_url);
- setModelInfo(response.data.trainingjob.model_info);
- })
- .catch(error => {
- console.log(error);
- });
- }
- catch(error){
- console.log(error);
- }
- },[props.trainingjob_name_and_version]);
+ useEffect(() => {
+ try {
+ axios
+ .get(
+ `${UCMgr_baseUrl}/trainingjobs/${props.trainingjob_name_and_version.trainingjob_name}/${props.trainingjob_name_and_version.version}`,
+ )
+ .then(response => {
+ 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);
+ setPipelineName(response.data.trainingjob.pipeline_name);
+ setExperimentName(response.data.trainingjob.experiment_name);
+ setFeatureFilter(response.data.trainingjob.query_filter);
+ setHyperParameters(convertToCommaSeparatedString(response.data.trainingjob.arguments));
+ setMetrics(response.data.trainingjob.accuracy);
+ setEnableVersioning(response.data.trainingjob.enable_versioning);
+ setPipelineVersion(
+ response.data.trainingjob.pipeline_version === response.data.trainingjob.pipeline_name
+ ? '1'
+ : response.data.trainingjob.pipeline_version,
+ );
+ setDatalakeSource(getDatalakeNameWithoutConversion(response.data.trainingjob.datalake_source));
+ setModelUrl(response.data.trainingjob.model_url);
+ setModelInfo(response.data.trainingjob.model_info);
+ })
+ .catch(error => {
+ console.log(error);
+ });
+ } catch (error) {
+ console.log(error);
+ }
+ }, [props.trainingjob_name_and_version]);
+ return (
+ <>
+ <Form>
+ <Form.Group controlId='ucName'>
+ <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>
- return (
- <>
- <Form>
- <Form.Group controlId="ucName">
- <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 />
+ </Form.Group>
+ <Form.Group controlId='description'>
+ <Form.Label>Description</Form.Label>
+ <Form.Control type='text' value={description} readOnly />
+ </Form.Group>
+ <Form.Group controlId='featureNames'>
+ <Form.Label>Feature Names</Form.Label>
+ <Form.Control type='text' value={featureNames} readOnly />
+ </Form.Group>
+ <Form.Group controlId='pipelineName'>
+ <Form.Label>Training Function Name</Form.Label>
+ <Form.Control type='text' value={pipeLineName} readOnly />
+ </Form.Group>
+ <Form.Group controlId='experimentName'>
+ <Form.Label>Experiment Name</Form.Label>
+ <Form.Control type='text' value={experimentName} readOnly />
+ </Form.Group>
+ <Form.Group controlId='featureFilter'>
+ <Form.Label>Feature Filter</Form.Label>
+ <Form.Control type='text' value={featureFilter} readOnly />
+ </Form.Group>
+ <Form.Group controlId='hyperParameters'>
+ <Form.Label>Hyper Parameters</Form.Label>
+ <Form.Control type='text' value={hyperParameters} readOnly />
+ </Form.Group>
+ <Form.Group controlId='metrics'>
+ <Form.Label>Metrics</Form.Label>
+ <Form.Control type='text' value={metrics} readOnly />
+ </Form.Group>
+ <Form.Group id='enableVersioning'>
+ <Form.Check type='checkbox' label='Enable versioning' checked={enableVersioning} readOnly />
+ </Form.Group>
+ <Form.Group controlId='pipelineVersion'>
+ <Form.Label>Training Function Version</Form.Label>
+ <Form.Control type='text' value={pipelineVersion} readOnly />
+ </Form.Group>
+ <Form.Group controlId='datalakeSource'>
+ <Form.Label>Datalake Source</Form.Label>
+ <Form.Control type='text' value={datalakeSource} readOnly />
+ </Form.Group>
+ <Form.Group controlId='modelUrl'>
+ <Form.Label>Model URL</Form.Label>
+ <Form.Control type='text' value={modelUrl} readOnly />
+ </Form.Group>
+ </Form>
+ </>
+ );
+};
- <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 />
- </Form.Group>
- <Form.Group controlId="description">
- <Form.Label>Description</Form.Label>
- <Form.Control type="text" value={description} readOnly />
- </Form.Group>
- <Form.Group controlId="featureNames">
- <Form.Label>Feature Names</Form.Label>
- <Form.Control type="text" value={featureNames} readOnly />
- </Form.Group>
- <Form.Group controlId="pipelineName">
- <Form.Label>Training Function Name</Form.Label>
- <Form.Control type="text" value={pipeLineName} readOnly />
- </Form.Group>
- <Form.Group controlId="experimentName">
- <Form.Label>Experiment Name</Form.Label>
- <Form.Control type="text" value={experimentName} readOnly />
- </Form.Group>
- <Form.Group controlId="featureFilter">
- <Form.Label>Feature Filter</Form.Label>
- <Form.Control type="text" value={featureFilter} readOnly />
- </Form.Group>
- <Form.Group controlId="hyperParameters">
- <Form.Label>Hyper Parameters</Form.Label>
- <Form.Control type="text" value={hyperParameters} readOnly />
- </Form.Group>
- <Form.Group controlId="metrics">
- <Form.Label>Metrics</Form.Label>
- <Form.Control type="text" value={metrics} readOnly />
- </Form.Group>
- <Form.Group id="enableVersioning">
- <Form.Check type="checkbox" label="Enable versioning"
- checked={enableVersioning} readOnly/>
- </Form.Group>
- <Form.Group controlId="pipelineVersion">
- <Form.Label>Training Function Version</Form.Label>
- <Form.Control type="text" value={pipelineVersion} readOnly />
- </Form.Group>
- <Form.Group controlId="datalakeSource">
- <Form.Label>Datalake Source</Form.Label>
- <Form.Control type="text" value={datalakeSource} readOnly />
- </Form.Group>
- <Form.Group controlId="modelUrl">
- <Form.Label>Model URL</Form.Label>
- <Form.Control type="text" value={modelUrl} readOnly />
- </Form.Group>
- </Form>
- </>
- );
-}
-
-export default TrainingJobInfo;
\ No newline at end of file
+export default TrainingJobInfo;
- /* ==================================================================================
+/* ==================================================================================
Copyright (c) 2022 Samsung Electronics Co., Ltd. All Rights Reserved.
limitations under the License.
================================================================================== */
-
+
body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
-
- code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
- }
\ No newline at end of file
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+ 'Droid Sans', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
import ReactDOM from 'react-dom';
import App from './App';
-ReactDOM.render(
- <App/>,
- document.getElementById('root')
-);
-
+ReactDOM.render(<App />, document.getElementById('root'));
Code Review / portal / aiml-dashboard.git / commitdiff