Portainer
/
portainer
mirror of https://github.com/portainer/portainer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

pull/7732/head
LP B 2022-09-27 00:00:10 +02:00 committed by GitHub
parent c3110a85b2
commit e5f8466fb9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 106 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/portainer/__module.js
View File

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

43
app/portainer/components/datatables/endpoints-datatable/endpointsDatatableController.js
View File

@ -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.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)
.then((data) => {
this.state.filteredDataSet = data.endpoints;
this.state.totalFilteredDataSet = data.totalCount;
})
.finally(() => {
this.state.loading = false;
});
this.paginationChanged = async function () {
try {
this.state.loading = true;
this.state.filteredDataSet = [];
const start = (this.state.pageNumber - 1) * this.state.paginatedItemLimit + 1;
const { endpoints, totalCount } = await this.retrievePage(start, this.state.paginatedItemLimit, this.state.textFilter);
this.state.filteredDataSet = endpoints;
this.state.totalFilteredDataSet = totalCount;
this.refreshSelectedItems();
} 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
*/

9
app/portainer/components/datatables/genericDatatableController.js
View File

@ -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
*/

12
app/portainer/views/endpoints/endpoints.html
View File

@ -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"
retrieve-page="getPaginatedEndpoints"
set-loading-message="setLoadingMessage"
remove-action="$ctrl.removeAction"
retrieve-page="$ctrl.getPaginatedEndpoints"
set-loading-message="$ctr.setLoadingMessage"
></endpoints-datatable>
</div>
</div>

6
app/portainer/views/endpoints/endpoints.js Normal file
View File

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

105
app/portainer/views/endpoints/endpointsController.js
View File

@ -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) {
$scope.state = {
loadingMessage: '',
};
this.state = {
loadingMessage: '',
};
$scope.setLoadingMessage = setLoadingMessage;
function setLoadingMessage(message) {
$scope.state.loadingMessage = message;
this.setLoadingMessage = this.setLoadingMessage.bind(this);
this.getPaginatedEndpoints = this.getPaginatedEndpoints.bind(this);
this.removeAction = this.removeAction.bind(this);
}
$scope.removeAction = removeAction;
function removeAction(endpoints) {
ModalService.confirmDeletion('This action will remove all configurations associated to your environment(s). Continue?', (confirmed) => {
setLoadingMessage(message) {
this.state.loadingMessage = message;
}
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 () => {
try {
await Promise.all(endpoints.map(({ Id }) => this.EndpointService.deleteEndpoint(Id)));
this.Notifications.success('Environments successfully removed', map(endpoints, 'Id').join(', '));
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to remove environment');
}
const id = this.EndpointProvider.endpointID();
// If the current endpoint was deleted, then clean endpoint store
if (endpoints.some((e) => e.Id === id)) {
this.StateManager.cleanEndpoint();
// trigger sidebar rerender
this.applicationState.endpoint = {};
}
this.$state.reload();
});
});
}
async function removeActionAsync(endpoints) {
for (let endpoint of endpoints) {
getPaginatedEndpoints(start, limit, search) {
return this.$async(async () => {
try {
await EndpointService.deleteEndpoint(endpoint.Id);
Notifications.success('Environment successfully removed', endpoint.Name);
} catch (err) {
Notifications.error('Failure', err, 'Unable to remove environment');
}
}
const endpointId = EndpointProvider.endpointID();
// If the current endpoint was deleted, then clean endpoint store
if (endpoints.some((item) => item.Id === endpointId)) {
StateManager.cleanEndpoint();
// trigger sidebar rerender
$scope.applicationState.endpoint = {};
}
$state.reload();
}
$scope.getPaginatedEndpoints = getPaginatedEndpoints;
function getPaginatedEndpoints(start, limit, search) {
const deferred = $q.defer();
$q.all({
endpoints: getEnvironments({ start, limit, query: { search, excludeSnapshots: true } }),
groups: GroupService.groups(),
})
.then(function success(data) {
var endpoints = data.endpoints.value;
var groups = data.groups;
const [{ value: endpoints, totalCount }, groups] = await Promise.all([
getEnvironments({ start, limit, query: { search, excludeSnapshots: true } }),
this.GroupService.groups(),
]);
EndpointHelper.mapGroupNameToEndpoint(endpoints, groups);
deferred.resolve({ endpoints: endpoints, totalCount: data.endpoints.totalCount });
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to retrieve environment information');
});
return deferred.promise;
return { endpoints, totalCount };
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to retrieve environment information');
}
});
}
}