feat: edit ui

ui/src/features/components/ChaosExperimentForm/index.js

@@ -18,8 +18,6 @@ export class ChaosExperimentForm extends React.Component {
     if (props.chaosExperimentForEdit) {
       this.state = {
         validationErrorText: '',
-        // name: props.chaosExperimentForEdit.kubeObject.metadata.name,
-        // kind: props.chaosExperimentForEdit.kubeObject.kind,
         yaml: JSON.stringify(props.chaosExperimentForEdit.kubeObject, null, '\t')
       }
     } else {
@@ -38,42 +36,40 @@ export class ChaosExperimentForm extends React.Component {
     "action": ""
   }
 }`
-        // yaml: {
-        //   version: API_VERSION,
-        //   kind: CHAOS_EXPERIMENT_KINDS[0],
-        //   metadata: {
-        //     namespace: '',
-        //     name: '',
-        //     annotations: {}
-        //   },
-        //   spec: {
-        //     duration: '0ms'
-        //   }
-        // }
       };
     }
   }
   handleExperimentSubmit = () => {
-    const { createChaosExperiment } = this.props;
+    const { createChaosExperiment, updateChaosExperiment } = this.props;
     const chaosExperimentRequest = createChaosExperimentRequest(JSON.parse(this.state.yaml))
     const validationError = validateKubeObject(chaosExperimentRequest.kubeObject)
     if (validationError) {
       this.setState({ validationErrorText: validationError })
+    } else if (this.props.chaosExperimentForEdit) {
+      const experimentId = this.props.chaosExperimentForEdit.id;
+      updateChaosExperiment(experimentId, chaosExperimentRequest);
     } else {
       createChaosExperiment(chaosExperimentRequest);
     }
   }
 
   componentDidUpdate (prevProps, prevState) {
-    const { createChaosExperimentSuccess: createChaosExperimentSuccessBefore } = prevProps;
+    const {
+      createChaosExperimentSuccess: createChaosExperimentSuccessBefore,
+      updateChaosExperimentSuccess: updateChaosExperimentSuccessBefore
+    } = prevProps;
     const {
       createChaosExperimentSuccess,
+      updateChaosExperimentSuccess,
       closeDialog
     } = this.props;
 
     if (createChaosExperimentSuccess && !createChaosExperimentSuccessBefore) {
       this.props.setCreateChaosExperimentSuccess(false);
       closeDialog();
+    } else if (updateChaosExperimentSuccess && !updateChaosExperimentSuccessBefore) {
+      this.props.setUpdateChaosExperimentSuccess(false);
+      closeDialog();
     }
   }
 
@@ -216,6 +212,7 @@ function mapStateToProps (state) {
   return {
     isLoading: Selectors.chaosExperimentsLoading(state),
     createChaosExperimentSuccess: Selectors.createChaosExperimentSuccess(state),
+    updateChaosExperimentSuccess: Selectors.updateChaosExperimentSuccess(state),
     chaosExperimentsList: Selectors.chaosExperimentsList(state),
     chaosExperimentsError: Selectors.chaosExperimentFailure(state)
   };
@@ -244,6 +241,8 @@ function testJSON (text) {
 
 const mapDispatchToProps = {
   createChaosExperiment: Actions.createChaosExperiment,
-  setCreateChaosExperimentSuccess: Actions.createChaosExperimentSuccess
+  updateChaosExperiment: Actions.updateChaosExperiment,
+  setCreateChaosExperimentSuccess: Actions.createChaosExperimentSuccess,
+  setUpdateChaosExperimentSuccess: Actions.updateChaosExperimentSuccess
 };
 export default connect(mapStateToProps, mapDispatchToProps)(ChaosExperimentForm);

ui/src/features/components/JobForm/index.js

@@ -33,6 +33,8 @@ import { chaosExperimentsForDropdown } from '../../redux/selectors/chaosExperime
 import Dropdown from '../../../components/Dropdown/Dropdown.export';
 
 const DESCRIPTION = 'Predator executes tests through jobs. Use this form to specify the parameters for the job you want to execute.';
+const ONE_SEC_MS = 1000;
+const ONE_MIN_MS = 60 * 1000;
 
 class Form extends React.Component {
   constructor (props) {
@@ -108,7 +110,7 @@ class Form extends React.Component {
             type: inputTypes.NUMERIC_INPUT,
             hiddenCondition: (state) => state.type === testTypes.LOAD_TEST,
             newState: (arrivalCount) => {
-              const parallel = Math.ceil(arrivalCount / 1000);
+              const parallel = Math.ceil(arrivalCount / ONE_SEC_MS);
               const maxVirtualUsers = parallel * 250;
               return { parallelism: parallel, max_virtual_users: maxVirtualUsers };
             }
@@ -210,7 +212,7 @@ class Form extends React.Component {
                       <span className={style['list-item__title']}>experiment name:</span>
                       <span className={style['list-item']}> {experiment.experiment_name}</span>
                       <span className={style['list-item__title']}>start after:</span>
-                      <span className={style['list-item']}> {experiment.start_after / 1000} seconds</span>
+                      <span className={style['list-item']}> {experiment.start_after / ONE_MIN_MS} seconds</span>
                       <FontAwesomeIcon
                         icon={faTimes}
                         size='1px'
@@ -259,8 +261,8 @@ class Form extends React.Component {
               {
                 name: 'add_experiment_form_start_after',
                 key: 'add_experiment_form_start_after',
-                floatingLabelText: 'Start After (Seconds)',
-                info: 'When to start the experiment within the test timeframe (seconds)',
+                floatingLabelText: 'Start After (Minutes)',
+                info: 'When to start the experiment within the test timeframe (Minutes)',
                 element: 'StartAfter',
                 type: inputTypes.NUMERIC_INPUT,
                 justifyContent: 'flex-end',
@@ -281,7 +283,7 @@ class Form extends React.Component {
                   const newExperiment = {
                     experiment_id: this.state.add_experiment_form_experiment_id,
                     experiment_name: this.state.add_experiment_form_experiment_name,
-                    start_after: this.state.add_experiment_form_start_after * 1000 // adjust to milliseconds
+                    start_after: this.state.add_experiment_form_start_after * ONE_MIN_MS // adjust to milliseconds
                   }
                   const experiments = [...this.state.experiments, newExperiment]
                   this.state.experiments.push(newExperiment)
@@ -405,9 +407,9 @@ class Form extends React.Component {
                 (prevState.arrival_count !== this.state.arrival_count || prevState.arrival_rate !== this.state.arrival_rate || prevState.ramp_to !== this.state.ramp_to))) {
         let parallel;
         if (this.state.type === 'load_test') {
-          parallel = this.state.ramp_to > this.state.arrival_rate ? Math.ceil(this.state.ramp_to / 1000) : Math.ceil(this.state.arrival_rate / 1000)
+          parallel = this.state.ramp_to > this.state.arrival_rate ? Math.ceil(this.state.ramp_to / ONE_SEC_MS) : Math.ceil(this.state.arrival_rate / ONE_SEC_MS)
         } else {
-          parallel = Math.ceil(this.state.arrival_count / 1000);
+          parallel = Math.ceil(this.state.arrival_count / ONE_SEC_MS);
         }
         const maxVirtualUsers = parallel * 250;
         this.setState({ parallelism: parallel, max_virtual_users: maxVirtualUsers })

ui/src/features/get-chaos-experiments.js

@@ -18,7 +18,7 @@ import Dialog from './components/Dialog';
 const noDataMsg = 'There is no data to display.';
 const errorMsgGetChaosExperiments = 'Error occurred while trying to get all chaos experiments.';
 const columnsNames = ['experiment_name', 'created_at', 'kind', 'duration', 'raw', 'experiment_edit', 'delete'];
-const DESCRIPTION = 'Create chaos experiments templates to be injected as part of your running job.';
+const DESCRIPTION = 'Create chaos experiments templates to be injected as part of your running test.';
 
 class getChaosExperiments extends React.Component {
   constructor (props) {
@@ -102,7 +102,7 @@ class getChaosExperiments extends React.Component {
   };
 
   onRawView = (data) => {
-    this.setState({ openViewExperiment: data });
+    this.setState({ openViewExperiment: data.kubeObject });
   };
 
   closeExperimentDialog = () => {

ui/src/features/mainMenu.js

@@ -40,7 +40,7 @@ export default [
   },
   {
     key: 4,
-    primaryText: 'Chaos Experiments',
+    primaryText: 'Chaos',
     navigateTo: 'chaos_experiments',
     icon: faFlask
   },

ui/src/features/redux/actions/chaosExperimentsActions.js

@@ -8,6 +8,18 @@ export const createChaosExperimentSuccess = (value) => (
   { type: Types.CREATE_CHAOS_EXPERIMENT_SUCCESS, value }
 )
 
+export const updateChaosExperiment = (id, body) => (
+  { type: Types.UPDATE_CHAOS_EXPERIMENT, id, body }
+)
+
+export const updateChaosExperimentSuccess = (value) => (
+  { type: Types.UPDATE_CHAOS_EXPERIMENT_SUCCESS, value }
+)
+
+export const updateChaosExperimentFailure = (value) => (
+  { type: Types.UPDATE_CHAOS_EXPERIMENT_FAILURE, value }
+)
+
 export const deleteChaosExperiment = (id) => (
   { type: Types.DELETE_CHAOS_EXPERIMENT, id }
 )

ui/src/features/redux/apis/chaosExperimentsApi.js

@@ -13,6 +13,12 @@ export const createChaosExperimentApi = (body) => {
   });
 };
 
+export const updateChaosExperimentApi = (id, body) => {
+  return axios.put(`${env.PREDATOR_URL}/chaos-experiments/${id}`, body, {
+    responseType: 'json'
+  });
+};
+
 export const deleteChaosExperimentApi = (id) => {
   return axios.delete(`${env.PREDATOR_URL}/chaos-experiments/${id}`, {
     responseType: 'json'

ui/src/features/redux/reducers/chaosExperimentsReducer.js

@@ -6,6 +6,7 @@ const initialState = Immutable.Map({
   chaosExperiments_loading: false,
   chaosExperiment_error: undefined,
   create_chaosExperiment_success: false,
+  update_chaosExperiment_success: false,
   delete_chaosExperiment_success: false,
   delete_chaosExperiment_failure: false
 });
@@ -25,12 +26,16 @@ export default function reduce (state = initialState, action = {}) {
     return state.set('chaosExperiment_error', action.error);
   case Types.CREATE_CHAOS_EXPERIMENT_SUCCESS:
     return state.set('create_chaosExperiment_success', action.value);
+  case Types.CREATE_CHAOS_EXPERIMENT_FAILURE:
+    return state.set('chaosExperiment_error', action.error);
+  case Types.UPDATE_CHAOS_EXPERIMENT_SUCCESS:
+    return state.set('update_chaosExperiment_success', action.value);
+  case Types.UPDATE_CHAOS_EXPERIMENT_FAILURE:
+    return state.set('chaosExperiment_error', action.error);
   case Types.DELETE_CHAOS_EXPERIMENT:
     return state.set('delete_chaosExperiment_success', action.value);
   case Types.DELETE_CHAOS_EXPERIMENT_FAILURE:
     return state.set('delete_chaosExperiment_failure', action.value);
-  case Types.CREATE_CHAOS_EXPERIMENT_FAILURE:
-    return state.set('chaosExperiment_error', action.error);
   case Types.CLEAN_ALL_ERRORS:
     return state.set('chaosExperiment_error', undefined)
       .set('delete_processor_failure', false);

ui/src/features/redux/saga/chaosExperimentsSagas.js

@@ -1,7 +1,12 @@
-import { put, takeEvery, takeLatest, select, call } from 'redux-saga/effects';
+import { put, takeLatest, call } from 'redux-saga/effects';
 import * as Actions from '../actions/chaosExperimentsActions';
 import * as Types from '../types/chaosExperimentsTypes';
-import { getChaosExperimentsApi, createChaosExperimentApi, deleteChaosExperimentApi } from '../apis/chaosExperimentsApi';
+import {
+  getChaosExperimentsApi,
+  createChaosExperimentApi,
+  deleteChaosExperimentApi,
+  updateChaosExperimentApi
+} from '../apis/chaosExperimentsApi';
 
 export function * createChaosExperiment (action) {
   try {
@@ -15,6 +20,18 @@ export function * createChaosExperiment (action) {
   yield put(Actions.chaosExperimentsLoading(false));
 }
 
+export function * updateChaosExperiment (action) {
+  try {
+    yield put(Actions.chaosExperimentsLoading(true));
+    const { data } = yield call(updateChaosExperimentApi, action.id, action.body);
+    yield put(Actions.updateChaosExperimentSuccess(data));
+    yield put(Actions.getChaosExperiments());
+  } catch (err) {
+    yield put(Actions.getChaosExperimentsFailure(err));
+  }
+  yield put(Actions.chaosExperimentsLoading(false));
+}
+
 export function * getChaosExperiments (action) {
   try {
     yield put(Actions.chaosExperimentsLoading(true));
@@ -41,5 +58,6 @@ export function * deleteChaosExperiment (action) {
 export function * chaosExperimentsRegister () {
   yield takeLatest(Types.GET_CHAOS_EXPERIMENTS, getChaosExperiments);
   yield takeLatest(Types.CREATE_CHAOS_EXPERIMENT, createChaosExperiment);
+  yield takeLatest(Types.UPDATE_CHAOS_EXPERIMENT, updateChaosExperiment);
   yield takeLatest(Types.DELETE_CHAOS_EXPERIMENT, deleteChaosExperiment);
 }

ui/src/features/redux/selectors/chaosExperimentsSelector.js

@@ -4,6 +4,7 @@ export const chaosExperimentsList = (state) => state.ChaosExperimentsReducer.get
 export const chaosExperimentsLoading = (state) => state.ChaosExperimentsReducer.get('chaosExperiments_loading');
 export const chaosExperimentFailure = (state) => state.ChaosExperimentsReducer.get('chaosExperiment_error');
 export const createChaosExperimentSuccess = (state) => state.ChaosExperimentsReducer.get('create_chaosExperiment_success');
+export const updateChaosExperimentSuccess = (state) => state.ChaosExperimentsReducer.get('update_chaosExperiment_success');
 export const deleteChaosExperimentSuccess = (state) => state.ChaosExperimentsReducer.get('delete_chaosExperiment_success');
 export const deleteChaosExperimentFailure = (state) => state.ChaosExperimentsReducer.get('delete_chaosExperiment_failure');
 

ui/src/features/redux/types/chaosExperimentsTypes.js

@@ -7,6 +7,10 @@ export const CREATE_CHAOS_EXPERIMENT = 'CREATE_CHAOS_EXPERIMENT';
 export const CREATE_CHAOS_EXPERIMENT_SUCCESS = 'CREATE_CHAOS_EXPERIMENT_SUCCESS';
 export const CREATE_CHAOS_EXPERIMENT_FAILURE = 'CREATE_CHAOS_EXPERIMENT_FAILURE';
 
+export const UPDATE_CHAOS_EXPERIMENT = 'UPDATE_CHAOS_EXPERIMENT';
+export const UPDATE_CHAOS_EXPERIMENT_SUCCESS = 'UPDATE_CHAOS_EXPERIMENT_SUCCESS';
+export const UPDATE_CHAOS_EXPERIMENT_FAILURE = 'UPDATE_CHAOS_EXPERIMENT_FAILURE';
+
 export const DELETE_CHAOS_EXPERIMENT = 'DELETE_CHAOS_EXPERIMENT';
 export const DELETE_CHAOS_EXPERIMENT_SUCCESS = 'DELETE_CHAOS_EXPERIMENT_SUCCESS';
 export const DELETE_CHAOS_EXPERIMENT_FAILURE = 'DELETE_CHAOS_EXPERIMENT_FAILURE';