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