UI: Select namespace from Kubeflow dashboard (#982)

* Init commit

* Add namespace check in
Experiments monitor
Submit yaml
Submit experiment by parameters

* Add redirect to home page when changing namespace

* Remove redirect

* Fix namespace filter

* Change key to index and let to const

pkg/ui/v1alpha3/frontend/public/index.html

@@ -9,6 +9,7 @@
     <script src="%PUBLIC_URL%/scripts/ace.js" type="text/javascript" charset="utf-8"></script>
     <script src="%PUBLIC_URL%/scripts/mode-xml.js"></script>
     <script src="%PUBLIC_URL%/scripts/viz.js" type="javascript/worker"></script>
+    <script defer src="/dashboard_lib.bundle.js"></script>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/logo.png" />
     <meta http-equiv="Access-Control-Allow-Origin" content="*">

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

@@ -19,9 +19,10 @@ export const SUBMIT_YAML_REQUEST = "SUBMIT_YAML_REQUEST";
 export const SUBMIT_YAML_FAILURE = "SUBMIT_YAML_FAILURE";
 export const SUBMIT_YAML_SUCCESS = "SUBMIT_YAML_SUCCESS";
 
-export const submitYaml = (yaml) => ({
+export const submitYaml = (yaml, globalNamespace) => ({
     type: SUBMIT_YAML_REQUEST,
     yaml,
+    globalNamespace
 })
 
 export const DELETE_EXPERIMENT_REQUEST = "DELETE_EXPERIMENT_REQUEST";
@@ -55,3 +56,5 @@ export const FETCH_NAMESPACES_FAILURE = "FETCH_NAMESPACES_FAILURE";
 export const fetchNamespaces = () => ({
     type: FETCH_NAMESPACES_REQUEST
 })
+
+export const CHANGE_GLOBAL_NAMESPACE = "CHANGE_GLOBAL_NAMESPACE";

pkg/ui/v1alpha3/frontend/src/components/HP/Create/Params/CommonMeta.jsx

@@ -1,18 +1,19 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import makeStyles from '@material-ui/styles/makeStyles';
 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 TextField from '@material-ui/core/TextField';
 
 import { changeMeta } from '../../../../actions/hpCreateActions';
+import { withStyles } from '@material-ui/core';
 
 
 const module = "hpCreate";
+const generalModule = "general";
 
-const useStyles = makeStyles({
+const styles = () => ({
     textField: {
         marginLeft: 4,
         marginRight: 4,
@@ -29,47 +30,75 @@ const useStyles = makeStyles({
     },
 })
 
-const CommonParametersMeta = (props) => {
-    const classes = useStyles();
+class CommonParametersMeta extends React.Component {
 
-    const onMetaChange = (param) => (event) => {
-        props.changeMeta(param, event.target.value);
+    componentDidMount() {
+        if (this.props.globalNamespace != "") {
+            this.props.changeMeta("Namespace", this.props.globalNamespace)
+        }
     }
 
-    return (
-        <div>
-            {props.commonParametersMetadata.map((param, i) => {
-                return (
-                    <div key={i} className={classes.parameter}>
-                        <Grid container alignItems={"center"}>
-                            <Grid item xs={12} sm={3}>
-                                <Typography variant={"subheading"}>
-                                    <Tooltip title={param.description}>
-                                        <HelpOutlineIcon className={classes.help} color={"primary"}/>
-                                    </Tooltip>
-                                    {param.name}
-                                </Typography>
-                            </Grid>
-                            <Grid item xs={12} sm={8}>
-                                <TextField
-                                    className={classes.textField}
-                                    value={param.value}
-                                    onChange={onMetaChange(param.name)}
+    onMetaChange = (param) => (event) => {
+        this.props.changeMeta(param, event.target.value);
+    }
+
+    render () {
+
+        const { classes } = this.props;
+
+        return (
+            <div>
+                {this.props.commonParametersMetadata.map((param, i) => {
+                    return (
+                        <div key={i} className={classes.parameter}>
+                            <Grid container alignItems={"center"}>
+                                <Grid item xs={12} sm={3}>
+                                    <Typography variant={"subheading"}>
+                                        <Tooltip title={param.description}>
+                                            <HelpOutlineIcon className={classes.help} color={"primary"}/>
+                                        </Tooltip>
+                                        {param.name}
+                                    </Typography>
+                                </Grid>
+                                <Grid item xs={12} sm={8}>
+                                    {param.name == "Namespace" && this.props.globalNamespace == "" &&
+                                        <TextField
+                                            className={classes.textField}
+                                            value={param.value}
+                                            onChange={this.onMetaChange(param.name)}
+                                        />
+                                    }
+                                    {param.name == "Namespace" && this.props.globalNamespace != "" &&
+                                        <TextField
+                                            className={classes.textField}
+                                            value = {param.value}
+                                            disabled
+                                        />
+                                    }
+                                    {param.name != "Namespace" &&
+                                        <TextField
+                                            className={classes.textField}
+                                            value={param.value}
+                                            onChange={this.onMetaChange(param.name)}
                                     />
+                                    }
+                                </Grid>
                             </Grid>
-                        </Grid>
-                    </div>
-                )
-            })}
-        </div>
-    )
-}
+                        </div>
+                    )
+                })}
+            </div>
+        )
+    }
 
+}
 
 const mapStateToProps = state => {
     return {
         commonParametersMetadata: state[module].commonParametersMetadata,
+        globalNamespace: state[generalModule].globalNamespace
     }
 }
 
-export default connect(mapStateToProps, { changeMeta })(CommonParametersMeta);
+
+export default connect(mapStateToProps, { changeMeta })(withStyles(styles)(CommonParametersMeta));

pkg/ui/v1alpha3/frontend/src/components/HP/Create/YAML.jsx

@@ -10,6 +10,7 @@ import { changeYaml } from '../../../actions/hpCreateActions';
 import { submitYaml } from '../../../actions/generalActions';
 
 const module = "hpCreate";
+const generalModule = "general";
 
 const useStyles = makeStyles ({
     root: {
@@ -39,7 +40,7 @@ const YAML = (props) => {
     };
 
     const submitWholeYaml = () => {
-        props.submitYaml(props.yaml);
+        props.submitYaml(props.yaml, props.globalNamespace);
     };
 
     const classes = useStyles();
@@ -75,6 +76,7 @@ const YAML = (props) => {
 const mapStateToProps = (state) => {
     return {
         yaml: state[module].currentYaml,
+        globalNamespace: state[generalModule].globalNamespace
     };
 };
 

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

@@ -41,8 +41,12 @@ const styles = theme => ({
 class FilterPanel extends React.Component {
 
     componentDidMount() {
-        this.props.fetchNamespaces();
-        this.props.filterJobs(this.props.experimentName, this.props.experimentNamespace)
+        if (this.props.globalNamespace != "") {
+            this.props.filterJobs(this.props.experimentName, this.props.globalNamespace)
+        } else {
+            this.props.fetchNamespaces();
+            this.props.filterJobs(this.props.experimentName, this.props.experimentNamespace)
+        }
     }
 
     handleType = (name) => (event) => {
@@ -68,19 +72,31 @@ class FilterPanel extends React.Component {
                         <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>
+                        {this.props.globalNamespace === "" ?
+                            <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>
+                        :
+                            <Select
+                                value={this.props.experimentNamespace}
+                                className={classes.selectBox}
+                                disabled
+                            >
+                                <MenuItem value={this.props.experimentNamespace}>
+                                    {this.props.experimentNamespace}
+                                </MenuItem>
+                            </Select>
+                        }
                     </FormControl>
                     <TextField
                         id="outlined-name"
@@ -123,7 +139,8 @@ const mapStateToProps = state => {
         experimentName: state[module].experimentName,
         experimentNamespace: state[module].experimentNamespace,
         filterType: state[module].filterType,
-        namespaces: state[generalModule].namespaces
+        namespaces: state[generalModule].namespaces,
+        globalNamespace: state[generalModule].globalNamespace
     }
 }
 

pkg/ui/v1alpha3/frontend/src/components/KubeflowDashboard.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {CHANGE_GLOBAL_NAMESPACE} from '../actions/generalActions';
+import generalReducer from '../reducers/general';
+
+// TODO: Think about better way of update namespace
+// Right now, after updating namespace in select list
+// user must go to Kubeflow dashboard home page to update Global Namespace in Katib UI
+function onGlobalNamespaceChange(namespace) {
+    generalReducer(undefined, {type: CHANGE_GLOBAL_NAMESPACE, globalNamespace: namespace})
+}
+
+class KubeflowDashboard extends React.Component {
+
+    componentDidMount() {
+        window.addEventListener('DOMContentLoaded', function (event) {
+            if (window.centraldashboard && window.centraldashboard.CentralDashboardEventHandler) {
+                // Init method will invoke the callback with the event handler instance
+                // and a boolean indicating whether the page is iframed or not
+                window.centraldashboard.CentralDashboardEventHandler.init(function (cdeh) {
+                        // Binds a callback that gets invoked anytime the Dashboard's
+                        // namespace is changed
+                        cdeh.onNamespaceSelected = (namespace) => {
+                            onGlobalNamespaceChange(namespace)
+                        }
+                    });
+            }
+        });
+    }
+
+    render () {
+        return (
+            <div/>
+        )
+    }
+}
+
+
+export default KubeflowDashboard;