UI: Experiment view in the Dialog

pkg/ui/v1alpha3/frontend/package.json

@@ -54,7 +54,6 @@
     "react-app-polyfill": "^0.2.2",
     "react-dev-utils": "^8.0.0",
     "react-dom": "^16.8.3",
-    "react-json-view": "^1.19.1",
     "react-html-parser": "^2.0.2",
     "react-plotly.js": "^2.3.0",
     "react-redux": "^6.0.1",
@@ -72,7 +71,9 @@
     "webpack": "4.28.3",
     "webpack-dev-server": "3.1.14",
     "webpack-manifest-plugin": "2.0.4",
-    "workbox-webpack-plugin": "3.6.3"
+    "workbox-webpack-plugin": "3.6.3",
+    "monaco-editor": "^0.17.1",
+    "react-monaco-editor": "^0.28.0"
   },
   "scripts": {
     "start": "node --max-old-space-size=4096 scripts/start.js",

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

@@ -50,8 +50,14 @@ export const fetchHPJobTrialInfo = (trialName) => ({
     trialName
 })
 
-export const CLOSE_DIALOG = "CLOSE_DIALOG";
+export const CLOSE_DIALOG_TRIAL = "CLOSE_DIALOG_TRIAL";
 
-export const closeDialog = () => ({
-    type: CLOSE_DIALOG,
+export const closeDialogTrial = () => ({
+    type: CLOSE_DIALOG_TRIAL,
+})
+
+export const CLOSE_DIALOG_EXPERIMENT = "CLOSE_DIALOG_EXPERIMENT";
+
+export const closeDialogExperiment = () => ({
+    type: CLOSE_DIALOG_EXPERIMENT
 })

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

@@ -0,0 +1,65 @@
+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 MonacoEditor from 'react-monaco-editor';
+
+
+import { closeDialogExperiment } from '../../../actions/hpMonitorActions';
+
+
+const module = "hpMonitor"
+
+const styles = theme => ({
+    header: {
+        textAlign: "center"
+    }
+})
+
+
+const ExperimentInfoDialog = (props) => {
+
+    const { classes } = props;
+
+    return (
+        <Dialog
+            open={props.open}
+            onClose={props.closeDialogExperiment}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+            maxWidth={"xl"}
+        >
+            <DialogTitle id="alert-dialog-title" className={classes.header}>
+                {props.experiment.metadata && props.experiment.metadata.name ?
+                    "Experiment "+JSON.stringify(props.experiment.metadata.name, null, 2)
+                :
+                    ""
+                }
+            </DialogTitle>
+            <DialogContent>
+                <MonacoEditor
+                    value={JSON.stringify(props.experiment, null, 2)}
+                    width="900"
+                    height="650"
+                    language="json"
+                    options={
+                        {
+                            readOnly: true
+                        }
+                    }
+                />
+            </DialogContent>
+        </Dialog>
+    )
+}
+
+const mapStateToProps = state => {
+    return {
+        open: state[module].dialogExperimentOpen,
+        experiment: state[module].experiment,
+    }
+}
+
+export default connect(mapStateToProps, { closeDialogExperiment })(withStyles(styles)(ExperimentInfoDialog));

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

@@ -6,14 +6,12 @@ import Button from '@material-ui/core/Button';
 import { Link } from 'react-router-dom';
 import LinearProgress from '@material-ui/core/LinearProgress';
 
-// import the react-json-view component
-import ReactJson from 'react-json-view'
-
 import { fetchHPJobInfo, fetchHPJob } from '../../../actions/hpMonitorActions';
 
 import HPJobPlot from './HPJobPlot';
 import HPJobTable from './HPJobTable';
 import TrialInfoDialog from './TrialInfoDialog';
+import ExperimentInfoDialog from './ExperimentInfoDialog';
 
 const module = "hpMonitor";
 
@@ -27,8 +25,9 @@ const styles = theme => ({
         marginTop: 30,
     },
     header: {
-        marginTop: 30,
-        textAlign: "center"
+        marginTop: 10,
+        textAlign: "center",
+        marginBottom: 15
     }
 })
 
@@ -37,8 +36,10 @@ class HPJobInfo extends React.Component {
     componentDidMount() {
         this.props.fetchHPJobInfo(
             this.props.match.params.name, this.props.match.params.namespace);
-        this.props.fetchHPJob(
-            this.props.match.params.name, this.props.match.params.namespace)
+    }
+
+    fetchAndOpenDialogExperiment = (experimentName, experimentNamespace) => (event) => {
+      this.props.fetchHPJob(experimentName, experimentNamespace)
     }
 
     render () {
@@ -60,10 +61,20 @@ class HPJobInfo extends React.Component {
                     <Typography  className = {classes.header} variant={"h5"}>
                         Experiment Namespace: {this.props.match.params.namespace}
                     </Typography>
-                    <br />
+                    <div className = {classes.header}>
+                        <Button
+                          variant={"contained"}
+                          color={"primary"}
+                          onClick={this.fetchAndOpenDialogExperiment(
+                            this.props.match.params.name,
+                            this.props.match.params.namespace)}
+                        >
+                                View Experiment
+                        </Button>
+                    </div>
                     <HPJobPlot name={this.props.match.params.name} />
                     <HPJobTable name={this.props.match.params.name} />
-                    <ReactJson src={this.props.experiment} />
+                    <ExperimentInfoDialog/>
                     <TrialInfoDialog />
                 </div>
                 }
@@ -73,8 +84,7 @@ class HPJobInfo extends React.Component {
 }
 
 const mapStateToProps = (state) => ({
-  loading: state[module].loading,
-  experiment: state[module].experiment,
+  loading: state[module].loading
 })
 
 

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

@@ -19,7 +19,7 @@ const styles = theme => ({
     overflowX: 'auto',
   },
   table: {
-    minWidth: 700,
+    minWidth: 700
   },
   hover: {
     '&:hover': {
@@ -30,7 +30,7 @@ const styles = theme => ({
 
 class HPJobTable extends React.Component {
 
-  fetchAndOpenDialog = (trialName) => (event) => {
+  fetchAndOpenDialogTrial = (trialName) => (event) => {
     this.props.fetchHPJobTrialInfo(trialName);
   }
 
@@ -60,13 +60,13 @@ class HPJobTable extends React.Component {
                   {row.map((element, index) => {
                     if (index === 0) {
                       return (
-                        <TableCell className={classes.hover} component="th" scope="row" onClick={this.fetchAndOpenDialog(element)} key={index}>
+                        <TableCell className={classes.hover} component="th" scope="row" onClick={this.fetchAndOpenDialogTrial(element)} key={index}>
                           {element}
                         </TableCell>
                       )
                     } else {
                       return (
-                        <TableCell align="right">{element}</TableCell>
+                        <TableCell>{element}</TableCell>
                       )
                     }
                   })}

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

@@ -5,7 +5,7 @@ import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import { connect } from 'react-redux';
 
-import { closeDialog } from '../../../actions/hpMonitorActions';
+import { closeDialogTrial } from '../../../actions/hpMonitorActions';
 import Plot from 'react-plotly.js';
 
 
@@ -69,7 +69,7 @@ const TrialInfoDialog = (props) => {
     return (
         <Dialog
                 open={props.open}
-                onClose={props.closeDialog}
+                onClose={props.closeDialogTrial}
                 aria-labelledby="alert-dialog-title"
                 aria-describedby="alert-dialog-description"
                 maxWidth={"xl"}
@@ -96,9 +96,9 @@ const TrialInfoDialog = (props) => {
 
 const mapStateToProps = state => {
     return {
-        open: state[module].dialogOpen,
+        open: state[module].dialogTrialOpen,
         trialData: state[module].trialData,
     }
 }
 
-export default connect(mapStateToProps, { closeDialog })(withStyles(styles)(TrialInfoDialog));
+export default connect(mapStateToProps, { closeDialogTrial })(withStyles(styles)(TrialInfoDialog));

pkg/ui/v1alpha3/frontend/src/reducers/hpMonitor.js

@@ -3,6 +3,8 @@ import * as actions from '../actions/hpMonitorActions';
 const initialState = {
     experimentName: '',
     experimentNamespace: '',
+    experiment: {
+    },
     filterType: {
         "Created": true,
         "Running": true,
@@ -18,7 +20,8 @@ const initialState = {
     ],
     trialData: [
     ],
-    dialogOpen: false,
+    dialogTrialOpen: false,
+    dialogExperimentOpen: false,
     loading: false,
 };
 
@@ -106,6 +109,8 @@ const hpMonitorReducer = (state = initialState, action) => {
             return {
                 ...state,
                 loading: true,
+                dialogExperimentOpen: false,
+                dialogTrialOpen: false,
             }
         case actions.FETCH_HP_JOB_INFO_SUCCESS:
             return {
@@ -118,32 +123,27 @@ const hpMonitorReducer = (state = initialState, action) => {
                 ...state,
                 loading: false,
             }
-        case actions.FETCH_HP_JOB_REQUEST:
-            return {
-                ...state,
-                loading: true,
-            }
         case actions.FETCH_HP_JOB_SUCCESS:
             return {
                 ...state,
                 experiment: action.experiment,
-                loading: false,
+                dialogExperimentOpen: true
             }
-        case actions.FETCH_HP_JOB_FAILURE:
+        case actions.FETCH_HP_JOB_TRIAL_INFO_SUCCESS:
             return {
                 ...state,
-                loading: false,
+                trialData: action.trialData,
+                dialogTrialOpen: true,
             }
-        case actions.FETCH_HP_JOB_TRIAL_INFO_SUCCESS:
+        case actions.CLOSE_DIALOG_TRIAL:
             return {
                 ...state,
-                trialData: action.trialData,
-                dialogOpen: true,
+                dialogTrialOpen: false,
             }
-        case actions.CLOSE_DIALOG:
+        case actions.CLOSE_DIALOG_EXPERIMENT:
             return {
                 ...state,
-                dialogOpen: false,
+                dialogExperimentOpen: false,
             }
         default:
             return state;