Replace old Mesh page with New Mesh page

config/config.go

@@ -487,7 +487,6 @@ type ListUIDefaults struct {
 type MeshUIDefaults struct {
 	FindOptions []GraphFindOption `yaml:"find_options,omitempty" json:"findOptions,omitempty"`
 	HideOptions []GraphFindOption `yaml:"hide_options,omitempty" json:"hideOptions,omitempty"`
-	Impl        string            `yaml:"impl,omitempty" json:"impl,omitempty"` // classic | topo | topo-as-overview
 }
 
 // Aggregation represents label's allowed aggregations, transformed from aggregation in MonitoringDashboard config resource
@@ -845,7 +844,6 @@ func NewConfig() (c *Config) {
 							Expression:  "healthy",
 						},
 					},
-					Impl: "classic",
 				},
 				MetricsInbound:    MetricsDefaults{},
 				MetricsOutbound:   MetricsDefaults{},

frontend/cypress/integration/common/mesh_test.ts

@@ -0,0 +1,158 @@
+import { Before, Then, When } from '@badeball/cypress-cucumber-preprocessor';
+import { Controller, Edge, Node, Visualization, isEdge, isNode } from '@patternfly/react-topology';
+import { MeshInfraType, MeshNodeData } from '../../../src/types/Mesh';
+
+Before(() => {
+  // Copied from overview.ts.  This prevents cypress from stopping on errors unrelated to the tests.
+  // There can be random failures due timeouts/loadtime/framework that throw browser errors.  This
+  // prevents a CI failure due something like a "slow".  There may be a better way to handle this.
+  cy.on('uncaught:exception', (err, runnable, promise) => {
+    // when the exception originated from an unhandled promise
+    // rejection, the promise is provided as a third argument
+    // you can turn off failing the test in this case
+    if (promise) {
+      return false;
+    }
+    // we still want to ensure there are no other unexpected
+    // errors, so we let them fail the test
+  });
+});
+
+When('user closes mesh tour', () => {
+  cy.get('div[role="dialog"]').find('button[aria-label="Close"]').click();
+});
+
+When('user opens mesh tour', () => {
+  cy.get('button#mesh-tour').click();
+});
+
+When('user selects cluster mesh node', () => {
+  cy.waitForReact();
+  cy.getReact('MeshPageComponent', { state: { meshData: { isLoading: false } } })
+    .should('have.length', 1)
+    .getCurrentState()
+    .then(state => {
+      const controller = state.meshRefs.controller as Visualization;
+      assert.isTrue(controller.hasGraph());
+      const { nodes } = elems(controller);
+      const node = nodes.find(n => (n.getData() as MeshNodeData).infraType === MeshInfraType.CLUSTER);
+      assert.exists(node);
+      const setSelectedIds = state.meshRefs.setSelectedIds as (values: string[]) => void;
+      setSelectedIds([node.getId()]);
+    });
+});
+
+When('user selects mesh node with label {string}', (label: string) => {
+  cy.waitForReact();
+  cy.getReact('MeshPageComponent', { state: { meshData: { isLoading: false } } })
+    .should('have.length', 1)
+    .getCurrentState()
+    .then(state => {
+      const controller = state.meshRefs.controller as Visualization;
+      assert.isTrue(controller.hasGraph());
+      const { nodes } = elems(controller);
+      const node = nodes.find(n => n.getLabel() === label);
+      assert.exists(node);
+      const setSelectedIds = state.meshRefs.setSelectedIds as (values: string[]) => void;
+      setSelectedIds([node.getId()]);
+    });
+});
+
+Then('user sees cluster side panel', () => {
+  cy.get('#loading_kiali_spinner').should('not.exist');
+  cy.get('#target-panel-cluster').should('be.visible');
+});
+
+Then('user sees control plane side panel', () => {
+  cy.get('#loading_kiali_spinner').should('not.exist');
+  cy.get('#target-panel-control-plane')
+    .should('be.visible')
+    .within(div => {
+      cy.contains('istiod');
+      cy.contains('Control plane').should('be.visible');
+      cy.contains('Outbound policy').should('be.visible');
+      cy.get('div[data-test="memory-chart"]').should('exist');
+      cy.get('div[data-test="cpu-chart"]').should('exist');
+      cy.get('[data-test="label-TLS"]').contains('N/A');
+      cy.get('[data-test="lockerCA"]').should('exist');
+    });
+  cy.get('[data-test="lockerCA"]').trigger('mouseenter').get('[role="tooltip"]').contains('Valid From');
+});
+
+Then('user sees data plane side panel', () => {
+  cy.get('#loading_kiali_spinner').should('not.exist');
+  cy.get('#target-panel-data-plane')
+    .should('be.visible')
+    .within(div => {
+      cy.contains('Data Plane');
+    });
+});
+
+Then('user sees expected mesh infra', () => {
+  cy.waitForReact();
+  cy.getReact('MeshPageComponent', { state: { meshData: { isLoading: false } } })
+    .should('have.length', 1)
+    .getCurrentState()
+    .then(state => {
+      const controller = state.meshRefs.controller;
+      assert.isTrue(controller.hasGraph());
+      const { nodes, edges } = elems(controller);
+      assert.equal(nodes.length, 8, 'Unexpected number of infra nodes');
+      assert.equal(edges.length, 5, 'Unexpected number of infra edges');
+      const nodeNames = nodes.map(n => n.getLabel());
+      assert.isTrue(nodeNames.some(n => n === 'Data Plane'));
+      assert.isTrue(nodeNames.some(n => n === 'Grafana'));
+      assert.isTrue(nodeNames.some(n => n.startsWith('istiod')));
+      assert.isTrue(nodeNames.some(n => n === 'jaeger' || n === 'Tempo'));
+      assert.isTrue(nodeNames.some(n => n === 'kiali'));
+      assert.isTrue(nodeNames.some(n => n === 'Prometheus'));
+    });
+});
+
+Then('user sees mesh side panel', () => {
+  cy.get('#loading_kiali_spinner').should('not.exist');
+  cy.get('#target-panel-mesh')
+    .should('be.visible')
+    .within(div => {
+      cy.contains('Mesh Name: Istio Mesh');
+    });
+});
+
+Then('user {string} mesh tour', (action: string) => {
+  if (action === 'sees') {
+    cy.get('div[role="dialog"]').find('span').contains('Shortcuts').should('exist');
+  } else {
+    cy.get('div[role="dialog"]').should('not.exist');
+  }
+});
+
+Then('user sees {string} namespace side panel', (name: string) => {
+  cy.get('#loading_kiali_spinner').should('not.exist');
+  cy.get('#target-panel-namespace')
+    .should('be.visible')
+    .within(div => {
+      cy.contains(name);
+    });
+});
+
+Then('user sees {string} node side panel', (name: string) => {
+  cy.get('#loading_kiali_spinner').should('not.exist');
+  cy.get('#target-panel-node')
+    .should('be.visible')
+    .within(div => {
+      cy.contains(name);
+    });
+});
+
+//
+// Since I can't import from MeshElems.tsx, copying some helpers here...
+//
+
+const elems = (c: Controller): { edges: Edge[]; nodes: Node[] } => {
+  const elems = c.getElements();
+
+  return {
+    nodes: elems.filter(e => isNode(e)) as Node[],
+    edges: elems.filter(e => isEdge(e)) as Edge[]
+  };
+};

frontend/cypress/integration/common/overview.ts

@@ -160,14 +160,6 @@ Then(
   }
 );
 
-Then('user sees the memory chart', () => {
-  cy.get('div[data-test="memory-chart"]').should('exist');
-});
-
-Then('user sees the cpu chart', () => {
-  cy.get('div[data-test="cpu-chart"]').should('exist');
-});
-
 Then('there should be a {string} application indicator in the namespace', function (healthStatus: string) {
   cy.get(`[data-test=${this.targetNamespace}-EXPAND] [data-test=overview-app-health]`)
     .find('span')
@@ -246,24 +238,6 @@ Then('the toggle on the right side of the {string} namespace card exists', (ns:
   cy.get(`div[data-test^="${ns}"]`).should('exist');
 });
 
-Then('the user sees the certificates information', () => {
-  cy.get('[data-test="lockerCA"]').trigger('mouseenter').get('[role="tooltip"]').contains('Valid From');
-});
-
-// We will suppose that the min TLS Version was not set
-// So we verify the default
-Then('the minimum TLS version', () => {
-  cy.get('[data-test="label-TLS"]').contains('N/A');
-});
-
-Then('the user sees no information related to canary upgrades', () => {
-  cy.get('[data-test="canary-upgrade"]').should('not.exist');
-});
-
-Then('the user sees information related to canary upgrades', () => {
-  cy.get('[data-test="canary-upgrade"]').should('exist');
-});
-
 Then('user sees the {string} cluster badge in the Kiali header', (name: string) => {
   cy.get('[data-test="cluster-icon"]').contains(name).should('be.visible');
 });

frontend/cypress/integration/common/sidecar_injection.ts

@@ -1,5 +1,6 @@
 import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor';
 import { ensureKialiFinishedLoading } from './transition';
+import { MeshCluster } from '../../../src/types/Mesh';
 
 // Most of these "Given" implementations are directly using the Kiali API
 // in order to reach a well known state in the environment before performing
@@ -247,11 +248,13 @@ When('I override the default automatic sidecar injection policy in the namespace
   cy.request('GET', '/api/status').then(response => {
     expect(response.status).to.equal(200);
 
-    cy.request('/api/clusters').then(response => {
+    cy.request('/api/config').then(response => {
       cy.wrap(response.isOkStatusCode).should('be.true');
-      cy.wrap(response.body).should('have.length', 1);
 
-      const cluster = response.body[0].name;
+      const clusters: { [key: string]: MeshCluster } = response.body.clusters;
+      const clusterNames = Object.keys(clusters);
+      cy.wrap(clusterNames).should('have.length', 1);
+      const cluster = clusterNames[0];
 
       cy.getBySel('overview-type-LIST').should('be.visible').click();
 
@@ -273,11 +276,13 @@ When(
     cy.request('GET', '/api/status').then(response => {
       expect(response.status).to.equal(200);
 
-      cy.request('/api/clusters').then(response => {
+      cy.request('/api/config').then(response => {
         cy.wrap(response.isOkStatusCode).should('be.true');
-        cy.wrap(response.body).should('have.length', 1);
 
-        const cluster = response.body[0].name;
+        const clusters: { [key: string]: MeshCluster } = response.body.clusters;
+        const clusterNames = Object.keys(clusters);
+        cy.wrap(clusterNames).should('have.length', 1);
+        const cluster = clusterNames[0];
 
         cy.getBySel('overview-type-LIST').should('be.visible').click();
 
@@ -300,11 +305,13 @@ When('I remove override configuration for sidecar injection in the namespace', f
   cy.request('GET', '/api/status').then(response => {
     expect(response.status).to.equal(200);
 
-    cy.request('/api/clusters').then(response => {
+    cy.request('/api/config').then(response => {
       cy.wrap(response.isOkStatusCode).should('be.true');
-      cy.wrap(response.body).should('have.length', 1);
 
-      const cluster = response.body[0].name;
+      const clusters: { [key: string]: MeshCluster } = response.body.clusters;
+      const clusterNames = Object.keys(clusters);
+      cy.wrap(clusterNames).should('have.length', 1);
+      const cluster = clusterNames[0];
 
       cy.getBySel('overview-type-LIST').should('be.visible').click();
 
@@ -351,11 +358,13 @@ Then('I should see the override annotation for sidecar injection in the namespac
 
     const expectation = 'exist';
 
-    cy.request('/api/clusters').then(response => {
+    cy.request('/api/config').then(response => {
       cy.wrap(response.isOkStatusCode).should('be.true');
-      cy.wrap(response.body).should('have.length', 1);
 
-      const cluster = response.body[0].name;
+      const clusters: { [key: string]: MeshCluster } = response.body.clusters;
+      const clusterNames = Object.keys(clusters);
+      cy.wrap(clusterNames).should('have.length', 1);
+      const cluster = clusterNames[0];
 
       cy.getBySel(`VirtualItem_Cluster${cluster}_${this.targetNamespace}`)
         .contains(`istio-injection=${enabled}`)
@@ -368,11 +377,13 @@ Then('I should see no override annotation for sidecar injection in the namespace
   cy.request('GET', '/api/status').then(response => {
     expect(response.status).to.equal(200);
 
-    cy.request('/api/clusters').then(response => {
+    cy.request('/api/config').then(response => {
       cy.wrap(response.isOkStatusCode).should('be.true');
-      cy.wrap(response.body).should('have.length', 1);
 
-      const cluster = response.body[0].name;
+      const clusters: { [key: string]: MeshCluster } = response.body.clusters;
+      const clusterNames = Object.keys(clusters);
+      cy.wrap(clusterNames).should('have.length', 1);
+      const cluster = clusterNames[0];
 
       cy.getBySel(`VirtualItem_Cluster${cluster}_${this.targetNamespace}`)
         .contains(`istio-injection`)

frontend/cypress/integration/common/table.ts

@@ -1,5 +1,6 @@
 import { Then, When } from '@badeball/cypress-cucumber-preprocessor';
 import { TableDefinition } from 'cypress-cucumber-preprocessor';
+import { MeshCluster } from '../../../src/types/Mesh';
 
 enum SortOrder {
   Ascending = 'ascending',
@@ -210,15 +211,17 @@ export const checkHealthIndicatorInTable = (
     : `${targetNamespace}_${targetRowItemName}`;
 
   // cy.getBySel(`VirtualItem_Ns${selector}]`).find('span').filter(`.icon-${healthStatus}`).should('exist');
-  // Fetch the cluster info from /api/clusters
+  // Fetch the cluster info from /api/config
   // TODO: Move this somewhere else since other tests will most likely need this info as well.
   // VirtualItem_Clustercluster-default_Nsbookinfo_details
   // VirtualItem_Clustercluster-default_Nsbookinfo_productpage
-  cy.request('/api/clusters').then(response => {
+  cy.request('/api/config').then(response => {
     cy.wrap(response.isOkStatusCode).should('be.true');
-    cy.wrap(response.body).should('have.length', 1);
 
-    const cluster = response.body[0].name;
+    const clusters: { [key: string]: MeshCluster } = response.body.clusters;
+    const clusterNames = Object.keys(clusters);
+    cy.wrap(clusterNames).should('have.length', 1);
+    const cluster = clusterNames[0];
 
     cy.getBySel(`VirtualItem_Cluster${cluster}_Ns${selector}`)
       .find('span')
@@ -237,11 +240,13 @@ export const checkHealthStatusInTable = (
     ? `${targetNamespace}_${targetType}_${targetRowItemName}`
     : `${targetNamespace}_${targetRowItemName}`;
 
-  cy.request('/api/clusters').then(response => {
+  cy.request('/api/config').then(response => {
     cy.wrap(response.isOkStatusCode).should('be.true');
-    cy.wrap(response.body).should('have.length', 1);
 
-    const cluster = response.body[0].name;
+    const clusters: { [key: string]: MeshCluster } = response.body.clusters;
+    const clusterNames = Object.keys(clusters);
+    cy.wrap(clusterNames).should('have.length', 1);
+    const cluster = clusterNames[0];
 
     cy.get(
       `[data-test=VirtualItem_Cluster${cluster}_Ns${selector}] td:first-child span[class=pf-v5-c-icon__content]`