From: CodImJun Date: Thu, 1 Aug 2024 06:58:40 +0000 (+0900) Subject: Fix for all file code lint X-Git-Tag: 4.0.0~37 X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?a=commitdiff_plain;h=26ae8e7fc1b26ba46d817ef420f5046d695f5713;p=portal%2Faiml-dashboard.git Fix for all file code lint Issue-ID: AIMLFW-114 Change-Id: Ia6969e4f0238b8cfedf7f30dff6595f79bbdc3ef Signed-off-by: CodImJun --- diff --git a/public/index.html b/public/index.html index b833d3f..4a5efd4 100644 --- a/public/index.html +++ b/public/index.html @@ -15,19 +15,16 @@ - + - - - + + + ', 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

Enabled

; - else return

Disabled

- }; - - const columns = useMemo(() => [ - { - id: 'selection', - Header: ({ getToggleAllRowsSelectedProps }) => ( -
- -
- ), - Cell: ({ row }) => ( -
- -
- ), - }, - { - 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

Enabled

; + else return

Disabled

; + }; + + const columns = useMemo( + () => [ + { + id: 'selection', + Header: ({ getToggleAllRowsSelectedProps }) => ( +
+ +
+ ), + Cell: ({ row }) => ( +
+ +
+ ), + }, + { + 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
{handleDme(row.original.dme)}
; }, - { - id: 'dme', - Header: 'DME', - accessor: 'dme', - Cell: ({ row }) => { - return ( -
- {handleDme(row.original.dme)} -
- ); - } - - }, - { - id: 'info', - Header: 'Info', - Cell: ({ row }) => { - return ( -
- -
- ); - } - } - ], []); - const data = useMemo(() => featureGroups, [featureGroups]); - const { - getTableProps, - headerGroups, - rows, - prepareRow, - selectedFlatRows, - toggleAllRowsSelected - } = useTable( - { - columns, - data, - autoResetSelectedRows: false + }, + { + id: 'info', + Header: 'Info', + Cell: ({ row }) => { + return ( +
+ +
+ ); }, - useRowSelect - ) - return ( - <> - {' '} - - - {headerGroups.map(headerGroup => ( - - {headerGroup.headers.map(column => ( - - {column.render('Header')} - - ))} - - ))} - - - {rows.map((row, i) => { - prepareRow(row) - return ( - - {row.cells.map(cell => { - return ( - - {cell.render('Cell')} - - ) - })} - - ) - })} - - - - - - - - ); -} - -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 ( + <> + {' '} + + + {headerGroups.map(headerGroup => ( + + {headerGroup.headers.map(column => ( + {column.render('Header')} + ))} + + ))} + + + {rows.map((row, i) => { + prepareRow(row); + return ( + + {row.cells.map(cell => { + return {cell.render('Cell')}; + })} + + ); + })} + + + + + + + ); +}; + +export default ListFeatureGroup; diff --git a/src/components/home/status/Popup.js b/src/components/home/status/Popup.js index 1d8add9..a3f0248 100644 --- a/src/components/home/status/Popup.js +++ b/src/components/home/status/Popup.js @@ -16,25 +16,25 @@ // ================================================================================== - import React from 'react'; -import {Modal} from 'react-bootstrap'; +import { Modal } from 'react-bootstrap'; -function Popup(props){ +function Popup(props) { return ( <> - - - - {props.title} - - - - {props.children} - + + + {props.title} + + {props.children} ); } -export default Popup; \ No newline at end of file +export default Popup; diff --git a/src/components/home/status/StatusPageRows.js b/src/components/home/status/StatusPageRows.js index 8613e4c..18ac2a5 100644 --- a/src/components/home/status/StatusPageRows.js +++ b/src/components/home/status/StatusPageRows.js @@ -20,19 +20,19 @@ import React, { useMemo, useState, useEffect } from 'react'; import BTable from 'react-bootstrap/Table'; import Button from 'react-bootstrap/Button'; import { useTable, useRowSelect } from 'react-table'; -import {UCMgr_baseUrl} from '../common/Constants'; +import { 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); @@ -46,194 +46,188 @@ const StatusPageRows = (props) => { 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 }) => ( -
- -
- ), - Cell: ({ row }) => ( -
- -
- ), - }, - { - 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 }) => ( +
+ +
+ ), + Cell: ({ row }) => ( +
+ +
+ ), + }, + { + 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 ( + + ); + }, + }, + { + id: 'info', + Header: 'Info', + Cell: ({ row }) => { + return ( + + ); + }, + }, + ], + [], + ); + const data = useMemo(() => trainingJobs, [trainingJobs]); + + const { getTableProps, headerGroups, rows, prepareRow, selectedFlatRows, toggleAllRowsSelected } = useTable( { - id : 'stepsState', - Header : 'Detailed Status', - Cell : ({row}) => { - return ( - - ); - } + columns, + data, + autoResetSelectedRows: false, }, - { - id : 'info', - Header : 'Info', - Cell : ({row}) => { - return ( - - ); - } - } - ], []); - const data = useMemo(() => trainingJobs, [trainingJobs]); + useRowSelect, + ); - const { - getTableProps, - headerGroups, - rows, - prepareRow, - selectedFlatRows, - toggleAllRowsSelected - } = useTable( - { - columns, - data, - autoResetSelectedRows : false - }, - useRowSelect - ) - - return ( + return ( <> - {' '} - {' '} - {' '} - - + {headerGroups.map(headerGroup => ( {headerGroup.headers.map(column => ( - - {column.render('Header')} - + {column.render('Header')} ))} ))} @@ -241,38 +235,35 @@ const StatusPageRows = (props) => { {rows.map((row, i) => { - prepareRow(row) + prepareRow(row); return ( {row.cells.map(cell => { - return ( - - {cell.render('Cell')} - - ) + return {cell.render('Cell')}; })} - ) + ); })} - - + + logger={logger} + > - - + + - - + + ); -} +}; export default StatusPageRows; diff --git a/src/components/home/status/StepsState.css b/src/components/home/status/StepsState.css index c382efd..a78a769 100644 --- a/src/components/home/status/StepsState.css +++ b/src/components/home/status/StepsState.css @@ -1,4 +1,4 @@ - /* ================================================================================== +/* ================================================================================== Copyright (c) 2022 Samsung Electronics Co., Ltd. All Rights Reserved. @@ -15,51 +15,46 @@ 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; +} diff --git a/src/components/home/status/StepsState.js b/src/components/home/status/StepsState.js index b1ae15b..42d2f2d 100644 --- a/src/components/home/status/StepsState.js +++ b/src/components/home/status/StepsState.js @@ -17,93 +17,93 @@ // ================================================================================== 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 ( -
- { - boxes.map((item, index) => { - return ( -
-
-
- {boxesState[index] === 'NOT_STARTED' ? index + 1 : - boxesState[index] === 'FINISHED' ? '✔' : - boxesState[index] === 'FAILED' ? '❌' : - '⌛'} -
-
- {item} -
-
- { index + 1 !== boxes.length && - -
-
-
- { - connectionsState[index] === 'NOT_STARTED' ? 'Not started' : - connectionsState[index] === 'FINISHED' ? '✔ Finished' : - connectionsState[index] === 'FAILED' ? '❌ Failed' : - '⌛ In progress' - } -
-
- } -
- ) - }) - } -
- ); + return ( +
+ {boxes.map((item, index) => { + return ( +
+
+
+ {boxesState[index] === 'NOT_STARTED' + ? index + 1 + : boxesState[index] === 'FINISHED' + ? '✔' + : boxesState[index] === 'FAILED' + ? '❌' + : '⌛'} +
+
{item}
+
+ {index + 1 !== boxes.length && ( +
+
+
+ {connectionsState[index] === 'NOT_STARTED' + ? 'Not started' + : connectionsState[index] === 'FINISHED' + ? '✔ Finished' + : connectionsState[index] === 'FAILED' + ? '❌ Failed' + : '⌛ In progress'} +
+
+ )} +
+ ); + })} +
+ ); }; -export default StepsState; \ No newline at end of file +export default StepsState; diff --git a/src/components/home/status/TrainingJobInfo.js b/src/components/home/status/TrainingJobInfo.js index cca9cca..864abf9 100644 --- a/src/components/home/status/TrainingJobInfo.js +++ b/src/components/home/status/TrainingJobInfo.js @@ -20,136 +20,140 @@ import React, { useEffect, useState } from 'react'; 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 ( + <> +
+ + Training Job Name + + + + + + {isMme == true && ( +
+ + Model Name + + - return ( - <> - - - Training Job Name - - - - - - { isMme == true - && -
- - Model Name - - + + Model Info + + +
+ )} + + Version + + + + Description + + + + Feature Names + + + + Training Function Name + + + + Experiment Name + + + + Feature Filter + + + + Hyper Parameters + + + + Metrics + + + + + + + Training Function Version + + + + Datalake Source + + + + Model URL + + + + + ); +}; - - Model Info - - -
- - } - - Version - - - - Description - - - - Feature Names - - - - Training Function Name - - - - Experiment Name - - - - Feature Filter - - - - Hyper Parameters - - - - Metrics - - - - - - - Training Function Version - - - - Datalake Source - - - - Model URL - - - - - ); -} - -export default TrainingJobInfo; \ No newline at end of file +export default TrainingJobInfo; diff --git a/src/index.css b/src/index.css index 952000a..8a6396c 100644 --- a/src/index.css +++ b/src/index.css @@ -1,4 +1,4 @@ - /* ================================================================================== +/* ================================================================================== Copyright (c) 2022 Samsung Electronics Co., Ltd. All Rights Reserved. @@ -15,17 +15,15 @@ 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; +} diff --git a/src/index.js b/src/index.js index d3455ab..6ae9546 100644 --- a/src/index.js +++ b/src/index.js @@ -20,8 +20,4 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; -ReactDOM.render( - , - document.getElementById('root') -); - +ReactDOM.render(, document.getElementById('root'));