mgr/dashboard: introduce grafana frontend e2e testing

src/pybind/mgr/dashboard/ci/cephadm/bootstrap-cluster.sh

@@ -11,10 +11,13 @@ mkdir -p /etc/ceph
 mon_ip=$(ifconfig eth0  | grep 'inet ' | awk '{ print $2}')
 
 bootstrap_extra_options='--allow-fqdn-hostname --dashboard-password-noupdate'
-bootstrap_extra_options_not_expanded='--skip-monitoring-stack'
-{% if expanded_cluster is not defined %}
-  bootstrap_extra_options+=" ${bootstrap_extra_options_not_expanded}"
-{% endif %}
+
+# commenting the below lines. Uncomment it when any extra options are
+# needed for the bootstrap.
+# bootstrap_extra_options_not_expanded=''
+# {% if expanded_cluster is not defined %}
+#   bootstrap_extra_options+=" ${bootstrap_extra_options_not_expanded}"
+# {% endif %}
 
 cephadm bootstrap --mon-ip $mon_ip --initial-dashboard-password {{ admin_password }} --shared_ceph_folder /mnt/{{ ceph_dev_folder }} ${bootstrap_extra_options}
 

src/pybind/mgr/dashboard/ci/cephadm/run-cephadm-e2e-tests.sh

@@ -24,7 +24,7 @@ export CYPRESS_BASE_URL CYPRESS_LOGIN_USER CYPRESS_LOGIN_PWD
 cypress_run () {
     local specs="$1"
     local timeout="$2"
-    local override_config="ignoreTestFiles=*.po.ts,retries=0,testFiles=${specs}"
+    local override_config="ignoreTestFiles=*.po.ts,retries=0,testFiles=${specs},chromeWebSecurity=false"
     if [[ -n "$timeout" ]]; then
         override_config="${override_config},defaultCommandTimeout=${timeout}"
     fi
@@ -38,5 +38,13 @@ cypress_run () {
 
 cd ${CEPH_DEV_FOLDER}/src/pybind/mgr/dashboard/frontend
 
-cypress_run "orchestrator/workflow/*.feature"
-cypress_run "orchestrator/workflow/*-spec.ts"
+# check if the prometheus daemon is running
+# before starting the e2e tests
+
+PROMETHEUS_RUNNING_COUNT=$(kcli ssh -u root ceph-node-00 'cephadm shell "ceph orch ls --service_name=prometheus --format=json"' | jq -r '.[] | .status.running')
+while [[ $PROMETHEUS_RUNNING_COUNT -lt 1 ]]; do
+    PROMETHEUS_RUNNING_COUNT=$(kcli ssh -u root ceph-node-00 'cephadm shell "ceph orch ls --service_name=prometheus --format=json"' | jq -r '.[] | .status.running')
+done
+
+cypress_run ["orchestrator/workflow/*.feature, orchestrator/workflow/*-spec.ts"]
+cypress_run "orchestrator/grafana/*.feature"

src/pybind/mgr/dashboard/controllers/prometheus.py

@@ -51,7 +51,12 @@ def _proxy(self, base_url, method, path, api_name, params=None, payload=None, ve
                 "Could not reach {}'s API on {}".format(api_name, base_url),
                 http_status_code=404,
                 component='prometheus')
-        content = json.loads(response.content)
+        try:
+            content = json.loads(response.content, strict=False)
+        except json.JSONDecodeError as e:
+            raise DashboardException(
+                "Error parsing Prometheus Alertmanager response: {}".format(e.msg),
+                component='prometheus')
         if content['status'] == 'success':
             if 'data' in content:
                 return content['data']

src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/mgr-modules.po.ts

@@ -33,21 +33,25 @@ export class ManagerModulesPageHelper extends PageHelper {
 
     // Clears the editable fields
     for (const input of inputs) {
-      const id = `#${input.id}`;
-      cy.get(id).clear();
       if (input.oldValue) {
-        cy.get(id).type(input.oldValue);
+        const id = `#${input.id}`;
+        cy.get(id).clear();
+        if (input.oldValue) {
+          cy.get(id).type(input.oldValue);
+        }
       }
     }
 
     // Checks that clearing represents in details tab of module
     cy.contains('button', 'Update').click();
     this.getExpandCollapseElement(name).should('be.visible').click();
     for (const input of inputs) {
-      cy.get('.datatable-body')
-        .eq(1)
-        .should('contain', input.id)
-        .and('not.contain', input.newValue);
+      if (input.oldValue) {
+        cy.get('.datatable-body')
+          .eq(1)
+          .should('contain', input.id)
+          .and('not.contain', input.newValue);
+      }
     }
   }
 }

src/pybind/mgr/dashboard/frontend/cypress/integration/common/01-global.feature.po.ts

@@ -155,3 +155,34 @@ And('I should see row {string} does not have {string}', (row: string, options: s
     }
   }
 });
+
+And('I go to the {string} tab', (names: string) => {
+  for (const name of names.split(', ')) {
+    cy.contains('.nav.nav-tabs li', name).click();
+  }
+});
+
+And('select {string} {string}', (selectionName: string, option: string) => {
+  cy.get(`select[name=${selectionName}]`).select(option);
+  cy.get(`select[name=${selectionName}] option:checked`).contains(option);
+});
+
+When('I expand the row {string}', (row: string) => {
+  cy.contains('.datatable-body-row', row).first().find('.tc_expand-collapse').click();
+});
+
+And('I should see row {string} have {string} on this tab', (row: string, options: string) => {
+  if (options) {
+    cy.get('cd-table').should('exist');
+    cy.get('datatable-scroller, .empty-row');
+    cy.get('.datatable-row-detail').within(() => {
+      cy.get('cd-table .search input').first().clear().type(row);
+      for (const option of options.split(',')) {
+        cy.contains(
+          `datatable-body-row datatable-body-cell .datatable-body-cell-label span`,
+          option
+        ).should('exist');
+      }
+    });
+  }
+});

src/pybind/mgr/dashboard/frontend/cypress/integration/common/grafana.feature.po.ts

@@ -0,0 +1,86 @@
+import { e2e } from '@grafana/e2e';
+import { Then, When } from 'cypress-cucumber-preprocessor/steps';
+import 'cypress-iframe';
+
+function getIframe() {
+  cy.frameLoaded('#iframe');
+  return cy.iframe();
+}
+
+Then('I should see the grafana panel {string}', (panels: string) => {
+  getIframe().within(() => {
+    for (const panel of panels.split(', ')) {
+      cy.get('.grafana-app')
+        .wait(100)
+        .within(() => {
+          e2e.components.Panels.Panel.title(panel).should('be.visible');
+        });
+    }
+  });
+});
+
+When('I view the grafana panel {string}', (panels: string) => {
+  getIframe().within(() => {
+    for (const panel of panels.split(', ')) {
+      cy.get('.grafana-app')
+        .wait(100)
+        .within(() => {
+          e2e.components.Panels.Panel.title(panel).should('be.visible').click();
+          e2e.components.Panels.Panel.headerItems('View').should('be.visible').click();
+        });
+    }
+  });
+});
+
+Then('I should not see {string} in the panel {string}', (value: string, panels: string) => {
+  getIframe().within(() => {
+    for (const panel of panels.split(', ')) {
+      cy.get('.grafana-app')
+        .wait(100)
+        .within(() => {
+          cy.get(`[aria-label="${panel} panel"]`)
+            .should('be.visible')
+            .within(() => {
+              cy.get('span').first().should('not.have.text', value);
+            });
+        });
+    }
+  });
+});
+
+Then(
+  'I should see the legends {string} in the graph {string}',
+  (legends: string, panels: string) => {
+    getIframe().within(() => {
+      for (const panel of panels.split(', ')) {
+        cy.get('.grafana-app')
+          .wait(100)
+          .within(() => {
+            cy.get(`[aria-label="${panel} panel"]`)
+              .should('be.visible')
+              .within(() => {
+                for (const legend of legends.split(', ')) {
+                  cy.get('a').contains(legend);
+                }
+              });
+          });
+      }
+    });
+  }
+);
+
+Then('I should not see No Data in the graph {string}', (panels: string) => {
+  getIframe().within(() => {
+    for (const panel of panels.split(', ')) {
+      cy.get('.grafana-app')
+        .wait(100)
+        .within(() => {
+          cy.get(`[aria-label="${panel} panel"]`)
+            .should('be.visible')
+            .within(() => {
+              cy.get('div.datapoints-warning').should('not.exist');
+            });
+        });
+    }
+  });
+});

src/pybind/mgr/dashboard/frontend/cypress/integration/common/urls.po.ts

@@ -36,6 +36,9 @@ export class UrlsCollection extends PageHelper {
     'mgr-modules': { url: '#/mgr-modules', id: 'cd-mgr-module-list' },
 
     // Logs
-    logs: { url: '#/logs', id: 'cd-logs' }
+    logs: { url: '#/logs', id: 'cd-logs' },
+
+    // RGW Daemons
+    'rgw daemons': { url: '#/rgw/daemon', id: 'cd-rgw-daemon-list' }
   };
 }

src/pybind/mgr/dashboard/frontend/cypress/integration/orchestrator/grafana/grafana.feature

@@ -0,0 +1,63 @@
+Feature: Grafana panels
+
+    Go to some of the grafana performance section and check if
+    panels are populated without any issues
+
+    Background: Log in
+        Given I am logged in
+
+    Scenario Outline: Hosts Overall Performance
+        Given I am on the "hosts" page
+        When I go to the "Overall Performance" tab
+        Then I should see the grafana panel "<panel>"
+        When I view the grafana panel "<panel>"
+        Then I should not see "No Data" in the panel "<panel>"
+
+        Examples:
+            | panel |
+            | OSD Hosts |
+            | AVG CPU Busy |
+            | AVG RAM Utilization |
+            | Physical IOPS |
+            | AVG Disk Utilization |
+            | Network Load |
+            | CPU Busy - Top 10 Hosts |
+            | Network Load - Top 10 Hosts |
+
+    Scenario Outline: RGW Daemon Overall Performance
+        Given I am on the "rgw daemons" page
+        When I go to the "Overall Performance" tab
+        Then I should see the grafana panel "<panel>"
+        When I view the grafana panel "<panel>"
+        Then I should not see No Data in the graph "<panel>"
+        And I should see the legends "<legends>" in the graph "<panel>"
+
+        Examples:
+            | panel | legends |
+            | Total Requests/sec by RGW Instance | foo.ceph-node-00, foo.ceph-node-01, foo.ceph-node-02 |
+            | GET Latencies by RGW Instance | foo.ceph-node-00, foo.ceph-node-01, foo.ceph-node-02 |
+            | Bandwidth by RGW Instance | foo.ceph-node-00, foo.ceph-node-01, foo.ceph-node-02 |
+            | PUT Latencies by RGW Instance | foo.ceph-node-00, foo.ceph-node-01, foo.ceph-node-02 |
+            | Average GET/PUT Latencies | GET AVG, PUT AVG |
+            | Bandwidth Consumed by Type | GETs, PUTs |
+
+    Scenario Outline: RGW per Daemon Performance
+        Given I am on the "rgw daemons" page
+        When I expand the row "<name>"
+        And I go to the "Performance Details" tab
+        Then I should see the grafana panel "<panel>"
+        When I view the grafana panel "<panel>"
+        Then I should not see No Data in the graph "<panel>"
+        And I should see the legends "<name>" in the graph "<panel>"
+
+        Examples:
+            | name | panel |
+            | foo.ceph-node-00 | Bandwidth by HTTP Operation |
+            | foo.ceph-node-00 | HTTP Request Breakdown |
+            | foo.ceph-node-00 | Workload Breakdown |
+            | foo.ceph-node-01 | Bandwidth by HTTP Operation |
+            | foo.ceph-node-01 | HTTP Request Breakdown |
+            | foo.ceph-node-01 | Workload Breakdown |
+            | foo.ceph-node-02 | Bandwidth by HTTP Operation |
+            | foo.ceph-node-02 | HTTP Request Breakdown |
+            | foo.ceph-node-02 | Workload Breakdown |

src/pybind/mgr/dashboard/frontend/cypress/integration/orchestrator/workflow/06-cluster-check.e2e-spec.ts

@@ -1,4 +1,5 @@
 /* tslint:disable*/
+import { Input, ManagerModulesPageHelper } from '../../cluster/mgr-modules.po';
 import { CreateClusterWizardHelper } from '../../cluster/create-cluster.po';
 import { HostsPageHelper } from '../../cluster/hosts.po';
 import { ServicesPageHelper } from '../../cluster/services.po';
@@ -8,6 +9,7 @@ describe('when cluster creation is completed', () => {
   const createCluster = new CreateClusterWizardHelper();
   const services = new ServicesPageHelper();
   const hosts = new HostsPageHelper();
+  const mgrmodules = new ManagerModulesPageHelper();
 
   const hostnames = ['ceph-node-00', 'ceph-node-01', 'ceph-node-02', 'ceph-node-03'];
 
@@ -30,6 +32,35 @@ describe('when cluster creation is completed', () => {
       hosts.navigateTo();
     });
 
+    it('should check if monitoring stacks are running on the root host', () => {
+      const monitoringStack = ['alertmanager', 'grafana', 'node-exporter', 'prometheus'];
+      hosts.clickTab('cd-host-details', 'ceph-node-00', 'Daemons');
+      for (const daemon of monitoringStack) {
+        cy.get('cd-host-details').within(() => {
+          services.checkServiceStatus(daemon);
+        });
+      }
+    });
+
+    // avoid creating node-exporter on the newly added host
+    // to favour the host draining process
+    it('should reduce the count for node-exporter', () => {
+      services.editService('node-exporter', '3');
+    });
+
+    // grafana ip address is set to the fqdn by default.
+    // kcli is not working with that, so setting the IP manually.
+    it('should change ip address of grafana', { retries: 2 }, () => {
+      const dashboardArr: Input[] = [
+        {
+          id: 'GRAFANA_API_URL',
+          newValue: 'https://192.168.100.100:3000',
+          oldValue: ''
+        }
+      ];
+      mgrmodules.editMgrModule('dashboard', dashboardArr);
+    });
+
     it('should add one more host', () => {
       hosts.navigateTo('add');
       hosts.add(hostnames[3]);

src/pybind/mgr/dashboard/frontend/cypress/integration/orchestrator/workflow/08-hosts.e2e-spec.ts

@@ -31,7 +31,7 @@ describe('Host Page', () => {
     }
   });
 
-  it('should force maintenance and exit', { retries: 2 }, () => {
+  it('should force maintenance and exit', () => {
     hosts.maintenance(hostnames[3], true, true);
   });
 

src/pybind/mgr/dashboard/frontend/cypress/plugins/index.js

@@ -14,6 +14,13 @@ module.exports = (on, _config) => {
       return launchOptions;
     }
   });
+
+  on('task', {
+    log({ message, optional }) {
+      optional ? console.log(message, optional) : console.log(message);
+      return null;
+    },
+  });
 };
 
 require('@applitools/eyes-cypress')(module);

src/pybind/mgr/dashboard/frontend/cypress/support/commands.ts

@@ -2,6 +2,7 @@ declare global {
   namespace Cypress {
     interface Chainable<Subject> {
       login(): void;
+      logToConsole(message: string, optional?: any): void;
       text(): Chainable<string>;
     }
   }
@@ -49,6 +50,10 @@ Cypress.Commands.add('login', () => {
 });
 
 // @ts-ignore
-Cypress.Commands.add('text', { prevSubject: true }, (subject) => {
+Cypress.Commands.add('text', { prevSubject: true }, (subject: any) => {
   return subject.text();
 });
+
+Cypress.Commands.add('logToConsole', (message: string, optional?: any) => {
+  cy.task('log', { message: `(${new Date().toISOString()}) ${message}`, optional });
+});