feat(dedicated.network-security): update security dashboard

ref: UXCT-503 - retrieve only IP v4 from selected service - reset selected IP when service is reset - check IP set is valid Signed-off-by: Stephanie Moallic <[email protected]>
ovh · Dec 1, 2023 · cf996cd · cf996cd
1 parent c01d697
commit cf996cd
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 17 deletions.
diff --git a/packages/manager/apps/dedicated/client/app/network-security/network-security.html b/packages/manager/apps/dedicated/client/app/network-security/network-security.html
@@ -15,6 +15,8 @@
     <p data-translate="network_security_dashboard_header_content_survey"></p>
     <p data-translate="network_security_dashboard_header_content_note"></p>
 
+    <div data-ovh-alert="network_security_dashboard_alert"></div>
+
     <oui-header-tabs>
         <oui-header-tabs-item
             active="$ctrl.isScrubbingCenterActive()"

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
@@ -56,6 +56,7 @@ export default class NetworkSecurityService {
       pageNumber: page,
       pageSize,
       serviceName,
+      version: 4,
     };
     return this.$http
       .get('/ips', {

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,4 +1,5 @@
 import { AbstractCursorDatagridController } from '@ovh-ux/manager-ng-apiv2-helper';
+import isNaN from 'lodash/isNaN';
 import { PERIODS, PERIOD_LIST } from './scrubbing-center.constant';
 import { PAGE_SIZE } from '../network-security.constant';
 
@@ -21,6 +22,8 @@ export default class ScrubbingCenterController extends AbstractCursorDatagridCon
     this.errorMessage = '';
     this.periods = this.networkSecurityService.initPeriods(this.PERIODS);
 
+    this.isValid = true;
+
     // Set default period to "Last year"
     this.period = this.periods[this.periods.length - 1];
     this.networkSecurityService.initService().then((data) => {
@@ -34,20 +37,28 @@ export default class ScrubbingCenterController extends AbstractCursorDatagridCon
       this.getAllEvents();
     }
     this.isServiceSelected = false;
-    this.isLoading = false;
   }
 
   createItemsPromise({ cursor }) {
     const params = {
       after: this.after,
-      subnets: this.selectedIp,
     };
+    if (this.selectedIp) {
+      params.subnets = this.selectedIp;
+    }
     const pageSize = this.PAGE_SIZE;
-    return this.networkSecurityService.getEventsList({
-      cursor,
-      params,
-      pageSize,
-    });
+    return this.networkSecurityService
+      .getEventsList({
+        cursor,
+        params,
+        pageSize,
+      })
+      .catch(() => {
+        this.Alerter.error(
+          this.$translate.instant('network_security_dashboard_events_error'),
+          'network_security_dashboard_alert',
+        );
+      });
   }
 
   getAllEvents() {
@@ -79,13 +90,15 @@ export default class ScrubbingCenterController extends AbstractCursorDatagridCon
   }
 
   selectService() {
+    this.selectedIp = null;
+    this.isEmpty = false;
+    this.isServiceSelected = false;
+    this.model = null;
     if (this.service) {
       this.pageSize = 10;
       this.page = 1;
       this.autocomplete = [];
       this.ipsList = [];
-      this.selectedIp = '';
-      this.ipsList = null;
       this.ipSelected = null;
       this.results = null;
       this.isServiceSelected = true;
@@ -98,21 +111,44 @@ export default class ScrubbingCenterController extends AbstractCursorDatagridCon
         )
         .then((data) => {
           this.ipsList = data.map(({ ipBlock }) => ipBlock);
+          this.isEmpty = !this.ipsList.length;
           this.selectedIp = this.ipsList;
           this.getAllEvents();
         });
     } else {
-      this.isServiceSelected = false;
+      this.getAllEvents();
     }
   }
 
   checkSelectedIp(value) {
+    let isValid = true;
     if (!value) {
       return null;
     }
 
-    this.selectedIp = value;
-    return this.getAllEvents();
+    if (value.indexOf('/') === -1 && !ipaddr.isValid(value)) {
+      isValid = false;
+    } else if (value.indexOf('/') > -1) {
+      const ip = value.split('/');
+      if (!ipaddr.isValid(ip[0]) || !isNaN(ip[1])) {
+        isValid = false;
+      }
+    }
+
+    this.isValid = isValid;
+
+    if (isValid) {
+      this.selectedIp = value;
+      if (value.indexOf('/') === -1) {
+        if (value.indexOf('.') > -1) {
+          this.selectedIp = `${value}/32`;
+        } else if (value.indexOf(':') > -1) {
+          this.selectedIp = `${value}/128`;
+        }
+        this.model = this.selectedIp;
+      }
+    }
+    return isValid ? this.getAllEvents() : null;
   }
 
   static displayAction(row) {
@@ -131,6 +167,7 @@ export default class ScrubbingCenterController extends AbstractCursorDatagridCon
   }
 
   onReset() {
+    this.isValid = true;
     this.selectedIp = null;
     this.getAllEvents();
   }

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
@@ -36,6 +36,9 @@
                     data-placeholder="{{:: 'network_security_dashboard_select_ip' | translate}}"
                     data-ng-if="!$ctrl.isServiceSelected"
                 ></oui-search>
+                <div class="oui-color-ae-500" data-ng-if="!$ctrl.isValid">
+                    {{ 'network_security_dashboard_invalid_ip' | translate}}
+                </div>
             </span>
         </div>
         <div class="d-flex">
@@ -54,15 +57,19 @@
         </div>
     </div>
 
-    <div class="text-center" data-ng-if="$ctrl.isLoading">
-        <oui-spinner></oui-spinner>
-    </div>
+    <div
+        data-ng-if="$ctrl.isEmpty"
+        class="text-center m-3"
+        data-translate="network_security_dashboard_empty_table"
+    ></div>
 
     <oui-datagrid
+        data-ng-if="!$ctrl.isEmpty"
         id="{{ $ctrl.datagridId }}"
+        data-empty-placeholder="{{:: 'network_security_dashboard_empty_datagrid' | translate }}"
         data-rows-loader="$ctrl.getItems($config)"
         data-page="{{ $ctrl.cursors.index || 1 }}"
-        data-page-size="{{ $ctrl.pageSize }}"
+        data-page-size="{{ $ctrl.PAGE_SIZE }}"
         data-pagination-mode="arrows"
     >
         <oui-datagrid-column

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
@@ -69,6 +69,7 @@ export default class TrafficController {
     } else {
       this.isServiceSelected = false;
       this.results = null;
+      this.model = '';
     }
   }
 

diff --git a/packages/manager/apps/dedicated/client/app/network-security/translations/Messages_fr_FR.json b/packages/manager/apps/dedicated/client/app/network-security/translations/Messages_fr_FR.json
@@ -50,5 +50,8 @@
   "network_security_dashboard_unit_tb_ps": "Tbps",
   "network_security_dashboard_unit_pb_ps": "Pbps",
   "network_security_dashboard_none": "Aucun",
-  "network_security_dashboard_select_ip": "Saisissez une adresse IP..."
+  "network_security_dashboard_select_ip": "Saisissez une adresse IP...",
+  "network_security_dashboard_empty_datagrid": "Nous n'avons constaté aucune activité suspecte pendant la période sélectionnée.",
+  "network_security_dashboard_empty_table": "Le service sélectionné n'a pas d'adresse IP associée, veuillez en sélectionner un autre.",
+  "network_security_dashboard_invalid_ip": "La valeur saisie pour l'IP est incorrecte."
 }