netobserv · jpinsonneau · Apr 10, 2026 · Mar 25, 2026 · Apr 1, 2026 · Apr 1, 2026
diff --git a/web/cypress/e2e/table/fields.spec.ts b/web/cypress/e2e/table/fields.spec.ts
@@ -81,11 +81,9 @@ describe('netflow-table', () => {
     // others
     cy.checkRecordField('K8S_FlowLayer', 'Flow layer', ['infra']);
 
-    cy.get('[data-test-id="group-5"]').contains("L3 Layer");
+    cy.get('[data-test-id="group-5"]').contains("Protocol Info");
     cy.checkRecordField('Proto', 'Protocol', ['ICMP']);
     cy.checkRecordField('Dscp', 'DSCP', ['Standard']);
-
-    cy.get('[data-test-id="group-6"]').contains("ICMP");
     cy.checkRecordField('IcmpType', 'Type', ['ICMP_DEST_UNREACH']);
     cy.checkRecordField('IcmpCode', 'Code', ['ICMP_NET_UNREACH']);
 
@@ -121,7 +119,7 @@ describe('netflow-table', () => {
     cy.get('#netflow-table-row-2').click();
 
     // check for rtt
-    cy.checkRecordField('TimeFlowRttMs', 'Flow RTT', ['4.05ms']);
+    cy.checkRecordField('TimeFlowRttMs', 'Flow RTT', ['4ms']);
   });
 
   it('display multiCluster', () => {

diff --git a/web/cypress/support/commands.ts b/web/cypress/support/commands.ts
@@ -111,14 +111,14 @@ Cypress.Commands.add('openColumnsModal', () => {
 
 Cypress.Commands.add('selectPopupItems', (id, names) => {
   for (let i = 0; i < names.length; i++) {
-    cy.get(id).get('.pf-v5-c-modal-box__body').contains(names[i])
+    cy.get(id).get('.modal-body').contains(names[i])
       .closest('.pf-v5-c-data-list__item-row').find('.pf-v5-c-data-list__check').click();
   }
 });
 
 Cypress.Commands.add('checkPopupItems', (id, ids) => {
   for (let i = 0; i < ids.length; i++) {
-    cy.get(id).find('.pf-v5-c-modal-box__body').find(`#${ids[i]}`).check();
+    cy.get(id).find('.modal-body').find(`#${ids[i]}`).check();
   }
 });
 

diff --git a/web/cypress/support/const.ts b/web/cypress/support/const.ts
@@ -10,10 +10,10 @@ export const availablePanelsCount = 52;
 export const defaultPanelsCount = 2;
 
 // table specific config
-export const availableColumnGroupCount = 31;
+export const availableColumnGroupCount = 29;
 export const availableColumnCount = 57;
 export const defaultColumnGroupCount = 6;
-export const defaultColumnCount = 11;
+export const defaultColumnCount = 10;
 
 export const admin_kubeconfig = Cypress.env('KUBECONFIG_PATH');
 export const DEFAULT_RETRY_OPTIONS = { retries: 3, interval: 10000 };
diff --git a/web/cypress/views/netflow-page.ts b/web/cypress/views/netflow-page.ts
@@ -51,11 +51,13 @@ export const netflowPage = {
     stopAutoRefresh: () => {
         cy.byTestID(genSelectors.refreshDrop).should('exist').then($btn => {
             // only stop refresh if it's not already OFF
-            if (!$btn.text().includes("Refresh off")) {
-                cy.byTestID(genSelectors.refreshDrop).click()
+            if ($btn.text() != "Refresh off") {
+                cy.wrap($btn).click({ force: true })
                 // Wait for dropdown menu to be rendered and visible
                 cy.get('.pf-v5-c-menu').should('be.visible')
-                cy.get('body').find('[data-test="OFF_KEY"]').click()
+                cy.get('[data-test="OFF_KEY"]')
+                    .should('be.visible')
+                    .click()
             }
         })
     },

diff --git a/web/src/components/dropdowns/group-dropdown.tsx b/web/src/components/dropdowns/group-dropdown.tsx
@@ -30,6 +30,7 @@ export const GroupDropdown: React.FC<GroupDropdownProps> = ({
       data-test={id}
       id={id}
       isOpen={isOpen}
+      onOpenChange={setOpen}
       toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
         <MenuToggle
           ref={toggleRef}
@@ -38,7 +39,6 @@ export const GroupDropdown: React.FC<GroupDropdownProps> = ({
           isDisabled={disabled}
           isExpanded={isOpen}
           onClick={() => setOpen(!isOpen)}
-          onBlur={() => setTimeout(() => setOpen(false), 500)}
         >
           {getGroupName(selected, scopes, t)}
         </MenuToggle>

diff --git a/web/src/components/dropdowns/layout-dropdown.tsx b/web/src/components/dropdowns/layout-dropdown.tsx
@@ -46,14 +46,14 @@ export const LayoutDropdown: React.FC<LayoutDropdownProps> = ({ selected, setLay
       data-test={id}
       id={id}
       isOpen={isOpen}
+      onOpenChange={setOpen}
       toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
         <MenuToggle
           ref={toggleRef}
           data-test={`${id}-dropdown`}
           id={`${id}-dropdown`}
           isExpanded={isOpen}
           onClick={() => setOpen(!isOpen)}
-          onBlur={() => setTimeout(() => setOpen(false), 500)}
         >
           {getLayoutDisplay(selected)}
         </MenuToggle>

diff --git a/web/src/components/dropdowns/match-dropdown.tsx b/web/src/components/dropdowns/match-dropdown.tsx
@@ -44,6 +44,7 @@ export const MatchDropdown: React.FC<MatchDropdownProps> = ({ allowBidirectional
       data-test={id}
       id={id}
       isOpen={isOpen}
+      onOpenChange={setOpen}
       toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
         <MenuToggle
           ref={toggleRef}
@@ -52,7 +53,6 @@ export const MatchDropdown: React.FC<MatchDropdownProps> = ({ allowBidirectional
           className="match-dropdown"
           isExpanded={isOpen}
           onClick={() => setOpen(!isOpen)}
-          onBlur={() => setTimeout(() => setOpen(false), 500)}
         >
           {getMatchDisplay(selected, true)}
         </MenuToggle>

diff --git a/web/src/components/dropdowns/metric-type-dropdown.tsx b/web/src/components/dropdowns/metric-type-dropdown.tsx
@@ -46,6 +46,7 @@ export const MetricTypeDropdown: React.FC<MetricTypeDropdownProps> = ({
       data-test={id}
       id={id}
       isOpen={isOpen}
+      onOpenChange={setOpen}
       popperProps={{
         position: 'right'
       }}
@@ -56,7 +57,6 @@ export const MetricTypeDropdown: React.FC<MetricTypeDropdownProps> = ({
           id={`${id}-dropdown`}
           isExpanded={isOpen}
           onClick={() => setOpen(!isOpen)}
-          onBlur={() => setTimeout(() => setOpen(false), 500)}
         >
           {getMetricDisplay(selected as MetricType)}
         </MenuToggle>

diff --git a/web/src/components/dropdowns/refresh-dropdown.tsx b/web/src/components/dropdowns/refresh-dropdown.tsx
@@ -50,6 +50,7 @@ export const RefreshDropdown: React.FC<RefreshDropdownProps> = ({ disabled, id,
         data-test={id}
         id={id}
         isOpen={isOpen}
+        onOpenChange={setOpen}
         onSelect={() => setOpen(false)}
         toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
           <MenuToggle
@@ -58,7 +59,6 @@ export const RefreshDropdown: React.FC<RefreshDropdownProps> = ({ disabled, id,
             id={`${id}-dropdown`}
             isDisabled={disabled}
             onClick={() => setOpen(!isOpen)}
-            onBlur={() => setTimeout(() => setOpen(false), 500)}
             isExpanded={isOpen}
           >
             {refreshOptions[selectedKey as keyof typeof refreshOptions]}

diff --git a/web/src/components/dropdowns/scope-dropdown.tsx b/web/src/components/dropdowns/scope-dropdown.tsx
@@ -23,14 +23,14 @@ export const ScopeDropdown: React.FC<ScopeDropdownProps> = ({ selected, setScope
         position: 'right'
       }}
       isOpen={isOpen}
+      onOpenChange={setOpen}
       toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
         <MenuToggle
           ref={toggleRef}
           data-test={`${id}-dropdown`}
           id={`${id}-dropdown`}
           isExpanded={isOpen}
           onClick={() => setOpen(!isOpen)}
-          onBlur={() => setTimeout(() => setOpen(false), 500)}
         >
           {scopes.find(sc => sc.id === selected)?.name || t('n/a')}
         </MenuToggle>

diff --git a/web/src/components/dropdowns/time-range-dropdown.tsx b/web/src/components/dropdowns/time-range-dropdown.tsx
@@ -74,14 +74,14 @@ export const TimeRangeDropdown: React.FC<TimeRangeDropdownProps> = ({ id, range,
         data-test={id}
         id={id}
         isOpen={isOpen}
+        onOpenChange={setOpen}
         onSelect={() => setOpen(false)}
         toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
           <MenuToggle
             ref={toggleRef}
             data-test={`${id}-dropdown`}
             id={`${id}-dropdown`}
             onClick={() => setOpen(!isOpen)}
-            onBlur={() => setTimeout(() => setOpen(false), 500)}
           >
             {selectedKey === customTimeRangeKey
               ? textContent(false)

diff --git a/web/src/components/dropdowns/truncate-dropdown.tsx b/web/src/components/dropdowns/truncate-dropdown.tsx
@@ -43,14 +43,14 @@ export const TruncateDropdown: React.FC<TruncateDropdownProps> = ({ selected, se
       data-test={id}
       id={id}
       isOpen={isOpen}
+      onOpenChange={setOpen}
       toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
         <MenuToggle
           ref={toggleRef}
           data-test={`${id}-dropdown`}
           id={`${id}-dropdown`}
           isExpanded={isOpen}
           onClick={() => setOpen(!isOpen)}
-          onBlur={() => setTimeout(() => setOpen(false), 500)}
         >
           {getTruncateDisplay(selected)}
         </MenuToggle>

diff --git a/web/src/components/toolbar/filters/compare-filter.tsx b/web/src/components/toolbar/filters/compare-filter.tsx
@@ -95,14 +95,14 @@ export const CompareFilter: React.FC<CompareFilterProps> = ({ value, setValue, c
     <Dropdown
       id="filter-compare"
       isOpen={isOpen}
+      onOpenChange={setOpen}
       toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
         <MenuToggle
           ref={toggleRef}
           id="filter-compare-toggle-button"
           badge={<Badge>{value}</Badge>}
           onClick={() => setOpen(!isOpen)}
           isExpanded={isOpen}
-          onBlur={() => setTimeout(() => setOpen(false), 500)}
         >
           {getText(value)}
         </MenuToggle>

diff --git a/web/src/components/toolbar/links-overflow.tsx b/web/src/components/toolbar/links-overflow.tsx
@@ -82,6 +82,7 @@ export const LinksOverflow: React.FC<LinksOverflowProps> = ({ id, items, text })
           data-test={id + '-dropdown'}
           id={id + '-dropdown'}
           onSelect={() => setOpen(false)}
+          onOpenChange={setOpen}
           isOpen={isOpen}
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
@@ -93,7 +94,6 @@ export const LinksOverflow: React.FC<LinksOverflowProps> = ({ id, items, text })
               icon={<EllipsisVIcon />}
               isExpanded={isOpen}
               onClick={() => setOpen(!isOpen)}
-              onBlur={() => setTimeout(() => setOpen(false), 500)}
             >
               <>
                 <EllipsisVIcon /> {text || t('More options')}