- Adds complete endpoint edit functionality

src/actions/ConnectionsActions/ConnectionsActions.js

@@ -18,88 +18,29 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import Reflux from 'reflux';
 import Api from '../../components/ApiCaller';
-import {servicesUrl, useSecret} from '../../config';
+import { servicesUrl, useSecret } from '../../config';
 
 let ConnectionsActions = Reflux.createActions({
   loadConnections: { children: ['completed', 'failed'] },
   loadConnectionDetail: { children: ['completed', 'failed'] },
   loadProviders: { children: ['completed', 'failed'] },
   loadInstances: { children: ['completed', 'failed'] },
+  newEndpoint: { children: ['success', 'failed'] },
+  saveEndpoint: { children: ['success', 'failed'] },
+  editEndpoint: { children: ['success', 'failed'] },
+  saveEditEndpoint: { children: ['success', 'failed'] },
+  validateConnection: { children: ['success', 'failed'] },
+  deleteConnection: { children: ['completed', 'failed'] },
   loadProviderType: {},
   assignConnectionProvider: {},
   updateProvider: {},
-  deleteConnection: { children: ['completed', 'failed'] },
   getSourceClouds: {},
   getTargetClouds: {},
   resetSelections: {},
-  newConnection: { children: ['success', 'failed'] },
-  saveEndpoint: { children: ['success', 'failed'] },
-  editEndpoint: { children: ['success', 'failed'] },
-  setConnection: {},
-  validateConnection: { children: ['success', 'failed'] }
+  setConnection: {}
 })
 
 
-ConnectionsActions.loadProviders.listen(() => {
-  let projectId = Reflux.GlobalState.userStore.currentUser.project.id
-  Api.sendAjaxRequest({
-    url: `${servicesUrl.coriolis}/${projectId}/providers`,
-    method: "GET"
-  }).then(response => {
-    ConnectionsActions.loadProviders.completed(response)
-    }, ConnectionsActions.loadProviders.failed)
-    .catch(ConnectionsActions.loadProviders.failed);
-})
-
-ConnectionsActions.saveEndpoint.listen((data, secretRef) => {
-  let projectId = Reflux.GlobalState.userStore.currentUser.project.id
-  let payload = null
-  if (useSecret) {
-    payload = {
-      endpoint: {
-        name: data.name,
-        description: data.description,
-        type: data.type,
-        connection_info: {
-          secret_ref: secretRef
-        }
-      }
-    }
-  } else {
-    payload = { endpoint: data }
-  }
-
-  Api.sendAjaxRequest({
-    url: `${servicesUrl.coriolis}/${projectId}/endpoints`,
-    method: "POST",
-    data: payload
-  }).then(ConnectionsActions.saveEndpoint.success, ConnectionsActions.saveEndpoint.failed)
-    .catch(ConnectionsActions.saveEndpoint.failed);
-})
-
-ConnectionsActions.newConnection.listen((data) => {
-  if (useSecret) {
-    let barbicanPayload = {
-      payload: JSON.stringify(data.connection_info),
-      payload_content_type: "text/plain",
-      content_types: {
-        default: "text/plain"
-      }
-    }
-
-    Api.sendAjaxRequest({
-      url: servicesUrl.barbican + "/v1/secrets",
-      method: "POST",
-      data: barbicanPayload
-    }).then((response) => {
-        ConnectionsActions.newConnection.success(response, data)
-      }, ConnectionsActions.newConnection.failed)
-      .catch(ConnectionsActions.newConnection.failed);
-  } else {
-    ConnectionsActions.saveEndpoint(data)
-  }
-});
-
 ConnectionsActions.loadConnections.listen(() => {
   let projectId = Reflux.GlobalState.userStore.currentUser.project.id
   if (projectId) {
@@ -116,28 +57,18 @@ ConnectionsActions.loadConnections.shouldEmit = () => {
   return typeof projectId !== "undefined"
 }
 
-ConnectionsActions.deleteConnection.listen((connection) => {
+ConnectionsActions.loadProviders.listen(() => {
   let projectId = Reflux.GlobalState.userStore.currentUser.project.id
-
   Api.sendAjaxRequest({
-    url: `${servicesUrl.coriolis}/${projectId}/endpoints/${connection.id}`,
-    method: "DELETE"
-  }).then(() => {
-    if (connection.connection_info && connection.connection_info.secret_ref) {
-      let uuidIndex = connection.connection_info.secret_ref.lastIndexOf("/")
-      let uuid = connection.connection_info.secret_ref.substr(uuidIndex + 1)
-      Api.sendAjaxRequest({
-        url: servicesUrl.barbican + "/v1/secrets/" + uuid,
-        method: "DELETE"
-      }).then(ConnectionsActions.deleteConnection.completed(connection), ConnectionsActions.deleteConnection.failed)
-    } else {
-      ConnectionsActions.deleteConnection.completed(connection)
-    }
-  }, ConnectionsActions.deleteConnection.failed)
-  .catch(ConnectionsActions.deleteConnection.failed);
+    url: `${servicesUrl.coriolis}/${projectId}/providers`,
+    method: "GET"
+  }).then(response => {
+    ConnectionsActions.loadProviders.completed(response)
+  }, ConnectionsActions.loadProviders.failed)
+    .catch(ConnectionsActions.loadProviders.failed);
 })
 
-ConnectionsActions.editEndpointSecret.listen((data) => {
+ConnectionsActions.newEndpoint.listen((data) => {
   if (useSecret) {
     let barbicanPayload = {
       payload: JSON.stringify(data.connection_info),
@@ -152,31 +83,25 @@ ConnectionsActions.editEndpointSecret.listen((data) => {
       method: "POST",
       data: barbicanPayload
     }).then((response) => {
-      ConnectionsActions.newConnection.success(response, data)
-    }, ConnectionsActions.newConnection.failed)
-      .catch(ConnectionsActions.newConnection.failed);
+      ConnectionsActions.newEndpoint.success(response, data)
+    }, ConnectionsActions.newEndpoint.failed)
+      .catch(ConnectionsActions.newEndpoint.failed);
   } else {
     ConnectionsActions.saveEndpoint(data)
   }
 });
 
-ConnectionsActions.editEndpoint.listen((connection, data) => {
+ConnectionsActions.saveEndpoint.listen((data, secretRef) => {
   let projectId = Reflux.GlobalState.userStore.currentUser.project.id
   let payload = null
-  if (connection.connection_info && connection.connection_info.secret_ref) {
-    let uuidIndex = connection.connection_info.secret_ref.lastIndexOf("/")
-    let uuid = connection.connection_info.secret_ref.substr(uuidIndex + 1)
-
-    Api.sendAjaxRequest({
-      url: servicesUrl.barbican + "/v1/secrets/" + uuid,
-      method: "POST"
-    })
+  if (useSecret) {
     payload = {
       endpoint: {
         name: data.name,
         description: data.description,
+        type: data.type,
         connection_info: {
-          secret_ref: connection.connection_info.secret_ref
+          secret_ref: secretRef
         }
       }
     }
@@ -185,46 +110,65 @@ ConnectionsActions.editEndpoint.listen((connection, data) => {
   }
 
   Api.sendAjaxRequest({
-    url: `${servicesUrl.coriolis}/${projectId}/endpoints/${connection.id}`,
-    method: "PUT",
+    url: `${servicesUrl.coriolis}/${projectId}/endpoints`,
+    method: "POST",
     data: payload
-  }).then(ConnectionsActions.editEndpoint.success, ConnectionsActions.editEndpoint.failed)
-    .catch(ConnectionsActions.editEndpoint.failed);
+  }).then(ConnectionsActions.saveEndpoint.success, ConnectionsActions.saveEndpoint.failed)
+    .catch(ConnectionsActions.saveEndpoint.failed);
 })
 
-ConnectionsActions.editEndpoint.listen((connection, data) => {
-  let projectId = Reflux.GlobalState.userStore.currentUser.project.id
-  let payload = null
+ConnectionsActions.editEndpoint.listen((connection, data, callback = null) => {
   if (connection.connection_info && connection.connection_info.secret_ref) {
     let uuidIndex = connection.connection_info.secret_ref.lastIndexOf("/")
     let uuid = connection.connection_info.secret_ref.substr(uuidIndex + 1)
-
     Api.sendAjaxRequest({
       url: servicesUrl.barbican + "/v1/secrets/" + uuid,
-      method: "POST"
+      method: "DELETE"
     })
-    payload = {
-      endpoint: {
-        name: data.name,
-        description: data.description,
-        connection_info: {
-          secret_ref: connection.connection_info.secret_ref
-        }
+    let barbicanPayload = {
+      payload: JSON.stringify(data.connection_info),
+      payload_content_type: "text/plain",
+      content_types: {
+        default: "text/plain"
       }
     }
+
+    Api.sendAjaxRequest({
+      url: servicesUrl.barbican + "/v1/secrets",
+      method: "POST",
+      data: barbicanPayload
+    }).then((response) => {
+      ConnectionsActions.editEndpoint.success(response, connection, data, callback)
+    }, ConnectionsActions.editEndpoint.failed)
+      .catch(ConnectionsActions.editEndpoint.failed);
   } else {
-    payload = { endpoint: data }
+    ConnectionsActions.saveEditEndpoint(connection, data, callback)
+  }
+});
+
+ConnectionsActions.saveEditEndpoint.listen((connection, data, callback = null) => {
+  let projectId = Reflux.GlobalState.userStore.currentUser.project.id
+  let payload = {
+    endpoint: {
+      name: data.name,
+      description: data.description,
+      connection_info: data.connection_info
+    }
   }
 
   Api.sendAjaxRequest({
     url: `${servicesUrl.coriolis}/${projectId}/endpoints/${connection.id}`,
     method: "PUT",
     data: payload
-  }).then(ConnectionsActions.editEndpoint.success, ConnectionsActions.editEndpoint.failed)
-    .catch(ConnectionsActions.editEndpoint.failed);
+  }).then((response) => {
+    ConnectionsActions.saveEditEndpoint.success(response)
+    if (callback) {
+      callback()
+    }
+  }, ConnectionsActions.saveEditEndpoint.failed)
+    .catch(ConnectionsActions.saveEditEndpoint.failed);
 })
 
-
 ConnectionsActions.validateConnection.listen((endpoint, callback) => {
   let projectId = Reflux.GlobalState.userStore.currentUser.project.id
   Api.sendAjaxRequest({
@@ -240,4 +184,26 @@ ConnectionsActions.validateConnection.listen((endpoint, callback) => {
     .catch(ConnectionsActions.validateConnection.failed);
 })
 
+
+ConnectionsActions.deleteConnection.listen((connection) => {
+  let projectId = Reflux.GlobalState.userStore.currentUser.project.id
+
+  Api.sendAjaxRequest({
+    url: `${servicesUrl.coriolis}/${projectId}/endpoints/${connection.id}`,
+    method: "DELETE"
+  }).then(() => {
+    if (connection.connection_info && connection.connection_info.secret_ref) {
+      let uuidIndex = connection.connection_info.secret_ref.lastIndexOf("/")
+      let uuid = connection.connection_info.secret_ref.substr(uuidIndex + 1)
+      Api.sendAjaxRequest({
+        url: servicesUrl.barbican + "/v1/secrets/" + uuid,
+        method: "DELETE"
+      }).then(ConnectionsActions.deleteConnection.completed(connection), ConnectionsActions.deleteConnection.failed)
+    } else {
+      ConnectionsActions.deleteConnection.completed(connection)
+    }
+  }, ConnectionsActions.deleteConnection.failed)
+    .catch(ConnectionsActions.deleteConnection.failed);
+})
+
 export default ConnectionsActions;

src/components/AddCloudConnection/AddCloudConnection.js

@@ -66,7 +66,7 @@ class AddCloudConnection extends Reflux.Component {
       this.state.allClouds.forEach(item => {
         if (item.name === this.props.connection.type) {
           let credentials = this.props.connection.credentials
-          for (var i in credentials) {
+          for (let i in credentials) {
             credentials[i] = credentials[i] + ""
           }
           this.setState({
@@ -113,7 +113,7 @@ class AddCloudConnection extends Reflux.Component {
         }
       }
       if (this.props.type == "new") {
-        ConnectionsActions.newConnection({
+        ConnectionsActions.newEndpoint({
           name: this.state.connectionName,
           description: this.state.description,
           type: this.state.currentCloud.name,
@@ -124,8 +124,12 @@ class AddCloudConnection extends Reflux.Component {
         ConnectionsActions.editEndpoint(this.props.connection, {
           name: this.state.connectionName,
           description: this.state.description,
-          type: this.state.currentCloud.name,
           connection_info: credentials
+        }, () => {
+          this.props.updateHandle({
+            name: this.state.connectionName,
+            description: this.state.description
+          })
         })
         this.props.closeHandle()
       }
@@ -146,13 +150,10 @@ class AddCloudConnection extends Reflux.Component {
         } else {
           currentCloudData[field.name] = ""
         }
-      } else {
-
       }
       if (field.required) {
         requiredFields.push(field.name)
       }
-
     })
 
     this.setState({
@@ -377,7 +378,7 @@ class AddCloudConnection extends Reflux.Component {
     } else {
       return (
         <div className={s.connecting}>
-          <LoadingIcon/>
+          <LoadingIcon />
           <div className={s.text}>Connecting ...</div>
         </div>)
     }

src/components/CloudConnectionDetail/CloudConnectionDetail.js

@@ -19,9 +19,9 @@ import React, { Component, PropTypes } from 'react';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './CloudConnectionDetail.scss';
 import Moment from 'react-moment';
-import TextTruncate from 'react-text-truncate';
-import LoadingIcon from '../LoadingIcon'
-import {defaultLabels} from '../../config'
+import LoadingIcon from '../LoadingIcon';
+import { defaultLabels } from '../../config';
+import Helper from '../Helper';
 
 const title = 'connection details';
 
@@ -34,10 +34,6 @@ class CloudConnectionDetail extends Component {
     onSetTitle: PropTypes.func.isRequired,
   };
 
-  componentWillMount() {
-    this.context.onSetTitle(title);
-  }
-
   constructor(props) {
     super(props)
     this.state = {
@@ -45,6 +41,10 @@ class CloudConnectionDetail extends Component {
     }
   }
 
+  componentWillMount() {
+    this.context.onSetTitle(title);
+  }
+
   componentWillReceiveProps(newProps) {
     this.setState({ fields: this.processProps(newProps) })
   }
@@ -52,7 +52,7 @@ class CloudConnectionDetail extends Component {
   processProps(props) {
     let fields = []
     if (props.connection.credentials) {
-      for (var fieldName in props.connection.credentials) {
+      for (let fieldName in props.connection.credentials) {
         let value = props.connection.credentials[fieldName]
         if (value.value) { // if dropdown
           value = value.value
@@ -83,7 +83,7 @@ class CloudConnectionDetail extends Component {
         )
       )
     } else {
-      return <LoadingIcon/>
+      return <LoadingIcon />
     }
   }
 

src/components/CloudConnectionsView/CloudConnectionsView.js

@@ -116,6 +116,17 @@ class CloudConnectionsView extends Component {
 
   closeModal() {
     this.setState({ showModal: false })
+    let connection = this.props.connections.filter((item => item.id === this.props.connectionId))[0]
+
+    this.setState({ connection: connection })
+  }
+
+  updateItem(itemAttrs) {
+    let endpoint = this.state.connection
+    for (let i in itemAttrs) {
+      endpoint[i] = itemAttrs[i]
+    }
+    this.setState({ connection: endpoint })
   }
 
   goBack() {
@@ -198,6 +209,7 @@ class CloudConnectionsView extends Component {
             <AddCloudConnection
               closeHandle={(e) => this.closeModal(e)}
               addHandle={(e) => this.closeModal(e)}
+              updateHandle={(e) => this.updateItem(e)}
               connection={item}
               type="edit"
             />

src/stores/ConnectionsStore/ConnectionsStore.js

@@ -176,11 +176,17 @@ class ConnectionsStore extends Reflux.Store
     }, this)
   }
 
-  onNewConnectionSuccess(response, data)
+  onNewEndpointSuccess(response, data)
   {
     ConnectionsActions.saveEndpoint(data, response.data.secret_ref)
   }
 
+  onEditEndpointSuccess(response, connection, data, callback)
+  {
+    data.connection_info = { secret_ref: response.data.secret_ref }
+    ConnectionsActions.saveEditEndpoint(connection, data, callback)
+  }
+
   onSaveEndpointSuccess(response) {
     let connections = this.state.connections
     connections.push(response.data.endpoint)
@@ -188,6 +194,16 @@ class ConnectionsStore extends Reflux.Store
     ConnectionsActions.assignConnectionProvider()
   }
 
+  onSaveEditEndpointSuccess(response) {
+    let connections = this.state.connections
+    connections.forEach(connection => {
+      if (connection.id == response.data.endpoint.id) {
+        connection = response.data.endpoint
+      }
+    })
+    this.setState({connections: connections})
+  }
+
   onLoadConnectionsCompleted(data) {
     let connections = []
     if (data.data.endpoints.length) {

src/stores/NotificationsStore/NotificationsStore.js

@@ -36,7 +36,7 @@ class NotificationsStore extends Reflux.Store
     }
   }
 
-  onLoginScopeSuccess(response) {
+  onLoginScopeSuccess() {
     let notifications = [{
       message: "Signed in",
       type: 'success'
@@ -44,7 +44,7 @@ class NotificationsStore extends Reflux.Store
     this.setState({ notifications: notifications })
   }
 
-  onTokenLoginFailed(response) {
+  onTokenLoginFailed() {
     let notifications = [
       {
         message: "Session expired, please sign in",
@@ -54,7 +54,7 @@ class NotificationsStore extends Reflux.Store
     this.setState({ notifications: notifications })
   }
 
-  onLogout(response) {
+  onLogout() {
     let notifications = [
       {
         message: "You have been signed out",
@@ -64,7 +64,7 @@ class NotificationsStore extends Reflux.Store
     this.setState({ notifications: notifications })
   }
 
-  onSaveEndpoint(response) {
+  onSaveEndpoint() {
     let notifications = [{
       title: "New Connection",
       message: "Connection added successfully",
@@ -148,7 +148,7 @@ class NotificationsStore extends Reflux.Store
     this.setState({ notifications: notifications })
   }
 
-  onLoginFailed(response) {
+  onLoginFailed() {
     let notifications = [{
       message: "Login failed",
       type: 'error'
@@ -209,14 +209,56 @@ class NotificationsStore extends Reflux.Store
     this.setState({ notifications: notifications })
   }
 
-  onNotify(message, type = "info", title = null, callback = null) {
-    this.setState({notifications: [
-      {
-        message: message,
-        type: type,
-        title: title
-      }
-    ]})
+  onNewEndpoint() {
+    let notifications = [{
+      message: "Saving endpoint...",
+      type: 'info'
+    }]
+    this.setState({ notifications: notifications })
+  }
+
+  onEditEndpoint() {
+    let notifications = [{
+      message: "Saving endpoint...",
+      type: 'info'
+    }]
+    this.setState({ notifications: notifications })
+  }
+
+  onEditEndpointFailed() {
+    let notifications = [{
+      message: "Could not save endpoint",
+      type: 'error'
+    }]
+    this.setState({ notifications: notifications })
+  }
+
+  onSaveEditEndpointSuccess() {
+    let notifications = [{
+      message: "Endpoint saved!",
+      type: 'success'
+    }]
+    this.setState({ notifications: notifications })
+  }
+
+  onSaveEditEndpointFailed() {
+    let notifications = [{
+      message: "Could not save endpoint",
+      type: 'error'
+    }]
+    this.setState({ notifications: notifications })
+  }
+
+  onNotify(message, type = "info", title = null) {
+    this.setState({
+      notifications: [
+        {
+          message: message,
+          type: type,
+          title: title
+        }
+      ]
+    })
   }
 
   onMarkAsRead() {
@@ -234,7 +276,7 @@ class NotificationsStore extends Reflux.Store
   }
 
   onRemoveNotification() {
-    this.setState({notifications: []})
+    this.setState({ notifications: [] })
   }
 
   onSwitchProject() {