From 5d8614c3a3ae91414326f2013675ef9453177bd9 Mon Sep 17 00:00:00 2001 From: Eric Date: Wed, 8 Nov 2023 21:09:07 +0000 Subject: [PATCH] Revert "Added changes for making tree view persistent, made changes for bugs for loading screen (#153) (#167)" This reverts commit 2269d1de55873286a5d1821fc0f220cd967a7aff. --- common/constants/index.ts | 12 +- common/types/index.ts | 10 +- .../Main/__snapshots__/main.test.tsx.snap | 272 +---- public/components/Main/main.tsx | 35 +- public/components/SQLPage/TableView.tsx | 266 +++++ .../__snapshots__/table_view.test.tsx.snap | 1016 ----------------- public/components/SQLPage/table_view.test.tsx | 57 - public/components/SQLPage/table_view.tsx | 405 ------- test/mocks/mockData.ts | 16 - 9 files changed, 301 insertions(+), 1788 deletions(-) create mode 100644 public/components/SQLPage/TableView.tsx delete mode 100644 public/components/SQLPage/__snapshots__/table_view.test.tsx.snap delete mode 100644 public/components/SQLPage/table_view.test.tsx delete mode 100644 public/components/SQLPage/table_view.tsx diff --git a/common/constants/index.ts b/common/constants/index.ts index db990084..ea25495a 100644 --- a/common/constants/index.ts +++ b/common/constants/index.ts @@ -10,14 +10,8 @@ export const OPENSEARCH_ACC_DOCUMENTATION_URL = export const ACC_INDEX_TYPE_DOCUMENTATION_URL = 'https://github.com/opensearch-project/opensearch-spark/blob/main/docs/index.md'; -export const TREE_ITEM_SKIPPING_INDEX_DEFAULT_NAME = `skipping_index`; -export const TREE_ITEM_COVERING_INDEX_DEFAULT_NAME = `covering_index`; -export const TREE_ITEM_MATERIALIZED_VIEW_DEFAULT_NAME = `materialized_view`; -export const TREE_ITEM_DATABASE_NAME_DEFAULT_NAME = `database`; -export const TREE_ITEM_TABLE_NAME_DEFAULT_NAME = `table`; -export const TREE_ITEM_LOAD_MATERIALIZED_BADGE_NAME = `Load Materialized View`; -export const TREE_ITEM_BADGE_NAME =`badge` -export const LOAD_OPENSEARCH_INDICES_QUERY = `SHOW tables LIKE '%';`; +export const SKIPPING_INDEX = `skipping_index`; +export const ON_LOAD_QUERY = `SHOW tables LIKE '%';`; export const SKIPPING_INDEX_QUERY = `CREATE SKIPPING INDEX ON myS3.logs_db.http_logs (status VALUE_SET) WITH ( @@ -90,5 +84,3 @@ export const ACCELERATION_INDEX_NAME_INFO = `All OpenSearch acceleration indices `; export const SIDEBAR_POLL_INTERVAL_MS = 5000; - -export const FETCH_OPENSEARCH_INDICES_PATH = '/api/sql_console/sqlquery' \ No newline at end of file diff --git a/common/types/index.ts b/common/types/index.ts index 5ed212c8..a941b29e 100644 --- a/common/types/index.ts +++ b/common/types/index.ts @@ -79,12 +79,4 @@ export interface CreateAccelerationForm { formErrors: FormErrorsType; } -export type AsyncQueryLoadingStatus = 'SUCCESS' | 'FAILED' | 'RUNNING' | 'SCHEDULED' | 'CANCELLED'; -export type TreeItemType = 'covering_index' | 'skipping_index' | 'table' | 'database' | 'materialized_view' | 'Load Materialized View' | 'badge' - -export interface TreeItem { - name: string; - type: TreeItemType; - isExpanded: boolean; - values?: TreeItem[]; -} +export type AsyncQueryLoadingStatus = 'SUCCESS' | 'FAILED' | 'RUNNING' | 'SCHEDULED' | 'CANCELLED'; \ No newline at end of file diff --git a/public/components/Main/__snapshots__/main.test.tsx.snap b/public/components/Main/__snapshots__/main.test.tsx.snap index 6d65fd66..baa291c8 100644 --- a/public/components/Main/__snapshots__/main.test.tsx.snap +++ b/public/components/Main/__snapshots__/main.test.tsx.snap @@ -193,7 +193,7 @@ exports[`
spec click clear button 1`] = ` >
spec click clear button 1`] = ` >
-
-
- -
-
-
-
+ />
@@ -266,11 +234,11 @@ exports[`
spec click clear button 1`] = `
-

- Error loading data -

+ Error loading Datasources +
@@ -747,7 +715,7 @@ exports[`
spec click run button, and response causes an error 1`] = ` >
spec click run button, and response causes an error 1`] = ` >
-
-
- -
-
-
-
+ />
@@ -820,11 +756,11 @@ exports[`
spec click run button, and response causes an error 1`] = `
-

- Error loading data -

+ Error loading Datasources +
@@ -1301,7 +1237,7 @@ exports[`
spec click run button, and response is not ok 1`] = ` >
spec click run button, and response is not ok 1`] = ` >
-
-
- -
-
-
-
+ />
@@ -1374,11 +1278,11 @@ exports[`
spec click run button, and response is not ok 1`] = `
-

- Error loading data -

+ Error loading Datasources +
@@ -1855,7 +1759,7 @@ exports[`
spec click run button, and response is ok 1`] = ` >
spec click run button, and response is ok 1`] = ` >
-
-
- -
-
-
-
+ />
@@ -2497,7 +2369,7 @@ exports[`
spec click run button, response fills null and missing values >
spec click run button, response fills null and missing values >
-
-
- -
-
-
-
+ />
@@ -3138,7 +2978,7 @@ exports[`
spec click translation button, and response is ok 1`] = ` >
spec click translation button, and response is ok 1`] = ` >
-
-
- -
-
-
-
+ />
@@ -3211,11 +3019,11 @@ exports[`
spec click translation button, and response is ok 1`] = `
-

- Error loading data -

+ Error loading Datasources +
@@ -3683,7 +3491,7 @@ exports[`
spec renders the component 1`] = ` >
spec renders the component 1`] = ` >
-
-
- -
-
-
-
+ />
diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx index 9cf36c94..7e8382d8 100644 --- a/public/components/Main/main.tsx +++ b/public/components/Main/main.tsx @@ -5,7 +5,6 @@ import { EuiButton, - EuiButtonIcon, EuiComboBoxOptionOption, EuiFlexGroup, EuiFlexItem, @@ -37,7 +36,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 { TableView } from '../SQLPage/TableView'; interface ResponseData { ok: boolean; @@ -112,7 +111,6 @@ interface MainState { asyncLoadingStatus: AsyncQueryLoadingStatus; asyncQueryError: string; asyncJobId: string; - refreshTree: boolean; isAccelerationFlyoutOpened: boolean; isCallOutVisible: boolean; } @@ -253,7 +251,6 @@ export class Main extends React.Component { asyncLoadingStatus: 'SUCCESS', asyncQueryError: '', asyncJobId: '', - refreshTree: false, isAccelerationFlyoutOpened: false, isCallOutVisible: false, }; @@ -817,12 +814,6 @@ export class Main extends React.Component { }); }; - handleReloadTree = () => { - this.setState({ - refreshTree: !this.state.refreshTree, - }); - }; - setIsAccelerationFlyoutOpened = (value: boolean) => { this.setState({ isAccelerationFlyoutOpened: value, @@ -951,34 +942,20 @@ export class Main extends React.Component { {this.state.language === 'SQL' && ( - + - - - - - - - - + diff --git a/public/components/SQLPage/TableView.tsx b/public/components/SQLPage/TableView.tsx new file mode 100644 index 00000000..017fbf19 --- /dev/null +++ b/public/components/SQLPage/TableView.tsx @@ -0,0 +1,266 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { + EuiComboBoxOptionOption, + EuiEmptyPrompt, + EuiFlexGroup, + EuiFlexItem, + EuiIcon, + EuiLoadingSpinner, + EuiText, + EuiToolTip, + EuiTreeView, +} from '@elastic/eui'; +import _ from 'lodash'; +import React, { useEffect, useState } from 'react'; +import { CoreStart } from '../../../../../src/core/public'; +import { ON_LOAD_QUERY, SKIPPING_INDEX } from '../../../common/constants'; +import { AccelerationIndexFlyout } from './acceleration_index_flyout'; +import { getJobId, pollQueryStatus } from './utils'; + +interface CustomView { + http: CoreStart['http']; + selectedItems: EuiComboBoxOptionOption[]; + updateSQLQueries: (query: string) => void; +} + +export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView) => { + const [tablenames, setTablenames] = useState([]); + const [selectedNode, setSelectedNode] = useState(null); + const [childData, setChildData] = useState([]); + const [selectedChildNode, setSelectedChildNode] = useState(null); + const [indexData, setIndexedData] = useState([]); + const [isLoading, setIsLoading] = useState(false); + const [indexFlyout, setIndexFlyout] = useState(<>); + const [childLoadingStates, setChildLoadingStates] = useState<{ [key: string]: boolean }>({}); + const [tableLoadingStates, setTableLoadingStates] = useState<{ [key: string]: boolean }>({}); + + let indiciesData: string[] = []; + + const resetFlyout = () => { + setIndexFlyout(<>); + }; + + const handleAccelerationIndexClick = ( + dataSource: string, + database: string, + dataTable: string, + indexName: string + ) => { + setIndexFlyout( + + ); + }; + + const get_async_query_results = (id, http, callback) => { + pollQueryStatus(id, http, callback); + }; + + const getSidebarContent = () => { + if (selectedItems[0].label === 'OpenSearch') { + setTablenames([]); + const query = { query: ON_LOAD_QUERY }; + http + .post(`/api/sql_console/sqlquery`, { + body: JSON.stringify(query), + }) + .then((res) => { + const responseObj = res.data.resp ? JSON.parse(res.data.resp) : ''; + const datarows: any[][] = _.get(responseObj, 'datarows'); + const fields = datarows.map((data) => { + return data[2]; + }); + setTablenames(fields); + }) + .catch((err) => { + console.error(err); + }); + } else { + setIsLoading(true); + setTablenames([]); + const query = { + lang: 'sql', + query: `SHOW SCHEMAS IN ${selectedItems[0]['label']}`, + datasource: selectedItems[0]['label'], + }; + getJobId(query, http, (id) => { + get_async_query_results(id, http, (data) => { + setTablenames(data); + setIsLoading(false); + }); + }); + } + }; + + useEffect(() => { + setIsLoading(false); + getSidebarContent(); + }, [selectedItems]); + + const handleNodeClick = (nodeLabel: string) => { + setSelectedNode(nodeLabel); + const query = { + lang: 'sql', + query: `SHOW TABLES IN ${selectedItems[0]['label']}.${nodeLabel}`, + datasource: selectedItems[0]['label'], + }; + setTableLoadingStates((prevState) => ({ + ...prevState, + [nodeLabel]: true, + })); + getJobId(query, http, (id) => { + get_async_query_results(id, http, (data) => { + data = data.map((subArray) => subArray[1]); + setChildData(data); + + setTableLoadingStates((prevState) => ({ + ...prevState, + [nodeLabel]: false, + })); + }); + }); + }; + + const callCoverQuery = (nodeLabel1: string) => { + const coverQuery = { + lang: 'sql', + query: `SHOW INDEX ON ${selectedItems[0]['label']}.${selectedNode}.${nodeLabel1}`, + datasource: selectedItems[0]['label'], + }; + getJobId(coverQuery, http, (id) => { + get_async_query_results(id, http, (data) => { + const res = [].concat(data); + const final = indiciesData.concat(...res); + setIndexedData(final); + setChildLoadingStates((prevState) => ({ + ...prevState, + [nodeLabel1]: false, + })); + }); + }); + }; + const handleChildClick = (nodeLabel1: string) => { + setSelectedChildNode(nodeLabel1); + const skipQuery = { + lang: 'sql', + query: `DESC SKIPPING INDEX ON ${selectedItems[0]['label']}.${selectedNode}.${nodeLabel1}`, + datasource: selectedItems[0]['label'], + }; + setChildLoadingStates((prevState) => ({ + ...prevState, + [nodeLabel1]: true, + })); + + getJobId(skipQuery, http, (id) => { + get_async_query_results(id, http, (data) => { + if (data.length > 0) { + indiciesData.push(SKIPPING_INDEX); + } + callCoverQuery(nodeLabel1); + }); + }); + }; + + const treeData = tablenames.map((database, index) => ({ + label: ( +
+ + {_.truncate(database, { length: 50 })} + {' '} + {tableLoadingStates[database] && } +
+ ), + icon: , + id: 'element_' + index, + callback: () => { + setChildData([]); + selectedItems[0].label !== 'OpenSearch' && handleNodeClick(database); + }, + isSelectable: true, + isExpanded: true, + children: + selectedNode === database + ? childData.map((table) => ({ + label: ( +
+ + {_.truncate(table, { length: 50 })} + {' '} + {childLoadingStates[table] && } +
+ ), + id: `${database}_${table}`, + icon: , + callback: () => { + setIndexedData([]); + handleChildClick(table); + setChildLoadingStates((prevState) => ({ + ...prevState, + [selectedChildNode]: false, + })); + }, + sSelectable: true, + isExpanded: true, + children: + selectedChildNode === table + ? indexData.map((indexChild) => ({ + label: ( +
+ + {_.truncate(indexChild, { length: 50 })} + +
+ ), + id: `${table}_${indexChild}`, + icon: , + callback: () => + handleAccelerationIndexClick( + selectedItems[0].label, + database, + table, + indexChild + ), + })) + : undefined, + })) + : undefined, + })); + + return ( + <> + + {isLoading ? ( + + Loading databases + + + + + ) : treeData.length > 0 ? ( + + + + ) : ( + + Error loading Datasources} + /> + + )} + {indexFlyout} + + + ); +}; diff --git a/public/components/SQLPage/__snapshots__/table_view.test.tsx.snap b/public/components/SQLPage/__snapshots__/table_view.test.tsx.snap deleted file mode 100644 index 6b8be8c2..00000000 --- a/public/components/SQLPage/__snapshots__/table_view.test.tsx.snap +++ /dev/null @@ -1,1016 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Render databases in tree fetches and displays database nodes when datasource is s3 1`] = ` -
-
-
-
- -
-

- Error loading data -

-
-
-
-
-`; - -exports[`Render databases in tree fetches and displays indicies when datasource is OpenSearch 1`] = ` -
-
-
-
-

- You can quickly navigate this list using arrow keys. -

-
    -
  • - -
    -
    • -
  • - -
    -
    • -
  • - -
    -
    • -
  • - -
    -
    • -
  • - -
    -
    • -
  • - -
    -
    • -
  • - -
    -
    • -
  • - -
    -
    • -
  • - -
    -
    • -
  • - -
    -
    • -
  • - -
    -
    • -
  • - -
    -
    • -
  • - -
    -
    • -
  • - -
    -
    • -
  • - -
    -
    • -
  • - -
    -
    • -
  • - -
    -
    • -
  • - -
    -
    • -
  • - -
    -
    • -
  • - -
    -
    • -
  • - -
    -
    • -
-
-
-
-
-`; diff --git a/public/components/SQLPage/table_view.test.tsx b/public/components/SQLPage/table_view.test.tsx deleted file mode 100644 index 3f602918..00000000 --- a/public/components/SQLPage/table_view.test.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import '@testing-library/jest-dom'; -import React from 'react'; -import { httpClientMock } from '../../../test/mocks'; - -import '@testing-library/jest-dom/extend-expect'; -import { render, waitFor } from '@testing-library/react'; -import { HttpResponse } from '../../../../../src/core/public'; -import { mockDatabaseQuery, mockJobId, mockOpenSearchIndicies } from '../../../test/mocks/mockData'; -import { TableView } from './table_view'; - -describe('Render databases in tree', () => { - it('fetches and displays indicies when datasource is OpenSearch', async () => { - const client = httpClientMock; - client.post = jest.fn(() => { - return (Promise.resolve(mockOpenSearchIndicies) as unknown) as HttpResponse; - }); - - const asyncTest = () => { - render( - {}} - refreshTree={false} - /> - ); - }; - await asyncTest(); - expect(document.body.children[0]).toMatchSnapshot(); - }); - it('fetches and displays database nodes when datasource is s3', async () => { - const client = httpClientMock; - client.post = jest.fn(() => { - return (Promise.resolve(mockJobId) as unknown) as HttpResponse; - }); - client.get = jest.fn(() => { - return (Promise.resolve(mockDatabaseQuery) as unknown) as HttpResponse; - }); - - const { getByText } = render( - {}} - refreshTree={false} - /> - ); - await waitFor(() => { - expect( - getByText( - 'Loading can take more than 30s. Queries can be made after the data has loaded. Any queries run before the data is loaded will be queued' - ) - ).toBeInTheDocument(); - }); - expect(document.body.children[0]).toMatchSnapshot(); - }); -}); diff --git a/public/components/SQLPage/table_view.tsx b/public/components/SQLPage/table_view.tsx deleted file mode 100644 index eb2a44bf..00000000 --- a/public/components/SQLPage/table_view.tsx +++ /dev/null @@ -1,405 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import { - EuiBadge, - EuiComboBoxOptionOption, - EuiEmptyPrompt, - EuiFlexGroup, - EuiFlexItem, - EuiIcon, - EuiLoadingSpinner, - EuiText, - EuiToolTip, - EuiTreeView, -} from '@elastic/eui'; -import { TreeItem, TreeItemType } from 'common/types'; -import _ from 'lodash'; -import React, { useEffect, useState } from 'react'; -import { CoreStart } from '../../../../../src/core/public'; -import { - FETCH_OPENSEARCH_INDICES_PATH, - LOAD_OPENSEARCH_INDICES_QUERY, - TREE_ITEM_BADGE_NAME, - TREE_ITEM_COVERING_INDEX_DEFAULT_NAME, - TREE_ITEM_DATABASE_NAME_DEFAULT_NAME, - TREE_ITEM_LOAD_MATERIALIZED_BADGE_NAME, - TREE_ITEM_MATERIALIZED_VIEW_DEFAULT_NAME, - TREE_ITEM_SKIPPING_INDEX_DEFAULT_NAME, - TREE_ITEM_TABLE_NAME_DEFAULT_NAME, -} from '../../../common/constants'; -import { AccelerationIndexFlyout } from './acceleration_index_flyout'; -import { getJobId, pollQueryStatus } from './utils'; - -interface CustomView { - http: CoreStart['http']; - selectedItems: EuiComboBoxOptionOption[]; - updateSQLQueries: (query: string) => void; - refreshTree: boolean; -} - -export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }: CustomView) => { - const [tableNames, setTableNames] = useState([]); - const [selectedDatabase, setSelectedDatabase] = useState(''); - const [selectedTable, setSelectedTable] = useState(null); - const [isLoading, setIsLoading] = useState(false); - const [indexFlyout, setIndexFlyout] = useState(<>); - const [treeData, setTreeData] = useState([]); - - const resetFlyout = () => { - setIndexFlyout(<>); - }; - - const handleAccelerationIndexClick = ( - dataSource: string, - database: string, - dataTable: string, - indexName: string - ) => { - setIndexFlyout( - - ); - }; - - function loadTreeItem(elements: string[], type: TreeItemType): TreeItem[] { - return elements.map((element) => { - let treeItem: TreeItem = { - name: element, - type: type, - isExpanded: true, - }; - - if ( - type != TREE_ITEM_COVERING_INDEX_DEFAULT_NAME && - type != TREE_ITEM_SKIPPING_INDEX_DEFAULT_NAME - ) { - treeItem.values = []; - } - return treeItem; - }); - } - - const get_async_query_results = (id, http, callback) => { - pollQueryStatus(id, http, callback); - }; - - const getSidebarContent = () => { - if (selectedItems[0].label === 'OpenSearch') { - setTableNames([]); - const query = { query: LOAD_OPENSEARCH_INDICES_QUERY }; - http - .post(FETCH_OPENSEARCH_INDICES_PATH, { - body: JSON.stringify(query), - }) - .then((res) => { - const responseObj = res.data.resp ? JSON.parse(res.data.resp) : {}; - const dataRows: any[][] = _.get(responseObj, 'datarows'); - const fields = dataRows.map((data) => { - return data[2]; - }); - setTableNames(fields); - }) - .catch((err) => { - console.error(err); - }); - } else { - setIsLoading(true); - setTableNames([]); - const query = { - lang: 'sql', - query: `SHOW SCHEMAS IN ${selectedItems[0]['label']}`, - datasource: selectedItems[0]['label'], - }; - getJobId(query, http, (id) => { - get_async_query_results(id, http, (data) => { - data = [].concat(...data); - setTreeData(loadTreeItem(data, TREE_ITEM_DATABASE_NAME_DEFAULT_NAME)); - setIsLoading(false); - }); - }); - } - }; - - useEffect(() => { - setIsLoading(false); - getSidebarContent(); - }, [selectedItems, refreshTree]); - - const handleDatabaseClick = (databaseName: string) => { - setSelectedDatabase(databaseName); - setIsLoading(true); - const query = { - lang: 'sql', - query: `SHOW TABLES IN ${selectedItems[0]['label']}.${databaseName}`, - datasource: selectedItems[0]['label'], - }; - getJobId(query, http, (id) => { - get_async_query_results(id, http, (data) => { - data = data.map((subArray) => subArray[1]); - let values = loadTreeItem(data, TREE_ITEM_TABLE_NAME_DEFAULT_NAME); - let mvObj = loadTreeItem( - [TREE_ITEM_LOAD_MATERIALIZED_BADGE_NAME], - TREE_ITEM_LOAD_MATERIALIZED_BADGE_NAME - ); - values = [...values, ...mvObj]; - setTreeData((prevTreeData) => { - return prevTreeData.map((database) => { - if (database.name === databaseName) { - return { ...database, values: values }; - } - return database; - }); - }); - setIsLoading(false); - }); - }); - }; - - const loadCoveringIndex = (tableName: string) => { - const coverQuery = { - lang: 'sql', - query: `SHOW INDEX ON ${selectedItems[0]['label']}.${selectedDatabase}.${tableName}`, - datasource: selectedItems[0]['label'], - }; - getJobId(coverQuery, http, (id) => { - get_async_query_results(id, http, (data) => { - const res = [].concat(data); - let coverIndexObj = loadTreeItem(res, TREE_ITEM_COVERING_INDEX_DEFAULT_NAME); - setTreeData((prevTreeData) => { - return prevTreeData.map((database) => { - if (database.name === selectedDatabase) { - return { - ...database, - values: database.values?.map((table) => { - if (table.name === tableName) { - return { - ...table, - values: table.values?.concat(...coverIndexObj), - }; - } - return table; - }), - }; - } - return database; - }); - }); - setIsLoading(false); - }); - }); - }; - - const handleButtonClick = (e: MouseEvent, tableName: string) => { - e.stopPropagation(); - setSelectedTable(tableName); - setIsLoading(true); - const materializedViewQuery = { - lang: 'sql', - query: `SHOW MATERIALIZED VIEW IN ${selectedItems[0]['label']}.${selectedDatabase}`, - datasource: selectedItems[0]['label'], - }; - getJobId(materializedViewQuery, http, (id) => { - get_async_query_results(id, http, (data) => { - data = data.map((subArray) => subArray[1]); - let values = loadTreeItem(data, TREE_ITEM_MATERIALIZED_VIEW_DEFAULT_NAME); - if (values.length === 0) { - values = [ - { name: 'No Materialized View', type: TREE_ITEM_BADGE_NAME, isExpanded: false }, - ]; - } - setTreeData((prevTreeData) => { - return prevTreeData.map((database) => { - if (database.name === selectedDatabase) { - const updatedValues = database.values?.filter( - (item) => item.type !== TREE_ITEM_LOAD_MATERIALIZED_BADGE_NAME - ); - return { ...database, values: updatedValues?.concat(...values) }; - } - return database; - }); - }); - setIsLoading(false); - }); - }); - }; - - const handleTableClick = (tableName: string) => { - setSelectedTable(tableName); - setIsLoading(true); - const skipQuery = { - lang: 'sql', - query: `DESC SKIPPING INDEX ON ${selectedItems[0]['label']}.${selectedDatabase}.${tableName}`, - datasource: selectedItems[0]['label'], - }; - getJobId(skipQuery, http, (id) => { - get_async_query_results(id, http, (data) => { - if (data.length > 0) { - setTreeData((prevTreeData) => { - return prevTreeData.map((database) => { - if (database.name === selectedDatabase) { - return { - ...database, - values: database.values?.map((table) => { - if (table.name === tableName) { - return { - ...table, - values: loadTreeItem( - [TREE_ITEM_SKIPPING_INDEX_DEFAULT_NAME], - TREE_ITEM_SKIPPING_INDEX_DEFAULT_NAME - ), - }; - } - return table; - }), - }; - } - return database; - }); - }); - } - loadCoveringIndex(tableName); - }); - }); - }; - - const createLabel = (node: TreeItem, parentName: string, index: number) => { - switch (node.type) { - case TREE_ITEM_BADGE_NAME: - return ( -
- - {_.truncate(node.name, { length: 50 })} - {' '} -
- ); - - case TREE_ITEM_LOAD_MATERIALIZED_BADGE_NAME: - return ( -
- - Load Materialized View - -
- ); - - default: - return ( -
- - {_.truncate(node.name, { length: 50 })} - {' '} -
- ); - } - }; - - const OpenSearchIndicesTree = tableNames.map((database, index) => ({ - label: ( -
- - {_.truncate(database, { length: 50 })} - {' '} -
- ), - icon: , - id: 'element_' + index, - isSelectable: false, - })); - - const treeDataDatabases = treeData.map((database, index) => ({ - label: createLabel(database, selectedItems[0].label, index), - icon: , - id: 'element_' + index, - callback: () => { - if (database.values?.length === 0 && selectedItems[0].label !== 'OpenSearch') { - handleDatabaseClick(database.name); - } - }, - isSelectable: true, - isExpanded: database.isExpanded, - children: database.values?.map((table, index) => ({ - label: createLabel(table, database.name, index), - id: `${database.name}_${table.name}`, - icon: - table.type === TREE_ITEM_LOAD_MATERIALIZED_BADGE_NAME ? ( - MV - ) : table.type === TREE_ITEM_BADGE_NAME ? null : ( - - ), - callback: () => { - if (table.type !== TREE_ITEM_LOAD_MATERIALIZED_BADGE_NAME && table.values?.length === 0) { - handleTableClick(table.name); - } - if (table.values?.length === 0) { - table.values = [{ name: 'No Indicies', type: TREE_ITEM_BADGE_NAME, isExpanded: false }]; - } - }, - isSelectable: true, - isExpanded: table.isExpanded, - children: table.values?.map((indexChild, index) => ({ - label: createLabel(indexChild, table.name, index), - id: `${database.name}_${table.name}_${indexChild.name}`, - icon: indexChild.type === TREE_ITEM_BADGE_NAME ? null : , - callback: () => { - if (indexChild.type !== TREE_ITEM_BADGE_NAME) { - handleAccelerationIndexClick( - selectedItems[0].label, - database.name, - table.name, - indexChild.name - ); - } - }, - })), - })), - })); - - return ( - <> - - {isLoading ? ( - - - - - Loading data - -
- - Loading can take more than 30s. Queries can be made after the data has loaded. Any - queries run before the data is loaded will be queued - -
- - - ) : OpenSearchIndicesTree.length > 0 || treeDataDatabases.length > 0 ? ( - - {selectedItems[0].label === 'OpenSearch' ? ( - - ) : ( - - )} - - ) : ( - - Error loading data} - /> - - )} - {indexFlyout} - - - ); -}; diff --git a/test/mocks/mockData.ts b/test/mocks/mockData.ts index fee838f0..65904eec 100644 --- a/test/mocks/mockData.ts +++ b/test/mocks/mockData.ts @@ -2349,20 +2349,4 @@ export const mockDatasourcesQuery = } } -export const mockJobId = { - data: { - ok: true, - resp: '{ "queryId": "00fe3fjpnfnn400q" }', - }, -}; - -export const mockOpenSearchIndicies = { - data: { - ok: true, - resp: - '{"schema":[{"name":"TABLE_CAT","type":"keyword"},{"name":"TABLE_SCHEM","type":"keyword"},{"name":"TABLE_NAME","type":"keyword"},{"name":"TABLE_TYPE","type":"keyword"},{"name":"REMARKS","type":"keyword"},{"name":"TYPE_CAT","type":"keyword"},{"name":"TYPE_SCHEM","type":"keyword"},{"name":"TYPE_NAME","type":"keyword"},{"name":"SELF_REFERENCING_COL_NAME","type":"keyword"},{"name":"REF_GENERATION","type":"keyword"}],"datarows":[["opensearch",null,".kibana_1","BASE TABLE",null,null,null,null,null,null],["opensearch",null,".kibana_2","BASE TABLE",null,null,null,null,null,null],["opensearch",null,".kibana_3","BASE TABLE",null,null,null,null,null,null],["opensearch",null,".opendistro-reports-definitions","BASE TABLE",null,null,null,null,null,null],["opensearch",null,".opendistro-reports-instances","BASE TABLE",null,null,null,null,null,null],["opensearch",null,".opensearch-observability","BASE TABLE",null,null,null,null,null,null],["opensearch",null,".plugins-ml-config","BASE TABLE",null,null,null,null,null,null],["opensearch",null,".ql-datasources","BASE TABLE",null,null,null,null,null,null],["opensearch",null,".ql-job-metadata","BASE TABLE",null,null,null,null,null,null],["opensearch",null,".query_execution_result","BASE TABLE",null,null,null,null,null,null],["opensearch",null,"flint_mys3_default_alb_logs_temp_10_test_index","BASE TABLE",null,null,null,null,null,null],["opensearch",null,"flint_mys3_default_alb_logs_temp_5_mys3_default_alb_logs_temp_5_index","BASE TABLE",null,null,null,null,null,null],["opensearch",null,"flint_mys3_default_elb_logs_regex_elb_logs_regex_index_index","BASE TABLE",null,null,null,null,null,null],["opensearch",null,"flint_mys3_default_empty_table_empty_table_index_index","BASE TABLE",null,null,null,null,null,null],["opensearch",null,"flint_mys3_default_http_logs_skipping_index","BASE TABLE",null,null,null,null,null,null],["opensearch",null,"flint_mys3_default_parquet_elb_logs_simple_parquet_index_simple_index","BASE TABLE",null,null,null,null,null,null],["opensearch",null,"opensearch_dashboards_sample_data_flights","BASE TABLE",null,null,null,null,null,null],["opensearch",null,"opensearch_dashboards_sample_data_logs","BASE TABLE",null,null,null,null,null,null],["opensearch",null,"ss4o_traces-elb-test","BASE TABLE",null,null,null,null,null,null],["opensearch",null,".flint-elv-mv","BASE TABLE",null,null,null,null,null,null],["opensearch",null,".kibana","BASE TABLE",null,null,null,null,null,null]],"total":21,"size":21,"status":200}', - }, -}; - -