UI: Remove antd package (kubeflow#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
sperlingxx · Apr 7, 2020 · 04aa588 · 04aa588
1 parent 6ae0450
commit 04aa588
Show file tree

Hide file tree

Showing 16 changed files with 163 additions and 117 deletions.
diff --git 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
@@ -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 => {
     <div className={classes.root}>
       <Header />
       <Route exact path="/" component={Main} />
-      <Route path="/katib/hp" component={HP} />
+      <Route path={constants.LINK_HP_CREATE} component={TabPanel} />
       <Route exact path="/katib/hp_monitor" component={HPJobMonitor} />
       <Route path="/katib/hp_monitor/:namespace/:name" component={HPJobInfo} />
-      <Route path="/katib/nas" component={NAS} />
+      <Route path={constants.LINK_NAS_CREATE} component={TabPanel} />
       <Route exact path="/katib/nas_monitor" component={NASJobMonitor} />
       <Route path="/katib/nas_monitor/:namespace/:name" component={NASJobInfo} />
       <Route path="/katib/trial" component={Trial} />

diff --git a/pkg/ui/v1alpha3/frontend/src/components/Common/Create/TabPanel.jsx 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 => <Tab disableRipple {...props} />);
+
+const TabsPanel = props => {
+  const [tabIndex, setTabIndex] = React.useState(0);
+
+  const onTabChange = (event, newIndex) => {
+    setTabIndex(newIndex);
+  };
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      <MyTabs value={tabIndex} onChange={onTabChange}>
+        <MyTab label="YAML File" />
+        <MyTab label="Parameters" />
+      </MyTabs>
+      {props.match.path === constants.LINK_HP_CREATE ? (
+        tabIndex === 0 ? (
+          <HPYAML />
+        ) : (
+          <HPParameters />
+        )
+      ) : tabIndex === 0 ? (
+        <NASYAML />
+      ) : (
+        <NASParameters />
+      )}
+    </div>
+  );
+};
+
+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
diff --git 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 (
     <div>
-      <h1>Generate</h1>
+      <Typography variant={'h5'}>{'Generate'}</Typography>
       <hr />
       <div className={classes.editor}>
         <AceEditor

diff --git 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 (
       <div className={classes.root}>
-        <Link to="/katib/hp_monitor">
+        <Link to="/katib/hp_monitor" className={classes.link}>
           <Button variant={'contained'} color={'primary'}>
             Back
           </Button>

diff --git a/pkg/ui/v1alpha3/frontend/src/components/HP/Monitor/HPJobMonitor.jsx b/pkg/ui/v1alpha3/frontend/src/components/HP/Monitor/HPJobMonitor.jsx
@@ -1,18 +1,23 @@
 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: {
     width: '90%',
     margin: '0 auto',
     marginTop: 10,
   },
+  text: {
+    marginBottom: 20,
+  },
 });
 
 class HPJobMonitor extends React.Component {
@@ -25,7 +30,9 @@ class HPJobMonitor extends React.Component {
 
     return (
       <div className={classes.root}>
-        <h1>Experiment Monitor</h1>
+        <Typography variant={'h5'} className={classes.text}>
+          {'Experiment Monitor'}
+        </Typography>
         <FilterPanel />
         <HPJobList />
       </div>

diff --git 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 (
-    <div className={classes.root}>
+    <div>
       <AppBar position={'static'} color={'primary'}>
         <Toolbar>
           <IconButton
@@ -47,15 +50,9 @@ const Header = props => {
           >
             <MenuIcon />
           </IconButton>
-          <Typography
-            variant={'headline'}
-            color={'secondary'}
-            component={Link}
-            to="/"
-            classes={classes.link}
-          >
+          <KatibLink variant={'headline'} color={'secondary'} component={Link} to="/">
             Katib
-          </Typography>
+          </KatibLink>
         </Toolbar>
         <Menu />
       </AppBar>

diff --git 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 => {
       <Typography variant={'h6'}>Choose type of experiment</Typography>
       <br />
       <Grid container spacing={40} alignContent={'center'}>
-        <Grid item xs={6} className={classes.item} component={Link} to="/katib/hp/">
+        <Grid item xs={6} className={classes.item} component={Link} to={constants.LINK_HP_CREATE}>
           <Paper className={classes.block}>
             <Typography variant={'h6'} color={'secondary'}>
               Hyperparameter Tuning
             </Typography>
           </Paper>
         </Grid>
-        <Grid item xs={6} className={classes.item} component={Link} to="/katib/nas/">
+        <Grid item xs={6} className={classes.item} component={Link} to={constants.LINK_NAS_CREATE}>
           <Paper className={classes.block}>
             <Typography variant={'h6'} color={'secondary'}>
               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