add stop/delete network

src/_services/network.service.js

@@ -8,6 +8,7 @@ export const networkService = {
     startNetwork,
     getStatusesByNetworkId,
     getNodesByNetworkId,
+    stopNetwork,
     deleteNetwork
 };
 
@@ -37,6 +38,11 @@ function getNodesByNetworkId(userId, networkId, messages, errors) {
     return fetch(`${config.apiUrl}/users/${userId}/networks/${networkId}/nodes`, util.getWithAuth()).then(util.handleCrudResponse(messages, errors));
 }
 
-function deleteNetwork(userId, networkId, messages, errors) {
+function stopNetwork(userId, networkId, messages, errors) {
     return fetch(`${config.apiUrl}/users/${userId}/networks/${networkId}/actions/stop`, util.postWithAuth()).then(util.handleCrudResponse(messages, errors));
 }
+
+// deleting network is not allowed via API, instead we delete the AccountPlan, which in turn deletes the network
+function deleteNetwork(userId, networkId, messages, errors) {
+    return fetch(`${config.apiUrl}/users/${userId}/plans/${networkId}`, util.deleteWithAuth()).then(util.handleCrudResponse(messages, errors));
+}

src/_store/networks.module.js

@@ -69,12 +69,21 @@ const actions = {
             );
     },
 
+    stopNetwork({ commit }, {userId, networkId, messages, errors}) {
+        commit('stopNetworkRequest', id);
+        networkService.stopNetwork(userId, networkId, messages, errors)
+            .then(
+                network => commit('stopNetworkSuccess', network),
+                error => commit('stopNetworkFailure', { networkId, error: error.toString() })
+            );
+    },
+
     deleteNetwork({ commit }, {userId, networkId, messages, errors}) {
-        commit('deleteRequest', id);
+        commit('deleteNetworkRequest', id);
         networkService.deleteNetwork(userId, networkId, messages, errors)
             .then(
-                network => commit('deleteSuccess', network),
-                error => commit('deleteFailure', { networkId, error: error.toString() })
+                network => commit('deleteNetworkSuccess', network),
+                error => commit('deleteNetworkFailure', { networkId, error: error.toString() })
             );
     },
 
@@ -154,21 +163,33 @@ const mutations = {
         state.error = { error };
     },
 
-    deleteRequest(state, id) {
+    stopNetworkRequest(state, id) {
+        state.loading.stopping = true;
+    },
+    stopNetworkSuccess(state, id) {
+        state.loading.stopping = false;
+    },
+    stopNetworkFailure(state, { id, error }) {
+        state.loading.stopping = false;
+        state.error = error;
+    },
+
+    deleteNetworkRequest(state, id) {
         state.loading.deleting = true;
     },
-    deleteSuccess(state, id) {
+    deleteNetworkSuccess(state, id) {
         state.loading.deleting = false;
         // remove deleted network from state
         if (state.networks) {
             state.networks = state.networks.filter(network => (network.uuid !== id && network.name !== id))
         }
     },
-    deleteFailure(state, { id, error }) {
+    deleteNetworkFailure(state, { id, error }) {
         state.loading.deleting = false;
-        // remove 'deleting:true' property and add 'deleteError:[error]' property to network
+        // remove 'deleting:true' property and add 'deleteNetworkError:[error]' property to network
         state.error = error;
     },
+
     getNearestRegionsRequest(state) {
         state.loading.nearestRegions = true;
     },

src/account/NetworksPage.vue

@@ -11,7 +11,7 @@
                     <th nowrap="nowrap">{{messages.label_field_networks_timezone}}</th>
                     <th nowrap="nowrap">{{messages.label_field_networks_object_state}}</th>
                     <th nowrap="nowrap">{{messages.label_field_networks_action_view}}</th>
-                    <th nowrap="nowrap">{{messages.label_field_networks_action_start_stop}}</th>
+                    <th nowrap="nowrap">{{messages.label_field_networks_action_stop}}</th>
                     <th nowrap="nowrap">{{messages.label_field_networks_action_delete}}</th>
                 </tr>
                 </thead>
@@ -23,11 +23,14 @@
                     <td>{{messages['msg_network_state_'+network.state]}}</td>
                     <td><router-link :to="{ path: '/bubble/'+ network.name }">{{messages.table_row_networks_action_view}}</router-link></td>
 
-                    <td v-if="network.state === 'running'">{{messages.table_row_networks_action_stop}}</td>
-                    <td v-else-if="network.state === 'created'">{{messages.table_row_networks_action_start}}</td>
+                    <td v-if="network.state === 'running'">
+                        <a @click="stopNetwork(network.uuid)" class="text-danger">{{messages.table_row_networks_action_stop}}</a>
+                    </td>
                     <td v-else></td>
 
-                    <td><a @click="deleteNetwork(network.uuid)" class="text-danger">{{messages.table_row_networks_action_delete}}</a></td>
+                    <td>
+                        <a @click="deleteNetwork(network.uuid)" class="text-danger">{{messages.table_row_networks_action_delete}}</a>
+                    </td>
                 </tr>
                 </tbody>
             </table>
@@ -58,7 +61,7 @@
             this.getAllNetworks({userId: util.currentUser().uuid, messages: this.messages, errors: this.errors});
         },
         methods: {
-            ...mapActions('networks', ['getAllNetworks', 'deleteNetwork']),
+            ...mapActions('networks', ['getAllNetworks', 'stopNetwork', 'deleteNetwork']),
             ...mapGetters('networks', ['loading'])
         }
     };