Feature anywhere

cypress/fixtures/dashboard/opensearch_dashboards/feature-anywhere/feature-anywhere-sample.json

@@ -0,0 +1,10 @@
+[
+  {
+    "name": "John",
+    "lastname": "Doe"
+  },
+  {
+    "name": "Jane",
+    "lastname": "Doe"
+  }
+]

cypress/fixtures/dashboard/opensearch_dashboards/feature-anywhere/index-pattern-fields.txt

@@ -0,0 +1 @@
+[{"count":0,"name":"@timestamp","type":"date","esTypes":["date"],"scripted":false,"searchable":true,"aggregatable":true,"readFromDocValues":true},{"count":0,"name":"_id","type":"string","esTypes":["_id"],"scripted":false,"searchable":true,"aggregatable":true,"readFromDocValues":false},{"count":0,"name":"_index","type":"string","esTypes":["_index"],"scripted":false,"searchable":true,"aggregatable":true,"readFromDocValues":false},{"count":0,"name":"_score","type":"number","scripted":false,"searchable":false,"aggregatable":false,"readFromDocValues":false},{"count":0,"name":"_source","type":"_source","esTypes":["_source"],"scripted":false,"searchable":false,"aggregatable":false,"readFromDocValues":false},{"count":0,"name":"_type","type":"string","scripted":false,"searchable":false,"aggregatable":false,"readFromDocValues":false},{"count":0,"name":"lastname","type":"string","esTypes":["text"],"scripted":false,"searchable":true,"aggregatable":false,"readFromDocValues":false},{"count":0,"name":"name","type":"string","esTypes":["text"],"scripted":false,"searchable":true,"aggregatable":false,"readFromDocValues":false}]

cypress/fixtures/dashboard/opensearch_dashboards/feature-anywhere/index-settings-sample.txt

@@ -0,0 +1 @@
+{"mappings":{"properties":{"name":{"type":"text"},"lastname":{"type":"text"},"@timestamp":{"type":"date", "format":"epoch_millis"}}},"settings":{"index":{"number_of_shards":"1","number_of_replicas":"1"}}}

cypress/integration/core-opensearch-dashboards/opensearch-dashboards/feature-anywhere/dashboard_feature_anywhere_spec.js

@@ -0,0 +1,139 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  cleanTests,
+  prepareTests,
+} from '../../../../utils/dashboards/feature-anywhere/helpers';
+
+let indexName = 'feature-anywhere-sample-index';
+const indexPatternName = 'feature-anywhere-sample-*';
+const visualizationName = 'Feature Anywhere Line Chart';
+const dashboardName = 'Feature Anywhere Dashboard';
+
+describe('Feature anywhere tests', () => {
+  before(() => {
+    cleanTests(indexName, indexPatternName, visualizationName, dashboardName);
+    prepareTests(indexName, indexPatternName);
+  });
+
+  beforeEach(() => {
+    cy.visit('http://localhost:5601/app/dashboards');
+  });
+
+  after(() => {
+    cleanTests(indexName, indexPatternName, visualizationName, dashboardName);
+  });
+
+  let dashboardId;
+
+  it('Create dashboard', () => {
+    cy.visit('http://localhost:5601/app/dashboards');
+
+    cy.get('[data-test-subj="createDashboardPromptButton"]')
+      .should('be.visible')
+      .click();
+
+    cy.get('button').contains('Create new').click();
+
+    cy.get('[data-test-subj="visType-line"]').click();
+
+    cy.get('[data-test-subj="savedObjectFinderSearchInput"]').type(
+      `${indexPatternName}{enter}`
+    );
+
+    cy.get(`[title="${indexPatternName}"]`).click();
+
+    cy.get('.euiTitle')
+      .contains('Buckets')
+      .parent()
+      .find('[data-test-subj="visEditorAdd_buckets"]')
+      .click();
+    cy.get('[data-test-subj="visEditorAdd_buckets_X-axis"]').click();
+
+    cy.get('.euiTitle')
+      .contains('Buckets')
+      .parent()
+      .within(() => {
+        cy.wait(1000);
+        cy.get('[data-test-subj="comboBoxInput"]')
+          .find('input')
+          .type('Date Histogram{enter}', { force: true });
+      });
+
+    cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({
+      force: true,
+    });
+    cy.get('[data-test-subj="visualizeSaveButton"]').click({
+      force: true,
+    });
+    cy.get('[data-test-subj="savedObjectTitle"]').type(visualizationName);
+    cy.get('[data-test-subj="confirmSaveSavedObjectButton"]').click({
+      force: true,
+    });
+    cy.get('[data-test-subj="dashboardSaveMenuItem"]').click({
+      force: true,
+    });
+
+    cy.get('[data-test-subj="savedObjectTitle"]').type(dashboardName);
+
+    cy.intercept('POST', '/api/saved_objects/dashboard?overwrite=true').as(
+      'saveDashboard'
+    );
+    cy.get('[data-test-subj="confirmSaveSavedObjectButton"]')
+      .click({
+        force: true,
+      })
+      .then(() => {
+        cy.wait('@saveDashboard').then((interceptor) => {
+          dashboardId = interceptor.response.body.id;
+          cy.visit(`http://localhost:5601/app/dashboards#/view/${dashboardId}`);
+        });
+      });
+  });
+
+  describe('Validate Dashboard', () => {
+    beforeEach(() => {
+      cy.visit(`http://localhost:5601/app/dashboards#/view/${dashboardId}`);
+      cy.wait(5000);
+    });
+
+    it('Visualizations should be visible', () => {
+      cy.getVisPanelByTitle(visualizationName);
+    });
+
+    it('Validate visualization charts', () => {
+      cy.getVisPanelByTitle(visualizationName).within(($panel) => {
+        cy.wrap($panel).getLegendNodes().contains('Count');
+
+        cy.getChart()
+          .getCircleNodes()
+          .then(($nodes) => {
+            cy.wrap($nodes).should('have.length', 1);
+            cy.wrap($nodes).realHover();
+          });
+      });
+
+      cy.get('div[class="visTooltip"]').within(() => {
+        cy.get('table tr')
+          .eq(1)
+          .then(($tr) => {
+            cy.wrap($tr).within(() => {
+              cy.get('.visTooltip__label').contains('Count');
+              cy.get('.visTooltip__value').contains(2);
+            });
+          });
+      });
+    });
+
+    it('Validate visualization events', () => {
+      cy.getVisPanelByTitle(visualizationName)
+        .openVisContextMenu()
+        .clickVisPanelMenuItem('View Events');
+
+      cy.get('.euiFlyout').find('.euiTitle').contains(visualizationName);
+    });
+  });
+});

cypress/utils/dashboards/commands.js

@@ -4,6 +4,7 @@
  */
 
 import './vis_builder/commands';
+import './feature-anywhere/commands';
 import './vis_type_table/commands';
 
 Cypress.Commands.add('waitForLoader', () => {

cypress/utils/dashboards/feature-anywhere/commands.js

@@ -0,0 +1,137 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { getNodeData } from './helpers';
+import _ from 'lodash';
+
+Cypress.Commands.add('getVisPanelByTitle', (title) =>
+  cy.get(`[data-title="${title}"]`).parents('.embPanel').should('be.visible')
+);
+
+Cypress.Commands.add('getChart', () =>
+  cy.get('[class="chart"]').find('svg').should('be.visible')
+);
+
+Cypress.Commands.add('openVisContextMenu', { prevSubject: true }, (panel) =>
+  cy
+    .wrap(panel)
+    .find(`[data-test-subj="embeddablePanelContextMenuClosed"]`)
+    .click()
+    .then(() => cy.get('.euiContextMenu'))
+);
+
+Cypress.Commands.add(
+  'clickVisPanelMenuItem',
+  { prevSubject: 'optional' },
+  (menu, text) =>
+    (menu ? cy.wrap(menu) : cy.get('.euiContextMenu'))
+      .find('button')
+      .contains(text)
+      .click()
+      .then(() => cy.get('.euiContextMenu'))
+);
+
+Cypress.Commands.add(
+  'getTextNodes',
+  {
+    prevSubject: true,
+  },
+  (chart) => cy.wrap(chart).find('text')
+);
+
+Cypress.Commands.add(
+  'getArcNodes',
+  {
+    prevSubject: true,
+  },
+  (chart) => cy.wrap(chart).find('[class="arcs"]').find('path[class="slice"]')
+);
+
+Cypress.Commands.add(
+  'getCircleNodes',
+  {
+    prevSubject: true,
+  },
+  (chart) =>
+    cy.wrap(chart).find('[class="points line"]').find('circle[class="circle"]')
+);
+
+Cypress.Commands.add(
+  'getNodeData',
+  {
+    prevSubject: true,
+  },
+  (node) => cy.wrap(getNodeData(node.get(0)))
+);
+
+Cypress.Commands.add(
+  'filterNodesBy',
+  {
+    prevSubject: true,
+  },
+  ($nodes, filter, value) => {
+    let nodes = [];
+    $nodes.map((idx, node) => {
+      if (getNodeData(node)[filter] === value) nodes.push(node);
+    });
+    return nodes;
+  }
+);
+
+Cypress.Commands.add('getLabelNodes', { prevSubject: true }, (chart) => {
+  return cy.wrap(chart).find('[class="labels"]').find('text');
+});
+
+Cypress.Commands.add(
+  'containsText',
+  { prevSubject: true },
+  (chart, text, exactMatch = false) => {
+    return cy
+      .wrap(chart)
+      .getTextNodes()
+      .then(($texts) => {
+        $texts = $texts.filter(
+          (idx, node) =>
+            (exactMatch && node.firstChild.nodeValue === text) ||
+            _.includes(node.firstChild.nodeValue, text)
+        );
+
+        if ($texts.length > 0) {
+          cy.assert(
+            true,
+            `expected to find a node with the text "${text}", multiple nodes found`
+          );
+        } else if ($texts.length === 0) {
+          cy.assert(true, `expected to find a node with the text "${text}"`);
+        } else {
+          cy.fail(
+            `expected to find a node with the text "${text}" but failed to find it!`
+          );
+        }
+
+        return $texts;
+      });
+  }
+);
+
+Cypress.Commands.add(
+  'getLegendNodes',
+  {
+    prevSubject: true,
+  },
+  (visPanel) =>
+    cy
+      .wrap(visPanel)
+      .find('ul[class="visLegend__list"]')
+      .find('span[class="visLegend__valueTitle"]')
+      .then(($legends) => {
+        cy.assert(
+          true,
+          `expected to find legend nodes within the vis panel, found ${$legends.length}`
+        );
+
+        return $legends;
+      })
+);