From 03fffe4a057da647cb70d4ac25ac3c2b5524bcf4 Mon Sep 17 00:00:00 2001
From: kerenfinkelstein <keren.filkenstein@payu.com>
Date: Mon, 18 Sep 2023 14:54:04 +0300
Subject: [PATCH 1/6] feat: add chaos experiments ui page with crud integration

---
 ui/src/App/index.js                           |   84 +-
 ui/src/App/rootSagas.js                       |    2 +
 ui/src/components/Dropdown/CustomDropdown.js  |   23 +
 .../components/ChaosExperimentForm/index.js   |  257 ++++
 .../components/ChaosExperimentForm/style.scss |   52 +
 .../components/TestForm/CustomDropdown.js     |   24 -
 .../TestForm/DynamicKeyValueInput.js          |  110 +-
 .../features/components/TestForm/StepForm.js  |    2 +-
 .../features/components/TestForm/constants.js |  136 +-
 ui/src/features/configurationColumn.js        | 1153 +++++++++--------
 ui/src/features/get-chaos-experiments.js      |  207 +++
 ui/src/features/get-processors.js             |  274 ++--
 ui/src/features/mainMenu.js                   |  127 +-
 ui/src/features/redux/action.js               |  384 +++---
 .../redux/actions/chaosExperimentsActions.js  |   39 +
 .../redux/apis/chaosExperimentsApi.js         |   20 +
 .../redux/reducers/chaosExperimentsReducer.js |   38 +
 .../redux/saga/chaosExperimentsSagas.js       |   45 +
 .../selectors/chaosExperimentsSelector.js     |    6 +
 .../redux/types/chaosExperimentsTypes.js      |   15 +
 ui/src/store/reducers.js                      |   16 +-
 21 files changed, 1866 insertions(+), 1148 deletions(-)
 create mode 100644 ui/src/components/Dropdown/CustomDropdown.js
 create mode 100644 ui/src/features/components/ChaosExperimentForm/index.js
 create mode 100644 ui/src/features/components/ChaosExperimentForm/style.scss
 delete mode 100644 ui/src/features/components/TestForm/CustomDropdown.js
 create mode 100644 ui/src/features/get-chaos-experiments.js
 create mode 100644 ui/src/features/redux/actions/chaosExperimentsActions.js
 create mode 100644 ui/src/features/redux/apis/chaosExperimentsApi.js
 create mode 100644 ui/src/features/redux/reducers/chaosExperimentsReducer.js
 create mode 100644 ui/src/features/redux/saga/chaosExperimentsSagas.js
 create mode 100644 ui/src/features/redux/selectors/chaosExperimentsSelector.js
 create mode 100644 ui/src/features/redux/types/chaosExperimentsTypes.js

diff --git a/ui/src/App/index.js b/ui/src/App/index.js
index e35c1121d..863dcd331 100644
--- a/ui/src/App/index.js
+++ b/ui/src/App/index.js
@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 import GetTests from '../features/get-tests';
 import GetProcessors from '../features/get-processors';
+import GetChaosExperiments from '../features/get-chaos-experiments';
 import GetJobs from '../features/get-jobs';
 import GetReports from '../features/get-last-reports';
 import GetTestReports from '../features/get-test-reports';
@@ -29,53 +30,56 @@ class App extends React.Component {
 
     render () {
       return (
-          <ConnectedRouter history={history}>
-            <DrawerE history={history} open={true} listItemData={menuList}>
-              <Route exact path='/' render={() => (
-                <Redirect to='/last_reports' />
-              )} />
-              <Route exact path='/tests' render={props => (
-                <GetTests {...props} />
-              )} />
-              <Route exact path='/tests/:testId/run' render={props => (
-                <GetTests {...props} />
-              )} />
-                <Route exact path='/tests/:testId/edit' render={props => (
-                    <GetTests {...props} />
-                )} />
-              <Route exact path='/jobs' render={props => (
-                <GetJobs {...props} />
-              )} />
-                <Route exact path='/jobs/:jobId/edit' render={props => (
-                  <GetJobs {...props} />
-                )} />
-              <Route exact path='/tests/:testId/reports' render={props => (
-                <GetTestReports {...props} />
-              )} />
-              <Route exact path='/last_reports' render={props => (
-                <GetReports {...props} />
-              )} />
-              <Route exact path='/processors' render={props => (
-                <GetProcessors {...props} />
-              )} />
-              <Route exact path='/webhooks' render={props => (
-                <Webhooks {...props} />
-              )} />
+        <ConnectedRouter history={history}>
+          <DrawerE history={history} open listItemData={menuList}>
+            <Route exact path='/' render={() => (
+              <Redirect to='/last_reports' />
+            )} />
+            <Route exact path='/tests' render={props => (
+              <GetTests {...props} />
+            )} />
+            <Route exact path='/tests/:testId/run' render={props => (
+              <GetTests {...props} />
+            )} />
+            <Route exact path='/tests/:testId/edit' render={props => (
+              <GetTests {...props} />
+            )} />
+            <Route exact path='/jobs' render={props => (
+              <GetJobs {...props} />
+            )} />
+            <Route exact path='/jobs/:jobId/edit' render={props => (
+              <GetJobs {...props} />
+            )} />
+            <Route exact path='/tests/:testId/reports' render={props => (
+              <GetTestReports {...props} />
+            )} />
+            <Route exact path='/last_reports' render={props => (
+              <GetReports {...props} />
+            )} />
+            <Route exact path='/processors' render={props => (
+              <GetProcessors {...props} />
+            )} />
+            <Route exact path='/chaos_experiments' render={props => (
+              <GetChaosExperiments {...props} />
+            )} />
+            <Route exact path='/webhooks' render={props => (
+              <Webhooks {...props} />
+            )} />
             <Route exact path='/settings' render={props => (
-                <Configuration {...props} />
-             )} />
-                <Route exact path='/tests/:testId/reports/:reportId' render={props => (
-                    <ReportPage {...props} />
-                )} />
-            </DrawerE>
-          </ConnectedRouter>
+              <Configuration {...props} />
+            )} />
+            <Route exact path='/tests/:testId/reports/:reportId' render={props => (
+              <ReportPage {...props} />
+            )} />
+          </DrawerE>
+        </ConnectedRouter>
       )
     }
 }
 
 function mapStateToProps (state) {
   return {
-      location: get(state, 'router.location.pathname')
+    location: get(state, 'router.location.pathname')
   }
 }
 
diff --git a/ui/src/App/rootSagas.js b/ui/src/App/rootSagas.js
index 6271bd80b..1a96b26c2 100644
--- a/ui/src/App/rootSagas.js
+++ b/ui/src/App/rootSagas.js
@@ -1,6 +1,7 @@
 import { all } from 'redux-saga/effects';
 import { testsRegister } from '../features/redux/saga/testsSagas';
 import { processorsRegister } from '../features/redux/saga/processorsSagas';
+import { chaosExperimentsRegister } from '../features/redux/saga/chaosExperimentsSagas';
 import { reportsRegister } from '../features/redux/saga/reportsSagas';
 import { jobsRegister } from '../features/redux/saga/jobsSagas';
 import { configRegister } from '../features/redux/saga/configSagas';
@@ -9,6 +10,7 @@ import { webhooksRegister } from '../features/redux/saga/webhooksSagas';
 export default function * rootSaga () {
   yield all([
     processorsRegister(),
+    chaosExperimentsRegister(),
     testsRegister(),
     reportsRegister(),
     jobsRegister(),
diff --git a/ui/src/components/Dropdown/CustomDropdown.js b/ui/src/components/Dropdown/CustomDropdown.js
new file mode 100644
index 000000000..621255a00
--- /dev/null
+++ b/ui/src/components/Dropdown/CustomDropdown.js
@@ -0,0 +1,23 @@
+import Dropdown from './Dropdown.export';
+import React from 'react';
+
+const CustomDropdown = (props) => {
+  const { list, width, onChange, value, placeHolder, style } = props;
+  return (
+    <Dropdown
+      width={width}
+      style={style}
+      options={list.map((option) => ({ key: option, value: option }))}
+      selectedOption={{ key: value, value: value }}
+      onChange={(selected) => {
+        onChange(selected.value)
+      }}
+      placeholder={placeHolder}
+      height={'35px'}
+      disabled={false}
+      validationErrorText=''
+      enableFilter={false}
+    />
+  )
+}
+export default CustomDropdown;
diff --git a/ui/src/features/components/ChaosExperimentForm/index.js b/ui/src/features/components/ChaosExperimentForm/index.js
new file mode 100644
index 000000000..dd2cab5d4
--- /dev/null
+++ b/ui/src/features/components/ChaosExperimentForm/index.js
@@ -0,0 +1,257 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import _ from 'lodash';
+import style from './style.scss';
+import * as Actions from '../../redux/action';
+import * as Selectors from '../../redux/selectors/chaosExperimentsSelector';
+import Modal from '../Modal';
+import Button from '../../../components/Button';
+import MonacoEditor from '@uiw/react-monacoeditor';
+import TitleInput from '../../../components/TitleInput';
+import Input from '../../../components/Input';
+import CustomDropdown from '../../../components/Dropdown/CustomDropdown';
+
+const CHAOS_EXPERIMENT_KINDS = ['PodChaos', 'dnschaos', 'AWSChaos', 'HTTPChaos', 'StressChaos']
+const API_VERSION = 'chaos-mesh.org/v1alpha1'
+
+export class ChaosExperimentForm extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      name: '',
+      kind: '',
+      yaml: {
+        metadata: {
+          namespace: '',
+          name: '',
+          annotations: {}
+        },
+        spec: {}
+      }
+    };
+  }
+
+    postChaosExperiment = () => {
+      const { createChaosExperiment } = this.props;
+      createChaosExperiment(createChaosExperimentRequest(this.state));
+    };
+
+    componentDidUpdate (prevProps, prevState) {
+      const { createChaosExperimentSuccess: createChaosExperimentSuccessBefore } = prevProps;
+      const {
+        createChaosExperimentSuccess,
+        closeDialog
+      } = this.props;
+
+      if (createChaosExperimentSuccess && !createChaosExperimentSuccessBefore) {
+        this.props.setCreateChaosExperimentSuccess(false);
+        closeDialog();
+      }
+    }
+
+    render () {
+      const { closeDialog } = this.props;
+      const {
+        name,
+        kind
+      } = this.state;
+      return (
+        <Modal onExit={closeDialog}>
+          <h1>Create Chaos Experiment</h1>
+          <div className={style['top']}>
+            <div className={style['top-inputs']}>
+              {/* left */}
+              <div className={style['input-container']}>
+                <TitleInput
+                  className={style['inputContainer__titleInput']}
+                  title={'Experiment Name'}>
+                  <Input value={name} onChange={this.handleNameChange} />
+                </TitleInput>
+              </div>
+              <div className={style['input-container']}>
+                <TitleInput
+                  className={style['inputContainer__titleInput']}
+                  title={'Api Version'}>
+                  <Input value={API_VERSION} disabled />
+                </TitleInput>
+              </div>
+              <div className={style['input-container']}>
+                <TitleInput
+                  className={style['inputContainer__titleInput']}
+                  title={'kind'}>
+                  <CustomDropdown
+                    list={CHAOS_EXPERIMENT_KINDS}
+                    value={kind}
+                    onChange={(value) => {
+                      this.handleKindChange(value);
+                    }}
+                    placeHolder={'Kind'}
+                  />
+                </TitleInput>
+              </div>
+            </div>
+          </div>
+          {/* bottom */}
+          {this.generateJavascriptEditor()}
+          {this.generateBottomBar()}
+        </Modal>
+      );
+    }
+
+    generateBottomBar = () => {
+      const {
+        isLoading,
+        closeDialog
+      } = this.props;
+
+      return (<div className={style['buttons-container']}>
+        <div className={style['form-button']}>
+          <Button inverted onClick={closeDialog}>Cancel</Button>
+          <Button spinner={isLoading} hover disabled={!this.state.name || !this.state.kind}
+            onClick={this.postChaosExperiment}>Submit</Button>
+        </div>
+
+      </div>);
+    };
+
+  onInputCodeChange = (code) => {
+    const isValidCode = testJSON(code);
+    if (!isValidCode) return; // Exit early if code is not valid JSON
+
+    const parsedCode = JSON.parse(code);
+    this.setState((prevState) => {
+      const parsedName = _.get(parsedCode, 'metadata.name', prevState.name);
+      const parsedKind = _.get(parsedCode, 'kind', prevState.kind);
+
+      if (_.isEqual(prevState.yaml, parsedCode)) return null; // Only update if the value is different
+
+      return {
+        yaml: parsedCode,
+        name: parsedName,
+        kind: parsedKind
+      };
+    });
+  };
+
+    handleNameChange = (evt) => {
+      const newName = evt.target.value;
+      this.setState((prevState) => {
+        if (prevState.name === newName) return null;
+        return {
+          name: newName,
+          yaml: {
+            ...prevState.yaml,
+            metadata: {
+              ...prevState.yaml.metadata,
+              name: newName
+            }
+          }
+        };
+      });
+    };
+
+    handleKindChange = (value) => {
+      const newKind = value;
+      this.setState((prevState) => {
+        if (prevState.kind === newKind) return null;
+        return {
+          ...prevState,
+          kind: newKind
+        };
+      });
+    };
+
+    generateJavascriptEditor = () => {
+      const options = {
+        selectOnLineNumbers: true,
+        roundedSelection: false,
+        readOnly: false,
+        cursorStyle: 'line',
+        automaticLayout: false,
+        theme: 'vs'
+      };
+      return (
+        <div className={style['bottom']}>
+          {/* bottom */}
+          <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1
+          }}>
+            <MonacoEditor
+              language='json'
+              value={JSON.stringify(this.state.yaml, null, '\t')}
+              options={options}
+              height='500px'
+              width='100%'
+              onChange={(code) => {
+                this.onInputCodeChange(code);
+              }}
+              scrollbar={{
+                // Subtle shadows to the left & top. Defaults to true.
+                useShadows: false,
+                // Render vertical arrows. Defaults to false.
+                verticalHasArrows: true,
+                // Render horizontal arrows. Defaults to false.
+                horizontalHasArrows: true,
+                // Render vertical scrollbar.
+                // Accepted values: 'auto', 'visible', 'hidden'.
+                // Defaults to 'auto'
+                vertical: 'visible',
+                // Render horizontal scrollbar.
+                // Accepted values: 'auto', 'visible', 'hidden'.
+                // Defaults to 'auto'
+                horizontal: 'visible',
+                verticalScrollbarSize: 17,
+                horizontalScrollbarSize: 17,
+                arrowSize: 30
+              }}
+            />
+
+          </div>
+        </div>
+      );
+    };
+}
+
+function mapStateToProps (state) {
+  return {
+    isLoading: Selectors.chaosExperimentsLoading(state),
+    createChaosExperimentSuccess: Selectors.createChaosExperimentSuccess(state),
+    chaosExperimentsList: Selectors.chaosExperimentsList(state),
+    chaosExperimentsError: Selectors.chaosExperimentFailure(state)
+  };
+}
+
+function createChaosExperimentRequest (data) {
+  const {
+    name,
+    yaml
+  } = data;
+  return {
+    name,
+    kubeObject: {
+      kind: data.kind,
+      apiVersion: API_VERSION,
+      ...yaml
+    }
+  };
+}
+
+function testJSON (text) {
+  if (typeof text !== 'string') {
+    return false;
+  }
+  try {
+    JSON.parse(text);
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
+const mapDispatchToProps = {
+  createChaosExperiment: Actions.createChaosExperiment,
+  setCreateChaosExperimentSuccess: Actions.createChaosExperimentSuccess
+};
+export default connect(mapStateToProps, mapDispatchToProps)(ChaosExperimentForm);
diff --git a/ui/src/features/components/ChaosExperimentForm/style.scss b/ui/src/features/components/ChaosExperimentForm/style.scss
new file mode 100644
index 000000000..4702ec740
--- /dev/null
+++ b/ui/src/features/components/ChaosExperimentForm/style.scss
@@ -0,0 +1,52 @@
+
+.top {
+  border-bottom: 1px solid #e9e9e9;
+  padding: 10px 20px;
+  display: flex;
+  justify-content: space-between;
+
+}
+
+.bottom {
+  padding: 10px 20px 10px 0px;
+  display: flex;
+  justify-content: flex-start;
+  overflow: auto;
+  height: 50%;
+}
+
+.top-inputs {
+  display: flex;
+  flex-direction: row;
+  flex-wrap:wrap;
+  flex:1;
+  justify-content: space-between;
+}
+
+.input-container {
+  display: flex;
+  justify-content: space-between;
+  width: 350px;
+  align-items: center;
+
+  &__title-input {
+    width: 100%;
+    margin-top: 2px;
+  }
+}
+
+.plus-button-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.buttons-container {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.form-button {
+  display: flex;
+  justify-content: space-between;
+  width: 230px;
+}
diff --git a/ui/src/features/components/TestForm/CustomDropdown.js b/ui/src/features/components/TestForm/CustomDropdown.js
deleted file mode 100644
index f0e2281c1..000000000
--- a/ui/src/features/components/TestForm/CustomDropdown.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import Dropdown from "../../../components/Dropdown/Dropdown.export";
-import React from "react";
-
-
-const CustomDropdown = (props) => {
-    const {list,width, onChange, value, placeHolder, style} = props;
-    return (
-        <Dropdown
-            width={width}
-            style={style}
-            options={list.map((option) => ({key: option, value: option}))}
-            selectedOption={{key: value, value: value}}
-            onChange={(selected) => {
-                onChange(selected.value)
-            }}
-            placeholder={placeHolder}
-            height={'35px'}
-            disabled={false}
-            validationErrorText=''
-            enableFilter={false}
-        />
-    )
-}
-export default CustomDropdown;
diff --git a/ui/src/features/components/TestForm/DynamicKeyValueInput.js b/ui/src/features/components/TestForm/DynamicKeyValueInput.js
index 359cb8cb0..b7747473d 100644
--- a/ui/src/features/components/TestForm/DynamicKeyValueInput.js
+++ b/ui/src/features/components/TestForm/DynamicKeyValueInput.js
@@ -1,60 +1,58 @@
-import Input from "../../../components/Input";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faMinus, faPlus} from "@fortawesome/free-solid-svg-icons";
-import React from "react";
-import CustomDropdown from './CustomDropdown';
-
-const DynamicKeyValueInput = ({value, onChange, onAdd, onDelete, keyHintText, valueHintText, dropdownOptions, dropDownOnChange, dropDownPlaceHolder}) => {
-
-    const headersList = value
-        .map((keyValuePair, index) => {
-            return (
-                <div style={{
-                    display: 'flex',
-                    flexDirection: 'row',
-                    width: '100%',
-                    marginBottom: index !== headersList - 1 ? '5px' : undefined
-                }} key={index}>
-                    {dropdownOptions &&
-                    <CustomDropdown
-                        width={'125px'}
-                        style={{marginRight: '10px'}}
-                        list={dropdownOptions}
-                        value={keyValuePair.type}
-                        onChange={(value) => dropDownOnChange(value, index)}
-                        placeHolder={dropDownPlaceHolder}
-                    />
-                    }
-                    {
-                        (!keyValuePair.onlyValue) &&
-                        <Input style={{marginRight: '10px'}} value={keyValuePair.key} onChange={(evt) => {
-                            onChange('key', evt.target.value, index)
-                        }} placeholder={keyValuePair.keyPlaceholder || keyHintText || 'key'}/>
-
-                    }
-
-                    <Input value={keyValuePair.value} onChange={(evt) => {
-                        onChange('value', evt.target.value, index)
-                    }} placeholder={keyValuePair.valuePlaceholder || valueHintText || 'value'}/>
-
-                    <FontAwesomeIcon
-                        style={{alignSelf: 'center', color: '#557EFF', cursor: 'pointer', marginLeft: '10px'}}
-                        onClick={() => onDelete(index)}
-                        icon={faMinus}/>
-                </div>
-            )
-        });
-
-    return (
-        <div style={{display: 'flex', flexDirection: 'column', width: '100%', marginBottom: '10px'}}>
-            {headersList}
-            <FontAwesomeIcon
-                style={{alignSelf: 'flex-end', color: '#557EFF', cursor: 'pointer', marginLeft: '10px'}}
-                onClick={() => onAdd()}
-                icon={faPlus}/>
+import Input from '../../../components/Input';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
+import React from 'react';
+import CustomDropdown from '../../../components/Dropdown/CustomDropdown';
+
+const DynamicKeyValueInput = ({ value, onChange, onAdd, onDelete, keyHintText, valueHintText, dropdownOptions, dropDownOnChange, dropDownPlaceHolder }) => {
+  const headersList = value
+    .map((keyValuePair, index) => {
+      return (
+        <div style={{
+          display: 'flex',
+          flexDirection: 'row',
+          width: '100%',
+          marginBottom: index !== headersList - 1 ? '5px' : undefined
+        }} key={index}>
+          {dropdownOptions &&
+          <CustomDropdown
+            width={'125px'}
+            style={{ marginRight: '10px' }}
+            list={dropdownOptions}
+            value={keyValuePair.type}
+            onChange={(value) => dropDownOnChange(value, index)}
+            placeHolder={dropDownPlaceHolder}
+          />
+          }
+          {
+            (!keyValuePair.onlyValue) &&
+            <Input style={{ marginRight: '10px' }} value={keyValuePair.key} onChange={(evt) => {
+              onChange('key', evt.target.value, index)
+            }} placeholder={keyValuePair.keyPlaceholder || keyHintText || 'key'} />
+
+          }
+
+          <Input value={keyValuePair.value} onChange={(evt) => {
+            onChange('value', evt.target.value, index)
+          }} placeholder={keyValuePair.valuePlaceholder || valueHintText || 'value'} />
+
+          <FontAwesomeIcon
+            style={{ alignSelf: 'center', color: '#557EFF', cursor: 'pointer', marginLeft: '10px' }}
+            onClick={() => onDelete(index)}
+            icon={faMinus} />
         </div>
-    )
+      )
+    });
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', width: '100%', marginBottom: '10px' }}>
+      {headersList}
+      <FontAwesomeIcon
+        style={{ alignSelf: 'flex-end', color: '#557EFF', cursor: 'pointer', marginLeft: '10px' }}
+        onClick={() => onAdd()}
+        icon={faPlus} />
+    </div>
+  )
 }
 
-
 export default DynamicKeyValueInput;
diff --git a/ui/src/features/components/TestForm/StepForm.js b/ui/src/features/components/TestForm/StepForm.js
index 02436cdd5..2b417e05c 100644
--- a/ui/src/features/components/TestForm/StepForm.js
+++ b/ui/src/features/components/TestForm/StepForm.js
@@ -18,7 +18,7 @@ import style from './stepform.scss';
 import Input from '../../../components/Input';
 import TitleInput from '../../../components/TitleInput';
 import DynamicKeyValueInput from './DynamicKeyValueInput';
-import CustomDropdown from './CustomDropdown';
+import CustomDropdown from '../../../components/Dropdown/CustomDropdown';
 import Expectations from './Expectations';
 import ErrorWrapper from '../../../components/ErrorWrapper'
 import { URL_FIELDS } from '../../../validators/validate-urls';
diff --git a/ui/src/features/components/TestForm/constants.js b/ui/src/features/components/TestForm/constants.js
index 30d8f2259..74a8f37f6 100644
--- a/ui/src/features/components/TestForm/constants.js
+++ b/ui/src/features/components/TestForm/constants.js
@@ -1,90 +1,92 @@
 export const CONTENT_TYPES = {
-    APPLICATION_JSON: 'json',
-    FORM: 'x-www-form-urlencoded',
-    FORM_DATA: 'form-data',
-    OTHER: 'raw',
-    XML: 'xml',
-    NONE: 'none',
+  APPLICATION_JSON: 'json',
+  FORM: 'x-www-form-urlencoded',
+  FORM_DATA: 'form-data',
+  OTHER: 'raw',
+  XML: 'xml',
+  NONE: 'none'
 };
 export const CAPTURE_TYPES = {
-    XPATH: 'XPath',
-    JSON_PATH: 'JSONPath',
-    REGEXP: 'Regexp',
-    HEADER: 'Header'
+  XPATH: 'XPath',
+  JSON_PATH: 'JSONPath',
+  REGEXP: 'Regexp',
+  HEADER: 'Header'
 };
 
 export const CAPTURE_KEY_VALUE_PLACEHOLDER = {
-    XPath: {
-        key: '/id',
-        value: 'id'
-    },
-    JSONPath: {
-        key: '$.id',
-        value: 'id'
-    },
-    [CAPTURE_TYPES.REGEXP]: {
-        key: '/id',
-        value: 'id'
-    },
-    [CAPTURE_TYPES.HEADER]: {
-        key: 'header-name',
-        value: 'id'
-    },
+  XPath: {
+    key: '/id',
+    value: 'id'
+  },
+  JSONPath: {
+    key: '$.id',
+    value: 'id'
+  },
+  [CAPTURE_TYPES.REGEXP]: {
+    key: '/id',
+    value: 'id'
+  },
+  [CAPTURE_TYPES.HEADER]: {
+    key: 'header-name',
+    value: 'id'
+  }
 };
 export const CAPTURE_TYPE_TO_REQUEST = {
-    [CAPTURE_TYPES.XPATH]: 'xpath',
-    [CAPTURE_TYPES.JSON_PATH]: 'json',
-    [CAPTURE_TYPES.HEADER]: 'header',
-    [CAPTURE_TYPES.REGEXP]: 'regexp',
+  [CAPTURE_TYPES.XPATH]: 'xpath',
+  [CAPTURE_TYPES.JSON_PATH]: 'json',
+  [CAPTURE_TYPES.HEADER]: 'header',
+  [CAPTURE_TYPES.REGEXP]: 'regexp'
 
 };
 export const CAPTURE_RES_TYPE_TO_CAPTURE_TYPE = {
-    json: CAPTURE_TYPES.JSON_PATH,
-    xpath: CAPTURE_TYPES.XPATH,
-    header: CAPTURE_TYPES.HEADER,
-    regexp: CAPTURE_TYPES.REGEXP
+  json: CAPTURE_TYPES.JSON_PATH,
+  xpath: CAPTURE_TYPES.XPATH,
+  header: CAPTURE_TYPES.HEADER,
+  regexp: CAPTURE_TYPES.REGEXP
 };
 export const SUPPORTED_CONTENT_TYPES = [CONTENT_TYPES.NONE, CONTENT_TYPES.FORM_DATA, CONTENT_TYPES.FORM, CONTENT_TYPES.APPLICATION_JSON, CONTENT_TYPES.OTHER];
 export const SUPPORTED_CAPTURE_TYPES = [CAPTURE_TYPES.JSON_PATH, CAPTURE_TYPES.XPATH, CAPTURE_TYPES.REGEXP, CAPTURE_TYPES.HEADER];
 export const HTTP_METHODS = ['POST', 'GET', 'PUT', 'PATCH', 'DELETE', 'OPTIONS', 'HEAD', 'CONNECT', 'TRACE'];
 
+export const CHAOS_EXPERIMENT_KINDS = ['PodChaos', 'dnschaos', 'AWSChaos', 'HTTPChaos', 'StressChaos']
+
 export const EXPECTATIONS_TYPE = {
-    STATUS_CODE: 'statusCode'
+  STATUS_CODE: 'statusCode'
 };
 export const EXPECTATIONS_SPEC = [
-    {
-        propertyName: EXPECTATIONS_TYPE.STATUS_CODE,
-        onlyValue: true
-    },
-    {
-        propertyName: 'contentType',
-        onlyValue: true
-    },
-    {
-        propertyName: 'hasProperty',
-        onlyValue: true
-    },
+  {
+    propertyName: EXPECTATIONS_TYPE.STATUS_CODE,
+    onlyValue: true
+  },
+  {
+    propertyName: 'contentType',
+    onlyValue: true
+  },
+  {
+    propertyName: 'hasProperty',
+    onlyValue: true
+  },
 
-    {
-        propertyName: 'hasHeader',
-        onlyValue: true
-    },
-    {
-        propertyName: 'headerEquals',
-        onlyValue: false
-    },
-    {
-        propertyName: 'equals',
-        onlyValue: false
-    },
-    {
-        propertyName: 'matchesRegexp',
-        onlyValue: true
-    },
+  {
+    propertyName: 'hasHeader',
+    onlyValue: true
+  },
+  {
+    propertyName: 'headerEquals',
+    onlyValue: false
+  },
+  {
+    propertyName: 'equals',
+    onlyValue: false
+  },
+  {
+    propertyName: 'matchesRegexp',
+    onlyValue: true
+  }
 ];
 
 export const EXPECTATIONS_SPEC_BY_PROP = EXPECTATIONS_SPEC
-    .reduce((acc, cur) => {
-        acc[cur.propertyName] = cur;
-        return acc;
-    }, {});
+  .reduce((acc, cur) => {
+    acc[cur.propertyName] = cur;
+    return acc;
+  }, {});
diff --git a/ui/src/features/configurationColumn.js b/ui/src/features/configurationColumn.js
index 12a5141d2..12cdf30e0 100644
--- a/ui/src/features/configurationColumn.js
+++ b/ui/src/features/configurationColumn.js
@@ -1,30 +1,30 @@
-import {TableHeader} from "../components/ReactTable";
-import React, {useEffect, useState} from "react";
-import {get} from 'lodash';
+import { TableHeader } from '../components/ReactTable';
+import React, { useEffect, useState } from 'react';
+import { get } from 'lodash';
 import Checkbox from '../components/Checkbox/Checkbox';
 
 import Moment from 'moment';
 import prettySeconds from 'pretty-seconds';
 import 'font-awesome/css/font-awesome.min.css';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
-    faEye,
-    faRedo,
-    faRunning,
-    faCloudDownloadAlt,
-    faStopCircle,
-    faTrashAlt,
-    faClone,
-    faPen
+  faEye,
+  faRedo,
+  faRunning,
+  faCloudDownloadAlt,
+  faStopCircle,
+  faTrashAlt,
+  faClone,
+  faPen
 } from '@fortawesome/free-solid-svg-icons'
 import classnames from 'classnames';
 import css from './configurationColumn.scss';
-import env from "../App/common/env";
-import {v4 as uuid} from "uuid";
+import env from '../App/common/env';
+import { v4 as uuid } from 'uuid';
 import TooltipWrapper from '../components/TooltipWrapper';
-import {getTimeFromCronExpr} from './utils';
+import { getTimeFromCronExpr } from './utils';
 import UiSwitcher from '../components/UiSwitcher';
-import TextArea from "../components/TextArea";
+import TextArea from '../components/TextArea';
 import ClickOutHandler from 'react-onclickout'
 
 const iconsWidth = 50;
@@ -33,579 +33,604 @@ const semiLarge = 70;
 const largeSize = 85;
 const extraLargeSize = 100;
 const extraExLargeSize = 120;
-export const getColumns = ({columnsNames, sortHeader = '', onSort, onReportView, onRawView, onStop, onDelete, onEdit, onRunTest, onEnableDisable, onEditNote, selectedReports, onReportSelected, onClone}) => {
-
-    const columns = [
-        {
-            id: 'compare',
-            Header: () => (
-                <TableHeader sortable={false}>
-                    Select
-                </TableHeader>
-            ),
-            accessor: (data) => <CompareCheckbox onReportSelected={onReportSelected} selectedReports={selectedReports}
-                                                 data={data}/>,
-            width: iconsWidth
-        }, {
-            id: 'report_id',
-            Header: () => (
-                <TableHeader padding={'8px'} sortable={false}>
-                    Test Name
-                </TableHeader>
-            ),
-            accessor: 'report_id',
-        },
-        {
-            id: 'name',
-            Header: () => (
-                <TableHeader padding={'8px'} sortable={false}>
-                    Test Name
-                </TableHeader>
-            ),
-            accessor: 'name',
-        }, {
-            id: 'processor_name',
-            Header: () => (
-                <TableHeader padding={'8px'} sortable={false}>
-                    Processor Name
-                </TableHeader>
-            ),
-            accessor: 'name',
-        },
-        {
-            id: 'description',
-            Header: () => (
-                <TableHeader padding={'8px'} sortable={false}>
-                    Description
-                </TableHeader>
-            ),
-            accessor: 'description'
-        }, {
-            id: 'updated_at',
-            Header: () => (
-                <TableHeader padding={'8px'} sortable={true}
-                             up={sortHeader.indexOf('updated_at') > -1 && sortHeader.indexOf('+') > -1}
-                             down={sortHeader.indexOf('updated_at') > -1 && sortHeader.indexOf('-') > -1}
-                             onClick={() => {
-                                 onSort('updated_at')
-                             }}
-                >
-                    Modified
-                </TableHeader>
-            ),
-            accessor: (data) => (dateFormatter(data.updated_at)),
-            width: extraExLargeSize + 20,
-            className: css['center-flex'],
-        }, {
-            id: 'type',
-            Header: () => (
-                <TableHeader padding={'8px'} sortable={false}>
-                    Type
-                </TableHeader>
-            ),
-            accessor: 'type',
-            width: iconsWidth,
-            className: css['center-flex'],
-        }, {
-            id: 'edit',
-            Header: () => (
-                <TableHeader sortable={false}>
-                    Edit
-                </TableHeader>
-            ),
-            accessor: data => data.type === 'basic' ? <ViewButton icon={faPen} onClick={(e) => {
-                    e.stopPropagation();
-                    onEdit(data)
-                }}/> :
-                <TooltipWrapper
-                    content={
-                        <div>
-                            DSL not supported
-                        </div>}
-                    dataId={
-                        `tooltipKey`}
-                    place='top'
-                    offset={{top: 1}}
-                >
-                    <div data-tip data-for={`tooltipKey_na`} style={{cursor: 'pointer', width: '18px'}}>
-                        N/A
-                    </div>
-                </TooltipWrapper>,
-            width: iconsWidth,
-            className: css['center-flex'],
-        },
-        {
-            id: 'processor_edit',
-            Header: () => (
-                <TableHeader sortable={false}>
-                    Edit
-                </TableHeader>
-            ),
-            accessor: data => <ViewButton icon={faPen} onClick={(e) => {
-                e.stopPropagation();
-                onEdit(data)
-            }}/>,
-            width: iconsWidth,
-            className: css['center-flex'],
-        },
-        {
-            id: 'job_edit',
-            Header: () => (
-                <TableHeader sortable={false}>
-                    Edit
-                </TableHeader>
-            ),
-            accessor: data => <ViewButton icon={faPen} onClick={(e) => {
-                e.stopPropagation();
-                onEdit(data)
-            }}/>,
-            width: iconsWidth,
-            className: css['center-flex'],
-        },
-        {
-            id: 'test_name',
-            Header: () => (
-                <TableHeader padding={'8px'} sortable={false}>
-                    Test Name
-                </TableHeader>
-            ),
-            accessor: 'test_name',
-
-
-        },
-        {
-            id: 'start_time',
-            Header: () => (
-                <TableHeader padding={'8px'} sortable={true}
-                             up={sortHeader.indexOf('start_time') > -1 && sortHeader.indexOf('+') > -1}
-                             down={sortHeader.indexOf('start_time') > -1 && sortHeader.indexOf('-') > -1}
-                             onClick={() => {
-                                 onSort('start_time')
-                             }}
-                >
-                    Start Time
-                </TableHeader>
-            ),
-            accessor: data => (<div className={css['header-time']}>{dateFormatter(data.start_time)}</div>),
-        },
-        {
-            id: 'end_time',
-            Header: () => (
-                <TableHeader padding={'8px'} sortable={false}>
-                    End Time
-                </TableHeader>
-            ),
-            accessor: data => (<div className={css['header-time']}>{dateFormatter(data.end_time)}</div>),
-            width: extraExLargeSize,
-            className: css['center-flex'],
-        },
-        {
-            id: 'duration',
-            Header: () => (
-                <TableHeader padding={'8px'} sortable={false}>
-                    Duration
-                </TableHeader>
-            ),
-            accessor: data => (prettySeconds(data.duration)),
-            width: largeSize,
-            // className: css['center-flex'],
-        },
-        {
-            id: 'status',
-            Header: () => (
-                <TableHeader padding={'8px'} sortable={false}>
-                    Status
-                </TableHeader>
-            ),
-            accessor: data => statusFormatter(data.status),
-            width: largeSize
-        },
-        {
-            id: 'arrival_rate',
-            Header: () => (
-                <TableHeader sortable={false}>
-                    Rate
-                </TableHeader>
-            ),
-            accessor: data => data.arrival_rate || data.arrival_count,
-            width: mediumSize,
-            className: css['center-flex'],
-        },
-        {
-            id: 'ramp_to',
-            Header: () => (
-                <TableHeader padding={'8px'} sortable={false}>
-                    Ramp To
-                </TableHeader>
-            ),
-            accessor: data => (data.ramp_to || 'N/A'),
-            width: mediumSize,
-            className: css['center-flex'],
-        },
-        {
-            id: 'max_virtual_users',
-            Header: () => (
-                <TableHeader padding={'8px'} sortable={false}>
-                    Max Virtual Users
-                </TableHeader>
-            ),
-            accessor: data => (data.max_virtual_users || 'N/A'),
-            width: extraExLargeSize,
-            className: css['center-flex'],
-        },
-        {
-            id: 'cron_expression',
-            Header: () => (
-                <TableHeader padding={'8px'} sortable={false}>
-                    Cron Expression
-                </TableHeader>
-            ),
-            accessor: data => (getTimeFromCronExpr(data.cron_expression) || 'N/A'),
-            width: extraExLargeSize,
-            className: css['center-flex'],
-        },
-        {
-            id: 'last_run',
-            Header: () => (
-                <TableHeader padding={'8px'} sortable={false}>
-                    Last Run
-                </TableHeader>
-            ),
-            accessor: 'last_run',
-            // minWidth: 150
-        },
+export const getColumns = ({ columnsNames, sortHeader = '', onSort, onReportView, onRawView, onStop, onDelete, onEdit, onRunTest, onEnableDisable, onEditNote, selectedReports, onReportSelected, onClone }) => {
+  const columns = [
+    {
+      id: 'compare',
+      Header: () => (
+        <TableHeader sortable={false}>
+          Select
+        </TableHeader>
+      ),
+      accessor: (data) => <CompareCheckbox onReportSelected={onReportSelected} selectedReports={selectedReports}
+        data={data} />,
+      width: iconsWidth
+    }, {
+      id: 'report_id',
+      Header: () => (
+        <TableHeader padding={'8px'} sortable={false}>
+          Test Name
+        </TableHeader>
+      ),
+      accessor: 'report_id'
+    },
+    {
+      id: 'name',
+      Header: () => (
+        <TableHeader padding={'8px'} sortable={false}>
+          Test Name
+        </TableHeader>
+      ),
+      accessor: 'name'
+    }, {
+      id: 'processor_name',
+      Header: () => (
+        <TableHeader padding={'8px'} sortable={false}>
+          Processor Name
+        </TableHeader>
+      ),
+      accessor: 'name'
+    },
+    {
+      id: 'experiment_name',
+      Header: () => (
+        <TableHeader padding={'8px'} sortable={false}>
+          Experiment Name
+        </TableHeader>
+      ),
+      accessor: 'name'
+    },
+    {
+      id: 'description',
+      Header: () => (
+        <TableHeader padding={'8px'} sortable={false}>
+          Description
+        </TableHeader>
+      ),
+      accessor: 'description'
+    }, {
+      id: 'kind',
+      Header: () => (
+        <TableHeader padding={'8px'} sortable={false}>
+          Kind
+        </TableHeader>
+      ),
+      accessor: 'kind'
+    },
+    {
+      id: 'updated_at',
+      Header: () => (
+        <TableHeader padding={'8px'} sortable
+          up={sortHeader.indexOf('updated_at') > -1 && sortHeader.indexOf('+') > -1}
+          down={sortHeader.indexOf('updated_at') > -1 && sortHeader.indexOf('-') > -1}
+          onClick={() => {
+            onSort('updated_at')
+          }}
+        >
+          Modified
+        </TableHeader>
+      ),
+      accessor: (data) => (dateFormatter(data.updated_at)),
+      width: extraExLargeSize + 20,
+      className: css['center-flex']
+    },
+    {
+      id: 'created_at',
+      Header: () => (
+        <TableHeader padding={'8px'} sortable
+          up={sortHeader.indexOf('created_at') > -1 && sortHeader.indexOf('+') > -1}
+          down={sortHeader.indexOf('created_at') > -1 && sortHeader.indexOf('-') > -1}
+          onClick={() => {
+            onSort('created_at')
+          }}
+        >
+          Created
+        </TableHeader>
+      ),
+      accessor: (data) => (dateFormatter(data.updated_at)),
+      width: extraExLargeSize + 20,
+      className: css['center-flex']
+    }, {
+      id: 'type',
+      Header: () => (
+        <TableHeader padding={'8px'} sortable={false}>
+          Type
+        </TableHeader>
+      ),
+      accessor: 'type',
+      width: iconsWidth,
+      className: css['center-flex']
+    }, {
+      id: 'edit',
+      Header: () => (
+        <TableHeader sortable={false}>
+          Edit
+        </TableHeader>
+      ),
+      accessor: data => data.type === 'basic' ? <ViewButton icon={faPen} onClick={(e) => {
+        e.stopPropagation();
+        onEdit(data)
+      }} />
+        : <TooltipWrapper
+          content={
+            <div>
+              DSL not supported
+            </div>}
+          dataId={
+            'tooltipKey'}
+          place='top'
+          offset={{ top: 1 }}
+        >
+          <div data-tip data-for={'tooltipKey_na'} style={{ cursor: 'pointer', width: '18px' }}>
+            N/A
+          </div>
+        </TooltipWrapper>,
+      width: iconsWidth,
+      className: css['center-flex']
+    },
+    {
+      id: 'processor_edit',
+      Header: () => (
+        <TableHeader sortable={false}>
+          Edit
+        </TableHeader>
+      ),
+      accessor: data => <ViewButton icon={faPen} onClick={(e) => {
+        e.stopPropagation();
+        onEdit(data)
+      }} />,
+      width: iconsWidth,
+      className: css['center-flex']
+    },
+    {
+      id: 'job_edit',
+      Header: () => (
+        <TableHeader sortable={false}>
+          Edit
+        </TableHeader>
+      ),
+      accessor: data => <ViewButton icon={faPen} onClick={(e) => {
+        e.stopPropagation();
+        onEdit(data)
+      }} />,
+      width: iconsWidth,
+      className: css['center-flex']
+    },
+    {
+      id: 'test_name',
+      Header: () => (
+        <TableHeader padding={'8px'} sortable={false}>
+          Test Name
+        </TableHeader>
+      ),
+      accessor: 'test_name'
 
-        {
-            id: 'last_success_rate',
-            Header: () => (
-                <TableHeader sortable={false}>
-                    Success Rate
-                </TableHeader>
-            ),
-            accessor: data => (Math.floor(data.last_success_rate) + '%'),
-            width: extraLargeSize,
-            className: css['center-flex'],
-        },
-        {
-            id: 'avg_rps',
-            Header: () => (
-                <TableHeader sortable={false}>
-                    RPS
-                </TableHeader>
-            ),
-            accessor: data => (Math.floor(data.avg_rps === undefined ? data.last_rps : data.avg_rps)),
-            width: iconsWidth,
-            className: css['center-flex'],
-        },
+    },
+    {
+      id: 'start_time',
+      Header: () => (
+        <TableHeader padding={'8px'} sortable
+          up={sortHeader.indexOf('start_time') > -1 && sortHeader.indexOf('+') > -1}
+          down={sortHeader.indexOf('start_time') > -1 && sortHeader.indexOf('-') > -1}
+          onClick={() => {
+            onSort('start_time')
+          }}
+        >
+          Start Time
+        </TableHeader>
+      ),
+      accessor: data => (<div className={css['header-time']}>{dateFormatter(data.start_time)}</div>)
+    },
+    {
+      id: 'end_time',
+      Header: () => (
+        <TableHeader padding={'8px'} sortable={false}>
+          End Time
+        </TableHeader>
+      ),
+      accessor: data => (<div className={css['header-time']}>{dateFormatter(data.end_time)}</div>),
+      width: extraExLargeSize,
+      className: css['center-flex']
+    },
+    {
+      id: 'duration',
+      Header: () => (
+        <TableHeader padding={'8px'} sortable={false}>
+          Duration
+        </TableHeader>
+      ),
+      accessor: data => (prettySeconds(data.duration)),
+      width: largeSize
+      // className: css['center-flex'],
+    },
+    {
+      id: 'status',
+      Header: () => (
+        <TableHeader padding={'8px'} sortable={false}>
+          Status
+        </TableHeader>
+      ),
+      accessor: data => statusFormatter(data.status),
+      width: largeSize
+    },
+    {
+      id: 'arrival_rate',
+      Header: () => (
+        <TableHeader sortable={false}>
+          Rate
+        </TableHeader>
+      ),
+      accessor: data => data.arrival_rate || data.arrival_count,
+      width: mediumSize,
+      className: css['center-flex']
+    },
+    {
+      id: 'ramp_to',
+      Header: () => (
+        <TableHeader padding={'8px'} sortable={false}>
+          Ramp To
+        </TableHeader>
+      ),
+      accessor: data => (data.ramp_to || 'N/A'),
+      width: mediumSize,
+      className: css['center-flex']
+    },
+    {
+      id: 'max_virtual_users',
+      Header: () => (
+        <TableHeader padding={'8px'} sortable={false}>
+          Max Virtual Users
+        </TableHeader>
+      ),
+      accessor: data => (data.max_virtual_users || 'N/A'),
+      width: extraExLargeSize,
+      className: css['center-flex']
+    },
+    {
+      id: 'cron_expression',
+      Header: () => (
+        <TableHeader padding={'8px'} sortable={false}>
+          Cron Expression
+        </TableHeader>
+      ),
+      accessor: data => (getTimeFromCronExpr(data.cron_expression) || 'N/A'),
+      width: extraExLargeSize,
+      className: css['center-flex']
+    },
+    {
+      id: 'last_run',
+      Header: () => (
+        <TableHeader padding={'8px'} sortable={false}>
+          Last Run
+        </TableHeader>
+      ),
+      accessor: 'last_run'
+      // minWidth: 150
+    },
 
-        {
-            id: 'parallelism',
-            Header: () => (
-                <TableHeader padding={'8px'} sortable={false}>
-                    Parallelism
-                </TableHeader>
-            ),
-            accessor: 'parallelism',
-            width: largeSize,
-            className: css['center-flex'],
-        },
-        {
-            id: 'notes',
-            Header: () => (
-                <TableHeader sortable={false}>
-                    Notes
-                </TableHeader>
-            ),
-            accessor: data => <Notes key={data.report_id} data={data} onEditNote={onEditNote}/>,
-        },
-        {
-            id: 'score',
-            Header: () => (
-                <TableHeader sortable={false}>
-                    Score
-                </TableHeader>
-            ),
-            accessor: (data) => {
-                if (data.score) {
-                    const color = get(data, 'benchmark_weights_data.benchmark_threshold', 0) <= data.score ? 'green' : 'red';
-                    return (
-                        <span className={css['center-flex']} style={{color}}>{Math.floor(data.score)}</span>
-                    )
-                }
-            },
-            width: iconsWidth
-        }, {
-            id: 'report',
-            Header: () => (
-                <TableHeader padding={'8px'} sortable={false}>
-                    Report
-                </TableHeader>
-            ),
-            accessor: data => <ViewButton onClick={(e) => {
-                e.stopPropagation();
-                onReportView(data)
-            }}/>,
-            width: mediumSize
-        },
-        {
-            id: 'grafana_report',
-            Header: () => (
-                <TableHeader sortable={false}>
-                    Grafana
-                </TableHeader>
-            ),
-            accessor: data => <ViewButton onClick={(e) => {
-                e.stopPropagation();
-                window.open(data.grafana_report, '_blank')
-            }}/>,
-            width: mediumSize
-        },
-        {
-            id: 'raw',
-            Header: () => (
-                <TableHeader sortable={false}>
-                    Raw
-                </TableHeader>
-            ),
-            accessor: data => <ViewButton icon={faEye} onClick={(e) => {
-                e.stopPropagation();
-                onRawView(data)
-            }}/>,
-            width: iconsWidth,
-            className: css['center-flex'],
-        },
-        {
-            id: 'rerun',
-            Header: () => (
-                <TableHeader sortable={false}>
-                    Rerun
-                </TableHeader>
-            ),
-            accessor: data => <ViewButton icon={faRedo} onClick={(e) => {
-                e.stopPropagation();
-                onRunTest(data)
-            }}/>,
-            width: iconsWidth
-        },
-        {
-            id: 'run_now',
-            Header: () => (
-                <TableHeader padding={'8px'} sortable={false}>
-                    Run Now
-                </TableHeader>
-            ),
-            accessor: data => <ViewButton icon={faRunning} onClick={(e) => {
-                e.stopPropagation();
-                onRunTest(data)
-            }}/>,
-            width: semiLarge,
-            className: css['center-flex'],
-        },
-        {
-            id: 'delete',
-            Header: () => (
-                <TableHeader sortable={false}>
-                    Delete
-                </TableHeader>
-            ),
-            accessor: data => <ViewButton icon={faTrashAlt} onClick={(e) => {
-                e.stopPropagation();
-                onDelete(data)
-            }}/>,
-            width: mediumSize,
-            className: css['center-flex'],
-        },  {
-            id: 'clone',
-            Header: () => (
-                <TableHeader sortable={false}>
-                    Clone
-                </TableHeader>
-            ),
-            accessor: data => <ViewButton icon={faClone} onClick={(e) => {
-                e.stopPropagation();
-                onClone(data)
-            }}/>,
-            width: mediumSize,
-            className: css['center-flex'],
-        },
-        {
-            id: 'run_test',
-            Header: () => (
-                <TableHeader padding={'8px'} sortable={false}>
-                    Run Test
-                </TableHeader>
-            ),
-            accessor: data => <ViewButton text={'Run'} onClick={(e) => {
-                e.stopPropagation();
-                onRunTest(data)
-            }}/>,
-            width: semiLarge,
-            className: css['center-flex'],
-        }, {
-            id: 'logs',
-            Header: () => (
-                <TableHeader sortable={false}>
-                    Logs
-                </TableHeader>
-            ),
-            accessor: data => (<ViewButton icon={faCloudDownloadAlt}
-                                           onClick={(e) => {
-                                               e.stopPropagation();
-                                               window.open(`${env.PREDATOR_URL}/jobs/${data.job_id}/runs/${data.report_id}/logs`, '_blank')
-                                           }}/>),
-            width: iconsWidth
+    {
+      id: 'last_success_rate',
+      Header: () => (
+        <TableHeader sortable={false}>
+          Success Rate
+        </TableHeader>
+      ),
+      accessor: data => (Math.floor(data.last_success_rate) + '%'),
+      width: extraLargeSize,
+      className: css['center-flex']
+    },
+    {
+      id: 'avg_rps',
+      Header: () => (
+        <TableHeader sortable={false}>
+          RPS
+        </TableHeader>
+      ),
+      accessor: data => (Math.floor(data.avg_rps === undefined ? data.last_rps : data.avg_rps)),
+      width: iconsWidth,
+      className: css['center-flex']
+    },
 
-        }, {
-            id: 'stop',
-            Header: () => (
-                <TableHeader sortable={false}>
-                    Stop
-                </TableHeader>
-            ),
-            accessor: (data) => {
-                const disabled = (data.status !== 'in_progress' && data.status !== 'started');
-                return (<ViewButton disabled={disabled} icon={faStopCircle} onClick={(e) => {
-                    e.stopPropagation();
-                    onStop(data)
-                }}/>)
-            },
-            width: iconsWidth
-        },
-        {
-            id: 'enabled_disabled',
-            Header: () => (
-                <TableHeader sortable={false}>
-                    Enabled
-                </TableHeader>
-            ),
-            accessor: (data) => {
-                const activated = (typeof data.enabled === 'undefined' ? true : data.enabled);
-                return (
-                    <div>
-                        <UiSwitcher
-                            onChange={(value) => {
-                                onEnableDisable(data, value)
-                            }}
-                            disabledInp={false}
-                            activeState={activated}
-                            height={12}
-                            width={22}
-                        />
-                    </div>)
-            },
-            width: semiLarge,
-            className: css['center-flex'],
+    {
+      id: 'parallelism',
+      Header: () => (
+        <TableHeader padding={'8px'} sortable={false}>
+          Parallelism
+        </TableHeader>
+      ),
+      accessor: 'parallelism',
+      width: largeSize,
+      className: css['center-flex']
+    },
+    {
+      id: 'notes',
+      Header: () => (
+        <TableHeader sortable={false}>
+          Notes
+        </TableHeader>
+      ),
+      accessor: data => <Notes key={data.report_id} data={data} onEditNote={onEditNote} />
+    },
+    {
+      id: 'score',
+      Header: () => (
+        <TableHeader sortable={false}>
+          Score
+        </TableHeader>
+      ),
+      accessor: (data) => {
+        if (data.score) {
+          const color = get(data, 'benchmark_weights_data.benchmark_threshold', 0) <= data.score ? 'green' : 'red';
+          return (
+            <span className={css['center-flex']} style={{ color }}>{Math.floor(data.score)}</span>
+          )
         }
-    ];
+      },
+      width: iconsWidth
+    }, {
+      id: 'report',
+      Header: () => (
+        <TableHeader padding={'8px'} sortable={false}>
+          Report
+        </TableHeader>
+      ),
+      accessor: data => <ViewButton onClick={(e) => {
+        e.stopPropagation();
+        onReportView(data)
+      }} />,
+      width: mediumSize
+    },
+    {
+      id: 'grafana_report',
+      Header: () => (
+        <TableHeader sortable={false}>
+          Grafana
+        </TableHeader>
+      ),
+      accessor: data => <ViewButton onClick={(e) => {
+        e.stopPropagation();
+        window.open(data.grafana_report, '_blank')
+      }} />,
+      width: mediumSize
+    },
+    {
+      id: 'raw',
+      Header: () => (
+        <TableHeader sortable={false}>
+          Raw
+        </TableHeader>
+      ),
+      accessor: data => <ViewButton icon={faEye} onClick={(e) => {
+        e.stopPropagation();
+        onRawView(data)
+      }} />,
+      width: iconsWidth,
+      className: css['center-flex']
+    },
+    {
+      id: 'rerun',
+      Header: () => (
+        <TableHeader sortable={false}>
+          Rerun
+        </TableHeader>
+      ),
+      accessor: data => <ViewButton icon={faRedo} onClick={(e) => {
+        e.stopPropagation();
+        onRunTest(data)
+      }} />,
+      width: iconsWidth
+    },
+    {
+      id: 'run_now',
+      Header: () => (
+        <TableHeader padding={'8px'} sortable={false}>
+          Run Now
+        </TableHeader>
+      ),
+      accessor: data => <ViewButton icon={faRunning} onClick={(e) => {
+        e.stopPropagation();
+        onRunTest(data)
+      }} />,
+      width: semiLarge,
+      className: css['center-flex']
+    },
+    {
+      id: 'delete',
+      Header: () => (
+        <TableHeader sortable={false}>
+          Delete
+        </TableHeader>
+      ),
+      accessor: data => <ViewButton icon={faTrashAlt} onClick={(e) => {
+        e.stopPropagation();
+        onDelete(data)
+      }} />,
+      width: mediumSize,
+      className: css['center-flex']
+    }, {
+      id: 'clone',
+      Header: () => (
+        <TableHeader sortable={false}>
+          Clone
+        </TableHeader>
+      ),
+      accessor: data => <ViewButton icon={faClone} onClick={(e) => {
+        e.stopPropagation();
+        onClone(data)
+      }} />,
+      width: mediumSize,
+      className: css['center-flex']
+    },
+    {
+      id: 'run_test',
+      Header: () => (
+        <TableHeader padding={'8px'} sortable={false}>
+          Run Test
+        </TableHeader>
+      ),
+      accessor: data => <ViewButton text={'Run'} onClick={(e) => {
+        e.stopPropagation();
+        onRunTest(data)
+      }} />,
+      width: semiLarge,
+      className: css['center-flex']
+    }, {
+      id: 'logs',
+      Header: () => (
+        <TableHeader sortable={false}>
+          Logs
+        </TableHeader>
+      ),
+      accessor: data => (<ViewButton icon={faCloudDownloadAlt}
+        onClick={(e) => {
+          e.stopPropagation();
+          window.open(`${env.PREDATOR_URL}/jobs/${data.job_id}/runs/${data.report_id}/logs`, '_blank')
+        }} />),
+      width: iconsWidth
 
+    }, {
+      id: 'stop',
+      Header: () => (
+        <TableHeader sortable={false}>
+          Stop
+        </TableHeader>
+      ),
+      accessor: (data) => {
+        const disabled = (data.status !== 'in_progress' && data.status !== 'started');
+        return (<ViewButton disabled={disabled} icon={faStopCircle} onClick={(e) => {
+          e.stopPropagation();
+          onStop(data)
+        }} />)
+      },
+      width: iconsWidth
+    },
+    {
+      id: 'enabled_disabled',
+      Header: () => (
+        <TableHeader sortable={false}>
+          Enabled
+        </TableHeader>
+      ),
+      accessor: (data) => {
+        const activated = (typeof data.enabled === 'undefined' ? true : data.enabled);
+        return (
+          <div>
+            <UiSwitcher
+              onChange={(value) => {
+                onEnableDisable(data, value)
+              }}
+              disabledInp={false}
+              activeState={activated}
+              height={12}
+              width={22}
+            />
+          </div>)
+      },
+      width: semiLarge,
+      className: css['center-flex']
+    }
+  ];
 
-    return columnsNames.map((name) => {
-        const column = columns.find((c) => c.id === name);
-        if (!column) {
-            throw new Error(`column ${name} not found`);
-        }
-        return column;
-    });
+  return columnsNames.map((name) => {
+    const column = columns.find((c) => c.id === name);
+    if (!column) {
+      throw new Error(`column ${name} not found`);
+    }
+    return column;
+  });
 };
 
-
 const dateFormatter = (cell, row) => {
-    const timePattern = 'DD-MM-YYYY hh:mm:ss a';
+  const timePattern = 'DD-MM-YYYY hh:mm:ss a';
 
-    if (!cell) {
-        return 'Still running...';
-    } else {
-        return (
-            new Moment(cell).local().format('lll')
-        );
-    }
+  if (!cell) {
+    return 'Still running...';
+  } else {
+    return (
+      new Moment(cell).local().format('lll')
+    );
+  }
 };
 
-const ViewButton = ({onClick, icon, disabled, text}) => {
-
-    const element = icon ? <FontAwesomeIcon
-        className={classnames(css['icon'], {[css['action-style']]: !disabled, [css['disabled-button']]: disabled})}
-        onClick={() => !disabled && onClick} icon={icon}/> : text || 'View';
+const ViewButton = ({ onClick, icon, disabled, text }) => {
+  const element = icon ? <FontAwesomeIcon
+    className={classnames(css['icon'], { [css['action-style']]: !disabled, [css['disabled-button']]: disabled })}
+    onClick={() => !disabled && onClick} icon={icon} /> : text || 'View';
 
-
-    return (<div className={css['action-style']} onClick={onClick}>{element}</div>)
+  return (<div className={css['action-style']} onClick={onClick}>{element}</div>)
 };
 
-const CompareCheckbox = ({data, onReportSelected, selectedReports}) => {
-
-    return (
-        <div style={{width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
-            <Checkbox
-                indeterminate={false}
-                checked={selectedReports && selectedReports[data.test_id] && selectedReports[data.test_id][data.report_id]}
-                // disabled={}
-                onChange={(value) => onReportSelected(data.test_id, data.report_id, value)}
-            />
-        </div>
-    )
+const CompareCheckbox = ({ data, onReportSelected, selectedReports }) => {
+  return (
+    <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <Checkbox
+        indeterminate={false}
+        checked={selectedReports && selectedReports[data.test_id] && selectedReports[data.test_id][data.report_id]}
+        // disabled={}
+        onChange={(value) => onReportSelected(data.test_id, data.report_id, value)}
+      />
+    </div>
+  )
 }
-const Notes = ({data, onEditNote}) => {
-    const {report_id, test_id} = data;
-    const notes = data.notes || '';
-    const [editMode, setEditMode] = useState(false);
-    const [editValue, setEditValue] = useState(notes);
-    const id = uuid();
-    const cell = notes.split('\n').map((row,index) => (<p key={index}>{row}</p>));
+const Notes = ({ data, onEditNote }) => {
+  const { report_id, test_id } = data;
+  const notes = data.notes || '';
+  const [editMode, setEditMode] = useState(false);
+  const [editValue, setEditValue] = useState(notes);
+  const id = uuid();
+  const cell = notes.split('\n').map((row, index) => (<p key={index}>{row}</p>));
 
-    function onKeyDown(e) {
-        if (e.key === 'Enter') {
-            save();
-        }
+  function onKeyDown (e) {
+    if (e.key === 'Enter') {
+      save();
     }
+  }
 
-    function save() {
-        if (editMode) {
-            setEditMode(false);
-            onEditNote(test_id, report_id, editValue);
-        }
+  function save () {
+    if (editMode) {
+      setEditMode(false);
+      onEditNote(test_id, report_id, editValue);
     }
+  }
 
-    return(
+  return (
 
-        <TooltipWrapper
-            disable={!notes}
-            content={<div>
-                {cell}
-            </div>}
-            dataId={`tooltipKey_${id}`}
-            place='top'
-            offset={{top: 1}}
-        >
-            <div data-tip data-for={`tooltipKey_${id}`} style={{cursor: 'pointer', width: '100%', height: '100%'}}>
-                {editMode &&
-                <ClickOutHandler onClickOut={save}>
-                    <TextArea value={editValue} style={{lineHeight: 'normal'}} onKeyDown={onKeyDown}
-                              onChange={(evt, value) => {
-                                  setEditValue(evt.target.value)
-                              }}/>
-                </ClickOutHandler>
-                }
-                {!editMode &&
+    <TooltipWrapper
+      disable={!notes}
+      content={<div>
+        {cell}
+      </div>}
+      dataId={`tooltipKey_${id}`}
+      place='top'
+      offset={{ top: 1 }}
+    >
+      <div data-tip data-for={`tooltipKey_${id}`} style={{ cursor: 'pointer', width: '100%', height: '100%' }}>
+        {editMode &&
+        <ClickOutHandler onClickOut={save}>
+          <TextArea value={editValue} style={{ lineHeight: 'normal' }} onKeyDown={onKeyDown}
+            onChange={(evt, value) => {
+              setEditValue(evt.target.value)
+            }} />
+        </ClickOutHandler>
+        }
+        {!editMode &&
         <div onClick={() => onEditNote && setEditMode(true)}
-             style={onEditNote && {cursor: 'pointer', width: '100%', height: '100%'}}>{editValue}</div>
+          style={onEditNote && { cursor: 'pointer', width: '100%', height: '100%' }}>{editValue}</div>
 
-                }
-            </div>
-        </TooltipWrapper>
-    )
+        }
+      </div>
+    </TooltipWrapper>
+  )
 };
 
-
 const statusFormatter = (cell) => {
-    let mapper = {
-        'in_progress': 'Running',
-        'aborted': 'Aborted',
-        'finished': 'Finished',
-        'started': 'Started',
-        'partially_finished': 'Partially Finished',
-        'failed': 'Failed'
-    };
-    return (mapper[cell] ? mapper[cell] : cell);
+  let mapper = {
+    in_progress: 'Running',
+    aborted: 'Aborted',
+    finished: 'Finished',
+    started: 'Started',
+    partially_finished: 'Partially Finished',
+    failed: 'Failed'
+  };
+  return (mapper[cell] ? mapper[cell] : cell);
 }
-
-
diff --git a/ui/src/features/get-chaos-experiments.js b/ui/src/features/get-chaos-experiments.js
new file mode 100644
index 000000000..cbb0733da
--- /dev/null
+++ b/ui/src/features/get-chaos-experiments.js
@@ -0,0 +1,207 @@
+import React from 'react';
+import Snackbar from 'material-ui/Snackbar';
+import { connect } from 'react-redux';
+import * as Selectors from './redux/selectors/chaosExperimentsSelector';
+import style from './style.scss';
+import * as Actions from './redux/action';
+import Loader from './components/Loader';
+import DeleteDialog from './components/DeleteDialog';
+import Page from '../components/Page';
+import ChaosExperimentForm from './components/ChaosExperimentForm';
+import { ReactTableComponent } from '../components/ReactTable';
+import { getColumns } from './configurationColumn';
+import Button from '../components/Button';
+import _ from 'lodash';
+import ErrorDialog from './components/ErrorDialog';
+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', 'kind', 'created_at', 'raw', 'delete'];
+const DESCRIPTION = 'Create chaos experiments templates to be injected as part of your running job.';
+
+class getChaosExperiments extends React.Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      openNewTestDialog: false,
+      deleteDialog: false,
+      chaosExperimentToDelete: undefined,
+      createChaosExperiment: false,
+      sortedChaosExperiments: [],
+      sortHeader: ''
+    };
+  }
+
+  componentDidUpdate (prevProps) {
+    if (prevProps.chaosExperimentsList !== this.props.chaosExperimentsList) {
+      this.setState({ sortedChaosExperiments: [...this.props.chaosExperimentsList], sortHeader: 'updated_at-' }, () => {
+        this.onSort('updated_at');
+      });
+    }
+  }
+
+    onDelete = (data) => {
+      this.setState({
+        deleteDialog: true,
+        chaosExperimentToDelete: data
+      });
+    }
+    onSearch = (value) => {
+      if (!value) {
+        this.setState({ sortedChaosExperiments: [...this.props.chaosExperimentsList] });
+      }
+      const newSorted = _.filter(this.props.chaosExperimentsList, (chaosExperiment) => {
+        return (
+          _.includes(String(chaosExperiment.name).toLowerCase(), value.toLowerCase())
+        );
+      });
+      this.setState({ sortedChaosExperiments: newSorted });
+    };
+
+    onSort = (field) => {
+      const { sortHeader } = this.state;
+      let isAsc = false;
+      if (sortHeader.includes(field)) {
+        isAsc = !sortHeader.includes('+');
+      } else {
+        isAsc = true;
+      }
+      let sortedReport;
+      if (isAsc) {
+        sortedReport = _.chain(this.state.sortedChaosExperiments).sortBy(field).reverse().value();
+      } else {
+        sortedReport = _.chain(this.state.sortedChaosExperiments).sortBy(field).value();
+      }
+      this.setState({ sortedChaosExperiments: sortedReport, sortHeader: `${field}${isAsc ? '+' : '-'}` });
+    };
+
+    submitDelete = () => {
+      this.props.deleteChaosExperiment(this.state.chaosExperimentToDelete.id);
+      this.setState({
+        deleteDialog: false
+      });
+    };
+
+    cancelDelete = () => {
+      this.setState({
+        deleteDialog: false
+      });
+    };
+
+  onRawView = (data) => {
+    this.setState({ openViewExperiment: data });
+  };
+
+    closeCreateTest = () => {
+      this.setState({
+        createChaosExperiment: false,
+        chaosExperimentForView: null
+      });
+    };
+
+  closeExperimentDialog = () => {
+    this.setState({
+      openViewExperiment: false
+    });
+  }
+
+    handleSnackbarClose = () => {
+      this.props.setDeleteChaosExperimentSuccess(false);
+      this.setState({
+        chaosExperimentToDelete: undefined
+      });
+    };
+
+    loader () {
+      return this.props.choasExperimentsLoading && this.props.chaosExperimentsList && this.props.chaosExperimentsList.length === 0
+        ? <Loader /> : noDataMsg;
+    }
+
+    componentDidMount () {
+      this.props.getChaosExperiments();
+    }
+    onCloseErrorDialog=() => {
+      this.props.cleanAllErrors()
+      this.props.cleanAllErrors();
+    };
+    render () {
+      const { sortedChaosExperiments, sortHeader } = this.state;
+      const noDataText = this.props.chaosExperimentFailure ? errorMsgGetChaosExperiments : this.loader();
+      const columns = getColumns({
+        columnsNames,
+        onReportView: this.onReportView,
+        onRawView: this.onRawView,
+        onDelete: this.onDelete,
+        onRunTest: this.onRunTest,
+        onSort: this.onSort,
+        sortHeader: sortHeader
+      });
+      const error = this.props.chaosExperimentFailure || this.props.deleteChaosExperimentFailure;
+      return (
+        <Page title={'Chaos Experiments'} description={DESCRIPTION}>
+          <Button className={style['create-button']} onClick={() => {
+            this.setState({
+              createChaosExperiment: true
+            });
+          }}>Create Experiment</Button>
+          <ReactTableComponent
+            onSearch={this.onSearch}
+            rowHeight={'46px'}
+            manual={false}
+            data={sortedChaosExperiments}
+            pageSize={10}
+            columns={columns}
+            noDataText={noDataText}
+            showPagination
+            resizable={false}
+            cursor={'default'}
+            // className={style.table}
+          />
+
+          {this.state.openViewExperiment
+            ? <Dialog title_key={'name'} data={this.state.openViewExperiment}
+              closeDialog={this.closeExperimentDialog} /> : null}
+
+          {this.state.createChaosExperiment &&
+            <ChaosExperimentForm closeDialog={this.closeCreateTest} />}
+
+          {(this.state.deleteDialog && !this.props.deleteChaosExperimentSuccess)
+            ? <DeleteDialog loader={this.props.processingDeleteTest}
+              display={this.state.chaosExperimentToDelete ? this.state.chaosExperimentToDelete.name : ''}
+              onSubmit={this.submitDelete}
+              onCancel={this.cancelDelete} /> : null}
+          <Snackbar
+            open={this.props.deleteChaosExperimentSuccess}
+            bodyStyle={{ backgroundColor: '#2fbb67' }}
+            message={'Chaos experiment deleted successfully'}
+            autoHideDuration={4000}
+            onRequestClose={this.handleSnackbarClose}
+          />
+          {error && <ErrorDialog closeDialog={this.onCloseErrorDialog} showMessage={error} />}
+
+        </Page>
+      );
+    }
+}
+
+function mapStateToProps (state) {
+  return {
+    chaosExperimentsList: Selectors.chaosExperimentsList(state),
+    deleteChaosExperimentSuccess: Selectors.deleteChaosExperimentSuccess(state),
+    chaosExperimentsLoading: Selectors.chaosExperimentsLoading(state),
+    chaosExperimentFailure: Selectors.chaosExperimentFailure(state),
+    deleteChaosExperimentFailure: Selectors.deleteChaosExperimentFailure(state)
+  };
+}
+
+const mapDispatchToProps = {
+  getChaosExperiments: Actions.getChaosExperiments,
+  deleteChaosExperiment: Actions.deleteChaosExperiment,
+  setDeleteChaosExperimentSuccess: Actions.deleteChaosExperimentSuccess,
+  getChaosExperimentsFailure: Actions.getChaosExperimentsFailure,
+  cleanAllErrors: Actions.cleanAllChaosExperimentsErrors
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(getChaosExperiments);
diff --git a/ui/src/features/get-processors.js b/ui/src/features/get-processors.js
index cff1b038d..6c8afea62 100644
--- a/ui/src/features/get-processors.js
+++ b/ui/src/features/get-processors.js
@@ -12,7 +12,7 @@ import { ReactTableComponent } from '../components/ReactTable';
 import { getColumns } from './configurationColumn';
 import Button from '../components/Button';
 import _ from 'lodash';
-import ErrorDialog from "./components/ErrorDialog";
+import ErrorDialog from './components/ErrorDialog';
 
 const noDataMsg = 'There is no data to display.';
 const errorMsgGetProcessors = 'Error occurred while trying to get all processors.';
@@ -20,179 +20,179 @@ const columnsNames = ['processor_name', 'description', 'updated_at', 'processor_
 const DESCRIPTION = 'Processors inject custom JavaScript into test flows, allowing the flow to be as flexible as possible.';
 
 class getProcessors extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            openNewTestDialog: false,
-            deleteDialog: false,
-            processorToDelete: undefined,
-            createProcessor: false,
-            processorForEdit: null,
-            sortedProcessors: [],
-            sortHeader: ''
-        };
-    }
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      openNewTestDialog: false,
+      deleteDialog: false,
+      processorToDelete: undefined,
+      createProcessor: false,
+      processorForEdit: null,
+      sortedProcessors: [],
+      sortHeader: ''
+    };
+  }
 
-    componentDidUpdate(prevProps) {
-        if (prevProps.processorsList !== this.props.processorsList) {
-            this.setState({ sortedProcessors: [...this.props.processorsList], sortHeader: 'updated_at-' }, () => {
-                this.onSort('updated_at');
-            });
-        }
+  componentDidUpdate (prevProps) {
+    if (prevProps.processorsList !== this.props.processorsList) {
+      this.setState({ sortedProcessors: [...this.props.processorsList], sortHeader: 'updated_at-' }, () => {
+        this.onSort('updated_at');
+      });
     }
+  }
 
     onDelete = (data) => {
-        this.setState({
-            deleteDialog: true,
-            processorToDelete: data
-        });
+      this.setState({
+        deleteDialog: true,
+        processorToDelete: data
+      });
     }
     onSearch = (value) => {
-        if (!value) {
-            this.setState({ sortedProcessors: [...this.props.processorsList] });
-        }
-        const newSorted = _.filter(this.props.processorsList, (processor) => {
-            return (
-                _.includes(String(processor.name).toLowerCase(), value.toLowerCase()) ||
+      if (!value) {
+        this.setState({ sortedProcessors: [...this.props.processorsList] });
+      }
+      const newSorted = _.filter(this.props.processorsList, (processor) => {
+        return (
+          _.includes(String(processor.name).toLowerCase(), value.toLowerCase()) ||
                 _.includes(String(processor.description).toLowerCase(), value.toLowerCase())
-            );
-        });
-        this.setState({ sortedProcessors: newSorted });
+        );
+      });
+      this.setState({ sortedProcessors: newSorted });
     };
 
     onSort = (field) => {
-        const { sortHeader } = this.state;
-        let isAsc = false;
-        if (sortHeader.includes(field)) {
-            isAsc = !sortHeader.includes('+');
-        } else {
-            isAsc = true;
-        }
-        let sortedReport;
-        if (isAsc) {
-            sortedReport = _.chain(this.state.sortedProcessors).sortBy(field).reverse().value();
-        } else {
-            sortedReport = _.chain(this.state.sortedProcessors).sortBy(field).value();
-        }
-        this.setState({ sortedProcessors: sortedReport, sortHeader: `${field}${isAsc ? '+' : '-'}` });
+      const { sortHeader } = this.state;
+      let isAsc = false;
+      if (sortHeader.includes(field)) {
+        isAsc = !sortHeader.includes('+');
+      } else {
+        isAsc = true;
+      }
+      let sortedReport;
+      if (isAsc) {
+        sortedReport = _.chain(this.state.sortedProcessors).sortBy(field).reverse().value();
+      } else {
+        sortedReport = _.chain(this.state.sortedProcessors).sortBy(field).value();
+      }
+      this.setState({ sortedProcessors: sortedReport, sortHeader: `${field}${isAsc ? '+' : '-'}` });
     };
 
     submitDelete = () => {
-        this.props.deleteProcessor(this.state.processorToDelete.id);
-        this.setState({
-            deleteDialog: false
-        });
+      this.props.deleteProcessor(this.state.processorToDelete.id);
+      this.setState({
+        deleteDialog: false
+      });
     };
 
     cancelDelete = () => {
-        this.setState({
-            deleteDialog: false
-        });
+      this.setState({
+        deleteDialog: false
+      });
     };
 
     onEdit = (data) => {
-        this.setState({ createProcessor: true, processorForEdit: data });
+      this.setState({ createProcessor: true, processorForEdit: data });
     };
 
     closeCreateTest = () => {
-        this.setState({
-            createProcessor: false,
-            processorForEdit: null
-        });
+      this.setState({
+        createProcessor: false,
+        processorForEdit: null
+      });
     };
 
     handleSnackbarClose = () => {
-        this.props.setDeleteProcessorSuccess(false);
-        this.setState({
-            processorToDelete: undefined
-        });
+      this.props.setDeleteProcessorSuccess(false);
+      this.setState({
+        processorToDelete: undefined
+      });
     };
 
-    loader() {
-        return this.props.processorLoading && this.props.processorsList && this.props.processorsList.length === 0
-            ? <Loader /> : noDataMsg;
+    loader () {
+      return this.props.processorLoading && this.props.processorsList && this.props.processorsList.length === 0
+        ? <Loader /> : noDataMsg;
     }
 
-    componentDidMount() {
-        this.props.getProcessors();
+    componentDidMount () {
+      this.props.getProcessors();
     }
-    onCloseErrorDialog=()=>{
-        this.props.cleanAllErrors();
+    onCloseErrorDialog=() => {
+      this.props.cleanAllErrors();
     };
-    render() {
-        const { sortedProcessors, sortHeader } = this.state;
-        const noDataText = this.props.processorFailure ? errorMsgGetProcessors : this.loader();
-        const columns = getColumns({
-            columnsNames,
-            onReportView: this.onReportView,
-            onRawView: this.onRawView,
-            onDelete: this.onDelete,
-            onEdit: this.onEdit,
-            onRunTest: this.onRunTest,
-            onSort: this.onSort,
-            sortHeader: sortHeader
-        });
-        const error = this.props.processorFailure || this.props.deleteProcessorFailure;
-        return (
-            <Page title={'Processors'} description={DESCRIPTION}>
-            <Button className={style['create-button']} onClick={() => {
-                    this.setState({
-                        createProcessor: true
-                    });
-                }}>Create Processor</Button>
-            <ReactTableComponent
-                onSearch={this.onSearch}
-                    rowHeight={'46px'}
-                    manual={false}
-                    data={sortedProcessors}
-                    pageSize={10}
-                    columns={columns}
-                    noDataText={noDataText}
-                    showPagination
-                    resizable={false}
-                    cursor={'default'}
-                    // className={style.table}
-                />
-
-            {this.state.createProcessor &&
-                <ProcessorForm data={this.state.processorForEdit} closeDialog={this.closeCreateTest} />}
-
-                {(this.state.deleteDialog && !this.props.deleteProcessorSuccess)
-                    ? <DeleteDialog loader={this.props.processingDeleteTest}
-                      display={this.state.processorToDelete ? this.state.processorToDelete.name : ''}
-                      onSubmit={this.submitDelete}
-                      onCancel={this.cancelDelete} /> : null}
-                <Snackbar
-                    open={this.props.deleteProcessorSuccess}
-                    bodyStyle={{ backgroundColor: '#2fbb67' }}
-                    message={'Processor deleted successfully'}
-                    autoHideDuration={4000}
-                    onRequestClose={this.handleSnackbarClose}
-                />
-                {error && <ErrorDialog closeDialog={this.onCloseErrorDialog} showMessage={error}/>}
-
-            </Page>
-        );
+    render () {
+      const { sortedProcessors, sortHeader } = this.state;
+      const noDataText = this.props.processorFailure ? errorMsgGetProcessors : this.loader();
+      const columns = getColumns({
+        columnsNames,
+        onReportView: this.onReportView,
+        onRawView: this.onRawView,
+        onDelete: this.onDelete,
+        onEdit: this.onEdit,
+        onRunTest: this.onRunTest,
+        onSort: this.onSort,
+        sortHeader: sortHeader
+      });
+      const error = this.props.processorFailure || this.props.deleteProcessorFailure;
+      return (
+        <Page title={'Processors'} description={DESCRIPTION}>
+          <Button className={style['create-button']} onClick={() => {
+            this.setState({
+              createProcessor: true
+            });
+          }}>Create Processor</Button>
+          <ReactTableComponent
+            onSearch={this.onSearch}
+            rowHeight={'46px'}
+            manual={false}
+            data={sortedProcessors}
+            pageSize={10}
+            columns={columns}
+            noDataText={noDataText}
+            showPagination
+            resizable={false}
+            cursor={'default'}
+            // className={style.table}
+          />
+
+          {this.state.createProcessor &&
+            <ProcessorForm data={this.state.processorForEdit} closeDialog={this.closeCreateTest} />}
+
+          {(this.state.deleteDialog && !this.props.deleteProcessorSuccess)
+            ? <DeleteDialog loader={this.props.processingDeleteTest}
+              display={this.state.processorToDelete ? this.state.processorToDelete.name : ''}
+              onSubmit={this.submitDelete}
+              onCancel={this.cancelDelete} /> : null}
+          <Snackbar
+            open={this.props.deleteProcessorSuccess}
+            bodyStyle={{ backgroundColor: '#2fbb67' }}
+            message={'Processor deleted successfully'}
+            autoHideDuration={4000}
+            onRequestClose={this.handleSnackbarClose}
+          />
+          {error && <ErrorDialog closeDialog={this.onCloseErrorDialog} showMessage={error} />}
+
+        </Page>
+      );
     }
 }
 
-function mapStateToProps(state) {
-    return {
-        processorsList: Selectors.processorsList(state),
-        deleteProcessorSuccess: Selectors.deleteProcessorSuccess(state),
-        processorLoading: Selectors.processorsLoading(state),
-        processorFailure: Selectors.processorFailure(state),
-        deleteProcessorFailure: Selectors.deleteProcessorFailure(state),
-    };
+function mapStateToProps (state) {
+  return {
+    processorsList: Selectors.processorsList(state),
+    deleteProcessorSuccess: Selectors.deleteProcessorSuccess(state),
+    processorLoading: Selectors.processorsLoading(state),
+    processorFailure: Selectors.processorFailure(state),
+    deleteProcessorFailure: Selectors.deleteProcessorFailure(state)
+  };
 }
 
 const mapDispatchToProps = {
-    getProcessors: Actions.getProcessors,
-    deleteProcessor: Actions.deleteProcessor,
-    setDeleteProcessorSuccess: Actions.deleteProcessorSuccess,
-    getProcessorsFailure: Actions.getProcessorsFailure,
-    cleanAllErrors: Actions.cleanAllErrors
+  getProcessors: Actions.getProcessors,
+  deleteProcessor: Actions.deleteProcessor,
+  setDeleteProcessorSuccess: Actions.deleteProcessorSuccess,
+  getProcessorsFailure: Actions.getProcessorsFailure,
+  cleanAllErrors: Actions.cleanAllErrors
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(getProcessors);
diff --git a/ui/src/features/mainMenu.js b/ui/src/features/mainMenu.js
index afefac33e..9fbb6ea90 100644
--- a/ui/src/features/mainMenu.js
+++ b/ui/src/features/mainMenu.js
@@ -1,69 +1,76 @@
 import {
-    faVial,
-    faBriefcase,
-    faFlagCheckered,
-    faFileAlt,
-    faBook,
-    faPassport,
-    faWrench,
-    faMicrochip,
-    faExternalLinkAlt
+  faVial,
+  faBriefcase,
+  faFlagCheckered,
+  faFileAlt,
+  faBook,
+  faPassport,
+  faWrench,
+  faMicrochip,
+  faFlask,
+  faExternalLinkAlt
 } from '@fortawesome/free-solid-svg-icons';
 
 import { PREDATOR_DOCS_URL } from '../App/common/env';
 
 export default [
-    {
+  {
+    key: 0,
+    primaryText: 'Tests',
+    navigateTo: 'tests',
+    icon: faVial
+  },
+  {
+    key: 1,
+    primaryText: 'Scheduled Runs',
+    navigateTo: 'jobs',
+    icon: faBriefcase
+  },
+  {
+    key: 2,
+    primaryText: 'Last Reports',
+    navigateTo: 'last_reports',
+    icon: faFlagCheckered
+  },
+  {
+    key: 3,
+    primaryText: 'Processors',
+    navigateTo: 'processors',
+    icon: faMicrochip
+  },
+  {
+    key: 4,
+    primaryText: 'Chaos Experiments',
+    navigateTo: 'chaos_experiments',
+    icon: faFlask
+  },
+  {
+    key: 5,
+    primaryText: 'Webhooks',
+    navigateTo: 'webhooks',
+    icon: faExternalLinkAlt
+  },
+  {
+    key: 6,
+    primaryText: 'Settings',
+    navigateTo: 'settings',
+    icon: faWrench
+  },
+  {
+    key: 7,
+    primaryText: 'Docs',
+    icon: faFileAlt,
+    nestedItems: [
+      {
         key: 0,
-        primaryText: 'Tests',
-        navigateTo: 'tests',
-        icon: faVial
-    },
-    {
+        primaryText: 'Documentation',
+        linkUrl: `${PREDATOR_DOCS_URL}/about.html`,
+        icon: faBook
+      }, {
         key: 1,
-        primaryText: 'Scheduled Runs',
-        navigateTo: 'jobs',
-        icon: faBriefcase
-    },
-    {
-        key: 2,
-        primaryText: 'Last Reports',
-        navigateTo: 'last_reports',
-        icon: faFlagCheckered
-    },
-    {
-        key: 3,
-        primaryText: 'Processors',
-        navigateTo: 'processors',
-        icon: faMicrochip
-    },
-    {
-        key: 4,
-        primaryText: 'Webhooks',
-        navigateTo: 'webhooks',
-        icon: faExternalLinkAlt
-    },
-    {
-        key: 5,
-        primaryText: 'Settings',
-        navigateTo: 'settings',
-        icon: faWrench,
-    },
-    {
-        key: 6,
-        primaryText: 'Docs',
-        icon: faFileAlt,
-        nestedItems: [
-            {
-                key: 0,
-                primaryText: 'Documentation',
-                linkUrl: `${PREDATOR_DOCS_URL}/about.html`,
-                icon: faBook
-            }, {
-                key: 1,
-                primaryText: 'API Reference',
-                linkUrl: `${PREDATOR_DOCS_URL}/indexapiref.html`,
-                icon: faPassport
-            }]
-    }
+        primaryText: 'API Reference',
+        linkUrl: `${PREDATOR_DOCS_URL}/indexapiref.html`,
+        icon: faPassport
+      }]
+  }
 ];
diff --git a/ui/src/features/redux/action.js b/ui/src/features/redux/action.js
index 96a4cd5cd..59332f2bf 100644
--- a/ui/src/features/redux/action.js
+++ b/ui/src/features/redux/action.js
@@ -1,209 +1,209 @@
 import {
-    getTest,
-    initCreateTestForm,
-    editTest,
-    cleanAllErrors,
-    clearAllSuccessOperationsState,
-    deleteTest,
-    deleteTestFailure,
-    deleteTestSuccess,
-    clearErrorOnDeleteTest,
-    getTests,
-    getTestsSuccess,
-    getTestFaliure,
-    chooseTest,
-    processingGetTests,
-    clearSelectedTest,
-    clearErrorOnGetTests,
-    clearTests,
-    getTestsFaliure,
-    getTestSuccess,
-    createTest,
-    getFileMetadata,
-    getFileMetadataSuccess,
+  getTest,
+  initCreateTestForm,
+  editTest,
+  cleanAllErrors,
+  clearAllSuccessOperationsState,
+  deleteTest,
+  deleteTestFailure,
+  deleteTestSuccess,
+  clearErrorOnDeleteTest,
+  getTests,
+  getTestsSuccess,
+  getTestFaliure,
+  chooseTest,
+  processingGetTests,
+  clearSelectedTest,
+  clearErrorOnGetTests,
+  clearTests,
+  getTestsFaliure,
+  getTestSuccess,
+  createTest,
+  getFileMetadata,
+  getFileMetadataSuccess
 } from './actions/testsActions';
 import {
-    getWebhooks,
-    createWebhook,
-    createWebHookSuccess,
-    cleanErrors,
-    editWebhook,
-    deleteWebHook,
-    deleteWebHookSuccess,
-    editWebHookSuccess,
+  getWebhooks,
+  createWebhook,
+  createWebHookSuccess,
+  cleanErrors,
+  editWebhook,
+  deleteWebHook,
+  deleteWebHookSuccess,
+  editWebHookSuccess
 } from './actions/webhooksActions';
 import {
-    clearStopJobSuccess,
-    clearDeleteJobSuccess,
-    deleteJob,
-    deleteJobFailure,
-    deleteJobSuccess,
-    clearErrorOnDeleteJob,
-    clearErrorOnStopJob,
-    stopRunningJob,
-    stopRunningJobSuccess,
-    stopRunningJobFailure,
-    createJobSuccess,
-    createJobFailure,
-    processingCreateJob,
-    clearErrorOnCreateJob,
-    createJob,
-    editJob,
-    getJobsFaliure,
-    processingGetJobs,
-    getJobsSuccess,
-    getJobs,
-    getJob,
-    clearErrorOnGetJobs,
-    clearSelectedJob,
-    getJobFaliure,
-    getJobSuccess,
-    editJobSuccess,
-    editJobId,
-    clearErrorOnJobAction
+  clearStopJobSuccess,
+  clearDeleteJobSuccess,
+  deleteJob,
+  deleteJobFailure,
+  deleteJobSuccess,
+  clearErrorOnDeleteJob,
+  clearErrorOnStopJob,
+  stopRunningJob,
+  stopRunningJobSuccess,
+  stopRunningJobFailure,
+  createJobSuccess,
+  createJobFailure,
+  processingCreateJob,
+  clearErrorOnCreateJob,
+  createJob,
+  editJob,
+  getJobsFaliure,
+  processingGetJobs,
+  getJobsSuccess,
+  getJobs,
+  getJob,
+  clearErrorOnGetJobs,
+  clearSelectedJob,
+  getJobFaliure,
+  getJobSuccess,
+  editJobSuccess,
+  editJobId,
+  clearErrorOnJobAction
 } from './actions/jobsActions';
 import {
-    getLastReports,
-    getReport,
-    clearErrorOnGetReports,
-    clearReports,
-    clearSelectedReport,
-    getReportFailure,
-    getReports,
-    getReportsFaliure,
-    getReportsSuccess,
-    getReportSuccess,
-    processingGetReports,
-    editReport,
-    editReportSuccess,
-    cleanAllReportsErrors,
-    addReportForCompare,
-    clearSelectedReports,
-    deleteReports,
-    deleteReportSuccess,
-    deleteReportFailure,
+  getLastReports,
+  getReport,
+  clearErrorOnGetReports,
+  clearReports,
+  clearSelectedReport,
+  getReportFailure,
+  getReports,
+  getReportsFaliure,
+  getReportsSuccess,
+  getReportSuccess,
+  processingGetReports,
+  editReport,
+  editReportSuccess,
+  cleanAllReportsErrors,
+  addReportForCompare,
+  clearSelectedReports,
+  deleteReports,
+  deleteReportSuccess,
+  deleteReportFailure
 } from './actions/reportsActions';
 import {
-    updateConfig,
-    clearUpdateConfigError,
-    processGetConfig,
-    processUpdateConfig,
-    getConfigDataMapSuccess,
-    getConfigSuccess,
-    getConfigDataMap,
-    getConfigFailure,
-    getConfig,
-    updateConfigFailure,
-    updateConfigSuccess,
-    deleteConfigKey,
-    cleanUpdateConfigSuccess,
-    cleanFinishedContainers,
+  updateConfig,
+  clearUpdateConfigError,
+  processGetConfig,
+  processUpdateConfig,
+  getConfigDataMapSuccess,
+  getConfigSuccess,
+  getConfigDataMap,
+  getConfigFailure,
+  getConfig,
+  updateConfigFailure,
+  updateConfigSuccess,
+  deleteConfigKey,
+  cleanUpdateConfigSuccess,
+  cleanFinishedContainers,
   cleanFinishedContainersSuccess,
-    cleanFinishedContainersFailure
+  cleanFinishedContainersFailure
 } from './actions/configActions';
 
 export {
-    // tests//
-    getTest,
-    initCreateTestForm,
-    editTest,
-    cleanAllErrors,
-    getTests,
-    getTestsSuccess,
-    getTestFaliure,
-    chooseTest,
-    processingGetTests,
-    clearSelectedTest,
-    clearErrorOnGetTests,
-    clearTests,
-    getTestsFaliure,
-    getTestSuccess,
-    deleteTest,
-    deleteTestSuccess,
-    deleteTestFailure,
-    clearErrorOnDeleteTest,
-    clearAllSuccessOperationsState,
-    createTest,
-    getFileMetadata,
-    getFileMetadataSuccess,
-    // jobs//
-    getJobsFaliure,
-    processingGetJobs,
-    getJobsSuccess,
-    getJobs,
-    getJob,
-    clearErrorOnGetJobs,
-    clearSelectedJob,
-    getJobFaliure,
-    getJobSuccess,
-    createJobFailure,
-    processingCreateJob,
-    clearErrorOnCreateJob,
-    createJob,
-    editJob,
-    editJobSuccess,
-    editJobId,
-    createJobSuccess,
-    stopRunningJob,
-    stopRunningJobSuccess,
-    stopRunningJobFailure,
-    clearErrorOnStopJob,
-    deleteJob,
-    deleteJobSuccess,
-    deleteJobFailure,
-    clearErrorOnDeleteJob,
-    clearDeleteJobSuccess,
-    clearStopJobSuccess,
-    clearErrorOnJobAction,
-    // reports//
-    getReport,
-    clearErrorOnGetReports,
-    clearReports,
-    clearSelectedReport,
-    getReportFailure,
-    getReports,
-    getReportsFaliure,
-    getReportsSuccess,
-    getReportSuccess,
-    processingGetReports,
-    getLastReports,
-    editReport,
-    editReportSuccess,
-    cleanAllReportsErrors,
-    addReportForCompare,
-    clearSelectedReports,
-    deleteReports,
-    deleteReportSuccess,
-    deleteReportFailure,
-    //config
-    getConfigDataMapSuccess,
-    getConfigSuccess,
-    getConfigDataMap,
-    getConfigFailure,
-    getConfig,
-    updateConfigFailure,
-    updateConfigSuccess,
-    updateConfig,
-    processGetConfig,
-    processUpdateConfig,
-    clearUpdateConfigError,
-    deleteConfigKey,
-    cleanUpdateConfigSuccess,
-    cleanFinishedContainers,
-    cleanFinishedContainersSuccess,
-    cleanFinishedContainersFailure,
-    //webhooks
-    getWebhooks,
-    createWebhook,
-    createWebHookSuccess,
-    cleanErrors,
-    editWebhook,
-    deleteWebHook,
-    deleteWebHookSuccess,
-    editWebHookSuccess
+  // tests//
+  getTest,
+  initCreateTestForm,
+  editTest,
+  cleanAllErrors,
+  getTests,
+  getTestsSuccess,
+  getTestFaliure,
+  chooseTest,
+  processingGetTests,
+  clearSelectedTest,
+  clearErrorOnGetTests,
+  clearTests,
+  getTestsFaliure,
+  getTestSuccess,
+  deleteTest,
+  deleteTestSuccess,
+  deleteTestFailure,
+  clearErrorOnDeleteTest,
+  clearAllSuccessOperationsState,
+  createTest,
+  getFileMetadata,
+  getFileMetadataSuccess,
+  // jobs//
+  getJobsFaliure,
+  processingGetJobs,
+  getJobsSuccess,
+  getJobs,
+  getJob,
+  clearErrorOnGetJobs,
+  clearSelectedJob,
+  getJobFaliure,
+  getJobSuccess,
+  createJobFailure,
+  processingCreateJob,
+  clearErrorOnCreateJob,
+  createJob,
+  editJob,
+  editJobSuccess,
+  editJobId,
+  createJobSuccess,
+  stopRunningJob,
+  stopRunningJobSuccess,
+  stopRunningJobFailure,
+  clearErrorOnStopJob,
+  deleteJob,
+  deleteJobSuccess,
+  deleteJobFailure,
+  clearErrorOnDeleteJob,
+  clearDeleteJobSuccess,
+  clearStopJobSuccess,
+  clearErrorOnJobAction,
+  // reports//
+  getReport,
+  clearErrorOnGetReports,
+  clearReports,
+  clearSelectedReport,
+  getReportFailure,
+  getReports,
+  getReportsFaliure,
+  getReportsSuccess,
+  getReportSuccess,
+  processingGetReports,
+  getLastReports,
+  editReport,
+  editReportSuccess,
+  cleanAllReportsErrors,
+  addReportForCompare,
+  clearSelectedReports,
+  deleteReports,
+  deleteReportSuccess,
+  deleteReportFailure,
+  // config
+  getConfigDataMapSuccess,
+  getConfigSuccess,
+  getConfigDataMap,
+  getConfigFailure,
+  getConfig,
+  updateConfigFailure,
+  updateConfigSuccess,
+  updateConfig,
+  processGetConfig,
+  processUpdateConfig,
+  clearUpdateConfigError,
+  deleteConfigKey,
+  cleanUpdateConfigSuccess,
+  cleanFinishedContainers,
+  cleanFinishedContainersSuccess,
+  cleanFinishedContainersFailure,
+  // webhooks
+  getWebhooks,
+  createWebhook,
+  createWebHookSuccess,
+  cleanErrors,
+  editWebhook,
+  deleteWebHook,
+  deleteWebHookSuccess,
+  editWebHookSuccess
 
 };
-//processors
+// processors
 
 export * from './actions/processorsActions';
-
+export * from './actions/chaosExperimentsActions';
diff --git a/ui/src/features/redux/actions/chaosExperimentsActions.js b/ui/src/features/redux/actions/chaosExperimentsActions.js
new file mode 100644
index 000000000..a326065c7
--- /dev/null
+++ b/ui/src/features/redux/actions/chaosExperimentsActions.js
@@ -0,0 +1,39 @@
+import * as Types from '../types/chaosExperimentsTypes';
+
+export const createChaosExperiment = (body) => (
+  { type: Types.CREATE_CHAOS_EXPERIMENT, body }
+)
+
+export const createChaosExperimentSuccess = (value) => (
+  { type: Types.CREATE_CHAOS_EXPERIMENT_SUCCESS, value }
+)
+
+export const deleteChaosExperiment = (id) => (
+  { type: Types.DELETE_CHAOS_EXPERIMENT, id }
+)
+export const deleteChaosExperimentSuccess = (value) => (
+  { type: Types.DELETE_CHAOS_EXPERIMENT_SUCCESS, value }
+)
+
+export const deleteChaosExperimentFailure = (value) => (
+  { type: Types.DELETE_CHAOS_EXPERIMENT_FAILURE, value }
+);
+export const getChaosExperiments = (params) => (
+  { type: Types.GET_CHAOS_EXPERIMENTS, params }
+);
+
+export const getChaosExperimentsSuccess = (chaosExperiments) => (
+  { type: Types.GET_CHAOS_EXPERIMENTS_SUCCESS, chaosExperiments }
+);
+
+export const chaosExperimentsLoading = (value) => (
+  { type: Types.CHAOS_EXPERIMENTS_LOADING, value }
+);
+
+export const getChaosExperimentsFailure = (error) => (
+  { type: Types.GET_CHAOS_EXPERIMENTS_FAILURE, error }
+);
+
+export const cleanAllChaosExperimentsErrors = () => (
+  { type: Types.CLEAN_ALL_ERRORS }
+);
diff --git a/ui/src/features/redux/apis/chaosExperimentsApi.js b/ui/src/features/redux/apis/chaosExperimentsApi.js
new file mode 100644
index 000000000..e174a6449
--- /dev/null
+++ b/ui/src/features/redux/apis/chaosExperimentsApi.js
@@ -0,0 +1,20 @@
+import axios from 'axios';
+import env from '../../../App/common/env';
+
+export const getChaosExperimentsApi = (params) => {
+  return axios.get(`${env.PREDATOR_URL}/chaos-experiments`, {
+    responseType: 'json', params
+  });
+};
+
+export const createChaosExperimentApi = (body) => {
+  return axios.post(`${env.PREDATOR_URL}/chaos-experiments`, body, {
+    responseType: 'json'
+  });
+};
+
+export const deleteChaosExperimentApi = (id) => {
+  return axios.delete(`${env.PREDATOR_URL}/chaos-experiments/${id}`, {
+    responseType: 'json'
+  });
+};
diff --git a/ui/src/features/redux/reducers/chaosExperimentsReducer.js b/ui/src/features/redux/reducers/chaosExperimentsReducer.js
new file mode 100644
index 000000000..ad782590f
--- /dev/null
+++ b/ui/src/features/redux/reducers/chaosExperimentsReducer.js
@@ -0,0 +1,38 @@
+import Immutable from 'immutable';
+import * as Types from '../types/chaosExperimentsTypes'
+
+const initialState = Immutable.Map({
+  chaosExperiments: [],
+  chaosExperiments_loading: false,
+  chaosExperiment_error: undefined,
+  create_chaosExperiment_success: false,
+  delete_chaosExperiment_success: false,
+  delete_chaosExperiment_failure: false
+});
+
+export default function reduce (state = initialState, action = {}) {
+  switch (action.type) {
+  case Types.CHAOS_EXPERIMENTS_LOADING:
+    return state.set('chaosExperiments_loading', action.value);
+  case Types.GET_CHAOS_EXPERIMENTS_SUCCESS:
+    return state.set('chaosExperiments',
+      action.chaosExperiments.map((chaosExperiment) => ({
+        ...chaosExperiment, kind: chaosExperiment.kubeObject.kind }
+      )));
+  case Types.GET_CHAOS_EXPERIMENTS_FAILURE:
+    return state.set('chaosExperiment_error', action.error);
+  case Types.CREATE_CHAOS_EXPERIMENT_SUCCESS:
+    return state.set('create_chaosExperiment_success', action.value);
+  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);
+  default:
+    return state;
+  }
+}
diff --git a/ui/src/features/redux/saga/chaosExperimentsSagas.js b/ui/src/features/redux/saga/chaosExperimentsSagas.js
new file mode 100644
index 000000000..f436a0065
--- /dev/null
+++ b/ui/src/features/redux/saga/chaosExperimentsSagas.js
@@ -0,0 +1,45 @@
+import { put, takeEvery, takeLatest, select, call } from 'redux-saga/effects';
+import * as Actions from '../actions/chaosExperimentsActions';
+import * as Types from '../types/chaosExperimentsTypes';
+import { getChaosExperimentsApi, createChaosExperimentApi, deleteChaosExperimentApi } from '../apis/chaosExperimentsApi';
+
+export function * createChaosExperiment (action) {
+  try {
+    yield put(Actions.chaosExperimentsLoading(true));
+    const { data } = yield call(createChaosExperimentApi, action.body);
+    yield put(Actions.createChaosExperimentSuccess(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));
+    const { data } = yield call(getChaosExperimentsApi, action.params);
+    yield put(Actions.getChaosExperimentsSuccess(data));
+  } catch (err) {
+    yield put(Actions.getChaosExperimentsFailure(err));
+  }
+  yield put(Actions.chaosExperimentsLoading(false));
+}
+
+export function * deleteChaosExperiment (action) {
+  try {
+    yield put(Actions.chaosExperimentsLoading(true));
+    yield call(deleteChaosExperimentApi, action.id);
+    yield put(Actions.deleteChaosExperimentSuccess(true));
+    yield put(Actions.getChaosExperiments());
+  } catch (err) {
+    yield put(Actions.deleteChaosExperimentFailure(err));
+  }
+  yield put(Actions.chaosExperimentsLoading(false));
+}
+
+export function * chaosExperimentsRegister () {
+  yield takeLatest(Types.GET_CHAOS_EXPERIMENTS, getChaosExperiments);
+  yield takeLatest(Types.CREATE_CHAOS_EXPERIMENT, createChaosExperiment);
+  yield takeLatest(Types.DELETE_CHAOS_EXPERIMENT, deleteChaosExperiment);
+}
diff --git a/ui/src/features/redux/selectors/chaosExperimentsSelector.js b/ui/src/features/redux/selectors/chaosExperimentsSelector.js
new file mode 100644
index 000000000..b9e4d5854
--- /dev/null
+++ b/ui/src/features/redux/selectors/chaosExperimentsSelector.js
@@ -0,0 +1,6 @@
+export const chaosExperimentsList = (state) => state.ChaosExperimentsReducer.get('chaosExperiments');
+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 deleteChaosExperimentSuccess = (state) => state.ChaosExperimentsReducer.get('delete_chaosExperiment_success');
+export const deleteChaosExperimentFailure = (state) => state.ChaosExperimentsReducer.get('delete_chaosExperiment_failure');
diff --git a/ui/src/features/redux/types/chaosExperimentsTypes.js b/ui/src/features/redux/types/chaosExperimentsTypes.js
new file mode 100644
index 000000000..f61b1463d
--- /dev/null
+++ b/ui/src/features/redux/types/chaosExperimentsTypes.js
@@ -0,0 +1,15 @@
+
+export const GET_CHAOS_EXPERIMENTS = 'GET_CHAOS_EXPERIMENTS';
+export const GET_CHAOS_EXPERIMENTS_SUCCESS = 'GET_CHAOS_EXPERIMENTS_SUCCESS';
+export const GET_CHAOS_EXPERIMENTS_FAILURE = 'GET_CHAOS_EXPERIMENTS_FAILURE';
+
+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 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';
+
+export const CHAOS_EXPERIMENTS_LOADING = 'CHAOS_EXPERIMENTS_LOADING';
+export const CLEAN_ALL_ERRORS = 'CLEAN_ALL_ERRORS';
diff --git a/ui/src/store/reducers.js b/ui/src/store/reducers.js
index d5f0112f4..928cf364d 100644
--- a/ui/src/store/reducers.js
+++ b/ui/src/store/reducers.js
@@ -4,14 +4,16 @@ import ReportsReducer from '../features/redux/reducers/reportsReducer'
 import authReducer from '../features/redux/reducers/authReducer'
 import ConfigReducer from '../features/redux/reducers/configReducer'
 import ProcessorsReducer from '../features/redux/reducers/processorsReducer'
+import ChaosExperimentsReducer from '../features/redux/reducers/chaosExperimentsReducer'
 import WebhooksReducer from '../features/redux/reducers/webhooksReducer'
 
 export default {
-    TestsReducer,
-    JobsReducer,
-    ReportsReducer,
-    authReducer,
-    ConfigReducer,
-    ProcessorsReducer,
-    WebhooksReducer
+  TestsReducer,
+  JobsReducer,
+  ReportsReducer,
+  authReducer,
+  ConfigReducer,
+  ProcessorsReducer,
+  ChaosExperimentsReducer,
+  WebhooksReducer
 };

From 3ef5eea2d88e2c99fa654556137d3b1e934c98a1 Mon Sep 17 00:00:00 2001
From: kerenfinkelstein <keren.filkenstein@payu.com>
Date: Mon, 18 Sep 2023 19:30:40 +0300
Subject: [PATCH 2/6] ci: update packages

---
 package-lock.json | 401 ++++++++++++++++++++++++++++++++--------------
 package.json      |   4 +-
 2 files changed, 284 insertions(+), 121 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d4654601f..06f1c780e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -416,7 +416,8 @@
         },
         "ansi-regex": {
           "version": "5.0.0",
-          "resolved": "",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
           "dev": true
         },
         "ansi-styles": {
@@ -1139,9 +1140,9 @@
       }
     },
     "@mapbox/node-pre-gyp": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.9.tgz",
-      "integrity": "sha512-aDF3S3rK9Q2gey/WAttUlISduDItz5BU3306M9Eyv6/oS40aMprnopshtlKTykxRNIBEZuRMaZAnbrQ4QtKGyw==",
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
+      "integrity": "sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==",
       "requires": {
         "detect-libc": "^2.0.0",
         "https-proxy-agent": "^5.0.0",
@@ -1155,14 +1156,14 @@
       },
       "dependencies": {
         "glob": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
-          "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+          "version": "7.2.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+          "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
           "requires": {
             "fs.realpath": "^1.0.0",
             "inflight": "^1.0.4",
             "inherits": "2",
-            "minimatch": "^3.0.4",
+            "minimatch": "^3.1.1",
             "once": "^1.3.0",
             "path-is-absolute": "^1.0.0"
           }
@@ -1184,18 +1185,18 @@
           },
           "dependencies": {
             "semver": {
-              "version": "6.3.0",
-              "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-              "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+              "version": "6.3.1",
+              "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+              "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
             }
           }
         },
-        "node-fetch": {
-          "version": "2.6.7",
-          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-          "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+        "minimatch": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+          "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
           "requires": {
-            "whatwg-url": "^5.0.0"
+            "brace-expansion": "^1.1.7"
           }
         },
         "rimraf": {
@@ -1207,9 +1208,9 @@
           }
         },
         "semver": {
-          "version": "7.3.7",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
-          "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+          "version": "7.5.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
           "requires": {
             "lru-cache": "^6.0.0"
           }
@@ -1241,9 +1242,9 @@
           }
         },
         "semver": {
-          "version": "7.3.7",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
-          "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+          "version": "7.5.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
           "optional": true,
           "requires": {
             "lru-cache": "^6.0.0"
@@ -1268,19 +1269,28 @@
       },
       "dependencies": {
         "glob": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
-          "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+          "version": "7.2.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+          "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
           "optional": true,
           "requires": {
             "fs.realpath": "^1.0.0",
             "inflight": "^1.0.4",
             "inherits": "2",
-            "minimatch": "^3.0.4",
+            "minimatch": "^3.1.1",
             "once": "^1.3.0",
             "path-is-absolute": "^1.0.0"
           }
         },
+        "minimatch": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+          "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+          "optional": true,
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        },
         "mkdirp": {
           "version": "1.0.4",
           "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
@@ -1661,7 +1671,7 @@
     "any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha1-q8av7tzqUugJzcA3au0845Y10X8="
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
     },
     "anymatch": {
       "version": "3.1.1",
@@ -2395,15 +2405,15 @@
           "optional": true
         },
         "glob": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
-          "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+          "version": "7.2.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+          "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
           "optional": true,
           "requires": {
             "fs.realpath": "^1.0.0",
             "inflight": "^1.0.4",
             "inherits": "2",
-            "minimatch": "^3.0.4",
+            "minimatch": "^3.1.1",
             "once": "^1.3.0",
             "path-is-absolute": "^1.0.0"
           }
@@ -2417,6 +2427,24 @@
             "yallist": "^4.0.0"
           }
         },
+        "minimatch": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+          "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+          "optional": true,
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        },
+        "minipass": {
+          "version": "3.3.6",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+          "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+          "optional": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
         "mkdirp": {
           "version": "1.0.4",
           "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
@@ -2801,7 +2829,7 @@
     "cls-bluebird": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cls-bluebird/-/cls-bluebird-2.1.0.tgz",
-      "integrity": "sha1-N+8eCAqP+1XC9BZPU28ZGeeWiu4=",
+      "integrity": "sha512-XVb0RPmHQyy35Tz9z34gvtUcBKUK8A/1xkGCyeFc9B0C7Zr5SysgFaswRVdwI5NEMcO+3JKlIDGIOgERSn9NdA==",
       "requires": {
         "is-bluebird": "^1.0.2",
         "shimmer": "^1.1.0"
@@ -3203,7 +3231,7 @@
     "console-control-strings": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
+      "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ=="
     },
     "contains-path": {
       "version": "0.1.0",
@@ -4525,7 +4553,7 @@
     "delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
+      "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ=="
     },
     "denque": {
       "version": "1.4.1",
@@ -4555,9 +4583,9 @@
       "dev": true
     },
     "detect-libc": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.1.tgz",
-      "integrity": "sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w=="
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.2.tgz",
+      "integrity": "sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw=="
     },
     "detect-newline": {
       "version": "3.1.0",
@@ -4698,9 +4726,9 @@
       }
     },
     "dottie": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/dottie/-/dottie-2.0.2.tgz",
-      "integrity": "sha512-fmrwR04lsniq/uSr8yikThDTrM7epXHBAAjH9TbeH3rEA8tdCO7mRzB9hdmdGyJCxF8KERo9CITcm3kGuoyMhg=="
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/dottie/-/dottie-2.0.6.tgz",
+      "integrity": "sha512-iGCHkfUc5kFekGiqhe8B/mdaurD+lakO9txNnTvKtA6PISrw86LgqHvRzWYPyoE2Ph5aMIrCw9/uko6XHTKCwA=="
     },
     "driftless": {
       "version": "2.0.3",
@@ -6148,6 +6176,21 @@
       "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
       "requires": {
         "minipass": "^3.0.0"
+      },
+      "dependencies": {
+        "minipass": {
+          "version": "3.3.6",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+          "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+        }
       }
     },
     "fs-readdir-recursive": {
@@ -6732,7 +6775,7 @@
     "has-unicode": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
+      "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ=="
     },
     "hasha": {
       "version": "3.0.0",
@@ -6864,9 +6907,9 @@
       }
     },
     "https-proxy-agent": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
-      "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
       "requires": {
         "agent-base": "6",
         "debug": "4"
@@ -7072,7 +7115,7 @@
     "inflection": {
       "version": "1.12.0",
       "resolved": "https://registry.npmjs.org/inflection/-/inflection-1.12.0.tgz",
-      "integrity": "sha1-ogCTVlbW9fa8TcdQLhrstwMihBY="
+      "integrity": "sha512-lRy4DxuIFWXlJU7ed8UiTJOSTqStqYdEb4CEbtXfNbkdj3nH1L+reUWiE10VWcJS2yR7tge8Z74pJjtBjNwj0w=="
     },
     "inflight": {
       "version": "1.0.6",
@@ -7239,9 +7282,9 @@
       }
     },
     "ip": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
-      "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
+      "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==",
       "optional": true
     },
     "ip-regex": {
@@ -7277,7 +7320,7 @@
     "is-bluebird": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-bluebird/-/is-bluebird-1.0.2.tgz",
-      "integrity": "sha1-CWQ5Bg9KpBGr7hkUOoTWpVNG1uI="
+      "integrity": "sha512-PDRu1vVip5dGQg5tfn2qVCCyxbBYu5MhYUJwSfL/RoGBI97n1fxvilVazxzptZW0gcmsMH17H4EVZZI5E/RSeA=="
     },
     "is-buffer": {
       "version": "1.1.6",
@@ -7362,7 +7405,7 @@
     "is-lambda": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz",
-      "integrity": "sha1-PZh3iZ5qU+/AFgUEzeFfgubwYdU=",
+      "integrity": "sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==",
       "optional": true
     },
     "is-npm": {
@@ -8212,6 +8255,15 @@
             "yallist": "^4.0.0"
           }
         },
+        "minipass": {
+          "version": "3.3.6",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+          "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+          "optional": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
         "yallist": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -8464,19 +8516,9 @@
       }
     },
     "minipass": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-      "integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
-      "requires": {
-        "yallist": "^4.0.0"
-      },
-      "dependencies": {
-        "yallist": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-        }
-      }
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ=="
     },
     "minipass-collect": {
       "version": "1.0.2",
@@ -8485,6 +8527,23 @@
       "optional": true,
       "requires": {
         "minipass": "^3.0.0"
+      },
+      "dependencies": {
+        "minipass": {
+          "version": "3.3.6",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+          "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+          "optional": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "optional": true
+        }
       }
     },
     "minipass-fetch": {
@@ -8497,6 +8556,23 @@
         "minipass": "^3.1.0",
         "minipass-sized": "^1.0.3",
         "minizlib": "^2.0.0"
+      },
+      "dependencies": {
+        "minipass": {
+          "version": "3.3.6",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+          "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+          "optional": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "optional": true
+        }
       }
     },
     "minipass-flush": {
@@ -8506,6 +8582,23 @@
       "optional": true,
       "requires": {
         "minipass": "^3.0.0"
+      },
+      "dependencies": {
+        "minipass": {
+          "version": "3.3.6",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+          "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+          "optional": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "optional": true
+        }
       }
     },
     "minipass-pipeline": {
@@ -8515,6 +8608,23 @@
       "optional": true,
       "requires": {
         "minipass": "^3.0.0"
+      },
+      "dependencies": {
+        "minipass": {
+          "version": "3.3.6",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+          "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+          "optional": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "optional": true
+        }
       }
     },
     "minipass-sized": {
@@ -8524,6 +8634,23 @@
       "optional": true,
       "requires": {
         "minipass": "^3.0.0"
+      },
+      "dependencies": {
+        "minipass": {
+          "version": "3.3.6",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+          "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+          "optional": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "optional": true
+        }
       }
     },
     "minizlib": {
@@ -8535,6 +8662,14 @@
         "yallist": "^4.0.0"
       },
       "dependencies": {
+        "minipass": {
+          "version": "3.3.6",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+          "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
         "yallist": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -9101,9 +9236,9 @@
           "optional": true
         },
         "are-we-there-yet": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-3.0.0.tgz",
-          "integrity": "sha512-0GWpv50YSOcLXaN6/FAKY3vfRbllXWV2xvfA/oKJF8pzFhWXPV+yjhJXDBbjscDYowv7Yw1A3uigpzn5iEGTyw==",
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-3.0.1.tgz",
+          "integrity": "sha512-QZW4EDmGwlYur0Yyf/b2uGucHQMa8aFUP7eu9ddR73vvhFyt4V0Vl3QHPcTNJ8l6qYOBdxgXdnBXQrHilfRQBg==",
           "optional": true,
           "requires": {
             "delegates": "^1.0.0",
@@ -9133,23 +9268,23 @@
           }
         },
         "glob": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
-          "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+          "version": "7.2.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+          "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
           "optional": true,
           "requires": {
             "fs.realpath": "^1.0.0",
             "inflight": "^1.0.4",
             "inherits": "2",
-            "minimatch": "^3.0.4",
+            "minimatch": "^3.1.1",
             "once": "^1.3.0",
             "path-is-absolute": "^1.0.0"
           }
         },
         "graceful-fs": {
-          "version": "4.2.10",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-          "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
+          "version": "4.2.11",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+          "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
           "optional": true
         },
         "is-fullwidth-code-point": {
@@ -9167,15 +9302,24 @@
             "yallist": "^4.0.0"
           }
         },
+        "minimatch": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+          "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+          "optional": true,
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        },
         "npmlog": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.1.tgz",
-          "integrity": "sha512-BTHDvY6nrRHuRfyjt1MAufLxYdVXZfd099H4+i1f0lPywNQyI4foeNXJRObB/uy+TYqUW0vAD9gbdSOXPst7Eg==",
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.2.tgz",
+          "integrity": "sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==",
           "optional": true,
           "requires": {
             "are-we-there-yet": "^3.0.0",
             "console-control-strings": "^1.1.0",
-            "gauge": "^4.0.0",
+            "gauge": "^4.0.3",
             "set-blocking": "^2.0.0"
           }
         },
@@ -9189,9 +9333,9 @@
           }
         },
         "semver": {
-          "version": "7.3.7",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
-          "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+          "version": "7.5.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
           "optional": true,
           "requires": {
             "lru-cache": "^6.0.0"
@@ -9232,15 +9376,6 @@
             "isexe": "^2.0.0"
           }
         },
-        "wide-align": {
-          "version": "1.1.5",
-          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
-          "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
-          "optional": true,
-          "requires": {
-            "string-width": "^1.0.2 || 2 || 3 || 4"
-          }
-        },
         "yallist": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -10066,7 +10201,7 @@
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
-      "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
+      "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==",
       "optional": true
     },
     "promise-retry": {
@@ -10824,9 +10959,9 @@
       "integrity": "sha1-1WgS4cAXpuTnw+Ojeh2m143TyT4="
     },
     "sequelize": {
-      "version": "5.22.3",
-      "resolved": "https://registry.npmjs.org/sequelize/-/sequelize-5.22.3.tgz",
-      "integrity": "sha512-+nxf4TzdrB+PRmoWhR05TP9ukLAurK7qtKcIFv5Vhxm5Z9v+d2PcTT6Ea3YAoIQVkZ47QlT9XWAIUevMT/3l8Q==",
+      "version": "5.22.5",
+      "resolved": "https://registry.npmjs.org/sequelize/-/sequelize-5.22.5.tgz",
+      "integrity": "sha512-ySIHof18sJbeVG4zjEvsDL490cd9S14/IhkCrZR/g0C/FPlZq1AzEJVeSAo++9/sgJH2eERltAIGqYQNgVqX/A==",
       "requires": {
         "bluebird": "^3.5.0",
         "cls-bluebird": "^2.1.0",
@@ -10840,23 +10975,33 @@
         "semver": "^6.3.0",
         "sequelize-pool": "^2.3.0",
         "toposort-class": "^1.0.1",
-        "uuid": "^3.3.3",
-        "validator": "^10.11.0",
+        "uuid": "^8.3.2",
+        "validator": "^13.7.0",
         "wkx": "^0.4.8"
       },
       "dependencies": {
         "debug": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz",
-          "integrity": "sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==",
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+          "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
           "requires": {
             "ms": "2.1.2"
           }
         },
         "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+          "version": "6.3.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
+        },
+        "uuid": {
+          "version": "8.3.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+        },
+        "validator": {
+          "version": "13.11.0",
+          "resolved": "https://registry.npmjs.org/validator/-/validator-13.11.0.tgz",
+          "integrity": "sha512-Ii+sehpSfZy+At5nPdnyMhx78fEoPDkR2XW/zimHEL3MyGJQOCQ7WeP20jPYRz7ZCpcKLB21NxuXHF3bxjStBQ=="
         }
       }
     },
@@ -11110,24 +11255,24 @@
       "integrity": "sha1-JGboMidrGRY1Y77ncjiHR/kSR1s="
     },
     "socks": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/socks/-/socks-2.6.2.tgz",
-      "integrity": "sha512-zDZhHhZRY9PxRruRMR7kMhnf3I8hDs4S3f9RecfnGxvcBHQcKcIH/oUcEWffsfl1XxdYlA7nnlGbbTvPz9D8gA==",
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.7.1.tgz",
+      "integrity": "sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==",
       "optional": true,
       "requires": {
-        "ip": "^1.1.5",
+        "ip": "^2.0.0",
         "smart-buffer": "^4.2.0"
       }
     },
     "socks-proxy-agent": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-6.1.1.tgz",
-      "integrity": "sha512-t8J0kG3csjA4g6FTbsMOWws+7R7vuRC8aQ/wy3/1OWmsgwA68zs/+cExQ0koSitUDXqhufF/YJr9wtNMZHw5Ew==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-6.2.1.tgz",
+      "integrity": "sha512-a6KW9G+6B3nWZ1yB8G7pJwL3ggLy1uTzKAgCb7ttblwqdz9fMGJUuTy3uFzEP48FAs9FLILlmzDlE2JJhVQaXQ==",
       "optional": true,
       "requires": {
         "agent-base": "^6.0.2",
-        "debug": "^4.3.1",
-        "socks": "^2.6.1"
+        "debug": "^4.3.3",
+        "socks": "^2.6.2"
       },
       "dependencies": {
         "debug": {
@@ -11303,9 +11448,9 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
     "sqlite3": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/sqlite3/-/sqlite3-5.0.3.tgz",
-      "integrity": "sha512-/cDwes7XtTOtKH5zYeJSuiavuaJ6jXxPjebw9lDFxBAwR/DvP0tnJ5MPZQ3zpnNzJBa1G6mPTpB+5O1T+AoSdQ==",
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/sqlite3/-/sqlite3-5.1.6.tgz",
+      "integrity": "sha512-olYkWoKFVNSSSQNvxVUfjiVbz3YtBwTJj+mfV5zpHmqW3sELx2Cf4QCdirMelhM5Zh+KDVaKgQHqCxrqiWHybw==",
       "requires": {
         "@mapbox/node-pre-gyp": "^1.0.0",
         "node-addon-api": "^4.2.0",
@@ -11341,6 +11486,23 @@
       "optional": true,
       "requires": {
         "minipass": "^3.1.1"
+      },
+      "dependencies": {
+        "minipass": {
+          "version": "3.3.6",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+          "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+          "optional": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "optional": true
+        }
       }
     },
     "stack-chain": {
@@ -11373,7 +11535,8 @@
       "dependencies": {
         "ansi-regex": {
           "version": "5.0.0",
-          "resolved": "",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
           "dev": true
         },
         "ansi-styles": {
@@ -11858,13 +12021,13 @@
       }
     },
     "tar": {
-      "version": "6.1.11",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
-      "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.0.tgz",
+      "integrity": "sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==",
       "requires": {
         "chownr": "^2.0.0",
         "fs-minipass": "^2.0.0",
-        "minipass": "^3.0.0",
+        "minipass": "^5.0.0",
         "minizlib": "^2.1.1",
         "mkdirp": "^1.0.3",
         "yallist": "^4.0.0"
@@ -12139,7 +12302,7 @@
     "toposort-class": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toposort-class/-/toposort-class-1.0.1.tgz",
-      "integrity": "sha1-f/0feMi+KMO6Rc1OGj9e4ZO9mYg="
+      "integrity": "sha512-OsLcGGbYF3rMjPUf8oKktyvCiUxSbqMMS39m33MAjLTC1DVIH6x3WSt63/M77ihI09+Sdfk1AXvfhCEeUmC7mg=="
     },
     "tough-cookie": {
       "version": "2.5.0",
diff --git a/package.json b/package.json
index d1a98a4aa..9d0978c6b 100644
--- a/package.json
+++ b/package.json
@@ -67,9 +67,9 @@
     "request": "^2.88.2",
     "request-promise-native": "^1.0.8",
     "semver": "^7.3.2",
-    "sequelize": "^5.22.3",
+    "sequelize": "^5.22.5",
     "slack-emojis": "^1.1.1",
-    "sqlite3": "^5.0.3",
+    "sqlite3": "^5.1.6",
     "tedious": "^9.2.2",
     "umzug": "^2.3.0",
     "uuid": "^3.4.0"

From 506e58cdb946d0b8f38a4cad6b7cc51207ff9d7d Mon Sep 17 00:00:00 2001
From: kerenfinkelstein <keren.filkenstein@payu.com>
Date: Tue, 19 Sep 2023 11:55:07 +0300
Subject: [PATCH 3/6] ci: update packages

---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 81e6e728a..bf511168f 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -43,7 +43,7 @@ jobs:
           path: ./coverage
   integration-tests:
     docker:
-    - image: cimg/node:16.14
+    - image: circleci/node:12.16
     - image: mailhog/mailhog
     - image: mysql:5.7
       environment:

From a9b62e495cfa275c48f31659aeabc10835360fdc Mon Sep 17 00:00:00 2001
From: kerenfinkelstein <keren.filkenstein@payu.com>
Date: Sun, 24 Sep 2023 23:27:22 +0300
Subject: [PATCH 4/6] feat: add update and kubeObject validation

---
 tests/configurations/dockerRun.sh             |   2 +-
 .../components/ChaosExperimentForm/index.js   | 260 ++++++++++--------
 .../ChaosExperimentForm/validator.js          |  73 +++++
 ui/src/features/configurationColumn.js        |  22 ++
 ui/src/features/get-chaos-experiments.js      |  34 ++-
 .../redux/reducers/chaosExperimentsReducer.js |   4 +-
 6 files changed, 261 insertions(+), 134 deletions(-)
 create mode 100644 ui/src/features/components/ChaosExperimentForm/validator.js

diff --git a/tests/configurations/dockerRun.sh b/tests/configurations/dockerRun.sh
index 4bef518a3..0500d474a 100755
--- a/tests/configurations/dockerRun.sh
+++ b/tests/configurations/dockerRun.sh
@@ -27,7 +27,7 @@ function mysql() {
     IMAGE_NAME=mysql:5.7
     APP=mysql
     stop $APP
-    COMMAND="docker run \
+    COMMAND="docker run --platform linux/amd64\
                     -d \
                     --name mysql \
                     -p 3306:3306 \
diff --git a/ui/src/features/components/ChaosExperimentForm/index.js b/ui/src/features/components/ChaosExperimentForm/index.js
index dd2cab5d4..5cd8dc390 100644
--- a/ui/src/features/components/ChaosExperimentForm/index.js
+++ b/ui/src/features/components/ChaosExperimentForm/index.js
@@ -10,93 +10,114 @@ import MonacoEditor from '@uiw/react-monacoeditor';
 import TitleInput from '../../../components/TitleInput';
 import Input from '../../../components/Input';
 import CustomDropdown from '../../../components/Dropdown/CustomDropdown';
+import ErrorWrapper from '../../../components/ErrorWrapper';
+import validateKubeObject from './validator';
 
-const CHAOS_EXPERIMENT_KINDS = ['PodChaos', 'dnschaos', 'AWSChaos', 'HTTPChaos', 'StressChaos']
+const CHAOS_EXPERIMENT_KINDS = ['PodChaos', 'DNSChaos', 'AWSChaos', 'HTTPChaos', 'StressChaos']
 const API_VERSION = 'chaos-mesh.org/v1alpha1'
 
 export class ChaosExperimentForm extends React.Component {
   constructor (props) {
+    console.log(props)
+    debugger;
     super(props);
-    this.state = {
-      name: '',
-      kind: '',
-      yaml: {
-        metadata: {
-          namespace: '',
-          name: '',
-          annotations: {}
-        },
-        spec: {}
+    if (props.chaosExperimentForEdit) {
+      this.state = {
+        validationErrorText: '',
+        name: props.chaosExperimentForEdit.kubeObject.metadata.name,
+        kind: props.chaosExperimentForEdit.kubeObject.kind,
+        yaml: props.chaosExperimentForEdit.kubeObject
       }
-    };
+    } else {
+      this.state = {
+        validationErrorText: '',
+        name: '',
+        kind: '',
+        yaml: {
+          metadata: {
+            namespace: '',
+            name: '',
+            annotations: {}
+          },
+          spec: {
+            duration: '0ms'
+          }
+        }
+      };
+    }
+  }
+  handleExperimentSubmit = () => {
+    const { createChaosExperiment } = this.props;
+    const chaosExperimentRequest = createChaosExperimentRequest(this.state)
+    const validationError = validateKubeObject(chaosExperimentRequest.kubeObject)
+    if (validationError) {
+      this.setState({ validationErrorText: validationError })
+    } else {
+      createChaosExperiment(chaosExperimentRequest);
+    }
   }
 
-    postChaosExperiment = () => {
-      const { createChaosExperiment } = this.props;
-      createChaosExperiment(createChaosExperimentRequest(this.state));
-    };
-
-    componentDidUpdate (prevProps, prevState) {
-      const { createChaosExperimentSuccess: createChaosExperimentSuccessBefore } = prevProps;
-      const {
-        createChaosExperimentSuccess,
-        closeDialog
-      } = this.props;
+  componentDidUpdate (prevProps, prevState) {
+    const { createChaosExperimentSuccess: createChaosExperimentSuccessBefore } = prevProps;
+    const {
+      createChaosExperimentSuccess,
+      closeDialog
+    } = this.props;
 
-      if (createChaosExperimentSuccess && !createChaosExperimentSuccessBefore) {
-        this.props.setCreateChaosExperimentSuccess(false);
-        closeDialog();
-      }
+    if (createChaosExperimentSuccess && !createChaosExperimentSuccessBefore) {
+      this.props.setCreateChaosExperimentSuccess(false);
+      closeDialog();
     }
+  }
 
-    render () {
-      const { closeDialog } = this.props;
-      const {
-        name,
-        kind
-      } = this.state;
-      return (
-        <Modal onExit={closeDialog}>
-          <h1>Create Chaos Experiment</h1>
-          <div className={style['top']}>
-            <div className={style['top-inputs']}>
-              {/* left */}
-              <div className={style['input-container']}>
-                <TitleInput
-                  className={style['inputContainer__titleInput']}
-                  title={'Experiment Name'}>
-                  <Input value={name} onChange={this.handleNameChange} />
-                </TitleInput>
-              </div>
-              <div className={style['input-container']}>
-                <TitleInput
-                  className={style['inputContainer__titleInput']}
-                  title={'Api Version'}>
-                  <Input value={API_VERSION} disabled />
-                </TitleInput>
-              </div>
-              <div className={style['input-container']}>
-                <TitleInput
-                  className={style['inputContainer__titleInput']}
-                  title={'kind'}>
-                  <CustomDropdown
-                    list={CHAOS_EXPERIMENT_KINDS}
-                    value={kind}
-                    onChange={(value) => {
-                      this.handleKindChange(value);
-                    }}
-                    placeHolder={'Kind'}
-                  />
-                </TitleInput>
-              </div>
+  render () {
+    const { closeDialog } = this.props;
+    const {
+      name,
+      kind
+    } = this.state;
+    return (
+      <Modal onExit={closeDialog}>
+        <h1>Create Chaos Experiment</h1>
+        <div className={style['top']}>
+          <div className={style['top-inputs']}>
+            {/* left */}
+            <div className={style['input-container']}>
+              <TitleInput
+                className={style['inputContainer__titleInput']}
+                title={'Experiment Name'}>
+                <Input value={name} onChange={this.handleNameChange} />
+              </TitleInput>
+            </div>
+            <div className={style['input-container']}>
+              <TitleInput
+                className={style['inputContainer__titleInput']}
+                title={'Api Version'}>
+                <Input value={API_VERSION} disabled />
+              </TitleInput>
+            </div>
+            <div className={style['input-container']}>
+              <TitleInput
+                className={style['inputContainer__titleInput']}
+                title={'kind'}>
+                <CustomDropdown
+                  list={CHAOS_EXPERIMENT_KINDS}
+                  value={kind}
+                  onChange={(value) => {
+                    this.handleKindChange(value);
+                  }}
+                  placeHolder={'Kind'}
+                />
+              </TitleInput>
             </div>
           </div>
-          {/* bottom */}
-          {this.generateJavascriptEditor()}
-          {this.generateBottomBar()}
-        </Modal>
-      );
-    }
+        </div>
+        {/* bottom */}
+        {this.generateJavascriptEditor()}
+        {this.generateBottomBar()}
+      </Modal>
+    );
+  }
 
     generateBottomBar = () => {
       const {
@@ -104,17 +125,21 @@ export class ChaosExperimentForm extends React.Component {
         closeDialog
       } = this.props;
 
-      return (<div className={style['buttons-container']}>
-        <div className={style['form-button']}>
-          <Button inverted onClick={closeDialog}>Cancel</Button>
-          <Button spinner={isLoading} hover disabled={!this.state.name || !this.state.kind}
-            onClick={this.postChaosExperiment}>Submit</Button>
+      return (
+        <div className={style['buttons-container']}>
+          <div className={style['form-button']}>
+            <Button inverted onClick={closeDialog}>Cancel</Button>
+            <Button spinner={isLoading} hover disabled={!this.state.name || !this.state.kind}
+              onClick={
+                this.handleExperimentSubmit
+              }>Submit</Button>
+          </div>
         </div>
-
-      </div>);
+      );
     };
 
   onInputCodeChange = (code) => {
+    this.setState({ validationErrorText: '' })
     const isValidCode = testJSON(code);
     if (!isValidCode) return; // Exit early if code is not valid JSON
 
@@ -171,45 +196,46 @@ export class ChaosExperimentForm extends React.Component {
         theme: 'vs'
       };
       return (
-        <div className={style['bottom']}>
-          {/* bottom */}
-          <div style={{
-            display: 'flex',
-            flexDirection: 'column',
-            flex: 1
-          }}>
-            <MonacoEditor
-              language='json'
-              value={JSON.stringify(this.state.yaml, null, '\t')}
-              options={options}
-              height='500px'
-              width='100%'
-              onChange={(code) => {
-                this.onInputCodeChange(code);
-              }}
-              scrollbar={{
+        <ErrorWrapper errorText={this.state.validationErrorText}>
+          <div className={style['bottom']}>
+            {/* bottom */}
+            <div style={{
+              display: 'flex',
+              flexDirection: 'column',
+              flex: 1
+            }}>
+              <MonacoEditor
+                language='json'
+                value={JSON.stringify(this.state.yaml, null, '\t')}
+                options={options}
+                height='500px'
+                width='100%'
+                onChange={(code) => {
+                  this.onInputCodeChange(code);
+                }}
+                scrollbar={{
                 // Subtle shadows to the left & top. Defaults to true.
-                useShadows: false,
-                // Render vertical arrows. Defaults to false.
-                verticalHasArrows: true,
-                // Render horizontal arrows. Defaults to false.
-                horizontalHasArrows: true,
-                // Render vertical scrollbar.
-                // Accepted values: 'auto', 'visible', 'hidden'.
-                // Defaults to 'auto'
-                vertical: 'visible',
-                // Render horizontal scrollbar.
-                // Accepted values: 'auto', 'visible', 'hidden'.
-                // Defaults to 'auto'
-                horizontal: 'visible',
-                verticalScrollbarSize: 17,
-                horizontalScrollbarSize: 17,
-                arrowSize: 30
-              }}
-            />
-
+                  useShadows: false,
+                  // Render vertical arrows. Defaults to false.
+                  verticalHasArrows: true,
+                  // Render horizontal arrows. Defaults to false.
+                  horizontalHasArrows: true,
+                  // Render vertical scrollbar.
+                  // Accepted values: 'auto', 'visible', 'hidden'.
+                  // Defaults to 'auto'
+                  vertical: 'visible',
+                  // Render horizontal scrollbar.
+                  // Accepted values: 'auto', 'visible', 'hidden'.
+                  // Defaults to 'auto'
+                  horizontal: 'visible',
+                  verticalScrollbarSize: 17,
+                  horizontalScrollbarSize: 17,
+                  arrowSize: 30
+                }}
+              />
+            </div>
           </div>
-        </div>
+        </ErrorWrapper>
       );
     };
 }
diff --git a/ui/src/features/components/ChaosExperimentForm/validator.js b/ui/src/features/components/ChaosExperimentForm/validator.js
new file mode 100644
index 000000000..d26573f5b
--- /dev/null
+++ b/ui/src/features/components/ChaosExperimentForm/validator.js
@@ -0,0 +1,73 @@
+
+const SCHEMA = {
+  type: 'object',
+  properties: {
+    apiVersion: { type: 'string' },
+    kind: { type: 'string' },
+    metadata: {
+      type: 'object',
+      properties: {
+        name: { type: 'string', required: true },
+        namespace: { type: 'string', required: true }
+      },
+      required: ['name', 'namespace']
+    },
+    spec: {
+      type: 'object',
+      properties: {
+        duration: {
+          type: 'string',
+          pattern: new RegExp('^[0-9]+(ms|s|m|h)$')
+        },
+        required: ['duration']
+      }
+    }
+  },
+  required: ['apiVersion', 'kind', 'metadata', 'spec']
+};
+
+const validateKubeObject = (jsonObject) => {
+  const validationError = validateProperty(jsonObject, SCHEMA);
+
+  if (validationError) {
+    return validationError;
+  }
+}
+
+function validateProperty (object, schema) {
+  for (const key in schema.properties) {
+    const propertySchema = schema.properties[key];
+
+    if (propertySchema.required && !object.hasOwnProperty(key)) {
+      return `Required property "${key}" is missing.`;
+    }
+
+    if (object.hasOwnProperty(key)) {
+      const propertyValue = object[key];
+      const { type, pattern, required } = propertySchema;
+
+      if (type === 'object' && typeof propertyValue !== 'object') {
+        return `Property "${key}" must be an object.`;
+      } else if (type === 'string' && typeof propertyValue !== 'string') {
+        return `Property "${key}" must be a string.`;
+      } else if (type === 'string' && typeof propertyValue === 'string' && required  && !propertyValue.trim().length) {
+        return `Property "${key}" must be a non empty string.`;
+      } else if (type === 'string' && pattern) {
+        if (!pattern.test(propertyValue)) {
+          return `Property "${key}"  value must be in supported pattern "${pattern}".`;
+        }
+      }
+
+      if (propertySchema.properties) {
+        const nestedValidationResult = validateProperty(propertyValue, propertySchema);
+        if (nestedValidationResult !== null) {
+          return `Invalid value for property "${key}": ${nestedValidationResult}`;
+        }
+      }
+    }
+  }
+
+  return null;
+}
+
+export default validateKubeObject;
diff --git a/ui/src/features/configurationColumn.js b/ui/src/features/configurationColumn.js
index 12cdf30e0..112d3e611 100644
--- a/ui/src/features/configurationColumn.js
+++ b/ui/src/features/configurationColumn.js
@@ -96,6 +96,14 @@ export const getColumns = ({ columnsNames, sortHeader = '', onSort, onReportView
         </TableHeader>
       ),
       accessor: 'kind'
+    }, {
+      id: 'duration',
+      Header: () => (
+        <TableHeader padding={'8px'} sortable={false}>
+          Duration
+        </TableHeader>
+      ),
+      accessor: 'duration'
     },
     {
       id: 'updated_at',
@@ -182,6 +190,20 @@ export const getColumns = ({ columnsNames, sortHeader = '', onSort, onReportView
       width: iconsWidth,
       className: css['center-flex']
     },
+    {
+      id: 'experiment_edit',
+      Header: () => (
+        <TableHeader sortable={false}>
+          Edit
+        </TableHeader>
+      ),
+      accessor: data => <ViewButton icon={faPen} onClick={(e) => {
+        e.stopPropagation();
+        onEdit(data)
+      }} />,
+      width: iconsWidth,
+      className: css['center-flex']
+    },
     {
       id: 'job_edit',
       Header: () => (
diff --git a/ui/src/features/get-chaos-experiments.js b/ui/src/features/get-chaos-experiments.js
index cbb0733da..6faf9dac1 100644
--- a/ui/src/features/get-chaos-experiments.js
+++ b/ui/src/features/get-chaos-experiments.js
@@ -17,7 +17,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', 'kind', 'created_at', 'raw', 'delete'];
+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.';
 
 class getChaosExperiments extends React.Component {
@@ -28,6 +28,7 @@ class getChaosExperiments extends React.Component {
       openNewTestDialog: false,
       deleteDialog: false,
       chaosExperimentToDelete: undefined,
+      chaosExperimentForEdit: undefined,
       createChaosExperiment: false,
       sortedChaosExperiments: [],
       sortHeader: ''
@@ -90,20 +91,24 @@ class getChaosExperiments extends React.Component {
       });
     };
 
+    onCreateExperiment = () => {
+      this.setState({
+        createChaosExperiment: true
+      })
+    }
+
+  onEdit = (data) => {
+    this.setState({ createChaosExperiment: true, chaosExperimentForEdit: data });
+  };
+
   onRawView = (data) => {
     this.setState({ openViewExperiment: data });
   };
 
-    closeCreateTest = () => {
-      this.setState({
-        createChaosExperiment: false,
-        chaosExperimentForView: null
-      });
-    };
-
   closeExperimentDialog = () => {
     this.setState({
-      openViewExperiment: false
+      openViewExperiment: false,
+      chaosExperimentForView: null
     });
   }
 
@@ -133,6 +138,7 @@ class getChaosExperiments extends React.Component {
         columnsNames,
         onReportView: this.onReportView,
         onRawView: this.onRawView,
+        onEdit: this.onEdit,
         onDelete: this.onDelete,
         onRunTest: this.onRunTest,
         onSort: this.onSort,
@@ -141,11 +147,9 @@ class getChaosExperiments extends React.Component {
       const error = this.props.chaosExperimentFailure || this.props.deleteChaosExperimentFailure;
       return (
         <Page title={'Chaos Experiments'} description={DESCRIPTION}>
-          <Button className={style['create-button']} onClick={() => {
-            this.setState({
-              createChaosExperiment: true
-            });
-          }}>Create Experiment</Button>
+          <Button
+            className={style['create-button']}
+            onClick={this.onCreateExperiment}>Create Experiment</Button>
           <ReactTableComponent
             onSearch={this.onSearch}
             rowHeight={'46px'}
@@ -165,7 +169,7 @@ class getChaosExperiments extends React.Component {
               closeDialog={this.closeExperimentDialog} /> : null}
 
           {this.state.createChaosExperiment &&
-            <ChaosExperimentForm closeDialog={this.closeCreateTest} />}
+            <ChaosExperimentForm closeDialog={this.closeExperimentDialog} chaosExperimentForEdit={this.state.chaosExperimentForEdit} />}
 
           {(this.state.deleteDialog && !this.props.deleteChaosExperimentSuccess)
             ? <DeleteDialog loader={this.props.processingDeleteTest}
diff --git a/ui/src/features/redux/reducers/chaosExperimentsReducer.js b/ui/src/features/redux/reducers/chaosExperimentsReducer.js
index ad782590f..64f9cfab2 100644
--- a/ui/src/features/redux/reducers/chaosExperimentsReducer.js
+++ b/ui/src/features/redux/reducers/chaosExperimentsReducer.js
@@ -17,7 +17,9 @@ export default function reduce (state = initialState, action = {}) {
   case Types.GET_CHAOS_EXPERIMENTS_SUCCESS:
     return state.set('chaosExperiments',
       action.chaosExperiments.map((chaosExperiment) => ({
-        ...chaosExperiment, kind: chaosExperiment.kubeObject.kind }
+        ...chaosExperiment,
+        kind: chaosExperiment.kubeObject.kind,
+        duration: chaosExperiment.kubeObject.spec.duration }
       )));
   case Types.GET_CHAOS_EXPERIMENTS_FAILURE:
     return state.set('chaosExperiment_error', action.error);

From 32bfaf2fa4c9a3f859ef48eb6d74992b659ade37 Mon Sep 17 00:00:00 2001
From: kerenfinkelstein <keren.filkenstein@payu.com>
Date: Sun, 24 Sep 2023 23:39:30 +0300
Subject: [PATCH 5/6] feat: add update and kubeObject validation

---
 ui/src/components/ErrorWrapper/index.js  | 2 +-
 ui/src/features/get-chaos-experiments.js | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/ErrorWrapper/index.js b/ui/src/components/ErrorWrapper/index.js
index 33035644a..0b278bb5d 100644
--- a/ui/src/components/ErrorWrapper/index.js
+++ b/ui/src/components/ErrorWrapper/index.js
@@ -7,7 +7,7 @@ const ErrorWrapper = (props) => {
   const hasError = !!errorText
   return (
     <span className={style['error-wrapper']}>
-      {React.cloneElement(children, { error: hasError })}
+      {React.cloneElement(children)}
       {hasError && (
         <div data-test='input-error' className={style['error-text']}>
           {errorText}
diff --git a/ui/src/features/get-chaos-experiments.js b/ui/src/features/get-chaos-experiments.js
index 6faf9dac1..6e6d6f55b 100644
--- a/ui/src/features/get-chaos-experiments.js
+++ b/ui/src/features/get-chaos-experiments.js
@@ -108,6 +108,8 @@ class getChaosExperiments extends React.Component {
   closeExperimentDialog = () => {
     this.setState({
       openViewExperiment: false,
+      createChaosExperiment: false,
+      chaosExperimentForEdit: null,
       chaosExperimentForView: null
     });
   }
@@ -169,7 +171,9 @@ class getChaosExperiments extends React.Component {
               closeDialog={this.closeExperimentDialog} /> : null}
 
           {this.state.createChaosExperiment &&
-            <ChaosExperimentForm closeDialog={this.closeExperimentDialog} chaosExperimentForEdit={this.state.chaosExperimentForEdit} />}
+            <ChaosExperimentForm
+              closeDialog={this.closeExperimentDialog}
+              chaosExperimentForEdit={this.state.chaosExperimentForEdit} />}
 
           {(this.state.deleteDialog && !this.props.deleteChaosExperimentSuccess)
             ? <DeleteDialog loader={this.props.processingDeleteTest}

From ec8644b26fea7ee30ffda9d9c79acb19f2945d64 Mon Sep 17 00:00:00 2001
From: kerenfinkelstein <keren.filkenstein@payu.com>
Date: Mon, 25 Sep 2023 12:48:42 +0300
Subject: [PATCH 6/6] feat: add update and kubeObject validation

---
 .../components/ChaosExperimentForm/index.js   | 68 +++++++++----------
 .../ChaosExperimentForm/validator.js          | 18 +++--
 2 files changed, 48 insertions(+), 38 deletions(-)

diff --git a/ui/src/features/components/ChaosExperimentForm/index.js b/ui/src/features/components/ChaosExperimentForm/index.js
index 5cd8dc390..7df25b31e 100644
--- a/ui/src/features/components/ChaosExperimentForm/index.js
+++ b/ui/src/features/components/ChaosExperimentForm/index.js
@@ -18,8 +18,6 @@ const API_VERSION = 'chaos-mesh.org/v1alpha1'
 
 export class ChaosExperimentForm extends React.Component {
   constructor (props) {
-    console.log(props)
-    debugger;
     super(props);
     if (props.chaosExperimentForEdit) {
       this.state = {
@@ -71,7 +69,7 @@ export class ChaosExperimentForm extends React.Component {
   }
 
   render () {
-    const { closeDialog } = this.props;
+    const { closeDialog, chaosExperimentForEdit } = this.props;
     const {
       name,
       kind
@@ -80,37 +78,39 @@ export class ChaosExperimentForm extends React.Component {
       <Modal onExit={closeDialog}>
         <h1>Create Chaos Experiment</h1>
         <div className={style['top']}>
-          <div className={style['top-inputs']}>
-            {/* left */}
-            <div className={style['input-container']}>
-              <TitleInput
-                className={style['inputContainer__titleInput']}
-                title={'Experiment Name'}>
-                <Input value={name} onChange={this.handleNameChange} />
-              </TitleInput>
+          {!chaosExperimentForEdit && (
+            <div className={style['top-inputs']}>
+              {/* left */}
+              <div className={style['input-container']}>
+                <TitleInput
+                  className={style['inputContainer__titleInput']}
+                  title={'Experiment Name'}>
+                  <Input value={name} onChange={this.handleNameChange} />
+                </TitleInput>
+              </div>
+              <div className={style['input-container']}>
+                <TitleInput
+                  className={style['inputContainer__titleInput']}
+                  title={'Api Version'}>
+                  <Input value={API_VERSION} disabled />
+                </TitleInput>
+              </div>
+              <div className={style['input-container']}>
+                <TitleInput
+                  className={style['inputContainer__titleInput']}
+                  title={'kind'}>
+                  <CustomDropdown
+                    list={CHAOS_EXPERIMENT_KINDS}
+                    value={kind}
+                    onChange={(value) => {
+                      this.handleKindChange(value);
+                    }}
+                    placeHolder={'Kind'}
+                  />
+                </TitleInput>
+              </div>
             </div>
-            <div className={style['input-container']}>
-              <TitleInput
-                className={style['inputContainer__titleInput']}
-                title={'Api Version'}>
-                <Input value={API_VERSION} disabled />
-              </TitleInput>
-            </div>
-            <div className={style['input-container']}>
-              <TitleInput
-                className={style['inputContainer__titleInput']}
-                title={'kind'}>
-                <CustomDropdown
-                  list={CHAOS_EXPERIMENT_KINDS}
-                  value={kind}
-                  onChange={(value) => {
-                    this.handleKindChange(value);
-                  }}
-                  placeHolder={'Kind'}
-                />
-              </TitleInput>
-            </div>
-          </div>
+          )}
         </div>
         {/* bottom */}
         {this.generateJavascriptEditor()}
@@ -255,7 +255,7 @@ function createChaosExperimentRequest (data) {
     yaml
   } = data;
   return {
-    name,
+    name: name || yaml.metadata.name,
     kubeObject: {
       kind: data.kind,
       apiVersion: API_VERSION,
diff --git a/ui/src/features/components/ChaosExperimentForm/validator.js b/ui/src/features/components/ChaosExperimentForm/validator.js
index d26573f5b..228a9e0a7 100644
--- a/ui/src/features/components/ChaosExperimentForm/validator.js
+++ b/ui/src/features/components/ChaosExperimentForm/validator.js
@@ -2,8 +2,14 @@
 const SCHEMA = {
   type: 'object',
   properties: {
-    apiVersion: { type: 'string' },
-    kind: { type: 'string' },
+    apiVersion: {
+      type: 'string',
+      pattern: new RegExp('^chaos-mesh\\.org\\/v1alpha1$')
+    },
+    kind: {
+      type: 'string',
+      options: ['PodChaos', 'DNSChaos', 'AWSChaos', 'HTTPChaos', 'StressChaos']
+    },
     metadata: {
       type: 'object',
       properties: {
@@ -44,18 +50,22 @@ function validateProperty (object, schema) {
 
     if (object.hasOwnProperty(key)) {
       const propertyValue = object[key];
-      const { type, pattern, required } = propertySchema;
+      const { type, pattern, required, options } = propertySchema;
 
       if (type === 'object' && typeof propertyValue !== 'object') {
         return `Property "${key}" must be an object.`;
       } else if (type === 'string' && typeof propertyValue !== 'string') {
         return `Property "${key}" must be a string.`;
-      } else if (type === 'string' && typeof propertyValue === 'string' && required  && !propertyValue.trim().length) {
+      } else if (type === 'string' && typeof propertyValue === 'string' && required && !propertyValue.trim().length) {
         return `Property "${key}" must be a non empty string.`;
       } else if (type === 'string' && pattern) {
         if (!pattern.test(propertyValue)) {
           return `Property "${key}"  value must be in supported pattern "${pattern}".`;
         }
+      } else if (type === 'string' && options) {
+        if (!options.includes(propertyValue)) {
+          return `Property "${key}"  value must be in supported options "[${options.join(', ')}]".`;
+        }
       }
 
       if (propertySchema.properties) {