From 4e08dcc7b8ab212dbdb8b3c49a3bcf45a4832f17 Mon Sep 17 00:00:00 2001 From: avelichk Date: Wed, 1 Apr 2020 17:57:51 +0100 Subject: [PATCH 1/6] Remove antd package Change TabPanel for creating Experiment Move TabPanel to Common components --- .../v1alpha3/frontend/src/components/App.jsx | 16 ++-- .../src/components/Common/Create/TabPanel.jsx | 81 +++++++++++++++++++ .../frontend/src/components/HP/Create/HP.jsx | 35 -------- .../src/components/NAS/Create/NAS.jsx | 35 -------- .../frontend/src/constants/constants.js | 3 + 5 files changed, 92 insertions(+), 78 deletions(-) create mode 100644 pkg/ui/v1alpha3/frontend/src/components/Common/Create/TabPanel.jsx delete mode 100644 pkg/ui/v1alpha3/frontend/src/components/HP/Create/HP.jsx delete mode 100644 pkg/ui/v1alpha3/frontend/src/components/NAS/Create/NAS.jsx diff --git a/pkg/ui/v1alpha3/frontend/src/components/App.jsx b/pkg/ui/v1alpha3/frontend/src/components/App.jsx index a669dc2451c..5ba013f7de2 100644 --- a/pkg/ui/v1alpha3/frontend/src/components/App.jsx +++ b/pkg/ui/v1alpha3/frontend/src/components/App.jsx @@ -1,19 +1,19 @@ import React from 'react'; - -import Header from './Menu/Header'; -import Snack from './Menu/Snack'; +import { Route } from 'react-router-dom'; import { makeStyles } from '@material-ui/styles'; -import { Route } from 'react-router-dom'; import Main from './Menu/Main'; -import HP from './HP/Create/HP'; import HPJobMonitor from './HP/Monitor/HPJobMonitor'; import HPJobInfo from './HP/Monitor/HPJobInfo'; -import NAS from './NAS/Create/NAS'; import NASJobMonitor from './NAS/Monitor/NASJobMonitor'; import NASJobInfo from './NAS/Monitor/NASJobInfo'; import Trial from './Templates/Trial'; +import Header from './Menu/Header'; +import Snack from './Menu/Snack'; +import TabPanel from './Common/Create/TabPanel'; + +import * as constants from '../constants/constants'; const useStyles = makeStyles({ root: { @@ -29,10 +29,10 @@ const App = props => {
- + - + diff --git a/pkg/ui/v1alpha3/frontend/src/components/Common/Create/TabPanel.jsx b/pkg/ui/v1alpha3/frontend/src/components/Common/Create/TabPanel.jsx new file mode 100644 index 00000000000..9c73f80c74e --- /dev/null +++ b/pkg/ui/v1alpha3/frontend/src/components/Common/Create/TabPanel.jsx @@ -0,0 +1,81 @@ +import React from 'react'; + +import { withStyles } from '@material-ui/core/styles'; +import makeStyles from '@material-ui/styles/makeStyles'; +import Tabs from '@material-ui/core/Tabs'; +import Tab from '@material-ui/core/Tab'; + +import HPYAML from '../../HP/Create/YAML'; +import HPParameters from '../../HP/Create/HPParameters'; +import NASYAML from '../../NAS/Create/YAML'; +import NASParameters from '../../NAS/Create/NASParameters'; + +import * as constants from '../../../constants/constants'; + +const useStyles = makeStyles({ + root: { + marginTop: 40, + }, +}); + +const MyTabs = withStyles({ + root: { + borderBottom: '1px solid #e8e8e8', + marginBottom: 15, + }, + indicator: { + backgroundColor: '#1890ff', + }, +})(Tabs); + +const MyTab = withStyles(theme => ({ + root: { + textTransform: 'none', + marginRight: 40, + minWidth: 40, + fontWeight: theme.typography.fontWeightRegular, + fontSize: 14, + opacity: 1, + '&:hover': { + color: '#40a9ff', + }, + '&$selected': { + color: '#1890ff', + fontWeight: theme.typography.fontWeightMedium, + }, + '&:focus': { + color: '#1890ff', + }, + }, + selected: {}, +}))(props => ); + +const TabsPanel = props => { + const [tabIndex, setTabIndex] = React.useState(0); + + const onTabChange = (event, newIndex) => { + setTabIndex(newIndex); + }; + const classes = useStyles(); + return ( +
+ + + + + {props.match.path === constants.ROUTE_HP_CREATE ? ( + tabIndex === 0 ? ( + + ) : ( + + ) + ) : tabIndex === 0 ? ( + + ) : ( + + )} +
+ ); +}; + +export default TabsPanel; diff --git a/pkg/ui/v1alpha3/frontend/src/components/HP/Create/HP.jsx b/pkg/ui/v1alpha3/frontend/src/components/HP/Create/HP.jsx deleted file mode 100644 index da0c716c5fb..00000000000 --- a/pkg/ui/v1alpha3/frontend/src/components/HP/Create/HP.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import makeStyles from '@material-ui/styles/makeStyles'; -import { Tabs } from 'antd'; -import 'antd/dist/antd.css'; - -import YAML from './YAML'; -import HPParameters from './HPParameters'; - -const TabPane = Tabs.TabPane; - -const useStyles = makeStyles({ - root: { - flexGrow: 1, - marginTop: 40, - }, -}); - -const HP = props => { - const classes = useStyles(); - - return ( -
- - - - - - - - -
- ); -}; - -export default HP; diff --git a/pkg/ui/v1alpha3/frontend/src/components/NAS/Create/NAS.jsx b/pkg/ui/v1alpha3/frontend/src/components/NAS/Create/NAS.jsx deleted file mode 100644 index b6be235c687..00000000000 --- a/pkg/ui/v1alpha3/frontend/src/components/NAS/Create/NAS.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import makeStyles from '@material-ui/styles/makeStyles'; -import { Tabs } from 'antd'; -import 'antd/dist/antd.css'; - -import YAML from './YAML'; -import NASParameters from './NASParameters'; - -const TabPane = Tabs.TabPane; - -const useStyles = makeStyles({ - root: { - flexGrow: 1, - marginTop: 40, - }, -}); - -const NAS = props => { - const classes = useStyles(); - - return ( -
- - - - - - - - -
- ); -}; - -export default NAS; diff --git a/pkg/ui/v1alpha3/frontend/src/constants/constants.js b/pkg/ui/v1alpha3/frontend/src/constants/constants.js index 5d9c839e13d..144ba49dd2d 100644 --- a/pkg/ui/v1alpha3/frontend/src/constants/constants.js +++ b/pkg/ui/v1alpha3/frontend/src/constants/constants.js @@ -18,3 +18,6 @@ export const MC_HTTP_GET_HTTP_SCHEME = 'HTTP'; export const MC_PROMETHEUS_DEFAULT_PORT = 8080; export const MC_PROMETHEUS_DEFAULT_PATH = '/metrics'; + +export const ROUTE_HP_CREATE = '/katib/hp'; +export const ROUTE_NAS_CREATE = '/katib/nas'; From d97dd6fe671db2e25904567458028397a2791aaf Mon Sep 17 00:00:00 2001 From: avelichk Date: Wed, 1 Apr 2020 18:00:38 +0100 Subject: [PATCH 2/6] Remove antd from package.json --- pkg/ui/v1alpha3/frontend/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/pkg/ui/v1alpha3/frontend/package.json b/pkg/ui/v1alpha3/frontend/package.json index e1ccd98fc46..00ced3713ca 100644 --- a/pkg/ui/v1alpha3/frontend/package.json +++ b/pkg/ui/v1alpha3/frontend/package.json @@ -10,7 +10,6 @@ "@material-ui/styles": "^3.0.0-alpha.10", "@svgr/webpack": "4.1.0", "ace-builds": "^1.4.8", - "antd": "^3.13.6", "axios": "^0.18.0", "babel-core": "7.0.0-bridge.0", "babel-eslint": "9.0.0", From 9bfee5a596af6cdb3ae13b33ac5eaefdef58ead9 Mon Sep 17 00:00:00 2001 From: avelichk Date: Wed, 1 Apr 2020 19:27:13 +0100 Subject: [PATCH 3/6] Modify Katib Link and Main Page --- .../v1alpha3/frontend/src/components/App.jsx | 4 +-- .../src/components/Common/Create/TabPanel.jsx | 2 +- .../src/components/HP/Create/YAML.jsx | 3 +- .../frontend/src/components/Menu/Header.jsx | 35 +++++++++---------- .../frontend/src/components/Menu/Main.jsx | 15 +++++--- .../src/components/NAS/Create/YAML.jsx | 3 +- .../frontend/src/constants/constants.js | 4 +-- 7 files changed, 36 insertions(+), 30 deletions(-) diff --git a/pkg/ui/v1alpha3/frontend/src/components/App.jsx b/pkg/ui/v1alpha3/frontend/src/components/App.jsx index 5ba013f7de2..3d361f7b36a 100644 --- a/pkg/ui/v1alpha3/frontend/src/components/App.jsx +++ b/pkg/ui/v1alpha3/frontend/src/components/App.jsx @@ -29,10 +29,10 @@ const App = props => {
- + - + diff --git a/pkg/ui/v1alpha3/frontend/src/components/Common/Create/TabPanel.jsx b/pkg/ui/v1alpha3/frontend/src/components/Common/Create/TabPanel.jsx index 9c73f80c74e..18b4b974f76 100644 --- a/pkg/ui/v1alpha3/frontend/src/components/Common/Create/TabPanel.jsx +++ b/pkg/ui/v1alpha3/frontend/src/components/Common/Create/TabPanel.jsx @@ -63,7 +63,7 @@ const TabsPanel = props => { - {props.match.path === constants.ROUTE_HP_CREATE ? ( + {props.match.path === constants.LINK_HP_CREATE ? ( tabIndex === 0 ? ( ) : ( diff --git a/pkg/ui/v1alpha3/frontend/src/components/HP/Create/YAML.jsx b/pkg/ui/v1alpha3/frontend/src/components/HP/Create/YAML.jsx index c20920aa14a..c897eb845f9 100644 --- a/pkg/ui/v1alpha3/frontend/src/components/HP/Create/YAML.jsx +++ b/pkg/ui/v1alpha3/frontend/src/components/HP/Create/YAML.jsx @@ -7,6 +7,7 @@ import 'ace-builds/src-noconflict/theme-sqlserver'; import 'ace-builds/src-noconflict/mode-yaml'; import Button from '@material-ui/core/Button'; +import Typography from '@material-ui/core/Typography'; import { changeYaml } from '../../../actions/hpCreateActions'; import { submitYaml } from '../../../actions/generalActions'; @@ -39,7 +40,7 @@ const YAML = props => { const classes = useStyles(); return (
-

Generate

+ {'Generate'}
{ const classes = useStyles(); @@ -36,7 +39,7 @@ const Header = props => { }; return ( -
+
{ > - + Katib - + diff --git a/pkg/ui/v1alpha3/frontend/src/components/Menu/Main.jsx b/pkg/ui/v1alpha3/frontend/src/components/Menu/Main.jsx index 44e3cce03aa..39fd6ee30ca 100644 --- a/pkg/ui/v1alpha3/frontend/src/components/Menu/Main.jsx +++ b/pkg/ui/v1alpha3/frontend/src/components/Menu/Main.jsx @@ -1,10 +1,12 @@ import React from 'react'; +import { Link } from 'react-router-dom'; + import { makeStyles } from '@material-ui/styles'; import Paper from '@material-ui/core/Paper'; import Typography from '@material-ui/core/Typography'; import Grid from '@material-ui/core/Grid'; -import Button from '@material-ui/core/Button'; -import { Link } from 'react-router-dom'; + +import * as constants from '../../constants/constants'; const useStyles = makeStyles({ root: { @@ -17,6 +19,7 @@ const useStyles = makeStyles({ }, item: { padding: '40px !important', + textDecoration: 'none !important', }, block: { backgroundColor: '#4e4e4e', @@ -27,6 +30,10 @@ const useStyles = makeStyles({ backgroundColor: 'black', }, }, + link: { + textDecoration: 'none', + color: '#1890ff', + }, }); const Main = props => { @@ -38,14 +45,14 @@ const Main = props => { Choose type of experiment
- + Hyperparameter Tuning - + Neural Architecture Search diff --git a/pkg/ui/v1alpha3/frontend/src/components/NAS/Create/YAML.jsx b/pkg/ui/v1alpha3/frontend/src/components/NAS/Create/YAML.jsx index 6b40035cbf8..8b980e3b82c 100644 --- a/pkg/ui/v1alpha3/frontend/src/components/NAS/Create/YAML.jsx +++ b/pkg/ui/v1alpha3/frontend/src/components/NAS/Create/YAML.jsx @@ -7,6 +7,7 @@ import 'ace-builds/src-noconflict/theme-sqlserver'; import 'ace-builds/src-noconflict/mode-yaml'; import Button from '@material-ui/core/Button'; +import Typography from '@material-ui/core/Typography'; import { changeYaml } from '../../../actions/nasCreateActions'; import { submitYaml } from '../../../actions/generalActions'; @@ -39,7 +40,7 @@ const YAML = props => { const classes = useStyles(); return (
-

Generate

+ {'Generate'}
Date: Wed, 1 Apr 2020 19:51:10 +0100 Subject: [PATCH 4/6] Change Trial and Jobs monitor --- .../src/components/HP/Monitor/HPJobMonitor.jsx | 11 +++++++++-- .../src/components/NAS/Monitor/NASJobMonitor.jsx | 12 +++++++++--- .../frontend/src/components/Templates/Trial.jsx | 11 +++++++---- 3 files changed, 25 insertions(+), 9 deletions(-) diff --git a/pkg/ui/v1alpha3/frontend/src/components/HP/Monitor/HPJobMonitor.jsx b/pkg/ui/v1alpha3/frontend/src/components/HP/Monitor/HPJobMonitor.jsx index 35b559851d6..7c197d925a4 100644 --- a/pkg/ui/v1alpha3/frontend/src/components/HP/Monitor/HPJobMonitor.jsx +++ b/pkg/ui/v1alpha3/frontend/src/components/HP/Monitor/HPJobMonitor.jsx @@ -1,11 +1,13 @@ import React from 'react'; +import { connect } from 'react-redux'; + import { withStyles } from '@material-ui/core/styles'; +import Typography from '@material-ui/core/Typography'; import FilterPanel from './FilterPanel'; import HPJobList from './HPJobList'; import { fetchHPJobs } from '../../../actions/hpMonitorActions'; -import { connect } from 'react-redux'; const styles = theme => ({ root: { @@ -13,6 +15,9 @@ const styles = theme => ({ margin: '0 auto', marginTop: 10, }, + text: { + marginBottom: 20, + }, }); class HPJobMonitor extends React.Component { @@ -25,7 +30,9 @@ class HPJobMonitor extends React.Component { return (
-

Experiment Monitor

+ + {'Experiment Monitor'} +
diff --git a/pkg/ui/v1alpha3/frontend/src/components/NAS/Monitor/NASJobMonitor.jsx b/pkg/ui/v1alpha3/frontend/src/components/NAS/Monitor/NASJobMonitor.jsx index 932130688ab..108450fd84c 100644 --- a/pkg/ui/v1alpha3/frontend/src/components/NAS/Monitor/NASJobMonitor.jsx +++ b/pkg/ui/v1alpha3/frontend/src/components/NAS/Monitor/NASJobMonitor.jsx @@ -1,11 +1,12 @@ import React from 'react'; +import { connect } from 'react-redux'; + import { withStyles } from '@material-ui/core/styles'; +import Typography from '@material-ui/core/Typography'; import FilterPanel from './FilterPanel'; import NASJobList from './NASJobList'; -import { connect } from 'react-redux'; - import { fetchNASJobs } from '../../../actions/nasMonitorActions'; const styles = theme => ({ @@ -14,6 +15,9 @@ const styles = theme => ({ margin: '0 auto', marginTop: 10, }, + text: { + marginBottom: 20, + }, }); class NASJobMonitor extends React.Component { @@ -25,7 +29,9 @@ class NASJobMonitor extends React.Component { const { classes } = this.props; return (
-

Experiment Monitor

+ + {'Experiment Monitor'} +
diff --git a/pkg/ui/v1alpha3/frontend/src/components/Templates/Trial.jsx b/pkg/ui/v1alpha3/frontend/src/components/Templates/Trial.jsx index 3513dfc5c21..1b87c7cf71c 100644 --- a/pkg/ui/v1alpha3/frontend/src/components/Templates/Trial.jsx +++ b/pkg/ui/v1alpha3/frontend/src/components/Templates/Trial.jsx @@ -1,12 +1,12 @@ import React from 'react'; import { connect } from 'react-redux'; -import withStyles from '@material-ui/styles/withStyles'; +import { withStyles } from '@material-ui/core/styles'; +import Typography from '@material-ui/core/Typography'; import TemplateList from './Common/TemplateList'; import { fetchTrialTemplates } from '../../actions/templateActions'; -import { fetchNamespaces } from '../../actions/generalActions'; const styles = theme => ({ root: { @@ -14,6 +14,9 @@ const styles = theme => ({ margin: '0 auto', marginTop: 10, }, + text: { + fontSize: theme.typography.pxToRem(40), + }, }); class Trial extends React.Component { @@ -26,11 +29,11 @@ class Trial extends React.Component { return (
-

Trial Templates

+ {'Trial Templates'}
); } } -export default connect(null, { fetchTrialTemplates, fetchNamespaces })(withStyles(styles)(Trial)); +export default connect(null, { fetchTrialTemplates })(withStyles(styles)(Trial)); From 998af061ad5cd4c05f3f41e3dbf07522ce28258c Mon Sep 17 00:00:00 2001 From: avelichk Date: Wed, 1 Apr 2020 20:18:08 +0100 Subject: [PATCH 5/6] Fix links, margin in Trial view --- .../frontend/src/components/HP/Monitor/HPJobInfo.jsx | 5 ++++- .../frontend/src/components/NAS/Monitor/NASJobInfo.jsx | 5 ++++- .../frontend/src/components/NAS/Monitor/NASJobStepInfo.jsx | 5 ++++- pkg/ui/v1alpha3/frontend/src/components/Templates/Trial.jsx | 6 ++++-- 4 files changed, 16 insertions(+), 5 deletions(-) diff --git a/pkg/ui/v1alpha3/frontend/src/components/HP/Monitor/HPJobInfo.jsx b/pkg/ui/v1alpha3/frontend/src/components/HP/Monitor/HPJobInfo.jsx index 11131fd45d8..86ce950f9b3 100644 --- a/pkg/ui/v1alpha3/frontend/src/components/HP/Monitor/HPJobInfo.jsx +++ b/pkg/ui/v1alpha3/frontend/src/components/HP/Monitor/HPJobInfo.jsx @@ -30,6 +30,9 @@ const styles = theme => ({ textAlign: 'center', marginBottom: 15, }, + link: { + textDecoration: 'none', + }, }); class HPJobInfo extends React.Component { @@ -45,7 +48,7 @@ class HPJobInfo extends React.Component { const { classes } = this.props; return (
- + diff --git a/pkg/ui/v1alpha3/frontend/src/components/NAS/Monitor/NASJobInfo.jsx b/pkg/ui/v1alpha3/frontend/src/components/NAS/Monitor/NASJobInfo.jsx index 6c0677e57d6..9379dc16d87 100644 --- a/pkg/ui/v1alpha3/frontend/src/components/NAS/Monitor/NASJobInfo.jsx +++ b/pkg/ui/v1alpha3/frontend/src/components/NAS/Monitor/NASJobInfo.jsx @@ -39,6 +39,9 @@ const styles = theme => ({ textAlign: 'center', marginBottom: 15, }, + link: { + textDecoration: 'none', + }, }); class NASJobInfo extends React.Component { @@ -54,7 +57,7 @@ class NASJobInfo extends React.Component { const { classes } = this.props; return (
- + diff --git a/pkg/ui/v1alpha3/frontend/src/components/NAS/Monitor/NASJobStepInfo.jsx b/pkg/ui/v1alpha3/frontend/src/components/NAS/Monitor/NASJobStepInfo.jsx index d026fb3f30c..54b6c348ab0 100644 --- a/pkg/ui/v1alpha3/frontend/src/components/NAS/Monitor/NASJobStepInfo.jsx +++ b/pkg/ui/v1alpha3/frontend/src/components/NAS/Monitor/NASJobStepInfo.jsx @@ -11,6 +11,9 @@ const styles = theme => ({ margin: '0 auto', textAlign: 'center', }, + link: { + textDecoration: 'none', + }, }); class NASJobStepInfo extends React.Component { @@ -41,7 +44,7 @@ class NASJobStepInfo extends React.Component { })}
{/* TODO: add link in backend */} - + diff --git a/pkg/ui/v1alpha3/frontend/src/components/Templates/Trial.jsx b/pkg/ui/v1alpha3/frontend/src/components/Templates/Trial.jsx index 1b87c7cf71c..ec2739a72e0 100644 --- a/pkg/ui/v1alpha3/frontend/src/components/Templates/Trial.jsx +++ b/pkg/ui/v1alpha3/frontend/src/components/Templates/Trial.jsx @@ -15,7 +15,7 @@ const styles = theme => ({ marginTop: 10, }, text: { - fontSize: theme.typography.pxToRem(40), + marginBottom: 15, }, }); @@ -29,7 +29,9 @@ class Trial extends React.Component { return (
- {'Trial Templates'} + + {'Trial Templates'} +
From b15d27875ff286fed3d8150779370b33ea9860ca Mon Sep 17 00:00:00 2001 From: avelichk Date: Wed, 1 Apr 2020 20:31:04 +0100 Subject: [PATCH 6/6] Increase margin for Trial --- .../frontend/src/components/NAS/Monitor/NASJobStepInfo.jsx | 4 ++-- pkg/ui/v1alpha3/frontend/src/components/Templates/Trial.jsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/pkg/ui/v1alpha3/frontend/src/components/NAS/Monitor/NASJobStepInfo.jsx b/pkg/ui/v1alpha3/frontend/src/components/NAS/Monitor/NASJobStepInfo.jsx index 54b6c348ab0..c2d9b80a518 100644 --- a/pkg/ui/v1alpha3/frontend/src/components/NAS/Monitor/NASJobStepInfo.jsx +++ b/pkg/ui/v1alpha3/frontend/src/components/NAS/Monitor/NASJobStepInfo.jsx @@ -44,11 +44,11 @@ class NASJobStepInfo extends React.Component { })}
{/* TODO: add link in backend */} - + {/* - + */}
); } diff --git a/pkg/ui/v1alpha3/frontend/src/components/Templates/Trial.jsx b/pkg/ui/v1alpha3/frontend/src/components/Templates/Trial.jsx index ec2739a72e0..6fc2393ce50 100644 --- a/pkg/ui/v1alpha3/frontend/src/components/Templates/Trial.jsx +++ b/pkg/ui/v1alpha3/frontend/src/components/Templates/Trial.jsx @@ -15,7 +15,7 @@ const styles = theme => ({ marginTop: 10, }, text: { - marginBottom: 15, + marginBottom: 20, }, });