From 7e48498bfc3ee2318911e1217fc73cc3462f194f Mon Sep 17 00:00:00 2001
From: Andrey Velichkevich <andrey.velichkevich@gmail.com>
Date: Tue, 27 Oct 2020 11:29:59 +0000
Subject: [PATCH] UI: Add resume policy to submit Experiment by parameters
 (#1362)

---
 .../HP/Create/Params/CommonSpec.jsx           | 42 ++++++++++++++++++-
 .../NAS/Create/Params/CommonSpec.jsx          | 42 ++++++++++++++++++-
 .../v1beta1/frontend/src/reducers/hpCreate.js | 18 +++++---
 .../frontend/src/reducers/nasCreate.js        | 18 +++++---
 4 files changed, 106 insertions(+), 14 deletions(-)

diff --git a/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/CommonSpec.jsx b/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/CommonSpec.jsx
index a88882edf19..657e589e920 100644
--- a/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/CommonSpec.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/CommonSpec.jsx
@@ -7,6 +7,10 @@ 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 FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
 
 import { changeSpec } from '../../../../actions/hpCreateActions';
 
@@ -25,6 +29,9 @@ const useStyles = makeStyles({
     padding: 2,
     marginBottom: 10,
   },
+  selectBox: {
+    width: 150,
+  },
 });
 
 const CommonParametersSpec = props => {
@@ -37,7 +44,39 @@ const CommonParametersSpec = props => {
   return (
     <div>
       {props.commonParametersSpec.map((param, i) => {
-        return (
+        return param.name === 'ResumePolicy' ? (
+          <div key={i} className={classes.parameter}>
+            <Grid container alignItems={'center'}>
+              <Grid item xs={12} sm={3}>
+                <Typography>
+                  <Tooltip title={param.description}>
+                    <HelpOutlineIcon className={classes.help} color={'primary'} />
+                  </Tooltip>
+                  {param.name}
+                </Typography>
+              </Grid>
+              <Grid item xs={12} sm={8}>
+                <FormControl variant="outlined" className={classes.formControl}>
+                  <InputLabel>Resume Policy</InputLabel>
+                  <Select
+                    value={param.value}
+                    onChange={onSpecChange(param.name)}
+                    className={classes.selectBox}
+                    label="Resume Policy"
+                  >
+                    {props.allResumePolicyTypes.map((type, i) => {
+                      return (
+                        <MenuItem value={type} key={i}>
+                          {type}
+                        </MenuItem>
+                      );
+                    })}
+                  </Select>
+                </FormControl>
+              </Grid>
+            </Grid>
+          </div>
+        ) : (
           <div key={i} className={classes.parameter}>
             <Grid container alignItems={'center'}>
               <Grid item xs={12} sm={3}>
@@ -66,6 +105,7 @@ const CommonParametersSpec = props => {
 const mapStateToProps = state => {
   return {
     commonParametersSpec: state[HP_CREATE_MODULE].commonParametersSpec,
+    allResumePolicyTypes: state[HP_CREATE_MODULE].allResumePolicyTypes,
   };
 };
 
diff --git a/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/CommonSpec.jsx b/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/CommonSpec.jsx
index bb47ddec411..67b92977977 100644
--- a/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/CommonSpec.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/CommonSpec.jsx
@@ -7,6 +7,10 @@ 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 FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
 
 import { changeSpec } from '../../../../actions/nasCreateActions';
 
@@ -25,6 +29,9 @@ const useStyles = makeStyles({
     padding: 2,
     marginBottom: 10,
   },
+  selectBox: {
+    width: 150,
+  },
 });
 
 const CommonParametersSpec = props => {
@@ -37,7 +44,39 @@ const CommonParametersSpec = props => {
   return (
     <div>
       {props.commonParametersSpec.map((param, i) => {
-        return (
+        return param.name === 'ResumePolicy' ? (
+          <div key={i} className={classes.parameter}>
+            <Grid container alignItems={'center'}>
+              <Grid item xs={12} sm={3}>
+                <Typography>
+                  <Tooltip title={param.description}>
+                    <HelpOutlineIcon className={classes.help} color={'primary'} />
+                  </Tooltip>
+                  {param.name}
+                </Typography>
+              </Grid>
+              <Grid item xs={12} sm={8}>
+                <FormControl variant="outlined" className={classes.formControl}>
+                  <InputLabel>Resume Policy</InputLabel>
+                  <Select
+                    value={param.value}
+                    onChange={onSpecChange(param.name)}
+                    className={classes.selectBox}
+                    label="Resume Policy"
+                  >
+                    {props.allResumePolicyTypes.map((type, i) => {
+                      return (
+                        <MenuItem value={type} key={i}>
+                          {type}
+                        </MenuItem>
+                      );
+                    })}
+                  </Select>
+                </FormControl>
+              </Grid>
+            </Grid>
+          </div>
+        ) : (
           <div key={i} className={classes.parameter}>
             <Grid container alignItems={'center'}>
               <Grid item xs={12} sm={3}>
@@ -66,6 +105,7 @@ const CommonParametersSpec = props => {
 const mapStateToProps = state => {
   return {
     commonParametersSpec: state[NAS_CREATE_MODULE].commonParametersSpec,
+    allResumePolicyTypes: state[NAS_CREATE_MODULE].allResumePolicyTypes,
   };
 };
 
diff --git a/pkg/ui/v1beta1/frontend/src/reducers/hpCreate.js b/pkg/ui/v1beta1/frontend/src/reducers/hpCreate.js
index 8334568c89d..2ab0832d354 100644
--- a/pkg/ui/v1beta1/frontend/src/reducers/hpCreate.js
+++ b/pkg/ui/v1beta1/frontend/src/reducers/hpCreate.js
@@ -7,31 +7,37 @@ const initialState = {
     {
       name: 'Name',
       value: 'random-experiment',
-      description: 'A name of an experiment',
+      description: 'A name of an Experiment',
     },
     {
       name: 'Namespace',
       value: 'kubeflow',
-      description: 'Namespace to deploy an experiment',
+      description: 'Namespace to deploy an Experiment',
     },
   ],
   commonParametersSpec: [
     {
       name: 'ParallelTrialCount',
       value: '3',
-      description: 'How many trials can be processed in parallel',
+      description: 'How many Trials can be processed in parallel',
     },
     {
       name: 'MaxTrialCount',
       value: '12',
-      description: 'Max completed trials to mark experiment as succeeded',
+      description: 'Max completed Trials to mark Experiment as succeeded',
     },
     {
       name: 'MaxFailedTrialCount',
       value: '3',
-      description: 'Max failed trials to mark experiment as failed',
+      description: 'Max failed trials to mark Experiment as failed',
+    },
+    {
+      name: 'ResumePolicy',
+      value: 'LongRunning',
+      description: 'Resume policy describes how the Experiment should be restarted',
     },
   ],
+  allResumePolicyTypes: ['Never', 'LongRunning', 'FromVolume'],
   allObjectiveTypes: ['minimize', 'maximize'],
   objective: [
     {
@@ -63,7 +69,7 @@ const initialState = {
     },
   ],
   algorithmName: 'random',
-  allAlgorithms: ['grid', 'random', 'hyperband', 'bayesianoptimization', 'tpe'],
+  allAlgorithms: ['grid', 'random', 'hyperband', 'bayesianoptimization', 'tpe', 'cmaes'],
   algorithmSettings: [],
   parameters: [
     {
diff --git a/pkg/ui/v1beta1/frontend/src/reducers/nasCreate.js b/pkg/ui/v1beta1/frontend/src/reducers/nasCreate.js
index d0322ceeaa6..860bbac67af 100644
--- a/pkg/ui/v1beta1/frontend/src/reducers/nasCreate.js
+++ b/pkg/ui/v1beta1/frontend/src/reducers/nasCreate.js
@@ -6,31 +6,37 @@ const initialState = {
     {
       name: 'Name',
       value: 'enas-example',
-      description: 'A name of an experiment',
+      description: 'A name of an Experiment',
     },
     {
       name: 'Namespace',
       value: 'kubeflow',
-      description: 'Namespace to deploy an experiment',
+      description: 'Namespace to deploy an Experiment',
     },
   ],
   commonParametersSpec: [
     {
       name: 'ParallelTrialCount',
       value: '3',
-      description: 'How many trials can be processed in parallel',
+      description: 'How many Trials can be processed in parallel',
     },
     {
       name: 'MaxTrialCount',
       value: '12',
-      description: 'Max completed trials to mark experiment as succeeded',
+      description: 'Max completed Trials to mark Experiment as succeeded',
     },
     {
       name: 'MaxFailedTrialCount',
       value: '3',
-      description: 'Max failed trials to mark experiment as failed',
+      description: 'Max failed Trials to mark Experiment as failed',
+    },
+    {
+      name: 'ResumePolicy',
+      value: 'LongRunning',
+      description: 'Resume policy describes how the Experiment should be restarted',
     },
   ],
+  allResumePolicyTypes: ['Never', 'LongRunning', 'FromVolume'],
   allObjectiveTypes: ['minimize', 'maximize'],
   objective: [
     {
@@ -58,7 +64,7 @@ const initialState = {
     },
   ],
   algorithmName: 'enas',
-  allAlgorithms: ['enas'],
+  allAlgorithms: ['enas', 'darts'],
   algorithmSettings: [
     {
       name: 'controller_hidden_size',