[VBV-1804] Added delete confirmation in Scaled containers view

Change-Id: I92d25daa229d0abd49ffb48bfdc1816be2402ab8 Reviewed-on: https://bellevue-ci.eng.vmware.com:8080/33429 Upgrade-Verified: jenkins <[email protected]> Closures-Verified: jenkins <[email protected]> Reviewed-by: Iveta Ilieva <[email protected]> Bellevue-Verified: jenkins <[email protected]> CS-Verified: jenkins <[email protected]>
afilipov1 · May 11, 2018 · e102801 · e102801
1 parent 7d2481b
commit e102801
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 16 deletions.
diff --git a/ui/app/src/js/components/containers/cluster/ClusterContainerDetails.js b/ui/app/src/js/components/containers/cluster/ClusterContainerDetails.js
@@ -15,12 +15,16 @@ import VueToolbarActionButton from 'components/common/VueToolbarActionButton'; /
 import ClusterContainersListItem from 'components/containers/cluster/ClusterContainersListItem';  //eslint-disable-line
 import ContainersListItem from 'components/containers/ContainersListItem'; //eslint-disable-line
 import ContainerDetails from 'components/containers/ContainerDetails'; //eslint-disable-line
+import ActionConfirmationSupportMixin from 'components/common/ActionConfirmationSupportMixin';
 import constants from 'core/constants'; //eslint-disable-line
 import utils from 'core/utils';
 import { ContainerActions, NavigationActions } from 'actions/Actions';
 
 var ClusterContainerDetails = Vue.extend({
   template: ClusterContainerDetailsVue,
+  mixins: [
+    ActionConfirmationSupportMixin
+  ],
   props: {
     model: {
       required: true,
@@ -82,11 +86,10 @@ var ClusterContainerDetails = Vue.extend({
 
       ContainerActions.stopCluster(this.model.listView.items);
     },
-    removeCluster: function($event) {
-      $event.stopPropagation();
-      $event.preventDefault();
-
-      ContainerActions.removeCluster(this.model.listView.items);
+    handleConfirmation: function(actionName) {
+      if (actionName === 'removeCluster') {
+        ContainerActions.removeCluster(this.model.listView.items);
+      }
     }
   },
 

diff --git a/ui/app/src/js/components/containers/cluster/ClusterContainerDetailsVue.html b/ui/app/src/js/components/containers/cluster/ClusterContainerDetailsVue.html
@@ -19,17 +19,25 @@
         class="total-items">({{keys(model.listView.items).length || 0}})</span><refresh-button
         v-on:click="refresh()"></refresh-button></div>
 
-      <div class="toolbar-actions" v-if="!model.selectedItem">
-        <toolbar-action-button id="stop" icon-name="stop" v-bind:label="i18n('app.container.actions.stop')"
-                               v-bind:supported="operationSupported('STOP')"
-                               v-on:click="stopCluster($event)"></toolbar-action-button>
-        <toolbar-action-button id="start" icon-name="play" v-bind:label="i18n('app.container.actions.start')"
-                               v-bind:supported="operationSupported('START')"
-                               v-on:click="startCluster($event)"></toolbar-action-button>
-        <toolbar-action-button id="remove" icon-name="trash" v-bind:label="i18n('app.container.actions.remove')"
-                               v-bind:supported="operationSupported('REMOVE')"
-                               v-on:click="removeCluster($event)"></toolbar-action-button>
-      </div>
+        <div class="toolbar-actions" v-if="!model.selectedItem">
+          <template v-if="confirmationOperation">
+            <div class="progress-holder">
+              <action-confirmation :action-name="confirmationOperation"
+                                   :action-title="i18n('app.container.actions.remove')"></action-confirmation>
+            </div>
+          </template>
+          <template v-else>
+            <toolbar-action-button id="stop" icon-name="stop" v-bind:label="i18n('app.container.actions.stop')"
+                                   v-bind:supported="operationSupported('STOP')"
+                                   v-on:click="stopCluster($event)"></toolbar-action-button>
+            <toolbar-action-button id="start" icon-name="play" v-bind:label="i18n('app.container.actions.start')"
+                                   v-bind:supported="operationSupported('START')"
+                                   v-on:click="startCluster($event)"></toolbar-action-button>
+            <toolbar-action-button id="remove" icon-name="trash" v-bind:label="i18n('app.container.actions.remove')"
+                                   v-bind:supported="operationSupported('REMOVE')"
+                                   v-on:click="askConfirmation($event, 'removeCluster')"></toolbar-action-button>
+          </template>
+        </div>
 
       <grid v-bind:context-selected="model.selectedItem">
         <grid-item v-for="item in model.listView.items" track-by="documentId"