feat(edgejobs): support edge groups when using edge jobs EE-3873 (#8099)

app/edge/components/edge-job-form/edgeJobForm.html

@@ -214,6 +214,17 @@
     </div>
   </div>
   <!-- !upload -->
+
+  <div class="col-sm-12 form-section-title"> Edge Groups </div>
+  <div class="form-group" ng-if="$ctrl.edgeGroups">
+    <div class="col-sm-12">
+      <edge-groups-selector ng-if="!$ctrl.noGroups" value="$ctrl.model.EdgeGroups" on-change="($ctrl.onChangeGroups)" items="$ctrl.edgeGroups"></edge-groups-selector>
+    </div>
+    <div ng-if="$ctrl.noGroups" class="col-sm-12 small text-muted">
+      No Edge groups are available. Head over to the <a ui-sref="edge.groups">Edge groups view</a> to create one.
+    </div>
+  </div>
+
   <div class="col-sm-12 form-section-title"> Target environments </div>
   <!-- node-selection -->
   <associated-endpoints-selector
@@ -233,7 +244,7 @@
         type="button"
         class="btn btn-primary btn-sm"
         ng-disabled="$ctrl.actionInProgress || !edgeJobForm.$valid
-        || $ctrl.model.Endpoints.length === 0
+        || ($ctrl.model.Endpoints.length === 0 && $ctrl.model.EdgeGroups.length === 0)
         || ($ctrl.formValues.method === 'upload' && !$ctrl.model.File)
         || ($ctrl.formValues.method === 'editor' && !$ctrl.model.FileContent)
         "

app/edge/components/edge-job-form/edgeJobFormController.js

@@ -3,7 +3,7 @@ import moment from 'moment';
 
 export class EdgeJobFormController {
   /* @ngInject */
-  constructor() {
+  constructor($async, $scope, EdgeGroupService, Notifications) {
     this.state = {
       formValidationError: '',
     };
@@ -34,10 +34,17 @@ export class EdgeJobFormController {
     this.cronRegex =
       /(@(annually|yearly|monthly|weekly|daily|hourly|reboot))|(@every (\d+(ns|us|µs|ms|s|m|h))+)|((((\d+,)+\d+|(\d+(\/|-)\d+)|\d+|\*) ){4,6}((\d+,)+\d+|(\d+(\/|-)\d+)|\d+|\*))/;
 
+    this.$async = $async;
+    this.$scope = $scope;
+
     this.action = this.action.bind(this);
     this.editorUpdate = this.editorUpdate.bind(this);
     this.associateEndpoint = this.associateEndpoint.bind(this);
     this.dissociateEndpoint = this.dissociateEndpoint.bind(this);
+    this.onChangeGroups = this.onChangeGroups.bind(this);
+
+    this.EdgeGroupService = EdgeGroupService;
+    this.Notifications = Notifications;
   }
 
   onChangeModel(model) {
@@ -50,6 +57,12 @@ export class EdgeJobFormController {
     };
   }
 
+  onChangeGroups(groups) {
+    return this.$scope.$evalAsync(() => {
+      this.model.EdgeGroups = groups ? groups : [];
+    });
+  }
+
   action() {
     this.state.formValidationError = '';
 
@@ -89,8 +102,18 @@ export class EdgeJobFormController {
     this.model.Endpoints = _.filter(this.model.Endpoints, (id) => id !== endpoint.Id);
   }
 
+  async getEdgeGroups() {
+    try {
+      this.edgeGroups = await this.EdgeGroupService.groups();
+      this.noGroups = this.edgeGroups.length === 0;
+    } catch (err) {
+      this.Notifications.error('Failure', err, 'Unable to retrieve Edge groups');
+    }
+  }
+
   $onInit() {
     this.onChangeModel(this.model);
+    this.getEdgeGroups();
   }
 }
 

app/edge/components/edge-job-form/index.js

@@ -9,6 +9,7 @@ angular.module('portainer.edge').component('edgeJobForm', {
     model: '=',
     groups: '<',
     tags: '<',
+    edgeGroups: '<',
     addLabelAction: '<',
     removeLabelAction: '<',
     formAction: '<',