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

UI: Add new ConfigMap with Trial Templates #1265

Merged
merged 3 commits into from
Jul 15, 2020
Merged

UI: Add new ConfigMap with Trial Templates #1265

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
341f4ec
Add new configMap with Trial Templates
andreyvelich Jul 14, 2020
84d2aa0
Enable to view all namespaces
andreyvelich Jul 14, 2020
a286c28
Fix log
andreyvelich Jul 14, 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
1 change: 0 additions & 1 deletion pkg/ui/v1beta1/backend.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,6 @@ func (k *KatibUIHandler) FetchTrialTemplates(w http.ResponseWriter, r *http.Requ
}

//AddTemplate adds template to ConfigMap
//TODO: Add functionality to create new ConfigMap
func (k *KatibUIHandler) AddTemplate(w http.ResponseWriter, r *http.Request) {
var data map[string]interface{}
json.NewDecoder(r.Body).Decode(&data)
Expand Down
200 changes: 141 additions & 59 deletions pkg/ui/v1beta1/frontend/src/components/Templates/Common/AddDialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,13 @@ import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Grid from '@material-ui/core/Grid';

import { closeDialog, addTemplate, changeTemplate } from '../../../actions/templateActions';

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

const styles = () => ({
header: {
Expand All @@ -39,26 +42,35 @@ const styles = () => ({
selectBox: {
width: 200,
},
textFieldConfigMap: {
marginLeft: 10,
marginRight: 10,
},
selectForm: {
margin: 10,
},
selectDiv: {
textAlign: 'center',
checkBox: {
marginLeft: 'auto',
},
});

//TODO: Add functionality to create new ConfigMap with Trial Template
class AddDialog extends React.Component {
constructor(props) {
super(props);
this.state = { checkedNewName: false };
}

onConfigMapNamespaceChange = event => {
let templateData = this.props.trialTemplatesData;
let newConfigMapNamespace = event.target.value;
let newConfigMapName = this.props.updatedConfigMapName;
let newConfigMapName = '';

if (newConfigMapNamespace !== this.props.updatedConfigMapNamespace) {
let namespaceIndex = templateData.findIndex(function(trialTemplate, i) {
return trialTemplate.ConfigMapNamespace === newConfigMapNamespace;
});
let namespaceIndex = templateData.findIndex(function(trialTemplate, i) {
return trialTemplate.ConfigMapNamespace === newConfigMapNamespace;
});

// Assign new ConfigMap name only if namespace exists in Template data
if (newConfigMapNamespace !== this.props.updatedConfigMapNamespace && namespaceIndex !== -1) {
newConfigMapName = templateData[namespaceIndex].ConfigMaps[0].ConfigMapName;
}

Expand All @@ -68,6 +80,9 @@ class AddDialog extends React.Component {
this.props.updatedConfigMapPath,
this.props.updatedTemplateYaml,
);

// Reset check box when changing namespace
this.setState({ checkedNewName: false });
};

onConfigMapNameChange = event => {
Expand Down Expand Up @@ -104,59 +119,116 @@ class AddDialog extends React.Component {
this.props.updatedConfigMapPath,
this.props.updatedTemplateYaml,
);
this.setState({ checkedNewName: false });
};

onCheckBoxChange = event => {
this.setState({ checkedNewName: event.target.checked });
if (event.target.checked) {
this.props.changeTemplate(
this.props.updatedConfigMapNamespace,
'',
this.props.updatedConfigMapPath,
this.props.updatedTemplateYaml,
);
} else {
this.props.changeTemplate(
this.props.updatedConfigMapNamespace,
this.props.trialTemplatesData[this.props.configMapNamespaceIndex].ConfigMaps[0]
.ConfigMapName,
this.props.updatedConfigMapPath,
this.props.updatedTemplateYaml,
);
}
};

onDialogClose = () => {
this.props.closeDialog();
this.setState({ checkedNewName: false });
};

render() {
const { classes } = this.props;

return this.props.configMapNamespaceIndex !== -1 ? (
return (
<div>
<Dialog open={this.props.addOpen} onClose={this.props.closeDialog}>
<Dialog open={this.props.addOpen} onClose={this.onDialogClose} maxWidth="md">
<DialogTitle id="alert-dialog-title" className={classes.header}>
{'Template Creator'}
<Typography className={classes.headerTypography}>
{'Select ConfigMap Namespace and Name'}
</Typography>
</DialogTitle>
<DialogContent>
<div className={classes.selectDiv}>
<FormControl variant="outlined" className={classes.selectForm}>
<InputLabel>Namespace</InputLabel>
<Select
value={this.props.updatedConfigMapNamespace}
onChange={this.onConfigMapNamespaceChange}
className={classes.selectBox}
label="Namespace"
>
{this.props.trialTemplatesData.map((trialTemplate, i) => {
return (
<MenuItem value={trialTemplate.ConfigMapNamespace} key={i}>
{trialTemplate.ConfigMapNamespace}
</MenuItem>
);
})}
</Select>
</FormControl>
<FormControl variant="outlined" className={classes.selectForm}>
<InputLabel>Name</InputLabel>
<Select
value={this.props.updatedConfigMapName}
onChange={this.onConfigMapNameChange}
className={classes.selectBox}
label="Name"
>
{this.props.trialTemplatesData[this.props.configMapNamespaceIndex].ConfigMaps.map(
(configMap, i) => {
return (
<MenuItem value={configMap.ConfigMapName} key={i}>
{configMap.ConfigMapName}
</MenuItem>
);
},
)}
</Select>
</FormControl>
</div>
<Grid container alignItems="center">
<Grid item>
<FormControl variant="outlined" className={classes.selectForm}>
<InputLabel>Namespace</InputLabel>
<Select
value={this.props.updatedConfigMapNamespace}
onChange={this.onConfigMapNamespaceChange}
className={classes.selectBox}
label="Namespace"
>
{this.props.namespaces
.filter(namespace => namespace !== 'All namespaces')
.map((namespace, i) => {
return (
<MenuItem value={namespace} key={i}>
{namespace}
</MenuItem>
);
})}
</Select>
</FormControl>
</Grid>
<Grid item>
{!this.state.checkedNewName && this.props.configMapNamespaceIndex !== -1 ? (
<FormControl variant="outlined" className={classes.selectForm}>
<InputLabel>Name</InputLabel>
<Select
value={this.props.updatedConfigMapName}
onChange={this.onConfigMapNameChange}
className={classes.selectBox}
label="Name"
>
{this.props.trialTemplatesData[
this.props.configMapNamespaceIndex
].ConfigMaps.map((configMap, i) => {
return (
<MenuItem value={configMap.ConfigMapName} key={i}>
{configMap.ConfigMapName}
</MenuItem>
);
})}
</Select>
</FormControl>
) : (
<TextField
variant="outlined"
label="Name"
className={classes.textFieldConfigMap}
value={this.props.updatedConfigMapName}
onChange={this.onConfigMapNameChange}
/>
)}
</Grid>
{this.props.configMapNamespaceIndex !== -1 && (
<Grid item>
<FormControlLabel
className={classes.checkBox}
control={
<Checkbox
checked={this.state.checkedNewName}
onChange={this.onCheckBoxChange}
color="primary"
/>
}
label="New ConfigMap"
/>
</Grid>
)}
</Grid>
<TextField
className={classes.textField}
value={this.props.updatedConfigMapPath}
Expand All @@ -182,28 +254,37 @@ class AddDialog extends React.Component {
<DialogActions>
<Button
disabled={
// Config Map name can't contain spaces and must exists
!this.props.updatedConfigMapName ||
this.props.updatedConfigMapName.indexOf(' ') !== -1 ||
// ConfigMap name must be unique, when state.checkedNewName = true and configMapNamespaceIndex != -1
(this.state.checkedNewName &&
this.props.configMapNamespaceIndex !== -1 &&
this.props.trialTemplatesData[this.props.configMapNamespaceIndex].ConfigMaps.some(
t => t.ConfigMapName === this.props.updatedConfigMapName,
)) ||
// Path can't contain spaces and must exists
!this.props.updatedConfigMapPath ||
!this.props.updatedTemplateYaml ||
// Path can't contain spaces
this.props.updatedConfigMapPath.indexOf(' ') !== -1 ||
// Path in ConfigMap must be unique
this.props.trialTemplatesData[this.props.configMapNamespaceIndex].ConfigMaps[
this.props.configMapNameIndex
].Templates.some(t => t.Path === this.props.updatedConfigMapPath)
// Path in ConfigMap must be unique, when configMapNameIndex != -1
(this.props.configMapNameIndex !== -1 &&
this.props.trialTemplatesData[this.props.configMapNamespaceIndex].ConfigMaps[
this.props.configMapNameIndex
].Templates.some(t => t.Path === this.props.updatedConfigMapPath)) ||
// Yaml must exists
!this.props.updatedTemplateYaml
}
onClick={this.submitAddTemplate}
color={'primary'}
>
Save
</Button>
<Button onClick={this.props.closeDialog} color={'primary'}>
<Button onClick={this.onDialogClose} color={'primary'}>
Discard
</Button>
</DialogActions>
</Dialog>
</div>
) : (
<div />
);
}
}
Expand All @@ -215,7 +296,7 @@ const mapStateToProps = state => {
return trialTemplate.ConfigMapNamespace === state[TEMPLATE_MODULE].updatedConfigMapNamespace;
});

let cmIndex;
let cmIndex = -1;
if (nsIndex !== -1) {
cmIndex = templatesData[nsIndex].ConfigMaps.findIndex(function(configMap, i) {
return configMap.ConfigMapName === state[TEMPLATE_MODULE].updatedConfigMapName;
Expand All @@ -231,6 +312,7 @@ const mapStateToProps = state => {
updatedConfigMapName: state[TEMPLATE_MODULE].updatedConfigMapName,
updatedConfigMapPath: state[TEMPLATE_MODULE].updatedConfigMapPath,
updatedTemplateYaml: state[TEMPLATE_MODULE].updatedTemplateYaml,
namespaces: state[GENERAL_MODULE].namespaces,
};
};

Expand Down
6 changes: 1 addition & 5 deletions pkg/ui/v1beta1/frontend/src/components/Templates/Common/FilterPanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';

import { fetchNamespaces } from '../../../actions/generalActions';
import { filterTemplates } from '../../../actions/templateActions';

import { GENERAL_MODULE, TEMPLATE_MODULE } from '../../../constants/constants';
Expand All @@ -31,7 +30,6 @@ const styles = theme => ({

class FilterPanel extends React.Component {
componentDidMount() {
this.props.fetchNamespaces();
this.props.filterTemplates(
this.props.filteredConfigMapNamespace,
this.props.filteredConfigMapName,
Expand Down Expand Up @@ -88,6 +86,4 @@ const mapStateToProps = state => {
};
};

export default connect(mapStateToProps, { fetchNamespaces, filterTemplates })(
withStyles(styles)(FilterPanel),
);
export default connect(mapStateToProps, { filterTemplates })(withStyles(styles)(FilterPanel));
Loading