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';