Merge pull request #10388 from ovh/UXCT-502-datagrid-pagination

feat(dedicated.network-security): update way to set pagination
ovh · Nov 27, 2023 · c01d697 · c01d697
2 parents 1ea1400 + 06c0577
commit c01d697
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 34 deletions.
diff --git a/...pps/dedicated/client/app/network-security/scrubbing-center/scrubbing-center.controller.js b/...pps/dedicated/client/app/network-security/scrubbing-center/scrubbing-center.controller.js
@@ -1,19 +1,23 @@
+import { AbstractCursorDatagridController } from '@ovh-ux/manager-ng-apiv2-helper';
 import { PERIODS, PERIOD_LIST } from './scrubbing-center.constant';
 import { PAGE_SIZE } from '../network-security.constant';
 
-export default class ScrubbingCenterController {
+export default class ScrubbingCenterController extends AbstractCursorDatagridController {
   /* @ngInject */
-  constructor($translate, Alerter, networkSecurityService) {
+  constructor($translate, Alerter, networkSecurityService, ouiDatagridService) {
+    super();
     this.$translate = $translate;
     this.Alerter = Alerter;
     this.networkSecurityService = networkSecurityService;
+    this.ouiDatagridService = ouiDatagridService;
 
     this.PERIODS = PERIODS;
     this.PERIOD_LIST = PERIOD_LIST;
     this.PAGE_SIZE = PAGE_SIZE;
   }
 
   $onInit() {
+    this.datagridId = 'ScrubbingCenterController-Datagrid';
     this.errorMessage = '';
     this.periods = this.networkSecurityService.initPeriods(this.PERIODS);
 
@@ -33,57 +37,45 @@ export default class ScrubbingCenterController {
     this.isLoading = false;
   }
 
-  getEventsList(cursor, after, subnets, pageSize) {
-    this.isLoading = true;
+  createItemsPromise({ cursor }) {
     const params = {
-      after,
-      subnets,
+      after: this.after,
+      subnets: this.selectedIp,
     };
-    return this.networkSecurityService
-      .getEventsList({
-        cursor,
-        params,
-        pageSize,
-      })
-      .then((response) => {
-        if (response.data) {
-          this.events = this.events.concat(response.data);
-        }
-        if (response.cursor.next) {
-          this.getEventsList(response.cursor.next, after, subnets, pageSize);
-        }
-      })
-      .finally(() => {
-        this.isLoading = false;
-      });
+    const pageSize = this.PAGE_SIZE;
+    return this.networkSecurityService.getEventsList({
+      cursor,
+      params,
+      pageSize,
+    });
   }
 
   getAllEvents() {
-    this.isLoading = true;
-    this.events = [];
-    let after = '';
+    this.after = '';
     switch (this.period.name) {
       case this.PERIOD_LIST.lastMonth:
-        after = moment()
+        this.after = moment()
           .subtract(1, 'months')
           .toISOString();
         break;
       case this.PERIOD_LIST.lastWeek:
-        after = moment()
+        this.after = moment()
           .subtract(7, 'days')
           .toISOString();
         break;
       case this.PERIOD_LIST.lastYear:
-        after = moment()
+        this.after = moment()
           .subtract(1, 'years')
           .toISOString();
         break;
       default:
-        after = moment()
+        this.after = moment()
           .subtract(1, 'days')
           .toISOString();
     }
-    this.getEventsList(null, after, this.selectedIp, this.PAGE_SIZE);
+    this.reloadItems(this.PAGE_SIZE).then(() => {
+      this.ouiDatagridService.refresh(this.datagridId, true);
+    });
   }
 
   selectService() {

diff --git a/...manager/apps/dedicated/client/app/network-security/scrubbing-center/scrubbing-center.html b/...manager/apps/dedicated/client/app/network-security/scrubbing-center/scrubbing-center.html
@@ -60,9 +60,10 @@
 
     <oui-datagrid
         id="{{ $ctrl.datagridId }}"
-        data-page-size="{{ $ctrl.PAGE_SIZE }}"
-        data-rows="$ctrl.events"
-        data-ng-if="!$ctrl.isLoading"
+        data-rows-loader="$ctrl.getItems($config)"
+        data-page="{{ $ctrl.cursors.index || 1 }}"
+        data-page-size="{{ $ctrl.pageSize }}"
+        data-pagination-mode="arrows"
     >
         <oui-datagrid-column
             data-title=":: 'network_security_dashboard_col_detect' | translate"