From 77cb29241bb629c7ff065e4d9dbf34e7dafe5952 Mon Sep 17 00:00:00 2001 From: Ce Gao Date: Thu, 3 Oct 2019 22:05:33 +0800 Subject: [PATCH] feat: Show experiment status in json Signed-off-by: Ce Gao --- cmd/ui/v1alpha3/main.go | 1 + pkg/ui/v1alpha3/frontend/package.json | 1 + .../frontend/src/actions/hpMonitorActions.js | 10 +++++ .../src/components/HP/Monitor/HPJobInfo.jsx | 10 ++++- .../frontend/src/reducers/hpMonitor.js | 16 +++++++ pkg/ui/v1alpha3/frontend/src/sagas/index.js | 42 +++++++++++++++++++ pkg/ui/v1alpha3/hp.go | 19 +++++++++ 7 files changed, 97 insertions(+), 2 deletions(-) diff --git a/cmd/ui/v1alpha3/main.go b/cmd/ui/v1alpha3/main.go index 50dcfb6a39a..b3531f6830a 100644 --- a/cmd/ui/v1alpha3/main.go +++ b/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) diff --git a/pkg/ui/v1alpha3/frontend/package.json b/pkg/ui/v1alpha3/frontend/package.json index db1467643af..25b65354692 100644 --- a/pkg/ui/v1alpha3/frontend/package.json +++ b/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", diff --git a/pkg/ui/v1alpha3/frontend/src/actions/hpMonitorActions.js b/pkg/ui/v1alpha3/frontend/src/actions/hpMonitorActions.js index 9a5de47316e..643372d1faa 100644 --- a/pkg/ui/v1alpha3/frontend/src/actions/hpMonitorActions.js +++ b/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"; diff --git a/pkg/ui/v1alpha3/frontend/src/components/HP/Monitor/HPJobInfo.jsx b/pkg/ui/v1alpha3/frontend/src/components/HP/Monitor/HPJobInfo.jsx index 01653e4d251..911c090a4b6 100644 --- a/pkg/ui/v1alpha3/frontend/src/components/HP/Monitor/HPJobInfo.jsx +++ b/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 {
+ } @@ -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)); diff --git a/pkg/ui/v1alpha3/frontend/src/reducers/hpMonitor.js b/pkg/ui/v1alpha3/frontend/src/reducers/hpMonitor.js index 208d34aa17c..ef2f45a8af8 100644 --- a/pkg/ui/v1alpha3/frontend/src/reducers/hpMonitor.js +++ b/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, diff --git a/pkg/ui/v1alpha3/frontend/src/sagas/index.js b/pkg/ui/v1alpha3/frontend/src/sagas/index.js index 599ba138834..fcc9d0adc58 100644 --- a/pkg/ui/v1alpha3/frontend/src/sagas/index.js +++ b/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) ]); diff --git a/pkg/ui/v1alpha3/hp.go b/pkg/ui/v1alpha3/hp.go index a6f6054e2e8..f9f91a10f0b 100644 --- a/pkg/ui/v1alpha3/hp.go +++ b/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]