Add observability visualization to notebooks

.github/workflows/dashboards-observability-test-and-build-workflow.yml

@@ -51,11 +51,10 @@ jobs:
           cd OpenSearch-Dashboards/plugins/dashboards-observability
           yarn osd bootstrap
 
-      # TODO enable unit tests when ready
-      - name: Test Panels
+      - name: Test all dashboards-observability modules
         run: |
           cd OpenSearch-Dashboards/plugins/dashboards-observability
-          yarn test ./public/components/custom_panels/ --coverage
+          yarn test --coverage
 
       - name: Upload coverage
         uses: codecov/codecov-action@v1

README.md

@@ -116,7 +116,7 @@ Dashboards offer a solution for a few selected use cases, and are great tools if
 
 ## Documentation
 
-Please see our technical [documentation](https://opensearch.org/docs/latest/observability-plugins/index/) to learn more about its features.
+Please see our technical [documentation](https://opensearch.org/docs/latest/observability/index/) to learn more about its features.
 
 ## Contributing
 

dashboards-observability/.cypress/CYPRESS_TESTS.md

@@ -102,7 +102,8 @@ The observability plugin currently has 4 modules in it. Each of the modules have
 * Renders input only mode
 * Renders output only mode
 * Duplicates paragraphs
-* Adds a visualization paragraph
+* Adds a dashboards visualization paragraph
+* Adds an observability visualization paragraph
 * Adds a SQL query paragraph
 * Adds a PPL query paragraph
 * Clears outputs

dashboards-observability/.cypress/integration/notebooks.spec.js

@@ -11,17 +11,35 @@ import {
   MARKDOWN_TEXT,
   SAMPLE_URL,
   SQL_QUERY_TEXT,
-  PPL_QUERY_TEXT
-} from "../utils/constants";
+  PPL_QUERY_TEXT,
+} from '../utils/constants';
 
-import { skipOn } from '@cypress/skip-test'
+import { SAMPLE_PANEL } from '../utils/panel_constants';
+
+import { skipOn } from '@cypress/skip-test';
 
 describe('Adding sample data and visualization', () => {
   it('Adds sample flights data for visualization paragraph', () => {
     cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`);
-    cy.get('div[data-test-subj="sampleDataSetCardflights"]').contains(/(Add|View) data/).click();
+    cy.get('div[data-test-subj="sampleDataSetCardflights"]')
+      .contains(/(Add|View) data/)
+      .click();
   });
-})
+
+  it('Add sample observability data', () => {
+    cy.visit(
+      `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/`
+    );
+    cy.get('.euiButton__text').contains('Actions').click();
+    cy.get('.euiContextMenuItem__text').contains('Add samples').click();
+    cy.get('.euiModalHeader__title[data-test-subj="confirmModalTitleText"]')
+      .contains('Add samples')
+      .should('exist');
+    cy.get('.euiButton__text').contains('Yes').click();
+    cy.wait(delay * 5);
+    cy.get('.euiTableCellContent').contains(SAMPLE_PANEL).should('exist');
+  });
+});
 
 describe('Testing notebooks table', () => {
   beforeEach(() => {
@@ -31,7 +49,9 @@ describe('Testing notebooks table', () => {
   it('Displays error toast for invalid notebook name', () => {
     cy.get('.euiButton__text').contains('Create notebook').click();
     cy.wait(delay);
-    cy.get('.euiButton__text').contains(/^Create$/).click();
+    cy.get('.euiButton__text')
+      .contains(/^Create$/)
+      .click();
     cy.wait(delay);
 
     cy.get('.euiToastHeader__title').contains('Invalid notebook name').should('exist');
@@ -41,7 +61,9 @@ describe('Testing notebooks table', () => {
     cy.get('.euiButton__text').contains('Create notebook').click();
     cy.wait(delay);
     cy.get('input.euiFieldText').type(TEST_NOTEBOOK);
-    cy.get('.euiButton__text').contains(/^Create$/).click();
+    cy.get('.euiButton__text')
+      .contains(/^Create$/)
+      .click();
     cy.wait(delay);
 
     cy.contains(TEST_NOTEBOOK).should('exist');
@@ -81,7 +103,9 @@ describe('Testing notebooks table', () => {
     cy.get('input.euiFieldSearch').type(TEST_NOTEBOOK + ' (copy) (rename)');
     cy.wait(delay);
 
-    cy.get('a.euiLink').contains(TEST_NOTEBOOK + ' (copy) (rename)').should('exist');
+    cy.get('a.euiLink')
+      .contains(TEST_NOTEBOOK + ' (copy) (rename)')
+      .should('exist');
   });
 
   it('Deletes notebooks', () => {
@@ -104,7 +128,9 @@ describe('Testing notebooks table', () => {
     cy.get('.euiButton__text').contains('Create notebook').click();
     cy.wait(delay);
     cy.get('input.euiFieldText').type(TEST_NOTEBOOK);
-    cy.get('.euiButton__text').contains(/^Create$/).click();
+    cy.get('.euiButton__text')
+      .contains(/^Create$/)
+      .click();
     cy.wait(delay * 2);
   });
 });
@@ -114,7 +140,7 @@ describe('Test reporting integration if plugin installed', () => {
     cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/notebooks`);
     cy.get('.euiTableCellContent').contains(TEST_NOTEBOOK).click();
     cy.wait(delay * 3);
-    cy.get('body').then($body => {
+    cy.get('body').then(($body) => {
       skipOn($body.find('#reportingActionsButton').length <= 0);
     });
   });
@@ -138,24 +164,18 @@ describe('Test reporting integration if plugin installed', () => {
     cy.wait(delay);
     cy.get('button.euiContextMenuItem:nth-child(3)').contains('Create report definition').click();
     cy.wait(delay);
-    cy.location('pathname', { timeout: 60000 }).should(
-      'include',
-      '/reports-dashboards'
-    );
+    cy.location('pathname', { timeout: 60000 }).should('include', '/reports-dashboards');
     cy.wait(delay);
     cy.get('#reportSettingsName').type('Create notebook on-demand report');
     cy.get('#createNewReportDefinition').click({ force: true });
   });
 
-  it ('View reports homepage from context menu', () => {
+  it('View reports homepage from context menu', () => {
     cy.get('#reportingActionsButton').click();
     cy.wait(delay);
     cy.get('button.euiContextMenuItem:nth-child(4)').contains('View reports').click();
     cy.wait(delay);
-    cy.location('pathname', { timeout: 60000 }).should(
-      'include',
-      '/reports-dashboards'
-    );
+    cy.location('pathname', { timeout: 60000 }).should('include', '/reports-dashboards');
   });
 });
 
@@ -235,7 +255,7 @@ describe('Testing paragraphs', () => {
     cy.get(`a[href="${SAMPLE_URL}"]`).should('have.length.gte', 2);
   });
 
-  it('Adds a visualization paragraph', () => {
+  it('Adds a dashboards visualization paragraph', () => {
     cy.contains('Add paragraph').click();
     cy.wait(delay);
     cy.get('.euiContextMenuItem__text').contains('Visualization').click();
@@ -247,13 +267,12 @@ describe('Testing paragraphs', () => {
 
     cy.get('.euiButton__text').contains('Browse').click();
     cy.wait(delay);
-    cy.get('.euiFieldSearch').focus().type('{uparrow}{uparrow}{enter}')
+    cy.get('.euiFieldSearch').focus().type('[Flights] Flight Count and Average Ticket Price{enter}');
     cy.wait(delay);
     cy.get('.euiButton__text').contains('Select').click();
     cy.wait(delay);
     cy.get('.euiButton__text').contains('Run').click();
     cy.wait(delay);
-
     cy.get('div.visualization').should('exist');
   });
 
@@ -273,6 +292,27 @@ describe('Testing paragraphs', () => {
     cy.get('.euiDataGrid__overflow').should('exist');
   });
 
+  it('Adds an observability visualization paragraph', () => {
+    cy.contains('Add paragraph').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Visualization').click();
+    cy.wait(delay);
+
+    cy.get('.euiButton__text').contains('Run').click();
+    cy.wait(delay);
+    cy.get('.euiTextColor').contains('Visualization is required.').should('exist');
+
+    cy.get('.euiButton__text').contains('Browse').click();
+    cy.wait(delay);
+    cy.get('.euiFieldSearch').focus().type('[Logs] Count total requests by tags{enter}');
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Select').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Run').click();
+    cy.wait(delay);
+    cy.get('h5').contains('[Logs] Count total requests by tags').should('exist');
+  });
+
   it('Adds a PPL query paragraph', () => {
     cy.contains('Add paragraph').click();
     cy.wait(delay);
@@ -326,7 +366,7 @@ describe('Testing paragraphs', () => {
     cy.get('.euiContextMenuItem__text').contains('Code block').click();
     cy.wait(delay);
 
-    cy.get('.euiText').contains('[4] OpenSearch Dashboards visualization').should('exist');
+    cy.get('.euiText').contains('[4] Visualization').should('exist');
     cy.get('.euiText').contains('[5] Code block').should('exist');
   });
 
@@ -337,7 +377,7 @@ describe('Testing paragraphs', () => {
     cy.get('.euiContextMenuItem__text').contains('Move to bottom').click();
     cy.wait(delay);
 
-    cy.get('.euiText').contains('[3] OpenSearch Dashboards visualization').should('exist');
+    cy.get('.euiText').contains('[3] Visualization').should('exist');
   });
 
   it('Duplicates and renames the notebook', () => {
@@ -359,7 +399,9 @@ describe('Testing paragraphs', () => {
     cy.reload();
     cy.wait(delay * 3);
 
-    cy.get('.euiTitle').contains(TEST_NOTEBOOK + ' (copy) (rename)').should('exist');
+    cy.get('.euiTitle')
+      .contains(TEST_NOTEBOOK + ' (copy) (rename)')
+      .should('exist');
     cy.get(`a[href="${SAMPLE_URL}"]`).should('have.length.gte', 2);
   });
 

dashboards-observability/.cypress/integration/panels.spec.js

@@ -414,7 +414,7 @@ describe('Add samples and clean up all test data', () => {
 
   it('Delete visualizations from event analytics', () => {
     moveToEventsHome();
-    cy.get('.euiButtonEmpty__text').contains('Rows per page: 10').click();
+    cy.get('span.euiButtonEmpty__text').contains('Rows per page: 10').click();
     cy.get('.euiContextMenuItem__text').contains('50 rows').click();
     cy.get('.euiCheckbox__input[data-test-subj="checkboxSelectAll"]').click();
     cy.wait(delay);

dashboards-observability/common/constants/custom_panels.ts

@@ -4,5 +4,5 @@
  */
 
 export const CUSTOM_PANELS_API_PREFIX = '/api/observability/operational_panels';
-export const CUSTOM_PANELS_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/observability-plugins/operational-panels/';
+export const CUSTOM_PANELS_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/observability/operational-panels/';
 export const CREATE_PANEL_MESSAGE = 'Enter a name to describe the purpose of this custom panel.';

dashboards-observability/common/constants/explorer.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export const EVENT_ANALYTICS_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/observability-plugins/event-analytics/'
+export const EVENT_ANALYTICS_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/observability/event-analytics/'
 export const RAW_QUERY = 'rawQuery';
 export const FINAL_QUERY = 'finalQuery';
 export const SELECTED_DATE_RANGE = 'selectedDateRange';

dashboards-observability/common/constants/notebooks.ts

@@ -7,7 +7,7 @@ export const NOTEBOOKS_API_PREFIX = '/api/observability/notebooks';
 export const NOTEBOOKS_SELECTED_BACKEND = 'DEFAULT'; // ZEPPELIN || DEFAULT
 export const NOTEBOOKS_FETCH_SIZE = 1000;
 export const CREATE_NOTE_MESSAGE = 'Enter a name to describe the purpose of this notebook.';
-export const NOTEBOOKS_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/observability-plugins/notebooks/';
+export const NOTEBOOKS_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/observability/notebooks/';
 
 export const zeppelinURL = 'http://localhost:8080';
 

dashboards-observability/common/constants/shared.ts

@@ -26,7 +26,8 @@ export const observabilityTitle = 'Observability';
 export const observabilityPluginOrder = 6000;
 
 // Shared Constants
-export const PPL_DOCUMENTATION_URL ='https://opensearch.org/docs/latest/observability-plugins/ppl/commands/'
+export const SQL_DOCUMENTATION_URL ='https://opensearch.org/docs/latest/search-plugins/sql/index/'
+export const PPL_DOCUMENTATION_URL ='https://opensearch.org/docs/latest/observability/ppl/commands/'
 export const UI_DATE_FORMAT = 'MM/DD/YYYY hh:mm A';
 export const PPL_DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
 export const PPL_STATS_REGEX = /\|\s*stats/i;

dashboards-observability/common/constants/trace_analytics.ts

@@ -11,7 +11,7 @@ export const SERVICE_MAP_MAX_NODES = 500;
 // size limit when requesting edge related queries, not necessarily the number of edges
 export const SERVICE_MAP_MAX_EDGES = 1000;
 export const TRACES_MAX_NUM = 3000;
-export const TRACE_ANALYTICS_DOCUMENTATION_LINK = 'https://opensearch.org/docs/latest/observability-plugins/trace/index/';
+export const TRACE_ANALYTICS_DOCUMENTATION_LINK = 'https://opensearch.org/docs/latest/observability/trace/index/';
 
 export const TRACE_ANALYTICS_INDICES_ROUTE = '/api/observability/trace_analytics/indices';
 export const TRACE_ANALYTICS_DSL_ROUTE = '/api/observability/trace_analytics/query';

dashboards-observability/public/components/app.tsx

@@ -59,6 +59,7 @@ export const App = ({
                       DepsStart.dashboard.DashboardContainerByValueRenderer
                     }
                     http={http}
+                    pplService={pplService}
                     setBreadcrumbs={chrome.setBreadcrumbs}
                     parentBreadcrumb={parentBreadcrumb}
                     notifications={notifications}

dashboards-observability/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap

@@ -160,12 +160,12 @@ exports[`Panels Table Component renders empty panel table container 1`] = `
                                    
                                   <EuiLink
                                     external={true}
-                                    href="https://opensearch.org/docs/latest/observability-plugins/operational-panels/"
+                                    href="https://opensearch.org/docs/latest/observability/operational-panels/"
                                     target="blank"
                                   >
                                     <a
                                       className="euiLink euiLink--primary"
-                                      href="https://opensearch.org/docs/latest/observability-plugins/operational-panels/"
+                                      href="https://opensearch.org/docs/latest/observability/operational-panels/"
                                       rel="noreferrer"
                                       target="blank"
                                     >
@@ -763,12 +763,12 @@ exports[`Panels Table Component renders panel table container 1`] = `
                                    
                                   <EuiLink
                                     external={true}
-                                    href="https://opensearch.org/docs/latest/observability-plugins/operational-panels/"
+                                    href="https://opensearch.org/docs/latest/observability/operational-panels/"
                                     target="blank"
                                   >
                                     <a
                                       className="euiLink euiLink--primary"
-                                      href="https://opensearch.org/docs/latest/observability-plugins/operational-panels/"
+                                      href="https://opensearch.org/docs/latest/observability/operational-panels/"
                                       rel="noreferrer"
                                       target="blank"
                                     >

dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx

@@ -51,10 +51,11 @@ type Props = {
   fromTime: string;
   toTime: string;
   onRefresh: boolean;
-  cloneVisualization: (visualzationTitle: string, savedVisualizationId: string) => void;
   pplFilterValue: string;
-  showFlyout: (isReplacement?: boolean | undefined, replaceVizId?: string | undefined) => void;
-  removeVisualization: (visualizationId: string) => void;
+  usedInNotebooks?: boolean;
+  cloneVisualization?: (visualzationTitle: string, savedVisualizationId: string) => void;
+  showFlyout?: (isReplacement?: boolean | undefined, replaceVizId?: string | undefined) => void;
+  removeVisualization?: (visualizationId: string) => void;
 };
 
 export const VisualizationContainer = ({
@@ -66,8 +67,9 @@ export const VisualizationContainer = ({
   fromTime,
   toTime,
   onRefresh,
-  cloneVisualization,
   pplFilterValue,
+  usedInNotebooks,
+  cloneVisualization,
   showFlyout,
   removeVisualization,
 }: Props) => {
@@ -81,7 +83,7 @@ export const VisualizationContainer = ({
   const onActionsMenuClick = () => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen);
   const closeActionsMenu = () => setIsPopoverOpen(false);
 
-  const popoverPanel = [
+  let popoverPanel = [
     <EuiContextMenuItem
       key="Edit"
       disabled={disablePopover}
@@ -114,6 +116,10 @@ export const VisualizationContainer = ({
     </EuiContextMenuItem>,
   ];
 
+  if (usedInNotebooks){
+    popoverPanel = [popoverPanel[0]]
+  }
+
   const loadVisaulization = async () => {
     await renderSavedVisualization(
       http,

dashboards-observability/public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap

@@ -58,7 +58,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                  
                 <a
                   class="euiLink euiLink--primary"
-                  href="https://opensearch.org/docs/latest/observability-plugins/notebooks/"
+                  href="https://opensearch.org/docs/latest/observability/notebooks/"
                   rel="noreferrer"
                   target="blank"
                 >
@@ -971,7 +971,7 @@ exports[`<NoteTable /> spec renders the empty component 1`] = `
                  
                 <a
                   class="euiLink euiLink--primary"
-                  href="https://opensearch.org/docs/latest/observability-plugins/notebooks/"
+                  href="https://opensearch.org/docs/latest/observability/notebooks/"
                   rel="noreferrer"
                   target="blank"
                 >