feat(stacks): add support for stack deploy (#1280)

app/components/containers/containers.html

@@ -49,52 +49,59 @@
                 <input type="checkbox" ng-model="allSelected" ng-change="selectItems(allSelected)" />
               </th>
               <th>
-                <a ui-sref="containers" ng-click="order('Status')">
+                <a ng-click="order('Status')">
                   State
                   <span ng-show="sortType == 'Status' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                   <span ng-show="sortType == 'Status' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
               <th>
-                <a ui-sref="containers" ng-click="order('Names')">
+                <a ng-click="order('Names')">
                   Name
                   <span ng-show="sortType == 'Names' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                   <span ng-show="sortType == 'Names' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
-				<a data-toggle="tooltip" title="More" ng-click="truncateMore();" ng-show="showMore">
-					<i class="fa fa-plus-square" aria-hidden="true"></i>
-				</a>
+        				<a data-toggle="tooltip" title="More" ng-click="truncateMore();" ng-show="showMore">
+        					<i class="fa fa-plus-square" aria-hidden="true"></i>
+        				</a>
               </th>
               <th>
-                <a ui-sref="containers" ng-click="order('Image')">
+                <a ng-click="order('StackName')">
+                  Stack
+                  <span ng-show="sortType == 'StackName' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'StackName' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ng-click="order('Image')">
                   Image
                   <span ng-show="sortType == 'Image' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                   <span ng-show="sortType == 'Image' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
               <th ng-if="state.displayIP">
-                <a ui-sref="containers" ng-click="order('IP')">
+                <a ng-click="order('IP')">
                   IP Address
                   <span ng-show="sortType == 'IP' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                   <span ng-show="sortType == 'IP' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
               <th ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'">
-                <a ui-sref="containers" ng-click="order('Host')">
+                <a ng-click="order('Host')">
                   Host IP
                   <span ng-show="sortType == 'Host' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                   <span ng-show="sortType == 'Host' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
               <th>
-                <a ui-sref="containers" ng-click="order('Ports')">
+                <a ng-click="order('Ports')">
                   Published Ports
                   <span ng-show="sortType == 'Ports' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                   <span ng-show="sortType == 'Ports' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
               <th ng-if="applicationState.application.authentication">
-                <a ui-sref="containers" ng-click="order('ResourceControl.Ownership')">
+                <a ng-click="order('ResourceControl.Ownership')">
                   Ownership
                   <span ng-show="sortType == 'ResourceControl.Ownership' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                   <span ng-show="sortType == 'ResourceControl.Ownership' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
@@ -111,6 +118,7 @@
               </td>
               <td ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'"><a ui-sref="container({id: container.Id})">{{ container|swarmcontainername|truncate: truncate_size}}</a></td>
               <td ng-if="applicationState.endpoint.mode.provider !== 'DOCKER_SWARM'"><a ui-sref="container({id: container.Id})">{{ container|containername|truncate: truncate_size}}</a></td>
+              <td>{{ container.StackName ? container.StackName : '-' }}</td>
               <td><a ui-sref="image({id: container.Image})">{{ container.Image | hideshasum }}</a></td>
               <td ng-if="state.displayIP">{{ container.IP ? container.IP : '-' }}</td>
               <td ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'">{{ container.hostIP }}</td>

app/components/createStack/createStackController.js

@@ -0,0 +1,119 @@
+angular.module('createStack', [])
+.controller('CreateStackController', ['$scope', '$state', '$document', 'StackService', 'CodeMirrorService', 'Authentication', 'Notifications', 'FormValidator', 'ResourceControlService',
+function ($scope, $state, $document, StackService, CodeMirrorService, Authentication, Notifications, FormValidator, ResourceControlService) {
+
+  // Store the editor content when switching builder methods
+  var editorContent = '';
+  var editorEnabled = true;
+
+  $scope.formValues = {
+    Name: '',
+    StackFileContent: '# Define or paste the content of your docker-compose file here',
+    StackFile: null,
+    RepositoryURL: '',
+    RepositoryPath: 'docker-compose.yml',
+    AccessControlData: new AccessControlFormData()
+  };
+
+  $scope.state = {
+    Method: 'editor',
+    formValidationError: ''
+  };
+
+  function validateForm(accessControlData, isAdmin) {
+    $scope.state.formValidationError = '';
+    var error = '';
+    error = FormValidator.validateAccessControl(accessControlData, isAdmin);
+
+    if (error) {
+      $scope.state.formValidationError = error;
+      return false;
+    }
+    return true;
+  }
+
+  function createStack(name) {
+    var method = $scope.state.Method;
+
+    if (method === 'editor') {
+      // The codemirror editor does not work with ng-model so we need to retrieve
+      // the value directly from the editor.
+      var stackFileContent = $scope.editor.getValue();
+
+      return StackService.createStackFromFileContent(name, stackFileContent);
+    } else if (method === 'upload') {
+      var stackFile = $scope.formValues.StackFile;
+      return StackService.createStackFromFileUpload(name, stackFile);
+    } else if (method === 'repository') {
+      var gitRepository = $scope.formValues.RepositoryURL;
+      var pathInRepository = $scope.formValues.RepositoryPath;
+      return StackService.createStackFromGitRepository(name, gitRepository, pathInRepository);
+    }
+  }
+
+  $scope.deployStack = function () {
+    $('#createResourceSpinner').show();
+
+    var name = $scope.formValues.Name;
+
+    var accessControlData = $scope.formValues.AccessControlData;
+    var userDetails = Authentication.getUserDetails();
+    var isAdmin = userDetails.role === 1 ? true : false;
+    var userId = userDetails.ID;
+
+    if (!validateForm(accessControlData, isAdmin)) {
+      $('#createResourceSpinner').hide();
+      return;
+    }
+
+    createStack(name)
+    .then(function success(data) {
+      Notifications.success('Stack successfully deployed');
+    })
+    .catch(function error(err) {
+      Notifications.warning('Deployment error', err.err.data.err);
+    })
+    .then(function success(data) {
+      return ResourceControlService.applyResourceControl('stack', name, userId, accessControlData, []);
+    })
+    .then(function success() {
+      $state.go('stacks');
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to apply resource control on the stack');
+    })
+    .finally(function final() {
+      $('#createResourceSpinner').hide();
+    });
+  };
+
+  function enableEditor(value) {
+    $document.ready(function() {
+      var webEditorElement = $document[0].getElementById('web-editor');
+      if (webEditorElement) {
+        $scope.editor = CodeMirrorService.applyCodeMirrorOnElement(webEditorElement);
+        if (value) {
+          $scope.editor.setValue(value);
+        }
+      }
+    });
+  }
+
+  $scope.toggleEditor = function() {
+    if (!editorEnabled) {
+      enableEditor(editorContent);
+      editorEnabled = true;
+    }
+  };
+
+  $scope.saveEditorContent = function() {
+    editorContent = $scope.editor.getValue();
+    editorEnabled = false;
+  };
+
+  function initView() {
+    enableEditor();
+  }
+
+  initView();
+}]);

app/components/createStack/createstack.html

@@ -0,0 +1,156 @@
+<rd-header>
+  <rd-header-title title="Create stack">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin" style="display: none;"></i>
+  </rd-header-title>
+  <rd-header-content>
+    <a ui-sref="stacks">Stacks</a> > Add stack
+  </rd-header-content>
+</rd-header>
+
+<div class="row">
+  <div class="col-sm-12">
+    <rd-widget>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <!-- name-input -->
+          <div class="form-group">
+            <label for="stack_name" class="col-sm-1 control-label text-left">Name</label>
+            <div class="col-sm-11">
+              <input type="text" class="form-control" ng-model="formValues.Name" id="stack_name" placeholder="e.g. myStack" auto-focus>
+            </div>
+          </div>
+          <!-- !name-input -->
+          <div class="form-group">
+            <span class="col-sm-12 text-muted small">
+              This stack will be deployed using the equivalent of the <code>docker stack deploy</code> command.
+            </span>
+          </div>
+          <!-- build-method -->
+          <div class="col-sm-12 form-section-title">
+            Build method
+          </div>
+          <div class="form-group"></div>
+          <div class="form-group" style="margin-bottom: 0">
+            <div class="boxselector_wrapper">
+              <div>
+                <input type="radio" id="method_editor" ng-model="state.Method" value="editor" ng-click="toggleEditor(state.Method)">
+                <label for="method_editor">
+                  <div class="boxselector_header">
+                    <i class="fa fa-edit" aria-hidden="true" style="margin-right: 2px;"></i>
+                    Web editor
+                  </div>
+                  <p>Use our Web editor</p>
+                </label>
+              </div>
+              <div>
+                <input type="radio" id="method_upload" ng-model="state.Method" value="upload" ng-click="saveEditorContent()">
+                <label for="method_upload">
+                  <div class="boxselector_header">
+                    <i class="fa fa-upload" aria-hidden="true" style="margin-right: 2px;"></i>
+                    Upload
+                  </div>
+                  <p>Upload from your computer</p>
+                </label>
+              </div>
+              <div>
+                <input type="radio" id="method_repository" ng-model="state.Method" value="repository" ng-click="saveEditorContent()">
+                <label for="method_repository">
+                  <div class="boxselector_header">
+                    <i class="fa fa-git" aria-hidden="true" style="margin-right: 2px;"></i>
+                    Repository
+                  </div>
+                  <p>Use a git repository</p>
+                </label>
+              </div>
+            </div>
+          </div>
+          <!-- !build-method -->
+          <!-- web-editor -->
+          <div ng-if="state.Method === 'editor'">
+            <div class="col-sm-12 form-section-title">
+              Web editor
+            </div>
+            <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>.
+              </span>
+            </div>
+            <div class="form-group">
+              <div class="col-sm-12">
+                <textarea id="web-editor" class="form-control" ng-model="formValues.StackFileContent" placeholder='version: "3"'></textarea>
+              </div>
+            </div>
+          </div>
+          <!-- !web-editor -->
+          <!-- upload -->
+          <div ng-if="state.Method === 'upload'">
+            <div class="col-sm-12 form-section-title">
+              Upload
+            </div>
+            <div class="form-group">
+              <span class="col-sm-12 text-muted small">
+                You can upload a Compose file from your computer.
+              </span>
+            </div>
+            <div class="form-group">
+              <div class="col-sm-12">
+                <button class="btn btn-sm btn-primary" ngf-select ng-model="formValues.StackFile">Select file</button>
+                <span style="margin-left: 5px;">
+                  {{ formValues.StackFile.name }}
+                  <i class="fa fa-times red-icon" ng-if="!formValues.StackFile" aria-hidden="true"></i>
+                </span>
+              </div>
+            </div>
+          </div>
+          <!-- !upload -->
+          <!-- repository -->
+          <div ng-if="state.Method === 'repository'">
+            <div class="col-sm-12 form-section-title">
+              Git repository
+            </div>
+            <div class="form-group">
+              <span class="col-sm-12 text-muted small">
+                You can use the URL of a public git repository.
+              </span>
+            </div>
+            <div class="form-group">
+              <label for="stack_repository_url" class="col-sm-2 control-label text-left">Repository URL</label>
+              <div class="col-sm-10">
+                <input type="text" class="form-control" ng-model="formValues.RepositoryURL" id="stack_repository_url" placeholder="https://github.com/portainer/portainer-compose">
+              </div>
+            </div>
+            <div class="form-group">
+              <span class="col-sm-12 text-muted small">
+                Indicate the path to the Compose file from the root of your repository.
+              </span>
+            </div>
+            <div class="form-group">
+              <label for="stack_repository_path" class="col-sm-2 control-label text-left">Compose path</label>
+              <div class="col-sm-10">
+                <input type="text" class="form-control" ng-model="formValues.RepositoryPath" id="stack_repository_path" placeholder="docker-compose.yml">
+              </div>
+            </div>
+          </div>
+          <!-- !repository -->
+          <por-access-control-form form-data="formValues.AccessControlData" ng-if="applicationState.application.authentication"></por-access-control-form>
+          <!-- actions -->
+          <div class="col-sm-12 form-section-title">
+            Actions
+          </div>
+          <div class="form-group">
+            <div class="col-sm-12">
+              <button type="button" class="btn btn-primary btn-sm" ng-disabled="(state.Method === 'editor' && !formValues.StackFileContent)
+              || (state.Method === 'upload' && !formValues.StackFile)
+              || (state.Method === 'repository' && (!formValues.RepositoryURL || !formValues.RepositoryPath))
+              || !formValues.Name" ng-click="deployStack()">Deploy the stack</button>
+              <a type="button" class="btn btn-default btn-sm" ui-sref="stacks">Cancel</a>
+              <i id="createResourceSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
+              <span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px;">{{ state.formValidationError }}</span>
+            </div>
+          </div>
+          <!-- !actions -->
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/dashboard/dashboard.html

@@ -85,6 +85,32 @@
 </div>
 
 <div class="row">
+  <div class="col-xs-12 col-md-6" ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'">
+    <a ui-sref="stacks">
+      <rd-widget>
+        <rd-widget-body>
+          <div class="widget-icon blue pull-left">
+            <i class="fa fa-th-list"></i>
+          </div>
+          <div class="title">{{ stackCount }}</div>
+          <div class="comment">Stacks</div>
+        </rd-widget-body>
+      </rd-widget>
+    </a>
+  </div>
+  <div class="col-xs-12 col-md-6" ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'">
+    <a ui-sref="services">
+      <rd-widget>
+        <rd-widget-body>
+          <div class="widget-icon blue pull-left">
+            <i class="fa fa-list-alt"></i>
+          </div>
+          <div class="title">{{ serviceCount }}</div>
+          <div class="comment">Services</div>
+        </rd-widget-body>
+      </rd-widget>
+    </a>
+  </div>
   <div class="col-xs-12 col-md-6">
     <a ui-sref="containers">
       <rd-widget>

app/components/dashboard/dashboardController.js

@@ -1,6 +1,6 @@
 angular.module('dashboard', [])
-.controller('DashboardController', ['$scope', '$q', 'Container', 'ContainerHelper', 'Image', 'Network', 'Volume', 'SystemService', 'Notifications',
-function ($scope, $q, Container, ContainerHelper, Image, Network, Volume, SystemService, Notifications) {
+.controller('DashboardController', ['$scope', '$q', 'Container', 'ContainerHelper', 'Image', 'Network', 'Volume', 'SystemService', 'ServiceService', 'StackService', 'Notifications',
+function ($scope, $q, Container, ContainerHelper, Image, Network, Volume, SystemService, ServiceService, StackService, Notifications) {
 
   $scope.containerData = {
     total: 0
@@ -15,6 +15,9 @@ function ($scope, $q, Container, ContainerHelper, Image, Network, Volume, System
     total: 0
   };
 
+  $scope.serviceCount = 0;
+  $scope.stackCount = 0;
+
   function prepareContainerData(d) {
     var running = 0;
     var stopped = 0;
@@ -63,18 +66,25 @@ function ($scope, $q, Container, ContainerHelper, Image, Network, Volume, System
 
   function initView() {
     $('#loadingViewSpinner').show();
+
+    var endpointProvider = $scope.applicationState.endpoint.mode.provider;
+
     $q.all([
       Container.query({all: 1}).$promise,
       Image.query({}).$promise,
       Volume.query({}).$promise,
       Network.query({}).$promise,
-      SystemService.info()
+      SystemService.info(),
+      endpointProvider === 'DOCKER_SWARM_MODE' ? ServiceService.services() : [],
+      endpointProvider === 'DOCKER_SWARM_MODE' ? StackService.stacks(true) : []
     ]).then(function (d) {
       prepareContainerData(d[0]);
       prepareImageData(d[1]);
       prepareVolumeData(d[2]);
       prepareNetworkData(d[3]);
       prepareInfoData(d[4]);
+      $scope.serviceCount = d[5].length;
+      $scope.stackCount = d[6].length;
       $('#loadingViewSpinner').hide();
     }, function(e) {
       $('#loadingViewSpinner').hide();

app/components/networks/networks.html

@@ -48,10 +48,10 @@
                   </a>
                 </th>
                 <th>
-                  <a ng-click="order('Id')">
-                    Id
-                    <span ng-show="sortType == 'Id' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                    <span ng-show="sortType == 'Id' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  <a ng-click="order('StackName')">
+                    Stack
+                    <span ng-show="sortType == 'StackName' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'StackName' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                   </a>
                 </th>
                 <th>
@@ -101,8 +101,8 @@
             <tbody>
               <tr dir-paginate="network in ( state.filteredNetworks = (networks | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: state.pagination_count))">
                 <td><input type="checkbox" ng-model="network.Checked" ng-change="selectItem(network)"/></td>
-                <td><a ui-sref="network({id: network.Id})">{{ network.Name|truncate:40}}</a></td>
-                <td class="monospaced">{{ network.Id|truncate:20 }}</td>
+                <td><a ui-sref="network({id: network.Id})">{{ network.Name | truncate:40 }}</a></td>
+                <td>{{ network.StackName ? network.StackName : '-' }}</td>
                 <td>{{ network.Scope }}</td>
                 <td>{{ network.Driver }}</td>
                 <td>{{ network.IPAM.Driver }}</td>

app/components/service/serviceController.js

@@ -321,7 +321,7 @@ function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll,
       originalService = angular.copy(service);
 
       return $q.all({
-        tasks: TaskService.serviceTasks(service.Name),
+        tasks: TaskService.tasks({ service: [service.Name] }),
         nodes: NodeService.nodes(),
         secrets: apiVersion >= 1.25 ? SecretService.secrets() : []
       });

app/components/services/services.html

@@ -38,42 +38,49 @@
             <thead>
               <th></th>
               <th>
-                <a ui-sref="services" ng-click="order('Name')">
+                <a ng-click="order('Name')">
                   Name
                   <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                   <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
               <th>
-                <a ui-sref="services" ng-click="order('Image')">
+                <a ng-click="order('StackName')">
+                  Stack
+                  <span ng-show="sortType == 'StackName' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'StackName' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ng-click="order('Image')">
                   Image
                   <span ng-show="sortType == 'Image' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                   <span ng-show="sortType == 'Image' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
               <th>
-                <a ui-sref="services" ng-click="order('Mode')">
+                <a ng-click="order('Mode')">
                   Scheduling mode
                   <span ng-show="sortType == 'Mode' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                   <span ng-show="sortType == 'Mode' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
               <th>
-                <a ui-sref="services" ng-click="order('Ports')">
+                <a ng-click="order('Ports')">
                   Published Ports
                   <span ng-show="sortType == 'Ports' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                   <span ng-show="sortType == 'Ports' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
               <th>
-                <a ui-sref="services" ng-click="order('UpdatedAt')">
+                <a ng-click="order('UpdatedAt')">
                   Updated at
                   <span ng-show="sortType == 'UpdatedAt' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                   <span ng-show="sortType == 'UpdatedAt' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
               <th ng-if="applicationState.application.authentication">
-                <a ui-sref="services" ng-click="order('ResourceControl.Ownership')">
+                <a ng-click="order('ResourceControl.Ownership')">
                   Ownership
                   <span ng-show="sortType == 'ResourceControl.Ownership' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                   <span ng-show="sortType == 'ResourceControl.Ownership' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
@@ -84,6 +91,7 @@
               <tr dir-paginate="service in (state.filteredServices = ( services | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: state.pagination_count))">
                 <td><input type="checkbox" ng-model="service.Checked" ng-change="selectItem(service)"/></td>
                 <td><a ui-sref="service({id: service.Id})">{{ service.Name }}</a></td>
+                <td>{{ service.StackName ? service.StackName : '-' }}</td>
                 <td>{{ service.Image | hideshasum }}</td>
                 <td>
                   {{ service.Mode }}

app/components/sidebar/sidebar.html

@@ -25,6 +25,9 @@
         <a ui-sref="templates_linuxserver" ui-sref-active="active">LinuxServer.io</a>
       </div>
     </li>
+    <li class="sidebar-list" ng-if="applicationState.endpoint.apiVersion >= 1.25 && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' && applicationState.endpoint.mode.role === 'MANAGER'">
+      <a ui-sref="stacks" ui-sref-active="active">Stacks <span class="menu-icon fa fa-th-list"></span></a>
+    </li>
     <li class="sidebar-list" ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' && applicationState.endpoint.mode.role === 'MANAGER'">
       <a ui-sref="services" ui-sref-active="active">Services <span class="menu-icon fa fa-list-alt"></span></a>
     </li>

app/components/stack/stack.html

@@ -0,0 +1,54 @@
+<rd-header>
+  <rd-header-title title="Stack details">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="stack({id: stack.Id})" ui-sref-opts="{reload: true}">
+      <i class="fa fa-refresh" aria-hidden="true"></i>
+    </a>
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
+  <rd-header-content>
+    <a ui-sref="stacks">Stacks</a> > <a ui-sref="stack({id: stack.Id})">{{ stack.Name }}</a>
+  </rd-header-content>
+</rd-header>
+
+<!-- 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 -->
+
+<por-service-list services="services" nodes="nodes"></por-service-list>
+<por-task-list tasks="tasks" nodes="nodes"></por-task-list>
+
+<div class="row" ng-if="stackFileContent">
+  <div class="col-sm-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-pencil" title="Stack editor"></rd-widget-header>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <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>.
+            </span>
+          </div>
+          <div class="form-group">
+            <div class="col-sm-12">
+              <textarea id="web-editor" class="form-control" ng-model="stackFileContent" placeholder='version: "3"'></textarea>
+            </div>
+          </div>
+          <div class="col-sm-12 form-section-title">
+            Actions
+          </div>
+          <div class="form-group">
+            <div class="col-sm-12">
+              <button type="button" class="btn btn-sm btn-primary" ng-click="deployStack()">Update stack</button>
+              <i id="createResourceSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
+            </div>
+          </div>
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/stack/stackController.js

@@ -0,0 +1,78 @@
+angular.module('stack', [])
+.controller('StackController', ['$q', '$scope', '$state', '$stateParams', '$document', 'StackService', 'NodeService', 'ServiceService', 'TaskService', 'ServiceHelper', 'CodeMirrorService', 'Notifications',
+function ($q, $scope, $state, $stateParams, $document, StackService, NodeService, ServiceService, TaskService, ServiceHelper, CodeMirrorService, Notifications) {
+
+  $scope.deployStack = function () {
+    $('#createResourceSpinner').show();
+
+    // The codemirror editor does not work with ng-model so we need to retrieve
+    // the value directly from the editor.
+    var stackFile = $scope.editor.getValue();
+
+    StackService.updateStack($scope.stack.Id, stackFile)
+    .then(function success(data) {
+      Notifications.success('Stack successfully deployed');
+      $state.reload();
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to create stack');
+    })
+    .finally(function final() {
+      $('#createResourceSpinner').hide();
+    });
+  };
+
+  function initView() {
+    $('#loadingViewSpinner').show();
+    var stackId = $stateParams.id;
+
+    StackService.stack(stackId)
+    .then(function success(data) {
+      var stack = data;
+      $scope.stack = stack;
+
+      var serviceFilters = {
+        label: ['com.docker.stack.namespace=' + stack.Name]
+      };
+
+      return $q.all({
+        stackFile: StackService.getStackFile(stackId),
+        services: ServiceService.services(serviceFilters),
+        tasks: TaskService.tasks(serviceFilters),
+        nodes: NodeService.nodes()
+      });
+    })
+    .then(function success(data) {
+      $scope.stackFileContent = data.stackFile;
+
+      $document.ready(function() {
+        var webEditorElement = $document[0].getElementById('web-editor');
+        if (webEditorElement) {
+          $scope.editor = CodeMirrorService.applyCodeMirrorOnElement(webEditorElement);
+        }
+      });
+
+      $scope.nodes = data.nodes;
+
+      var services = data.services;
+
+      var tasks = data.tasks;
+      $scope.tasks = tasks;
+
+      for (var i = 0; i < services.length; i++) {
+        var service = services[i];
+        ServiceHelper.associateTasksToService(service, tasks);
+      }
+
+      $scope.services = services;
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to retrieve tasks details');
+    })
+    .finally(function final() {
+      $('#loadingViewSpinner').hide();
+    });
+  }
+
+  initView();
+}]);

app/components/stacks/stacks.html

@@ -0,0 +1,120 @@
+<rd-header>
+  <rd-header-title title="Stacks list">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="stacks" ui-sref-opts="{reload: true}">
+      <i class="fa fa-refresh" aria-hidden="true"></i>
+    </a>
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px;"></i>
+  </rd-header-title>
+  <rd-header-content>Stacks</rd-header-content>
+</rd-header>
+
+<div class="row" ng-if="state.DisplayInformationPanel">
+  <div class="col-sm-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-info-circle" title="Information"></rd-widget-header>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <div class="form-group">
+            <span class="col-sm-12 text-muted small">
+              Stacks marked with the <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true"></i> icon are external stacks that were created outside of Portainer. You'll not be able to execute any actions against these stacks.
+            </span>
+          </div>
+          <div class="col-sm-12 form-section-title">
+            Filters
+          </div>
+          <div class="form-group">
+            <div class="col-sm-12">
+              <label class="control-label text-left">
+                Display external stacks
+              </label>
+              <label class="switch" style="margin-left: 20px;">
+                <input type="checkbox" ng-model="state.DisplayExternalStacks"><i></i>
+              </label>
+            </div>
+          </div>
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-sm-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-th-list" title="Stacks">
+        <div class="pull-right">
+          Items per page:
+          <select ng-model="state.pagination_count" ng-change="changePaginationCount()">
+            <option value="0">All</option>
+            <option value="10">10</option>
+            <option value="25">25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+          </select>
+        </div>
+      </rd-widget-header>
+      <rd-widget-taskbar classes="col-lg-12 col-md-12 col-xs-12">
+        <div class="pull-left">
+          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
+          <a class="btn btn-primary" type="button" ui-sref="actions.create.stack"><i class="fa fa-plus space-right" aria-hidden="true"></i>Add stack</a>
+        </div>
+        <div class="pull-right">
+          <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
+        </div>
+      </rd-widget-taskbar>
+      <rd-widget-body classes="no-padding">
+        <div class="table-responsive">
+          <table class="table table-hover">
+            <thead>
+              <th>
+                <input type="checkbox" ng-model="allSelected" ng-change="selectItems(allSelected)" />
+              </th>
+              <th>
+                <a ng-click="order('Name')">
+                  Name
+                  <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th ng-if="applicationState.application.authentication">
+                <a ng-click="order('ResourceControl.Ownership')">
+                  Ownership
+                  <span ng-show="sortType == 'ResourceControl.Ownership' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'ResourceControl.Ownership' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+            </thead>
+            <tbody>
+              <tr dir-paginate="stack in (state.filteredStacks = ( stacks | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: state.pagination_count))" ng-if="state.DisplayExternalStacks || (!state.DisplayExternalStacks && !stack.External)">
+                <td><input type="checkbox" ng-model="stack.Checked" ng-change="selectItem(stack)" ng-disabled="!stack.Id"/></td>
+                <td>
+                  <span ng-if="stack.Id">
+                    <a ui-sref="stack({ id: stack.Id })">{{ stack.Name }}</a>
+                  </span>
+                  <span ng-if="!stack.Id">
+                    {{ stack.Name }} <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true"></i>
+                  </span>
+                </td>
+                <td ng-if="applicationState.application.authentication">
+                  <span>
+                    <i ng-class="stack.ResourceControl.Ownership | ownershipicon" aria-hidden="true"></i>
+                    {{ stack.ResourceControl.Ownership ? stack.ResourceControl.Ownership : stack.ResourceControl.Ownership = 'public' }}
+                  </span>
+                </td>
+              </tr>
+              <tr ng-if="!stacks">
+                <td colspan="3" class="text-center text-muted">Loading...</td>
+              </tr>
+              <tr ng-if="stacks.length === 0">
+                <td colspan="3" class="text-center text-muted">No stacks available.</td>
+              </tr>
+            </tbody>
+          </table>
+          <div ng-if="stacks" class="pull-left pagination-controls">
+            <dir-pagination-controls></dir-pagination-controls>
+          </div>
+        </div>
+      </rd-widget-body>
+    <rd-widget>
+  </div>
+</div>

app/components/stacks/stacksController.js

@@ -0,0 +1,103 @@
+angular.module('stacks', [])
+.controller('StacksController', ['$scope', 'Notifications', 'Pagination', 'StackService', 'ModalService',
+function ($scope, Notifications, Pagination, StackService, ModalService) {
+  $scope.state = {};
+  $scope.state.selectedItemCount = 0;
+  $scope.state.pagination_count = Pagination.getPaginationCount('stacks');
+  $scope.sortType = 'Name';
+  $scope.sortReverse = false;
+  $scope.state.DisplayInformationPanel = false;
+  $scope.state.DisplayExternalStacks = true;
+
+  $scope.changePaginationCount = function() {
+    Pagination.setPaginationCount('stacks', $scope.state.pagination_count);
+  };
+
+  $scope.order = function (sortType) {
+    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+    $scope.sortType = sortType;
+  };
+
+  $scope.selectItems = function (allSelected) {
+    angular.forEach($scope.state.filteredStacks, function (stack) {
+      if (stack.Id && stack.Checked !== allSelected) {
+        stack.Checked = allSelected;
+        $scope.selectItem(stack);
+      }
+    });
+  };
+
+  $scope.selectItem = function (item) {
+    if (item.Checked) {
+      $scope.state.selectedItemCount++;
+    } else {
+      $scope.state.selectedItemCount--;
+    }
+  };
+
+  $scope.removeAction = function () {
+    ModalService.confirmDeletion(
+      'Do you want to remove the selected stack(s)? Associated services will be removed as well.',
+      function onConfirm(confirmed) {
+        if(!confirmed) { return; }
+        deleteSelectedStacks();
+      }
+    );
+  };
+
+  function deleteSelectedStacks() {
+    $('#loadingViewSpinner').show();
+    var counter = 0;
+
+    var complete = function () {
+      counter = counter - 1;
+      if (counter === 0) {
+        $('#loadingViewSpinner').hide();
+      }
+    };
+
+    angular.forEach($scope.stacks, function (stack) {
+      if (stack.Checked) {
+        counter = counter + 1;
+        StackService.remove(stack)
+        .then(function success() {
+          Notifications.success('Stack deleted', stack.Name);
+          var index = $scope.stacks.indexOf(stack);
+          $scope.stacks.splice(index, 1);
+        })
+        .catch(function error(err) {
+          Notifications.error('Failure', err, 'Unable to remove stack ' + stack.Name);
+        })
+        .finally(function final() {
+          complete();
+        });
+      }
+    });
+  }
+
+  function initView() {
+    $('#loadingViewSpinner').show();
+
+    StackService.stacks(true)
+    .then(function success(data) {
+      var stacks = data;
+      for (var i = 0; i < stacks.length; i++) {
+        var stack = stacks[i];
+        if (stack.External) {
+          $scope.state.DisplayInformationPanel = true;
+          break;
+        }
+      }
+      $scope.stacks = stacks;
+    })
+    .catch(function error(err) {
+      $scope.stacks = [];
+      Notifications.error('Failure', err, 'Unable to retrieve stacks');
+    })
+    .finally(function final() {
+      $('#loadingViewSpinner').hide();
+    });
+  }
+
+  initView();
+}]);

app/components/volumes/volumes.html

@@ -57,6 +57,13 @@
                   <span ng-show="sortType == 'Id' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
+              <th>
+                <a ui-sref="volumes" ng-click="order('StackName')">
+                  Stack
+                  <span ng-show="sortType == 'StackName' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'StackName' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
               <th>
                 <a ui-sref="volumes" ng-click="order('Driver')">
                   Driver
@@ -87,6 +94,7 @@
                 <a ui-sref="volume({id: volume.Id})" class="monospaced">{{ volume.Id|truncate:25 }}</a>
                 <span style="margin-left: 10px;" class="label label-warning image-tag" ng-if="volume.dangling">Unused</span></td>
               </td>
+              <td>{{ volume.StackName ? volume.StackName : '-' }}</td>
               <td>{{ volume.Driver }}</td>
               <td>{{ volume.Mountpoint | truncatelr }}</td>
               <td ng-if="applicationState.application.authentication">