feat(stacks): add the ability to migrate stacks to another endpoint (#1976)

* feat(stacks): add the ability to migrate stacks to another endpoint

* feat(stack-details): do not redirect to alternate endpoint after migration

* fix(api): fix merge conflicts

* feat(stack-details): add a modal to confirm stack migration

api/http/handler/stacks/handler.go

@@ -47,5 +47,7 @@ func NewHandler(bouncer *security.RequestBouncer) *Handler {
 		bouncer.RestrictedAccess(httperror.LoggerHandler(h.stackUpdate))).Methods(http.MethodPut)
 	h.Handle("/stacks/{id}/file",
 		bouncer.RestrictedAccess(httperror.LoggerHandler(h.stackFile))).Methods(http.MethodGet)
+	h.Handle("/stacks/{id}/migrate",
+		bouncer.RestrictedAccess(httperror.LoggerHandler(h.stackMigrate))).Methods(http.MethodPost)
 	return h
 }

api/http/handler/stacks/stack_migrate.go

@@ -0,0 +1,132 @@
+package stacks
+
+import (
+	"net/http"
+
+	"github.com/portainer/portainer"
+	httperror "github.com/portainer/portainer/http/error"
+	"github.com/portainer/portainer/http/proxy"
+	"github.com/portainer/portainer/http/request"
+	"github.com/portainer/portainer/http/response"
+	"github.com/portainer/portainer/http/security"
+)
+
+type stackMigratePayload struct {
+	EndpointID int
+	SwarmID    string
+}
+
+func (payload *stackMigratePayload) Validate(r *http.Request) error {
+	if payload.EndpointID == 0 {
+		return portainer.Error("Invalid endpoint identifier. Must be a positive number")
+	}
+	return nil
+}
+
+// POST request on /api/stacks/:id/migrate
+func (handler *Handler) stackMigrate(w http.ResponseWriter, r *http.Request) *httperror.HandlerError {
+	stackID, err := request.RetrieveNumericRouteVariableValue(r, "id")
+	if err != nil {
+		return &httperror.HandlerError{http.StatusBadRequest, "Invalid stack identifier route variable", err}
+	}
+
+	var payload stackMigratePayload
+	err = request.DecodeAndValidateJSONPayload(r, &payload)
+	if err != nil {
+		return &httperror.HandlerError{http.StatusBadRequest, "Invalid request payload", err}
+	}
+
+	stack, err := handler.StackService.Stack(portainer.StackID(stackID))
+	if err == portainer.ErrObjectNotFound {
+		return &httperror.HandlerError{http.StatusNotFound, "Unable to find a stack with the specified identifier inside the database", err}
+	} else if err != nil {
+		return &httperror.HandlerError{http.StatusInternalServerError, "Unable to find a stack with the specified identifier inside the database", err}
+	}
+
+	resourceControl, err := handler.ResourceControlService.ResourceControlByResourceID(stack.Name)
+	if err != nil && err != portainer.ErrObjectNotFound {
+		return &httperror.HandlerError{http.StatusInternalServerError, "Unable to retrieve a resource control associated to the stack", err}
+	}
+
+	securityContext, err := security.RetrieveRestrictedRequestContext(r)
+	if err != nil {
+		return &httperror.HandlerError{http.StatusInternalServerError, "Unable to retrieve info from request context", err}
+	}
+
+	if resourceControl != nil {
+		if !securityContext.IsAdmin && !proxy.CanAccessStack(stack, resourceControl, securityContext.UserID, securityContext.UserMemberships) {
+			return &httperror.HandlerError{http.StatusForbidden, "Access denied to resource", portainer.ErrResourceAccessDenied}
+		}
+	}
+
+	endpoint, err := handler.EndpointService.Endpoint(stack.EndpointID)
+	if err == portainer.ErrObjectNotFound {
+		return &httperror.HandlerError{http.StatusNotFound, "Unable to find the endpoint associated to the stack inside the database", err}
+	} else if err != nil {
+		return &httperror.HandlerError{http.StatusInternalServerError, "Unable to find the endpoint associated to the stack inside the database", err}
+	}
+
+	targetEndpoint, err := handler.EndpointService.Endpoint(portainer.EndpointID(payload.EndpointID))
+	if err == portainer.ErrObjectNotFound {
+		return &httperror.HandlerError{http.StatusNotFound, "Unable to find an endpoint with the specified identifier inside the database", err}
+	} else if err != nil {
+		return &httperror.HandlerError{http.StatusInternalServerError, "Unable to find an endpoint with the specified identifier inside the database", err}
+	}
+
+	stack.EndpointID = portainer.EndpointID(payload.EndpointID)
+	if payload.SwarmID != "" {
+		stack.SwarmID = payload.SwarmID
+	}
+
+	migrationError := handler.migrateStack(r, stack, targetEndpoint)
+	if migrationError != nil {
+		return migrationError
+	}
+
+	err = handler.deleteStack(stack, endpoint)
+	if err != nil {
+		return &httperror.HandlerError{http.StatusInternalServerError, err.Error(), err}
+	}
+
+	err = handler.StackService.UpdateStack(stack.ID, stack)
+	if err != nil {
+		return &httperror.HandlerError{http.StatusInternalServerError, "Unable to persist the stack changes inside the database", err}
+	}
+
+	return response.JSON(w, stack)
+}
+
+func (handler *Handler) migrateStack(r *http.Request, stack *portainer.Stack, next *portainer.Endpoint) *httperror.HandlerError {
+	if stack.Type == portainer.DockerSwarmStack {
+		return handler.migrateSwarmStack(r, stack, next)
+	}
+	return handler.migrateComposeStack(r, stack, next)
+}
+
+func (handler *Handler) migrateComposeStack(r *http.Request, stack *portainer.Stack, next *portainer.Endpoint) *httperror.HandlerError {
+	config, configErr := handler.createComposeDeployConfig(r, stack, next)
+	if configErr != nil {
+		return configErr
+	}
+
+	err := handler.deployComposeStack(config)
+	if err != nil {
+		return &httperror.HandlerError{http.StatusInternalServerError, err.Error(), err}
+	}
+
+	return nil
+}
+
+func (handler *Handler) migrateSwarmStack(r *http.Request, stack *portainer.Stack, next *portainer.Endpoint) *httperror.HandlerError {
+	config, configErr := handler.createSwarmDeployConfig(r, stack, next, true)
+	if configErr != nil {
+		return configErr
+	}
+
+	err := handler.deploySwarmStack(config)
+	if err != nil {
+		return &httperror.HandlerError{http.StatusInternalServerError, err.Error(), err}
+	}
+
+	return nil
+}

app/__module.js

@@ -1,6 +1,7 @@
 angular.module('portainer', [
   'ui.bootstrap',
   'ui.router',
+  'ui.select',
   'isteven-multi-select',
   'ngCookies',
   'ngSanitize',

app/portainer/components/endpoint-selector/endpoint-selector.js

@@ -2,8 +2,8 @@ angular.module('portainer.app').component('endpointSelector', {
   templateUrl: 'app/portainer/components/endpoint-selector/endpointSelector.html',
   controller: 'EndpointSelectorController',
   bindings: {
+    'model': '=',
     'endpoints': '<',
-    'groups': '<',
+    'groups': '<'
-    'selectEndpoint': '<'
   }
 });

app/portainer/components/endpoint-selector/endpointSelector.html

@@ -1,27 +1,8 @@
-<div ng-if="$ctrl.endpoints.length > 1">
+<ui-select ng-model="$ctrl.model">
-  <div ng-if="!$ctrl.state.show">
+  <ui-select-match placeholder="Select an endpoint">
-    <li class="sidebar-title">
+    <span>{{ $select.selected.Name }}</span>
-      <span class="interactive" style="color: #fff;" ng-click="$ctrl.state.show = true;">
+  </ui-select-match>
-        <span class="fa fa-plug space-right"></span>Change environment
+  <ui-select-choices group-by="$ctrl.groupEndpoints" group-filter="$ctrl.sortGroups" repeat="endpoint in ($ctrl.endpoints | filter: $select.search) track by endpoint.Id">
-      </span>
+    <span>{{ endpoint.Name }}</span>
-    </li>
+  </ui-select-choices>
-  </div>
+</ui-select>
-  <div ng-if="$ctrl.state.show">
-    <div ng-if="$ctrl.availableGroups.length > 1">
-      <li class="sidebar-title"><span>Group</span></li>
-      <li class="sidebar-title">
-        <select class="select-endpoint form-control" ng-options="group.Name for group in $ctrl.availableGroups" ng-model="$ctrl.state.selectedGroup" ng-change="$ctrl.selectGroup()">
-          <option value="" disabled selected>Select a group</option>
-        </select>
-      </li>
-    </div>
-    <div ng-if="$ctrl.state.selectedGroup || $ctrl.availableGroups.length <= 1">
-      <li class="sidebar-title"><span>Endpoint</span></li>
-      <li class="sidebar-title">
-        <select class="select-endpoint form-control" ng-options="endpoint.Name for endpoint in $ctrl.availableEndpoints" ng-model="$ctrl.state.selectedEndpoint" ng-change="$ctrl.selectEndpoint($ctrl.state.selectedEndpoint)">
-          <option value="" disabled selected>Select an endpoint</option>
-        </select>
-      </li>
-    </div>
-  </div>
-</div>

app/portainer/components/endpoint-selector/endpointSelectorController.js

@@ -2,21 +2,22 @@ angular.module('portainer.app')
 .controller('EndpointSelectorController', function () {
   var ctrl = this;
 
-  this.state = {
+  this.sortGroups = function(groups) {
-    show: false,
+    return _.sortBy(groups, ['name']);
-    selectedGroup: null,
-    selectedEndpoint: null
   };
 
-  this.selectGroup = function() {
+  this.groupEndpoints = function(endpoint) {
-    this.availableEndpoints = this.endpoints.filter(function f(endpoint) {
+    for (var i = 0; i < ctrl.availableGroups.length; i++) {
-      return endpoint.GroupId === ctrl.state.selectedGroup.Id;
+      var group = ctrl.availableGroups[i];
-    });
+
+      if (endpoint.GroupId === group.Id) {
+        return group.Name;
+      }
+    }
   };
 
   this.$onInit = function() {
     this.availableGroups = filterEmptyGroups(this.groups, this.endpoints);
-    this.availableEndpoints = this.endpoints;
   };
 
   function filterEmptyGroups(groups, endpoints) {

app/portainer/components/sidebar-endpoint-selector/sidebar-endpoint-selector.js

@@ -0,0 +1,9 @@
+angular.module('portainer.app').component('sidebarEndpointSelector', {
+  templateUrl: 'app/portainer/components/sidebar-endpoint-selector/sidebarEndpointSelector.html',
+  controller: 'SidebarEndpointSelectorController',
+  bindings: {
+    'endpoints': '<',
+    'groups': '<',
+    'selectEndpoint': '<'
+  }
+});

app/portainer/components/sidebar-endpoint-selector/sidebarEndpointSelector.html

@@ -0,0 +1,27 @@
+<div ng-if="$ctrl.endpoints.length > 1">
+  <div ng-if="!$ctrl.state.show">
+    <li class="sidebar-title">
+      <span class="interactive" style="color: #fff;" ng-click="$ctrl.state.show = true;">
+        <span class="fa fa-plug space-right"></span>Change environment
+      </span>
+    </li>
+  </div>
+  <div ng-if="$ctrl.state.show">
+    <div ng-if="$ctrl.availableGroups.length > 1">
+      <li class="sidebar-title"><span>Group</span></li>
+      <li class="sidebar-title">
+        <select class="select-endpoint form-control" ng-options="group.Name for group in $ctrl.availableGroups" ng-model="$ctrl.state.selectedGroup" ng-change="$ctrl.selectGroup()">
+          <option value="" disabled selected>Select a group</option>
+        </select>
+      </li>
+    </div>
+    <div ng-if="$ctrl.state.selectedGroup || $ctrl.availableGroups.length <= 1">
+      <li class="sidebar-title"><span>Endpoint</span></li>
+      <li class="sidebar-title">
+        <select class="select-endpoint form-control" ng-options="endpoint.Name for endpoint in $ctrl.availableEndpoints" ng-model="$ctrl.state.selectedEndpoint" ng-change="$ctrl.selectEndpoint($ctrl.state.selectedEndpoint)">
+          <option value="" disabled selected>Select an endpoint</option>
+        </select>
+      </li>
+    </div>
+  </div>
+</div>

app/portainer/components/sidebar-endpoint-selector/sidebarEndpointSelectorController.js

@@ -0,0 +1,34 @@
+angular.module('portainer.app')
+.controller('SidebarEndpointSelectorController', function () {
+  var ctrl = this;
+
+  this.state = {
+    show: false,
+    selectedGroup: null,
+    selectedEndpoint: null
+  };
+
+  this.selectGroup = function() {
+    this.availableEndpoints = this.endpoints.filter(function f(endpoint) {
+      return endpoint.GroupId === ctrl.state.selectedGroup.Id;
+    });
+  };
+
+  this.$onInit = function() {
+    this.availableGroups = filterEmptyGroups(this.groups, this.endpoints);
+    this.availableEndpoints = this.endpoints;
+  };
+
+  function filterEmptyGroups(groups, endpoints) {
+    return groups.filter(function f(group) {
+      for (var i = 0; i < endpoints.length; i++) {
+
+        var endpoint = endpoints[i];
+        if (endpoint.GroupId === group.Id) {
+          return true;
+        }
+      }
+      return false;
+    });
+  }
+});

app/portainer/models/stack.js

@@ -4,6 +4,7 @@ function StackViewModel(data) {
   this.Name = data.Name;
   this.Checked = false;
   this.EndpointId = data.EndpointId;
+  this.SwarmId = data.SwarmId;
   this.Env = data.Env ? data.Env : [];
   if (data.ResourceControl && data.ResourceControl.Id !== 0) {
     this.ResourceControl = new ResourceControlViewModel(data.ResourceControl);

app/portainer/rest/stack.js

@@ -8,6 +8,7 @@ angular.module('portainer.app')
     create: { method: 'POST', ignoreLoadingBar: true },
     update: { method: 'PUT', params: { id: '@id' }, ignoreLoadingBar: true },
     remove: { method: 'DELETE', params: { id: '@id', external: '@external', endpointId: '@endpointId' } },
-    getStackFile: { method: 'GET', params: { id : '@id', action: 'file' } }
+    getStackFile: { method: 'GET', params: { id : '@id', action: 'file' } },
+    migrate: { method: 'POST', params: { id : '@id', action: 'migrate' }, ignoreLoadingBar: true }
   });
 }]);

app/portainer/services/api/stackService.js

@@ -1,6 +1,6 @@
 angular.module('portainer.app')
-.factory('StackService', ['$q', 'Stack', 'ResourceControlService', 'FileUploadService', 'StackHelper', 'ServiceService', 'ContainerService', 'SwarmService',
+.factory('StackService', ['$q', 'Stack', 'ResourceControlService', 'FileUploadService', 'StackHelper', 'ServiceService', 'ContainerService', 'SwarmService', 'EndpointProvider',
-function StackServiceFactory($q, Stack, ResourceControlService, FileUploadService, StackHelper, ServiceService, ContainerService, SwarmService) {
+function StackServiceFactory($q, Stack, ResourceControlService, FileUploadService, StackHelper, ServiceService, ContainerService, SwarmService, EndpointProvider) {
   'use strict';
   var service = {};
 
@@ -33,6 +33,51 @@ function StackServiceFactory($q, Stack, ResourceControlService, FileUploadServic
     return deferred.promise;
   };
 
+  service.migrateSwarmStack = function(stack, targetEndpointId) {
+    var deferred = $q.defer();
+
+    EndpointProvider.setEndpointID(targetEndpointId);
+
+    SwarmService.swarm()
+    .then(function success(data) {
+      var swarm = data;
+      if (swarm.Id === stack.SwarmId) {
+        deferred.reject({ msg: 'Target endpoint is located in the same Swarm cluster as the current endpoint', err: null });
+        return;
+      }
+
+      return Stack.migrate({ id: stack.Id }, { EndpointID: targetEndpointId, SwarmID:  swarm.Id }).$promise;
+    })
+    .then(function success(data) {
+      deferred.resolve();
+    })
+    .catch(function error(err) {
+      deferred.reject({ msg: 'Unable to migrate stack', err: err });
+    })
+    .finally(function final() {
+      EndpointProvider.setEndpointID(stack.EndpointId);
+    });
+
+    return deferred.promise;
+  };
+
+  service.migrateComposeStack = function(stack, targetEndpointId) {
+    var deferred = $q.defer();
+
+    EndpointProvider.setEndpointID(targetEndpointId);
+
+    Stack.migrate({ id: stack.Id }, { EndpointID: targetEndpointId }).$promise
+    .then(function success(data) {
+      deferred.resolve();
+    })
+    .catch(function error(err) {
+      EndpointProvider.setEndpointID(stack.EndpointId);
+      deferred.reject({ msg: 'Unable to migrate stack', err: err });
+    });
+
+    return deferred.promise;
+  };
+
   service.stacks = function(compose, swarm, endpointId) {
     var deferred = $q.defer();
 

app/portainer/views/sidebar/sidebar.html

@@ -9,11 +9,11 @@
   </div>
   <div class="sidebar-content">
   <ul class="sidebar">
-    <endpoint-selector ng-if="endpoints && groups"
+    <sidebar-endpoint-selector ng-if="endpoints && groups"
       endpoints="endpoints"
       groups="groups"
       select-endpoint="switchEndpoint"
-    ></endpoint-selector>
+    ></sidebar-endpoint-selector>
     <li class="sidebar-title"><span class="endpoint-name">{{ activeEndpoint.Name }}</span></li>
     <azure-sidebar-content ng-if="applicationState.endpoint.mode.provider === 'AZURE'">
     </azure-sidebar-content>

app/portainer/views/stacks/edit/stack.html

@@ -9,10 +9,19 @@
   </rd-header-content>
 </rd-header>
 
-<div class="row" ng-if="state.externalStack">
+<div class="row">
   <div class="col-sm-12">
     <rd-widget>
       <rd-widget-body>
+        <uib-tabset active="state.activeTab">
+          <!-- tab-info -->
+          <uib-tab index="0">
+            <uib-tab-heading>
+              <i class="fa fa-th-list" aria-hidden="true"></i> Stack
+            </uib-tab-heading>
+            <div style="margin-top: 10px;">
+              <!-- stack-information -->
+              <div ng-if="state.externalStack">
                 <div class="col-sm-12 form-section-title">
                   Information
                 </div>
@@ -24,56 +33,53 @@
                     </p>
                   </span>
                 </div>
-      </rd-widget-body>
+              </div>
-    </rd-widget>
+              <!-- !stack-information -->
+              <!-- stack-details -->
+              <div>
+                <div class="col-sm-12 form-section-title">
+                  Stack details
+                </div>
+                <div class="form-group">
+                  {{ stackName }}
+                  <button class="btn btn-xs btn-danger" ng-click="removeStack()" ng-if="!state.externalStack || stack.Type === 1"><i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Delete this stack</button>
                 </div>
               </div>
-
+              <!-- !stack-details -->
-<!-- access-control-panel -->
+              <!-- stack-migration -->
-<por-access-control-panel
+              <div ng-if="!state.externalStack && endpoints.length > 0">
-  ng-if="stack && applicationState.application.authentication"
+                <div class="col-sm-12 form-section-title">
-  resource-id="stack.Name"
+                  Stack migration
-  resource-control="stack.ResourceControl"
+                </div>
-  resource-type="'stack'">
+                <div class="form-group">
-</por-access-control-panel>
+                  <span class="small" style="margin-top: 10px;">
-<!-- !access-control-panel -->
+                    <p class="text-muted">
-
+                      This feature allows you to migrate this stack to an alternate compatible endpoint.
-<div class="row" ng-if="containers">
+                    </p>
-  <div class="col-sm-12">
+                  </span>
-    <containers-datatable
+                  <div>
-      title-text="Containers" title-icon="fa-server"
+                    <endpoint-selector ng-if="endpoints && groups"
-      dataset="containers" table-key="stack-containers"
+                      model="formValues.Endpoint"
-      order-by="Status" show-text-filter="true"
+                      endpoints="endpoints"
-      show-ownership-column="applicationState.application.authentication"
+                      groups="groups"
-      show-host-column="false"
+                    ></endpoint-selector>
-      show-add-action="false"
+                    <button class="btn btn-sm btn-primary" ng-click="migrateStack()" ng-disabled="!formValues.Endpoint || state.migrationInProgress" style="margin-top: 7px; margin-left: 0;" button-spinner="state.migrationInProgress">
-    ></containers-datatable>
+                      <span ng-hide="state.migrationInProgress"><i class="fa fa-long-arrow-alt-right space-right" aria-hidden="true"></i> Migrate</span>
+                      <span ng-show="state.migrationInProgress">Migration in progress...</span>
+                    </button>
                   </div>
                 </div>
-
-<div class="row" ng-if="services">
-  <div class="col-sm-12">
-    <services-datatable
-    title-text="Services" title-icon="fa-list-alt"
-    dataset="services" table-key="stack-services"
-    order-by="Name" show-text-filter="true"
-    nodes="nodes"
-    agent-proxy="applicationState.endpoint.mode.agentProxy"
-    show-ownership-column="false"
-    show-update-action="applicationState.endpoint.apiVersion >= 1.25"
-    show-task-logs-button="applicationState.endpoint.apiVersion >= 1.30"
-    show-add-action="false"
-    show-stack-column="false"
-    ></services-datatable>
               </div>
+              <!-- !stack-migration -->
             </div>
-
+          </uib-tab>
-<div class="row" ng-if="stackFileContent">
+          <!-- !tab-info -->
-  <div class="col-sm-12">
+          <!-- tab-file -->
-    <rd-widget>
+          <uib-tab index="1" ng-if="stackFileContent" select="showEditor()">
-      <rd-widget-header icon="fa-pencil-alt" title-text="Stack editor"></rd-widget-header>
+            <uib-tab-heading>
-      <rd-widget-body>
+              <i class="fa fa-pencil-alt space-right" aria-hidden="true"></i> Editor
-        <form class="form-horizontal">
+            </uib-tab-heading>
+            <form class="form-horizontal" ng-if="state.showEditorTab" style="margin-top: 10px;">
               <div class="form-group">
                 <span class="col-sm-12 text-muted small">
                   You can get more information about Compose file format in the <a href="https://docs.docker.com/compose/compose-file/" target="_blank">official documentation</a>.
@@ -152,7 +158,49 @@
                 </div>
               </div>
             </form>
+          </uib-tab>
+          <!-- !tab-file -->
+        </uib-tabset>
       </rd-widget-body>
     </rd-widget>
   </div>
 </div>
+
+<div class="row" ng-if="containers">
+  <div class="col-sm-12">
+    <containers-datatable
+      title-text="Containers" title-icon="fa-server"
+      dataset="containers" table-key="stack-containers"
+      order-by="Status" show-text-filter="true"
+      show-ownership-column="applicationState.application.authentication"
+      show-host-column="false"
+      show-add-action="false"
+    ></containers-datatable>
+  </div>
+</div>
+
+<div class="row" ng-if="services">
+  <div class="col-sm-12">
+    <services-datatable
+    title-text="Services" title-icon="fa-list-alt"
+    dataset="services" table-key="stack-services"
+    order-by="Name" show-text-filter="true"
+    nodes="nodes"
+    agent-proxy="applicationState.endpoint.mode.agentProxy"
+    show-ownership-column="false"
+    show-update-action="applicationState.endpoint.apiVersion >= 1.25"
+    show-task-logs-button="applicationState.endpoint.apiVersion >= 1.30"
+    show-add-action="false"
+    show-stack-column="false"
+    ></services-datatable>
+  </div>
+</div>
+
+<!-- access-control-panel -->
+<por-access-control-panel
+  ng-if="stack && applicationState.application.authentication"
+  resource-id="stack.Name"
+  resource-control="stack.ResourceControl"
+  resource-type="'stack'">
+</por-access-control-panel>
+<!-- !access-control-panel -->

app/portainer/views/stacks/edit/stackController.js

@@ -1,16 +1,87 @@
 angular.module('portainer.app')
-.controller('StackController', ['$q', '$scope', '$state', '$transition$', 'StackService', 'NodeService', 'ServiceService', 'TaskService', 'ContainerService', 'ServiceHelper', 'TaskHelper', 'Notifications', 'FormHelper', 'EndpointProvider',
+.controller('StackController', ['$q', '$scope', '$state', '$transition$', 'StackService', 'NodeService', 'ServiceService', 'TaskService', 'ContainerService', 'ServiceHelper', 'TaskHelper', 'Notifications', 'FormHelper', 'EndpointProvider', 'EndpointService', 'GroupService', 'ModalService',
-function ($q, $scope, $state, $transition$, StackService, NodeService, ServiceService, TaskService, ContainerService, ServiceHelper, TaskHelper, Notifications, FormHelper, EndpointProvider) {
+function ($q, $scope, $state, $transition$, StackService, NodeService, ServiceService, TaskService, ContainerService, ServiceHelper, TaskHelper, Notifications, FormHelper, EndpointProvider, EndpointService, GroupService, ModalService) {
 
   $scope.state = {
     actionInProgress: false,
-    externalStack: false
+    migrationInProgress: false,
+    externalStack: false,
+    showEditorTab: false
   };
 
   $scope.formValues = {
-    Prune: false
+    Prune: false,
+    Endpoint: null
   };
 
+  $scope.showEditor = function() {
+    $scope.state.showEditorTab = true;
+  };
+
+  $scope.migrateStack = function() {
+    ModalService.confirm({
+      title: 'Are you sure?',
+      message: 'This action will deploy a new instance of this stack on the target endpoint, please note that this does NOT relocate the content of any persistent volumes that may be attached to this stack.',
+      buttons: {
+        confirm: {
+          label: 'Migrate',
+          className: 'btn-danger'
+        }
+      },
+      callback: function onConfirm(confirmed) {
+        if(!confirmed) { return; }
+        migrateStack();
+      }
+    });
+  };
+
+  $scope.removeStack = function() {
+    ModalService.confirmDeletion(
+      'Do you want to remove the stack? Associated services will be removed as well.',
+      function onConfirm(confirmed) {
+        if(!confirmed) { return; }
+        deleteStack();
+      }
+    );
+  };
+
+  function migrateStack() {
+    var stack = $scope.stack;
+    var targetEndpointId = $scope.formValues.Endpoint.Id;
+
+    var migrateRequest = StackService.migrateSwarmStack;
+    if (stack.Type === 2) {
+      migrateRequest = StackService.migrateComposeStack;
+    }
+
+    $scope.state.migrationInProgress = true;
+    migrateRequest(stack, targetEndpointId)
+    .then(function success(data) {
+      Notifications.success('Stack successfully migrated', stack.Name);
+      $state.go('portainer.stacks', {}, {reload: true});
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to migrate stack');
+    })
+    .finally(function final() {
+      $scope.state.migrationInProgress = false;
+    });
+  }
+
+  function deleteStack() {
+    var endpointId = EndpointProvider.endpointID();
+    var stack = $scope.stack;
+
+    StackService.remove(stack, $transition$.params().external, endpointId)
+    .then(function success() {
+      Notifications.success('Stack successfully removed', stack.Name);
+      $state.go('portainer.stacks');
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to remove stack ' + stack.Name);
+    });
+  }
+
   $scope.deployStack = function () {
     var stackFile = $scope.stackFileContent;
     var env = FormHelper.removeInvalidEnvVars($scope.stack.Env);
@@ -54,10 +125,19 @@ function ($q, $scope, $state, $transition$, StackService, NodeService, ServiceSe
 
   function loadStack(id) {
     var agentProxy = $scope.applicationState.endpoint.mode.agentProxy;
+    var endpointId = EndpointProvider.endpointID();
 
-    StackService.stack(id)
+    $q.all({
+      stack: StackService.stack(id),
+      endpoints: EndpointService.endpoints(),
+      groups: GroupService.groups()
+    })
     .then(function success(data) {
-      var stack = data;
+      var stack = data.stack;
+      $scope.endpoints = data.endpoints.filter(function(endpoint) {
+        return endpoint.Id !== endpointId;
+      });
+      $scope.groups = data.groups;
       $scope.stack = stack;
 
       return $q.all({

package.json

@@ -55,6 +55,7 @@
     "rdash-ui": "1.0.*",
     "splitargs": "github:deviantony/splitargs#~0.2.0",
     "toastr": "github:CodeSeven/toastr#~2.1.3",
+    "ui-select": "^0.19.8",
     "xterm": "^3.1.0"
   },
   "devDependencies": {

vendor.yml

@@ -20,6 +20,7 @@ js:
 css:
   - 'bootstrap/dist/css/bootstrap.css'
   - 'rdash-ui/dist/css/rdash.css'
+  - 'ui-select/dist/select.css'
   - 'isteven-angular-multiselect/isteven-multi-select.css'
   - '@fortawesome/fontawesome-free-webfonts/css/fa-brands.css'
   - '@fortawesome/fontawesome-free-webfonts/css/fa-solid.css'
@@ -34,6 +35,7 @@ css:
 angular:
   - 'angular/angular.js'
   - 'angular-ui-bootstrap/dist/ui-bootstrap-tpls.js'
+  - 'ui-select/dist/select.js'
   - 'angular-cookies/angular-cookies.js'
   - 'angular-google-analytics/dist/angular-google-analytics.js'
   - 'angular-jwt/dist/angular-jwt.js'

yarn.lock

@@ -4238,6 +4238,10 @@ uglify-to-browserify@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
 
+ui-select@^0.19.8:
+  version "0.19.8"
+  resolved "https://registry.yarnpkg.com/ui-select/-/ui-select-0.19.8.tgz#74860848a7fd8bc494d9856d2f62776ea98637c1"
+
 uid-safe@2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/uid-safe/-/uid-safe-2.1.4.tgz#3ad6f38368c6d4c8c75ec17623fb79aa1d071d81"