feat(containers) - Add the ability to force remove a container with confirmation (#814)

app/components/container/container.html

@@ -19,7 +19,7 @@
           <button class="btn btn-primary" ng-click="restart()" ng-disabled="!container.State.Running"><i class="fa fa-refresh space-right" aria-hidden="true"></i>Restart</button>
           <button class="btn btn-primary" ng-click="pause()" ng-disabled="!container.State.Running || container.State.Paused"><i class="fa fa-pause space-right" aria-hidden="true"></i>Pause</button>
           <button class="btn btn-primary" ng-click="unpause()" ng-disabled="!container.State.Paused"><i class="fa fa-play space-right" aria-hidden="true"></i>Resume</button>
-          <button class="btn btn-danger" ng-click="remove()" ng-disabled="container.State.Running"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
+          <button class="btn btn-danger" ng-click="confirmRemove()"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
         </div>
       </rd-widget-body>
     </rd-widget>

app/components/container/containerController.js

@@ -1,6 +1,6 @@
 angular.module('container', [])
-.controller('ContainerController', ['$scope', '$state','$stateParams', '$filter', 'Container', 'ContainerCommit', 'ImageHelper', 'Network', 'Notifications', 'Pagination',
+.controller('ContainerController', ['$scope', '$state','$stateParams', '$filter', 'Container', 'ContainerCommit', 'ImageHelper', 'Network', 'Notifications', 'Pagination', 'ModalService',
-function ($scope, $state, $stateParams, $filter, Container, ContainerCommit, ImageHelper, Network, Notifications, Pagination) {
+function ($scope, $state, $stateParams, $filter, Container, ContainerCommit, ImageHelper, Network, Notifications, Pagination, ModalService) {
   $scope.activityTime = 0;
   $scope.portBindings = [];
   $scope.config = {
@@ -116,9 +116,23 @@ function ($scope, $state, $stateParams, $filter, Container, ContainerCommit, Ima
     });
   };
 
-  $scope.remove = function () {
+  $scope.confirmRemove = function () {
+    if ($scope.container.State.Running) {
+      ModalService.confirmDeletion(
+        'You are about to remove a running container.',
+        function (confirmed) {
+          if(!confirmed) { return; }
+          $scope.remove();
+        }
+      );
+    } else {
+      $scope.remove();
+    }
+  };
+
+  $scope.remove = function() {
     $('#loadingViewSpinner').show();
-    Container.remove({id: $stateParams.id}, function (d) {
+    Container.remove({id: $stateParams.id, force: true}, function (d) {
       if (d.message) {
         $('#loadingViewSpinner').hide();
         Notifications.error("Failure", d, "Unable to remove container");

app/components/containers/containers.html

@@ -31,7 +31,7 @@
           <button type="button" class="btn btn-primary btn-responsive" ng-click="restartAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-refresh space-right" aria-hidden="true"></i>Restart</button>
           <button type="button" class="btn btn-primary btn-responsive" ng-click="pauseAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-pause space-right" aria-hidden="true"></i>Pause</button>
           <button type="button" class="btn btn-primary btn-responsive" ng-click="unpauseAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-play space-right" aria-hidden="true"></i>Resume</button>
-          <button type="button" class="btn btn-danger btn-responsive" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
+          <button type="button" class="btn btn-danger btn-responsive" ng-click="confirmRemoveAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
         </div>
         <a class="btn btn-primary" type="button" ui-sref="actions.create.container"><i class="fa fa-plus space-right" aria-hidden="true"></i>Add container</a>
       </div>

app/components/containers/containersController.js

@@ -128,7 +128,7 @@ angular.module('containers', [])
           });
         }
         else if (action === Container.remove) {
-          action({id: c.Id}, function (d) {
+          action({id: c.Id, force: true}, function (d) {
             if (d.message) {
               Notifications.error("Error", d, "Unable to remove container");
             }
@@ -231,6 +231,27 @@ angular.module('containers', [])
     batch($scope.containers, Container.remove, "Removed");
   };
 
+  $scope.confirmRemoveAction = function () {
+    var isOneContainerRunning = false;
+    angular.forEach($scope.containers, function (c) {
+      if (c.Checked && c.State === 'running') {
+        isOneContainerRunning = true;
+        return;
+      }
+    });
+    if (isOneContainerRunning) {
+      ModalService.confirmDeletion(
+        'You are about to remove one or more running containers.',
+        function (confirmed) {
+          if(!confirmed) { return; }
+          $scope.removeAction();
+        }
+      );
+    } else {
+      $scope.removeAction();
+    }
+  };
+
   function retrieveSwarmHostsInfo(data) {
     var swarm_hosts = {};
     var systemStatus = data.SystemStatus;

app/components/service/serviceController.js

@@ -224,7 +224,7 @@ function ($scope, $stateParams, $state, $location, $anchorScroll, Service, Servi
 
   $scope.removeService = function() {
     ModalService.confirmDeletion(
-      'Do you want to delete this service? All the containers associated to this service will be removed too.',
+      'Do you want to remove this service? All the containers associated to this service will be removed too.',
       function onConfirm(confirmed) {
         if(!confirmed) { return; }
         removeService();

app/components/services/servicesController.js

@@ -70,7 +70,7 @@ function ($q, $scope, $stateParams, $state, Service, ServiceHelper, Notification
 
   $scope.removeAction = function() {
     ModalService.confirmDeletion(
-      'Do you want to delete the selected service(s)? All the containers associated to the selected service(s) will be removed too.',
+      'Do you want to remove the selected service(s)? All the containers associated to the selected service(s) will be removed too.',
       function onConfirm(confirmed) {
         if(!confirmed) { return; }
         removeServices();

app/components/user/userController.js

@@ -14,7 +14,7 @@ function ($scope, $state, $stateParams, UserService, ModalService, Notifications
 
   $scope.deleteUser = function() {
     ModalService.confirmDeletion(
-      'Do you want to delete this user? This user will not be able to login into Portainer anymore.',
+      'Do you want to remove this user? This user will not be able to login into Portainer anymore.',
       function onConfirm(confirmed) {
         if(!confirmed) { return; }
         deleteUser();

app/components/users/usersController.js

@@ -103,7 +103,7 @@ function ($scope, $state, UserService, ModalService, Notifications, Pagination)
 
   $scope.removeAction = function () {
     ModalService.confirmDeletion(
-      'Do you want to delete the selected users? They will not be able to login into Portainer anymore.',
+      'Do you want to remove the selected users? They will not be able to login into Portainer anymore.',
       function onConfirm(confirmed) {
         if(!confirmed) { return; }
         deleteSelectedUsers();

app/rest/container.js

@@ -23,7 +23,7 @@ angular.module('portainer.rest')
       transformResponse: genericHandler
     },
     remove: {
-      method: 'DELETE', params: {id: '@id', v: 0},
+      method: 'DELETE', params: {id: '@id', v: 0, force: '@force'},
       transformResponse: genericHandler
     },
     rename: {

app/services/modalService.js

@@ -75,7 +75,7 @@ angular.module('portainer.services')
       message: message,
       buttons: {
         confirm: {
-          label: 'Delete',
+          label: 'Remove',
           className: 'btn-danger'
         }
       },