Added modal for replica execution options CORWEB-82

The modal is opened when executing a replica from replica detail view.

Author: Sergiu Miclea

src/actions/MigrationActions/MigrationActions.js

@@ -119,7 +119,7 @@ MigrationActions.deleteReplica.listen((replica, callback = null) => {
     .catch(MigrationActions.deleteReplica.failed);
 })
 
-MigrationActions.executeReplica.listen((replica, callback = null, errorCallback = null) => {
+MigrationActions.executeReplica.listen((replica, callback = null, errorCallback = null, options = null) => {
   if (replica.type == 'replica') {
     // check if endpoints exists
     let connections = Reflux.GlobalState.connectionStore.connections
@@ -145,10 +145,11 @@ MigrationActions.executeReplica.listen((replica, callback = null, errorCallback
     }
     let projectId = Reflux.GlobalState.userStore.currentUser.project.id
 
-    let payload = {
-      execution: {
-        shutdown_instances: false
-      }
+    let payload = { execution: { shutdown_instances: false } }
+    if (options) {
+      options.forEach(o => {
+        payload.execution[o.field] = o.value || false
+      })
     }
 
     Api.sendAjaxRequest({

src/components/ReplicaExecutionOptions/ReplicaExecutionOptions.js

@@ -0,0 +1,107 @@
+/*
+ Copyright (C) 2017  Cloudbase Solutions SRL
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as
+ published by the Free Software Foundation, either version 3 of the
+ License, or (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+/* eslint-disable dot-notation */
+
+import React, { PropTypes } from 'react';
+import Reflux from 'reflux';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import s from './ReplicaExecutionOptions.scss';
+import Dropdown from '../NewDropdown';
+import Helper from "../Helper";
+
+class ReplicaExecutionOptions extends Reflux.Component {
+  static propTypes = {
+    onCancel: PropTypes.func.isRequired,
+    onExecute: PropTypes.func.isRequired
+  }
+
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      fields: [
+        {
+          field: 'shutdown_instances',
+          type: 'boolean'
+        }
+      ]
+    }
+  }
+
+  componentWillMount() {
+    super.componentWillMount.call(this)
+  }
+
+  componentWillUnmount() {
+    super.componentWillMount.call(this)
+  }
+
+  fieldChange(e, field) {
+    let fields = this.state.fields.concat([]);
+    fields.find(f => f.field === field).value = e.value === 'true'
+    this.setState({ fields: fields })
+  }
+
+  render() {
+    let booleanOptions = [{ label: 'Yes', value: 'true' }, { label: 'No', value: 'false' }]
+
+    let fields = this.state.fields.map((f, i) => {
+      if (f.type !== 'boolean') {
+        return null
+      }
+
+      return (
+        <div className="form-group" key={i}>
+          <label>{Helper.convertCloudFieldLabel(f.field)}</label>
+          <Dropdown
+            options={booleanOptions}
+            onChange={(e) => { this.fieldChange(e, f.field) }}
+            placeholder="Choose a value"
+            value={f.value ? booleanOptions[0] : booleanOptions[1]}
+          />
+        </div>
+      )
+    })
+    let modalBody = (
+      <div className={s.container}>
+        <div className={s.formContainer}>
+          {fields}
+        </div>
+        <div className={s.buttons}>
+          <button className="gray" onClick={() => this.props.onCancel()}>Cancel</button>
+          <button onClick={() => this.props.onExecute(this.state.fields)}>Execute</button>
+        </div>
+      </div>
+    )
+
+    return (
+      <div className={s.root}>
+        <div className={s.header}>
+          <h3>Replica Execution Options</h3>
+        </div>
+        <div className={s.images}>
+          <div className={s.replicaImage} />
+          <div className={s.arrowImage} />
+          <div className={s.executionImage} />
+        </div>
+        {modalBody}
+      </div>
+    )
+  }
+}
+
+export default withStyles(ReplicaExecutionOptions, s)

src/components/ReplicaExecutionOptions/ReplicaExecutionOptions.scss

@@ -0,0 +1,92 @@
+/*
+Copyright (C) 2017  Cloudbase Solutions SRL
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+@import '../variables.scss';
+
+.root {
+  :global(.Dropdown-control) {
+    text-align: left;
+  }
+}
+.header {
+  h3 {
+    font-weight: $weight-light;
+    font-size: 24px;
+    color: $gray-darker;
+    padding: 10px;
+    background-color: $gray-light;
+    text-align: center;
+    margin: 0;
+    border-radius: 4px 4px 0 0;
+  }
+}
+
+.formContainer {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -64px;
+  padding: 0 32px;
+  position: relative;
+  :global(.form-group) {
+    min-width: 224px;
+    margin-bottom: 16px;
+    margin-left: 64px;
+    &> label {
+      font-weight: 500;
+      font-size: 10px;
+      color: $task-gray-light;
+      letter-spacing: -0.33px;
+      text-transform: uppercase;
+    }
+  }
+}
+
+.buttons {
+  display: flex;
+  justify-content: space-between;
+  margin: 16px 32px 32px 32px;
+
+  button {
+    width: 224px;
+  }
+}
+
+.images {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 64px;
+    margin-bottom: 80px;
+    > div {
+        margin-right: 32px;
+    }
+    .replicaImage {
+        width: 96px;
+        height: 84px;
+    	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI5NnB4IiBoZWlnaHQ9Ijg0cHgiIHZpZXdCb3g9IjAgMCA5NiA4NCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5JY29uLVJlcGxpY2EtVkw8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iTW9kYWwtTmV3TWlncmF0aW9uIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQ0LjAwMDAwMCwgLTExOC4wMDAwMDApIiBzdHJva2U9IiNGOTE2NjEiIHN0cm9rZS13aWR0aD0iMiI+ICAgICAgICAgICAgPGcgaWQ9Ikljb24tUmVwbGljYS1WTCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTQ0LjAwMDAwMCwgMTEyLjAwMDAwMCkiPiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNODQuOTkxNjc3NywzOC4wNzY5NDM0IEM5MS4wMTI2NjQ4LDQwLjg0OTUxOTUgOTQuNTk0Njg1NSw0NC4zMTU3Nzc2IDk0LjU5NDY4NTUsNDguMDcyMjc3NSBDOTQuNTk0Njg1NSw1MS45MzAxOTc4IDkwLjgxNDk5LDU1LjQ4MjIxNjMgODQuNDk0NTY2Niw1OC4yOTA4ODgzIEM4Ny4zMTI4NDc1LDY4Ljc2NzI2NjkgODYuMzA3MzkzNCw3OC4xMzQzNDYgODAuODI2OTA0OSw4My43MTAxMjUgQzc3LjU3MzEwOTIsODcuMDIyNDgyNSA3Mi45MjQ4Mjk2LDg4LjcwMjM0OTEgNjcuMzc3MjA4OSw4OC42MTU0OTM1IEM2MS41OTk1NjgxLDg4LjUwNzkwMSA1NS4xNDYwNDg3LDg2LjQ5NzQwODggNDguNjg5NTA1OCw4Mi45NTg2NjI1IEM0Mi4yMzMzMDY3LDg2LjQ5NzA2ODYgMzUuNzc5OTAyNyw4OC41MDc1MTQ4IDMwLjAwMjM1NTYsODguNjE2MDc0OSBDMjQuNDY2ODYwOCw4OC43Mjg1OTI0IDE5LjgwODQ3NjMsODcuMDIzMDYzOSAxNi41NTI2NTk1LDgzLjcxMDcwNjQgQzExLjE2NDMzNTcsNzguMjI4Njk0NSAxMC4xMDE3OTk3LDY5LjA4MTgyNiAxMi43NDYwNjExLDU4LjgxOTA1NTUgQzUuNjgzNjUzNDIsNTUuOTM0MDE2MiAxLjQwNjkxNDQ1LDUyLjE3NjIyOCAxLjQwNjkxNDQ1LDQ4LjA3MjI3NzUgQzEuNDA2OTE0NDUsNDQuMDY2MzE1OCA1LjQ4MDA4OTk4LDQwLjM5MDQyNDYgMTIuMjQwNTUxMywzNy41MzM4NzQ5IEM5LjQ4MDQ3Nzc1LDI3LjEyODAzOSAxMC41MDUwNjk1LDE3LjgzMzk0NjIgMTUuOTU1MTEwMywxMi4yODkxNDQyIEMxOS4xMTU5NDA1LDkuMDcxNTM4MjggMjMuNTk0NDU2OSw3LjM3OTgyNzcgMjguOTI3ODUyNSw3LjM3OTgyNzcgQzI5LjA4NTQ4OTgsNy4zNzk4Mjc3IDI5LjI0NTE0ODEsNy4zODE4MDE2OSAyOS40MDQ4MDY0LDcuMzgzNzc1NjggQzM1LjM2MDk1MSw3LjQ5NDY5MjM2IDQyLjAzNTM4MjcsOS42Mjc5MDc2MSA0OC42OTA2NzMsMTMuMzcyOTY3MyBDNTUuMzQ1ODgyOCw5LjYyODI2ODIyIDYyLjAxOTk0NDcsNy40OTUyNjggNjcuOTc0NzU4MSw3LjM4NDM1NzA2IEM2OC4xMzQ0MTY0LDcuMzgyMzgzMDcgNjguMjk0MDc0Nyw3LjM4MDQwOTA4IDY4LjQ1MTcxMiw3LjM4MDQwOTA4IEM3My43ODUxMDc2LDcuMzgwNDA5MDggNzguMjYzNjIzOSw5LjA3MjExOTY2IDgxLjQyNDQ1NDEsMTIuMjg5NzI1NiBDODYuOTY5MDMxMSwxNy45MzA3MDc0IDg3LjkzMzMwMDIsMjcuNDUyMTc4MiA4NC45OTE2Nzc3LDM4LjA3Njk0MzQgWiBNMjUuNjcyNjA3NSwzMy42MzIxMDYgQzIwLjUzMDgxNDYsMzQuNjI3NjAwOSAxNS45NzU1NTk3LDM1Ljk1NTY5MzEgMTIuMjQwNTUxMywzNy41MzM4NzQ5IEMxMy4xOTU3OTU2LDQxLjEzNTI3MDMgMTQuNjA0MzcwNyw0NC44Njk4MzEzIDE2LjQzOTcxMjUsNDguNjI4MjE3MiBDMTguNzY4NjIyNyw0My42MDY2NDkyIDIxLjg2NzQ3NzcsMzguNTIwNTQ5NyAyNS42NzI2MDc1LDMzLjYzMjEwNiBaIE03Mi41NDk3Nzg1LDYyLjA1MTY4NCBDNzcuMTE3MzkwOCw2MS4wNDc4NzY0IDgxLjE1OTY1NCw1OS43NzI4NTc5IDg0LjQ5NDU2NjYsNTguMjkwODg4MyBDODMuNjQ4NDMzLDU1LjE0NTU2MSA4Mi40NTc2MzQ0LDUxLjkwMDI0MzMgODAuOTM5Nzk2Niw0OC42Mjc1MTYzIEM3OC43NDA2NDM4LDUzLjEzMDcxMDcgNzUuOTI4NzQ2Niw1Ny42NjgxMjY0IDcyLjU0OTc3ODUsNjIuMDUxNjg0IFogTTg0Ljk5MTY3NzcsMzguMDc2OTQzNCBDODEuNDI1NzM5MywzNi40MzQ4ODExIDc3LjAwNDMwNDYsMzUuMDM2MTM2MSA3MS45NjQ4MzA4LDMzLjk2NDUxODUgQzcwLjU1MDc1NDIsMzIuMTI5MTAxOSA2OS4wMzcyNzE5LDMwLjMyMDYxNTQgNjcuNDI3NzMzNywyOC41NTI4NTg5IEM2MS42NTY1ODc5LDIyLjIxMzEzNjggNTUuMTgyNzM3NSwxNy4wMjYxNzY3IDQ4LjY5MDY3MywxMy4zNzI5NjczIEM0Mi4xOTgwMDY2LDE3LjAyNjIwNzggMzUuNzIzMjgyNywyMi4yMTMzODE5IDI5Ljk1MTgzMDgsMjguNTUzNDQwMiBDMjguNDM5NzE3MiwzMC4yMTQxOTUyIDI3LjAxMjM4MzEsMzEuOTEwODk4NyAyNS42NzI2MDc1LDMzLjYzMjEwNiBDMzIuMzA2MDYwMywzMi4zNDc4MTMxIDM5LjkxNTcyOTgsMzEuNjE3MDg1NiA0Ny45OTk3OTQyLDMxLjYxNzA4NTYgQzU2Ljc1NzM1MjgsMzEuNjE3MDg1NiA2NC45NTg0MTI2LDMyLjQ3NDY0MDcgNzEuOTY0ODMwOCwzMy45NjQ1MTg1IEM3NS42NTIyNTgzLDM4Ljc1MDY1NyA3OC42NjM3MjUyLDQzLjcxOTkwMzcgODAuOTM5Nzk2Niw0OC42Mjc1MTYzIEM4Mi42ODMwMTgsNDUuMDU3OTMwMyA4NC4wNDEyMjc5LDQxLjUwOTg0NyA4NC45OTE2Nzc3LDM4LjA3Njk0MzQgWiBNNDguNjg5NTA1OCw4Mi45NTg2NjI1IEM1NS4zODE2MTkzLDc5LjI5MDk2MDQgNjIuMDc2NzM2LDczLjk4MTU5MjQgNjguMDI1MjgyOCw2Ny40NDY5OTE3IEM2OS42MzAwNDE3LDY1LjY4NDQ4NDMgNzEuMTM5MzE0Miw2My44ODE0ODg2IDcyLjU0OTc3ODUsNjIuMDUxNjg0IEM2NS40MTY2MzIsNjMuNjE5MzA5OSA1Ny4wMDIyNDE1LDY0LjUyNTQ5NTMgNDcuOTk5Nzk0Miw2NC41MjU0OTUzIEMzOS42ODA2MzExLDY0LjUyNTQ5NTMgMzEuODYzODU2NSw2My43NTE2NDgyIDI1LjA5NjM1OTYsNjIuMzk3MDkzNCBDMjEuNTk4NDg0NCw1Ny45MDY5NjM3IDE4LjY5NjQ3MzYsNTMuMjQ5NTc5NCAxNi40Mzk3MTI1LDQ4LjYyODIxNzIgQzE0LjgzNjg4MjUsNTIuMDg0MjE5NyAxMy41OTg3NDY4LDU1LjUwOTY1NTkgMTIuNzQ2MDYxMSw1OC44MTkwNTU1IEMxNi4yNDA5MDYsNjAuMjQ2NzIyNCAyMC40MTc5MDA3LDYxLjQ2MDY3MiAyNS4wOTYzNTk2LDYyLjM5NzA5MzQgQzI2LjQyOTM2Nyw2NC4xMDgyMzk2IDI3Ljg0ODkxMTcsNjUuNzk1MDk1NCAyOS4zNTIyNjA2LDY3LjQ0NjQxMDMgQzM1LjMwMTc0MzEsNzMuOTgwOTA5IDQxLjk5NzI0ODYsNzkuMjkwNzI0NCA0OC42ODk1MDU4LDgyLjk1ODY2MjUgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIj48L3BhdGg+ICAgICAgICAgICAgPC9nPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+);
+    }
+    .arrowImage {
+        width: 34px;
+        height: 22px;
+        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIzNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAzNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5BcnJvdy1CaWc8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4gICAgICAgIDxnIGlkPSJNb2RhbC1OZXdNaWdyYXRpb24iIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNzEuMDAwMDAwLCAtMTQ5LjAwMDAwMCkiIHN0cm9rZT0iIzYxNjg3MCIgc3Ryb2tlLXdpZHRoPSIyIj4gICAgICAgICAgICA8ZyBpZD0iQXJyb3ctQmlnIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNzIuMDAwMDAwLCAxNTAuMDAwMDAwKSI+ICAgICAgICAgICAgICAgIDxwb2x5bGluZSBpZD0iUGF0aC0xODEtQ29weS00IiBwb2ludHM9IjIyIDAgMzIgMTEgMjIgMjIiPjwvcG9seWxpbmU+ICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDEwIEwzMiwxMCIgaWQ9IkxpbmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2LjAwMDAwMCwgMTAuNTAwMDAwKSByb3RhdGUoLTE4MC4wMDAwMDApIHRyYW5zbGF0ZSgtMTYuMDAwMDAwLCAtMTAuNTAwMDAwKSAiPjwvcGF0aD4gICAgICAgICAgICA8L2c+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
+    }
+    .executionImage {
+        width: 98px;
+        height: 86px;
+        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI5OHB4IiBoZWlnaHQ9Ijg2cHgiIHZpZXdCb3g9IjAgMCA5OCA4NiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5QYWdlIDE8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtZGFzaGFycmF5PSIyLjY3MSw1LjM0Myw5LjM1LDUuMzQzIj4gICAgICAgIDxnIGlkPSJNb2RhbC1OZXdNaWdyYXRpb24iIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zNTEuMDAwMDAwLCAtMTE3LjAwMDAwMCkiIHN0cm9rZT0iIzAwNDRDQSIgc3Ryb2tlLXdpZHRoPSIxLjMiPiAgICAgICAgICAgIDxnIGlkPSJQYWdlLTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM1Mi4wMDAwMDAsIDExOC4wMDAwMDApIj4gICAgICAgICAgICAgICAgPHBhdGggZD0iTTQ3Ljk5ODY2OTMsMjUgQzIxLjUzMTM1ODksMjUgMCwzMi42MjU2NDQ0IDAsNDIuMDAwNDQ0OSBDMCw1MS4zNzUyNDUzIDIxLjUzMTM1ODksNTkgNDcuOTk4NjY5Myw1OSBDNzQuNDY2ODY2OSw1OSA5Niw1MS4zNzUyNDUzIDk2LDQyLjAwMDQ0NDkgQzk2LDMyLjYyNTY0NDQgNzQuNDY2ODY2OSwyNSA0Ny45OTg2NjkzLDI1IiBpZD0iU3Ryb2tlLTEiPjwvcGF0aD4gICAgICAgICAgICAgICAgPHBhdGggZD0iTTI3LjgyODI0NSwwIEMyMi4zMDExNjQ3LDAgMTcuNjU4NTI0NCwxLjc0ODc0MzYzIDE0LjM4NDA0MzksNS4wNzYxNjQ2OCBDMy40NjAxODQyNSwxNi4xNjI1MjI2IDkuNjg5NjQwMTUsNDEuNzQ4MTM3NyAyOC4yNjgyMzM4LDYyLjEwODAwMTIgQzQwLjM4MjY1MTMsNzUuMzgyOTU5OCA1NS40ODIzODgzLDgzLjc2OTYyOCA2Ny42NzcxMjgzLDgzLjk5NjY3OTcgQzczLjQyNjQzNDIsODQuMDg2NjEgNzguMjQzOTk5MSw4Mi4zNDg1NTEyIDgxLjYxNjY1MTUsNzguOTI0OTY3IEM5Mi41Mzk2MTg3LDY3LjgzNzcxODcgODYuMzEwMTYyOCw0Mi4yNTIxMDM2IDY3LjcyOTc4NDIsMjEuODkyMjQwMSBDNTUuNjE3MTUxNiw4LjYxNzI4MTQ4IDQwLjUxNzQxNDYsMC4yMzA2MTMzNCAyOC4zMjI2NzQ2LDAuMDAzNTYxNTk1OTggQzI4LjE1NjY3NDcsMC4wMDE3ODA3OTc5OSAyNy45OTI0NTk5LDAgMjcuODI4MjQ1LDAiIGlkPSJTdHJva2UtMyI+PC9wYXRoPiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNjkuMTcxNDUzNywwIEM2OS4wMDgxMzA0LDAgNjguODQzMDIyMSwwLjAwMjY3MTEyOTgxIDY4LjY3NzAyMTQsMC4wMDQ0NTE4ODMwMiBDNTYuNDg0ODkxMywwLjIzMTQ5NzkxNyA0MS4zODMyODU3LDguNjE3OTU1MTYgMjkuMjcwNTg2MSwyMS44OTI1OCBDMTAuNjkwMTA0Nyw0Mi4yNTE5MzE0IDQuNDYwNjE0MjksNjcuODM2MDEyOCAxNS4zODI3NDk0LDc4LjkyMjk4MjIgQzE4Ljc1ODA5NzksODIuMzQ3MzcwNyAyMy41ODU1MDY4LDg0LjExMTIwNjcgMjkuMzIzMjQyMiw4My45OTQ1Njc0IEM0MS41MTcxNTczLDgzLjc2NjYzMSA1Ni42MTY5Nzc5LDc1LjM4MTk1NDUgNjguNzI5Njc3NSw2Mi4xMDczMjk3IEM4Ny4zMTAxNTksNDEuNzQ3OTc4MiA5My41Mzk2NDkzLDE2LjE2MzAwNjUgODIuNjE2NjIxNyw1LjA3NjAzNzAyIEM3OS4zNDEyMzA2LDEuNzQ5NTkwMDMgNzQuNjk4NTY0NiwwIDY5LjE3MTQ1MzcsMCIgaWQ9IlN0cm9rZS01Ij48L3BhdGg+ICAgICAgICAgICAgPC9nPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+);
+    }
+}

src/components/ReplicaExecutionOptions/package.json

@@ -0,0 +1,6 @@
+{
+    "name": "ReplicaExecutionOptions",
+    "version": "0.0.0",
+    "private": true,
+    "main": "./ReplicaExecutionOptions.js"
+}

src/components/ReplicaExecutions/ReplicaExecutions.js

@@ -16,6 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 /* eslint-disable no-trailing-spaces */
 import React, { Component, PropTypes } from 'react';
+import Modal from 'react-modal'
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './ReplicaExecutions.scss';
 import Helper from '../Helper';
@@ -27,6 +28,7 @@ import Tasks from '../Tasks';
 import ExecutionsTimeline from '../ExecutionsTimeline';
 import { tasksPollTimeout } from '../../config'
 import ConfirmationDialog from '../ConfirmationDialog'
+import ReplicaExecutionOptions from '../ReplicaExecutionOptions'
 
 
 const title = 'Replica Executions';
@@ -48,6 +50,7 @@ class ReplicaExecutions extends Component {
     this.state = {
       executionRef: null,
       tasks: null,
+      showExecutionModal: false,
       deleteConfirmationDialog: {
         visible: false,
         message: "Are you sure?",
@@ -117,8 +120,17 @@ class ReplicaExecutions extends Component {
     })
   }
 
-  executeNow() {
-    MigrationActions.executeReplica(this.props.replica)
+  showExecutionModal() {
+    this.setState({ showExecutionModal: true })
+  }
+
+  closeExecutionModal() {
+    this.setState({ showExecutionModal: false })
+  }
+
+  executeNow(options) {
+    this.closeExecutionModal()
+    MigrationActions.executeReplica(this.props.replica, null, null, options)
     clearInterval(this.timeout)
     this.timeout = setInterval((e) => this.pollTasks(e), tasksPollTimeout)
   }
@@ -194,6 +206,28 @@ class ReplicaExecutions extends Component {
   }
 
   render() {
+    let modalStyle = {
+      overlay: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(164, 170, 181, 0.69)"
+      },
+      content: {
+        padding: "0px",
+        borderRadius: "4px",
+        border: "none",
+        bottom: "auto",
+        width: "576px",
+        height: "auto",
+        left: "50%",
+        top: "120px",
+        marginLeft: "-288px"
+      }
+    }
+
     if (this.props.replica) {
       if (this.props.replica.executions.length && this.state.executionRef) {
         let executionBtn = <button className="wire red" onClick={(e) => this.deleteExecution(e)}>Delete</button>
@@ -259,9 +293,20 @@ class ReplicaExecutions extends Component {
                 <span className="icon"></span>
                 <h3>It looks like there are no executions in this replica</h3>
                 <p>This replica has not been executed yet</p>
-                <button onClick={(e) => this.executeNow(e)}>Execute Now</button>
+                <button onClick={this.showExecutionModal.bind(this)}>Execute Now</button>
               </div>
             </div>
+            <Modal
+              isOpen={this.state.showExecutionModal}
+              style={modalStyle}
+              onRequestClose={this.closeExecutionModal.bind(this)}
+              contentLabel="Replica Execution Options"
+            >
+              <ReplicaExecutionOptions
+                onCancel={this.closeExecutionModal.bind(this)}
+                onExecute={this.executeNow.bind(this)}
+              />
+            </Modal>
           </div>
         )
       }