Integrations Plugin

.cypress/integration/8_integrations.spec.js

@@ -0,0 +1,93 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+
+import {
+    TEST_INTEGRATION_INSTANCE,
+  } from '../utils/constants';
+
+  const moveToIntegrationsHome = () => {
+    cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-integrations#/`);
+  };
+
+  const moveToAvailableNginxIntegration = () => {
+    cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-integrations#/available/nginx`);
+  };
+
+  const moveToInstalledeIntegrations = () => {
+    cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-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="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="instance-name"]').should('have.value', 'nginx');
+      cy.get('[data-test-subj="addIntegrationFlyoutTitle"]').should('exist')
+      cy.get('[data-test-subj="instance-name"]').type('-test');
+      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', () => {
+      moveToInstalledeIntegrations();
+      cy.contains(TEST_INTEGRATION_INSTANCE).should('exist');
+      cy.get('[data-test-subj="nginx-testIntegrationLink"]').click();
+    })
+
+    it('Navigates to installed integrations page and verifies that nginx-test exists and linked asset works as expected', () => {
+      moveToInstalledeIntegrations();
+      cy.contains(TEST_INTEGRATION_INSTANCE).should('exist');
+      cy.get('[data-test-subj="nginx-testIntegrationLink"]').click();
+      cy.get(`[data-test-subj="IntegrationAssetLink"]`).click();
+      cy.url().should('include', '/dashboards#/')
+
+    })
+
+    it('Navigates to installed nginx-test instance page and deletes it', () => {
+      moveToInstalledeIntegrations();
+      cy.contains(TEST_INTEGRATION_INSTANCE).should('exist');
+      cy.get('[data-test-subj="nginx-testIntegrationLink"]').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');
+      cy.get('.euiTableCellContent__text').contains('No items found').should('exist');
+    })
+  });
+
+
+

.cypress/utils/constants.js

@@ -71,6 +71,7 @@ export const setTimeFilter = (setEndTime = false, refresh = true) => {
 
 // notebooks
 export const TEST_NOTEBOOK = 'Test Notebook';
+export const TEST_INTEGRATION_INSTANCE = 'nginx-test';
 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/shared.ts

@@ -13,6 +13,7 @@ export const DSL_SEARCH = '/search';
 export const DSL_CAT = '/cat.indices';
 export const DSL_MAPPING = '/indices.getFieldMapping';
 export const OBSERVABILITY_BASE = '/api/observability';
+export const INTEGRATIONS_BASE = '/api/integrations';
 export const EVENT_ANALYTICS = '/event_analytics';
 export const SAVED_OBJECTS = '/saved_objects';
 export const SAVED_QUERY = '/query';
@@ -51,6 +52,10 @@ 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;
+
 // Shared Constants
 export const SQL_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/search-plugins/sql/index/';
 export const PPL_DOCUMENTATION_URL =
@@ -69,6 +74,13 @@ export const PPL_NEWLINE_REGEX = /[\n\r]+/g;
 
 // Observability plugin URI
 const BASE_OBSERVABILITY_URI = '/_plugins/_observability';
+const BASE_INTEGRATIONS_URI = '/_plugins/_integrations';
+export const OPENSEARCH_INTEGRATIONS_API = {
+  OBJECT: `${BASE_INTEGRATIONS_URI}/object`,
+  ALL: `${BASE_INTEGRATIONS_URI}/store/list_all`,
+  ADDED: `${BASE_INTEGRATIONS_URI}/store/list_added`,
+  ADDED_POP: `${BASE_INTEGRATIONS_URI}/store/list_added_pop`,
+};
 export const OPENSEARCH_PANELS_API = {
   OBJECT: `${BASE_OBSERVABILITY_URI}/object`,
 };

package.json

@@ -28,8 +28,10 @@
     "@reduxjs/toolkit": "^1.6.1",
     "ag-grid-community": "^27.3.0",
     "ag-grid-react": "^27.3.0",
+    "ajv": "^8.11.0",
     "antlr4": "4.8.0",
     "antlr4ts": "^0.5.0-alpha.4",
+    "mime": "^3.0.0",
     "performance-now": "^2.1.0",
     "plotly.js-dist": "^2.2.0",
     "postinstall": "^0.7.4",
@@ -41,6 +43,7 @@
   "devDependencies": {
     "@cypress/skip-test": "^2.6.1",
     "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/mime": "^3.0.1",
     "@types/react-plotly.js": "^2.5.0",
     "@types/react-test-renderer": "^16.9.1",
     "antlr4ts-cli": "^0.5.0-alpha.4",
@@ -50,6 +53,7 @@
     "husky": "6.0.0",
     "jest-dom": "^4.0.0",
     "lint-staged": "^13.1.0",
+    "mock-fs": "^4.12.0",
     "ts-jest": "^29.1.0"
   },
   "resolutions": {
@@ -70,4 +74,4 @@
     "node_modules/*",
     "target/*"
   ]
-}
+}

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 PlaceholderHome } 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: PlaceholderHome,
 };
 
 export const App = ({

public/components/common/side_nav.tsx

@@ -0,0 +1,150 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPage,
+  EuiPageBody,
+  EuiPageSideBar,
+  EuiSideNav,
+  EuiSideNavItemType,
+  EuiSwitch,
+} from '@elastic/eui';
+import React from 'react';
+import { useState } from 'react';
+import { toMountPoint } from '../../../../../src/plugins/opensearch_dashboards_react/public';
+import { uiSettingsService } from '../../../common/utils';
+
+export function ObservabilitySideBar(props: { children: React.ReactNode }) {
+  // set items.isSelected based on location.hash passed in
+  // tries to find an item where href is a prefix of the hash
+  // if none will try to find an item where the hash is a prefix of href
+  function setIsSelected(
+    items: Array<EuiSideNavItemType<React.ReactNode>>,
+    hash: string,
+    initial = true,
+    reverse = false
+  ): boolean {
+    // Default page is Events Analytics
+    // But it is kept as second option in side nav
+    if (hash === '#/') {
+      items[0].items[2].isSelected = true;
+      return true;
+    }
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item.href && ((reverse && item.href.startsWith(hash)) || hash.startsWith(item.href))) {
+        item.isSelected = true;
+        return true;
+      }
+      if (item.items?.length && setIsSelected(item.items, hash, false, reverse)) return true;
+    }
+    return initial && setIsSelected(items, hash, false, !reverse);
+  }
+
+  const items = [
+    {
+      name: 'Observability',
+      id: 0,
+      items: [
+        {
+          name: 'Application analytics',
+          id: 1,
+          href: '#/application_analytics',
+        },
+        {
+          name: 'Trace analytics',
+          id: 2,
+          href: '#/trace_analytics/home',
+          items: [
+            {
+              name: 'Traces',
+              id: 2.1,
+              href: '#/trace_analytics/traces',
+            },
+            {
+              name: 'Services',
+              id: 2.2,
+              href: '#/trace_analytics/services',
+            },
+          ],
+        },
+        {
+          name: 'Event analytics',
+          id: 3,
+          href: '#/event_analytics',
+        },
+        {
+          name: 'Metrics analytics',
+          id: 4,
+          href: '#/metrics_analytics/',
+        },
+        {
+          name: 'Operational panels',
+          id: 5,
+          href: '#/operational_panels/',
+        },
+        {
+          name: 'Notebooks',
+          id: 6,
+          href: '#/notebooks',
+        },
+        {
+          name: 'Placeholder',
+          id: 7,
+          href: '#/integrations',
+        },
+      ],
+    },
+  ];
+  setIsSelected(items, location.hash);
+  const [isDarkMode, setIsDarkMode] = useState(uiSettingsService.get('theme:darkMode'));
+
+  return (
+    <EuiPage>
+      <EuiPageSideBar>
+        <EuiFlexGroup
+          direction="column"
+          justifyContent="spaceBetween"
+          style={{ height: '100%' }}
+          gutterSize="none"
+        >
+          <EuiFlexItem>
+            <EuiSideNav items={items} />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false} style={{ marginBottom: 20 }}>
+            <EuiSwitch
+              label="Dark mode"
+              checked={isDarkMode}
+              onChange={() => {
+                uiSettingsService.set('theme:darkMode', !isDarkMode).then((resp) => {
+                  setIsDarkMode(!isDarkMode);
+                  uiSettingsService.addToast({
+                    title: 'Theme setting changes require you to reload the page to take effect.',
+                    text: toMountPoint(
+                      <>
+                        <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
+                          <EuiFlexItem grow={false}>
+                            <EuiButton size="s" onClick={() => window.location.reload()}>
+                              Reload page
+                            </EuiButton>
+                          </EuiFlexItem>
+                        </EuiFlexGroup>
+                      </>
+                    ),
+                    color: 'success',
+                  });
+                });
+              }}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPageSideBar>
+      <EuiPageBody>{props.children}</EuiPageBody>
+    </EuiPage>
+  );
+}