Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-22 23:09:41 +02:00
Code Issues Releases Activity

feat(settings): replace cookies with local storage (#4075)

Browse source 
* fix(datatables): persist state changes

* fix(datatables): persist order

* feat(sidebar): use local storage to store toggle toolbar

* feat(config): use local storage instead of cookies
This commit is contained in:
Chaim Lev-Ari 2020-07-22 21:36:22 +03:00 • committed by GitHub
parent c9dd6e3851
commit 4346bf95a7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 45 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/docker/components/datatables/images-datatable/imagesDatatable.html
View file

@ -120,11 +120,11 @@
</div> </div>
<div class="menuContent"> <div class="menuContent">
<div class="md-checkbox"> <div class="md-checkbox">
<input id="filter_usage_usedImages" type="checkbox" ng-model="$ctrl.filters.state.showUsedImages" ng-change="$ctrl.onUsageFilterChange()" /> <input id="filter_usage_usedImages" type="checkbox" ng-model="$ctrl.filters.state.showUsedImages" ng-change="$ctrl.onstateFilterChange()" />
<label for="filter_usage_usedImages">Used images</label> <label for="filter_usage_usedImages">Used images</label>
</div> </div>
<div class="md-checkbox"> <div class="md-checkbox">
<input id="filter_usage_unusedImages" type="checkbox" ng-model="$ctrl.filters.state.showUnusedImages" ng-change="$ctrl.onUsageFilterChange()" /> <input id="filter_usage_unusedImages" type="checkbox" ng-model="$ctrl.filters.state.showUnusedImages" ng-change="$ctrl.onstateFilterChange()" />
<label for="filter_usage_unusedImages">Unused images</label> <label for="filter_usage_unusedImages">Unused images</label>
</div> </div>
</div> </div>

4
app/docker/components/datatables/volumes-datatable/volumesDatatable.html
View file

@ -93,11 +93,11 @@
</div> </div>
<div class="menuContent"> <div class="menuContent">
<div class="md-checkbox"> <div class="md-checkbox">
<input id="filter_usage_usedImages" type="checkbox" ng-model="$ctrl.filters.state.showUsedVolumes" ng-change="$ctrl.onUsageFilterChange()" /> <input id="filter_usage_usedImages" type="checkbox" ng-model="$ctrl.filters.state.showUsedVolumes" ng-change="$ctrl.onstateFilterChange()" />
<label for="filter_usage_usedImages">Used volumes</label> <label for="filter_usage_usedImages">Used volumes</label>
</div> </div>
<div class="md-checkbox"> <div class="md-checkbox">
<input id="filter_usage_unusedImages" type="checkbox" ng-model="$ctrl.filters.state.showUnusedVolumes" ng-change="$ctrl.onUsageFilterChange()" /> <input id="filter_usage_unusedImages" type="checkbox" ng-model="$ctrl.filters.state.showUnusedVolumes" ng-change="$ctrl.onstateFilterChange()" />
<label for="filter_usage_unusedImages">Unused volumes</label> <label for="filter_usage_unusedImages">Unused volumes</label>
</div> </div>
</div> </div>

5
app/portainer/components/datatables/genericDatatableController.js
View file

@ -43,12 +43,11 @@ angular.module('portainer.app').controller('GenericDatatableController', [
DatatableService.setDataTableTextFilters(this.tableKey, this.state.textFilter); DatatableService.setDataTableTextFilters(this.tableKey, this.state.textFilter);
}; };
this.changeOrderBy = changeOrderBy.bind(this); this.changeOrderBy = function changeOrderBy(orderField) {
function changeOrderBy(orderField) {
this.state.reverseOrder = this.state.orderBy === orderField ? !this.state.reverseOrder : false; this.state.reverseOrder = this.state.orderBy === orderField ? !this.state.reverseOrder : false;
this.state.orderBy = orderField; this.state.orderBy = orderField;
DatatableService.setDataTableOrder(this.tableKey, orderField, this.state.reverseOrder); DatatableService.setDataTableOrder(this.tableKey, orderField, this.state.reverseOrder);
} };
this.selectItem = function (item, event) { this.selectItem = function (item, event) {
// Handle range select using shift // Handle range select using shift

2
app/portainer/services/authentication.js
View file

@ -41,7 +41,7 @@ angular.module('portainer.app').factory('Authentication', [
StateManager.clean(); StateManager.clean();
EndpointProvider.clean(); EndpointProvider.clean();
LocalStorage.clean(); LocalStorage.cleanAuthData();
LocalStorage.storeLoginStateUUID(''); LocalStorage.storeLoginStateUUID('');
} }

1
app/portainer/services/endpointProvider.js
View file

@ -24,6 +24,7 @@ angular.module('portainer.app').factory('EndpointProvider', [
}; };
service.clean = function () { service.clean = function () {
LocalStorage.cleanEndpointData();
endpoint = {}; endpoint = {};
}; };

53
app/portainer/services/localStorage.js
View file

@ -1,7 +1,6 @@
angular.module('portainer.app').factory('LocalStorage', [ angular.module('portainer.app').factory('LocalStorage', [
'localStorageService', 'localStorageService',
function LocalStorageFactory(localStorageService) { function LocalStorageFactory(localStorageService) {
'use strict';
return { return {
storeEndpointID: function (id) { storeEndpointID: function (id) {
localStorageService.set('ENDPOINT_ID', id); localStorageService.set('ENDPOINT_ID', id);
@ -16,10 +15,10 @@ angular.module('portainer.app').factory('LocalStorage', [
return localStorageService.get('ENDPOINT_PUBLIC_URL'); return localStorageService.get('ENDPOINT_PUBLIC_URL');
}, },
storeLoginStateUUID: function (uuid) { storeLoginStateUUID: function (uuid) {
localStorageService.cookie.set('LOGIN_STATE_UUID', uuid); localStorageService.set('LOGIN_STATE_UUID', uuid);
}, },
getLoginStateUUID: function () { getLoginStateUUID: function () {
return localStorageService.cookie.get('LOGIN_STATE_UUID'); return localStorageService.get('LOGIN_STATE_UUID');
}, },
storeOfflineMode: function (isOffline) { storeOfflineMode: function (isOffline) {
localStorageService.set('ENDPOINT_OFFLINE_MODE', isOffline); localStorageService.set('ENDPOINT_OFFLINE_MODE', isOffline);
@ -46,10 +45,10 @@ angular.module('portainer.app').factory('LocalStorage', [
return localStorageService.get('APPLICATION_STATE'); return localStorageService.get('APPLICATION_STATE');
}, },
storeUIState: function (state) { storeUIState: function (state) {
localStorageService.cookie.set('UI_STATE', state); localStorageService.set('UI_STATE', state);
}, },
getUIState: function () { getUIState: function () {
return localStorageService.cookie.get('UI_STATE'); return localStorageService.get('UI_STATE');
}, },
storeExtensionState: function (state) { storeExtensionState: function (state) {
localStorageService.set('EXTENSION_STATE', state); localStorageService.set('EXTENSION_STATE', state);
@ -67,40 +66,40 @@ angular.module('portainer.app').factory('LocalStorage', [
localStorageService.remove('JWT'); localStorageService.remove('JWT');
}, },
storePaginationLimit: function (key, count) { storePaginationLimit: function (key, count) {
localStorageService.cookie.set('datatable_pagination_' + key, count); localStorageService.set('datatable_pagination_' + key, count);
}, },
getPaginationLimit: function (key) { getPaginationLimit: function (key) {
return localStorageService.cookie.get('datatable_pagination_' + key); return localStorageService.get('datatable_pagination_' + key);
}, },
getDataTableOrder: function (key) { getDataTableOrder: function (key) {
return localStorageService.cookie.get('datatable_order_' + key); return localStorageService.get('datatable_order_' + key);
}, },
storeDataTableOrder: function (key, data) { storeDataTableOrder: function (key, data) {
localStorageService.cookie.set('datatable_order_' + key, data); localStorageService.set('datatable_order_' + key, data);
}, },
getDataTableTextFilters: function (key) { getDataTableTextFilters: function (key) {
return localStorageService.cookie.get('datatable_text_filter_' + key); return localStorageService.get('datatable_text_filter_' + key);
}, },
storeDataTableTextFilters: function (key, data) { storeDataTableTextFilters: function (key, data) {
localStorageService.cookie.set('datatable_text_filter_' + key, data); localStorageService.set('datatable_text_filter_' + key, data);
}, },
getDataTableFilters: function (key) { getDataTableFilters: function (key) {
return localStorageService.cookie.get('datatable_filters_' + key); return localStorageService.get('datatable_filters_' + key);
}, },
storeDataTableFilters: function (key, data) { storeDataTableFilters: function (key, data) {
localStorageService.cookie.set('datatable_filters_' + key, data); localStorageService.set('datatable_filters_' + key, data);
}, },
getDataTableSettings: function (key) { getDataTableSettings: function (key) {
return localStorageService.cookie.get('datatable_settings_' + key); return localStorageService.get('datatable_settings_' + key);
}, },
storeDataTableSettings: function (key, data) { storeDataTableSettings: function (key, data) {
localStorageService.cookie.set('datatable_settings_' + key, data); localStorageService.set('datatable_settings_' + key, data);
}, },
getDataTableExpandedItems: function (key) { getDataTableExpandedItems: function (key) {
return localStorageService.cookie.get('datatable_expandeditems_' + key); return localStorageService.get('datatable_expandeditems_' + key);
}, },
storeDataTableExpandedItems: function (key, data) { storeDataTableExpandedItems: function (key, data) {
localStorageService.cookie.set('datatable_expandeditems_' + key, data); localStorageService.set('datatable_expandeditems_' + key, data);
}, },
getDataTableSelectedItems: function (key) { getDataTableSelectedItems: function (key) {
return localStorageService.get('datatable_selecteditems_' + key); return localStorageService.get('datatable_selecteditems_' + key);
@ -109,16 +108,16 @@ angular.module('portainer.app').factory('LocalStorage', [
localStorageService.set('datatable_selecteditems_' + key, data); localStorageService.set('datatable_selecteditems_' + key, data);
}, },
storeSwarmVisualizerSettings: function (key, data) { storeSwarmVisualizerSettings: function (key, data) {
localStorageService.cookie.set('swarmvisualizer_' + key, data); localStorageService.set('swarmvisualizer_' + key, data);
}, },
getSwarmVisualizerSettings: function (key) { getSwarmVisualizerSettings: function (key) {
return localStorageService.cookie.get('swarmvisualizer_' + key); return localStorageService.get('swarmvisualizer_' + key);
}, },
storeColumnVisibilitySettings: function (key, data) { storeColumnVisibilitySettings: function (key, data) {
localStorageService.cookie.set('col_visibility_' + key, data); localStorageService.set('col_visibility_' + key, data);
}, },
getColumnVisibilitySettings: function (key) { getColumnVisibilitySettings: function (key) {
return localStorageService.cookie.get('col_visibility_' + key); return localStorageService.get('col_visibility_' + key);
}, },
storeJobImage: function (data) { storeJobImage: function (data) {
localStorageService.set('job_image', data); localStorageService.set('job_image', data);
@ -133,12 +132,24 @@ angular.module('portainer.app').factory('LocalStorage', [
const activeTab = localStorageService.get('active_tab_' + key); const activeTab = localStorageService.get('active_tab_' + key);
return activeTab === null ? 0 : activeTab; return activeTab === null ? 0 : activeTab;
}, },
storeToolbarToggle(value) {
localStorageService.set('toolbar_toggle', value);
},
getToolbarToggle() {
return localStorageService.get('toolbar_toggle');
},
storeLogoutReason: (reason) => localStorageService.set('logout_reason', reason), storeLogoutReason: (reason) => localStorageService.set('logout_reason', reason),
getLogoutReason: () => localStorageService.get('logout_reason'), getLogoutReason: () => localStorageService.get('logout_reason'),
cleanLogoutReason: () => localStorageService.remove('logout_reason'), cleanLogoutReason: () => localStorageService.remove('logout_reason'),
clean: function () { clean: function () {
localStorageService.clearAll(); localStorageService.clearAll();
}, },
cleanAuthData() {
localStorageService.remove('JWT', 'EXTENSION_STATE', 'APPLICATION_STATE', 'LOGIN_STATE_UUID');
},
cleanEndpointData() {
localStorageService.remove('ENDPOINT_ID', 'ENDPOINT_PUBLIC_URL', 'ENDPOINT_OFFLINE_MODE', 'ENDPOINTS_DATA', 'ENDPOINT_STATE');
},
}; };
}, },
]); ]);

13
app/portainer/views/main/mainController.js
View file

@ -1,9 +1,9 @@
angular.module('portainer.app').controller('MainController', [ angular.module('portainer.app').controller('MainController', [
'$scope', '$scope',
'$cookieStore', 'LocalStorage',
'StateManager', 'StateManager',
'EndpointProvider', 'EndpointProvider',
function ($scope, $cookieStore, StateManager, EndpointProvider) { function ($scope, LocalStorage, StateManager, EndpointProvider) {
/** /**
* Sidebar Toggle & Cookie Control * Sidebar Toggle & Cookie Control
*/ */
@ -17,11 +17,8 @@ angular.module('portainer.app').controller('MainController', [
$scope.$watch($scope.getWidth, function (newValue) { $scope.$watch($scope.getWidth, function (newValue) {
if (newValue >= mobileView) { if (newValue >= mobileView) {
if (angular.isDefined($cookieStore.get('toggle'))) { const toggleValue = LocalStorage.getToolbarToggle();
$scope.toggle = !$cookieStore.get('toggle') ? false : true; $scope.toggle = typeof toggleValue === 'boolean' ? toggleValue : true;
} else {
$scope.toggle = true;
}
} else { } else {
$scope.toggle = false; $scope.toggle = false;
} }
@ -29,7 +26,7 @@ angular.module('portainer.app').controller('MainController', [
$scope.toggleSidebar = function () { $scope.toggleSidebar = function () {
$scope.toggle = !$scope.toggle; $scope.toggle = !$scope.toggle;
$cookieStore.put('toggle', $scope.toggle); LocalStorage.storeToolbarToggle($scope.toggle);
}; };
window.onresize = function () { window.onresize = function () {