From 1dd62401180b2422e487d38ead8f118eae0d6627 Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Tue, 3 Oct 2023 14:15:58 -0700 Subject: [PATCH 01/14] add acc index flyout Signed-off-by: Shenoy Pratik --- public/components/SQLPage/TableView.tsx | 155 +++++++----------- .../SQLPage/acceleration_index_flyout.tsx | 81 +++++++++ .../materialized_view/add_column_popover.tsx | 2 +- 3 files changed, 143 insertions(+), 95 deletions(-) create mode 100644 public/components/SQLPage/acceleration_index_flyout.tsx diff --git a/public/components/SQLPage/TableView.tsx b/public/components/SQLPage/TableView.tsx index 3f168ccd..d1d84736 100644 --- a/public/components/SQLPage/TableView.tsx +++ b/public/components/SQLPage/TableView.tsx @@ -8,139 +8,105 @@ import _ from 'lodash'; import React, { useEffect, useState } from 'react'; import { CoreStart } from '../../../../../src/core/public'; import { ON_LOAD_QUERY } from '../../../common/constants'; -import { getJobId, pollQueryStatus } from './utils'; +import { AccelerationIndexFlyout } from './acceleration_index_flyout'; interface CustomView { http: CoreStart['http']; - selectedItems: any[]; + dataConnection: string; } -export const TableView = ({ http, selectedItems }: CustomView) => { +export const TableView = ({ http, dataConnection }: 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 [indiciesData, setIndiciesData] = useState([]); - - const get_async_query_results = (id, http, callback) => { - pollQueryStatus(id, http, callback); - }; + const [indexFlyout, setIndexFlyout] = useState(<>); 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 { - 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); + 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); }); - } }; useEffect(() => { getSidebarContent(); - }, [selectedItems[0]['label']]); + }, []); const handleNodeClick = (nodeLabel: string) => { + // // will update after new query + + const newData = ['Child 1', 'Child 2', 'Child 3']; + setChildData(newData); setSelectedNode(nodeLabel); - const query = { - lang: 'sql', - query: `SHOW TABLES IN ${selectedItems[0]['label']}.${nodeLabel}`, - datasource: selectedItems[0]['label'], - }; - getJobId(query, http, (id) => { - get_async_query_results(id, http, (data) => { - data = data.map((subArray) => subArray[1]); - setChildData(data); - }); - }); }; - 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) => { - data = [].concat(...data) - indiciesData.push(data) - setIndexedData(indiciesData); - }); - }); - }; const handleChildClick = (nodeLabel1: string) => { + // will update after new query + + const newData1 = ['Child 4', 'Child 5', 'Child 6']; + setIndexedData(newData1); setSelectedChildNode(nodeLabel1); - const skipQuery = { - lang: 'sql', - query: `DESC SKIPPING INDEX ON ${selectedItems[0]['label']}.${selectedNode}.${nodeLabel1}`, - datasource: selectedItems[0]['label'], - }; - getJobId(skipQuery, http, (id) => { - get_async_query_results(id, http, (data) => { - if (data.length > 0) { - indiciesData.push('skip_index'); - callCoverQuery(nodeLabel1); - } - }); - }); }; - const treeData = tablenames.map((database, index) => ({ - label:
{database}
, + const resetFlyout = () => { + setIndexFlyout(<>); + }; + + const handleAcclerationIndexClick = ( + dataSource: string, + database: string, + dataTable: string, + indexChild: string + ) => { + setIndexFlyout( + + ); + }; + + const treeData = tablenames.map((element, index) => ({ + label: element, icon: , id: 'element_' + index, - callback: () => { - setChildData([]); - setIsLoading(true); - handleNodeClick(database); - }, + callback: () => handleNodeClick(element), isSelectable: true, isExpanded: true, children: - selectedNode === database - ? childData.map((table) => ({ - label:
{table}
, - id: `${database}_${table}`, + dataConnection === 'S3' && selectedNode === element + ? childData.map((child) => ({ + label: child, + id: `${element}_${child}`, icon: , - callback: () => { - setIndexedData([]); - handleChildClick(table); - }, + callback: () => handleChildClick(child), sSelectable: true, isExpanded: true, children: - selectedChildNode === table + selectedChildNode === child ? indexData.map((indexChild) => ({ label: indexChild, - id: `${table}_${indexChild}`, + id: `${child}_${indexChild}`, icon: , + callback: () => + handleAcclerationIndexClick('myGlue', element, child, indexChild), })) : undefined, })) @@ -158,6 +124,7 @@ export const TableView = ({ http, selectedItems }: CustomView) => { title={

Error loading Datasources

} /> )} + {indexFlyout} ); }; diff --git a/public/components/SQLPage/acceleration_index_flyout.tsx b/public/components/SQLPage/acceleration_index_flyout.tsx new file mode 100644 index 00000000..558d10cd --- /dev/null +++ b/public/components/SQLPage/acceleration_index_flyout.tsx @@ -0,0 +1,81 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { + EuiButtonEmpty, + EuiFlexGroup, + EuiFlexItem, + EuiFlyout, + EuiFlyoutBody, + EuiFlyoutFooter, + EuiFlyoutHeader, + EuiPageHeader, + EuiPageHeaderSection, + EuiSpacer, + EuiTitle, +} from '@elastic/eui'; +import React from 'react'; + +interface AccelerationIndexFlyoutProps { + dataSource: string; + database: string; + dataTable: string; + indexName: string; + resetFlyout: () => void; +} + +export const AccelerationIndexFlyout = ({ + dataSource, + database, + dataTable, + indexName, + resetFlyout, +}: AccelerationIndexFlyoutProps) => { + return ( + <> + + +
+ + + +

{indexName}

+ + + +
+ + + + +

Data Source

+ +

{dataSource}

+ + +

Database

+ +

{database}

+ + +

Table

+ +

{dataTable}

+ + + + + + + + Close + + + + + + + ); +}; diff --git a/public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx b/public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx index df6b276f..6d91c5b7 100644 --- a/public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx +++ b/public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx @@ -7,6 +7,7 @@ import { EuiButton, EuiButtonEmpty, EuiComboBox, + EuiComboBoxOptionOption, EuiFieldText, EuiFlexGroup, EuiFlexItem, @@ -17,7 +18,6 @@ import { EuiSpacer, htmlIdGenerator, } from '@elastic/eui'; -import { EuiComboBoxOptionOption } from '@opensearch-project/oui'; import producer from 'immer'; import React, { ChangeEvent, useEffect, useState } from 'react'; import { ACCELERATION_AGGREGRATION_FUNCTIONS } from '../../../../../common/constants'; From 31e5239d4c394830492d903d34a8a32bad3d0a8d Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Tue, 3 Oct 2023 14:26:14 -0700 Subject: [PATCH 02/14] remove [if not exists] from acc creation Signed-off-by: Shenoy Pratik --- .../query_visual_editor.test.tsx.snap | 28 ------------------- .../covering_index_builder.test.tsx.snap | 28 ------------------- .../covering_index/covering_index_builder.tsx | 3 -- .../materialized_view_builder.test.tsx.snap | 28 ------------------- .../materialized_view_builder.tsx | 4 --- .../visual_editors/query_builder.tsx | 8 +----- test/mocks/accelerationMock.ts | 10 ++----- 7 files changed, 3 insertions(+), 106 deletions(-) diff --git a/public/components/acceleration/visual_editors/__tests__/__snapshots__/query_visual_editor.test.tsx.snap b/public/components/acceleration/visual_editors/__tests__/__snapshots__/query_visual_editor.test.tsx.snap index 8659a435..3a281f7a 100644 --- a/public/components/acceleration/visual_editors/__tests__/__snapshots__/query_visual_editor.test.tsx.snap +++ b/public/components/acceleration/visual_editors/__tests__/__snapshots__/query_visual_editor.test.tsx.snap @@ -39,20 +39,6 @@ Array [ -
- - - [IF NOT EXISTS] - - - -
@@ -354,20 +340,6 @@ Array [ ..skipping , -
- - - [IF NOT EXISTS] - - - -
,
diff --git a/public/components/acceleration/visual_editors/covering_index/__tests__/__snapshots__/covering_index_builder.test.tsx.snap b/public/components/acceleration/visual_editors/covering_index/__tests__/__snapshots__/covering_index_builder.test.tsx.snap index 3d237119..24d90273 100644 --- a/public/components/acceleration/visual_editors/covering_index/__tests__/__snapshots__/covering_index_builder.test.tsx.snap +++ b/public/components/acceleration/visual_editors/covering_index/__tests__/__snapshots__/covering_index_builder.test.tsx.snap @@ -35,20 +35,6 @@ Array [
-
- - - [IF NOT EXISTS] - - - -
@@ -130,20 +116,6 @@ Array [
-
- - - [IF NOT EXISTS] - - - -
diff --git a/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx b/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx index 5968ca01..8d3c6019 100644 --- a/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx +++ b/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx @@ -58,9 +58,6 @@ export const CoveringIndexBuilder = ({ value={accelerationFormData.accelerationIndexName} /> - - - , -
- - - [IF NOT EXISTS] - - - -
,
@@ -184,20 +170,6 @@ Array [ ..skipping , -
- - - [IF NOT EXISTS] - - - -
,
diff --git a/public/components/acceleration/visual_editors/materialized_view/materialized_view_builder.tsx b/public/components/acceleration/visual_editors/materialized_view/materialized_view_builder.tsx index 124b451c..e9ef4319 100644 --- a/public/components/acceleration/visual_editors/materialized_view/materialized_view_builder.tsx +++ b/public/components/acceleration/visual_editors/materialized_view/materialized_view_builder.tsx @@ -74,10 +74,6 @@ export const MaterializedViewBuilder = ({ value={`${accelerationFormData.dataSource}.${accelerationFormData.database}.${accelerationFormData.accelerationIndexName}`} /> - - - - { const { dataSource, database, dataTable, skippingIndexQueryData } = accelerationformData; - const codeQuery = `CREATE SKIPPING INDEX -[IF NOT EXISTS] + const codeQuery = `CREATE SKIPPING INDEX ON ${dataSource}.${database}.${dataTable} FOR COLUMNS ( ${buildSkippingIndexColumns(skippingIndexQueryData)} @@ -94,7 +92,6 @@ const buildCoveringIndexColumns = (coveringIndexQueryData: string[]) => { * Covering Index create query example: * * CREATE INDEX index_name - * [IF NOT EXISTS] * ON datasource.database.table * FOR COLUMNS ( * field1, @@ -117,7 +114,6 @@ export const coveringIndexQueryBuilder = (accelerationformData: CreateAccelerati } = accelerationformData; const codeQuery = `CREATE INDEX ${accelerationIndexName} -[IF NOT EXISTS] ON ${dataSource}.${database}.${dataTable} FOR COLUMNS ( ${buildCoveringIndexColumns(coveringIndexQueryData)} @@ -148,7 +144,6 @@ const buildTumbleValue = (GroupByTumbleValue: GroupByTumbleType) => { * Materialized View create query example: * * CREATE MATERIALIZED VIEW datasource.database.index_name - * [IF NOT EXISTS] * AS SELECT * count(field) as counter, * count(*) as counter1, @@ -171,7 +166,6 @@ export const materializedQueryViewBuilder = (accelerationformData: CreateAcceler } = accelerationformData; const codeQuery = `CREATE MATERIALIZED VIEW ${dataSource}.${database}.${accelerationIndexName} -[IF NOT EXISTS] AS SELECT ${buildMaterializedViewColumns(materializedViewQueryData.columnsValues)} FROM ${dataSource}.${database}.${dataTable} diff --git a/test/mocks/accelerationMock.ts b/test/mocks/accelerationMock.ts index 154dbd22..085459de 100644 --- a/test/mocks/accelerationMock.ts +++ b/test/mocks/accelerationMock.ts @@ -201,8 +201,7 @@ export const skippingIndexBuilderMock1: CreateAccelerationForm = { checkpointLocation: 's3://test/', }; -export const skippingIndexBuilderMockResult1 = `CREATE SKIPPING INDEX -[IF NOT EXISTS] +export const skippingIndexBuilderMockResult1 = `CREATE SKIPPING INDEX ON datasource.database.table FOR COLUMNS ( field1 PARTITION, @@ -234,8 +233,7 @@ export const skippingIndexBuilderMock2: CreateAccelerationForm = { checkpointLocation: 's3://test/', }; -export const skippingIndexBuilderMockResult2 = `CREATE SKIPPING INDEX -[IF NOT EXISTS] +export const skippingIndexBuilderMockResult2 = `CREATE SKIPPING INDEX ON datasource.database.table FOR COLUMNS ( field1 PARTITION @@ -263,7 +261,6 @@ export const coveringIndexBuilderMock1: CreateAccelerationForm = { }; export const coveringIndexBuilderMockResult1 = `CREATE INDEX index_name -[IF NOT EXISTS] ON datasource.database.table FOR COLUMNS ( field1, @@ -290,7 +287,6 @@ export const coveringIndexBuilderMock2: CreateAccelerationForm = { }; export const coveringIndexBuilderMockResult2 = `CREATE INDEX index_name -[IF NOT EXISTS] ON datasource.database.table FOR COLUMNS ( field1 @@ -330,7 +326,6 @@ export const materializedViewBuilderMock1: CreateAccelerationForm = { }; export const materializedViewBuilderMockResult1 = `CREATE MATERIALIZED VIEW datasource.database.index_name -[IF NOT EXISTS] AS SELECT count(field) AS counter, count(*) AS counter1, @@ -366,7 +361,6 @@ export const materializedViewBuilderMock2: CreateAccelerationForm = { }; export const materializedViewBuilderMockResult2 = `CREATE MATERIALIZED VIEW datasource.database.index_name -[IF NOT EXISTS] AS SELECT count(field) FROM datasource.database.table From 92682063ab18a42008dc80d82e452cf8225f41ca Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Tue, 3 Oct 2023 22:35:53 -0700 Subject: [PATCH 03/14] merge tableview from main Signed-off-by: Shenoy Pratik --- public/components/SQLPage/TableView.tsx | 155 ++++++++++++++---------- 1 file changed, 94 insertions(+), 61 deletions(-) diff --git a/public/components/SQLPage/TableView.tsx b/public/components/SQLPage/TableView.tsx index d1d84736..f76120a0 100644 --- a/public/components/SQLPage/TableView.tsx +++ b/public/components/SQLPage/TableView.tsx @@ -8,105 +8,139 @@ import _ from 'lodash'; import React, { useEffect, useState } from 'react'; import { CoreStart } from '../../../../../src/core/public'; import { ON_LOAD_QUERY } from '../../../common/constants'; -import { AccelerationIndexFlyout } from './acceleration_index_flyout'; +import { getJobId, pollQueryStatus } from './utils'; interface CustomView { http: CoreStart['http']; - dataConnection: string; + selectedItems: any[]; } -export const TableView = ({ http, dataConnection }: CustomView) => { +export const TableView = ({ http, selectedItems }: CustomView) => { const [tablenames, setTablenames] = useState([]); const [selectedNode, setSelectedNode] = useState(null); const [childData, setChildData] = useState([]); const [selectedChildNode, setSelectedChildNode] = useState(null); const [indexData, setIndexedData] = useState([]); - const [indexFlyout, setIndexFlyout] = useState(<>); + const [isLoading, setIsLoading] = useState(false); + const [indiciesData, setIndiciesData] = useState([]); + + const get_async_query_results = (id, http, callback) => { + pollQueryStatus(id, http, callback); + }; const getSidebarContent = () => { - 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]; + 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 { + 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); }); - setTablenames(fields); - }) - .catch((err) => { - console.error(err); }); + } }; useEffect(() => { getSidebarContent(); - }, []); + }, [selectedItems[0]['label']]); const handleNodeClick = (nodeLabel: string) => { - // // will update after new query - - const newData = ['Child 1', 'Child 2', 'Child 3']; - setChildData(newData); setSelectedNode(nodeLabel); + const query = { + lang: 'sql', + query: `SHOW TABLES IN ${selectedItems[0]['label']}.${nodeLabel}`, + datasource: selectedItems[0]['label'], + }; + getJobId(query, http, (id) => { + get_async_query_results(id, http, (data) => { + data = data.map((subArray) => subArray[1]); + setChildData(data); + }); + }); }; + 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) => { + data = [].concat(...data); + indiciesData.push(data); + setIndexedData(indiciesData); + }); + }); + }; const handleChildClick = (nodeLabel1: string) => { - // will update after new query - - const newData1 = ['Child 4', 'Child 5', 'Child 6']; - setIndexedData(newData1); setSelectedChildNode(nodeLabel1); + const skipQuery = { + lang: 'sql', + query: `DESC SKIPPING INDEX ON ${selectedItems[0]['label']}.${selectedNode}.${nodeLabel1}`, + datasource: selectedItems[0]['label'], + }; + getJobId(skipQuery, http, (id) => { + get_async_query_results(id, http, (data) => { + if (data.length > 0) { + indiciesData.push('skip_index'); + callCoverQuery(nodeLabel1); + } + }); + }); }; - const resetFlyout = () => { - setIndexFlyout(<>); - }; - - const handleAcclerationIndexClick = ( - dataSource: string, - database: string, - dataTable: string, - indexChild: string - ) => { - setIndexFlyout( - - ); - }; - - const treeData = tablenames.map((element, index) => ({ - label: element, + const treeData = tablenames.map((database, index) => ({ + label:
{database}
, icon: , id: 'element_' + index, - callback: () => handleNodeClick(element), + callback: () => { + setChildData([]); + setIsLoading(true); + handleNodeClick(database); + }, isSelectable: true, isExpanded: true, children: - dataConnection === 'S3' && selectedNode === element - ? childData.map((child) => ({ - label: child, - id: `${element}_${child}`, + selectedNode === database + ? childData.map((table) => ({ + label:
{table}
, + id: `${database}_${table}`, icon: , - callback: () => handleChildClick(child), + callback: () => { + setIndexedData([]); + handleChildClick(table); + }, sSelectable: true, isExpanded: true, children: - selectedChildNode === child + selectedChildNode === table ? indexData.map((indexChild) => ({ label: indexChild, - id: `${child}_${indexChild}`, + id: `${table}_${indexChild}`, icon: , - callback: () => - handleAcclerationIndexClick('myGlue', element, child, indexChild), })) : undefined, })) @@ -124,7 +158,6 @@ export const TableView = ({ http, dataConnection }: CustomView) => { title={

Error loading Datasources

} /> )} - {indexFlyout} ); }; From c71e8347ba3b2a0f8923971427da4da7a13c94e4 Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Tue, 3 Oct 2023 23:20:06 -0700 Subject: [PATCH 04/14] adding acc index flyout Signed-off-by: Shenoy Pratik --- public/components/Main/main.tsx | 17 ++++-- public/components/SQLPage/TableView.tsx | 35 +++++++++++- .../SQLPage/acceleration_index_flyout.tsx | 55 ++++++++++++++++++- 3 files changed, 99 insertions(+), 8 deletions(-) diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx index f79c42db..2b9f5133 100644 --- a/public/components/Main/main.tsx +++ b/public/components/Main/main.tsx @@ -14,7 +14,7 @@ import { EuiPageSideBar, EuiPanel, EuiSpacer, - EuiText + EuiText, } from '@elastic/eui'; import { IHttpResponse } from 'angular'; import _ from 'lodash'; @@ -417,7 +417,11 @@ export class Main extends React.Component { queries.map((query: string) => this.httpClient .post(endpoint, { - body: JSON.stringify({ lang: language, query: query, datasource: this.state.selectedDatasource[0].label}), // TODO: dynamically datasource when accurate + body: JSON.stringify({ + lang: language, + query: query, + datasource: this.state.selectedDatasource[0].label, + }), // TODO: dynamically datasource when accurate }) .catch((error: any) => { this.setState({ @@ -797,7 +801,9 @@ export class Main extends React.Component { page = ( { page = ( { diff --git a/public/components/SQLPage/TableView.tsx b/public/components/SQLPage/TableView.tsx index f76120a0..72102159 100644 --- a/public/components/SQLPage/TableView.tsx +++ b/public/components/SQLPage/TableView.tsx @@ -8,14 +8,16 @@ import _ from 'lodash'; import React, { useEffect, useState } from 'react'; import { CoreStart } from '../../../../../src/core/public'; import { ON_LOAD_QUERY } from '../../../common/constants'; +import { AccelerationIndexFlyout } from './acceleration_index_flyout'; import { getJobId, pollQueryStatus } from './utils'; interface CustomView { http: CoreStart['http']; selectedItems: any[]; + updateSQLQueries: (query: string) => void; } -export const TableView = ({ http, selectedItems }: CustomView) => { +export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView) => { const [tablenames, setTablenames] = useState([]); const [selectedNode, setSelectedNode] = useState(null); const [childData, setChildData] = useState([]); @@ -23,6 +25,29 @@ export const TableView = ({ http, selectedItems }: CustomView) => { const [indexData, setIndexedData] = useState([]); const [isLoading, setIsLoading] = useState(false); const [indiciesData, setIndiciesData] = useState([]); + const [indexFlyout, setIndexFlyout] = useState(<>); + + 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); @@ -141,6 +166,13 @@ export const TableView = ({ http, selectedItems }: CustomView) => { label: indexChild, id: `${table}_${indexChild}`, icon: , + callback: () => + handleAccelerationIndexClick( + selectedItems[0].label, + database, + table, + indexChild + ), })) : undefined, })) @@ -158,6 +190,7 @@ export const TableView = ({ http, selectedItems }: CustomView) => { title={

Error loading Datasources

} /> )} + {indexFlyout} ); }; diff --git a/public/components/SQLPage/acceleration_index_flyout.tsx b/public/components/SQLPage/acceleration_index_flyout.tsx index 558d10cd..771b180b 100644 --- a/public/components/SQLPage/acceleration_index_flyout.tsx +++ b/public/components/SQLPage/acceleration_index_flyout.tsx @@ -4,6 +4,7 @@ */ import { + EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, @@ -11,6 +12,7 @@ import { EuiFlyoutBody, EuiFlyoutFooter, EuiFlyoutHeader, + EuiHorizontalRule, EuiPageHeader, EuiPageHeaderSection, EuiSpacer, @@ -24,6 +26,7 @@ interface AccelerationIndexFlyoutProps { dataTable: string; indexName: string; resetFlyout: () => void; + updateSQLQueries: (query: string) => void; } export const AccelerationIndexFlyout = ({ @@ -32,7 +35,24 @@ export const AccelerationIndexFlyout = ({ dataTable, indexName, resetFlyout, + updateSQLQueries, }: AccelerationIndexFlyoutProps) => { + const updateDescribeQuery = () => { + const describeQuery = + indexName === 'skipping_index' + ? `DESC SKIPPING INDEX ON ${dataSource}.${database}.${dataTable}` + : `DESC INDEX ${indexName} ON ${dataSource}.${database}.${dataTable}`; + updateSQLQueries(describeQuery); + }; + + const updateDropQuery = () => { + const describeQuery = + indexName === 'skipping_index' + ? `DROP SKIPPING INDEX ON ${dataSource}.${database}.${dataTable}` + : `DROP INDEX ${indexName} ON ${dataSource}.${database}.${dataTable}`; + updateSQLQueries(describeQuery); + }; + return ( <> @@ -48,23 +68,52 @@ export const AccelerationIndexFlyout = ({
+

Acceleration index Source

+ - +

Data Source

{dataSource}

 - +

Database

{database}

 - +

Table

{dataTable}

 +

Acceleration index destination

+ + + +

OpenSearch Index

+ +

+ {indexName === 'skipping_index' + ? `flint_${dataSource}_${database}_${dataTable}_skipping_index` + : `flint_${dataSource}_${database}_${dataTable}_${indexName}_index`} +

+ + +

Acceleration index actions

+ + + + + Describe Index + + + + + Drop Index + + + From 809287d09bd41f99d8a505b608483bf4c3978c64 Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Tue, 3 Oct 2023 23:31:29 -0700 Subject: [PATCH 05/14] add hash router Signed-off-by: Shenoy Pratik --- public/components/Main/main.tsx | 2 + public/components/app.tsx | 70 ++++++++++++++++++++++++--------- 2 files changed, 54 insertions(+), 18 deletions(-) diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx index 2b9f5133..22aef4f6 100644 --- a/public/components/Main/main.tsx +++ b/public/components/Main/main.tsx @@ -83,6 +83,8 @@ export type DataRow = { interface MainProps { httpClient: CoreStart['http']; setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void; + isAccelerationFlyoutOpen: boolean; + urlDataSource: string; } interface MainState { diff --git a/public/components/app.tsx b/public/components/app.tsx index 44f09b5f..a2f961eb 100644 --- a/public/components/app.tsx +++ b/public/components/app.tsx @@ -3,10 +3,9 @@ * SPDX-License-Identifier: Apache-2.0 */ - -import React from 'react'; import { I18nProvider } from '@osd/i18n/react'; -import { BrowserRouter as Router, Route } from 'react-router-dom'; +import React from 'react'; +import { HashRouter, Route, Switch } from 'react-router-dom'; import { EuiPage, EuiPageBody } from '@elastic/eui'; @@ -23,29 +22,64 @@ interface WorkbenchAppDeps { chrome: CoreStart['chrome']; } -const onChange = () => {}; - -export const WorkbenchApp = ({ basename, notifications, http, navigation, chrome }: WorkbenchAppDeps) => { +export const WorkbenchApp = ({ + basename, + notifications, + http, + navigation, + chrome, +}: WorkbenchAppDeps) => { return ( - +
- -
- } - /> + + ( +
+ )} + /> + ( +
+ )} + /> + ( +
+ )} + /> +
- + ); }; From b561bd9cea241941876bfb1be3e1c0c6dd991155 Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Wed, 4 Oct 2023 00:22:33 -0700 Subject: [PATCH 06/14] hide materialized view index type Signed-off-by: Shenoy Pratik --- common/constants/index.ts | 2 +- public/components/SQLPage/SQLPage.tsx | 5 +++-- public/components/SQLPage/acceleration_index_flyout.tsx | 4 +++- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/common/constants/index.ts b/common/constants/index.ts index 8533039d..6a796871 100644 --- a/common/constants/index.ts +++ b/common/constants/index.ts @@ -13,7 +13,7 @@ export const ON_LOAD_QUERY = `SHOW tables LIKE '%';`; export const ACCELERATION_INDEX_TYPES = [ { label: 'Skipping Index', value: 'skipping' }, { label: 'Covering Index', value: 'covering' }, - { label: 'Materialized View', value: 'materialized' }, + // { label: 'Materialized View', value: 'materialized' }, Hidden Option -> Until opensearch-spark feature is ready ]; export const ACCELERATION_AGGREGRATION_FUNCTIONS = [ diff --git a/public/components/SQLPage/SQLPage.tsx b/public/components/SQLPage/SQLPage.tsx index b0f1eb5c..3cf16fb6 100644 --- a/public/components/SQLPage/SQLPage.tsx +++ b/public/components/SQLPage/SQLPage.tsx @@ -7,6 +7,7 @@ import { EuiButton, EuiCodeBlock, EuiCodeEditor, + EuiComboBoxOptionOption, EuiFlexGroup, EuiFlexItem, EuiModal, @@ -32,7 +33,7 @@ interface SQLPageProps { updateSQLQueries: (query: string) => void; sqlQuery: string; sqlTranslations: ResponseDetail[]; - selectedDatasource: string; + selectedDatasource: EuiComboBoxOptionOption[]; asyncLoading: boolean; } @@ -170,7 +171,7 @@ export class SQLPage extends React.Component { - {this.props.selectedDatasource === 'S3' && ( + {this.props.selectedDatasource[0].label !== 'OpenSearch' && ( { @@ -51,6 +52,7 @@ export const AccelerationIndexFlyout = ({ ? `DROP SKIPPING INDEX ON ${dataSource}.${database}.${dataTable}` : `DROP INDEX ${indexName} ON ${dataSource}.${database}.${dataTable}`; updateSQLQueries(describeQuery); + resetFlyout(); }; return ( @@ -109,7 +111,7 @@ export const AccelerationIndexFlyout = ({ - + Drop Index From e4e0a2edec438b57fa8713a33257eb92ca4e0ce2 Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Wed, 4 Oct 2023 00:24:53 -0700 Subject: [PATCH 07/14] update snapshots Signed-off-by: Shenoy Pratik --- public/components/SQLPage/SQLPage.tsx | 23 ++++++++++--------- .../__snapshots__/SQLPage.test.tsx.snap | 1 + 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/public/components/SQLPage/SQLPage.tsx b/public/components/SQLPage/SQLPage.tsx index 3cf16fb6..8d222f71 100644 --- a/public/components/SQLPage/SQLPage.tsx +++ b/public/components/SQLPage/SQLPage.tsx @@ -171,17 +171,18 @@ export class SQLPage extends React.Component { - {this.props.selectedDatasource[0].label !== 'OpenSearch' && ( - - - Accelerate Table - - - )} + {this.props.selectedDatasource && + this.props.selectedDatasource[0].label !== 'OpenSearch' && ( + + + Accelerate Table + + + )} {modal} diff --git a/public/components/SQLPage/__snapshots__/SQLPage.test.tsx.snap b/public/components/SQLPage/__snapshots__/SQLPage.test.tsx.snap index 96850ed5..603e920f 100644 --- a/public/components/SQLPage/__snapshots__/SQLPage.test.tsx.snap +++ b/public/components/SQLPage/__snapshots__/SQLPage.test.tsx.snap @@ -188,6 +188,7 @@ exports[` spec renders the component 1`] = `
+ From 2bbab50d9d4b454ea5eebfe1c9fcd00e06859c03 Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Wed, 4 Oct 2023 00:59:10 -0700 Subject: [PATCH 08/14] loading combo boxes for acc flyout Signed-off-by: Shenoy Pratik --- public/components/Main/main.tsx | 1 + public/components/SQLPage/SQLPage.tsx | 3 + .../create/create_acceleration.tsx | 4 ++ .../selectors/source_selector.tsx | 56 ++++++++++++++++--- 4 files changed, 55 insertions(+), 9 deletions(-) diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx index 22aef4f6..c45b5bd5 100644 --- a/public/components/Main/main.tsx +++ b/public/components/Main/main.tsx @@ -802,6 +802,7 @@ export class Main extends React.Component { if (this.state.language == 'SQL') { page = ( void; onTranslate: (query: string) => void; onClear: () => void; @@ -69,6 +71,7 @@ export class SQLPage extends React.Component { this.setState({ flyoutComponent: ( void; updateQueries: (query: string) => void; } export const CreateAcceleration = ({ + http, dataSource, resetFlyout, updateQueries, @@ -107,6 +110,7 @@ export const CreateAcceleration = ({ id="acceleration-form" > diff --git a/public/components/acceleration/selectors/source_selector.tsx b/public/components/acceleration/selectors/source_selector.tsx index a0f068ba..3cecc1cc 100644 --- a/public/components/acceleration/selectors/source_selector.tsx +++ b/public/components/acceleration/selectors/source_selector.tsx @@ -13,15 +13,19 @@ import { } from '@elastic/eui'; import producer from 'immer'; import React, { useEffect, useState } from 'react'; +import { CoreStart } from '../../../../../../src/core/public'; import { CreateAccelerationForm } from '../../../../common/types'; +import { getJobId, pollQueryStatus } from '../../SQLPage/utils'; import { hasError, validateDataSource } from '../create/utils'; interface AccelerationDataSourceSelectorProps { + http: CoreStart['http']; accelerationFormData: CreateAccelerationForm; setAccelerationFormData: React.Dispatch>; } export const AccelerationDataSourceSelector = ({ + http, accelerationFormData, setAccelerationFormData, }: AccelerationDataSourceSelectorProps) => { @@ -33,22 +37,53 @@ export const AccelerationDataSourceSelector = ({ const [selectedDatabase, setSelectedDatabase] = useState[]>([]); const [tables, setTables] = useState[]>([]); const [selectedTable, setSelectedTable] = useState[]>([]); + const [loadingComboBoxes, setLoadingComboBoxes] = useState({ + dataSource: false, + database: false, + dataTable: false, + }); + + const loadDataSource = () => { + setLoadingComboBoxes({ ...loadingComboBoxes, dataSource: true }); + http + .get(`/api/get_datasources`) + .then((res) => { + const data = res.data.resp; + setDataConnections( + data + .filter((connection: any) => connection.connector.toUpperCase() === 'S3GLUE') + .map((connection: any) => ({ label: connection.name })) + ); + }) + .catch((err) => { + console.error(err); + }); + setLoadingComboBoxes({ ...loadingComboBoxes, dataSource: false }); + }; + + const loadDatabases = () => { + setLoadingComboBoxes({ ...loadingComboBoxes, database: true }); + const query = { + lang: 'sql', + query: `SHOW SCHEMAS IN ${accelerationFormData.dataSource}`, + datasource: accelerationFormData.dataSource, + }; + getJobId(query, http, (id) => { + pollQueryStatus(id, http, (data) => { + console.log('data', data); + setLoadingComboBoxes({ ...loadingComboBoxes, database: false }); + }); + }); + }; useEffect(() => { - // TODO: remove hardcoded responses - setDataConnections([ - { - label: 'spark1', - }, - { - label: 'spark2', - }, - ]); + loadDataSource(); }, []); useEffect(() => { // TODO: remove hardcoded responses if (accelerationFormData.dataSource !== '') { + loadDatabases(); setDatabases([ { label: 'Database1', @@ -132,6 +167,7 @@ export const AccelerationDataSourceSelector = ({ }} isClearable={false} isInvalid={hasError(accelerationFormData.formErrors, 'dataSourceError')} + isLoading={loadingComboBoxes.dataSource} /> From 59ba0e757ac7b4f395521485e214e122145d98a3 Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Wed, 4 Oct 2023 07:16:24 -0700 Subject: [PATCH 09/14] adding acceleration backend integ Signed-off-by: Shenoy Pratik --- .../create/create_acceleration.tsx | 1 + .../selectors/index_setting_options.tsx | 4 + .../selectors/index_type_selector.tsx | 51 +++++++++++- .../selectors/source_selector.tsx | 78 ++++++------------- 4 files changed, 79 insertions(+), 55 deletions(-) diff --git a/public/components/acceleration/create/create_acceleration.tsx b/public/components/acceleration/create/create_acceleration.tsx index 708aad83..e3559f91 100644 --- a/public/components/acceleration/create/create_acceleration.tsx +++ b/public/components/acceleration/create/create_acceleration.tsx @@ -116,6 +116,7 @@ export const CreateAcceleration = ({ /> diff --git a/public/components/acceleration/selectors/index_setting_options.tsx b/public/components/acceleration/selectors/index_setting_options.tsx index f5a0c69a..af68a6b8 100644 --- a/public/components/acceleration/selectors/index_setting_options.tsx +++ b/public/components/acceleration/selectors/index_setting_options.tsx @@ -14,6 +14,7 @@ import { } from '@elastic/eui'; import producer from 'immer'; import React, { ChangeEvent, useState } from 'react'; +import { CoreStart } from '../../../../../../src/core/public'; import { ACCELERATION_TIME_INTERVAL } from '../../../../common/constants'; import { CreateAccelerationForm } from '../../../../common/types'; import { @@ -26,11 +27,13 @@ import { import { IndexTypeSelector } from './index_type_selector'; interface IndexSettingOptionsProps { + http: CoreStart['http']; accelerationFormData: CreateAccelerationForm; setAccelerationFormData: React.Dispatch>; } export const IndexSettingOptions = ({ + http, accelerationFormData, setAccelerationFormData, }: IndexSettingOptionsProps) => { @@ -107,6 +110,7 @@ export const IndexSettingOptions = ({ diff --git a/public/components/acceleration/selectors/index_type_selector.tsx b/public/components/acceleration/selectors/index_type_selector.tsx index 06b7828d..1e195c8f 100644 --- a/public/components/acceleration/selectors/index_type_selector.tsx +++ b/public/components/acceleration/selectors/index_type_selector.tsx @@ -3,27 +3,73 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow, EuiLink, EuiText } from '@elastic/eui'; -import React, { useState } from 'react'; +import { + EuiComboBox, + EuiComboBoxOptionOption, + EuiFormRow, + EuiLink, + EuiText, + htmlIdGenerator, +} from '@elastic/eui'; +import React, { useEffect, useState } from 'react'; +import { CoreStart } from '../../../../../../src/core/public'; import { ACCELERATION_DEFUALT_SKIPPING_INDEX_NAME, ACCELERATION_INDEX_TYPES, ACC_INDEX_TYPE_DOCUMENTATION_URL, } from '../../../../common/constants'; import { AccelerationIndexType, CreateAccelerationForm } from '../../../../common/types'; +import { getJobId, pollQueryStatus } from '../../SQLPage/utils'; interface IndexTypeSelectorProps { + http: CoreStart['http']; accelerationFormData: CreateAccelerationForm; setAccelerationFormData: React.Dispatch>; } export const IndexTypeSelector = ({ + http, accelerationFormData, setAccelerationFormData, }: IndexTypeSelectorProps) => { const [selectedIndexType, setSelectedIndexType] = useState[]>([ ACCELERATION_INDEX_TYPES[0], ]); + const [loading, setLoading] = useState(false); + + useEffect(() => { + if (accelerationFormData.dataTable !== '') { + setLoading(true); + const idPrefix = htmlIdGenerator()(); + const query = { + lang: 'sql', + query: `DESC ${accelerationFormData.dataSource}.${accelerationFormData.database}.${accelerationFormData.dataTable}`, + datasource: accelerationFormData.dataSource, + }; + getJobId(query, http, (id: string) => { + pollQueryStatus(id, http, (data: any[]) => { + setAccelerationFormData({ + ...accelerationFormData, + dataTableFields: [ + { id: `${idPrefix}1`, fieldName: 'Field1', dataType: 'Integer' }, + { id: `${idPrefix}2`, fieldName: 'Field2', dataType: 'Integer' }, + { id: `${idPrefix}3`, fieldName: 'Field3', dataType: 'Integer' }, + { id: `${idPrefix}4`, fieldName: 'Field4', dataType: 'Integer' }, + { id: `${idPrefix}5`, fieldName: 'Field5', dataType: 'Integer' }, + { id: `${idPrefix}6`, fieldName: 'Field6', dataType: 'Integer' }, + { id: `${idPrefix}7`, fieldName: 'Field7', dataType: 'Integer' }, + { id: `${idPrefix}8`, fieldName: 'Field8', dataType: 'Integer' }, + { id: `${idPrefix}9`, fieldName: 'Field9', dataType: 'Integer' }, + { id: `${idPrefix}10`, fieldName: 'Field10', dataType: 'Integer' }, + { id: `${idPrefix}11`, fieldName: 'Field11', dataType: 'Integer' }, + { id: `${idPrefix}12`, fieldName: 'Field12', dataType: 'TimestampType' }, + ], + }); + setLoading(false); + }); + }); + } + }, [accelerationFormData.dataTable]); const onChangeIndexType = (indexTypeOption: EuiComboBoxOptionOption[]) => { const indexType = indexTypeOption[0].value as AccelerationIndexType; @@ -56,6 +102,7 @@ export const IndexTypeSelector = ({ onChange={onChangeIndexType} isInvalid={selectedIndexType.length === 0} isClearable={false} + isLoading={loading} /> diff --git a/public/components/acceleration/selectors/source_selector.tsx b/public/components/acceleration/selectors/source_selector.tsx index 3cecc1cc..07ae58e6 100644 --- a/public/components/acceleration/selectors/source_selector.tsx +++ b/public/components/acceleration/selectors/source_selector.tsx @@ -3,14 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { - EuiComboBox, - EuiComboBoxOptionOption, - EuiFormRow, - EuiSpacer, - EuiText, - htmlIdGenerator, -} from '@elastic/eui'; +import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow, EuiSpacer, EuiText } from '@elastic/eui'; import producer from 'immer'; import React, { useEffect, useState } from 'react'; import { CoreStart } from '../../../../../../src/core/public'; @@ -68,71 +61,50 @@ export const AccelerationDataSourceSelector = ({ query: `SHOW SCHEMAS IN ${accelerationFormData.dataSource}`, datasource: accelerationFormData.dataSource, }; - getJobId(query, http, (id) => { - pollQueryStatus(id, http, (data) => { - console.log('data', data); + getJobId(query, http, (id: string) => { + pollQueryStatus(id, http, (data: any[][]) => { + let databaseOptions: EuiComboBoxOptionOption[] = []; + if (data.length > 0) + databaseOptions = data.map((subArray: any[]) => ({ label: subArray[0] })); + setDatabases(databaseOptions); setLoadingComboBoxes({ ...loadingComboBoxes, database: false }); }); }); }; + const loadTables = () => { + setLoadingComboBoxes({ ...loadingComboBoxes, dataTable: true }); + const query = { + lang: 'sql', + query: `SHOW TABLES IN ${accelerationFormData.dataSource}.${accelerationFormData.database}`, + datasource: accelerationFormData.dataSource, + }; + getJobId(query, http, (id: string) => { + pollQueryStatus(id, http, (data: any[]) => { + let dataTableOptions: EuiComboBoxOptionOption[] = []; + if (data.length > 0) dataTableOptions = data.map((subArray) => ({ label: subArray[1] })); + setTables(dataTableOptions); + setLoadingComboBoxes({ ...loadingComboBoxes, dataTable: false }); + }); + }); + }; + useEffect(() => { loadDataSource(); }, []); useEffect(() => { - // TODO: remove hardcoded responses if (accelerationFormData.dataSource !== '') { loadDatabases(); - setDatabases([ - { - label: 'Database1', - }, - { - label: 'Database2', - }, - ]); } }, [accelerationFormData.dataSource]); useEffect(() => { - // TODO: remove hardcoded responses if (accelerationFormData.database !== '') { - setTables([ - { - label: 'Table1', - }, - { - label: 'Table2', - }, - ]); + loadTables(); } }, [accelerationFormData.database]); - useEffect(() => { - // TODO: remove hardcoded responses - if (accelerationFormData.dataTable !== '') { - const idPrefix = htmlIdGenerator()(); - setAccelerationFormData({ - ...accelerationFormData, - dataTableFields: [ - { id: `${idPrefix}1`, fieldName: 'Field1', dataType: 'Integer' }, - { id: `${idPrefix}2`, fieldName: 'Field2', dataType: 'Integer' }, - { id: `${idPrefix}3`, fieldName: 'Field3', dataType: 'Integer' }, - { id: `${idPrefix}4`, fieldName: 'Field4', dataType: 'Integer' }, - { id: `${idPrefix}5`, fieldName: 'Field5', dataType: 'Integer' }, - { id: `${idPrefix}6`, fieldName: 'Field6', dataType: 'Integer' }, - { id: `${idPrefix}7`, fieldName: 'Field7', dataType: 'Integer' }, - { id: `${idPrefix}8`, fieldName: 'Field8', dataType: 'Integer' }, - { id: `${idPrefix}9`, fieldName: 'Field9', dataType: 'Integer' }, - { id: `${idPrefix}10`, fieldName: 'Field10', dataType: 'Integer' }, - { id: `${idPrefix}11`, fieldName: 'Field11', dataType: 'Integer' }, - { id: `${idPrefix}12`, fieldName: 'Field12', dataType: 'TimestampType' }, - ], - }); - } - }, [accelerationFormData.dataTable]); - return ( <> From 74fc352f749a0cf3aaa6f6eb68b1d2841aa95a09 Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Wed, 4 Oct 2023 07:23:36 -0700 Subject: [PATCH 10/14] update jest tests for acc flyout Signed-off-by: Shenoy Pratik --- .../create/__tests__/create_acceleration.test.tsx | 5 +++++ .../__snapshots__/source_selector.test.tsx.snap | 5 ++++- .../selectors/__tests__/source_selector.test.tsx | 10 ++++++++++ 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/public/components/acceleration/create/__tests__/create_acceleration.test.tsx b/public/components/acceleration/create/__tests__/create_acceleration.test.tsx index 8736c5b0..5c0fba97 100644 --- a/public/components/acceleration/create/__tests__/create_acceleration.test.tsx +++ b/public/components/acceleration/create/__tests__/create_acceleration.test.tsx @@ -8,6 +8,8 @@ import { configure, mount } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import toJson from 'enzyme-to-json'; import React from 'react'; +import { httpClientMock } from '../../../../../test/mocks'; +import { mockDatasourcesQuery } from '../../../../../test/mocks/mockData'; import { CreateAcceleration } from '../create_acceleration'; describe('Create acceleration flyout components', () => { @@ -17,9 +19,12 @@ describe('Create acceleration flyout components', () => { const dataSource = ''; const resetFlyout = jest.fn(); const updateQueries = jest.fn(); + const client = httpClientMock; + client.get = jest.fn().mockResolvedValue(mockDatasourcesQuery); const wrapper = mount(
+
@@ -1252,41 +1218,6 @@ Array [
-
-
- - - Considerations for data indexing - -
-
-
-

- Warning about not indexing personal or sensitive data, something about the cost of indexing. -

-
-
-
@@ -1868,7 +1799,7 @@ Array [ onFocus={[Function]} placeholder="Number of primary shards" type="number" - value={5} + value={1} />
@@ -1876,7 +1807,7 @@ Array [ className="euiFormHelpText euiFormRow__text" id="some_html_id-help-0" > - Specify the number of primary shards for the index. Default is 5. The number of primary shards cannot be changed after the index is created. + Specify the number of primary shards for the index. Default is 1. The number of primary shards cannot be changed after the index is created. , diff --git a/public/components/acceleration/create/__tests__/caution_banner_callout.test.tsx b/public/components/acceleration/create/__tests__/caution_banner_callout.test.tsx deleted file mode 100644 index 4ad06632..00000000 --- a/public/components/acceleration/create/__tests__/caution_banner_callout.test.tsx +++ /dev/null @@ -1,28 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import { waitFor } from '@testing-library/dom'; -import { configure, mount } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; -import toJson from 'enzyme-to-json'; -import React from 'react'; -import { CautionBannerCallout } from '../caution_banner_callout'; - -describe('Acceleration callout', () => { - configure({ adapter: new Adapter() }); - - it('renders acceleration flyout callout', async () => { - const wrapper = mount(); - wrapper.update(); - await waitFor(() => { - expect( - toJson(wrapper, { - noKey: false, - mode: 'deep', - }) - ).toMatchSnapshot(); - }); - }); -}); diff --git a/public/components/acceleration/create/caution_banner_callout.tsx b/public/components/acceleration/create/caution_banner_callout.tsx deleted file mode 100644 index 2c97f82a..00000000 --- a/public/components/acceleration/create/caution_banner_callout.tsx +++ /dev/null @@ -1,17 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import { EuiCallOut } from '@elastic/eui'; -import React from 'react'; - -export const CautionBannerCallout = () => { - return ( - -

- Warning about not indexing personal or sensitive data, something about the cost of indexing. -

- - ); -}; diff --git a/public/components/acceleration/create/create_acceleration.tsx b/public/components/acceleration/create/create_acceleration.tsx index bc4384ba..7d1aabc9 100644 --- a/public/components/acceleration/create/create_acceleration.tsx +++ b/public/components/acceleration/create/create_acceleration.tsx @@ -27,7 +27,6 @@ import { IndexSettingOptions } from '../selectors/index_setting_options'; import { AccelerationDataSourceSelector } from '../selectors/source_selector'; import { accelerationQueryBuilder } from '../visual_editors/query_builder'; import { QueryVisualEditor } from '../visual_editors/query_visual_editor'; -import { CautionBannerCallout } from './caution_banner_callout'; import { CreateAccelerationHeader } from './create_acceleration_header'; import { formValidator, hasError } from './utils'; @@ -101,7 +100,6 @@ export const CreateAcceleration = ({ - @@ -204,7 +204,7 @@ Array [ className="euiFormHelpText euiFormRow__text" id="some_html_id-help-0" > - Specify the number of primary shards for the index. Default is 5. The number of primary shards cannot be changed after the index is created. + Specify the number of primary shards for the index. Default is 1. The number of primary shards cannot be changed after the index is created. , @@ -583,7 +583,7 @@ Array [ onFocus={[Function]} placeholder="Number of primary shards" type="number" - value={5} + value={1} /> @@ -591,7 +591,7 @@ Array [ className="euiFormHelpText euiFormRow__text" id="some_html_id-help-0" > - Specify the number of primary shards for the index. Default is 5. The number of primary shards cannot be changed after the index is created. + Specify the number of primary shards for the index. Default is 1. The number of primary shards cannot be changed after the index is created. , @@ -970,7 +970,7 @@ Array [ onFocus={[Function]} placeholder="Number of primary shards" type="number" - value={5} + value={1} /> @@ -978,7 +978,7 @@ Array [ className="euiFormHelpText euiFormRow__text" id="some_html_id-help-0" > - Specify the number of primary shards for the index. Default is 5. The number of primary shards cannot be changed after the index is created. + Specify the number of primary shards for the index. Default is 1. The number of primary shards cannot be changed after the index is created. , From 512e535b89af1eec195344101e651a44944906eb Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Wed, 4 Oct 2023 09:40:37 -0700 Subject: [PATCH 14/14] support acc flyout redirection from data sources Signed-off-by: Shenoy Pratik --- public/components/SQLPage/SQLPage.tsx | 2 +- .../create/__tests__/create_acceleration.test.tsx | 5 +++-- .../acceleration/create/create_acceleration.tsx | 8 +++++--- .../__tests__/__snapshots__/source_selector.test.tsx.snap | 8 ++++---- .../selectors/__tests__/source_selector.test.tsx | 5 +++++ .../components/acceleration/selectors/source_selector.tsx | 4 +++- 6 files changed, 21 insertions(+), 11 deletions(-) diff --git a/public/components/SQLPage/SQLPage.tsx b/public/components/SQLPage/SQLPage.tsx index 17a4e220..6deab093 100644 --- a/public/components/SQLPage/SQLPage.tsx +++ b/public/components/SQLPage/SQLPage.tsx @@ -72,7 +72,7 @@ export class SQLPage extends React.Component { flyoutComponent: ( diff --git a/public/components/acceleration/create/__tests__/create_acceleration.test.tsx b/public/components/acceleration/create/__tests__/create_acceleration.test.tsx index 5c0fba97..104d0fe6 100644 --- a/public/components/acceleration/create/__tests__/create_acceleration.test.tsx +++ b/public/components/acceleration/create/__tests__/create_acceleration.test.tsx @@ -3,6 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ +import { EuiComboBoxOptionOption } from '@elastic/eui'; import { waitFor } from '@testing-library/dom'; import { configure, mount } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; @@ -16,7 +17,7 @@ describe('Create acceleration flyout components', () => { configure({ adapter: new Adapter() }); it('renders acceleration flyout component with default options', async () => { - const dataSource = ''; + const selectedDatasource: EuiComboBoxOptionOption[] = []; const resetFlyout = jest.fn(); const updateQueries = jest.fn(); const client = httpClientMock; @@ -25,7 +26,7 @@ describe('Create acceleration flyout components', () => { const wrapper = mount( diff --git a/public/components/acceleration/create/create_acceleration.tsx b/public/components/acceleration/create/create_acceleration.tsx index 7d1aabc9..152b01c5 100644 --- a/public/components/acceleration/create/create_acceleration.tsx +++ b/public/components/acceleration/create/create_acceleration.tsx @@ -6,6 +6,7 @@ import { EuiButton, EuiButtonEmpty, + EuiComboBoxOptionOption, EuiFlexGroup, EuiFlexItem, EuiFlyout, @@ -32,19 +33,19 @@ import { formValidator, hasError } from './utils'; export interface CreateAccelerationProps { http: CoreStart['http']; - dataSource: string; + selectedDatasource: EuiComboBoxOptionOption[]; resetFlyout: () => void; updateQueries: (query: string) => void; } export const CreateAcceleration = ({ http, - dataSource, + selectedDatasource, resetFlyout, updateQueries, }: CreateAccelerationProps) => { const [accelerationFormData, setAccelerationFormData] = useState({ - dataSource: '', + dataSource: selectedDatasource.length > 0 ? selectedDatasource[0].label : '', dataTable: '', database: '', dataTableFields: [], @@ -111,6 +112,7 @@ export const CreateAcceleration = ({ http={http} accelerationFormData={accelerationFormData} setAccelerationFormData={setAccelerationFormData} + selectedDatasource={selectedDatasource} /> -

- Select a data source -

+ ds +
{ it('renders source selector with default options', async () => { const accelerationFormData = createAccelerationEmptyDataMock; + const selectedDatasource: EuiComboBoxOptionOption[] = []; const setAccelerationFormData = jest.fn(); const client = httpClientMock; client.get = jest.fn().mockResolvedValue(mockDatasourcesQuery); @@ -26,6 +28,7 @@ describe('Source selector components', () => { const wrapper = mount( @@ -42,6 +45,7 @@ describe('Source selector components', () => { }); it('renders source selector with different options', async () => { + const selectedDatasource: EuiComboBoxOptionOption[] = [{ label: 'ds' }]; const accelerationFormData: CreateAccelerationForm = { ...createAccelerationEmptyDataMock, dataSource: 'ds', @@ -54,6 +58,7 @@ describe('Source selector components', () => { client.post = jest.fn().mockResolvedValue([]); const wrapper = mount( >; + selectedDatasource: EuiComboBoxOptionOption[]; } export const AccelerationDataSourceSelector = ({ http, accelerationFormData, setAccelerationFormData, + selectedDatasource, }: AccelerationDataSourceSelectorProps) => { const [dataConnections, setDataConnections] = useState[]>([]); const [selectedDataConnection, setSelectedDataConnection] = useState< EuiComboBoxOptionOption[] - >([]); + >(selectedDatasource.length > 0 ? [{ label: selectedDatasource[0].label }] : []); const [databases, setDatabases] = useState[]>([]); const [selectedDatabase, setSelectedDatabase] = useState[]>([]); const [tables, setTables] = useState[]>([]);