Add metric strategies to submit by params Experiment page

kubeflow · Oct 26, 2020 · 3c615e3 · 3c615e3
1 parent 4450611
commit 3c615e3
Show file tree

Hide file tree

Showing 16 changed files with 501 additions and 301 deletions.
diff --git a/pkg/ui/v1beta1/frontend/src/actions/hpCreateActions.js b/pkg/ui/v1beta1/frontend/src/actions/hpCreateActions.js
@@ -49,6 +49,14 @@ export const editMetrics = (index, value) => ({
   value,
 });
 
+export const CHANGE_METRIC_STRATEGY_HP = 'CHANGE_METRIC_STRATEGY_HP';
+
+export const metricStrategyChange = (index, strategy) => ({
+  type: CHANGE_METRIC_STRATEGY_HP,
+  index,
+  strategy,
+});
+
 export const CHANGE_ALGORITHM_NAME_HP = 'CHANGE_ALGORITHM_NAME_HP';
 
 export const changeAlgorithmName = algorithmName => ({

diff --git a/pkg/ui/v1beta1/frontend/src/actions/nasCreateActions.js b/pkg/ui/v1beta1/frontend/src/actions/nasCreateActions.js
@@ -50,6 +50,14 @@ export const editMetrics = (index, value) => ({
   value,
 });
 
+export const CHANGE_METRIC_STRATEGY_NAS = 'CHANGE_METRIC_STRATEGY_NAS';
+
+export const metricStrategyChange = (index, strategy) => ({
+  type: CHANGE_METRIC_STRATEGY_NAS,
+  index,
+  strategy,
+});
+
 export const CHANGE_ALGORITHM_NAME_NAS = 'CHANGE_ALGORITHM_NAME_NAS';
 
 export const changeAlgorithmName = algorithmName => ({

diff --git a/pkg/ui/v1beta1/frontend/src/components/HP/Create/HPParameters.jsx b/pkg/ui/v1beta1/frontend/src/components/HP/Create/HPParameters.jsx
@@ -28,38 +28,13 @@ const styles = theme => ({
   },
   submit: {
     textAlign: 'center',
-    marginTop: 10,
-  },
-  textField: {
-    marginLeft: 4,
-    marginRight: 4,
-    width: '100%',
-  },
-  help: {
-    padding: 4 / 2,
-    verticalAlign: 'middle',
-  },
-  section: {
-    padding: 4,
-  },
-  parameter: {
-    padding: 2,
-  },
-  formControl: {
-    margin: 4,
-    width: '100%',
-  },
-  selectEmpty: {
-    marginTop: 10,
-  },
-  button: {
-    margin: 10,
+    margin: 20,
   },
 });
 
-const SectionInTypography = (name, classes) => {
+const SectionInTypography = name => {
   return (
-    <div className={classes.section}>
+    <div>
       <Grid container>
         <Grid item xs={12} sm={12}>
           <Typography variant="h6">{name}</Typography>
@@ -107,16 +82,31 @@ const addParameter = (source, destination) => {
 const HPParameters = props => {
   const submitJob = () => {
     let data = {};
+
+    // Add metadata.
     data.metadata = {};
     deCapitalizeFirstLetterAndAppend(props.commonParametersMetadata, data.metadata);
+
+    // Add common parameters.
     data.spec = {};
     deCapitalizeFirstLetterAndAppend(props.commonParametersSpec, data.spec);
+
+    // Add objective.
     data.spec.objective = {};
     deCapitalizeFirstLetterAndAppend(props.objective, data.spec.objective);
+
+    // Add additional metrics.
     data.spec.objective.additionalMetricNames = props.additionalMetricNames.map(
       (metrics, i) => metrics.value,
     );
 
+    // Add metric strategies.
+    data.spec.objective.metricStrategies = props.metricStrategies.map(metric => ({
+      name: metric.name,
+      value: metric.strategy,
+    }));
+
+    // Add algorithm.
     data.spec.algorithm = {};
     data.spec.algorithm.algorithmName = props.algorithmName;
     data.spec.algorithm.algorithmSettings = [];
@@ -209,30 +199,25 @@ const HPParameters = props => {
   return (
     <div className={classes.root}>
       {/* Common Metadata */}
-      {SectionInTypography('Metadata', classes)}
+      {SectionInTypography('Metadata')}
       <br />
       <CommonParametersMeta />
-      {SectionInTypography('Common Parameters', classes)}
+      {SectionInTypography('Common Parameters')}
       <CommonParametersSpec />
-      {SectionInTypography('Objective', classes)}
+      {SectionInTypography('Objective')}
       <Objective />
-      {SectionInTypography('Algorithm', classes)}
+      {SectionInTypography('Algorithm')}
       <Algorithm />
 
-      {SectionInTypography('Parameters', classes)}
+      {SectionInTypography('Parameters')}
       <Parameters />
-      {SectionInTypography('Metrics Collector Spec', classes)}
+      {SectionInTypography('Metrics Collector Spec')}
       <MetricsCollectorSpec jobType={constants.EXPERIMENT_TYPE_HP} />
-      {SectionInTypography('Trial Template Spec', classes)}
+      {SectionInTypography('Trial Template Spec')}
       <TrialTemplate />
 
       <div className={classes.submit}>
-        <Button
-          variant="contained"
-          color={'primary'}
-          className={classes.button}
-          onClick={submitJob}
-        >
+        <Button variant="contained" color={'primary'} onClick={submitJob}>
           Deploy
         </Button>
       </div>
@@ -261,6 +246,7 @@ const mapStateToProps = state => {
     commonParametersSpec: state[constants.HP_CREATE_MODULE].commonParametersSpec,
     objective: state[constants.HP_CREATE_MODULE].objective,
     additionalMetricNames: state[constants.HP_CREATE_MODULE].additionalMetricNames,
+    metricStrategies: state[constants.HP_CREATE_MODULE].metricStrategies,
     algorithmName: state[constants.HP_CREATE_MODULE].algorithmName,
     algorithmSettings: state[constants.HP_CREATE_MODULE].algorithmSettings,
     parameters: state[constants.HP_CREATE_MODULE].parameters,

diff --git a/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/Algorithm.jsx b/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/Algorithm.jsx
@@ -26,8 +26,6 @@ import { HP_CREATE_MODULE } from '../../../../constants/constants';
 
 const useStyles = makeStyles({
   textField: {
-    marginLeft: 4,
-    marginRight: 4,
     width: '80%',
   },
   help: {
@@ -45,7 +43,6 @@ const useStyles = makeStyles({
     verticalAlign: 'middle !important',
   },
   formControl: {
-    margin: 4,
     width: '100%',
   },
   addButton: {
@@ -98,7 +95,6 @@ const Algorithm = props => {
                 value={props.algorithmName}
                 onChange={onAlgorithmNameChange}
                 label="Algorithm Name"
-                className={classes.select}
               >
                 {props.allAlgorithms.map((algorithm, i) => {
                   return (

diff --git a/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/CommonMeta.jsx b/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/CommonMeta.jsx
@@ -14,8 +14,6 @@ import { GENERAL_MODULE, HP_CREATE_MODULE } from '../../../../constants/constant
 
 const styles = () => ({
   textField: {
-    marginLeft: 4,
-    marginRight: 4,
     width: '100%',
   },
   help: {

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
@@ -14,8 +14,6 @@ import { HP_CREATE_MODULE } from '../../../../constants/constants';
 
 const useStyles = makeStyles({
   textField: {
-    marginLeft: 4,
-    marginRight: 4,
     width: '100%',
   },
   help: {