Merge pull request opensearch-project#618 from Swiddis/osints/frontend

Merge Frontend for OpenSearch Integrations

.cypress/integration/9_integrations.spec.js

@@ -0,0 +1,105 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+
+import {
+  TEST_INTEGRATION_INSTANCE, TEST_SAMPLE_INSTANCE,
+} from '../utils/constants';
+
+let testInstanceSuffix = (Math.random() + 1).toString(36).substring(7);
+let testInstance = `${TEST_INTEGRATION_INSTANCE}_${testInstanceSuffix}`;
+
+const moveToIntegrationsHome = () => {
+  cy.visit(`${Cypress.env('opensearchDashboards')}/app/integrations#/available`);
+};
+
+const moveToAvailableNginxIntegration = () => {
+  cy.visit(`${Cypress.env('opensearchDashboards')}/app/integrations#/available/nginx`);
+};
+
+const moveToAddedIntegrations = () => {
+  cy.visit(`${Cypress.env('opensearchDashboards')}/app/integrations#/installed`);
+};
+
+
+describe('Basic sanity test for integrations plugin', () => {
+  it('Navigates to integrations plugin and expects the correct header', () => {
+    moveToIntegrationsHome();
+    cy.get('[data-test-subj="integrations-header"]').should('exist');
+  });
+
+  it('Navigates to integrations plugin and tests that clicking the nginx cards navigates to the nginx page', () => {
+    moveToIntegrationsHome();
+    cy.get('[data-test-subj="integration_card_nginx"]').click();
+    cy.url().should('include', '/available/nginx')
+  })
+
+  it('Navigates to nginx page and asserts the page to be as expected', () => {
+    moveToAvailableNginxIntegration();
+    cy.get('[data-test-subj="nginx-overview"]').should('exist')
+    cy.get('[data-test-subj="nginx-details"]').should('exist')
+    cy.get('[data-test-subj="nginx-screenshots"]').should('exist')
+    cy.get('[data-test-subj="nginx-assets"]').should('exist')
+    cy.get('[data-test-subj="fields"]').click();
+    cy.get('[data-test-subj="nginx-fields"]').should('exist')
+  })
+});
+
+describe('Tests the add nginx integration instance flow', () => {
+  it('Navigates to nginx page and triggers the adds the instance flow', () => {
+    moveToAvailableNginxIntegration();
+    cy.get('[data-test-subj="add-integration-button"]').click();
+    cy.get('[data-test-subj="new-instance-name"]').should('have.value', 'nginx');
+    cy.get('[data-test-subj="createInstanceButton"]').should('be.disabled')
+    cy.get('[data-test-subj="addIntegrationFlyoutTitle"]').should('exist')
+    cy.get('[data-test-subj="data-source-name"]').type('test');
+    cy.get('[data-test-subj="new-instance-name"]').type(testInstance.substring(5));
+    cy.get('[data-test-subj="createInstanceButton"]').click();
+    cy.get('.euiToastHeader__title').should('contain', 'successfully');
+  })
+
+  it('Navigates to installed integrations page and verifies that nginx-test exists', () => {
+    moveToAddedIntegrations();
+    cy.contains(testInstance).should('exist');
+    cy.get(`[data-test-subj="${testInstance}IntegrationLink"]`).click();
+  })
+
+  it('Navigates to added integrations page and verifies that nginx-test exists and linked asset works as expected', () => {
+    moveToAddedIntegrations();
+    cy.contains(TEST_INTEGRATION_INSTANCE).should('exist');
+    cy.get(`[data-test-subj="${testInstance}IntegrationLink"]`).click();
+    cy.get(`[data-test-subj="IntegrationAssetLink"]`).click();
+    cy.url().should('include', '/dashboards#/')
+  })
+
+  it('Navigates to installed nginx-test instance page and deletes it', () => {
+    moveToAddedIntegrations();
+    cy.contains(testInstance).should('exist');
+    cy.get(`[data-test-subj="${testInstance}IntegrationLink"]`).click();
+    cy.get('[data-test-subj="deleteInstanceButton"]').click();
+
+    cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('be.disabled');
+
+    cy.get('input.euiFieldText[placeholder="delete"]').focus().type('delete', {
+      delay: 50,
+    });
+    cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('not.be.disabled');
+    cy.get('button[data-test-subj="popoverModal__deleteButton"]').click();
+    cy.get('.euiToastHeader__title').should('contain', 'successfully');
+  })
+});
+
+describe('Tests the add nginx integration instance flow', () => {
+  it('Navigates to nginx page and triggers the try it flow', () => {
+    moveToAvailableNginxIntegration();
+    cy.get('[data-test-subj="try-it-button"]').click();
+    cy.get('.euiToastHeader__title').should('contain', 'successfully');
+    moveToAddedIntegrations();
+    cy.contains(TEST_SAMPLE_INSTANCE).should('exist');
+  })
+});
+
+

.cypress/utils/constants.js

@@ -71,6 +71,8 @@ export const setTimeFilter = (setEndTime = false, refresh = true) => {
 
 // notebooks
 export const TEST_NOTEBOOK = 'Test Notebook';
+export const TEST_INTEGRATION_INSTANCE = 'nginx-test';
+export const TEST_SAMPLE_INSTANCE = 'nginx-sample';
 export const SAMPLE_URL = 'https://github.com/opensearch-project/sql/tree/main/sql-jdbc';
 export const NOTEBOOK_TEXT = 'Use Notebooks to interactively and collaboratively develop rich reports backed by live data. Common use cases for notebooks includes creating postmortem reports, designing run books, building live infrastructure reports, or even documentation.';
 export const OPENSEARCH_URL = 'https://opensearch.org/docs/latest/observability-plugin/notebooks/';

common/constants/custom_panels.ts

@@ -8,7 +8,8 @@ import { v4 as uuidv4 } from 'uuid';
 export const CUSTOM_PANELS_API_PREFIX = '/api/observability/operational_panels';
 export const CUSTOM_PANELS_DOCUMENTATION_URL =
   'https://opensearch.org/docs/latest/observability-plugin/operational-panels/';
-export const CREATE_PANEL_MESSAGE = 'Enter a name to describe the purpose of this Observability Dashboard.';
+export const CREATE_PANEL_MESSAGE =
+  'Enter a name to describe the purpose of this Observability Dashboard.';
 
 export const CUSTOM_PANELS_SAVED_OBJECT_TYPE = 'observability-panel';
 

common/constants/integrations.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const OPENSEARCH_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest';
+export const ASSET_FILTER_OPTIONS = ['index-pattern', 'search', 'visualization', 'dashboard'];
+export const INTEGRATION_TEMPLATE_OPTIONS = ['nginx', 'aws_elb'];
+export const INTEGRATION_CATEOGRY_OPTIONS = [
+  'communication',
+  'http',
+  'cloud',
+  'aws_elb',
+  'container',
+  'logs',
+];

common/constants/shared.ts

@@ -52,9 +52,9 @@ export const observabilityPanelsID = 'observability-dashboards';
 export const observabilityPanelsTitle = 'Dashboards';
 export const observabilityPanelsPluginOrder = 5095;
 
-export const observabilityIntegrationsID = 'observability-integrations';
-export const observabilityIntegrationsTitle = 'Integrations';
-export const observabilityIntegrationsPluginOrder = 5096;
+export const integrationsID = 'integrations';
+export const integrationsTitle = 'Integrations';
+export const integrationsPluginOrder = 9020;
 
 // Shared Constants
 export const SQL_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/search-plugins/sql/index/';

public/components/app.tsx

@@ -12,6 +12,7 @@ import { observabilityID, observabilityTitle } from '../../common/constants/shar
 import { store } from '../framework/redux/store';
 import { AppPluginStartDependencies } from '../types';
 import { Home as ApplicationAnalyticsHome } from './application_analytics/home';
+import { Home as IntegrationsHome } from './integrations/home';
 import { MetricsListener } from './common/metrics_listener';
 import { Home as CustomPanelsHome } from './custom_panels/home';
 import { EventAnalytics } from './event_analytics';
@@ -42,6 +43,7 @@ const pages = {
   traces: TraceAnalyticsHome,
   notebooks: NotebooksHome,
   dashboards: CustomPanelsHome,
+  integrations: IntegrationsHome,
 };
 
 export const App = ({