Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

UI: Update Material UI version to V4 #1254

Merged
merged 5 commits into from
Jul 7, 2020
Merged

UI: Update Material UI version to V4 #1254

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
edb9b2a
Init commit for material UI v4
andreyvelich Jul 6, 2020
002890c
Rebase
andreyvelich Jul 6, 2020
4e75395
Rebase
andreyvelich Jul 6, 2020
968cd0e
Add label to all selects
andreyvelich Jul 6, 2020
d9590fe
Remove changes from v1alpha3
andreyvelich Jul 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
424 changes: 101 additions & 323 deletions pkg/ui/v1beta1/frontend/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 2 additions & 3 deletions pkg/ui/v1beta1/frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,8 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^3.9.2",
"@material-ui/icons": "^3.0.2",
"@material-ui/styles": "^3.0.0-alpha.10",
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"ace-builds": "^1.4.8",
"axios": "^0.18.0",
"graphviz-react": "^1.0.6",
Expand Down
2 changes: 1 addition & 1 deletion pkg/ui/v1beta1/frontend/src/components/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { Route } from 'react-router-dom';

import { makeStyles } from '@material-ui/styles';
import { makeStyles } from '@material-ui/core/styles';

import Main from './Menu/Main';
import HPJobInfo from './HP/Monitor/HPJobInfo';
Expand Down
21 changes: 10 additions & 11 deletions pkg/ui/v1beta1/frontend/src/components/Common/Create/Params/MetricsCollector.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,14 @@ import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/theme-sqlserver';
import 'ace-builds/src-noconflict/mode-yaml';

import withStyles from '@material-ui/styles/withStyles';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import Tooltip from '@material-ui/core/Tooltip';
import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import Select from '@material-ui/core/Select';
import OutlinedInput from '@material-ui/core/OutlinedInput';
import MenuItem from '@material-ui/core/MenuItem';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
Expand Down Expand Up @@ -220,7 +219,7 @@ class MetricsCollectorSpec extends React.Component {
<div>
<Grid container alignItems={'center'} className={classes.grid}>
<Grid item xs={3}>
<Typography variant={'subheading'}>
<Typography variant={'subtitle1'}>
<Tooltip title={'Kind for the Metrics Collector Spec'}>
<HelpOutlineIcon className={classes.help} color={'primary'} />
</Tooltip>
Expand All @@ -237,7 +236,7 @@ class MetricsCollectorSpec extends React.Component {
: this.props.mcSpecNAS.collector.kind
}
onChange={this.onMCKindChange}
input={<OutlinedInput labelWidth={35} />}
label="Kind"
>
{this.props.mcKindsList.map((kind, i) => {
return (
Expand All @@ -260,7 +259,7 @@ class MetricsCollectorSpec extends React.Component {
this.props.mcSpecNAS.collector.kind === constants.MC_KIND_CUSTOM))) && (
<Grid container alignItems={'center'} className={classes.grid}>
<Grid item xs={3}>
<Typography variant={'subheading'}>
<Typography variant={'subtitle1'}>
<Tooltip
title={
'Kind of the file path and path to the metrics file, path must be absolute'
Expand All @@ -281,7 +280,7 @@ class MetricsCollectorSpec extends React.Component {
: this.props.mcSpecNAS.source.fileSystemPath.kind
}
onChange={this.onMCFileSystemKindChange}
input={<OutlinedInput labelWidth={120} />}
label="File System Kind"
>
{((this.props.jobType === constants.EXPERIMENT_TYPE_HP &&
this.props.mcSpecHP.collector.kind === constants.MC_KIND_FILE) ||
Expand Down Expand Up @@ -342,7 +341,7 @@ class MetricsCollectorSpec extends React.Component {
<div>
<Grid container alignItems={'center'} className={classes.grid}>
<Grid item xs={3}>
<Typography variant={'subheading'}>
<Typography variant={'subtitle1'}>
<Tooltip
title={
'Port and Path to access on the HTTP server. Port must be a positive integer value. Path must start with "/"'
Expand Down Expand Up @@ -381,7 +380,7 @@ class MetricsCollectorSpec extends React.Component {
</Grid>
<Grid container alignItems={'center'} className={classes.grid}>
<Grid item xs={3}>
<Typography variant={'subheading'}>
<Typography variant={'subtitle1'}>
<Tooltip
title={
'Scheme to use for connecting to the host. Host name to make connection, defaults to the pod IP'
Expand All @@ -402,7 +401,7 @@ class MetricsCollectorSpec extends React.Component {
: this.props.mcSpecNAS.source.httpGet.scheme
}
onChange={this.onMCHttpGetSchemeChange}
input={<OutlinedInput labelWidth={60} />}
label="Scheme"
>
{this.props.mcURISchemesList.map((scheme, i) => {
return (
Expand All @@ -429,7 +428,7 @@ class MetricsCollectorSpec extends React.Component {
</Grid>
<Grid container alignItems={'center'} className={classes.grid}>
<Grid item xs={3}>
<Typography variant={'subheading'}>
<Typography variant={'subtitle1'}>
<Tooltip title={'Custom headers to set in the request'}>
<HelpOutlineIcon className={classes.help} color={'primary'} />
</Tooltip>
Expand Down Expand Up @@ -522,7 +521,7 @@ class MetricsCollectorSpec extends React.Component {
this.props.mcSpecNAS.collector.kind === constants.MC_KIND_CUSTOM)) && (
<Grid container alignItems={'center'} className={classes.grid}>
<Grid item xs={3}>
<Typography variant={'subheading'}>
<Typography variant={'subtitle1'}>
<Tooltip title={'Yaml structure for the custom metrics collector container'}>
<HelpOutlineIcon className={classes.help} color={'primary'} />
</Tooltip>
Expand Down
17 changes: 8 additions & 9 deletions pkg/ui/v1beta1/frontend/src/components/Common/Create/Params/Trial/TrialConfigMap.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import React from 'react';
import { connect } from 'react-redux';

import withStyles from '@material-ui/styles/withStyles';
import AceEditor from 'react-ace';

import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Tooltip from '@material-ui/core/Tooltip';
import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
import Typography from '@material-ui/core/Typography';
import OutlinedInput from '@material-ui/core/OutlinedInput';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
Expand All @@ -15,11 +16,9 @@ import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import AceEditor from 'react-ace';

import { filterTemplatesExperiment } from '../../../../../actions/generalActions';
import { fetchTrialTemplates } from '../../../../../actions/templateActions';

import { GENERAL_MODULE } from '../../../../../constants/constants';

const styles = theme => ({
Expand Down Expand Up @@ -95,7 +94,7 @@ class TrialConfigMap extends React.Component {
<div className={classes.parameter}>
<Grid container alignItems={'center'}>
<Grid item xs={3}>
<Typography variant={'subheading'}>
<Typography variant={'subtitle1'}>
<Tooltip title={'Trial Template ConfigMap Namespace and Name'}>
<HelpOutlineIcon className={classes.help} color={'primary'} />
</Tooltip>
Expand All @@ -113,7 +112,7 @@ class TrialConfigMap extends React.Component {
.ConfigMapNamespace
}
onChange={this.onTemplateConfigMapNamespaceChange}
input={<OutlinedInput labelWidth={90} />}
label="Namespace"
>
{this.props.trialTemplatesData.map((trialTemplate, i) => {
return (
Expand All @@ -134,7 +133,7 @@ class TrialConfigMap extends React.Component {
.ConfigMaps[this.props.configMapNameIndex].ConfigMapName
}
onChange={this.onTemplateConfigMapNameChange}
input={<OutlinedInput labelWidth={50} />}
label="Name"
>
{this.props.trialTemplatesData[
this.props.configMapNamespaceIndex
Expand All @@ -155,7 +154,7 @@ class TrialConfigMap extends React.Component {
<div className={classes.parameter}>
<Grid container alignItems={'center'}>
<Grid item xs={3}>
<Typography variant={'subheading'}>
<Typography variant={'subtitle1'}>
<Tooltip title={'Trial Template Path in ConfigMap'}>
<HelpOutlineIcon className={classes.help} color={'primary'} />
</Tooltip>
Expand All @@ -175,7 +174,7 @@ class TrialConfigMap extends React.Component {
].Path
}
onChange={this.onTemplateConfigMapPathChange}
input={<OutlinedInput labelWidth={110} />}
label="Template Path"
>
{this.props.trialTemplatesData[this.props.configMapNamespaceIndex].ConfigMaps[
this.props.configMapNameIndex
Expand Down
4 changes: 2 additions & 2 deletions pkg/ui/v1beta1/frontend/src/components/Common/Create/Params/Trial/TrialParameters.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { connect } from 'react-redux';
import makeStyles from '@material-ui/styles/makeStyles';

import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Tooltip from '@material-ui/core/Tooltip';
import Typography from '@material-ui/core/Typography';
Expand Down Expand Up @@ -58,7 +58,7 @@ const TrialParameters = props => {
{props.trialParameters.length > 0 ? (
<Grid container alignItems={'center'}>
<Grid item xs={3}>
<Typography variant={'subheading'}>
<Typography variant={'subtitle1'}>
<Tooltip
title={
'Parameters for the Trial Template. Name - parameter that must be replaced in Template, Reference - parameter from Suggestion assignments'
Expand Down
3 changes: 1 addition & 2 deletions pkg/ui/v1beta1/frontend/src/components/Common/Create/TabPanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';

import { withStyles } from '@material-ui/core/styles';
import makeStyles from '@material-ui/styles/makeStyles';
import { withStyles, makeStyles } from '@material-ui/core/styles';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';

Expand Down
10 changes: 5 additions & 5 deletions pkg/ui/v1beta1/frontend/src/components/Common/ExperimentInfoDialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import React from 'react';
import { connect } from 'react-redux';

import { withStyles } from '@material-ui/styles';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';

import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/theme-xcode';
import 'ace-builds/src-noconflict/mode-json';

import { withStyles } from '@material-ui/core/styles';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';

import { closeDialogExperiment } from '../../actions/generalActions';

import { GENERAL_MODULE } from '../../constants/constants';
Expand Down
3 changes: 2 additions & 1 deletion pkg/ui/v1beta1/frontend/src/components/Common/Monitor/DeleteDialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import React from 'react';
import { connect } from 'react-redux';

import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';

import { connect } from 'react-redux';
import { deleteExperiment, closeDeleteExperimentDialog } from '../../../actions/generalActions';

import { GENERAL_MODULE } from '../../../constants/constants';
Expand Down
16 changes: 12 additions & 4 deletions pkg/ui/v1beta1/frontend/src/components/Common/Monitor/FilterPanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { connect } from 'react-redux';
import { withStyles } from '@material-ui/core/styles';

import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
Expand Down Expand Up @@ -31,6 +31,9 @@ const styles = theme => ({
height: 56,
textAlign: 'left',
},
selectLabel: {
marginLeft: '8px',
},
});

class FilterPanel extends React.Component {
Expand Down Expand Up @@ -62,12 +65,13 @@ class FilterPanel extends React.Component {
<div className={classes.filter}>
<FormGroup row>
<FormControl variant="outlined">
<InputLabel>Namespace</InputLabel>
<InputLabel className={classes.selectLabel}>Namespace</InputLabel>
{this.props.globalNamespace === '' ? (
<Select
value={this.props.experimentNamespace}
onChange={this.onNamespaceChange}
className={classes.selectBox}
label="Namespace"
>
{this.props.namespaces.map((namespace, i) => {
return (
Expand All @@ -78,7 +82,12 @@ class FilterPanel extends React.Component {
})}
</Select>
) : (
<Select value={this.props.experimentNamespace} className={classes.selectBox} disabled>
<Select
value={this.props.experimentNamespace}
className={classes.selectBox}
disabled
label="Namespace"
>
<MenuItem value={this.props.experimentNamespace}>
{this.props.experimentNamespace}
</MenuItem>
Expand All @@ -91,7 +100,6 @@ class FilterPanel extends React.Component {
className={classes.textField}
value={this.props.experimentName}
onChange={this.onNameChange}
margin="normal"
variant="outlined"
/>
{Object.keys(this.props.filterStatus).map((filter, i) => {
Expand Down
3 changes: 1 addition & 2 deletions pkg/ui/v1beta1/frontend/src/components/Common/SuggestionInfoDialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import React from 'react';
import { connect } from 'react-redux';

import { withStyles } from '@material-ui/styles';

import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/theme-xcode';
import 'ace-builds/src-noconflict/mode-json';

import { withStyles } from '@material-ui/core/styles';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
Expand Down
4 changes: 2 additions & 2 deletions pkg/ui/v1beta1/frontend/src/components/HP/Create/HPParameters.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { connect } from 'react-redux';

import jsyaml from 'js-yaml';

import withStyles from '@material-ui/styles/withStyles';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
Expand All @@ -14,9 +14,9 @@ import Objective from './Params/Objective';
import TrialTemplate from '../../Common/Create/Params/Trial/TrialTemplate';
import Parameters from './Params/Parameters';
import Algorithm from './Params/Algorithm';
import MetricsCollectorSpec from '../../Common/Create/Params/MetricsCollector';

import { submitHPJob } from '../../../actions/hpCreateActions';
import MetricsCollectorSpec from '../../Common/Create/Params/MetricsCollector';

import { validationError } from '../../../actions/generalActions';
import * as constants from '../../../constants/constants';
Expand Down
9 changes: 4 additions & 5 deletions pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/Algorithm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
import React from 'react';
import makeStyles from '@material-ui/styles/makeStyles';
import { connect } from 'react-redux';

import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import Tooltip from '@material-ui/core/Tooltip';
import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
import Typography from '@material-ui/core/Typography';
import OutlinedInput from '@material-ui/core/OutlinedInput';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import InputLabel from '@material-ui/core/InputLabel';
import TextField from '@material-ui/core/TextField';
import IconButton from '@material-ui/core/IconButton';

import DeleteIcon from '@material-ui/icons/Delete';

import { connect } from 'react-redux';
import {
changeAlgorithmName,
addAlgorithmSetting,
Expand Down Expand Up @@ -98,7 +97,7 @@ const Algorithm = props => {
<Select
value={props.algorithmName}
onChange={onAlgorithmNameChange}
input={<OutlinedInput labelWidth={160} />}
label="Algorithm Name"
className={classes.select}
>
{props.allAlgorithms.map((algorithm, i) => {
Expand Down
Loading