diff --git a/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx b/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx index 90a8a5672..e343cdb2c 100644 --- a/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx +++ b/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx @@ -3,18 +3,21 @@ import QueryError from "Common/QueryError"; import { IndeterminateProgressBar } from "Explorer/Controls/IndeterminateProgressBar"; import { MessageBanner } from "Explorer/Controls/MessageBanner"; import { useQueryTabStyles } from "Explorer/Tabs/QueryTab/Styles"; +import useZoomLevel from "hooks/useZoomLevel"; import React from "react"; +import { conditionalClass } from "Utils/StyleUtils"; import RunQuery from "../../../../images/RunQuery.png"; import { QueryResults } from "../../../Contracts/ViewModels"; import { ErrorList } from "./ErrorList"; import { ResultsView } from "./ResultsView"; -import useZoomLevel from "hooks/useZoomLevel"; -import { conditionalClass } from "Utils/StyleUtils"; export interface ResultsViewProps { isMongoDB: boolean; queryResults: QueryResults; executeQueryDocumentsPage: (firstItemIndex: number) => Promise; + queryText?: string; + databaseId?: string; + containerId?: string; } interface QueryResultProps extends ResultsViewProps { @@ -49,6 +52,9 @@ export const QueryResultSection: React.FC = ({ queryResults, executeQueryDocumentsPage, isExecuting, + queryText, + databaseId, + containerId, }: QueryResultProps): JSX.Element => { const styles = useQueryTabStyles(); const maybeSubQuery = queryEditorContent && /.*\(.*SELECT.*\)/i.test(queryEditorContent); @@ -91,6 +97,9 @@ export const QueryResultSection: React.FC = ({ queryResults={queryResults} executeQueryDocumentsPage={executeQueryDocumentsPage} isMongoDB={isMongoDB} + queryText={queryText || queryEditorContent} + databaseId={databaseId} + containerId={containerId} /> ) : ( diff --git a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx index e9b37dc0c..67eca1b01 100644 --- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx +++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx @@ -375,9 +375,9 @@ class QueryTabComponentImpl extends React.Component ) : ( this._executeQueryDocumentsPage(firstItemIndex) } + databaseId={this.props.collection.databaseId} + containerId={this.props.collection.id()} /> )} diff --git a/src/Explorer/Tabs/QueryTab/ResultsView.tsx b/src/Explorer/Tabs/QueryTab/ResultsView.tsx index ec51f989e..b734364bb 100644 --- a/src/Explorer/Tabs/QueryTab/ResultsView.tsx +++ b/src/Explorer/Tabs/QueryTab/ResultsView.tsx @@ -29,7 +29,7 @@ import MongoUtility from "Common/MongoUtility"; import { QueryMetrics } from "Contracts/DataModels"; import { EditorReact } from "Explorer/Controls/Editor/EditorReact"; import { parseIndexMetrics, renderImpactDots } from "Explorer/Tabs/QueryTab/IndexAdvisorUtils"; -import { IDocument, useQueryMetadataStore } from "Explorer/Tabs/QueryTab/QueryTabComponent"; +import { IDocument } from "Explorer/Tabs/QueryTab/QueryTabComponent"; import { useQueryTabStyles } from "Explorer/Tabs/QueryTab/Styles"; import React, { useCallback, useEffect, useState } from "react"; import { userContext } from "UserContext"; @@ -394,9 +394,8 @@ const QueryStatsTab: React.FC> = ({ query }, { metric: "User defined function execution time", - value: `${ - aggregatedQueryMetrics.runtimeExecutionTimes?.userDefinedFunctionExecutionTime?.toString() || 0 - } ms`, + value: `${aggregatedQueryMetrics.runtimeExecutionTimes?.userDefinedFunctionExecutionTime?.toString() || 0 + } ms`, toolTip: "Total time spent executing user-defined functions", }, { @@ -544,9 +543,12 @@ export interface IIndexMetric { path?: string; composite?: { path: string; order: string }[]; } -export const IndexAdvisorTab: React.FC = () => { +export const IndexAdvisorTab: React.FC<{ + queryText?: string; + databaseId?: string; + containerId?: string; +}> = ({ queryText, databaseId, containerId }) => { const style = useIndexAdvisorStyles(); - const { userQuery, databaseId, containerId } = useQueryMetadataStore(); const [loading, setLoading] = useState(true); const [indexMetrics, setIndexMetrics] = useState(null); const [showIncluded, setShowIncluded] = useState(true); @@ -562,10 +564,26 @@ export const IndexAdvisorTab: React.FC = () => { useEffect(() => { const fetchIndexMetrics = async () => { + // Reset all states when query parameters change + setLoading(true); + setIndexMetrics(null); + setIncludedIndexes([]); + setNotIncludedIndexes([]); + setSelectedIndexes([]); + setSelectAll(false); + setUpdateMessageShown(false); + setIsUpdating(false); + setJustUpdatedPolicy(false); + + if (!queryText || !databaseId || !containerId) { + setLoading(false); + return; + } + const clearMessage = logConsoleProgress(`Querying items with IndexMetrics in container ${containerId}`); try { const querySpec = { - query: userQuery, + query: queryText, }; const sdkResponse = await client() .database(databaseId) @@ -582,10 +600,9 @@ export const IndexAdvisorTab: React.FC = () => { setLoading(false); } }; - if (userQuery && databaseId && containerId) { - fetchIndexMetrics(); - } - }, [userQuery, databaseId, containerId]); + + fetchIndexMetrics(); + }, [queryText, databaseId, containerId]); useEffect(() => { if (!indexMetrics) { @@ -828,13 +845,21 @@ export const IndexAdvisorTab: React.FC = () => { ); }; -export const ResultsView: React.FC = ({ isMongoDB, queryResults, executeQueryDocumentsPage }) => { +export const ResultsView: React.FC = ({ + isMongoDB, + queryResults, + executeQueryDocumentsPage, + queryText, + databaseId, + containerId +}) => { const styles = useQueryTabStyles(); const [activeTab, setActiveTab] = useState(ResultsTabs.Results); const onTabSelect = useCallback((event: SelectTabEvent, data: SelectTabData) => { setActiveTab(data.value as ResultsTabs); }, []); + return (
@@ -869,7 +894,13 @@ export const ResultsView: React.FC = ({ isMongoDB, queryResult /> )} {activeTab === ResultsTabs.QueryStats && } - {activeTab === ResultsTabs.IndexAdvisor && } + {activeTab === ResultsTabs.IndexAdvisor && ( + + )}
);