Add Metrics cypress and bug fixes (opensearch-project#491) (opensearc…

…h-project#504) * Add Metrics cypress and bug fixes Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]> * Remove view query from metrics visualization Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]> * Remove only from cypress Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]> --------- Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]> (cherry picked from commit e24fdcd) Co-authored-by: Kavitha Conjeevaram Mohan <[email protected]>
amsiglan · May 30, 2023 · 62ea862 · 62ea862
1 parent eaa3c15
commit 62ea862
Show file tree

Hide file tree

Showing 17 changed files with 415 additions and 210 deletions.
diff --git a/.cypress/integration/8_metrics_analytics.spec.js b/.cypress/integration/8_metrics_analytics.spec.js
@@ -0,0 +1,260 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+
+import {
+  delay,
+  PPL_METRICS,
+  PPL_METRICS_NAMES,
+  VIS_TYPE_LINE,
+  TESTING_PANEL,
+} from '../utils/metrics_constants';
+import { suppressResizeObserverIssue, COMMAND_TIMEOUT_LONG } from '../utils/constants';
+import { clearQuerySearchBoxText } from '../utils/event_analytics/helpers';
+import { landOnPanels } from '../utils/event_analytics/constants';
+
+const moveToMetricsHome = () => {
+  cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-metrics#/`);
+  cy.wait(delay * 3);
+};
+
+const moveToEventsExplorer = () => {
+  cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-logs#/explorer`);
+  cy.wait(delay * 3);
+};
+
+const moveToEventsHome = () => {
+  cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-logs#/`);
+  cy.wait(delay * 3);
+};
+
+describe('Creating custom metrics', () => {
+  beforeEach(() => {
+    moveToEventsExplorer();
+    clearQuerySearchBoxText('searchAutocompleteTextArea');
+    suppressResizeObserverIssue();
+  });
+
+  it('Create custom metric in event analytics and check it in events home', () => {
+    cy.get('[id^=autocomplete-textarea]').focus().type(PPL_METRICS[0], {
+      delay: 50,
+    });
+    cy.get('.euiButton__text').contains('Refresh').trigger('mouseover').click();
+    cy.wait(delay);
+    suppressResizeObserverIssue();
+    cy.get('button[id="main-content-vis"]').contains('Visualizations').trigger('mouseover').click();
+    cy.wait(delay * 2);
+    cy.get('[data-test-subj="comboBoxToggleListButton"]').click();
+    cy.get('[data-test-subj="comboBoxSearchInput"]').focus().type(VIS_TYPE_LINE, { force: true });
+    cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click({ force: true });
+    cy.get('[data-test-subj="eventExplorer__querySaveName"]')
+      .focus()
+      .type(PPL_METRICS_NAMES[0], { force: true });
+    cy.get('[data-test-subj="eventExplorer__metricSaveName"]').click({ force: true });
+    cy.wait(1000);
+    cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]', {
+      timeout: COMMAND_TIMEOUT_LONG,
+    }).click();
+    cy.wait(delay);
+    cy.get('.euiToastHeader__title').contains('successfully').should('exist');
+    moveToEventsHome();
+    cy.get('[data-test-subj="eventHome__savedQueryTableName"]')
+      .first()
+      .contains(PPL_METRICS_NAMES[0]);
+  });
+
+  it('Check for new metrics under recently created netrics', () => {
+    cy.get('[id^=autocomplete-textarea]').focus().type(PPL_METRICS[1], {
+      delay: 50,
+    });
+    cy.get('.euiButton__text').contains('Refresh').trigger('mouseover').click();
+    cy.wait(delay);
+    suppressResizeObserverIssue();
+    cy.get('button[id="main-content-vis"]').contains('Visualizations').trigger('mouseover').click();
+    cy.wait(delay * 2);
+    cy.get('[data-test-subj="comboBoxInput"]').click();
+    cy.get('.euiComboBoxOption__content').contains('Time series').click({ force: true });
+
+    cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click({ force: true });
+    cy.get('[data-test-subj="eventExplorer__querySaveName"]')
+      .focus()
+      .type(PPL_METRICS_NAMES[1], { force: true });
+    cy.get('[data-test-subj="eventExplorer__metricSaveName"]').click({ force: true });
+    cy.wait(1000);
+    cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]', {
+      timeout: COMMAND_TIMEOUT_LONG,
+    }).click();
+    cy.wait(delay);
+    cy.get('.euiToastHeader__title').contains('successfully').should('exist');
+    moveToMetricsHome();
+    cy.get('[data-test-subj="metricsListItems_recentlyCreated"]')
+      .contains(PPL_METRICS_NAMES[1])
+      .should('exist');
+  });
+});
+
+describe('Search for metrics in search bar', () => {
+  beforeEach(() => {
+    moveToMetricsHome();
+    suppressResizeObserverIssue();
+  });
+
+  it('Search for metrics in search bar from available metrics', () => {
+    cy.get('[data-test-subj="metricsSearch"]').type('metric', {
+      delay: 50,
+    });
+    cy.wait(delay);
+
+    cy.get('[data-test-subj="metricsListItems_recentlyCreated"]')
+      .contains(PPL_METRICS_NAMES[0])
+      .should('exist');
+    cy.get('[data-test-subj="metricsListItems_recentlyCreated"]')
+      .contains(PPL_METRICS_NAMES[1])
+      .should('exist');
+    cy.get('[data-test-subj="metricsListItems_recentlyCreated"]')
+      .contains('go_memstats_alloc_bytes')
+      .should('not.exist');
+    cy.get('[data-test-subj="metricsListItems_recentlyCreated"]')
+      .contains('go_threads')
+      .should('not.exist');
+  });
+});
+
+describe('Select and unselect metrics in sidebar', () => {
+  it('Select and unselect metrics in sidebar', () => {
+    moveToMetricsHome();
+    suppressResizeObserverIssue();
+    cy.get('[data-test-subj="metricsListItems_recentlyCreated"]')
+      .contains(PPL_METRICS_NAMES[0])
+      .trigger('mouseover')
+      .click();
+    cy.get('[data-test-subj="metricsListItems_recentlyCreated"]')
+      .contains(PPL_METRICS_NAMES[1])
+      .trigger('mouseover')
+      .click();
+    cy.wait(50);
+    cy.get('[data-test-subj="metricsListItems_selectedMetrics"]')
+      .contains(PPL_METRICS_NAMES[0])
+      .should('exist');
+    cy.get('[data-test-subj="metricsListItems_selectedMetrics"]')
+      .contains(PPL_METRICS_NAMES[1])
+      .should('exist');
+    cy.get('[data-test-subj="metricsListItems_selectedMetrics"]')
+      .contains(PPL_METRICS_NAMES[0])
+      .trigger('mouseover')
+      .click();
+    cy.get('[data-test-subj="metricsListItems_selectedMetrics"]')
+      .contains(PPL_METRICS_NAMES[1])
+      .trigger('mouseover')
+      .click();
+    cy.wait(50);
+    cy.get('[data-test-subj="metricsListItems_recentlyCreated"]')
+      .contains(PPL_METRICS_NAMES[0])
+      .trigger('mouseover')
+      .should('exist');
+    cy.get('[data-test-subj="metricsListItems_recentlyCreated"]')
+      .contains(PPL_METRICS_NAMES[1])
+      .trigger('mouseover')
+      .should('exist');
+  });
+});
+
+describe('Test Metric Visualizations', () => {
+  beforeEach(() => {
+    moveToMetricsHome();
+    suppressResizeObserverIssue();
+    cy.get('[data-test-subj="metricsListItems_recentlyCreated"]')
+      .contains(PPL_METRICS_NAMES[0])
+      .trigger('mouseover')
+      .click();
+  });
+
+  it('Resize a Metric visualization in edit mode', () => {
+    cy.get('[data-test-subj="metrics__editView"]')
+      .contains('Edit view')
+      .trigger('mouseover')
+      .click();
+    cy.wait(delay);
+    cy.get('.react-resizable-handle-se')
+      // .eq(1)
+      .trigger('mousedown', { which: 1 })
+      .trigger('mousemove', { clientX: 2000, clientY: 800 })
+      .trigger('mouseup', { force: true });
+    cy.wait(delay);
+    cy.get('[data-test-subj="metrics__saveView"]').trigger('mouseover').click();
+    cy.wait(delay * 3);
+    cy.get('div.react-grid-layout>div').invoke('height').should('match', new RegExp('630'));
+    cy.wait(delay);
+  });
+
+  it('Drag and drop a Metric visualization in edit mode', () => {
+    cy.get('[data-test-subj="metricsListItems_recentlyCreated"]')
+      .contains(PPL_METRICS_NAMES[1])
+      .trigger('mouseover')
+      .click();
+    cy.get('[data-test-subj="metrics__editView"]')
+      .contains('Edit view')
+      .trigger('mouseover')
+      .click();
+    cy.wait(delay);
+    cy.get('h5')
+      .contains(PPL_METRICS_NAMES[0])
+      .trigger('mousedown', { which: 1, force: true })
+      .trigger('mousemove', { clientX: 415, clientY: 500 })
+      .trigger('mouseup', { force: true });
+    cy.wait(delay);
+    cy.get('[data-test-subj="metrics__saveView"]')
+      .trigger('mouseover')
+      .click({ force: true })
+      .then(() => {
+        cy.wait(delay * 3);
+        cy.get('div.react-grid-layout>div')
+          .eq(1)
+          .invoke('attr', 'style')
+          .should('match', new RegExp('(.*)transform: translate((.*)10px)(.*)'));
+        cy.wait(delay);
+      });
+  });
+
+  it('Change date filter of the Metrics home page', () => {
+    cy.get('.euiButtonEmpty[data-test-subj="superDatePickerToggleQuickMenuButton"]').click({
+      force: true,
+    });
+    cy.get('.euiLink').contains('This year').trigger('mouseover').click();
+    cy.wait(delay * 2);
+    cy.get('.euiSuperDatePicker__prettyFormat[data-test-subj="superDatePickerShowDatesButton"]')
+      .contains('This year')
+      .should('exist');
+    cy.wait(delay);
+  });
+
+  it('Saves metrics to an existing panel', () => {
+    landOnPanels();
+    cy.get('[data-test-subj="customPanels__createNewPanels"]').click();
+    cy.get('input.euiFieldText').type(TESTING_PANEL);
+    cy.get('.euiButton__text', { timeout: COMMAND_TIMEOUT_LONG })
+      .contains(/^Create$/)
+      .click();
+    cy.wait(delay * 3);
+    moveToMetricsHome();
+    cy.get('[data-test-subj="metrics__saveManagementPopover"]').trigger('mouseover').click();
+    cy.get('[data-test-subj="comboBoxSearchInput"]').focus().type(TESTING_PANEL, { force: true });
+    cy.get('[data-test-subj="metrics__SaveConfirm"]').click({ force: true });
+    cy.get('.euiToastHeader__title').contains('successfully').should('exist');
+  });
+});
+
+describe('Has working breadcrumbs', () => {
+  it('Redirect to correct page on breadcrumb click', () => {
+    moveToMetricsHome();
+    suppressResizeObserverIssue();
+    cy.get('[data-test-subj="metricsSearch"]').should('exist');
+    cy.get('.euiTitle').contains('Metrics').should('exist');
+    cy.get('.euiBreadcrumb[href="observability-logs#/"]').click(),
+      { timeout: COMMAND_TIMEOUT_LONG };
+    cy.get('.euiTitle').contains('Logs').should('exist');
+  });
+});
diff --git a/.cypress/utils/metrics_constants.js b/.cypress/utils/metrics_constants.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const delay = 100;
+
+export const PPL_METRICS_NAMES = [
+  '[Metric] Average ram usage per day by windows os',
+  '[Metric] Daily count for error response codes',
+  '[Metric] Average ram usage per day by apple os',
+  'Average value by memstats stat bytes',
+  'Average value by memstats heap allocation bytes',
+];
+
+export const PPL_METRICS = [
+  "source = opensearch_dashboards_sample_data_logs | where match(machine.os,'win')  |  stats avg(machine.ram) by span(timestamp,1d)",
+  "source = opensearch_dashboards_sample_data_logs | where response='503' or response='404' | stats count() by span(timestamp,1d)",
+  "source = opensearch_dashboards_sample_data_logs | where machine.os='osx' or  machine.os='ios' |  stats avg(machine.ram) by span(timestamp,1d)",
+];
+
+export const VIS_TYPE_LINE = 'Time Series';
+export const TESTING_PANEL = 'Mock Testing Panels for Metrics';
diff --git a/...omponents/custom_panels/panel_modules/visualization_container/visualization_container.tsx b/...omponents/custom_panels/panel_modules/visualization_container/visualization_container.tsx
@@ -25,6 +25,7 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import React, { useEffect, useMemo, useState } from 'react';
+import _ from 'lodash';
 import { CoreStart } from '../../../../../../../src/core/public';
 import PPLService from '../../../../services/requests/ppl';
 import {
@@ -34,7 +35,6 @@ import {
 } from '../../helpers/utils';
 import './visualization_container.scss';
 import { VizContainerError } from '../../../../../common/types/custom_panels';
-import _ from 'lodash';
 
 /*
  * Visualization container - This module is a placeholder to add visualizations in react-grid-layout
@@ -329,7 +329,10 @@ export const VisualizationContainer = ({
                   closePopover={closeActionsMenu}
                   anchorPosition="downLeft"
                 >
-                  <EuiContextMenuPanel items={popoverPanel} />
+                  <EuiContextMenuPanel
+                    items={popoverPanel}
+                    data-test-subj="panelViz__popoverPanel"
+                  />
                 </EuiPopover>
               )}
             </EuiFlexItem>