NETOBSERV-2097 SDK + PF6 migration

.golangci.yml

@@ -38,6 +38,7 @@ linters:
       - third_party$
       - builtin$
       - examples$
+      - node_modules
     rules:
       - linters:
         - staticcheck

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

@@ -45,11 +45,11 @@ describe('netflow-topology', () => {
     cy.get('#elementPanel-drawer-body').should('exist');
     cy.get('#drawer-tabs').click();
     cy.get('.element-metrics-container').should('exist');
-    cy.get('.pf-v5-c-chart').should('exist');
+    cy.get('.pf-v6-c-chart').should('exist');
 
     //close drawer
-    cy.get('.pf-v5-c-drawer__close').click();
-    cy.get('.pf-v5-c-drawer__panel-main').should('not.exist');
+    cy.get('.pf-v6-c-drawer__close').click();
+    cy.get('.pf-v6-c-drawer__panel-main').should('not.exist');
   });
 
   it('update options', () => {

web/cypress/integration-tests/netflow_export.cy.ts

@@ -25,7 +25,7 @@ describe('(OCP-72610 Network_Observability) Export automation', { tags: ['Networ
         cy.readFile('cypress/downloads/overview_page.png')
 
         // Export only Top 5 average bytes rates panel
-        cy.get('#panel-kebab-top_avg_byte_rates-container > .pf-v5-c-menu-toggle').should('exist').click()
+        cy.get('#panel-kebab-top_avg_byte_rates-container > .pf-v6-c-menu-toggle').should('exist').click()
         cy.contains("Export panel").should('exist').click()
         cy.readFile('cypress/downloads/overview_panel_top_avg_byte_rates.png')
         cy.exec('rm cypress/downloads/overview_page.png')

web/cypress/integration-tests/netflow_table.cy.ts

@@ -124,7 +124,7 @@ describe('(OCP-50532, OCP-50531, OCP-50530, OCP-59408 Network_Observability) Net
         netflowPage.clearAllFilters()
 
         // verify NOT filter
-        cy.get(filterSelectors.filterDropdown).click().get('.pf-v5-c-panel__main-body').should('be.visible')
+        cy.get(filterSelectors.filterDropdown).click().get('.pf-v6-c-panel__main-body').should('be.visible')
         cy.get(filterSelectors.sourceRadio).should('exist').click()
         cy.get(filterSelectors.columnFilter).should('exist').click().get('#namespace').should('exist').click()
         cy.get(filterSelectors.compareDropdown).should('exist').click().get('#not-equal').should('exist').click()
@@ -136,13 +136,13 @@ describe('(OCP-50532, OCP-50531, OCP-50530, OCP-59408 Network_Observability) Net
 
         // verify src port filter and port Naming
         cy.get(filterSelectors.filterInput).type("src_port=3100" + '{enter}')
-        cy.get('#src_port-0-toggle > span.pf-v5-c-menu-toggle__text').should('contain.text', 'loki')
+        cy.get('#src_port-0-toggle > span.pf-v6-c-menu-toggle__text').should('contain.text', 'loki')
 
         // disable filter
         cy.get('#src_port-0-toggle').click().get('#dropdown-item-disable').click()
 
         // sort by port
-        cy.get('[data-test=th-SrcPort] > .pf-v5-c-table__button').click()
+        cy.get('[data-test=th-SrcPort] > .pf-v6-c-table__button').click()
 
         // Verify SrcPort doesnt not have text loki for all rows
         cy.get('[data-test-td-column-id=SrcPort]').each((td) => {
@@ -179,7 +179,9 @@ describe('(OCP-50532, OCP-50531, OCP-50530, OCP-59408 Network_Observability) Net
         cy.visit('/netflow-traffic')
 
         cy.get('#pageHeader').should('exist').then(() => {
-            const settings = JSON.parse(localStorage.getItem('netobserv-plugin-settings'))
+            const rawSettings = localStorage.getItem('netobserv-plugin-settings')
+            expect(rawSettings, 'netobserv-plugin-settings should exist').to.not.be.null
+            const settings = JSON.parse(rawSettings as string)
             expect(settings['netflow-traffic-refresh']).to.be.equal(15000)
             expect(settings['netflow-traffic-size-size']).to.be.equal('s')
             expect(settings['netflow-traffic-columns']).to.include('StartTime')

web/cypress/integration-tests/quickFilters.cy.ts

@@ -49,7 +49,7 @@ describe('(OCP-56222 Network_Observability) Quick Filters test', { tags: ['Netwo
         })
         cy.contains("Quick filters").should('exist').click()
         cy.get('#quick-filters-dropdown').contains("Test NS")
-        cy.get('#quick-filters-dropdown').find('.pf-v5-c-check__input').should('exist').click()
+        cy.get('#quick-filters-dropdown').find('.pf-v6-c-check__input').should('exist').click()
 
         // verify source and destination NS are test-server and test-client respectively
         cy.get('[data-test-td-column-id=SrcK8S_Namespace]').each((td) => {
@@ -59,7 +59,7 @@ describe('(OCP-56222 Network_Observability) Quick Filters test', { tags: ['Netwo
             expect(td).to.contain(CLIENT_NS)
         })
 
-        cy.get('#quick-filters-dropdown').find('.pf-v5-c-check__input').should('exist').click()
+        cy.get('#quick-filters-dropdown').find('.pf-v6-c-check__input').should('exist').click()
         cy.get('#filters').should('not.exist')
     })
 

web/cypress/integration-tests/table_queryopts.cy.ts

@@ -120,7 +120,7 @@ describe('(OCP-50532, OCP-50531, OCP-50530, OCP-59408 Network_Observability) Net
 
         // filter on DSCP values
         cy.get(filterSelectors.filterInput).type("dscp=0" + '{enter}').click()
-        cy.get('#dscp-0-toggle > span.pf-v5-c-menu-toggle__text').should('contain.text', 'Standard')
+        cy.get('#dscp-0-toggle > span.pf-v6-c-menu-toggle__text').should('contain.text', 'Standard')
 
         // Verify DSCP value is Standard for all rows
         cy.get('[data-test-td-column-id=Dscp]').each((td) => {

web/cypress/integration-tests/topology_groups.cy.ts

@@ -52,7 +52,7 @@ describe("(OCP-53591 Network_Observability) Netflow Topology groups features", {
         // using slider
         let lastRefresh = Cypress.$("#lastRefresh").text()
         cy.log(`last refresh is ${lastRefresh}`)
-        cy.get('.pf-v5-c-progress-stepper').get('#scope-step-2 >  div:nth-child(2) > button').click().then(slider => {
+        cy.get('.pf-v6-c-progress-stepper').get('#scope-step-2 >  div:nth-child(2) > button').click().then(slider => {
             netflowPage.waitForLokiQuery()
             cy.wait(3000)
             cy.get('#lastRefresh').invoke('text').should('not.eq', lastRefresh)

web/cypress/integration-tests/topology_view.cy.ts

@@ -86,7 +86,7 @@ describe("(OCP-53591 Network_Observability) Netflow Topology view features", { t
         cy.get('#drawer-tabs > ul > li:nth-child(1)').should('exist')
         // metrics tab
         cy.get('#drawer-tabs > ul > li:nth-child(2)').should('exist').click()
-        cy.get('div.pf-v5-c-chart').should('exist')
+        cy.get('div.pf-v6-c-chart').should('exist')
     })
 
     afterEach("test", function () {

web/cypress/support/commands.ts

@@ -81,7 +81,7 @@ Cypress.Commands.add('openPanelsModal', () => {
   cy.showAdvancedOptions();
   cy.get('#manage-overview-panels-button').click();
   cy.get('#overview-panels-modal').should('exist');
-  cy.get('#overview-panels-modal').find('.pf-v5-c-data-list__item-content').should('have.length', c.availablePanelsCount);
+  cy.get('#overview-panels-modal').find('.pf-v6-c-data-list__item-content').should('have.length', c.availablePanelsCount);
 });
 
 Cypress.Commands.add('checkColumns', (groups = c.defaultColumnGroupCount, cols = c.defaultColumnCount) => {
@@ -106,13 +106,13 @@ Cypress.Commands.add('openColumnsModal', () => {
   cy.showAdvancedOptions();
   cy.get('#manage-columns-button').click();
   cy.get('#columns-modal').should('exist');
-  cy.get('#columns-modal').find('.pf-v5-c-data-list__item-content').should('have.length', c.availableColumnCount);
+  cy.get('#columns-modal').find('.pf-v6-c-data-list__item-content').should('have.length', c.availableColumnCount);
 });
 
 Cypress.Commands.add('selectPopupItems', (id, names) => {
   for (let i = 0; i < names.length; 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();
+      .closest('.pf-v6-c-data-list__item-row').find('.pf-v6-c-data-list__check').click();
   }
 });
 
@@ -133,8 +133,8 @@ Cypress.Commands.add('sortColumn', (name) => {
 
 Cypress.Commands.add('dropdownSelect', (id, name) => {
   cy.get(`#${id}`).click();
-  cy.get('.pf-v5-c-menu__content').should('exist');
-  cy.get('.pf-v5-c-menu__content').find(`#${name}`).click();
+  cy.get('.pf-v6-c-menu__content').filter(':visible').should('exist');
+  cy.get('.pf-v6-c-menu__content').filter(':visible').find(`#${name}`).click();
 });
 
 Cypress.Commands.add('checkContent', (topology) => {
@@ -163,7 +163,7 @@ Cypress.Commands.add('changeQueryOption', (name, topology) => {
 
 Cypress.Commands.add('changeTimeRange', (name, topology) => {
   cy.get('#time-range-dropdown-dropdown').click();
-  cy.get('.pf-v5-c-menu__content').contains(name).click();
+  cy.get('.pf-v6-c-menu__content').filter(':visible').contains(name).click();
   cy.checkContent(topology);
 });
 
@@ -179,7 +179,7 @@ Cypress.Commands.add('changeMetricType', (name) => {
   cy.showDisplayOptions();
 
   cy.get('#metricType-dropdown').click();
-  cy.get('.pf-v5-c-menu__content').contains(name).click();
+  cy.get('.pf-v6-c-menu__content').filter(':visible').contains(name).click();
 
   // For Packets metric, we expect a full page error due to mock timeout
   if (name === 'Packets') {

web/cypress/views/dashboards-page.ts

@@ -70,7 +70,6 @@ Cypress.Commands.add('checkDashboards', (names) => {
             cy.get(graphSelector.graphBody, { timeout: 120000 }).should($body => {
                 const hasEmptyState = $body.hasClass('pf-v6-c-empty-state')
                 if (hasEmptyState) {
-                    // Force a retry by throwing an error
                     throw new Error('Dashboard panel still showing empty state, retrying...')
                 }
             })

web/cypress/views/list-page.ts

@@ -59,9 +59,9 @@ export const listPage = {
   dvFilter: {
     byName: (name: string) => {
       cy.get('[data-ouia-component-id="DataViewFilters"]').within(() =>
-        cy.get('.pf-v5-c-menu-toggle').first().click(),
+        cy.get('.pf-v6-c-menu-toggle').first().click(),
       );
-      cy.get('.pf-v5-c-menu__list-item').contains('Name').click();
+      cy.get('.pf-v6-c-menu__list-item').should('be.visible').contains('Name').click();
       cy.get('[aria-label="Name filter"]').clear().type(name);
     },
     by: (checkboxLabel: string) => {

web/cypress/views/netflow-page.ts

@@ -73,7 +73,7 @@ export const netflowPage = {
     selectSourceNS: (project: string) => {
         // verify Source namespace filter
         cy.get(filterSelectors.filterInput).type("src_namespace=" + project + '{enter}')
-        cy.get('#src_namespace-0-toggle > span.pf-v5-c-menu-toggle__text').should('contain.text', `${project}`)
+        cy.get('#src_namespace-0-toggle > span.pf-v6-c-menu-toggle__text').should('contain.text', `${project}`)
     }
 }
 
@@ -136,7 +136,7 @@ export function setupTopologyViewWithNamespaceFilter(namespace?: string) {
     // Add filter for namespace if provided
     if (namespace) {
         cy.get(filterSelectors.filterInput).type("src_namespace=" + namespace + '{enter}')
-        cy.get('#src_namespace-0-toggle > span.pf-v5-c-menu-toggle__text').should('contain.text', `${namespace}`)
+        cy.get('#src_namespace-0-toggle > span.pf-v6-c-menu-toggle__text').should('contain.text', `${namespace}`)
     }
 
     cy.byTestID("show-view-options-button").should('exist').click().then(() => {
@@ -149,19 +149,19 @@ export function setupTopologyViewWithNamespaceFilter(namespace?: string) {
 }
 
 export namespace pluginSelectors {
-    export const next = '#wizard-container > div > div > footer > button.pf-v5-c-button.pf-m-primary'
-    export const back = '#wizard-container > div > div > footer > button.pf-v5-c-button.pf-m-secondary'
+    export const next = '#wizard-container > div > div > footer > button.pf-v6-c-button.pf-m-primary'
+    export const back = '#wizard-container > div > div > footer > button.pf-v6-c-button.pf-m-secondary'
     export const save = '[data-test=save-changes]'
-    export const del = '#editor-toggle-footer > div > div > div > button.pf-v5-c-button.pf-m-danger'
-    export const confirmDel = '#delete-modal > div > div.modal-footer > div > button.pf-v5-c-button.pf-m-danger'
+    export const del = '#editor-toggle-footer > div > div > div > button.pf-v6-c-button.pf-m-danger'
+    export const confirmDel = '#delete-modal > div > div.modal-footer > div > button.pf-v6-c-button.pf-m-danger'
     export const openNetworkTraffic = '#open-network-traffic'
     export const editFlowcollector = '#edit-flow-collector'
-    export const update = '#editor-toggle-footer > div > div > div > button.pf-v5-c-button.pf-m-primary'
-    export const privilegedToggle = '#root_spec_agent_ebpf_privileged_field > div > div.pf-m-flex-4 > label > span.pf-v5-c-switch__toggle'
+    export const update = '#editor-toggle-footer > div > div > div > button.pf-v6-c-button.pf-m-primary'
+    export const privilegedToggle = '#root_spec_agent_ebpf_privileged_field > div > div.pf-m-flex-4 > label > span.pf-v6-c-switch__toggle'
     export const packetDropEnable = '[data-test-id=root_spec_agent_ebpf_features-PacketDrop]'
     export const lokiMode = '#root_spec_loki_mode-toggle'
     export const monolithicMode = '#root_spec_loki_mode-Monolithic'
-    export const installDemoLoki = '#root_spec_loki_monolithic_installDemoLoki_field > .pf-v5-l-flex > .pf-m-flex-4 > .pf-v5-c-switch > .pf-v5-c-switch__toggle'
+    export const installDemoLoki = '#root_spec_loki_monolithic_installDemoLoki_field > .pf-v6-l-flex > .pf-m-flex-4 > .pf-v6-c-switch > .pf-v6-c-switch__toggle'
 }
 
 export namespace genSelectors {
@@ -177,32 +177,32 @@ export namespace colSelectors {
     export const columnsModal = '.modal-content'
     export const save = 'columns-save-button'
     export const resetDefault = 'columns-reset-button'
-    export const mac = '[data-test=th-Mac] > .pf-v5-c-table__button'
-    export const k8sOwner = '[data-test=th-K8S_OwnerObject] > .pf-v5-c-table__button'
-    export const ipPort = '[data-test=th-AddrPort] > .pf-v5-c-table__button'
-    export const protocol = '[data-test=th-Proto] > .pf-v5-c-table__button'
-    export const icmpType = '[data-test=th-IcmpType] > .pf-v5-c-table__button'
-    export const icmpCode = '[data-test=th-IcmpCode] > .pf-v5-c-table__button'
-    export const srcNodeIP = '[data-test=th-SrcK8S_HostIP] > .pf-v5-c-table__button'
-    export const srcNS = '[data-test=th-SrcK8S_Namespace] > .pf-v5-c-table__button'
-    export const dstNodeIP = '[data-test=th-DstK8S_HostIP] > .pf-v5-c-table__button'
-    export const direction = '[data-test=th-FlowDirection] > .pf-v5-c-table__button'
-    export const bytes = '[data-test=th-Bytes] > .pf-v5-c-table__button'
-    export const packets = '[data-test=th-Packets] > .pf-v5-c-table__button'
-    export const recordType = '[data-test=th-RecordType] > .pf-v5-c-table__button'
-    export const conversationID = '[data-test=th-_HashId] > .pf-v5-c-table__button'
-    export const flowRTT = '[data-test=th-TimeFlowRttMs] > .pf-v5-c-table__button'
-    export const dscp = '[data-test=th-Dscp] > .pf-v5-c-table__button'
-    export const dnsLatency = '[data-test=th-DNSLatency] > .pf-v5-c-table__column-help > .pf-v5-c-table__button'
-    export const dnsResponseCode = '[data-test=th-DNSResponseCode] > .pf-v5-c-table__column-help > .pf-v5-c-table__button'
-    export const dnsId = '[data-test=th-DNSId] > .pf-v5-c-table__button'
-    export const dnsError = '[data-test=th-DNSErrNo] > .pf-v5-c-table__button'
+    export const mac = '[data-test=th-Mac] > .pf-v6-c-table__button'
+    export const k8sOwner = '[data-test=th-K8S_OwnerObject] > .pf-v6-c-table__button'
+    export const ipPort = '[data-test=th-AddrPort] > .pf-v6-c-table__button'
+    export const protocol = '[data-test=th-Proto] > .pf-v6-c-table__button'
+    export const icmpType = '[data-test=th-IcmpType] > .pf-v6-c-table__button'
+    export const icmpCode = '[data-test=th-IcmpCode] > .pf-v6-c-table__button'
+    export const srcNodeIP = '[data-test=th-SrcK8S_HostIP] > .pf-v6-c-table__button'
+    export const srcNS = '[data-test=th-SrcK8S_Namespace] > .pf-v6-c-table__button'
+    export const dstNodeIP = '[data-test=th-DstK8S_HostIP] > .pf-v6-c-table__button'
+    export const direction = '[data-test=th-FlowDirection] > .pf-v6-c-table__button'
+    export const bytes = '[data-test=th-Bytes] > .pf-v6-c-table__button'
+    export const packets = '[data-test=th-Packets] > .pf-v6-c-table__button'
+    export const recordType = '[data-test=th-RecordType] > .pf-v6-c-table__button'
+    export const conversationID = '[data-test=th-_HashId] > .pf-v6-c-table__button'
+    export const flowRTT = '[data-test=th-TimeFlowRttMs] > .pf-v6-c-table__button'
+    export const dscp = '[data-test=th-Dscp] > .pf-v6-c-table__button'
+    export const dnsLatency = '[data-test=th-DNSLatency] > .pf-v6-c-table__column-help > .pf-v6-c-table__button'
+    export const dnsResponseCode = '[data-test=th-DNSResponseCode] > .pf-v6-c-table__column-help > .pf-v6-c-table__button'
+    export const dnsId = '[data-test=th-DNSId] > .pf-v6-c-table__button'
+    export const dnsError = '[data-test=th-DNSErrNo] > .pf-v6-c-table__button'
     export const dnsName = '[data-test=th-DNSName]'
-    export const srcZone = '[data-test=th-SrcZone] > .pf-v5-c-table__button'
-    export const dstZone = '[data-test=th-DstZone] > .pf-v5-c-table__button'
-    export const clusterName = '[data-test=th-ClusterName] > .pf-v5-c-table__button'
-    export const srcNetworkName = '[data-test=th-SrcNetworkName] > .pf-v5-c-table__button'
-    export const dstNetworkName = '[data-test=th-DstNetworkName] > .pf-v5-c-table__button'
+    export const srcZone = '[data-test=th-SrcZone] > .pf-v6-c-table__button'
+    export const dstZone = '[data-test=th-DstZone] > .pf-v6-c-table__button'
+    export const clusterName = '[data-test=th-ClusterName] > .pf-v6-c-table__button'
+    export const srcNetworkName = '[data-test=th-SrcNetworkName] > .pf-v6-c-table__button'
+    export const dstNetworkName = '[data-test=th-DstNetworkName] > .pf-v6-c-table__button'
 }
 
 export namespace filterSelectors {
@@ -235,14 +235,14 @@ export namespace topologySelectors {
     export const metricsFunction = '#metricFunction'
     export const metricTypeDrop = 'metricType-dropdown'
     export const metricType = '#metricType'
-    export const optsClose = '.pf-v5-c-drawer__close > .pf-v5-c-button'
+    export const optsClose = '.pf-v6-c-drawer__close > .pf-v6-c-button'
     export const nGroups = '[data-layer-id="groups"] > g'
     export const group = 'g[data-type="group"]'
     export const node = 'g[data-kind="node"]:empty'
     export const edge = 'g[data-kind="edge"]'
     export const groupLayer = '[data-layer-id="groups"]'
     export const defaultLayer = '[data-layer-id="default"]'
-    export const groupToggle = '[for="group-collapsed-switch"] > .pf-v5-c-switch__toggle'
+    export const groupToggle = '[for="group-collapsed-switch"] > .pf-v6-c-switch__toggle'
     export const edgeToggle = "#edges-switch"
     export const labelToggle = '#edges-tag-switch'
     export const badgeToggle = '#badge-switch'
@@ -284,7 +284,7 @@ export const memoryUsage = {
 }
 
 export namespace histogramSelectors {
-    export const timeRangeContainer = "#chart-histogram > div.pf-v5-l-flex.pf-m-row.histogram-range-container"
+    export const timeRangeContainer = "#chart-histogram > div.pf-v6-l-flex.pf-m-row.histogram-range-container"
     export const zoomin = timeRangeContainer + " > div:nth-child(5) > div > div:nth-child(2) > div > button"
     export const zoomout = timeRangeContainer + "> div:nth-child(5) > div > div:nth-child(1) > div > button"
     const forwardShift = timeRangeContainer + "> div:nth-child(4)"
@@ -309,7 +309,7 @@ Cypress.Commands.add('checkPanel', (panelName) => {
 Cypress.Commands.add('checkPopItems', (id, names) => {
     for (let i = 0; i < names.length; i++) {
         cy.get(id).contains(names[i])
-            .closest('.pf-v5-c-data-list__item-row').find('.pf-v5-c-data-list__check');
+            .closest('.pf-v6-c-data-list__item-row').find('.pf-v6-c-data-list__check');
     }
 });
 

web/cypress/views/operator-hub-page.ts

@@ -44,7 +44,7 @@ export const installedOperators = {
 
 export const operatorHubPage = {
   getAllTileLabels: () => {
-    return cy.get('.pf-v5-c-badge')
+    return cy.get('.pf-v6-c-badge')
   },
   checkCustomCatalog: (name: string) => {
     sourceActions(name, 'view');

web/cypress/views/yaml-editor.ts

@@ -99,7 +99,7 @@ export const showYAMLSidebar = () => cy.get('[aria-label="Show sidebar"]').click
 export const clickFieldDetailsButton = (fieldName: string) => {
   cy.contains('h5', `${fieldName}`)
     .parents('li')
-    .find('button.pf-v5-c-button')
+    .find('button.pf-v6-c-button')
     .contains('View details')
     .click();
 };