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: '<',

app/edge/components/groups-datatable/groupsDatatable.html

@@ -74,11 +74,17 @@
             >
               <td>
                 <span class="md-checkbox">
-                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-disabled="item.HasEdgeStack" ng-click="$ctrl.selectItem(item, $event)" />
+                  <input
+                    id="select_{{ $index }}"
+                    type="checkbox"
+                    ng-model="item.Checked"
+                    ng-disabled="item.HasEdgeStack || item.HasEdgeGroup"
+                    ng-click="$ctrl.selectItem(item, $event)"
+                  />
                   <label for="select_{{ $index }}"></label>
                 </span>
                 <a ui-sref="edge.groups.edit({groupId: item.Id})">{{ item.Name }}</a>
-                <span ng-if="item.HasEdgeStack" class="label label-info image-tag space-left">in use</span>
+                <span ng-if="item.HasEdgeStack || item.HasEdgeGroup" class="label label-info image-tag space-left">in use</span>
               </td>
               <td>{{ item.Endpoints.length }}</td>
               <td>{{ item.Dynamic ? 'Dynamic' : 'Static' }}</td>

app/edge/views/edge-jobs/createEdgeJobView/createEdgeJobView.html

@@ -8,6 +8,7 @@
           model="$ctrl.model"
           groups="$ctrl.groups"
           tags="$ctrl.tags"
+          edge-groups="$ctrl.edgeGroups"
           form-action="$ctrl.create"
           form-action-label="Create edge job"
           action-in-progress="$ctrl.state.actionInProgress"

app/edge/views/edge-jobs/createEdgeJobView/createEdgeJobViewController.js

@@ -13,6 +13,7 @@ export class CreateEdgeJobViewController {
       Endpoints: [],
       FileContent: '',
       File: null,
+      EdgeGroups: [],
     };
 
     this.$async = $async;

app/edge/views/edge-jobs/edgeJob/edgeJob.html

@@ -16,6 +16,7 @@
               endpoints="endpoints"
               groups="$ctrl.groups"
               tags="$ctrl.tags"
+              edge-groups="$ctrl.edgeGroups"
               form-action="$ctrl.update"
               form-action-label="Update Edge job"
               action-in-progress="$ctrl.state.actionInProgress"

app/edge/views/edge-jobs/edgeJob/edgeJobController.js

@@ -153,6 +153,8 @@ export class EdgeJobController {
       this.groups = groups;
       this.tags = tags;
 
+      this.edgeJob.EdgeGroups = this.edgeJob.EdgeGroups ? this.edgeJob.EdgeGroups : [];
+
       if (results.length > 0) {
         const endpointIds = _.map(results, (result) => result.EndpointId);
         const endpoints = await getEnvironments({ query: { endpointIds } });