feat(dedicated.network-security): update call api for traffic

ref: UXCT-510 - update call API using pagination to load all traffic data for graph displayed Signed-off-by: Stephanie Moallic <[email protected]>
ovh · Nov 29, 2023 · bf77d1e · bf77d1e
1 parent c01d697
commit bf77d1e
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 17 deletions.
diff --git a/packages/manager/apps/dedicated/client/app/network-security/network-security.service.js b/packages/manager/apps/dedicated/client/app/network-security/network-security.service.js
@@ -10,11 +10,15 @@ export default class NetworkSecurityService {
     this.PAGE_SIZE = PAGE_SIZE;
   }
 
-  getTraffic(params) {
-    return this.Apiv2Service.httpApiv2({
-      method: 'get',
-      url: `/engine/api/v2${this.API_PATH}/traffic`,
-      params,
+  getAllTraffic({ cursor, params, pageSize }) {
+    return this.Apiv2Service.httpApiv2List(
+      {
+        url: `/engine/api/v2${this.API_PATH}/traffic`,
+        params,
+      },
+      { cursor, size: pageSize },
+    ).then((response) => {
+      return { ...response, data: response.data };
     });
   }
 

diff --git a/packages/manager/apps/dedicated/client/app/network-security/traffic/traffic.controller.js b/packages/manager/apps/dedicated/client/app/network-security/traffic/traffic.controller.js
@@ -95,6 +95,7 @@ export default class TrafficController {
     }
     this.isLoading = true;
     this.results = null;
+    this.displayGraph = false;
     const currentDate = new Date();
     const after = new Date();
     const before = currentDate.toISOString();
@@ -108,28 +109,60 @@ export default class TrafficController {
       default:
         after.setDate(after.getDate() - 1);
     }
+    this.getAllTraffic(null, after.toISOString(), before, this.subnet);
+  }
+
+  getAllTraffic(cursor, after, before, subnet) {
     const params = {
-      after: after.toISOString(),
+      after,
       before,
-      subnet: this.subnet,
+      subnet,
     };
     this.networkSecurityService
-      .getTraffic(params)
-      .then(({ data }) => {
+      .getAllTraffic({
+        cursor,
+        params,
+        pageSize: this.PAGE_SIZE,
+      })
+      .then((response) => {
+        const { data } = response;
         if (data.message) {
           this.Alerter.error(
             this.$translate.instant('network_security_dashboard_events_error'),
             'network_security_error',
           );
           return data;
         }
-        this.results = data;
-        this.resume(after.toISOString(), before, this.subnet);
-        this.loadGraph();
-        return data;
-      })
-      .finally(() => {
-        this.isLoading = false;
+        if (data) {
+          if (!this.results) {
+            this.results = data;
+          } else {
+            this.results.timestamps = this.results.timestamps.concat(
+              data.timestamps,
+            );
+            this.results.bps.dropped = this.results.bps.dropped.concat(
+              data.bps.dropped,
+            );
+            this.results.bps.passed = this.results.bps.passed.concat(
+              data.bps.passed,
+            );
+            this.results.pps.dropped = this.results.pps.dropped.concat(
+              data.pps.dropped,
+            );
+            this.results.pps.passed = this.results.pps.passed.concat(
+              data.pps.passed,
+            );
+          }
+        }
+        if (response.cursor.next) {
+          this.getAllTraffic(response.cursor.next, after, before, subnet);
+        } else {
+          this.isLoading = false;
+          this.displayGraph = true;
+          this.resume(after, before, subnet);
+          this.loadGraph();
+        }
+        return this.results;
       });
   }
 

diff --git a/packages/manager/apps/dedicated/client/app/network-security/traffic/traffic.html b/packages/manager/apps/dedicated/client/app/network-security/traffic/traffic.html
@@ -60,7 +60,7 @@
     <div class="text-center" data-ng-if="$ctrl.isLoading">
         <oui-spinner></oui-spinner>
     </div>
-    <div data-ng-if="$ctrl.results">
+    <div data-ng-if="$ctrl.displayGraph">
         <div class="d-flex justify-content-start">
             <div class="oui-box oui-box_light mr-4">
                 <h4