Resolve "Kiali migrate from using Cytoscape to Patternfly"

CHANGELOG.md

@@ -3,6 +3,12 @@
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
+## [2.4.0-bb.2] - 2026-02-06
+
+### Changed
+
+- No longer overriding the visualization implementation from patternfly to cytoscape
+
 ## [2.4.0-bb.1] - 2025-01-29
 
 ### Changed

README.md

 <!-- Warning: Do not manually edit this file. See notes on gluon + helm-docs at the end of this file for more information. -->
 # kiali
 
-![Version: 2.4.0-bb.1](https://img.shields.io/badge/Version-2.4.0--bb.1-informational?style=flat-square) ![AppVersion: 2.4.0](https://img.shields.io/badge/AppVersion-2.4.0-informational?style=flat-square) ![Maintenance Track: bb_integrated](https://img.shields.io/badge/Maintenance_Track-bb_integrated-green?style=flat-square)
+![Version: 2.4.0-bb.2](https://img.shields.io/badge/Version-2.4.0--bb.2-informational?style=flat-square) ![AppVersion: 2.4.0](https://img.shields.io/badge/AppVersion-2.4.0-informational?style=flat-square) ![Maintenance Track: bb_integrated](https://img.shields.io/badge/Maintenance_Track-bb_integrated-green?style=flat-square)
 
 Kiali is an open source project for service mesh observability, refer to https://www.kiali.io for details.
 
@@ -97,7 +97,6 @@ helm install kiali chart/
 | cr.name | string | `"kiali"` |  |
 | cr.namespace | string | `""` |  |
 | cr.annotations | object | `{}` |  |
-| cr.spec.kiali_feature_flags.ui_defaults.graph.impl | string | `"cy"` |  |
 | cr.spec.istio_labels.app_label_name | string | `"app.kubernetes.io/name"` |  |
 | cr.spec.istio_labels.version_label_name | string | `"app.kubernetes.io/version"` |  |
 | cr.spec.istio_component_namespaces.grafana | string | `"monitoring"` |  |

chart/Chart.yaml

 apiVersion: v2
 name: kiali
 description: Kiali is an open source project for service mesh observability, refer to https://www.kiali.io for details.
-version: 2.4.0-bb.1
+version: 2.4.0-bb.2
 appVersion: 2.4.0
 home: https://github.com/kiali/kiali-operator
 maintainers:

chart/tests/cypress/e2e/kiali-health.cy.js

@@ -4,8 +4,8 @@ Cypress.on('uncaught:exception', (err, runnable) => {
 
 before(() => {
   if (Cypress.env('keycloak_test_enable')) {
-        cy.visit(Cypress.env('url'))
-        cy.performKeycloakLogin(Cypress.env('tnr_username'), Cypress.env('tnr_password'))
+    cy.visit(Cypress.env('url'))
+    cy.performKeycloakLogin(Cypress.env('tnr_username'), Cypress.env('tnr_password'))
   }
 })
 
@@ -30,61 +30,103 @@ function collapseMenu() {
   })
 }
 
-// Basic test that validates pages are accessible, basic error check
-it('Check Kiali is accessible', function() {
-  cy.visit(Cypress.env('url'))
-  cy.title().should('contain', 'Kiali')
-  expandMenu();
-  cy.get('#traffic_graph_cy', { timeout: 60000 }).click();
-  cy.get('#applications', { timeout: 60000 }).click();
-  // Check for generic errors (this is the red circle that appears if any connectivity with Promtheus/Grafana/Istio is not working)
-  cy.get('svg[fill="var(--pf-global--danger-color--100)"]').should('not.exist');
-})
-
-// Allow these tests to be skipped with an env variable
-// These tests should only run in BB CI since nothing is istio injected in Package CI
-if (Cypress.env("check_data")) {
-  it('Check Kiali Graph page loads data', function() {
+describe('Kiali', function () {
+  // Basic test that validates pages are accessible, basic error check
+  it('loads when visited', function () {
     cy.visit(Cypress.env('url'))
-    cy.title().should("eq", "Kiali");
-    expandMenu();
-    cy.get('#traffic_graph_cy', { timeout: 60000 }).click();
-    collapseMenu();
-    cy.get('button[id="namespace-selector"').click()
-    cy.get('input[type="checkbox"][value="monitoring"]').check()
-    cy.get('button[id="refresh_button"').click({force: true})
-    // Check for graph side panel because the main graph is tricky to grab
-    cy.get('div[id="graph-side-panel"]', { timeout: 60000 }).should("be.visible")
   })
 
-  it('Check Kiali Applications page loads data', function() {
-    cy.visit(Cypress.env('url'))
-    cy.title().should("eq", "Kiali");
+  it('has a title containing "Kiali"', function () {
+    cy.title().should('contain', 'Kiali')
+  })
+
+  it('pops out the side menu', function () {
     expandMenu();
+  })
+
+  it('loads the traffic graph page', function () {
+    cy.get('#traffic_graph_pf', { timeout: 60000 }).click();
+  })
+
+  it('loads the applications page', function () {
     cy.get('#applications', { timeout: 60000 }).click();
-    collapseMenu();
-    cy.get('button[id="namespace-selector"]').click()
-    //Only check the box for monitoring if it isn't already selected from previous test
-    cy.get('input[type="checkbox"][value="monitoring"]').then(($checkbox) => {
-      if (!$checkbox.prop('checked')) {
-        cy.wrap($checkbox).check()
-      }
+  })
+
+  it('displays no connectivity errors', function () {
+    // Check for generic errors (this is the red circle that appears if any connectivity with Promtheus/Grafana/Istio is not working)
+    cy.get('svg[fill="var(--pf-global--danger-color--100)"]').should('not.exist');
+  })
+
+  // Skip remaining tests if check_data is not set
+  // These tests should only run in BB CI since nothing is istio injected in Package CI
+  if (!Cypress.env("check_data")) {
+    return
+  }
+
+  context('check_data is set', function () {
+
+    it('pops out the side menu', function () {
+      expandMenu();
+    })
+
+    it('loads the traffic graph page', function () {
+      cy.get('#traffic_graph_pf', { timeout: 60000 }).click();
+    })
+
+    it('closes the side menu', function () {
+      collapseMenu();
+    })
+
+    it('filters to the monitoring namespace', function () {
+      cy.get('button[id="namespace-selector"').click()
+      cy.get('input[type="checkbox"][value="monitoring"]').check()
+      cy.get('button[id="refresh_button"').click({ force: true })
+    })
+
+    it('opens the graph side panel', function () {
+      cy.get('div[id="graph-side-panel"]').should("be.visible")
+    })
+
+    it('pops out the side menu', function () {
+      expandMenu();
+    })
+
+    it('loads the applications page', function () {
+      cy.get('#applications', { timeout: 60000 }).click();
+    })
+
+    it('filters to the monitoring namespace if not already filtered', function () {
+      collapseMenu();
+      cy.get('button[id="namespace-selector"]').click()
+      cy.get('input[type="checkbox"][value="monitoring"]').then(($checkbox) => {
+        if (!$checkbox.prop('checked')) {
+          cy.wrap($checkbox).check()
+        }
+      })
+      cy.get('button[id="refresh_button"]').click({ force: true })
+    })
+
+    it('loads the prometheus application page', function () {
+      cy.get('a').filter((index, element) => {
+        return element.textContent.trim() === 'prometheus';
+      }).click();
+    })
+
+    it('loads the prometheus graph', function () {
+      cy.contains('.Empty Graph', { timeout: 60000 }).should('not.exist');
+      cy.contains('.Error loading Graph', { timeout: 60000 }).should('not.exist');
+    })
+
+    it('loads the outbound metrics tab', function () {
+      cy.get('#pf-tab-2-basic-tabs').click()
+    })
+
+    it('loads the tracing tab', function () {
+      cy.get('#pf-tab-3-basic-tabs').click()
+    })
+
+    it('does not show any errors fetching traces', function () {
+      cy.contains('Error fetching traces').should("not.exist")
     })
-    cy.get('button[id="refresh_button"]').click({force: true})
-    // This gets us to the prometheus application
-    cy.get('a').filter((index, element) => {
-      return element.textContent.trim() === 'prometheus';
-    }).click();
-    // Validate the graph is visible
-    cy.contains('.Empty Graph', { timeout: 60000 }).should('not.exist');
-    cy.contains('.Error loading Graph', { timeout: 60000 }).should('not.exist');
-    // Load the outbound metrics tab
-    // there's nothing easy to check on here since elements are dynamic but we can at least load the page for the video
-    cy.get('#pf-tab-2-basic-tabs').click()
-    // Load the tracing tab
-    cy.get('#pf-tab-3-basic-tabs').click()
-    // Validate that error is not displayed
-    // NOTE: we don't check for actual traces because there can be delays in them displaying on the webpage
-    cy.contains('Error fetching traces').should("not.exist")
   })
-}
+})

chart/values.yaml

@@ -151,10 +151,6 @@ cr:
   annotations: {}
 
   spec:
-    kiali_feature_flags:
-      ui_defaults:
-        graph:
-          impl: "cy"
     istio_labels:
       app_label_name: "app.kubernetes.io/name"
       version_label_name: "app.kubernetes.io/version"

tests/wait.sh

@@ -2,22 +2,20 @@
 wait_project() {
    echo
 
-   k="kubectl -n kiali"
-
-   if ! current_generation=$($k get deployment/kiali -o=jsonpath='{.status.observedGeneration}'); then
+   if ! current_generation=$(kubectl -n kiali get deployment/kiali -o=jsonpath='{.status.observedGeneration}'); then
       current_generation=0
    fi
    next_generation=$((current_generation + 1))
 
    # NOTE: Since this is a hard-coded string, it may need to be updated if the way Kiali reports its progress changes
    # If the upgrade CI job fails on future versions, this is likely the first place to check
-   $k wait --for=jsonpath='{.status.progress.message}'="6. Finished all resource creation" --all kiali --timeout=60s && echo "Kiali CR is ready"
+   kubectl -n kiali wait --for=jsonpath='{.status.progress.message}'="6. Finished all resource creation" --all kiali --timeout=60s && echo "Kiali CR is ready"
 
-   if ! $k wait --for=jsonpath='{.status.observedGeneration}'="$next_generation" deployment/kiali --timeout=180s 2>/dev/null; then
+   if ! kubectl -n kiali wait --for=jsonpath='{.status.observedGeneration}'="$next_generation" deployment/kiali --timeout=180s 2>/dev/null; then
       echo "No new Kiali deployment generation detected. Checking if existing pods are ready."
    else
       echo "New Kiali deployment generation detected. Waiting for new pods to be ready."
    fi
 
-   $k rollout status deployment/kiali --timeout=180s && echo "Kiali is ready"
+   kubectl -n kiali rollout status deployment/kiali --timeout=180s && echo "Kiali is ready"
 }