From 41162df09654d6a14deb4044d7f13559c8b90ffa Mon Sep 17 00:00:00 2001 From: sumukhswamy Date: Fri, 30 Aug 2024 15:56:26 -0700 Subject: [PATCH 1/5] fix for missing id in old nav Signed-off-by: sumukhswamy --- public/components/Main/main.tsx | 24 ++++++++++--------- .../selectors/source_selector.tsx | 1 + 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx index d64bcbcd..c5ff8d43 100644 --- a/public/components/Main/main.tsx +++ b/public/components/Main/main.tsx @@ -149,6 +149,7 @@ interface MainState { dataSourceOptions: DataSourceOption[]; mdsClusterName: string; flintDataConnections: boolean; + newNavEnabled: boolean | undefined; } const SUCCESS_MESSAGE = 'Success'; @@ -295,6 +296,7 @@ export class Main extends React.Component { selectedMDSDataConnectionId: this.props.dataSourceMDSId, mdsClusterName: '', flintDataConnections: false, + newNavEnabled: coreRefs?.chrome?.navGroup.getNavGroupEnabled() }; this.httpClient = this.props.httpClient; this.updateSQLQueries = _.debounce(this.updateSQLQueries, 250).bind(this); @@ -318,7 +320,7 @@ export class Main extends React.Component { fetchFlintDataSources = () => { fetchDataSources( this.httpClient, - this.props.dataSourceMDSId, + this.state.newNavEnabled ? this.props.dataSourceMDSId : this.state.selectedMDSDataConnectionId , this.props.urlDataSource, (dataOptions) => { if (dataOptions.length > 0) { @@ -440,7 +442,7 @@ export class Main extends React.Component { const endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlquery' : 'pplquery'); let query = {}; if (this.props.dataSourceEnabled) { - query = { dataSourceMDSId: this.props.dataSourceMDSId }; + query = { dataSourceMDSId: this.state.newNavEnabled? this.props.dataSourceMDSId: this.state.selectedMDSDataConnectionId }; } const responsePromise = Promise.all( queries.map((eachQuery: string) => @@ -575,7 +577,7 @@ export class Main extends React.Component { }); } }, - this.props.dataSourceMDSId, + this.state.newNavEnabled? this.props.dataSourceMDSId: this.state.selectedMDSDataConnectionId, (errorDetails: string) => { this.setState({ asyncLoading: false, @@ -604,7 +606,7 @@ export class Main extends React.Component { if (queries.length > 0) { let query = {}; if (this.props.dataSourceEnabled) { - query = { dataSourceMDSId: this.props.dataSourceMDSId }; + query = { dataSourceMDSId: this.state.newNavEnabled? this.props.dataSourceMDSId: this.state.selectedMDSDataConnectionId }; } const endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'translatesql' : 'translateppl'); @@ -656,7 +658,7 @@ export class Main extends React.Component { if (queries.length > 0) { let query = {}; if (this.props.dataSourceEnabled) { - query = { dataSourceMDSId: this.props.dataSourceMDSId }; + query = { dataSourceMDSId: this.state.newNavEnabled? this.props.dataSourceMDSId: this.state.selectedMDSDataConnectionId}; } Promise.all( queries.map((eachQuery: string) => @@ -693,7 +695,7 @@ export class Main extends React.Component { if (queries.length > 0) { let query = {}; if (this.props.dataSourceEnabled) { - query = { dataSourceMDSId: this.props.dataSourceMDSId }; + query = { dataSourceMDSId: this.state.newNavEnabled? this.props.dataSourceMDSId: this.state.selectedMDSDataConnectionId}; } const endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlquery' : 'pplquery'); Promise.all( @@ -731,7 +733,7 @@ export class Main extends React.Component { if (queries.length > 0) { let query = {}; if (this.props.dataSourceEnabled) { - query = { dataSourceMDSId: this.props.dataSourceMDSId }; + query = { dataSourceMDSId: this.state.newNavEnabled? this.props.dataSourceMDSId: this.state.selectedMDSDataConnectionId }; } const endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlcsv' : 'pplcsv'); Promise.all( @@ -769,7 +771,7 @@ export class Main extends React.Component { if (queries.length > 0) { let query = {}; if (this.props.dataSourceEnabled) { - query = { dataSourceMDSId: this.props.dataSourceMDSId }; + query = { dataSourceMDSId: this.state.newNavEnabled? this.props.dataSourceMDSId: this.state.selectedMDSDataConnectionId }; } const endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqltext' : 'ppltext'); Promise.all( @@ -952,7 +954,7 @@ export class Main extends React.Component { openAccelerationFlyout={ this.props.isAccelerationFlyoutOpen && !this.state.isAccelerationFlyoutOpened } - dataSourceMDSId={this.props.dataSourceMDSId} + dataSourceMDSId={this.state.newNavEnabled? this.props.dataSourceMDSId: this.state.selectedMDSDataConnectionId} setIsAccelerationFlyoutOpened={this.setIsAccelerationFlyoutOpened} /> ); @@ -1091,7 +1093,7 @@ export class Main extends React.Component { onSelect={this.handleDataSelect} urlDataSource={this.props.urlDataSource} asyncLoading={this.state.asyncLoading} - dataSourceMDSId={this.props.dataSourceMDSId} + dataSourceMDSId={coreRefs?.chrome?.navGroup.getNavGroupEnabled()? this.props.dataSourceMDSId : this.state.selectedMDSDataConnectionId} /> @@ -1110,7 +1112,7 @@ export class Main extends React.Component { updateSQLQueries={this.updateSQLQueries} refreshTree={this.state.refreshTree} dataSourceEnabled={this.props.dataSourceEnabled} - dataSourceMDSId={this.props.dataSourceMDSId} + dataSourceMDSId={coreRefs?.chrome?.navGroup.getNavGroupEnabled()? this.props.dataSourceMDSId : this.state.selectedMDSDataConnectionId} clusterTab={this.state.cluster} language={this.state.language} updatePPLQueries={this.updatePPLQueries} diff --git a/public/components/acceleration/selectors/source_selector.tsx b/public/components/acceleration/selectors/source_selector.tsx index 793fcffd..5cd32fc1 100644 --- a/public/components/acceleration/selectors/source_selector.tsx +++ b/public/components/acceleration/selectors/source_selector.tsx @@ -29,6 +29,7 @@ export const AccelerationDataSourceSelector = ({ setAccelerationFormData, selectedDatasource, }: AccelerationDataSourceSelectorProps) => { + console.log(selectedDatasource) const { setToast } = useToast(); const [dataConnections, setDataConnections] = useState>>( [] From cb55e28a6996f73c30391bb01dfbcb0b7a58d09a Mon Sep 17 00:00:00 2001 From: sumukhswamy Date: Fri, 30 Aug 2024 16:33:16 -0700 Subject: [PATCH 2/5] updated the branch Signed-off-by: sumukhswamy --- public/components/Main/main.tsx | 66 +++++++++++++++---- .../selectors/source_selector.tsx | 3 +- 2 files changed, 54 insertions(+), 15 deletions(-) diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx index dcc36514..35aa8287 100644 --- a/public/components/Main/main.tsx +++ b/public/components/Main/main.tsx @@ -4,7 +4,6 @@ */ import { - EuiSmallButton, EuiButtonIcon, EuiCallOut, EuiComboBoxOptionOption, @@ -15,6 +14,7 @@ import { EuiPageContentBody, EuiPageSideBar, EuiPanel, + EuiSmallButton, EuiSpacer, EuiTitle, } from '@elastic/eui'; @@ -296,7 +296,7 @@ export class Main extends React.Component { selectedMDSDataConnectionId: this.props.dataSourceMDSId, mdsClusterName: '', flintDataConnections: false, - newNavEnabled: coreRefs?.chrome?.navGroup.getNavGroupEnabled() + newNavEnabled: coreRefs?.chrome?.navGroup.getNavGroupEnabled(), }; this.httpClient = this.props.httpClient; this.updateSQLQueries = _.debounce(this.updateSQLQueries, 250).bind(this); @@ -320,7 +320,9 @@ export class Main extends React.Component { fetchFlintDataSources = () => { fetchDataSources( this.httpClient, - this.state.newNavEnabled ? this.props.dataSourceMDSId : this.state.selectedMDSDataConnectionId , + this.state.newNavEnabled + ? this.props.dataSourceMDSId + : this.state.selectedMDSDataConnectionId, this.props.urlDataSource, (dataOptions) => { if (dataOptions.length > 0) { @@ -442,7 +444,11 @@ export class Main extends React.Component { const endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlquery' : 'pplquery'); let query = {}; if (this.props.dataSourceEnabled) { - query = { dataSourceMDSId: this.state.newNavEnabled? this.props.dataSourceMDSId: this.state.selectedMDSDataConnectionId }; + query = { + dataSourceMDSId: this.state.newNavEnabled + ? this.props.dataSourceMDSId + : this.state.selectedMDSDataConnectionId, + }; } const responsePromise = Promise.all( queries.map((eachQuery: string) => @@ -577,7 +583,9 @@ export class Main extends React.Component { }); } }, - this.state.newNavEnabled? this.props.dataSourceMDSId: this.state.selectedMDSDataConnectionId, + this.state.newNavEnabled + ? this.props.dataSourceMDSId + : this.state.selectedMDSDataConnectionId, (errorDetails: string) => { this.setState({ asyncLoading: false, @@ -606,7 +614,11 @@ export class Main extends React.Component { if (queries.length > 0) { let query = {}; if (this.props.dataSourceEnabled) { - query = { dataSourceMDSId: this.state.newNavEnabled? this.props.dataSourceMDSId: this.state.selectedMDSDataConnectionId }; + query = { + dataSourceMDSId: this.state.newNavEnabled + ? this.props.dataSourceMDSId + : this.state.selectedMDSDataConnectionId, + }; } const endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'translatesql' : 'translateppl'); @@ -658,7 +670,11 @@ export class Main extends React.Component { if (queries.length > 0) { let query = {}; if (this.props.dataSourceEnabled) { - query = { dataSourceMDSId: this.state.newNavEnabled? this.props.dataSourceMDSId: this.state.selectedMDSDataConnectionId}; + query = { + dataSourceMDSId: this.state.newNavEnabled + ? this.props.dataSourceMDSId + : this.state.selectedMDSDataConnectionId, + }; } Promise.all( queries.map((eachQuery: string) => @@ -695,7 +711,11 @@ export class Main extends React.Component { if (queries.length > 0) { let query = {}; if (this.props.dataSourceEnabled) { - query = { dataSourceMDSId: this.state.newNavEnabled? this.props.dataSourceMDSId: this.state.selectedMDSDataConnectionId}; + query = { + dataSourceMDSId: this.state.newNavEnabled + ? this.props.dataSourceMDSId + : this.state.selectedMDSDataConnectionId, + }; } const endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlquery' : 'pplquery'); Promise.all( @@ -733,7 +753,11 @@ export class Main extends React.Component { if (queries.length > 0) { let query = {}; if (this.props.dataSourceEnabled) { - query = { dataSourceMDSId: this.state.newNavEnabled? this.props.dataSourceMDSId: this.state.selectedMDSDataConnectionId }; + query = { + dataSourceMDSId: this.state.newNavEnabled + ? this.props.dataSourceMDSId + : this.state.selectedMDSDataConnectionId, + }; } const endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlcsv' : 'pplcsv'); Promise.all( @@ -771,7 +795,11 @@ export class Main extends React.Component { if (queries.length > 0) { let query = {}; if (this.props.dataSourceEnabled) { - query = { dataSourceMDSId: this.state.newNavEnabled? this.props.dataSourceMDSId: this.state.selectedMDSDataConnectionId }; + query = { + dataSourceMDSId: this.state.newNavEnabled + ? this.props.dataSourceMDSId + : this.state.selectedMDSDataConnectionId, + }; } const endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqltext' : 'ppltext'); Promise.all( @@ -954,7 +982,11 @@ export class Main extends React.Component { openAccelerationFlyout={ this.props.isAccelerationFlyoutOpen && !this.state.isAccelerationFlyoutOpened } - dataSourceMDSId={this.state.newNavEnabled? this.props.dataSourceMDSId: this.state.selectedMDSDataConnectionId} + dataSourceMDSId={ + this.state.newNavEnabled + ? this.props.dataSourceMDSId + : this.state.selectedMDSDataConnectionId + } setIsAccelerationFlyoutOpened={this.setIsAccelerationFlyoutOpened} /> ); @@ -1093,7 +1125,11 @@ export class Main extends React.Component { onSelect={this.handleDataSelect} urlDataSource={this.props.urlDataSource} asyncLoading={this.state.asyncLoading} - dataSourceMDSId={coreRefs?.chrome?.navGroup.getNavGroupEnabled()? this.props.dataSourceMDSId : this.state.selectedMDSDataConnectionId} + dataSourceMDSId={ + coreRefs?.chrome?.navGroup.getNavGroupEnabled() + ? this.props.dataSourceMDSId + : this.state.selectedMDSDataConnectionId + } /> @@ -1112,7 +1148,11 @@ export class Main extends React.Component { updateSQLQueries={this.updateSQLQueries} refreshTree={this.state.refreshTree} dataSourceEnabled={this.props.dataSourceEnabled} - dataSourceMDSId={coreRefs?.chrome?.navGroup.getNavGroupEnabled()? this.props.dataSourceMDSId : this.state.selectedMDSDataConnectionId} + dataSourceMDSId={ + coreRefs?.chrome?.navGroup.getNavGroupEnabled() + ? this.props.dataSourceMDSId + : this.state.selectedMDSDataConnectionId + } clusterTab={this.state.cluster} language={this.state.language} updatePPLQueries={this.updatePPLQueries} diff --git a/public/components/acceleration/selectors/source_selector.tsx b/public/components/acceleration/selectors/source_selector.tsx index 6a284d02..6e132452 100644 --- a/public/components/acceleration/selectors/source_selector.tsx +++ b/public/components/acceleration/selectors/source_selector.tsx @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { EuiCompressedComboBox, EuiComboBoxOptionOption, EuiCompressedFormRow, EuiSpacer, EuiText } from '@elastic/eui'; +import { EuiComboBoxOptionOption, EuiCompressedComboBox, EuiCompressedFormRow, EuiSpacer, EuiText } from '@elastic/eui'; import producer from 'immer'; import React, { useEffect, useState } from 'react'; import { CoreStart } from '../../../../../../src/core/public'; @@ -29,7 +29,6 @@ export const AccelerationDataSourceSelector = ({ setAccelerationFormData, selectedDatasource, }: AccelerationDataSourceSelectorProps) => { - console.log(selectedDatasource) const { setToast } = useToast(); const [dataConnections, setDataConnections] = useState>>( [] From 27f3a0ec6e55ecde7c2b3accd083f4cc93c38642 Mon Sep 17 00:00:00 2001 From: sumukhswamy Date: Tue, 3 Sep 2024 23:14:16 -0700 Subject: [PATCH 3/5] addressed comments Signed-off-by: sumukhswamy --- public/components/Main/main.tsx | 47 +++++++++------------------------ 1 file changed, 12 insertions(+), 35 deletions(-) diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx index 35aa8287..60a2bcf6 100644 --- a/public/components/Main/main.tsx +++ b/public/components/Main/main.tsx @@ -305,7 +305,7 @@ export class Main extends React.Component { } componentDidMount() { - if (!coreRefs?.chrome?.navGroup.getNavGroupEnabled()) { + if (!this.state.newNavEnabled) { this.props.setBreadcrumbs([ { text: 'Query Workbench', @@ -313,16 +313,13 @@ export class Main extends React.Component { }, ]); } - this.fetchFlintDataSources(); } fetchFlintDataSources = () => { fetchDataSources( this.httpClient, - this.state.newNavEnabled - ? this.props.dataSourceMDSId - : this.state.selectedMDSDataConnectionId, + this.state.selectedMDSDataConnectionId, this.props.urlDataSource, (dataOptions) => { if (dataOptions.length > 0) { @@ -445,9 +442,7 @@ export class Main extends React.Component { let query = {}; if (this.props.dataSourceEnabled) { query = { - dataSourceMDSId: this.state.newNavEnabled - ? this.props.dataSourceMDSId - : this.state.selectedMDSDataConnectionId, + dataSourceMDSId: this.state.selectedMDSDataConnectionId, }; } const responsePromise = Promise.all( @@ -583,9 +578,7 @@ export class Main extends React.Component { }); } }, - this.state.newNavEnabled - ? this.props.dataSourceMDSId - : this.state.selectedMDSDataConnectionId, + this.state.selectedMDSDataConnectionId, (errorDetails: string) => { this.setState({ asyncLoading: false, @@ -615,9 +608,7 @@ export class Main extends React.Component { let query = {}; if (this.props.dataSourceEnabled) { query = { - dataSourceMDSId: this.state.newNavEnabled - ? this.props.dataSourceMDSId - : this.state.selectedMDSDataConnectionId, + dataSourceMDSId: this.state.selectedMDSDataConnectionId, }; } const endpoint = @@ -671,9 +662,7 @@ export class Main extends React.Component { let query = {}; if (this.props.dataSourceEnabled) { query = { - dataSourceMDSId: this.state.newNavEnabled - ? this.props.dataSourceMDSId - : this.state.selectedMDSDataConnectionId, + dataSourceMDSId: this.state.selectedMDSDataConnectionId, }; } Promise.all( @@ -712,9 +701,7 @@ export class Main extends React.Component { let query = {}; if (this.props.dataSourceEnabled) { query = { - dataSourceMDSId: this.state.newNavEnabled - ? this.props.dataSourceMDSId - : this.state.selectedMDSDataConnectionId, + dataSourceMDSId: this.state.selectedMDSDataConnectionId, }; } const endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlquery' : 'pplquery'); @@ -754,9 +741,7 @@ export class Main extends React.Component { let query = {}; if (this.props.dataSourceEnabled) { query = { - dataSourceMDSId: this.state.newNavEnabled - ? this.props.dataSourceMDSId - : this.state.selectedMDSDataConnectionId, + dataSourceMDSId: this.state.selectedMDSDataConnectionId, }; } const endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlcsv' : 'pplcsv'); @@ -796,9 +781,7 @@ export class Main extends React.Component { let query = {}; if (this.props.dataSourceEnabled) { query = { - dataSourceMDSId: this.state.newNavEnabled - ? this.props.dataSourceMDSId - : this.state.selectedMDSDataConnectionId, + dataSourceMDSId: this.state.selectedMDSDataConnectionId, }; } const endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqltext' : 'ppltext'); @@ -983,9 +966,7 @@ export class Main extends React.Component { this.props.isAccelerationFlyoutOpen && !this.state.isAccelerationFlyoutOpened } dataSourceMDSId={ - this.state.newNavEnabled - ? this.props.dataSourceMDSId - : this.state.selectedMDSDataConnectionId + this.state.selectedMDSDataConnectionId } setIsAccelerationFlyoutOpened={this.setIsAccelerationFlyoutOpened} /> @@ -1126,9 +1107,7 @@ export class Main extends React.Component { urlDataSource={this.props.urlDataSource} asyncLoading={this.state.asyncLoading} dataSourceMDSId={ - coreRefs?.chrome?.navGroup.getNavGroupEnabled() - ? this.props.dataSourceMDSId - : this.state.selectedMDSDataConnectionId + this.state.selectedMDSDataConnectionId } /> @@ -1149,9 +1128,7 @@ export class Main extends React.Component { refreshTree={this.state.refreshTree} dataSourceEnabled={this.props.dataSourceEnabled} dataSourceMDSId={ - coreRefs?.chrome?.navGroup.getNavGroupEnabled() - ? this.props.dataSourceMDSId - : this.state.selectedMDSDataConnectionId + this.state.selectedMDSDataConnectionId } clusterTab={this.state.cluster} language={this.state.language} From fff7188c16448eb39b18d2d8bd783a330581f2ca Mon Sep 17 00:00:00 2001 From: sumukhswamy Date: Wed, 4 Sep 2024 13:04:51 -0700 Subject: [PATCH 4/5] addressed comments Signed-off-by: sumukhswamy --- public/components/Main/main.tsx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx index 60a2bcf6..b0aede84 100644 --- a/public/components/Main/main.tsx +++ b/public/components/Main/main.tsx @@ -965,9 +965,7 @@ export class Main extends React.Component { openAccelerationFlyout={ this.props.isAccelerationFlyoutOpen && !this.state.isAccelerationFlyoutOpened } - dataSourceMDSId={ - this.state.selectedMDSDataConnectionId - } + dataSourceMDSId={this.state.selectedMDSDataConnectionId} setIsAccelerationFlyoutOpened={this.setIsAccelerationFlyoutOpened} /> ); @@ -1106,9 +1104,7 @@ export class Main extends React.Component { onSelect={this.handleDataSelect} urlDataSource={this.props.urlDataSource} asyncLoading={this.state.asyncLoading} - dataSourceMDSId={ - this.state.selectedMDSDataConnectionId - } + dataSourceMDSId={this.state.selectedMDSDataConnectionId} /> @@ -1127,9 +1123,7 @@ export class Main extends React.Component { updateSQLQueries={this.updateSQLQueries} refreshTree={this.state.refreshTree} dataSourceEnabled={this.props.dataSourceEnabled} - dataSourceMDSId={ - this.state.selectedMDSDataConnectionId - } + dataSourceMDSId={this.state.selectedMDSDataConnectionId} clusterTab={this.state.cluster} language={this.state.language} updatePPLQueries={this.updatePPLQueries} From bd83de13259b12fa458b639f15c7fb33fdca3706 Mon Sep 17 00:00:00 2001 From: sumukhswamy Date: Wed, 4 Sep 2024 13:54:00 -0700 Subject: [PATCH 5/5] addressed comments Signed-off-by: sumukhswamy --- .../components/acceleration/selectors/source_selector.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/public/components/acceleration/selectors/source_selector.tsx b/public/components/acceleration/selectors/source_selector.tsx index 6e132452..befdcf8a 100644 --- a/public/components/acceleration/selectors/source_selector.tsx +++ b/public/components/acceleration/selectors/source_selector.tsx @@ -3,7 +3,13 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { EuiComboBoxOptionOption, EuiCompressedComboBox, EuiCompressedFormRow, EuiSpacer, EuiText } from '@elastic/eui'; +import { + EuiComboBoxOptionOption, + EuiCompressedComboBox, + EuiCompressedFormRow, + EuiSpacer, + EuiText, +} from '@elastic/eui'; import producer from 'immer'; import React, { useEffect, useState } from 'react'; import { CoreStart } from '../../../../../../src/core/public';