UI: Add Metrics Collector Spec to Submit Experiment

pkg/ui/v1alpha3/frontend/package.json

@@ -9,6 +9,7 @@
     "@material-ui/icons": "^3.0.2",
     "@material-ui/styles": "^3.0.0-alpha.10",
     "@svgr/webpack": "4.1.0",
+    "ace-builds": "^1.4.8",
     "antd": "^3.13.6",
     "axios": "^0.18.0",
     "babel-core": "7.0.0-bridge.0",
@@ -41,7 +42,9 @@
     "jest-pnp-resolver": "1.0.2",
     "jest-resolve": "23.6.0",
     "jest-watch-typeahead": "^0.2.1",
+    "js-yaml": "^3.13.1",
     "mini-css-extract-plugin": "0.5.0",
+    "monaco-editor": "^0.17.1",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "plotly.js": "^1.45.0",
     "pnp-webpack-plugin": "1.2.1",
@@ -50,11 +53,12 @@
     "postcss-preset-env": "6.5.0",
     "postcss-safe-parser": "4.0.1",
     "react": "^16.8.3",
-    "react-ace": "^6.4.0",
+    "react-ace": "^8.0.0",
     "react-app-polyfill": "^0.2.2",
     "react-dev-utils": "^8.0.0",
     "react-dom": "^16.8.3",
     "react-html-parser": "^2.0.2",
+    "react-monaco-editor": "^0.28.0",
     "react-plotly.js": "^2.3.0",
     "react-redux": "^6.0.1",
     "react-router": "^4.3.1",
@@ -71,9 +75,7 @@
     "webpack": "4.28.3",
     "webpack-dev-server": "3.1.14",
     "webpack-manifest-plugin": "2.0.4",
-    "workbox-webpack-plugin": "3.6.3",
-    "monaco-editor": "^0.17.1",
-    "react-monaco-editor": "^0.28.0"
+    "workbox-webpack-plugin": "3.6.3"
   },
   "scripts": {
     "start": "node --max-old-space-size=4096 scripts/start.js",

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

@@ -74,3 +74,10 @@ export const CLOSE_DIALOG_EXPERIMENT = 'CLOSE_DIALOG_EXPERIMENT';
 export const closeDialogExperiment = () => ({
   type: CLOSE_DIALOG_EXPERIMENT,
 });
+
+export const VALIDATION_ERROR = 'VALIDATION_ERROR';
+
+export const validationError = message => ({
+  type: VALIDATION_ERROR,
+  message,
+});

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

@@ -146,3 +146,78 @@ export const submitHPJob = data => ({
   type: SUBMIT_HP_JOB_REQUEST,
   data,
 });
+
+export const CHANGE_MC_KIND_HP = 'CHANGE_MC_KIND_HP';
+
+export const changeMCKindHP = kind => ({
+  type: CHANGE_MC_KIND_HP,
+  kind,
+});
+
+export const CHANGE_MC_FILE_SYSTEM_HP = 'CHANGE_MC_FILE_SYSTEM_HP';
+
+export const changeMCFileSystemHP = (kind, path) => ({
+  type: CHANGE_MC_FILE_SYSTEM_HP,
+  kind,
+  path,
+});
+
+export const CHANGE_MC_HTTP_GET_HP = 'CHANGE_MC_HTTP_GET_HP';
+
+export const changeMCHttpGetHP = (port, path, scheme, host) => ({
+  type: CHANGE_MC_HTTP_GET_HP,
+  port,
+  path,
+  scheme,
+  host,
+});
+
+export const ADD_MC_HTTP_GET_HEADER_HP = 'ADD_MC_HTTP_GET_HEADER_HP';
+
+export const addMCHttpGetHeaderHP = () => ({
+  type: ADD_MC_HTTP_GET_HEADER_HP,
+});
+
+export const CHANGE_MC_HTTP_GET_HEADER_HP = 'CHANGE_MC_HTTP_GET_HEADER_HP';
+
+export const changeMCHttpGetHeaderHP = (fieldName, value, index) => ({
+  type: CHANGE_MC_HTTP_GET_HEADER_HP,
+  fieldName,
+  value,
+  index,
+});
+
+export const DELETE_MC_HTTP_GET_HEADER_HP = 'DELETE_MC_HTTP_GET_HEADER_HP';
+
+export const deleteMCHttpGetHeaderHP = index => ({
+  type: DELETE_MC_HTTP_GET_HEADER_HP,
+  index,
+});
+
+export const ADD_MC_METRICS_FORMAT_HP = 'ADD_MC_METRICS_FORMAT_HP';
+
+export const addMCMetricsFormatHP = () => ({
+  type: ADD_MC_METRICS_FORMAT_HP,
+});
+
+export const CHANGE_MC_METRIC_FORMAT_HP = 'CHANGE_MC_METRIC_FORMAT_HP';
+
+export const changeMCMetricsFormatHP = (format, index) => ({
+  type: CHANGE_MC_METRIC_FORMAT_HP,
+  format,
+  index,
+});
+
+export const DELETE_MC_METRIC_FORMAT_HP = 'DELETE_MC_METRIC_FORMAT_HP';
+
+export const deleteMCMetricsFormatHP = index => ({
+  type: DELETE_MC_METRIC_FORMAT_HP,
+  index,
+});
+
+export const CHANGE_MC_CUSTOM_CONTAINER_HP = 'CHANGE_MC_CUSTOM_CONTAINER_HP';
+
+export const changeMCCustomContainerHP = yamlContainer => ({
+  type: CHANGE_MC_CUSTOM_CONTAINER_HP,
+  yamlContainer,
+});

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

@@ -190,7 +190,7 @@ export const changeTrial = trial => ({
   trial,
 });
 
-export const CHANGE_TRIAL_NAMESPACE_NAS = 'CHANGE_TRIAL_NAMESPACE_HP';
+export const CHANGE_TRIAL_NAMESPACE_NAS = 'CHANGE_TRIAL_NAMESPACE_NAS';
 
 export const changeTrialNamespace = namespace => ({
   type: CHANGE_TRIAL_NAMESPACE_NAS,
@@ -211,3 +211,78 @@ export const CLOSE_SNACKBAR = 'CLOSE_SNACKBAR';
 export const closeSnackbar = () => ({
   type: CLOSE_SNACKBAR,
 });
+
+export const CHANGE_MC_KIND_NAS = 'CHANGE_MC_KIND_NAS';
+
+export const changeMCKindNAS = kind => ({
+  type: CHANGE_MC_KIND_NAS,
+  kind,
+});
+
+export const CHANGE_MC_FILE_SYSTEM_NAS = 'CHANGE_MC_FILE_SYSTEM_NAS';
+
+export const changeMCFileSystemNAS = (kind, path) => ({
+  type: CHANGE_MC_FILE_SYSTEM_NAS,
+  kind,
+  path,
+});
+
+export const CHANGE_MC_HTTP_GET_NAS = 'CHANGE_MC_HTTP_GET_NAS';
+
+export const changeMCHttpGetNAS = (port, path, scheme, host) => ({
+  type: CHANGE_MC_HTTP_GET_NAS,
+  port,
+  path,
+  scheme,
+  host,
+});
+
+export const ADD_MC_HTTP_GET_HEADER_NAS = 'ADD_MC_HTTP_GET_HEADER_NAS';
+
+export const addMCHttpGetHeaderNAS = () => ({
+  type: ADD_MC_HTTP_GET_HEADER_NAS,
+});
+
+export const CHANGE_MC_HTTP_GET_HEADER_NAS = 'CHANGE_MC_HTTP_GET_HEADER_NAS';
+
+export const changeMCHttpGetHeaderNAS = (fieldName, value, index) => ({
+  type: CHANGE_MC_HTTP_GET_HEADER_NAS,
+  fieldName,
+  value,
+  index,
+});
+
+export const DELETE_MC_HTTP_GET_HEADER_NAS = 'DELETE_MC_HTTP_GET_HEADER_NAS';
+
+export const deleteMCHttpGetHeaderNAS = index => ({
+  type: DELETE_MC_HTTP_GET_HEADER_NAS,
+  index,
+});
+
+export const ADD_MC_METRICS_FORMAT_NAS = 'ADD_MC_METRICS_FORMAT_NAS';
+
+export const addMCMetricsFormatNAS = () => ({
+  type: ADD_MC_METRICS_FORMAT_NAS,
+});
+
+export const CHANGE_MC_METRIC_FORMAT_NAS = 'CHANGE_MC_METRIC_FORMAT_NAS';
+
+export const changeMCMetricsFormatNAS = (format, index) => ({
+  type: CHANGE_MC_METRIC_FORMAT_NAS,
+  format,
+  index,
+});
+
+export const DELETE_MC_METRIC_FORMAT_NAS = 'DELETE_MC_METRIC_FORMAT_NAS';
+
+export const deleteMCMetricsFormatNAS = index => ({
+  type: DELETE_MC_METRIC_FORMAT_NAS,
+  index,
+});
+
+export const CHANGE_MC_CUSTOM_CONTAINER_NAS = 'CHANGE_MC_CUSTOM_CONTAINER_NAS';
+
+export const changeMCCustomContainerNAS = yamlContainer => ({
+  type: CHANGE_MC_CUSTOM_CONTAINER_NAS,
+  yamlContainer,
+});