fix(app/environments): retain previously selected environments [EE-3233] (#7358)

app/portainer/__module.js

@@ -166,8 +166,7 @@ angular
         url: '/endpoints',
         views: {
           'content@': {
-            templateUrl: './views/endpoints/endpoints.html',
+            component: 'endpointsView',
-            controller: 'EndpointsController',
           },
         },
       };

app/portainer/components/datatables/endpoints-datatable/endpointsDatatableController.js

@@ -1,9 +1,10 @@
+import _ from 'lodash-es';
+
 angular.module('portainer.app').controller('EndpointsDatatableController', [
   '$scope',
   '$controller',
   'DatatableService',
   'PaginationService',
-  'Notifications',
   function ($scope, $controller, DatatableService, PaginationService) {
     angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
 
@@ -15,18 +16,18 @@ angular.module('portainer.app').controller('EndpointsDatatableController', [
       pageNumber: 1,
     });
 
-    this.paginationChanged = function () {
+    this.paginationChanged = async function () {
+      try {
         this.state.loading = true;
         this.state.filteredDataSet = [];
         const start = (this.state.pageNumber - 1) * this.state.paginatedItemLimit + 1;
-      this.retrievePage(start, this.state.paginatedItemLimit, this.state.textFilter)
+        const { endpoints, totalCount } = await this.retrievePage(start, this.state.paginatedItemLimit, this.state.textFilter);
-        .then((data) => {
+        this.state.filteredDataSet = endpoints;
-          this.state.filteredDataSet = data.endpoints;
+        this.state.totalFilteredDataSet = totalCount;
-          this.state.totalFilteredDataSet = data.totalCount;
+        this.refreshSelectedItems();
-        })
+      } finally {
-        .finally(() => {
         this.state.loading = false;
-        });
+      }
     };
 
     this.onPageChange = function (newPageNumber) {
@@ -44,9 +45,17 @@ angular.module('portainer.app').controller('EndpointsDatatableController', [
     this.onTextFilterChange = function () {
       var filterValue = this.state.textFilter;
       DatatableService.setDataTableTextFilters(this.tableKey, filterValue);
+      this.resetSelectionState();
       this.paginationChanged();
     };
 
+    /**
+     * Overriden
+     */
+    this.uniq = function () {
+      return _.uniqBy(_.concat(this.state.filteredDataSet, this.state.selectedItems), 'Id');
+    };
+
     /**
      * Overridden
      */
@@ -55,6 +64,14 @@ angular.module('portainer.app').controller('EndpointsDatatableController', [
       this.paginationChanged();
     };
 
+    this.refreshSelectedItems = function () {
+      _.forEach(this.state.filteredDataSet, (item) => {
+        if (_.filter(this.state.selectedItems, (i) => i.Id == item.Id).length > 0) {
+          item.Checked = true;
+        }
+      });
+    };
+
     /**
      * Overridden
      */

app/portainer/components/datatables/genericDatatableController.js

@@ -77,7 +77,7 @@ angular.module('portainer.app').controller('GenericDatatableController', [
         item.Checked = !item.Checked;
         this.state.firstClickedItem = item;
       }
-      this.state.selectedItems = _.uniq(_.concat(this.state.selectedItems, this.state.filteredDataSet)).filter((i) => i.Checked);
+      this.state.selectedItems = this.uniq().filter((i) => i.Checked);
       if (event && this.state.selectAll && this.state.selectedItems.length !== this.state.filteredDataSet.length) {
         this.state.selectAll = false;
       }
@@ -96,6 +96,13 @@ angular.module('portainer.app').controller('GenericDatatableController', [
       this.onSelectionChanged();
     };
 
+    /**
+     * Override this method to change the uniqness filter when selecting items
+     */
+    this.uniq = function () {
+      return _.uniq(_.concat(this.state.filteredDataSet, this.state.selectedItems));
+    };
+
     /**
      * Override this method to allow/deny selection
      */

app/portainer/views/endpoints/endpoints.html

@@ -1,17 +1,17 @@
 <page-header title="'Environments'" breadcrumbs="['Environment management']" reload="true"> </page-header>
 
-<view-loading ng-if="state.loadingMessage" message="state.loadingMessage"></view-loading>
+<view-loading ng-if="$ctrl.state.loadingMessage" message="$ctrl.state.loadingMessage"></view-loading>
 
-<div class="row" ng-if="!state.loadingMessage">
+<div class="row" ng-if="!$ctrl.state.loadingMessage">
   <div class="col-sm-12">
     <endpoints-datatable
       title-text="Environments"
       title-icon="hard-drive"
-      table-key="endpoints"
+      table-key="$ctrl.endpoints"
       order-by="Name"
-      remove-action="removeAction"
+      remove-action="$ctrl.removeAction"
-      retrieve-page="getPaginatedEndpoints"
+      retrieve-page="$ctrl.getPaginatedEndpoints"
-      set-loading-message="setLoadingMessage"
+      set-loading-message="$ctr.setLoadingMessage"
     ></endpoints-datatable>
   </div>
 </div>

app/portainer/views/endpoints/endpoints.js

@@ -0,0 +1,6 @@
+import { EndpointsController } from './endpointsController';
+
+angular.module('portainer.app').component('endpointsView', {
+  templateUrl: './endpoints.html',
+  controller: EndpointsController,
+});

app/portainer/views/endpoints/endpointsController.js

@@ -1,67 +1,72 @@
-import angular from 'angular';
+import { map } from 'lodash';
 import EndpointHelper from '@/portainer/helpers/endpointHelper';
 import { getEnvironments } from '@/portainer/environments/environment.service';
 
-angular.module('portainer.app').controller('EndpointsController', EndpointsController);
+export class EndpointsController {
+  /* @ngInject */
+  constructor($state, $async, EndpointService, GroupService, ModalService, Notifications, EndpointProvider, StateManager) {
+    Object.assign(this, {
+      $state,
+      $async,
+      EndpointService,
+      GroupService,
+      ModalService,
+      Notifications,
+      EndpointProvider,
+      StateManager,
+    });
 
-function EndpointsController($q, $scope, $state, $async, EndpointService, GroupService, ModalService, Notifications, EndpointProvider, StateManager) {
+    this.state = {
-  $scope.state = {
       loadingMessage: '',
     };
 
-  $scope.setLoadingMessage = setLoadingMessage;
+    this.setLoadingMessage = this.setLoadingMessage.bind(this);
-  function setLoadingMessage(message) {
+    this.getPaginatedEndpoints = this.getPaginatedEndpoints.bind(this);
-    $scope.state.loadingMessage = message;
+    this.removeAction = this.removeAction.bind(this);
   }
 
-  $scope.removeAction = removeAction;
+  setLoadingMessage(message) {
-  function removeAction(endpoints) {
+    this.state.loadingMessage = message;
-    ModalService.confirmDeletion('This action will remove all configurations associated to your environment(s). Continue?', (confirmed) => {
+  }
+
+  removeAction(endpoints) {
+    this.ModalService.confirmDeletion('This action will remove all configurations associated to your environment(s). Continue?', (confirmed) => {
       if (!confirmed) {
         return;
       }
-      return $async(removeActionAsync, endpoints);
+      return this.$async(async () => {
-    });
-  }
-
-  async function removeActionAsync(endpoints) {
-    for (let endpoint of endpoints) {
         try {
-        await EndpointService.deleteEndpoint(endpoint.Id);
+          await Promise.all(endpoints.map(({ Id }) => this.EndpointService.deleteEndpoint(Id)));
-
+          this.Notifications.success('Environments successfully removed', map(endpoints, 'Id').join(', '));
-        Notifications.success('Environment successfully removed', endpoint.Name);
         } catch (err) {
-        Notifications.error('Failure', err, 'Unable to remove environment');
+          this.Notifications.error('Failure', err, 'Unable to remove environment');
-      }
         }
 
-    const endpointId = EndpointProvider.endpointID();
+        const id = this.EndpointProvider.endpointID();
         // If the current endpoint was deleted, then clean endpoint store
-    if (endpoints.some((item) => item.Id === endpointId)) {
+        if (endpoints.some((e) => e.Id === id)) {
-      StateManager.cleanEndpoint();
+          this.StateManager.cleanEndpoint();
           // trigger sidebar rerender
-      $scope.applicationState.endpoint = {};
+          this.applicationState.endpoint = {};
         }
 
-    $state.reload();
+        this.$state.reload();
-  }
+      });
-
+    });
-  $scope.getPaginatedEndpoints = getPaginatedEndpoints;
+  }
-  function getPaginatedEndpoints(start, limit, search) {
+
-    const deferred = $q.defer();
+  getPaginatedEndpoints(start, limit, search) {
-    $q.all({
+    return this.$async(async () => {
-      endpoints: getEnvironments({ start, limit, query: { search, excludeSnapshots: true } }),
+      try {
-      groups: GroupService.groups(),
+        const [{ value: endpoints, totalCount }, groups] = await Promise.all([
-    })
+          getEnvironments({ start, limit, query: { search, excludeSnapshots: true } }),
-      .then(function success(data) {
+          this.GroupService.groups(),
-        var endpoints = data.endpoints.value;
+        ]);
-        var groups = data.groups;
+        EndpointHelper.mapGroupNameToEndpoint(endpoints, groups);
-        EndpointHelper.mapGroupNameToEndpoint(endpoints, groups);
+        return { endpoints, totalCount };
-        deferred.resolve({ endpoints: endpoints, totalCount: data.endpoints.totalCount });
+      } catch (err) {
-      })
+        this.Notifications.error('Failure', err, 'Unable to retrieve environment information');
-      .catch(function error(err) {
+      }
-        Notifications.error('Failure', err, 'Unable to retrieve environment information');
     });
-    return deferred.promise;
   }
 }