From 4da82cfac888487b7cbf7bfabd61c58f975af0a1 Mon Sep 17 00:00:00 2001 From: Andrey Velichkevich Date: Fri, 3 Apr 2020 11:59:46 +0100 Subject: [PATCH] UI: Remove antd package (#1117) * Remove antd package Change TabPanel for creating Experiment Move TabPanel to Common components * Remove antd from package.json * Modify Katib Link and Main Page * Change Trial and Jobs monitor * Fix links, margin in Trial view * Increase margin for Trial --- pkg/ui/v1alpha3/frontend/package.json | 1 - .../v1alpha3/frontend/src/components/App.jsx | 16 ++-- .../src/components/Common/Create/TabPanel.jsx | 81 +++++++++++++++++++ .../frontend/src/components/HP/Create/HP.jsx | 35 -------- .../src/components/HP/Create/YAML.jsx | 3 +- .../src/components/HP/Monitor/HPJobInfo.jsx | 5 +- .../components/HP/Monitor/HPJobMonitor.jsx | 11 ++- .../frontend/src/components/Menu/Header.jsx | 35 ++++---- .../frontend/src/components/Menu/Main.jsx | 15 +++- .../src/components/NAS/Create/NAS.jsx | 35 -------- .../src/components/NAS/Create/YAML.jsx | 3 +- .../src/components/NAS/Monitor/NASJobInfo.jsx | 5 +- .../components/NAS/Monitor/NASJobMonitor.jsx | 12 ++- .../components/NAS/Monitor/NASJobStepInfo.jsx | 7 +- .../src/components/Templates/Trial.jsx | 13 ++- .../frontend/src/constants/constants.js | 3 + 16 files changed, 163 insertions(+), 117 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/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", diff --git a/pkg/ui/v1alpha3/frontend/src/components/App.jsx b/pkg/ui/v1alpha3/frontend/src/components/App.jsx index a669dc2451c..3d361f7b36a 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..18b4b974f76 --- /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.LINK_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/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'}
({ 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/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/Menu/Header.jsx b/pkg/ui/v1alpha3/frontend/src/components/Menu/Header.jsx index 47a758aaa40..6bbd813887a 100644 --- a/pkg/ui/v1alpha3/frontend/src/components/Menu/Header.jsx +++ b/pkg/ui/v1alpha3/frontend/src/components/Menu/Header.jsx @@ -1,32 +1,35 @@ import React from 'react'; +import { connect } from 'react-redux'; +import { Link } from 'react-router-dom'; + import makeStyles from '@material-ui/styles/makeStyles'; +import { withStyles } from '@material-ui/core/styles'; + import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; import Typography from '@material-ui/core/Typography'; import IconButton from '@material-ui/core/IconButton'; import MenuIcon from '@material-ui/icons/Menu'; -import { Link } from 'react-router-dom'; import Menu from './Menu'; -import { connect } from 'react-redux'; import { toggleMenu } from '../../actions/generalActions'; const useStyles = makeStyles({ - root: { - flexGrow: 1, - }, - grow: { - flexGrow: 1, - }, menuButton: { marginLeft: -12, marginRight: 20, }, - link: { +}); + +const KatibLink = withStyles({ + root: { textDecoration: 'none', + '&:hover': { + color: '#40a9ff', + }, }, -}); +})(Typography); const Header = props => { 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/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/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'}
({ 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/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/NAS/Monitor/NASJobStepInfo.jsx b/pkg/ui/v1alpha3/frontend/src/components/NAS/Monitor/NASJobStepInfo.jsx index d026fb3f30c..c2d9b80a518 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,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 3513dfc5c21..6fc2393ce50 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: { + marginBottom: 20, + }, }); class Trial extends React.Component { @@ -26,11 +29,13 @@ 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)); diff --git a/pkg/ui/v1alpha3/frontend/src/constants/constants.js b/pkg/ui/v1alpha3/frontend/src/constants/constants.js index 5d9c839e13d..d0ff7834322 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 LINK_HP_CREATE = '/katib/hp'; +export const LINK_NAS_CREATE = '/katib/nas';