Deploy the troubleshooting plugin if it is not present.

anpingli · anpingli · commit 6a5b5e6f7cc8 · 2026-02-02T23:55:46.000+08:00
diff --git a/web/cypress.config.ts b/web/cypress.config.ts
@@ -1,4 +1,5 @@
 import { defineConfig } from 'cypress';
+import registerCypressGrep from '@cypress/grep/src/plugin';
 const fs = require('fs');
 const path = require('path');
 const report_dir = process.env.ARTIFACT_DIR || '/tmp';
diff --git a/web/cypress/cypress.config.js b/web/cypress/cypress.config.js
diff --git a/web/cypress/e2e/acceptance.cy.ts b/web/cypress/e2e/acceptance.cy.ts
@@ -1,4 +1,4 @@
-import * as dataTest from '../fixtures/data-test'
+import * as dt from '../fixtures/data-test'
 
 describe('TroubleShoot Panel detection', { tags: ['@admin'] }, () => {
   before( function() {
@@ -15,26 +15,25 @@ describe('TroubleShoot Panel detection', { tags: ['@admin'] }, () => {
 
   it('basic elements validation ',{tags:['@smoke']}, () => {
     cy.clickNavLink(['Home', 'Projects']);
-    cy.openTroubeshootPanel();
-    //troubelShoot Panel title div
-    //<div class="pf-v5-l-flex pf-m-gap-none tp-plugin__popover-title-bar">
-    cy.get('div.tp-plugin__popover-title-bar')
+    cy.openTroubleshootPanel();
+    //troubleShoot Panel title div
+    cy.get(dt.Classes.TroubleShootPanelTitleBar)
       .should('exist')
       .within(() => {
 	cy.contains('h1', 'Troubleshooting');
 	cy.get('h1').find('button').should('exist')
 	cy.get('button[aria-label="Close"]').should('exist');
-	cy.get('svg.tp-plugin__popover-close').should('exist');
+	cy.get(dt.Classes.TroubleShootPanelCloseButton).should('exist');
       })
 
     cy.contains('h1', 'Troubleshooting').find('button').first().click();
-    cy.contains('.pf-v5-c-popover__title-text', 'Quickly diagnose and resolve issues by exploring correlated observability signals for resources.').should('exist');
+    cy.contains(dt.Classes.TroubleShootPanelPopText, 'Quickly diagnose and resolve issues by exploring correlated observability signals for resources.').should('exist');
     cy.contains('h1', 'Troubleshooting').find('button').first().click();
 
     //troubelShoot Panel query-container
     //<div pf-v5-c-expandable-section pf-m-expanded.pf-m-detached pf-m-indented tp-plugin__panel-query-container>
     //troubelShoot Panel query-container -- control div
-    cy.get('div.tp-plugin__popover-content')
+    cy.get(dt.Classes.TroubleShootPanelControlBar)
       .should('exist')
       .within(() => {
         cy.contains('button','Focus');
@@ -44,17 +43,17 @@ describe('TroubleShoot Panel detection', { tags: ['@admin'] }, () => {
       })
     //Click the force button
     cy.log("before Focus")
-    cy.focusTroubeshootPanel();
+    cy.focusTroubleshootPanel();
     //Click the Advance Button
-    cy.clickTroubeshootPanelAdvance();
-    cy.get('div.tp-plugin__panel-query-container')
+    cy.clickTroubleshootPanelAdvance();
+    cy.get(dt.Classes.TroubleShootPanelQueryContainer)
       .find('form')
       .within(() => {
         cy.contains('label', 'Time');
         cy.contains('button', 'Recent');
         cy.contains('button', 'Range');
         cy.contains('h6','Since');
-        cy.get('div.pf-v5-c-number-input').should('exist');
+        cy.get(dt.Classes.TroubleShootPanelNumerInput).should('exist');
         cy.contains('h6','Ago');
         cy.contains('button', 'days');
         cy.contains('button', 'Distance');
@@ -64,16 +63,16 @@ describe('TroubleShoot Panel detection', { tags: ['@admin'] }, () => {
       });
     //troubelShoot Panel query-container -- topology-container
     //<div class="pf-m-grow tp-plugin__panel-topology-container"><div class="pf-v6-l-stack"><div class="pf-v6-l-stack__item pf-m-fill pf-topology-container"><div class="pf-topology-content">
-    cy.get('div.tp-plugin__panel-topology-container').should('exist');
+    cy.get(dt.Classes.TroubleShootPanelTopologyContainer).should('exist');
     cy.get('div[data-test-id="topology"]').should('exist');
     cy.get('g[data-id="korrel8r_graph"]')
       .within(() => {
-        cy.get('ellipse').should('exist');
-        cy.get('g[class="pf-topology__node__label__badge"]').should('exist');
-        cy.get('rect[class="pf-topology__node__action-icon__background"]').should('exist');
-        cy.get('g[data-test-id="edge-handler"]').should('exist');
+        cy.get('ellipse').should('exist'); // node element
+        cy.get(dt.Classes.TroubleShootPanelNodeLabel).should('exist'); // text panel
+        cy.get(dt.Classes.TroubleShootPanelNodeBackGround).should('exist'); //backgroup panel
+        cy.get('g[data-test-id="edge-handler"]').should('exist'); // connection line
       })
-    cy.get('span.pf-topology-control-bar')
+    cy.get(dt.Classes.TroubleShootPanelGraphControlBar)
       .within(() => {
         cy.get('button[id="zoom-in"]').should('exist');
         cy.get('button[id="zoom-out"]').should('exist');
diff --git a/web/cypress/fixtures/data-test.ts b/web/cypress/fixtures/data-test.ts
@@ -215,7 +215,19 @@ export const Classes = {
   SilenceState: '.pf-v6-l-stack__item, .co-break-word',
   LogDetail: 'pf-v5-c-table__td lv-plugin__table__details',
   LogToolbar: 'pf-v5-c-toolbar__content-section',
-  TroubleShootPanel: '.pf-v5-l-flex.pf-m-column.pf-m-gap-none.tp-plugin__popover',
+  TroubleShootPanel: '.pf-m-column.pf-m-gap-none.tp-plugin__popover',
+  AppLaunch: 'div.co-app-launcher',
+  TroubleShootPanelTitleContainer: 'div.tp-plugin__popover',
+  TroubleShootPanelQueryContainer: 'div.tp-plugin__panel-query-container',
+  TroubleShootPanelTopologyContainer: 'div.tp-plugin__panel-topology-container',
+  TroubleShootPanelTitleBar: 'div.tp-plugin__popover-title-bar',
+  TroubleShootPanelControlBar: 'div.tp-plugin__popover-content',
+  TroubleShootPanelPopText: 'pf-v5-c-popover__title-text',
+  TroubleShootPanelCloseButton: 'svg.tp-plugin__popover-close',
+  TroubleShootPanelNumerInput: 'div.pf-v5-c-number-input',
+  TroubleShootPanelNodeLabel: 'g.pf-topology__node__label__badge',
+  TroubleShootPanelNodeBackGroud: 'rect.pf-topology__node__action-icon__background',
+  TroubleShootPanelGraphControlBar: 'span.pf-topology-control-bar',
 };
 
 export const persesAriaLabels = {
diff --git a/web/cypress/support/commands/troubeshoot-commands.ts b/web/cypress/support/commands/troubeshoot-commands.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-namespace */
 /// <reference types="cypress" />
 import { guidedTour } from '../../views/tour';
-import * as dataTest from '../../fixtures/data-test';
+import * as dt from '../../fixtures/data-test';
 import * as helperfuncs from '../views/utils';
 
 declare global {
@@ -11,12 +11,16 @@ declare global {
       value?: string; 
     }
     interface Chainable<Subject> {
-      openTroubeshootPanel();
+      openTroubleshootPanel();
+      closeTroubleshootPanel();
+      focusTroubleshootPanel();
+      refreshTroubleshootPanel();
+      getTroubleshootPanelQueryText();
     }
   }
 }
 
-function retryOpenTroubeshootPanel(count = 5) {
+function retryOpenTroubleshootPanel(count = 5) {
   if (count === 0) {
     throw new Error('Popup did not appear after clicking the trigger')
   }
@@ -28,55 +32,52 @@ function retryOpenTroubeshootPanel(count = 5) {
       return
     } else {
       // Step 1: click trigger button
-      cy.byLegacyTestID(dataTest.LegacyTestIDs.AppicationLauncher).click()
-      cy.get('div.co-app-launcher').should('be.visible')
+      cy.byLegacyTestID(dt.LegacyTestIDs.AppicationLauncher).click()
+      cy.get(dt.Classes.AppLaunch).should('be.visible')
       cy.byButtonText('Signal Correlation').click()
       cy.wait(6000) // wait for 6 seconds
       // retry after small delay
-      retryOpenTroubeshootPanel(count - 1)
+      retryOpenTroubleshootPanel(count - 1)
     }
   })
 }
 
-Cypress.Commands.add('openTroubeshootPanel', () => {
+Cypress.Commands.add('openTroubleshootPanel', () => {
   cy.window().its('document.readyState').should('eq', 'complete');
   // Retry until popup div appears.
-  retryOpenTroubeshootPanel(5)
-  cy.get('div.tp-plugin__panel-topology-container').should('be.visible');
+  retryOpenTroubleshootPanel(5)
+  cy.get(dt.Classes.TroubleShootPanelTopologyContainer).should('be.visible');
 })
 
-Cypress.Commands.add('closeTroubeshootPanel', () => {
-  cy.get('div.tp-plugin__popover')
-    .find('svg.tp-plugin__popover-close')
-    .click({force: true});
+Cypress.Commands.add('closeTroubleshootPanel', () => {
+  cy.get(dt.Classes.TroubleShootPanelCloseButton).click({force: true});
 })
 
-Cypress.Commands.add('focusTroubeshootPanel', () => {
-  //cy.get('div. tp-plugin__panel-query-container').contains('button', 'Forcs').click();
-  cy.get('div.tp-plugin__panel-query-container')
+Cypress.Commands.add('focusTroubleshootPanel', () => {
+  cy.get(dt.Classes.TroubleShootPanelQueryContainer)
     .contains('button', 'Focus')
     .click({force: true});
   cy.get('body').trigger('mouseover');
   cy.get('body').click(0, 0);
-  cy.get('div.tp-plugin__panel-topology-container').should('exist');
+  cy.get(dt.Classes.TroubleShootPanelTopologyContainer).should('exist');
 })
 
-Cypress.Commands.add('refreshTroubeshootPanel', () => {
+Cypress.Commands.add('refreshTroubleshootPanel', () => {
   //There’s no alternative way to locate this button
-  cy.get('div.tp-plugin__panel-query-container')
+  cy.get(dt.Classes.TroubleShootPanelQueryContainer)
     .find('button')
     .eq(2)
     .click({focus: true});
-  cy.get('div.tp-plugin__panel-topology-container').should('be.visible')
+  cy.get(dt.Classes.TroubleShootPanelTopologyContainer).should('be.visible')
 })
 
-Cypress.Commands.add('clickTroubeshootPanelAdvance', () => {
-  cy.get('div.tp-plugin__panel-query-container')
+Cypress.Commands.add('clickTroubleshootPanelAdvance', () => {
+  cy.get(dt.Classes.TroubleShootPanelQueryContainer)
     .contains('button', 'Advanced')
     .click({focus: true});
 })
 
-Cypress.Commands.add('getTroubeshootPanelQueryText', () => {
+Cypress.Commands.add('getTroubleshootPanelQueryText', () => {
   //Note: The advance tab need to be expaned before run this commands.
-  return cy.get('div.tp-plugin__panel-query-container').find('textarea#query-input').invoke('val')
+  return cy.get(dt.Classes.TroubleShootPanelQueryContainer).find('textarea#query-input').invoke('val')
 })
diff --git a/web/cypress/support/commands/utility-commands.ts b/web/cypress/support/commands/utility-commands.ts
@@ -116,6 +116,8 @@ Cypress.Commands.add('waitUntilWithCustomTimeout', (
 
   Cypress.Commands.add('podImage', (pod: string, namespace: string) => {
     cy.log('Get pod image');
+    cy.switchPerspective('Core platform', 'Administrator');
+    cy.wait(5000);
     cy.clickNavLink(['Workloads', 'Pods']);
     cy.changeNamespace(namespace);
     cy.byTestID('page-heading').contains('Pods').should('be.visible');
diff --git a/web/scripts/run-e2e.sh b/web/scripts/run-e2e.sh
@@ -107,19 +107,34 @@ function enable_idp_htpasswd()
     echo "Enable IDP uiauto-htpasswd-idp succesfully"
 }
 
+function enable_troubleshoot_plugin()
+{
+   if oc get pod -l app.kubernetes.io/name=observability-operator --field-selector=status.phase=Running -A -o name | grep -q .; then
+      echo "#deploy troubleshooting-panel"
+      cat <<EOF|oc apply -f -
+apiVersion: observability.openshift.io/v1alpha1
+kind: UIPlugin
+metadata:
+  name: troubleshooting-panel
+spec:
+  troubleshootingPanel:
+    timeout: 10m
+  type: TroubleshootingPanel
+EOF
+   else
+      echo "observability-operator is not installed or not in running status"
+      exit 1
+   fi	
+}
+
 ########Main###################
 if [[ $KUBECONFIG == "" ]]; then
    echo "Exit, you must expose the Environment KUBECONFIG"
    exit 1
 fi
 
-export CYPRESS_BASE_URL="https://$(oc get route console -n openshift-console  -o jsonpath={.spec.host})"
-export CYPRESS_OPENSHIFT_VERSION=$(oc version -o json  |jq -r '.openshiftVersion'|cut -f 1,2 -d.)
+enable_troubleshoot_plugin
 
-data_mode=$(oc get uiplugin logging -o jsonpath='{.spec.logging.schema}')
-if [[ "$data_mode" == "" ]];then
-    data_mode="viaq"
-fi
 if [[ "$CYPRESS_LOGIN_IDP" == "" || "$CYPRESS_LOGIN_USERS" == "" ]];then
    enable_idp_htpasswd
    export CYPRESS_LOGIN_IDP=uiauto-htpasswd-idp
@@ -130,11 +145,14 @@ if [[ $CYPRESS_LOGIN_USERS == "" ]];then
    exit 1
 fi
 
-echo "export KUBECONFIG=${KUBECONFIG}"
-echo "export CYPRESS_BASE_URL=$CYPRESS_BASE_URL"
-echo "export CYPRESS_LOGIN_IDP=$CYPRESS_LOGIN_IDP"
-echo "export CYPRESS_LOGIN_USERS=$CYPRESS_LOGIN_USERS"
-echo "export CYPRESS_OPENSHIFT_VERSION=$CYPRESS_OPENSHIFT_VERSION"
+export CYPRESS_BASE_URL="https://$(oc get route console -n openshift-console  -o jsonpath={.spec.host})"
+export CYPRESS_OPENSHIFT_VERSION=$(oc version -o json  |jq -r '.openshiftVersion'|cut -f 1,2 -d.)
+
+echo "KUBECONFIG=${KUBECONFIG}"
+echo "CYPRESS_BASE_URL=$CYPRESS_BASE_URL"
+echo "CYPRESS_LOGIN_IDP=$CYPRESS_LOGIN_IDP"
+echo "CYPRESS_LOGIN_USERS=<mask>"
+echo "CYPRESS_OPENSHIFT_VERSION=$CYPRESS_OPENSHIFT_VERSION"
 
 echo "## Execute Cypress cases"
 script_dir="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import { defineConfig } from 'cypress';`
	`2`	`+import registerCypressGrep from '@cypress/grep/src/plugin';`
`2`	`3`	`const fs = require('fs');`
`3`	`4`	`const path = require('path');`
`4`	`5`	`const report_dir = process.env.ARTIFACT_DIR \|\| '/tmp';`