Updates create accelerations flyout usage and side tree (#285)

* init use observability deps Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> * update side tree view Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> * update tests Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> * update release notes Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> * removes console.log Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> * allow refresh only after first load Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> * update snapshots Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> * revert version to 3.0 Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> * on umount stop loading Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> --------- Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
opensearch-project · Mar 20, 2024 · d168db7 · d168db7
1 parent 997c666
commit d168db7
Show file tree

Hide file tree

Showing 18 changed files with 3,849 additions and 7,716 deletions.
diff --git a/common/types/index.ts b/common/types/index.ts
@@ -96,6 +96,12 @@ export enum AsyncQueryStatus {
   Waiting = 'waiting',
 }
 
+export enum CachedDataSourceStatus {
+  Updated = 'Updated',
+  Failed = 'Failed',
+  Empty = 'Empty',
+}
+
 export type TreeItemType =
   | 'covering_index'
   | 'skipping_index'

diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
@@ -4,6 +4,6 @@
   "opensearchDashboardsVersion": "3.0.0",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["navigation", "opensearchDashboardsReact"],
-  "optionalPlugins": []
+  "requiredPlugins": ["navigation", "opensearchDashboardsReact", "opensearchDashboardsUtils"],
+  "optionalPlugins": ["observabilityDashboards"]
 }
diff --git a/package.json b/package.json
@@ -50,4 +50,4 @@
     "semver": "^7.5.2",
     "@cypress/request": "^3.0.0"
   }
-}
+}
diff --git a/public/components/Main/__snapshots__/main.test.tsx.snap b/public/components/Main/__snapshots__/main.test.tsx.snap
diff --git a/public/components/Main/main.test.tsx b/public/components/Main/main.test.tsx
@@ -23,6 +23,46 @@ import { Main } from './main';
 
 const setBreadcrumbsMock = jest.fn();
 
+jest.mock('../../dependencies/register_observability_dependencies', () => ({
+  getRenderAccelerationDetailsFlyout: jest.fn(() => jest.fn()),
+  getRenderCreateAccelerationFlyout: jest.fn(() => jest.fn()),
+  setRenderAccelerationDetailsFlyout: jest.fn(() => jest.fn()),
+  setRenderCreateAccelerationFlyout: jest.fn(() => jest.fn()),
+}));
+
+jest.mock('../../framework/catalog_cache_refs', () => ({
+  catalogCacheRefs: {
+    CatalogCacheManager: {
+      addOrUpdateAccelerationsByDataSource: () => ({
+        dbCache: { status: 'empty' },
+      }),
+      getOrCreateDataSource: () => ({
+        dsCache: { status: 'empty' },
+      }),
+    },
+    useLoadDatabasesToCache: () => ({
+      loadStatus: 'Scheduled',
+      startLoading: jest.fn(),
+      stopLoading: jest.fn(),
+    }),
+    useLoadTablesToCache: () => ({
+      loadStatus: 'Scheduled',
+      startLoading: jest.fn(),
+      stopLoading: jest.fn(),
+    }),
+    useLoadTableColumnsToCache: () => ({
+      loadStatus: 'Scheduled',
+      startLoading: jest.fn(),
+      stopLoading: jest.fn(),
+    }),
+    useLoadAccelerationsToCache: () => ({
+      loadStatus: 'Scheduled',
+      startLoading: jest.fn(),
+      stopLoading: jest.fn(),
+    }),
+  },
+}));
+
 describe('<Main /> spec', () => {
   it('renders the component', async () => {
     const client = httpClientMock;
@@ -45,9 +85,9 @@ describe('<Main /> spec', () => {
     const asyncTest = () => {
       fireEvent.click(pplButton);
     };
-    waitFor(()=>{
+    waitFor(() => {
       asyncTest();
-    })
+    });
     expect(document.body.children[0]).toMatchSnapshot();
   });
   it('renders the component and checks if Opensearch is selected', async () => {
@@ -68,7 +108,7 @@ describe('<Main /> spec', () => {
       <Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />
     );
     expect(getByText('OpenSearch')).toBeInTheDocument();
-    fireEvent.click(getByText('OpenSearch'))
+    fireEvent.click(getByText('OpenSearch'));
     await waitFor(() => {
       expect(getByText('glue_1')).toBeInTheDocument();
     });
@@ -81,9 +121,11 @@ describe('<Main /> spec', () => {
     const { getByText } = await render(
       <Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />
     );
-    expect(getByText('OpenSearch')).toBeInTheDocument();
-    fireEvent.click(getByText('OpenSearch'))
-    fireEvent.click(getByText('glue_1'))
+    await waitFor(() => {
+      expect(getByText('OpenSearch')).toBeInTheDocument();
+    });
+    fireEvent.click(getByText('OpenSearch'));
+    fireEvent.click(getByText('glue_1'));
     await waitFor(() => {
       expect(getByText('Sample Query')).toBeInTheDocument();
     });
@@ -100,7 +142,10 @@ describe('<Main /> spec', () => {
     const { getByText } = await render(
       <Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />
     );
-    expect(getByText('.kibana_1')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(getByText('.kibana_1')).toBeInTheDocument();
+    });
 
     expect(document.body.children[0]).toMatchSnapshot();
   });
@@ -217,4 +262,4 @@ describe('<Main /> spec', () => {
     await asyncTest();
     expect(document.body.children[0]).toMatchSnapshot();
   });
-});
+});
diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx
@@ -19,6 +19,7 @@ import {
   EuiText,
 } from '@elastic/eui';
 import { IHttpResponse } from 'angular';
+import { createBrowserHistory } from 'history';
 import _ from 'lodash';
 import React from 'react';
 import { ChromeBreadcrumb, CoreStart } from '../../../../../src/core/public';
@@ -39,7 +40,7 @@ import { QueryResults } from '../QueryResults/QueryResults';
 import { CreateButton } from '../SQLPage/CreateButton';
 import { DataSelect } from '../SQLPage/DataSelect';
 import { SQLPage } from '../SQLPage/SQLPage';
-import { TableView } from '../SQLPage/table_view';
+import { CatalogTree } from '../SQLPage/sql_catalog_tree/catalog_tree';
 
 interface ResponseData {
   ok: boolean;
@@ -230,6 +231,7 @@ export function getQueryResultsForTable(
 
 export class Main extends React.Component<MainProps, MainState> {
   httpClient: CoreStart['http'];
+  historyFromRedirection = createBrowserHistory();
 
   constructor(props: MainProps) {
     super(props);
@@ -759,6 +761,21 @@ export class Main extends React.Component<MainProps, MainState> {
     });
   }
 
+  checkHistoryState = () => {
+    if (!this.historyFromRedirection.location.state) return;
+
+    const { language, queryToRun }: any = this.historyFromRedirection.location.state;
+    if (language === 'sql') {
+      this.updateSQLQueries(queryToRun);
+
+      // Clear the state after use
+      this.historyFromRedirection.replace({
+        ...location,
+        state: null,
+      });
+    }
+  };
+
   handleDataSelect = (selectedItems: EuiComboBoxOptionOption[]) => {
     this.updateSQLQueries('');
     this.updatePPLQueries('');
@@ -769,6 +786,7 @@ export class Main extends React.Component<MainProps, MainState> {
     this.setState({
       selectedDatasource: selectedItems,
     });
+    this.checkHistoryState();
   };
 
   handleReloadTree = () => {
@@ -940,8 +958,7 @@ export class Main extends React.Component<MainProps, MainState> {
                   }}
                 >
                   <EuiFlexItem grow={false}>
-                    <TableView
-                      http={this.httpClient}
+                    <CatalogTree
                       selectedItems={this.state.selectedDatasource}
                       updateSQLQueries={this.updateSQLQueries}
                       refreshTree={this.state.refreshTree}

diff --git a/public/components/SQLPage/SQLPage.test.tsx b/public/components/SQLPage/SQLPage.test.tsx
@@ -8,6 +8,13 @@ import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { SQLPage } from './SQLPage';
 
+jest.mock('../../dependencies/register_observability_dependencies', () => ({
+  getRenderAccelerationDetailsFlyout: jest.fn(() => jest.fn()),
+  getRenderCreateAccelerationFlyout: jest.fn(() => jest.fn()),
+  setRenderAccelerationDetailsFlyout: jest.fn(() => jest.fn()),
+  setRenderCreateAccelerationFlyout: jest.fn(() => jest.fn()),
+}));
+
 describe('<SQLPage /> spec', () => {
   it('renders the component', () => {
     render(
@@ -53,4 +60,4 @@ describe('<SQLPage /> spec', () => {
     fireEvent.click(getByText('Explain'));
     expect(onTranslate).toHaveBeenCalledTimes(1);
   });
-});
+});
diff --git a/public/components/SQLPage/SQLPage.tsx b/public/components/SQLPage/SQLPage.tsx
@@ -24,8 +24,8 @@ import 'brace/mode/sql';
 import React from 'react';
 import { CoreStart } from '../../../../../src/core/public';
 import { SAMPLE_SQL_QUERY } from '../../../common/constants';
+import { getRenderCreateAccelerationFlyout } from '../../dependencies/register_observability_dependencies';
 import { ResponseDetail, TranslateResult } from '../Main/main';
-import { CreateAcceleration } from '../acceleration/create/create_acceleration';
 
 interface SQLPageProps {
   http: CoreStart['http'];
@@ -45,7 +45,7 @@ interface SQLPageState {
   sqlQuery: string;
   translation: string;
   isModalVisible: boolean;
-  flyoutComponent: JSX.Element;
+  queryToRun: string;
 }
 
 export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
@@ -55,31 +55,19 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
       sqlQuery: this.props.sqlQuery,
       translation: '',
       isModalVisible: false,
-      flyoutComponent: <></>,
+      queryToRun: '',
     };
   }
+  renderCreateAccelerationFlyout = getRenderCreateAccelerationFlyout();
 
   setIsModalVisible(visible: boolean): void {
     this.setState({
       isModalVisible: visible,
     });
   }
 
-  resetFlyout = () => {
-    this.setState({ flyoutComponent: <></> });
-  };
-
   setAccelerationFlyout = () => {
-    this.setState({
-      flyoutComponent: (
-        <CreateAcceleration
-          http={this.props.http}
-          selectedDatasource={this.props.selectedDatasource}
-          resetFlyout={this.resetFlyout}
-          updateQueries={this.props.updateSQLQueries}
-        />
-      ),
-    });
+    this.renderCreateAccelerationFlyout(this.props.selectedDatasource[0].label);
   };
 
   componentDidUpdate(prevProps: SQLPageProps) {
@@ -148,7 +136,7 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
         >
           <EuiSpacer size="s" />
           <EuiCodeEditor
-            data-test-subj='sqlCodeEditor'
+            data-test-subj="sqlCodeEditor"
             mode="sql"
             theme="textmate"
             width="100%"
@@ -167,7 +155,7 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
           <EuiFlexGroup justifyContent="spaceBetween">
             <EuiFlexItem>
               <EuiFlexGroup className="action-container" gutterSize="m">
-                <EuiFlexItem grow={false} >
+                <EuiFlexItem grow={false}>
                   <EuiButton
                     data-test-subj="sqlRunButton"
                     fill={true}
@@ -185,7 +173,11 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
                     this.props.onClear();
                   }}
                 >
-                  <EuiButton data-test-subj="sqlClearButton" className="sql-editor-button" isDisabled={this.props.asyncLoading}>
+                  <EuiButton
+                    data-test-subj="sqlClearButton"
+                    className="sql-editor-button"
+                    isDisabled={this.props.asyncLoading}
+                  >
                     Clear
                   </EuiButton>
                 </EuiFlexItem>
@@ -220,7 +212,9 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
                 <EuiFlexItem grow={false}>
                   <EuiButton
                     className="sql-accelerate-button"
-                    onClick={this.setAccelerationFlyout}
+                    onClick={() =>
+                      this.renderCreateAccelerationFlyout(this.props.selectedDatasource[0].label)
+                    }
                     isDisabled={this.props.asyncLoading}
                   >
                     Accelerate Table
@@ -230,8 +224,7 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
           </EuiFlexGroup>
         </EuiPanel>
         {modal}
-        {this.state.flyoutComponent}
       </>
     );
   }
-}
+}
diff --git a/public/components/SQLPage/sql_catalog_tree/catalog_tree.tsx b/public/components/SQLPage/sql_catalog_tree/catalog_tree.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiComboBoxOptionOption } from '@elastic/eui';
+import React from 'react';
+import { OSTree } from './os_tree';
+import { S3Tree } from './s3_tree';
+
+interface CatalogTreeProps {
+  selectedItems: EuiComboBoxOptionOption[];
+  updateSQLQueries: (query: string) => void;
+  refreshTree: boolean;
+}
+
+export const CatalogTree = ({ selectedItems, updateSQLQueries, refreshTree }: CatalogTreeProps) => {
+  return (
+    <>
+      {selectedItems !== undefined && selectedItems[0].label === 'OpenSearch' ? (
+        <OSTree
+          selectedItems={selectedItems}
+          updateSQLQueries={updateSQLQueries}
+          refreshTree={refreshTree}
+        />
+      ) : (
+        <S3Tree
+          dataSource={selectedItems[0].label}
+          updateSQLQueries={updateSQLQueries}
+          refreshTree={refreshTree}
+        />
+      )}
+    </>
+  );
+};