[Graphing Job] Enable the monitoring (#280)

* enable crc monitoring

Author: mgirgisf

.zuul.yaml

@@ -96,6 +96,7 @@
     description: |
       Run the UI Graphing test and tempest smoketests on osp18.
     vars:
+      crc_enable_monitoring: true
       cifmw_extras:
         - "@{{ ansible_user_dir }}/{{ zuul.projects['github.com/openstack-k8s-operators/ci-framework'].src_dir  }}/scenarios/centos-9/multinode-ci.yml"
         - "@{{ ansible_user_dir }}/{{ zuul.projects['github.com/openstack-k8s-operators/telemetry-operator'].src_dir }}/ci/vars-autoscaling.yml"

ci/run_graphing_test.yml

@@ -5,11 +5,14 @@
   environment:
     KUBECONFIG: "{{ cifmw_openshift_kubeconfig }}"
     PATH: "{{ cifmw_path }}"
+  vars:
+    USERNAME: "{{ cifmw_openshift_user }}"
+    PASSWORD: "{{ cifmw_openshift_password }}"
   vars_files:
     - vars/common.yml
   tasks:
     - block:
         - name: "Run Graphing Console UI tests"
           ansible.builtin.import_role:
             name: telemetry_graphing
-          ignore_errors: true
+          ignore_errors: true

roles/telemetry_graphing/files/cypress.config.js

@@ -4,5 +4,11 @@ module.exports = defineConfig({
     baseUrl: 'https://console-openshift-console.apps-crc.testing/login',
     specPattern: 'cypress/integration/**/*.{js,jsx,ts,tsx}',
     supportFile: false,
+    chromeWebSecurity: false,
+    defaultCommandTimeout: 10000,
+    pageLoadTimeout: 30000,
+    viewportWidth: 1280,
+    viewportHeight: 720,
+    video: true,
   },
 })

roles/telemetry_graphing/files/dashboard-openstack-cloud.js

@@ -0,0 +1,47 @@
+describe('OpenShift Console Dashboard Test', () => {
+  const username = "{{ USERNAME }}";
+  const password = "{{ PASSWORD }}";
+
+  beforeEach(() => {
+    cy.session('login', () => {
+      cy.visit('https://console-openshift-console.apps-crc.testing/login');
+      cy.origin(
+        'https://oauth-openshift.apps-crc.testing',
+        { args: { username, password } },
+        ({ username, password }) => {
+          cy.get('input[id="inputUsername"]').invoke('val', username).trigger('input');
+          cy.get('input[id="inputPassword"]').invoke('val', password).trigger('input');
+          cy.get('button[type="submit"]').click();
+        }
+      );
+      cy.url().should('include', 'console-openshift-console');
+
+      cy.wait(5000);
+      // Ensure redirected back to the main console
+
+      cy.get('body').then($body => {
+        if ($body.find('button:contains("Skip tour")').length > 0) {
+          cy.contains('button', 'Skip tour').click(); // Only click if the button is found
+        }
+      });
+    });
+  });
+
+  it('should load and validate the OpenStack dashboards', () => {
+    
+    const dashboards = [
+      { url: '/grafana-dashboard-openstack-cloud', screenshot: 'openstack-cluster' },
+      { url: '/grafana-dashboard-openstack-rabbitmq', screenshot: 'openstack-rabbitmq' },
+      { url: '/grafana-dashboard-openstack-node', screenshot: 'openstack-node' },
+      { url: '/grafana-dashboard-openstack-vm', screenshot: 'openstack-vms' },
+      { url: '/grafana-dashboard-openstack-network-traffic', screenshot: 'openstack-network-traffic'}
+    ];
+
+    dashboards.forEach(({ url, screenshot }) => {
+      cy.visit(`https://console-openshift-console.apps-crc.testing/monitoring/dashboards${url}`);
+      cy.get('div[data-test-id="dashboard"]', { timeout: 20000 }).find('[data-test-id^="panel-"]')
+      cy.wait(1000);
+      cy.screenshot(screenshot);
+    });
+  });
+});

roles/telemetry_graphing/files/dashboard-openstack-cloud.js.j2

@@ -37,10 +37,10 @@
         mode: '0644' 
 
     - name: Add dashboard-openstack-cloud test
-      ansible.builtin.copy:
-        src: "{{ role_path }}/files/dashboard-openstack-cloud.js"  
+      ansible.builtin.template:
+        src: "{{ role_path }}/files/dashboard-openstack-cloud.js.j2"
         dest: "{{ cypress_integration_dir }}/dashboard-openstack-cloud.js"
-        mode: '0644' 
+        mode: '0755'
 
     - name: Create screenshot logs dir
       ansible.builtin.file:
@@ -78,6 +78,12 @@
     dest: "{{ screenshots_dir }}"
     mode: '0644'
 
+- name: Collect the videos
+  ansible.builtin.copy:
+    src: "{{ cypress_tests_dir }}/cypress/videos/"
+    dest: "{{ screenshots_dir }}"
+    mode: '0644'
+
 - name: Show Cypress test output
   ansible.builtin.debug:
     var: cypress_run.stdout_lines