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

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();
+}]);