From 17c3efa547eaab5593d1741b1658998bb4158a17 Mon Sep 17 00:00:00 2001
From: Cyril Biencourt <cyril.biencourt@ovhcloud.com>
Date: Thu, 27 Jul 2023 16:19:03 +0200
Subject: [PATCH] feat: save datagrid preferences

Signed-off-by: Cyril Biencourt <cyril.biencourt@ovhcloud.com>
---
 .../dedicated/client/app/cdn/cdn.routes.js    |  1 +
 .../manage/domains/domains.routes.js          |  1 +
 .../app/dedicated/housing/housing.routing.js  |  1 +
 .../client/app/dedicated/nas/nas.routing.js   |  1 +
 .../dedicated/server/servers.controller.js    | 26 +++++++++----------
 .../client/app/dedicated/server/servers.html  |  5 +---
 .../dedicatedCloud/dedicatedClouds.routing.js |  1 +
 .../managed-baremetal.routing.js              |  1 +
 packages/manager/apps/dedicated/package.json  |  1 +
 packages/manager/apps/telecom/package.json    |  1 +
 .../src/app/telecom/pack/packs.routing.js     |  1 +
 .../services/services.routing.js              |  1 +
 .../repayments/repayments.routing.js          |  1 +
 .../telecom/telephony/telephony.routing.js    |  1 +
 .../web/client/app/dns-zone/zone.routing.js   |  1 +
 .../web/client/app/domain/domains.routing.js  |  1 +
 .../list/list-domain-layout.controller.js     | 17 +++++++++++-
 .../web/client/app/domain/list/template.html  |  1 +
 .../web/client/app/hosting/hosting.routing.js |  1 +
 .../private-database.routing.js               |  1 +
 packages/manager/apps/web/package.json        |  1 +
 .../manager/modules/cda/src/cda.routing.js    |  1 +
 .../src/cloud-connect.routing.js              |  1 +
 .../modules/email-domain/src/email.routing.js |  2 ++
 .../manager/modules/iplb/src/iplb.routing.js  |  1 +
 .../modules/metrics/src/metrics.routing.js    |  1 +
 .../nasha/src/directory/directory.routing.js  |  1 +
 .../manager/modules/netapp/src/routing.js     |  1 +
 .../modules/ng-layout-helpers/package.json    |  1 +
 .../src/list/list-layout.controller.js        | 16 ++++++++++++
 .../ng-layout-helpers/src/list/template.html  |  2 ++
 .../modules/office/src/office.routing.js      |  1 +
 .../overthebox/src/overtheboxes.routing.js    |  1 +
 packages/manager/modules/pci/package.json     |  1 +
 .../sharepoint/src/sharepoint.routing.js      |  1 +
 .../manager/modules/sms/src/sms.routing.js    |  1 +
 .../veeam-cloud-connect/src/veeam.routing.js  |  1 +
 .../veeam-enterprise/src/veeam.routing.js     |  1 +
 .../manager/modules/vps/src/vps.routing.js    |  1 +
 .../modules/vrack/src/vrack.routing.js        |  1 +
 .../template/src/routing.js                   |  1 +
 41 files changed, 84 insertions(+), 19 deletions(-)

diff --git a/packages/manager/apps/dedicated/client/app/cdn/cdn.routes.js b/packages/manager/apps/dedicated/client/app/cdn/cdn.routes.js
index 6977ab317157..eeddb9d5ba1d 100644
--- a/packages/manager/apps/dedicated/client/app/cdn/cdn.routes.js
+++ b/packages/manager/apps/dedicated/client/app/cdn/cdn.routes.js
@@ -10,6 +10,7 @@ export default /* @ngInject */ ($stateProvider) => {
       ...ListLayoutHelper.stateResolves,
       apiPath: () => '/cdn/dedicated',
       dataModel: () => 'cdnanycast.Anycast',
+      id: () => 'cdns',
       defaultFilterColumn: () => 'service',
       header: /* @ngInject */ ($translate) => $translate.instant('cdn_title'),
       customizableColumns: () => true,
diff --git a/packages/manager/apps/dedicated/client/app/cdn/dedicated/manage/domains/domains.routes.js b/packages/manager/apps/dedicated/client/app/cdn/dedicated/manage/domains/domains.routes.js
index 5d62422a1a07..c92e50b93a08 100644
--- a/packages/manager/apps/dedicated/client/app/cdn/dedicated/manage/domains/domains.routes.js
+++ b/packages/manager/apps/dedicated/client/app/cdn/dedicated/manage/domains/domains.routes.js
@@ -13,6 +13,7 @@ export default /* @ngInject */ ($stateProvider) => {
         `/cdn/dedicated/${serviceName}/domains`,
       schema: /* @ngInject */ ($http) =>
         $http.get('/cdn/dedicated.json').then(({ data }) => data),
+      id: () => 'domains',
       dataModel: () => 'cdnanycast.Domain',
       defaultFilterColumn: () => 'domain',
       customizableColumns: () => true,
diff --git a/packages/manager/apps/dedicated/client/app/dedicated/housing/housing.routing.js b/packages/manager/apps/dedicated/client/app/dedicated/housing/housing.routing.js
index cb34a2930f23..cf99e5a2e22e 100644
--- a/packages/manager/apps/dedicated/client/app/dedicated/housing/housing.routing.js
+++ b/packages/manager/apps/dedicated/client/app/dedicated/housing/housing.routing.js
@@ -9,6 +9,7 @@ export default /* @ngInject */ ($stateProvider) => {
       ...ListLayoutHelper.stateResolves,
       apiPath: () => '/dedicated/housing',
       dataModel: () => 'dedicated.housing.Housing',
+      id: () => 'housing',
       defaultFilterColumn: () => 'name',
       header: /* @ngInject */ ($translate) =>
         $translate.instant('dedicated_housing'),
diff --git a/packages/manager/apps/dedicated/client/app/dedicated/nas/nas.routing.js b/packages/manager/apps/dedicated/client/app/dedicated/nas/nas.routing.js
index ff932c465823..9272276f6dc4 100644
--- a/packages/manager/apps/dedicated/client/app/dedicated/nas/nas.routing.js
+++ b/packages/manager/apps/dedicated/client/app/dedicated/nas/nas.routing.js
@@ -13,6 +13,7 @@ export default /* @ngInject */ ($stateProvider) => {
       ...ListLayoutHelper.stateResolves,
       apiPath: () => '/dedicated/nas',
       dataModel: () => 'dedicated.nas.Nas',
+      id: () => 'nashas',
       defaultFilterColumn: () => 'serviceName',
       header: () => 'NAS',
       customizableColumns: () => true,
diff --git a/packages/manager/apps/dedicated/client/app/dedicated/server/servers.controller.js b/packages/manager/apps/dedicated/client/app/dedicated/server/servers.controller.js
index 86f0ac586a03..11edc93379d6 100644
--- a/packages/manager/apps/dedicated/client/app/dedicated/server/servers.controller.js
+++ b/packages/manager/apps/dedicated/client/app/dedicated/server/servers.controller.js
@@ -2,17 +2,22 @@ import get from 'lodash/get';
 import reduce from 'lodash/reduce';
 import set from 'lodash/set';
 import snakeCase from 'lodash/snakeCase';
+import {
+  retrieveColumnsConfig,
+  saveColumnsConfig,
+} from '@ovh-ux/datagrid-preferences';
 
+/* eslint class-methods-use-this: ["error", { "exceptMethods": ["onColumnsParametersChange"] }] */
 export default class ServersCtrl {
   /* @ngInject */
-  constructor($q, $translate, ouiDatagridService, ovhUserPref) {
+  constructor($q, $translate, ouiDatagridService) {
     this.$q = $q;
     this.$translate = $translate;
     this.ouiDatagridService = ouiDatagridService;
-    this.ovhUserPref = ovhUserPref;
   }
 
   $onInit() {
+    this.datagridId = 'dg-servers';
     this.criteria = JSON.parse(this.filter).map((criteria) => ({
       property: get(criteria, 'field') || 'name',
       operator: get(criteria, 'comparator'),
@@ -40,22 +45,15 @@ export default class ServersCtrl {
   }
 
   getColumnsPreferences() {
-    this.ovhUserPref
-      .getValue('DEDICATED_SERVER_DG_CONFIG')
-      .then((columns) => {
+    this.$q.when(retrieveColumnsConfig(this.datagridId)).then((columns) => {
+      if (columns) {
         this.columnsParameters = columns;
-      })
-      .catch(() => {
-        // do nothing (defautl columns will be displayed)
-      });
+      }
+    });
   }
 
   onColumnsParametersChange(id, columns) {
-    // save cols
-    // todo: add debounce
-    this.ovhUserPref.create('DEDICATED_SERVER_DG_CONFIG', columns).catch(() => {
-      // fails to save: do nothing
-    });
+    saveColumnsConfig(id, columns);
   }
 
   static toUpperSnakeCase(str) {
diff --git a/packages/manager/apps/dedicated/client/app/dedicated/server/servers.html b/packages/manager/apps/dedicated/client/app/dedicated/server/servers.html
index e121fe4bae89..7e5306ad0b63 100644
--- a/packages/manager/apps/dedicated/client/app/dedicated/server/servers.html
+++ b/packages/manager/apps/dedicated/client/app/dedicated/server/servers.html
@@ -4,7 +4,7 @@
     ></oui-header>
 
     <oui-datagrid
-        id="dg-servers"
+        id="{{ $ctrl.datagridId }}"
         data-page-size="{{ $ctrl.paginationSize }}"
         data-rows-loader="$ctrl.loadServers()"
         data-criteria="$ctrl.criteria"
@@ -36,7 +36,6 @@
             data-filterable
             data-sortable
             data-type="string"
-            hidden
         >
         </oui-datagrid-column>
         <oui-datagrid-column
@@ -46,7 +45,6 @@
             data-filterable
             data-sortable
             data-type="string"
-            hidden
         >
         </oui-datagrid-column>
         <oui-datagrid-column
@@ -57,7 +55,6 @@
             data-sortable
             data-type="options"
             data-type-options="$ctrl.datacenterEnumFilter"
-            hidden
         >
             <span
                 data-translate="{{:: 'server_datacenter_' + $ctrl.constructor.toUpperSnakeCase($value).split('_')[0] }}"
diff --git a/packages/manager/apps/dedicated/client/app/dedicatedCloud/dedicatedClouds.routing.js b/packages/manager/apps/dedicated/client/app/dedicatedCloud/dedicatedClouds.routing.js
index ae0f219f23c3..f150ed4818fc 100644
--- a/packages/manager/apps/dedicated/client/app/dedicatedCloud/dedicatedClouds.routing.js
+++ b/packages/manager/apps/dedicated/client/app/dedicatedCloud/dedicatedClouds.routing.js
@@ -20,6 +20,7 @@ export default /* @ngInject */ ($stateProvider) => {
       staticResources: () => true,
       apiPath: () => '/dedicatedCloud',
       dataModel: () => 'dedicatedCloud.dedicatedCloud',
+      id: () => 'dedicatedClouds',
       defaultFilterColumn: () => 'serviceName',
       resources: /* @ngInject */ ($http, apiPath) =>
         $http
diff --git a/packages/manager/apps/dedicated/client/app/managedBaremetal/managed-baremetal.routing.js b/packages/manager/apps/dedicated/client/app/managedBaremetal/managed-baremetal.routing.js
index 26ab63bae542..c275dbde9fe7 100644
--- a/packages/manager/apps/dedicated/client/app/managedBaremetal/managed-baremetal.routing.js
+++ b/packages/manager/apps/dedicated/client/app/managedBaremetal/managed-baremetal.routing.js
@@ -12,6 +12,7 @@ export default /* @ngInject */ ($stateProvider) => {
       apiPath: () => '/dedicatedCloud',
       dataModel: () => 'dedicatedCloud.dedicatedCloud',
       defaultFilterColumn: () => 'serviceName',
+      id: () => 'managedBaremetals',
       resources: /* @ngInject */ ($http, apiPath) =>
         $http
           .get(apiPath, {
diff --git a/packages/manager/apps/dedicated/package.json b/packages/manager/apps/dedicated/package.json
index 42a673b0f98a..477f2185179f 100644
--- a/packages/manager/apps/dedicated/package.json
+++ b/packages/manager/apps/dedicated/package.json
@@ -116,6 +116,7 @@
     "clipboard": "^2.0.4",
     "components-jqueryui": "^1.12.1",
     "core-js": "^3.6.5",
+    "@ovh-ux/datagrid-preferences": "^0.0.0 || ^1.0.0",
     "es6-shim": "~0.35.3",
     "filesize": "^3.6.1",
     "flag-icon-css": "^3.4.2",
diff --git a/packages/manager/apps/telecom/package.json b/packages/manager/apps/telecom/package.json
index eeacfcacd5d5..a4105fd9f93b 100644
--- a/packages/manager/apps/telecom/package.json
+++ b/packages/manager/apps/telecom/package.json
@@ -71,6 +71,7 @@
     "@ovh-ux/request-tagger": "^0.1.1",
     "@ovh-ux/shell": "^2.1.0",
     "@ovh-ux/ui-kit": "^6.5.3",
+    "@ovh-ux/datagrid-preferences": "^0.0.0 || ^1.0.0",
     "@uirouter/angularjs": "^1.0.23",
     "CSV-JS": "^1.0.0",
     "angular": "^1.7.5",
diff --git a/packages/manager/apps/telecom/src/app/telecom/pack/packs.routing.js b/packages/manager/apps/telecom/src/app/telecom/pack/packs.routing.js
index fd899750d91b..3e95c9ea1a3b 100644
--- a/packages/manager/apps/telecom/src/app/telecom/pack/packs.routing.js
+++ b/packages/manager/apps/telecom/src/app/telecom/pack/packs.routing.js
@@ -8,6 +8,7 @@ export default /* @ngInject */ ($stateProvider) => {
     resolve: {
       apiPath: () => '/pack/xdsl',
       ...ListLayoutHelper.stateResolves,
+      id: () => 'telecomXdslPacks',
       defaultFilterColumn: () => 'packName',
       dataModel: () => 'pack.xdsl.PackAdsl',
       loadResource: /* @ngInject */ (OvhApiPackXdsl) => (resource) =>
diff --git a/packages/manager/apps/telecom/src/app/telecom/telephony/billingAccount/services/services.routing.js b/packages/manager/apps/telecom/src/app/telecom/telephony/billingAccount/services/services.routing.js
index 253df2e7ef9b..23dc463f525f 100644
--- a/packages/manager/apps/telecom/src/app/telecom/telephony/billingAccount/services/services.routing.js
+++ b/packages/manager/apps/telecom/src/app/telecom/telephony/billingAccount/services/services.routing.js
@@ -13,6 +13,7 @@ export default /* @ngInject */ ($stateProvider) => {
     params: ListLayoutHelper.stateParams,
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'telephonyBillingAccounts',
       apiPath: /* @ngInject */ (billingAccountId) =>
         `/telephony/${billingAccountId}/service`,
       schema: /* @ngInject */ (OvhApiTelephony) =>
diff --git a/packages/manager/apps/telecom/src/app/telecom/telephony/repayments/repayments.routing.js b/packages/manager/apps/telecom/src/app/telecom/telephony/repayments/repayments.routing.js
index 9fd8456281f5..3e68fcc02bdb 100644
--- a/packages/manager/apps/telecom/src/app/telecom/telephony/repayments/repayments.routing.js
+++ b/packages/manager/apps/telecom/src/app/telecom/telephony/repayments/repayments.routing.js
@@ -42,6 +42,7 @@ export default /* @ngInject */ ($stateProvider) => {
       },
       resolve: {
         ...ListLayoutHelper.stateResolves,
+        id: () => 'telephonyRepayments',
         apiPath: () => '/me/sva/cdr',
         dataModel: () => 'me.sva.Cdr',
         defaultFilterColumn: () => 'startDate',
diff --git a/packages/manager/apps/telecom/src/app/telecom/telephony/telephony.routing.js b/packages/manager/apps/telecom/src/app/telecom/telephony/telephony.routing.js
index 67268f79e970..3d79e8864a20 100644
--- a/packages/manager/apps/telecom/src/app/telecom/telephony/telephony.routing.js
+++ b/packages/manager/apps/telecom/src/app/telecom/telephony/telephony.routing.js
@@ -12,6 +12,7 @@ export default /* @ngInject */ ($stateProvider) => {
     params: ListLayoutHelper.stateParams,
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'telephony',
       apiPath: () => '/telephony',
       defaultFilterColumn: () => 'billingAccount',
       dataModel: () => 'telephony.BillingAccount',
diff --git a/packages/manager/apps/web/client/app/dns-zone/zone.routing.js b/packages/manager/apps/web/client/app/dns-zone/zone.routing.js
index 636bab0786dc..6bfdcbb8abe5 100644
--- a/packages/manager/apps/web/client/app/dns-zone/zone.routing.js
+++ b/packages/manager/apps/web/client/app/dns-zone/zone.routing.js
@@ -16,6 +16,7 @@ export default /* @ngInject */ ($stateProvider) => {
         ),
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'dnsZones',
       schema: /* @ngInject */ ($http) =>
         $http.get('/domain.json').then(({ data }) => data),
       apiPath: () => '/domain/zone',
diff --git a/packages/manager/apps/web/client/app/domain/domains.routing.js b/packages/manager/apps/web/client/app/domain/domains.routing.js
index e3f4abc71180..481073404694 100644
--- a/packages/manager/apps/web/client/app/domain/domains.routing.js
+++ b/packages/manager/apps/web/client/app/domain/domains.routing.js
@@ -23,6 +23,7 @@ export default /* @ngInject */ ($stateProvider) => {
         ),
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'domains',
       apiPath: () => '/domain',
       schema: /* @ngInject */ ($http) =>
         $http.get('/domain.json').then(({ data: schema }) => schema),
diff --git a/packages/manager/apps/web/client/app/domain/list/list-domain-layout.controller.js b/packages/manager/apps/web/client/app/domain/list/list-domain-layout.controller.js
index 8c7fd7007c4f..be0baa55c42b 100644
--- a/packages/manager/apps/web/client/app/domain/list/list-domain-layout.controller.js
+++ b/packages/manager/apps/web/client/app/domain/list/list-domain-layout.controller.js
@@ -1,6 +1,11 @@
 import punycode from 'punycode';
 import { ListLayoutHelper } from '@ovh-ux/manager-ng-layout-helpers';
 
+import {
+  retrieveColumnsConfig,
+  saveColumnsConfig,
+} from '@ovh-ux/datagrid-preferences';
+
 import {
   DOMAIN_STATUS,
   DOMAIN_SUSPENSION_STATE,
@@ -29,10 +34,11 @@ export default class ListDomainLayoutCtrl extends ListLayoutHelper.ListLayoutCtr
   }
 
   $onInit() {
-    super.$onInit();
+    this.id = 'datagridDomain';
     this.datagridId = 'datagridDomain';
     this.defaultFilterColumn = 'domain';
     this.punycode = punycode;
+    super.$onInit();
 
     this.columnsConfig = [
       { name: 'domain', sortable: this.getSorting('domain') },
@@ -92,6 +98,15 @@ export default class ListDomainLayoutCtrl extends ListLayoutHelper.ListLayoutCtr
         {},
       ),
     };
+    this.getColumnsPreferences();
+  }
+
+  getColumnsPreferences() {
+    this.$q.when(retrieveColumnsConfig(this.datagridId)).then((columns) => {
+      if (columns) {
+        this.columnsParameters = columns;
+      }
+    });
   }
 
   linkContactBuilder({ domain, whoisOwner }) {
diff --git a/packages/manager/apps/web/client/app/domain/list/template.html b/packages/manager/apps/web/client/app/domain/list/template.html
index d51f8fdfdd5e..f5ecba61befc 100644
--- a/packages/manager/apps/web/client/app/domain/list/template.html
+++ b/packages/manager/apps/web/client/app/domain/list/template.html
@@ -16,6 +16,7 @@
     data-on-criteria-change="$ctrl.onCriteriaChange($criteria)"
     data-on-sort-change="$ctrl.onSortChange($sort)"
     data-columns="$ctrl.columnsConfig"
+    data-columns-parameters="$ctrl.columnsParameters"
     data-on-columns-parameters-change="$ctrl.onColumnChange(id, columns)"
     data-page="{{ $ctrl.paginationNumber }}"
     customizable
diff --git a/packages/manager/apps/web/client/app/hosting/hosting.routing.js b/packages/manager/apps/web/client/app/hosting/hosting.routing.js
index cbc16a96eea3..99ba4699d2e7 100644
--- a/packages/manager/apps/web/client/app/hosting/hosting.routing.js
+++ b/packages/manager/apps/web/client/app/hosting/hosting.routing.js
@@ -17,6 +17,7 @@ export default /* @ngInject */ ($stateProvider) => {
         ),
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'hostings',
       apiPath: () => '/hosting/web',
       dataModel: () => 'hosting.web.Service',
       defaultFilterColumn: () => 'serviceName',
diff --git a/packages/manager/apps/web/client/app/private-database/private-database.routing.js b/packages/manager/apps/web/client/app/private-database/private-database.routing.js
index 98ac61fe115a..9c9906fc7d2f 100644
--- a/packages/manager/apps/web/client/app/private-database/private-database.routing.js
+++ b/packages/manager/apps/web/client/app/private-database/private-database.routing.js
@@ -16,6 +16,7 @@ export default /* @ngInject */ ($stateProvider) => {
         ),
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'privateDatabases',
       apiPath: () => '/hosting/privateDatabase',
       dataModel: () => 'hosting.privateDatabase.Service',
       defaultFilterColumn: () => 'serviceName',
diff --git a/packages/manager/apps/web/package.json b/packages/manager/apps/web/package.json
index 20325b03f02f..6735adc5afdc 100644
--- a/packages/manager/apps/web/package.json
+++ b/packages/manager/apps/web/package.json
@@ -64,6 +64,7 @@
     "@ovh-ux/ng-translate-async-loader": "^2.1.6",
     "@ovh-ux/ng-ui-router-breadcrumb": "^1.1.8",
     "@ovh-ux/ng-ui-router-layout": "^4.1.3",
+    "@ovh-ux/datagrid-preferences": "^0.0.0 || ^1.0.0",
     "@ovh-ux/request-tagger": "^0.1.1",
     "@ovh-ux/shell": "^2.1.0",
     "@ovh-ux/ui-kit": "^6.5.3",
diff --git a/packages/manager/modules/cda/src/cda.routing.js b/packages/manager/modules/cda/src/cda.routing.js
index 7f090e262984..6102bc9f2c05 100644
--- a/packages/manager/modules/cda/src/cda.routing.js
+++ b/packages/manager/modules/cda/src/cda.routing.js
@@ -13,6 +13,7 @@ export default /* @ngInject */ ($stateProvider) => {
       ...ListLayoutHelper.stateResolves,
       apiPath: () => '/dedicated/ceph',
       dataModel: () => 'dedicated.ceph.clusterGet.response',
+      id: () => 'cdas',
       defaultFilterColumn: () => 'serviceName',
       columnConfig: /* @ngInject */ () => ({
         data: [
diff --git a/packages/manager/modules/cloud-connect/src/cloud-connect.routing.js b/packages/manager/modules/cloud-connect/src/cloud-connect.routing.js
index 475796611914..24615cdfe567 100644
--- a/packages/manager/modules/cloud-connect/src/cloud-connect.routing.js
+++ b/packages/manager/modules/cloud-connect/src/cloud-connect.routing.js
@@ -20,6 +20,7 @@ export default /* @ngInject */ ($stateProvider) => {
       params: ListLayoutHelper.stateParams,
       resolve: {
         ...ListLayoutHelper.stateResolves,
+        id: () => 'cloudConnects',
         apiPath: () => '/ovhCloudConnect',
         dataModel: () => 'ovhcloudconnect.Service',
         defaultFilterColumn: () => 'uuid',
diff --git a/packages/manager/modules/email-domain/src/email.routing.js b/packages/manager/modules/email-domain/src/email.routing.js
index 39d4617e0a37..32c92e6d0c23 100644
--- a/packages/manager/modules/email-domain/src/email.routing.js
+++ b/packages/manager/modules/email-domain/src/email.routing.js
@@ -16,6 +16,7 @@ export default /* @ngInject */ ($stateProvider) => {
         ),
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'emailDomains',
       apiPath: () => '/email/domain',
       dataModel: () => 'email.domain.DomainService',
       defaultFilterColumn: () => 'domain',
@@ -52,6 +53,7 @@ export default /* @ngInject */ ($stateProvider) => {
     params: ListLayoutHelper.stateParams,
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'emailDelefates',
       schema: /* @ngInject */ ($http) =>
         $http.get('/email/domain.json').then(({ data }) => data),
       apiPath: () => '/email/domain/delegatedAccount',
diff --git a/packages/manager/modules/iplb/src/iplb.routing.js b/packages/manager/modules/iplb/src/iplb.routing.js
index 399d299093ef..2de74cf45ad2 100644
--- a/packages/manager/modules/iplb/src/iplb.routing.js
+++ b/packages/manager/modules/iplb/src/iplb.routing.js
@@ -11,6 +11,7 @@ export default /* @ngInject */ ($stateProvider) => {
     params: ListLayoutHelper.stateParams,
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'iplbs',
       apiPath: () => '/ipLoadbalancing',
       dataModel: () => 'ipLoadbalancing.Ip',
       defaultFilterColumn: () => 'serviceName',
diff --git a/packages/manager/modules/metrics/src/metrics.routing.js b/packages/manager/modules/metrics/src/metrics.routing.js
index 4e8e04c95f6b..52ba9bbc5df8 100644
--- a/packages/manager/modules/metrics/src/metrics.routing.js
+++ b/packages/manager/modules/metrics/src/metrics.routing.js
@@ -11,6 +11,7 @@ export default /* @ngInject */ ($stateProvider) => {
     params: ListLayoutHelper.stateParams,
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'metrics',
       apiPath: () => '/metrics',
       dataModel: () => 'metrics.api.Service',
       defaultFilterColumn: () => 'name',
diff --git a/packages/manager/modules/nasha/src/directory/directory.routing.js b/packages/manager/modules/nasha/src/directory/directory.routing.js
index 22c45269b5fb..173dcbe8a5e7 100644
--- a/packages/manager/modules/nasha/src/directory/directory.routing.js
+++ b/packages/manager/modules/nasha/src/directory/directory.routing.js
@@ -9,6 +9,7 @@ export default /* @ngInject */ ($stateProvider) => {
     params: ListLayoutHelper.stateParams,
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'nashas',
       apiPath: /* @ngInject */ (baseApiUrl) => baseApiUrl,
       dataModel: () => 'dedicated.nasha.Storage',
       defaultFilterColumn: () => 'serviceName',
diff --git a/packages/manager/modules/netapp/src/routing.js b/packages/manager/modules/netapp/src/routing.js
index 1c552416e578..6844598bd2af 100644
--- a/packages/manager/modules/netapp/src/routing.js
+++ b/packages/manager/modules/netapp/src/routing.js
@@ -39,6 +39,7 @@ export default /* @ngInject */ ($stateProvider) => {
       ),
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'netapps',
       apiPath: () => '/storage/netapp',
       dataModel: () => 'storage.NetAppService',
       defaultFilterColumn: () => 'id',
diff --git a/packages/manager/modules/ng-layout-helpers/package.json b/packages/manager/modules/ng-layout-helpers/package.json
index 207f89002921..c4dd4a3a29e7 100644
--- a/packages/manager/modules/ng-layout-helpers/package.json
+++ b/packages/manager/modules/ng-layout-helpers/package.json
@@ -31,6 +31,7 @@
     "@ovh-ux/ng-ovh-api-wrappers": "^5.0.0",
     "@ovh-ux/ng-translate-async-loader": "^2.1.4",
     "@ovh-ux/ui-kit": "^6.5.3",
+    "@ovh-ux/datagrid-preferences": "^0.0.0 || ^1.0.0",
     "angular": "^1.7.9",
     "angular-translate": "^2.18.1",
     "bootstrap4": "^4.0.0"
diff --git a/packages/manager/modules/ng-layout-helpers/src/list/list-layout.controller.js b/packages/manager/modules/ng-layout-helpers/src/list/list-layout.controller.js
index 4857f9200e35..8d165d987548 100644
--- a/packages/manager/modules/ng-layout-helpers/src/list/list-layout.controller.js
+++ b/packages/manager/modules/ng-layout-helpers/src/list/list-layout.controller.js
@@ -1,6 +1,11 @@
 import get from 'lodash/get';
 import map from 'lodash/map';
 
+import {
+  retrieveColumnsConfig,
+  saveColumnsConfig,
+} from '@ovh-ux/datagrid-preferences';
+
 import { NUMBER_COLUMN_OPTIONS, STRING_COLUMN_OPTIONS } from './constants';
 
 export default class ListLayoutCtrl {
@@ -28,6 +33,8 @@ export default class ListLayoutCtrl {
     this.numberColumnOptions = {
       operators: NUMBER_COLUMN_OPTIONS,
     };
+
+    this.getColumnsPreferences();
   }
 
   loadPage() {
@@ -43,6 +50,14 @@ export default class ListLayoutCtrl {
     return this.sort === property ? this.sortOrder.toLowerCase() : '';
   }
 
+  getColumnsPreferences() {
+    this.$q.when(retrieveColumnsConfig(this.datagridId)).then((columns) => {
+      if (columns) {
+        this.columnsParameters = columns;
+      }
+    });
+  }
+
   getDisplayedColumns(columns) {
     this.displayedColumns = columns
       ? JSON.stringify(
@@ -89,6 +104,7 @@ export default class ListLayoutCtrl {
 
   onColumnChange(id, columns) {
     this.getDisplayedColumns(columns);
+    saveColumnsConfig(id, columns);
     return this.onListParamsChange();
   }
 }
diff --git a/packages/manager/modules/ng-layout-helpers/src/list/template.html b/packages/manager/modules/ng-layout-helpers/src/list/template.html
index 9cb9fcebd8ba..64ecb263bd42 100644
--- a/packages/manager/modules/ng-layout-helpers/src/list/template.html
+++ b/packages/manager/modules/ng-layout-helpers/src/list/template.html
@@ -10,6 +10,7 @@
     id="{{ $ctrl.datagridId }}"
     row-loader="$ctrl.loadResource($row)"
     columns="$ctrl.columns"
+    columns-parameters="$ctrl.columnsParameters"
     customizable="$ctrl.customizableColumns"
     criteria="$ctrl.criteria"
     on-columns-parameters-change="$ctrl.onColumnChange(id, columns)"
@@ -31,6 +32,7 @@
     rows-loader="$ctrl.loadPage()"
     row-loader="$ctrl.loadResource($row)"
     columns="$ctrl.columns"
+    columns-parameters="$ctrl.columnsParameters"
     customizable="$ctrl.customizableColumns"
     criteria="$ctrl.criteria"
     on-columns-parameters-change="$ctrl.onColumnChange(id, columns)"
diff --git a/packages/manager/modules/office/src/office.routing.js b/packages/manager/modules/office/src/office.routing.js
index 6542421cf2bd..f9f505bce50d 100644
--- a/packages/manager/modules/office/src/office.routing.js
+++ b/packages/manager/modules/office/src/office.routing.js
@@ -15,6 +15,7 @@ export default /* @ngInject */ ($stateProvider) => {
         ),
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'offices',
       apiPath: () => '/license/office',
       resources: /* @ngInject */ ($http) =>
         $http
diff --git a/packages/manager/modules/overthebox/src/overtheboxes.routing.js b/packages/manager/modules/overthebox/src/overtheboxes.routing.js
index 23cf1cacefad..10b05ca44912 100644
--- a/packages/manager/modules/overthebox/src/overtheboxes.routing.js
+++ b/packages/manager/modules/overthebox/src/overtheboxes.routing.js
@@ -7,6 +7,7 @@ export default /* @ngInject */ ($stateProvider) => {
     component: 'ovhManagerOverTheBoxes',
     params: ListLayoutHelper.stateParams,
     resolve: {
+      id: () => 'overTheBoxs',
       header: /* @ngInject */ ($translate) =>
         $translate.instant('overtheboxes_title'),
       apiPath: () => '/overTheBox',
diff --git a/packages/manager/modules/pci/package.json b/packages/manager/modules/pci/package.json
index c36e02e754bb..14480f6a1a11 100644
--- a/packages/manager/modules/pci/package.json
+++ b/packages/manager/modules/pci/package.json
@@ -59,6 +59,7 @@
     "@ovh-ux/ng-ui-router-breadcrumb": "^1.1.6",
     "@ovh-ux/ng-ui-router-layout": "^4.1.0",
     "@ovh-ux/ui-kit": "^6.5.3",
+    "@ovh-ux/datagrid-preferences": "^0.0.0 || ^1.0.0",
     "@uirouter/angularjs": "^1.0.15",
     "angular": "^1.7.5",
     "angular-animate": "^1.7.5",
diff --git a/packages/manager/modules/sharepoint/src/sharepoint.routing.js b/packages/manager/modules/sharepoint/src/sharepoint.routing.js
index 7fe40edb8ce4..9ec496b3103c 100644
--- a/packages/manager/modules/sharepoint/src/sharepoint.routing.js
+++ b/packages/manager/modules/sharepoint/src/sharepoint.routing.js
@@ -14,6 +14,7 @@ export default /* @ngInject */ ($stateProvider) => {
         ),
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'sharepoints',
       apiPath: () => '/msServices',
       dataModel: () => 'msServices.SharepointServiceInfo',
       resources: /* @ngInject */ ($http) =>
diff --git a/packages/manager/modules/sms/src/sms.routing.js b/packages/manager/modules/sms/src/sms.routing.js
index eb0b7f7f35f4..4b07b02d65d4 100644
--- a/packages/manager/modules/sms/src/sms.routing.js
+++ b/packages/manager/modules/sms/src/sms.routing.js
@@ -12,6 +12,7 @@ export default /* @ngInject */ ($stateProvider) => {
     },
     params: ListLayoutHelper.stateParams,
     resolve: {
+      id: () => 'sms',
       apiPath: () => '/sms',
       ...ListLayoutHelper.stateResolves,
       defaultFilterColumn: () => 'name',
diff --git a/packages/manager/modules/veeam-cloud-connect/src/veeam.routing.js b/packages/manager/modules/veeam-cloud-connect/src/veeam.routing.js
index 7416cf766ae3..4608faf692bf 100644
--- a/packages/manager/modules/veeam-cloud-connect/src/veeam.routing.js
+++ b/packages/manager/modules/veeam-cloud-connect/src/veeam.routing.js
@@ -11,6 +11,7 @@ export default /* @ngInject */ ($stateProvider) => {
     },
     params: ListLayoutHelper.stateParams,
     resolve: {
+      id: () => 'veeamCloudConnect',
       ...ListLayoutHelper.stateResolves,
       apiPath: () => '/veeamCloudConnect',
       dataModel: () => 'veeamCloudConnect.Account',
diff --git a/packages/manager/modules/veeam-enterprise/src/veeam.routing.js b/packages/manager/modules/veeam-enterprise/src/veeam.routing.js
index 694abf2e2657..5a7e936b1a60 100644
--- a/packages/manager/modules/veeam-enterprise/src/veeam.routing.js
+++ b/packages/manager/modules/veeam-enterprise/src/veeam.routing.js
@@ -16,6 +16,7 @@ export default /* @ngInject */ ($stateProvider) => {
             : false,
         ),
     resolve: {
+      id: () => 'veeamEnterprise',
       ...ListLayoutHelper.stateResolves,
       apiPath: () => '/veeam/veeamEnterprise',
       dataModel: () => 'veeam.veeamEnterprise.Account',
diff --git a/packages/manager/modules/vps/src/vps.routing.js b/packages/manager/modules/vps/src/vps.routing.js
index 0061cc810b19..82551ee732e3 100644
--- a/packages/manager/modules/vps/src/vps.routing.js
+++ b/packages/manager/modules/vps/src/vps.routing.js
@@ -11,6 +11,7 @@ export default /* @ngInject */ ($stateProvider) => {
     },
     params: ListLayoutHelper.stateParams,
     resolve: {
+      id: () => 'vps',
       ...ListLayoutHelper.stateResolves,
       apiPath: () => '/vps',
       dataModel: () => 'vps.VPS',
diff --git a/packages/manager/modules/vrack/src/vrack.routing.js b/packages/manager/modules/vrack/src/vrack.routing.js
index 942c04a68989..aa50ba66e9af 100644
--- a/packages/manager/modules/vrack/src/vrack.routing.js
+++ b/packages/manager/modules/vrack/src/vrack.routing.js
@@ -7,6 +7,7 @@ export default /* @ngInject */ ($stateProvider) => {
     component: 'managerListLayout',
     params: ListLayoutHelper.stateParams,
     resolve: {
+      id: () => 'vracks',
       ...ListLayoutHelper.stateResolves,
       apiPath: /* @ngInject */ () => '/vrack',
       dataModel: () => 'vrack.vrack',
diff --git a/packages/manager/tools/sao-ovh-manager-module/template/src/routing.js b/packages/manager/tools/sao-ovh-manager-module/template/src/routing.js
index ef0d70c4bfe2..694b9b0ef964 100644
--- a/packages/manager/tools/sao-ovh-manager-module/template/src/routing.js
+++ b/packages/manager/tools/sao-ovh-manager-module/template/src/routing.js
@@ -28,6 +28,7 @@ export default /* @ngInject */ ($stateProvider) => {
         ),
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => '<%= name %>',
       apiPath: () => '<%= apiPath %>',
       dataModel: () => '<%= apiModel %>',
       defaultFilterColumn: () => '<%= serviceName %>',