Merge notebooks frontend to observability (#109)

.cypress/utils/constants.js

@@ -24,6 +24,13 @@
  *   permissions and limitations under the License.
  */
 
+export const delay = 1500;
+
+// trace analytics
+export const TRACE_ID = '8832ed6abbb2a83516461960c89af49d';
+export const SPAN_ID = 'a673bc074b438374';
+export const SERVICE_NAME = 'frontend-client';
+
 export const testDataSet = [
   {
     mapping_url: 'https://raw.githubusercontent.com/opensearch-project/trace-analytics/main/.cypress/utils/otel-v1-apm-service-map-mappings.json',
@@ -42,11 +49,6 @@ export const testDataSet = [
   },
 ]
 
-export const delay = 1500;
-export const TRACE_ID = '8832ed6abbb2a83516461960c89af49d';
-export const SPAN_ID = 'a673bc074b438374';
-export const SERVICE_NAME = 'frontend-client';
-
 export const setTimeFilter = (setEndTime = false, refresh = true) => {
   const startTime = 'Mar 25, 2021 @ 10:00:00.000';
   const endTime = 'Mar 25, 2021 @ 11:00:00.000';
@@ -74,3 +76,40 @@ export const setTimeFilter = (setEndTime = false, refresh = true) => {
   if (refresh) cy.get('.euiButton__text').contains('Refresh').click();
   cy.wait(delay);
 };
+
+// notebooks
+export const TEST_NOTEBOOK = 'Test Notebook';
+export const SAMPLE_URL = 'https://github.com/opensearch-project/sql/tree/main/sql-jdbc';
+export const MARKDOWN_TEXT = `%md
+# Heading 1
+
+#### List and links
+
+* 1
+* 2
+* [SQL JDBC](${SAMPLE_URL})
+
+---
+#### Code block
+* Explain SQL
+\`\`\`
+POST _plugins/_sql/_explain
+{
+  "query": "SELECT * FROM my-index LIMIT 50"
+}
+\`\`\`
+
+#### Table
+| a1 | b1 | c1 | d1 |
+|----|----|----|----|
+| a2 | b2 | c2 | d2 |
+| a3 | b3 | c3 | d3 |
+`
+
+export const SQL_QUERY_TEXT = `%sql
+select * from opensearch_dashboards_sample_data_flights limit 20
+`
+
+export const PPL_QUERY_TEXT = `%ppl
+source=opensearch_dashboards_sample_data_flights
+`

common/constants/notebooks.ts

@@ -0,0 +1,29 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+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/dashboards/notebooks/';
+
+export const zeppelinURL = 'http://localhost:8080';
+
+export const wreckOptions = {
+  baseUrl: zeppelinURL,
+  headers: { 'Content-Type': 'application/json' },
+};
+
+const BASE_NOTEBOOKS_URI = '/_plugins/_notebooks';
+export const OPENSEARCH_NOTEBOOKS_API = {
+  GET_NOTEBOOKS: `${BASE_NOTEBOOKS_URI}/notebooks`,
+  NOTEBOOK: `${BASE_NOTEBOOKS_URI}/notebook`,
+};

common/constants/shared.ts

@@ -19,6 +19,7 @@ export const DSL_MAPPING = '/indices.getFieldMapping';
 
 // Server route
 export const PPL_ENDPOINT = '/_plugins/_ppl';
+export const SQL_ENDPOINT = '/_plugins/_sql';
 export const DSL_ENDPOINT = '/_plugins/_dsl';
 
 export const observabilityID = 'observability';
@@ -35,4 +36,4 @@ const BASE_OBSERVABILITY_URI = '/_plugins/_observability';
 export const OPENSEARCH_PANELS_API = {
   GET_PANELS: `${BASE_OBSERVABILITY_URI}/panels`,
   PANEL: `${BASE_OBSERVABILITY_URI}/panel`,
-};
+};

common/types/notebooks.ts

@@ -0,0 +1,59 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import { RefObject } from 'react';
+import { DashboardStart } from "../../../../src/plugins/dashboard/public";
+import { NavigationPublicPluginStart } from "../../../../src/plugins/navigation/public";
+
+export interface NotebooksPluginSetup {
+  getGreeting: () => string;
+}
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface NotebooksPluginStart {}
+
+export interface optionsType {
+  baseUrl: string;
+  payload?: any;
+  headers?: any;
+  redirects?: number;
+  beforeRedirect?: any;
+  redirected?: any;
+  timeout?: number; // default: unlimited
+  maxBytes?: number; // default: unlimited
+  rejectUnauthorized?: boolean;
+  secureProtocol?: string; // The SSL method to use
+  ciphers?: string; // The TLS ciphers to support
+}
+
+export type ParaType = {
+  uniqueId: string;
+  isRunning: boolean;
+  inQueue: boolean;
+  isSelected: boolean;
+  isInputHidden: boolean;
+  isOutputHidden: boolean;
+  showAddPara: boolean;
+  isVizualisation: boolean;
+  vizObjectInput: string;
+  id: number;
+  inp: string;
+  lang: string;
+  editorLanguage: string;
+  typeOut: Array<string>;
+  out: any[];
+  isInputExpanded: boolean;
+  isOutputStale: boolean;
+  paraRef: RefObject<React.ReactElement>;
+  paraDivRef: RefObject<HTMLDivElement>;
+  visStartTime?: string;
+  visEndTime?: string;
+  visSavedObjId?: string;
+};

cypress.json

@@ -1,6 +1,7 @@
 {
   "baseUrl": "http://localhost:5601",
   "video": true,
+  "chromeWebSecurity": false,
   "fixturesFolder": ".cypress/fixtures",
   "integrationFolder": ".cypress/integration",
   "pluginsFile": ".cypress/plugins/index.js",

opensearch_dashboards.json

@@ -11,6 +11,7 @@
     "urlForwarding",
     "navigation",
     "uiActions",
+    "dashboard",
     "visualizations"
   ]
 }

package.json

@@ -15,9 +15,12 @@
     "@reduxjs/toolkit": "^1.6.1",
     "plotly.js-dist": "^2.2.0",
     "react-plotly.js": "^2.5.1",
+    "react-graph-vis": "^1.0.5",
+    "@cypress/skip-test": "^2.6.1",
+    "@nteract/outputs": "^3.0.11",
+    "@nteract/presentational-components": "^3.4.3",
     "@algolia/autocomplete-js": "^1.2.1",
-    "@algolia/autocomplete-theme-classic": "^1.2.1",
-    "react-graph-vis": "^1.0.5"
+    "@algolia/autocomplete-theme-classic": "^1.2.1"
   },
   "devDependencies": {
     "@types/enzyme-adapter-react-16": "^1.0.6",
@@ -26,6 +29,14 @@
     "cypress": "^5.0.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^6.8.0",
-    "jest-dom": "^4.0.0"
+    "jest-dom": "^4.0.0",
+    "performance-now": "^2.1.0"
+  },
+  "resolutions": {
+    "react-syntax-highlighter": "^15.4.3",
+    "prismjs": "^1.22.0",
+    "trim": "^1.0.0",
+    "lodash": "^4.17.21",
+    "glob-parent": "^5.1.2"
   }
 }

public/components/app.tsx

@@ -16,27 +16,30 @@ import { HashRouter, Route, Switch } from 'react-router-dom';
 import { CoreStart } from '../../../../src/core/public';
 import { observabilityTitle } from '../../common/constants/shared';
 import store from '../framework/redux/store';
+import { AppPluginStartDependencies } from '../types';
 import { Home as ApplicationAnalyticsHome } from './application_analytics/home';
 import { renderPageWithSidebar } from './common/side_nav';
-import { CustomPanelView } from './custom_panels/custom_panel_view';
 import { Home as CustomPanelsHome } from './custom_panels/home';
 import { Home as EventExplorerHome } from './explorer/home';
 import { LogExplorer } from './explorer/log_explorer';
+import { Main as NotebooksHome } from './notebooks/components/main';
 import { Home as TraceAnalyticsHome } from './trace_analytics/home';
 
 interface ObservabilityAppDeps {
   CoreStart: CoreStart;
-  pplService: any
-  dslService: any
+  DepsStart: AppPluginStartDependencies;
+  pplService: any;
+  dslService: any;
 }
 
 export const App = ({
   CoreStart,
+  DepsStart,
   pplService,
   dslService
 }: ObservabilityAppDeps) => {
 
-  const { chrome, http } = CoreStart;
+  const { chrome, http, notifications } = CoreStart;
   const parentBreadcrumb = {
     text: observabilityTitle,
     href: 'observability#/',
@@ -78,6 +81,21 @@ export const App = ({
                   />
                 )}
               />
+              <Route
+                path="/notebooks"
+                render={(props) => (
+                  <NotebooksHome
+                    {...props}
+                    DashboardContainerByValueRenderer={
+                      DepsStart.dashboard.DashboardContainerByValueRenderer
+                    }
+                    http={http}
+                    setBreadcrumbs={chrome.setBreadcrumbs}
+                    parentBreadcrumb={parentBreadcrumb}
+                    notifications={notifications}
+                  />
+                )}
+              />
               <Route
                 exact
                 path={['/explorer', '/explorer/home']}
@@ -92,7 +110,7 @@ export const App = ({
                   return renderPageWithSidebar(<EventExplorerHome />);
                 }}
               />
-              <Route 
+              <Route
                 path={['/operational_panels']}
                 render={(props) => {
                   chrome.setBreadcrumbs([parentBreadcrumb, customPanelBreadcrumb]);

public/components/common/side_nav.tsx

@@ -69,6 +69,11 @@ export const renderPageWithSidebar = (BodyComponent: React.ReactNode) => {
           name: 'Operational panels',
           id: 4,
           href: '#/operational_panels/',
+        },
+        {
+          name: 'Notebooks',
+          id: 5,
+          href: '#/notebooks',
         }
       ],
     },

public/components/index.tsx

@@ -11,21 +11,21 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { 
-  AppMountParameters,
-  CoreStart
-} from '../../../../src/core/public';
+import { AppMountParameters, CoreStart } from '../../../../src/core/public';
+import { AppPluginStartDependencies } from '../types';
 import { App } from './app';
 
 export const Observability = (
   CoreStart: CoreStart,
+  DepsStart: AppPluginStartDependencies,
   AppMountParameters: AppMountParameters,
   pplService: any,
   dslService: any
 ) => {
   ReactDOM.render(
     <App
       CoreStart={ CoreStart }
+      DepsStart={DepsStart} 
       pplService={ pplService }
       dslService ={ dslService }
     />,

public/components/notebooks/components/__test__/default_parser.test.tsx

@@ -0,0 +1,65 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+import { defaultParagraphParser } from '../helpers/default_parser';
+import {
+  sampleNotebook1,
+  sampleNotebook2,
+  sampleNotebook3,
+  sampleNotebook4,
+  sampleNotebook5,
+  sampleParsedParagraghs1,
+  sampleParsedParagraghs2,
+} from './sampleDefaultNotebooks';
+
+// Perfect schema
+describe('Testing default backend parser function with perfect schema', () => {
+  test('defaultParagraphParserTest1', (done) => {
+    const parsedParagraphs1 = defaultParagraphParser(sampleNotebook1.paragraphs);
+    const parsedParagraphs2 = defaultParagraphParser(sampleNotebook2.paragraphs);
+    const parsedParagraphs3 = defaultParagraphParser([]);
+    expect(parsedParagraphs1).toEqual(sampleParsedParagraghs1);
+    expect(parsedParagraphs2).toEqual(sampleParsedParagraghs2);
+    expect(parsedParagraphs3).toEqual([]);
+    done();
+  });
+});
+
+// Issue in schema
+describe('Testing default backend parser function with wrong schema', () => {
+  test('defaultParagraphParserTest2', (done) => {
+    expect(() => {
+      const parsedParagraphs1 = defaultParagraphParser(sampleNotebook3.paragraphs);
+    }).toThrow(Error);
+    expect(() => {
+      const parsedParagraphs2 = defaultParagraphParser(sampleNotebook4.paragraphs);
+    }).toThrow(Error);
+    expect(() => {
+      const parsedParagraphs3 = defaultParagraphParser(sampleNotebook5.paragraphs);
+    }).toThrow(Error);
+    done();
+  });
+});