UI: Support namespace selection in experiment monitor

cmd/ui/v1alpha3/main.go

@@ -34,7 +34,6 @@ func main() {
 	http.HandleFunc("/katib/submit_hp_job/", kuh.SubmitParamsJob)
 	http.HandleFunc("/katib/submit_nas_job/", kuh.SubmitParamsJob)
 
-	//TODO: Add it in Katib client
 	http.HandleFunc("/katib/delete_experiment/", kuh.DeleteExperiment)
 
 	http.HandleFunc("/katib/fetch_hp_job/", kuh.FetchHPJob)
@@ -45,6 +44,8 @@ func main() {
 	http.HandleFunc("/katib/fetch_trial_templates/", kuh.FetchTrialTemplates)
 	http.HandleFunc("/katib/update_template/", kuh.AddEditDeleteTemplate)
 
+	http.HandleFunc("/katib/fetch_namespaces", kuh.FetchNamespaces)
+
 	log.Printf("Serving at %s:%s", *host, *port)
 	if err := http.ListenAndServe(fmt.Sprintf("%s:%s", *host, *port), nil); err != nil {
 		panic(err)

manifests/v1alpha3/ui/rbac.yaml

@@ -7,6 +7,7 @@ rules:
   - ""
   resources:
   - configmaps
+  - namespaces
   verbs:
   - "*"
 - apiGroups:

pkg/ui/v1alpha3/backend.go

@@ -169,3 +169,26 @@ func (k *KatibUIHandler) AddEditDeleteTemplate(w http.ResponseWriter, r *http.Re
 	}
 	w.Write(response)
 }
+
+func (k *KatibUIHandler) FetchNamespaces(w http.ResponseWriter, r *http.Request) {
+
+	namespaceList, err := k.katibClient.GetNamespaceList()
+	if err != nil {
+		log.Printf("GetNamespaceList failed: %v", err)
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+	var namespaces []string
+
+	for _, namespace := range namespaceList.Items {
+		namespaces = append(namespaces, namespace.ObjectMeta.Name)
+	}
+
+	response, err := json.Marshal(namespaces)
+	if err != nil {
+		log.Printf("Marshal namespaces failed: %v", err)
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+	w.Write(response)
+}

pkg/ui/v1alpha3/frontend/src/actions/generalActions.js

@@ -47,3 +47,11 @@ export const CLOSE_DELETE_EXPERIMENT_DIALOG = "CLOSE_DELETE_EXPERIMENT_DIALOG";
 export const closeDeleteExperimentDialog = () => ({
     type: CLOSE_DELETE_EXPERIMENT_DIALOG,
 })
+
+export const FETCH_NAMESPACES_REQUEST = "FETCH_NAMESPACES_REQUEST";
+export const FETCH_NAMESPACES_SUCCESS = "FETCH_NAMESPACES_SUCCESS";
+export const FETCH_NAMESPACES_FAILURE = "FETCH_NAMESPACES_FAILURE";
+
+export const fetchNamespaces = () => ({
+    type: FETCH_NAMESPACES_REQUEST
+})

pkg/ui/v1alpha3/frontend/src/actions/hpMonitorActions.js

@@ -1,8 +1,9 @@
 export const FILTER_JOBS = "FILTER_JOBS";
 
-export const filterJobs = (filter) => ({
+export const filterJobs = (experimentName, experimentNamespace) => ({
     type: FILTER_JOBS,
-    filter,
+    experimentName,
+    experimentNamespace
 })
 
 export const CHANGE_TYPE = "CHANGE_TYPE";

pkg/ui/v1alpha3/frontend/src/actions/nasMonitorActions.js

@@ -1,8 +1,9 @@
 export const FILTER_JOBS = "FILTER_JOBS";
 
-export const filterJobs = (filter) => ({
+export const filterJobs = (experimentName, experimentNamespace) => ({
     type: FILTER_JOBS,
-    filter,
+    experimentName,
+    experimentNamespace
 })
 
 export const CHANGE_TYPE = "CHANGE_TYPE";

pkg/ui/v1alpha3/frontend/src/components/HP/Monitor/FilterPanel.jsx

@@ -7,11 +7,17 @@ import FormGroup from '@material-ui/core/FormGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
 import Button from '@material-ui/core/Button';
+import Select from '@material-ui/core/Select';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
 
 import { filterJobs, changeType, fetchHPJobs } from '../../../actions/hpMonitorActions';
+import { fetchNamespaces } from '../../../actions/generalActions'
 
 
 const module = "hpMonitor";
+const generalModule = "general"
 
 
 const styles = theme => ({
@@ -23,59 +29,102 @@ const styles = theme => ({
         margin: '0 auto',
         textAlign: 'center',
     },
+    selectBox: {
+        marginLeft: theme.spacing.unit,
+        marginRight: theme.spacing.unit,
+        width: 200,
+        height: 56,
+        textAlign: "left"
+    }
 });
 
-const FilterPanel = (props) => {
+class FilterPanel extends React.Component {
+
+    componentDidMount() {
+        this.props.fetchNamespaces();
+        this.props.filterJobs(this.props.experimentName, this.props.experimentNamespace)
+    }
+
+    handleType = (name) => (event) => {
+        this.props.changeType(name, event.target.checked);
+    }
+
+    onNameChange = (event) => {
+        this.props.filterJobs(event.target.value, this.props.experimentNamespace)
+    }
+
+    onNamespaceChange = (event) => {
+        this.props.filterJobs(this.props.experimentName, event.target.value)
+    }
+
+    render () {
 
-    const { classes } = props;
+        const { classes } = this.props;
 
-    const handleType = (name) => (event) => {
-        props.changeType(name, event.target.checked);
+        return (
+            <div className={classes.filter}>
+                <FormGroup row>
+                    <FormControl variant="outlined">
+                        <InputLabel>
+                            Namespace
+                        </InputLabel>
+                        <Select
+                            value={this.props.experimentNamespace}
+                            onChange={this.onNamespaceChange}
+                            className={classes.selectBox}
+                        >
+                            {this.props.namespaces.map((namespace, i) => {
+                                return (
+                                    <MenuItem value={namespace} key={i}>
+                                        {namespace}
+                                    </MenuItem>
+                                )
+                            })}
+                        </Select>
+                    </FormControl>
+                    <TextField
+                        id="outlined-name"
+                        label="Name"
+                        className={classes.textField}
+                        value={this.props.experimentName}
+                        onChange={this.onNameChange}
+                        margin="normal"
+                        variant="outlined"
+                    />
+                    {
+                        Object.keys(this.props.filterType).map((filter, i) => {
+                            return(
+                                <FormControlLabel
+                                    key={i}
+                                    control={
+                                        <Switch
+                                            checked={this.props.filterType[filter]}
+                                            onChange={this.handleType(filter)}
+                                            value={filter}
+                                            color={"primary"}
+                                            />
+                                        }
+                                    label={filter}
+                                />
+                            );
+                        })
+                    }
+                </FormGroup>
+                <Button color={"secondary"} variant={"raised"} onClick={this.props.fetchHPJobs}>
+                    Update
+                </Button>
+            </div>
+        )
     }
-
-    return (
-        <div className={classes.filter}>
-            <FormGroup row>
-                <TextField
-                    id="outlined-name"
-                    label="Name"
-                    className={classes.textField}
-                    value={props.filter}
-                    onChange={(event) => props.filterJobs(event.target.value)}
-                    margin="normal"
-                    variant="outlined"
-                />
-                {
-                    Object.keys(props.filterType).map((filter, i) => {
-                        return(
-                            <FormControlLabel
-                                key={i}
-                                control={
-                                    <Switch
-                                        checked={props.filterType[filter]}
-                                        onChange={handleType(filter)}
-                                        value={filter}
-                                        color={"primary"}
-                                        />
-                                    }
-                                label={filter}
-                            />
-                        );
-                    })
-                }
-            </FormGroup>
-            <Button color={"secondary"} variant={"raised"} onClick={props.fetchHPJobs}>
-                Update
-            </Button>
-        </div>   
-    )
 }
 
 const mapStateToProps = state => {
     return {
-        filter: state[module].filter,
+        experimentName: state[module].experimentName,
+        experimentNamespace: state[module].experimentNamespace,
         filterType: state[module].filterType,
+        namespaces: state[generalModule].namespaces
     }
 }
 
-export default connect(mapStateToProps, { filterJobs, changeType, fetchHPJobs })(withStyles(styles)(FilterPanel));
+export default connect(mapStateToProps, { filterJobs, changeType, fetchHPJobs, fetchNamespaces })(withStyles(styles)(FilterPanel));

pkg/ui/v1alpha3/frontend/src/components/HP/Monitor/HPJobMonitor.jsx

@@ -12,6 +12,7 @@ const styles = theme => ({
     root: {
         width: '90%',
         margin: '0 auto',
+        marginTop: 10
     },
 });
 
@@ -26,7 +27,7 @@ class HPJobMonitor extends React.Component {
 
         return (
             <div className={classes.root}>
-                <h1>Monitor</h1>
+                <h1>Experiment Monitor</h1>
                 <FilterPanel />
                 <HPJobList />
             </div>