refactor(edge-compute): enforce es6 good practices (#3961)

* refactor(edge-groups): use es6 imports

* refactor(edge-jobs): es6 imports

* refactor(edge-stacks): use es6 imports

* refactor(edge-compute): use es6 imports in components

* refactor(edge-compute): use named imports

app/edge/views/edge-stacks/editEdgeStackView/editEdgeStackView.html

@@ -0,0 +1,46 @@
+<rd-header>
+  <rd-header-title title-text="Edit Edge stack">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="edge.stacks.edit({stackId:$ctrl.stack.Id, tab: $ctrl.state.activeTab})" ui-sref-opts="{reload: true}">
+      <i class="fa fa-sync" aria-hidden="true"></i>
+    </a>
+  </rd-header-title>
+  <rd-header-content> <a ui-sref="edge.stacks">Edge Stacks</a> &gt; {{ $ctrl.stack.Name }} </rd-header-content>
+</rd-header>
+
+<div class="row" ng-if="$ctrl.stack">
+  <div class="col-sm-12">
+    <rd-widget>
+      <rd-widget-body classes="no-padding">
+        <uib-tabset active="$ctrl.state.activeTab" justified="true" type="pills">
+          <uib-tab index="0" classes="btn-sm">
+            <uib-tab-heading> <i class="fa fa-layer-group space-right" aria-hidden="true"></i> Stack</uib-tab-heading>
+
+            <div style="padding: 20px;">
+              <edit-edge-stack-form
+                edge-groups="$ctrl.edgeGroups"
+                model="$ctrl.formValues"
+                action-in-progress="$ctrl.state.actionInProgress"
+                submit-action="$ctrl.deployStack"
+              ></edit-edge-stack-form>
+            </div>
+          </uib-tab>
+          <uib-tab index="1" classes="btn-sm">
+            <uib-tab-heading> <i class="fa fa-plug space-right" aria-hidden="true"></i> Endpoints</uib-tab-heading>
+
+            <div style="margin-top: 25px;">
+              <edge-stack-endpoints-datatable
+                title-text="Endpoints Status"
+                dataset="$ctrl.endpoints"
+                title-icon="fa-plug"
+                table-key="edgeStackEndpoints"
+                order-by="Name"
+                retrieve-page="$ctrl.getPaginatedEndpoints"
+              >
+              </edge-stack-endpoints-datatable>
+            </div>
+          </uib-tab>
+        </uib-tabset>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/edge/views/edge-stacks/editEdgeStackView/editEdgeStackViewController.js

@@ -0,0 +1,92 @@
+import _ from 'lodash-es';
+
+export class EditEdgeStackViewController {
+  constructor($async, $state, EdgeGroupService, EdgeStackService, EndpointService, Notifications) {
+    this.$async = $async;
+    this.$state = $state;
+    this.EdgeGroupService = EdgeGroupService;
+    this.EdgeStackService = EdgeStackService;
+    this.EndpointService = EndpointService;
+    this.Notifications = Notifications;
+
+    this.stack = null;
+    this.edgeGroups = null;
+
+    this.state = {
+      actionInProgress: false,
+      activeTab: 0,
+    };
+
+    this.deployStack = this.deployStack.bind(this);
+    this.deployStackAsync = this.deployStackAsync.bind(this);
+    this.getPaginatedEndpoints = this.getPaginatedEndpoints.bind(this);
+    this.getPaginatedEndpointsAsync = this.getPaginatedEndpointsAsync.bind(this);
+  }
+
+  async $onInit() {
+    const { stackId, tab } = this.$state.params;
+    this.state.activeTab = tab;
+    try {
+      const [edgeGroups, model, file] = await Promise.all([this.EdgeGroupService.groups(), this.EdgeStackService.stack(stackId), this.EdgeStackService.stackFile(stackId)]);
+      this.edgeGroups = edgeGroups;
+      this.stack = model;
+      this.stackEndpointIds = this.filterStackEndpoints(model.EdgeGroups, edgeGroups);
+      this.originalFileContent = file;
+      this.formValues = {
+        StackFileContent: file,
+        EdgeGroups: this.stack.EdgeGroups,
+        Prune: this.stack.Prune,
+      };
+    } catch (err) {
+      this.Notifications.error('Failure', err, 'Unable to retrieve stack data');
+    }
+  }
+
+  filterStackEndpoints(groupIds, groups) {
+    return _.flatten(
+      _.map(groupIds, (Id) => {
+        const group = _.find(groups, { Id });
+        return group.Endpoints;
+      })
+    );
+  }
+
+  deployStack() {
+    return this.$async(this.deployStackAsync);
+  }
+
+  async deployStackAsync() {
+    this.state.actionInProgress = true;
+    try {
+      if (this.originalFileContent != this.formValues.StackFileContent) {
+        this.formValues.Version = this.stack.Version + 1;
+      }
+      await this.EdgeStackService.updateStack(this.stack.Id, this.formValues);
+      this.Notifications.success('Stack successfully deployed');
+      this.$state.go('edge.stacks');
+    } catch (err) {
+      this.Notifications.error('Deployment error', err, 'Unable to deploy stack');
+    } finally {
+      this.state.actionInProgress = false;
+    }
+  }
+
+  getPaginatedEndpoints(...args) {
+    return this.$async(this.getPaginatedEndpointsAsync, ...args);
+  }
+
+  async getPaginatedEndpointsAsync(lastId, limit, search) {
+    try {
+      const query = { search, type: 4, endpointIds: this.stackEndpointIds };
+      const { value, totalCount } = await this.EndpointService.endpoints(lastId, limit, query);
+      const endpoints = _.map(value, (endpoint) => {
+        const status = this.stack.Status[endpoint.Id];
+        endpoint.Status = status;
+        return endpoint;
+      });
+      return { endpoints, totalCount };
+    } catch (err) {
+      this.Notifications.error('Failure', err, 'Unable to retrieve endpoint information');
+    }
+  }
+}

app/edge/views/edge-stacks/editEdgeStackView/index.js

@@ -0,0 +1,8 @@
+import angular from 'angular';
+
+import { EditEdgeStackViewController } from './editEdgeStackViewController';
+
+angular.module('portainer.edge').component('editEdgeStackView', {
+  templateUrl: './editEdgeStackView.html',
+  controller: EditEdgeStackViewController,
+});