feat: Show experiment status in json

cmd/ui/v1alpha3/main.go

@@ -37,6 +37,7 @@ func main() {
 	//TODO: Add it in Katib client
 	http.HandleFunc("/katib/delete_experiment/", kuh.DeleteExperiment)
 
+	http.HandleFunc("/katib/fetch_hp_job/", kuh.FetchHPJob)
 	http.HandleFunc("/katib/fetch_hp_job_info/", kuh.FetchHPJobInfo)
 	http.HandleFunc("/katib/fetch_hp_job_trial_info/", kuh.FetchHPJobTrialInfo)
 	http.HandleFunc("/katib/fetch_nas_job_info/", kuh.FetchNASJobInfo)

pkg/ui/v1alpha3/frontend/package.json

@@ -54,6 +54,7 @@
     "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",

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

@@ -30,6 +30,16 @@ export const fetchHPJobInfo = (name, namespace) => ({
     namespace,
 })
 
+export const FETCH_HP_JOB_REQUEST = "FETCH_HP_JOB_REQUEST";
+export const FETCH_HP_JOB_SUCCESS = "FETCH_HP_JOB_SUCCESS";
+export const FETCH_HP_JOB_FAILURE = "FETCH_HP_JOB_FAILURE";
+
+export const fetchHPJob = (name, namespace) => ({
+    type: FETCH_HP_JOB_REQUEST,
+    name,
+    namespace,
+})
+
 export const FETCH_HP_JOB_TRIAL_INFO_REQUEST = "FETCH_HP_JOB_TRIAL_INFO_REQUEST";
 export const FETCH_HP_JOB_TRIAL_INFO_SUCCESS = "FETCH_HP_JOB_TRIAL_INFO_SUCCESS";
 export const FETCH_HP_JOB_TRIAL_INFO_FAILURE = "FETCH_HP_JOB_TRIAL_INFO_FAILURE";

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

@@ -6,8 +6,10 @@ 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 } from '../../../actions/hpMonitorActions';
+import { fetchHPJobInfo, fetchHPJob } from '../../../actions/hpMonitorActions';
 
 import HPJobPlot from './HPJobPlot';
 import HPJobTable from './HPJobTable';
@@ -35,6 +37,8 @@ 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)
     }
 
     render () {
@@ -59,6 +63,7 @@ class HPJobInfo extends React.Component {
                     <br />
                     <HPJobPlot name={this.props.match.params.name} />
                     <HPJobTable name={this.props.match.params.name} />
+                    <ReactJson src={this.props.experiment} />
                     <TrialInfoDialog />
                 </div>
                 }
@@ -69,7 +74,8 @@ class HPJobInfo extends React.Component {
 
 const mapStateToProps = (state) => ({
   loading: state[module].loading,
+  experiment: state[module].experiment,
 })
 
 
-export default connect(mapStateToProps, { fetchHPJobInfo })(withStyles(styles)(HPJobInfo));
+export default connect(mapStateToProps, { fetchHPJobInfo, fetchHPJob })(withStyles(styles)(HPJobInfo));

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

@@ -88,6 +88,22 @@ 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,
+            }
+        case actions.FETCH_HP_JOB_FAILURE:
+            return {
+                ...state,
+                loading: false,
+            }
         case actions.FETCH_HP_JOB_TRIAL_INFO_SUCCESS:
             return {
                 ...state,

pkg/ui/v1alpha3/frontend/src/sagas/index.js

@@ -185,6 +185,47 @@ const goFetchHPJobs = function* () {
     }
 }
 
+export const fetchHPJob = function* () {
+    while (true) {
+        const action = yield take(hpMonitorActions.FETCH_HP_JOB_REQUEST);
+        try {
+            const result = yield call(
+                goFetchHPJob,
+                action.name,
+                action.namespace
+            )
+            if (result.status === 200) {
+                yield put({
+                    type: hpMonitorActions.FETCH_HP_JOB_SUCCESS,
+                    experiment: result.data
+                })
+            } else {
+                yield put({
+                    type: hpMonitorActions.FETCH_HP_JOB_FAILURE,
+                })
+            }
+        } catch (err) {
+            yield put({
+                type: hpMonitorActions.FETCH_HP_JOB_FAILURE,
+            })
+        }
+    }
+}
+
+const goFetchHPJob = function* (name, namespace) {
+    try {
+        const result = yield call(
+            axios.get,
+            `/katib/fetch_hp_job/?experimentName=${name}&namespace=${namespace}`,
+        )
+        return result
+    } catch (err) {
+        yield put({
+            type: hpMonitorActions.FETCH_HP_JOB_FAILURE,
+        })
+    }
+}
+
 export const fetchHPJobInfo = function* () {
     while (true) {
         const action = yield take(hpMonitorActions.FETCH_HP_JOB_INFO_REQUEST);
@@ -639,6 +680,7 @@ export default function* rootSaga() {
         fork(submitHPJob),
         fork(submitNASJob),
         fork(fetchHPJobInfo),
+        fork(fetchHPJob),
         fork(fetchHPJobTrialInfo),
         fork(fetchNASJobInfo)
     ]);

pkg/ui/v1alpha3/hp.go

@@ -31,6 +31,25 @@ func (k *KatibUIHandler) FetchAllHPJobs(w http.ResponseWriter, r *http.Request)
 	w.Write(response)
 }
 
+// FetchAllHPJobs gets experiments in all namespaces.
+func (k *KatibUIHandler) FetchHPJob(w http.ResponseWriter, r *http.Request) {
+	experimentName := r.URL.Query()["experimentName"][0]
+	namespace := r.URL.Query()["namespace"][0]
+
+	experiment, err := k.katibClient.GetExperiment(experimentName, namespace)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+	response, err := json.Marshal(experiment)
+	if err != nil {
+		log.Printf("Marshal HP job failed: %v", err)
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+	w.Write(response)
+}
+
 func (k *KatibUIHandler) FetchHPJobInfo(w http.ResponseWriter, r *http.Request) {
 	//enableCors(&w)
 	experimentName := r.URL.Query()["experimentName"][0]