NETOBSERV-967 skip ticks when popups are open (#375)

* skip ticks when popups are open

* updated testing

* reload page after column save

* avoid updating while popups are open

* fix testing

Author: jpinsonneau

web/cypress/e2e/overview/overview.spec.ts

@@ -21,7 +21,7 @@ describe('netflow-overview', () => {
 
     //Save
     cy.get('#overview-panels-modal').contains('Save').click();
-    cy.checkPanels(6);
+    cy.checkPanels(14);
 
     //reopen modal
     cy.openPanelsModal();

web/cypress/e2e/table/table.spec.ts

@@ -13,14 +13,13 @@ describe('netflow-table', () => {
 
   it('displays table and rows', () => {
     cy.get('#table-container').should('exist');
-    //expect 100 results without filters
-    cy.get('#table-container').find('tr').its('length').should('be.gte', 100);
-    cy.get('#flowsCount').contains('100+ flows');
-
-    cy.addCommonFilter('namespace', c.namespace);
-    cy.addCommonFilter('name', c.pod);
-    cy.changeQueryOption('Match all');
-    cy.changeQueryOption('Both');
+    //expect 50 results without filters
+    cy.get('#table-container').find('tr').its('length').should('be.gte', 50);
+    cy.get('#flowsCount').contains('50+ Flows');
+
+    cy.addFilter('src_namespace', c.namespace);
+    cy.addFilter('src_name', c.pod);
+    cy.changeQueryOption('Show duplicates');
     cy.changeQueryOption('1000');
     cy.changeTimeRange('Last 1 day');
   });
@@ -29,12 +28,33 @@ describe('netflow-table', () => {
     //first open modal
     cy.openColumnsModal();
 
+    //Unselect all columns
+    cy.get('#columns-modal').contains('Select all').click();
+    cy.get('#columns-modal').contains('Unselect all').click();
+
+    //Select column using checkboxes
+    cy.checkPopupItems('#columns-modal', ['StartTime', 'K8S_Object', 'AddrPort', 'Packets']);
+
+    //Save
+    cy.get('#columns-modal').contains('Save').click();
+    //Should not have nested columns and have 4 columns
+    cy.checkColumns(0, 4);
+
+    //reload the page
+    cy.reload();
+
+    //Should have remembered the columns
+    cy.checkColumns(0, 4);
+
+    //reopen modal
+    cy.openColumnsModal();
+
     //Select all columns
     cy.get('#columns-modal').contains('Select all').click();
 
     //Save
     cy.get('#columns-modal').contains('Save').click();
-    cy.checkColumns(24, 48);
+    cy.checkColumns(26, 52);
 
     //reopen modal
     cy.openColumnsModal();

web/cypress/e2e/topology/topology.spec.ts

@@ -16,12 +16,10 @@ describe('netflow-topology', () => {
     //expect some namespaces & edges in the default layer
     cy.get('[data-layer-id="default"]').children().its('length').should('be.gte', 100);
 
-    cy.addCommonFilter('namespace', c.namespace, true);
-    cy.addCommonFilter('name', c.pod, true);
+    cy.addFilter('src_namespace', c.namespace, true);
+    cy.addFilter('src_name', c.pod, true);
     cy.changeMetricType('Packets');
     cy.changeMetricType('Bytes');
-    cy.changeQueryOption('Both', true);
-    cy.changeQueryOption('Match all', true);
     cy.changeTimeRange('Last 1 day', true);
   });
 

web/cypress/support/commands.ts

@@ -68,7 +68,7 @@ Cypress.Commands.add('showDisplayOptions', () => {
     })
 });
 
-Cypress.Commands.add('checkPanels', (panels = 4) => {
+Cypress.Commands.add('checkPanels', (panels = 7) => {
   cy.get('#overview-flex').find('.overview-card').its('length').should('eq', panels);
 });
 
@@ -109,6 +109,12 @@ Cypress.Commands.add('selectPopupItems', (id, names) => {
   }
 });
 
+Cypress.Commands.add('checkPopupItems', (id, ids) => {
+  for (let i = 0; i < ids.length; i++) {
+    cy.get(id).find('.modal-body').find(`#${ids[i]}`).check();
+  }
+});
+
 Cypress.Commands.add('sortColumn', (name) => {
   cy.get('thead').contains(name).click();
   cy.get('[aria-sort="ascending"]').should('have.length', 1);
@@ -132,7 +138,7 @@ Cypress.Commands.add('checkContent', (topology) => {
   }
 });
 
-Cypress.Commands.add('addCommonFilter', (filter, value, topology) => {
+Cypress.Commands.add('addFilter', (filter, value, topology) => {
   cy.get('#column-filter-toggle').click();
   cy.get('.pf-c-accordion__expanded-content-body').find(`#${filter}`).click();
   cy.get('.pf-c-accordion__expanded-content-body').should('not.exist');
@@ -182,10 +188,11 @@ declare global {
       checkColumns(groups?: number, cols?: number): Chainable<Element>
       openColumnsModal(): Chainable<Element>
       selectPopupItems(id: string, names: string[]): Chainable<Element>
+      checkPopupItems(id: string, ids: string[]): Chainable<Element>
       sortColumn(name: string): Chainable<Element>
       dropdownSelect(id: string, name: string): Chainable<Element>
       checkContent(topology?: boolean): Chainable<Element>
-      addCommonFilter(filter: string, value: string, topology?: boolean): Chainable<Element>
+      addFilter(filter: string, value: string, topology?: boolean): Chainable<Element>
       changeQueryOption(name: string, topology?: boolean): Chainable<Element>
       changeTimeRange(name: string, topology?: boolean): Chainable<Element>
       changeMetricFunction(name: string): Chainable<Element>

web/cypress/support/const.ts

@@ -1,6 +1,6 @@
 //set all your shared const here
-export const url = 'http://localhost:9000/netflow-traffic';
-// export const url = 'http://localhost:9001';
+// export const url = 'http://localhost:9000/netflow-traffic';
+export const url = 'http://localhost:9001';
 export const namespace = 'netobserv{enter}';
 export const pod = 'flowlogs-pipeline';
 export const waitTime = 3000;

web/src/components/modals/columns-modal.tsx

@@ -38,8 +38,11 @@ export const ColumnsModal: React.FC<{
   const { t } = useTranslation('plugin__netobserv-plugin');
 
   React.useEffect(() => {
-    setUpdatedColumns(_.cloneDeep(columns));
-  }, [columns]);
+    if (!isModalOpen || _.isEmpty(updatedColumns)) {
+      setUpdatedColumns(_.cloneDeep(columns));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [columns, isModalOpen]);
 
   React.useEffect(() => {
     let allSelected = true;

web/src/components/modals/overview-panels-modal.tsx

@@ -38,8 +38,11 @@ export const OverviewPanelsModal: React.FC<{
   const { t } = useTranslation('plugin__netobserv-plugin');
 
   React.useEffect(() => {
-    setUpdatedPanels(_.cloneDeep(panels));
-  }, [panels]);
+    if (!isModalOpen || _.isEmpty(updatedPanels)) {
+      setUpdatedPanels(_.cloneDeep(panels));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isModalOpen, panels]);
 
   React.useEffect(() => {
     let allSelected = true;

web/src/components/netflow-traffic.tsx

@@ -591,6 +591,10 @@ export const NetflowTraffic: React.FC<{
     if (!initState.current.includes('forcedFiltersLoaded') || !initState.current.includes('configLoaded')) {
       console.error('tick skipped', initState.current);
       return;
+    } else if (isTRModalOpen || isOverviewModalOpen || isColModalOpen || isExportModalOpen) {
+      // also skip tick if modal is open
+      console.debug('tick skipped since modal is open');
+      return;
     }
 
     setLoading(true);
@@ -644,7 +648,19 @@ export const NetflowTraffic: React.FC<{
           })
       );
     }
-  }, [buildFlowQuery, config.features, selectedViewId, manageWarnings, fetchTable, fetchOverview, fetchTopology]);
+  }, [
+    isTRModalOpen,
+    isOverviewModalOpen,
+    isColModalOpen,
+    isExportModalOpen,
+    buildFlowQuery,
+    config.features,
+    selectedViewId,
+    fetchTable,
+    fetchOverview,
+    fetchTopology,
+    manageWarnings
+  ]);
 
   usePoll(tick, interval);