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-groups/createEdgeGroupView/createEdgeGroupView.html

@@ -0,0 +1,23 @@
+<rd-header>
+  <rd-header-title title-text="Create edge group"></rd-header-title>
+  <rd-header-content> <a ui-sref="edge.groups">Edge groups</a> &gt; Add edge group </rd-header-content>
+</rd-header>
+
+<div class="row">
+  <div class="col-sm-12">
+    <rd-widget>
+      <rd-widget-body>
+        <edge-group-form
+          loaded="$ctrl.state.loaded"
+          page-type="create"
+          form-action-label="Add edge group"
+          form-action="$ctrl.createGroup"
+          groups="$ctrl.endpointGroups"
+          tags="$ctrl.tags"
+          model="$ctrl.model"
+          on-change-tags="($ctrl.onChangeTags)"
+        ></edge-group-form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/edge/views/edge-groups/createEdgeGroupView/createEdgeGroupViewController.js

@@ -0,0 +1,51 @@
+export class CreateEdgeGroupController {
+  /* @ngInject */
+  constructor(EdgeGroupService, GroupService, TagService, Notifications, $state, $async) {
+    this.EdgeGroupService = EdgeGroupService;
+    this.GroupService = GroupService;
+    this.TagService = TagService;
+    this.Notifications = Notifications;
+    this.$state = $state;
+    this.$async = $async;
+
+    this.state = {
+      actionInProgress: false,
+      loaded: false,
+    };
+
+    this.model = {
+      Name: '',
+      Endpoints: [],
+      Dynamic: false,
+      TagIds: [],
+      PartialMatch: false,
+    };
+
+    this.createGroup = this.createGroup.bind(this);
+    this.createGroupAsync = this.createGroupAsync.bind(this);
+  }
+
+  async $onInit() {
+    const [tags, endpointGroups] = await Promise.all([this.TagService.tags(), this.GroupService.groups()]);
+    this.tags = tags;
+    this.endpointGroups = endpointGroups;
+    this.state.loaded = true;
+  }
+
+  createGroup() {
+    return this.$async(this.createGroupAsync);
+  }
+
+  async createGroupAsync() {
+    this.state.actionInProgress = true;
+    try {
+      await this.EdgeGroupService.create(this.model);
+      this.Notifications.success('Edge group successfully created');
+      this.$state.go('edge.groups');
+    } catch (err) {
+      this.Notifications.error('Failure', err, 'Unable to create edge group');
+    } finally {
+      this.state.actionInProgress = false;
+    }
+  }
+}

app/edge/views/edge-groups/createEdgeGroupView/index.js

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

app/edge/views/edge-groups/edgeGroupsView/edgeGroupsView.html

@@ -0,0 +1,14 @@
+<rd-header>
+  <rd-header-title title-text="Edge Groups">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="edge.groups" ui-sref-opts="{reload: true}">
+      <i class="fa fa-sync" aria-hidden="true"></i>
+    </a>
+  </rd-header-title>
+  <rd-header-content>Edge Groups</rd-header-content>
+</rd-header>
+
+<div class="row">
+  <div class="col-sm-12">
+    <edge-groups-datatable title-icon="fa-object-group" table-key="EdgeGroups" order-by="Name" dataset="$ctrl.items" remove-action="$ctrl.removeAction"></edge-groups-datatable>
+  </div>
+</div>

app/edge/views/edge-groups/edgeGroupsView/edgeGroupsViewController.js

@@ -0,0 +1,42 @@
+import _ from 'lodash-es';
+
+export class EdgeGroupsController {
+  /* @ngInject */
+  constructor($async, $state, EdgeGroupService, Notifications) {
+    this.$async = $async;
+    this.$state = $state;
+    this.EdgeGroupService = EdgeGroupService;
+    this.Notifications = Notifications;
+
+    this.removeAction = this.removeAction.bind(this);
+    this.removeActionAsync = this.removeActionAsync.bind(this);
+  }
+
+  async $onInit() {
+    try {
+      this.items = await this.EdgeGroupService.groups();
+    } catch (err) {
+      this.items = [];
+      this.Notifications.error('Failure', err, 'Unable to retrieve Edge groups');
+    }
+  }
+
+  removeAction(selectedItems) {
+    return this.$async(this.removeActionAsync, selectedItems);
+  }
+
+  async removeActionAsync(selectedItems) {
+    for (let item of selectedItems) {
+      try {
+        await this.EdgeGroupService.remove(item.Id);
+
+        this.Notifications.success('Edge Group successfully removed', item.Name);
+        _.remove(this.items, item);
+      } catch (err) {
+        this.Notifications.error('Failure', err, 'Unable to remove Edge Group');
+      }
+    }
+
+    this.$state.reload();
+  }
+}

app/edge/views/edge-groups/edgeGroupsView/index.js

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

app/edge/views/edge-groups/editEdgeGroupView/editEdgeGroupView.html

@@ -0,0 +1,23 @@
+<rd-header>
+  <rd-header-title title-text="Edit edge group"></rd-header-title>
+  <rd-header-content> <a ui-sref="edge.groups">Edge Groups</a> &gt; {{ $ctrl.model.Name }} </rd-header-content>
+</rd-header>
+
+<div class="row" ng-if="$ctrl.model">
+  <div class="col-sm-12">
+    <rd-widget>
+      <rd-widget-body>
+        <edge-group-form
+          loaded="$ctrl.state.loaded"
+          page-type="edit"
+          form-action-label="Save edge group"
+          form-action="$ctrl.updateGroup"
+          endpoints="$ctrl.endpoints"
+          groups="$ctrl.endpointGroups"
+          tags="$ctrl.tags"
+          model="$ctrl.model"
+        ></edge-group-form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/edge/views/edge-groups/editEdgeGroupView/editEdgeGroupViewController.js

@@ -0,0 +1,51 @@
+export class EditEdgeGroupController {
+  /* @ngInject */
+  constructor(EdgeGroupService, GroupService, TagService, Notifications, $state, $async, EndpointService, EndpointHelper) {
+    this.EdgeGroupService = EdgeGroupService;
+    this.GroupService = GroupService;
+    this.TagService = TagService;
+    this.Notifications = Notifications;
+    this.$state = $state;
+    this.$async = $async;
+    this.EndpointService = EndpointService;
+    this.EndpointHelper = EndpointHelper;
+
+    this.state = {
+      actionInProgress: false,
+      loaded: false,
+    };
+
+    this.updateGroup = this.updateGroup.bind(this);
+    this.updateGroupAsync = this.updateGroupAsync.bind(this);
+  }
+
+  async $onInit() {
+    const [tags, endpointGroups, group] = await Promise.all([this.TagService.tags(), this.GroupService.groups(), this.EdgeGroupService.group(this.$state.params.groupId)]);
+
+    if (!group) {
+      this.Notifications.error('Failed to find edge group', {});
+      this.$state.go('edge.groups');
+    }
+    this.tags = tags;
+    this.endpointGroups = endpointGroups;
+    this.model = group;
+    this.state.loaded = true;
+  }
+
+  updateGroup() {
+    return this.$async(this.updateGroupAsync);
+  }
+
+  async updateGroupAsync() {
+    this.state.actionInProgress = true;
+    try {
+      await this.EdgeGroupService.update(this.model);
+      this.Notifications.success('Edge group successfully updated');
+      this.$state.go('edge.groups');
+    } catch (err) {
+      this.Notifications.error('Failure', err, 'Unable to update edge group');
+    } finally {
+      this.state.actionInProgress = false;
+    }
+  }
+}

app/edge/views/edge-groups/editEdgeGroupView/index.js

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