mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-19 00:41:31 +00:00
This reverts commit abf4b3bd0f.
Co-authored-by: nishthaAhujaa <nishtha17354@iiittd.ac.in>
This commit is contained in:
@@ -1,8 +1,5 @@
|
|||||||
import { IndexingPolicy } from "@azure/cosmos";
|
|
||||||
import { act } from "@testing-library/react";
|
|
||||||
import { AuthType } from "AuthType";
|
import { AuthType } from "AuthType";
|
||||||
import { shallow } from "enzyme";
|
import { shallow } from "enzyme";
|
||||||
import { useIndexingPolicyStore } from "Explorer/Tabs/QueryTab/ResultsView";
|
|
||||||
import ko from "knockout";
|
import ko from "knockout";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { updateCollection } from "../../../Common/dataAccess/updateCollection";
|
import { updateCollection } from "../../../Common/dataAccess/updateCollection";
|
||||||
@@ -447,47 +444,3 @@ describe("SettingsComponent", () => {
|
|||||||
expect(settingsComponentInstance.isSaveSettingsButtonEnabled()).toBe(true);
|
expect(settingsComponentInstance.isSaveSettingsButtonEnabled()).toBe(true);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("SettingsComponent - indexing policy subscription", () => {
|
|
||||||
const baseProps: SettingsComponentProps = {
|
|
||||||
settingsTab: new CollectionSettingsTabV2({
|
|
||||||
collection: collection,
|
|
||||||
tabKind: ViewModels.CollectionTabKind.CollectionSettingsV2,
|
|
||||||
title: "Scale & Settings",
|
|
||||||
tabPath: "",
|
|
||||||
node: undefined,
|
|
||||||
}),
|
|
||||||
};
|
|
||||||
|
|
||||||
it("subscribes to the correct container's indexing policy and updates state on change", async () => {
|
|
||||||
const containerId = collection.id();
|
|
||||||
const mockIndexingPolicy: IndexingPolicy = {
|
|
||||||
automatic: false,
|
|
||||||
indexingMode: "lazy",
|
|
||||||
includedPaths: [{ path: "/foo/*" }],
|
|
||||||
excludedPaths: [{ path: "/bar/*" }],
|
|
||||||
compositeIndexes: [],
|
|
||||||
spatialIndexes: [],
|
|
||||||
vectorIndexes: [],
|
|
||||||
fullTextIndexes: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
const wrapper = shallow(<SettingsComponent {...baseProps} />);
|
|
||||||
const instance = wrapper.instance() as SettingsComponent;
|
|
||||||
|
|
||||||
await act(async () => {
|
|
||||||
useIndexingPolicyStore.setState({
|
|
||||||
indexingPolicies: {
|
|
||||||
[containerId]: mockIndexingPolicy,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.update();
|
|
||||||
|
|
||||||
expect(wrapper.state("indexingPolicyContent")).toEqual(mockIndexingPolicy);
|
|
||||||
expect(wrapper.state("indexingPolicyContentBaseline")).toEqual(mockIndexingPolicy);
|
|
||||||
// @ts-expect-error: rawDataModel is intentionally accessed for test validation
|
|
||||||
expect(instance.collection.rawDataModel.indexingPolicy).toEqual(mockIndexingPolicy);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|||||||
@@ -13,7 +13,6 @@ import {
|
|||||||
ThroughputBucketsComponent,
|
ThroughputBucketsComponent,
|
||||||
ThroughputBucketsComponentProps,
|
ThroughputBucketsComponentProps,
|
||||||
} from "Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent";
|
} from "Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent";
|
||||||
import { useIndexingPolicyStore } from "Explorer/Tabs/QueryTab/ResultsView";
|
|
||||||
import { useDatabases } from "Explorer/useDatabases";
|
import { useDatabases } from "Explorer/useDatabases";
|
||||||
import { isFabricNative } from "Platform/Fabric/FabricUtil";
|
import { isFabricNative } from "Platform/Fabric/FabricUtil";
|
||||||
import { isCapabilityEnabled, isVectorSearchEnabled } from "Utils/CapabilityUtils";
|
import { isCapabilityEnabled, isVectorSearchEnabled } from "Utils/CapabilityUtils";
|
||||||
@@ -74,6 +73,7 @@ import {
|
|||||||
parseConflictResolutionMode,
|
parseConflictResolutionMode,
|
||||||
parseConflictResolutionProcedure,
|
parseConflictResolutionProcedure,
|
||||||
} from "./SettingsUtils";
|
} from "./SettingsUtils";
|
||||||
|
|
||||||
interface SettingsV2TabInfo {
|
interface SettingsV2TabInfo {
|
||||||
tab: SettingsV2TabTypes;
|
tab: SettingsV2TabTypes;
|
||||||
content: JSX.Element;
|
content: JSX.Element;
|
||||||
@@ -182,7 +182,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
|
|||||||
private totalThroughputUsed: number;
|
private totalThroughputUsed: number;
|
||||||
private throughputBucketsEnabled: boolean;
|
private throughputBucketsEnabled: boolean;
|
||||||
public mongoDBCollectionResource: MongoDBCollectionResource;
|
public mongoDBCollectionResource: MongoDBCollectionResource;
|
||||||
private unsubscribe: () => void;
|
|
||||||
constructor(props: SettingsComponentProps) {
|
constructor(props: SettingsComponentProps) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
@@ -318,19 +318,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
|
|||||||
if (this.props.settingsTab.isActive()) {
|
if (this.props.settingsTab.isActive()) {
|
||||||
useCommandBar.getState().setContextButtons(this.getTabsButtons());
|
useCommandBar.getState().setContextButtons(this.getTabsButtons());
|
||||||
}
|
}
|
||||||
this.unsubscribe = useIndexingPolicyStore.subscribe(
|
|
||||||
() => {
|
|
||||||
this.refreshCollectionData();
|
|
||||||
},
|
|
||||||
(state) => state.indexingPolicies[this.collection.id()],
|
|
||||||
);
|
|
||||||
this.refreshCollectionData();
|
|
||||||
}
|
|
||||||
componentWillUnmount(): void {
|
|
||||||
if (this.unsubscribe) {
|
|
||||||
this.unsubscribe();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate(): void {
|
componentDidUpdate(): void {
|
||||||
if (this.props.settingsTab.isActive()) {
|
if (this.props.settingsTab.isActive()) {
|
||||||
useCommandBar.getState().setContextButtons(this.getTabsButtons());
|
useCommandBar.getState().setContextButtons(this.getTabsButtons());
|
||||||
@@ -860,6 +849,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
|
|||||||
{ name: "name_of_property", query: "query_to_compute_property" },
|
{ name: "name_of_property", query: "query_to_compute_property" },
|
||||||
] as DataModels.ComputedProperties;
|
] as DataModels.ComputedProperties;
|
||||||
}
|
}
|
||||||
|
|
||||||
const throughputBuckets = this.offer?.throughputBuckets;
|
const throughputBuckets = this.offer?.throughputBuckets;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@@ -1019,31 +1009,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
|
|||||||
startKey,
|
startKey,
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
private refreshCollectionData = async (): Promise<void> => {
|
|
||||||
const containerId = this.collection.id();
|
|
||||||
const latestIndexingPolicy = useIndexingPolicyStore.getState().indexingPolicies[containerId];
|
|
||||||
const rawPolicy = latestIndexingPolicy ?? this.collection.indexingPolicy();
|
|
||||||
|
|
||||||
const latestCollection: DataModels.IndexingPolicy = {
|
|
||||||
automatic: rawPolicy?.automatic ?? true,
|
|
||||||
indexingMode: rawPolicy?.indexingMode ?? "consistent",
|
|
||||||
includedPaths: rawPolicy?.includedPaths ?? [],
|
|
||||||
excludedPaths: rawPolicy?.excludedPaths ?? [],
|
|
||||||
compositeIndexes: rawPolicy?.compositeIndexes ?? [],
|
|
||||||
spatialIndexes: rawPolicy?.spatialIndexes ?? [],
|
|
||||||
vectorIndexes: rawPolicy?.vectorIndexes ?? [],
|
|
||||||
fullTextIndexes: rawPolicy?.fullTextIndexes ?? [],
|
|
||||||
};
|
|
||||||
|
|
||||||
this.collection.rawDataModel.indexingPolicy = latestCollection;
|
|
||||||
this.setState({
|
|
||||||
indexingPolicyContent: latestCollection,
|
|
||||||
indexingPolicyContentBaseline: latestCollection,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
private saveCollectionSettings = async (startKey: number): Promise<void> => {
|
private saveCollectionSettings = async (startKey: number): Promise<void> => {
|
||||||
const newCollection: DataModels.Collection = { ...this.collection.rawDataModel };
|
const newCollection: DataModels.Collection = { ...this.collection.rawDataModel };
|
||||||
|
|
||||||
if (
|
if (
|
||||||
this.state.isSubSettingsSaveable ||
|
this.state.isSubSettingsSaveable ||
|
||||||
this.state.isContainerPolicyDirty ||
|
this.state.isContainerPolicyDirty ||
|
||||||
@@ -1283,6 +1252,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
|
|||||||
onScaleDiscardableChange: this.onScaleDiscardableChange,
|
onScaleDiscardableChange: this.onScaleDiscardableChange,
|
||||||
throughputError: this.state.throughputError,
|
throughputError: this.state.throughputError,
|
||||||
};
|
};
|
||||||
|
|
||||||
if (!this.isCollectionSettingsTab) {
|
if (!this.isCollectionSettingsTab) {
|
||||||
return (
|
return (
|
||||||
<div className="settingsV2MainContainer">
|
<div className="settingsV2MainContainer">
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
import { MessageBar, MessageBarType } from "@fluentui/react";
|
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { handleError } from "../../../../../Common/ErrorHandlingUtils";
|
import { MessageBar, MessageBarType } from "@fluentui/react";
|
||||||
import {
|
import {
|
||||||
mongoIndexTransformationRefreshingMessage,
|
mongoIndexTransformationRefreshingMessage,
|
||||||
renderMongoIndexTransformationRefreshMessage,
|
renderMongoIndexTransformationRefreshMessage,
|
||||||
} from "../../SettingsRenderUtils";
|
} from "../../SettingsRenderUtils";
|
||||||
|
import { handleError } from "../../../../../Common/ErrorHandlingUtils";
|
||||||
import { isIndexTransforming } from "../../SettingsUtils";
|
import { isIndexTransforming } from "../../SettingsUtils";
|
||||||
|
|
||||||
export interface IndexingPolicyRefreshComponentProps {
|
export interface IndexingPolicyRefreshComponentProps {
|
||||||
|
|||||||
@@ -73,16 +73,6 @@ exports[`SettingsComponent renders 1`] = `
|
|||||||
"partitionKey",
|
"partitionKey",
|
||||||
],
|
],
|
||||||
"rawDataModel": {
|
"rawDataModel": {
|
||||||
"indexingPolicy": {
|
|
||||||
"automatic": true,
|
|
||||||
"compositeIndexes": [],
|
|
||||||
"excludedPaths": [],
|
|
||||||
"fullTextIndexes": [],
|
|
||||||
"includedPaths": [],
|
|
||||||
"indexingMode": "consistent",
|
|
||||||
"spatialIndexes": [],
|
|
||||||
"vectorIndexes": [],
|
|
||||||
},
|
|
||||||
"uniqueKeyPolicy": {
|
"uniqueKeyPolicy": {
|
||||||
"uniqueKeys": [
|
"uniqueKeys": [
|
||||||
{
|
{
|
||||||
@@ -176,16 +166,6 @@ exports[`SettingsComponent renders 1`] = `
|
|||||||
"partitionKey",
|
"partitionKey",
|
||||||
],
|
],
|
||||||
"rawDataModel": {
|
"rawDataModel": {
|
||||||
"indexingPolicy": {
|
|
||||||
"automatic": true,
|
|
||||||
"compositeIndexes": [],
|
|
||||||
"excludedPaths": [],
|
|
||||||
"fullTextIndexes": [],
|
|
||||||
"includedPaths": [],
|
|
||||||
"indexingMode": "consistent",
|
|
||||||
"spatialIndexes": [],
|
|
||||||
"vectorIndexes": [],
|
|
||||||
},
|
|
||||||
"uniqueKeyPolicy": {
|
"uniqueKeyPolicy": {
|
||||||
"uniqueKeys": [
|
"uniqueKeys": [
|
||||||
{
|
{
|
||||||
@@ -260,25 +240,17 @@ exports[`SettingsComponent renders 1`] = `
|
|||||||
indexingPolicyContent={
|
indexingPolicyContent={
|
||||||
{
|
{
|
||||||
"automatic": true,
|
"automatic": true,
|
||||||
"compositeIndexes": [],
|
|
||||||
"excludedPaths": [],
|
"excludedPaths": [],
|
||||||
"fullTextIndexes": [],
|
|
||||||
"includedPaths": [],
|
"includedPaths": [],
|
||||||
"indexingMode": "consistent",
|
"indexingMode": "consistent",
|
||||||
"spatialIndexes": [],
|
|
||||||
"vectorIndexes": [],
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
indexingPolicyContentBaseline={
|
indexingPolicyContentBaseline={
|
||||||
{
|
{
|
||||||
"automatic": true,
|
"automatic": true,
|
||||||
"compositeIndexes": [],
|
|
||||||
"excludedPaths": [],
|
"excludedPaths": [],
|
||||||
"fullTextIndexes": [],
|
|
||||||
"includedPaths": [],
|
"includedPaths": [],
|
||||||
"indexingMode": "consistent",
|
"indexingMode": "consistent",
|
||||||
"spatialIndexes": [],
|
|
||||||
"vectorIndexes": [],
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
isVectorSearchEnabled={false}
|
isVectorSearchEnabled={false}
|
||||||
@@ -352,16 +324,6 @@ exports[`SettingsComponent renders 1`] = `
|
|||||||
"partitionKey",
|
"partitionKey",
|
||||||
],
|
],
|
||||||
"rawDataModel": {
|
"rawDataModel": {
|
||||||
"indexingPolicy": {
|
|
||||||
"automatic": true,
|
|
||||||
"compositeIndexes": [],
|
|
||||||
"excludedPaths": [],
|
|
||||||
"fullTextIndexes": [],
|
|
||||||
"includedPaths": [],
|
|
||||||
"indexingMode": "consistent",
|
|
||||||
"spatialIndexes": [],
|
|
||||||
"vectorIndexes": [],
|
|
||||||
},
|
|
||||||
"uniqueKeyPolicy": {
|
"uniqueKeyPolicy": {
|
||||||
"uniqueKeys": [
|
"uniqueKeys": [
|
||||||
{
|
{
|
||||||
@@ -503,16 +465,6 @@ exports[`SettingsComponent renders 1`] = `
|
|||||||
"partitionKey",
|
"partitionKey",
|
||||||
],
|
],
|
||||||
"rawDataModel": {
|
"rawDataModel": {
|
||||||
"indexingPolicy": {
|
|
||||||
"automatic": true,
|
|
||||||
"compositeIndexes": [],
|
|
||||||
"excludedPaths": [],
|
|
||||||
"fullTextIndexes": [],
|
|
||||||
"includedPaths": [],
|
|
||||||
"indexingMode": "consistent",
|
|
||||||
"spatialIndexes": [],
|
|
||||||
"vectorIndexes": [],
|
|
||||||
},
|
|
||||||
"uniqueKeyPolicy": {
|
"uniqueKeyPolicy": {
|
||||||
"uniqueKeys": [
|
"uniqueKeys": [
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -1,107 +0,0 @@
|
|||||||
import { CircleFilled } from "@fluentui/react-icons";
|
|
||||||
import type { IIndexMetric } from "Explorer/Tabs/QueryTab/ResultsView";
|
|
||||||
import { useIndexAdvisorStyles } from "Explorer/Tabs/QueryTab/StylesAdvisor";
|
|
||||||
import * as React from "react";
|
|
||||||
|
|
||||||
// SDK response format
|
|
||||||
export interface IndexMetricsResponse {
|
|
||||||
UtilizedIndexes?: {
|
|
||||||
SingleIndexes?: Array<{ IndexSpec: string; IndexImpactScore?: string }>;
|
|
||||||
CompositeIndexes?: Array<{ IndexSpecs: string[]; IndexImpactScore?: string }>;
|
|
||||||
};
|
|
||||||
PotentialIndexes?: {
|
|
||||||
SingleIndexes?: Array<{ IndexSpec: string; IndexImpactScore?: string }>;
|
|
||||||
CompositeIndexes?: Array<{ IndexSpecs: string[]; IndexImpactScore?: string }>;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function parseIndexMetrics(indexMetrics: IndexMetricsResponse): {
|
|
||||||
included: IIndexMetric[];
|
|
||||||
notIncluded: IIndexMetric[];
|
|
||||||
} {
|
|
||||||
const included: IIndexMetric[] = [];
|
|
||||||
const notIncluded: IIndexMetric[] = [];
|
|
||||||
|
|
||||||
// Process UtilizedIndexes (Included in Current Policy)
|
|
||||||
if (indexMetrics.UtilizedIndexes) {
|
|
||||||
// Single indexes
|
|
||||||
indexMetrics.UtilizedIndexes.SingleIndexes?.forEach((index) => {
|
|
||||||
included.push({
|
|
||||||
index: index.IndexSpec,
|
|
||||||
impact: index.IndexImpactScore || "Utilized",
|
|
||||||
section: "Included",
|
|
||||||
path: index.IndexSpec,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Composite indexes
|
|
||||||
indexMetrics.UtilizedIndexes.CompositeIndexes?.forEach((index) => {
|
|
||||||
const compositeSpec = index.IndexSpecs.join(", ");
|
|
||||||
included.push({
|
|
||||||
index: compositeSpec,
|
|
||||||
impact: index.IndexImpactScore || "Utilized",
|
|
||||||
section: "Included",
|
|
||||||
composite: index.IndexSpecs.map((spec) => {
|
|
||||||
const [path, order] = spec.trim().split(/\s+/);
|
|
||||||
return {
|
|
||||||
path: path.trim(),
|
|
||||||
order: order?.toLowerCase() === "desc" ? "descending" : "ascending",
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Process PotentialIndexes (Not Included in Current Policy)
|
|
||||||
if (indexMetrics.PotentialIndexes) {
|
|
||||||
// Single indexes
|
|
||||||
indexMetrics.PotentialIndexes.SingleIndexes?.forEach((index) => {
|
|
||||||
notIncluded.push({
|
|
||||||
index: index.IndexSpec,
|
|
||||||
impact: index.IndexImpactScore || "Unknown",
|
|
||||||
section: "Not Included",
|
|
||||||
path: index.IndexSpec,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Composite indexes
|
|
||||||
indexMetrics.PotentialIndexes.CompositeIndexes?.forEach((index) => {
|
|
||||||
const compositeSpec = index.IndexSpecs.join(", ");
|
|
||||||
notIncluded.push({
|
|
||||||
index: compositeSpec,
|
|
||||||
impact: index.IndexImpactScore || "Unknown",
|
|
||||||
section: "Not Included",
|
|
||||||
composite: index.IndexSpecs.map((spec) => {
|
|
||||||
const [path, order] = spec.trim().split(/\s+/);
|
|
||||||
return {
|
|
||||||
path: path.trim(),
|
|
||||||
order: order?.toLowerCase() === "desc" ? "descending" : "ascending",
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return { included, notIncluded };
|
|
||||||
}
|
|
||||||
|
|
||||||
export const renderImpactDots = (impact: string): JSX.Element => {
|
|
||||||
const style = useIndexAdvisorStyles();
|
|
||||||
let count = 0;
|
|
||||||
|
|
||||||
if (impact === "High") {
|
|
||||||
count = 3;
|
|
||||||
} else if (impact === "Medium") {
|
|
||||||
count = 2;
|
|
||||||
} else if (impact === "Low") {
|
|
||||||
count = 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={style.indexAdvisorImpactDots}>
|
|
||||||
{Array.from({ length: count }).map((_, i) => (
|
|
||||||
<CircleFilled key={i} className={style.indexAdvisorImpactDot} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -3,21 +3,18 @@ import QueryError from "Common/QueryError";
|
|||||||
import { IndeterminateProgressBar } from "Explorer/Controls/IndeterminateProgressBar";
|
import { IndeterminateProgressBar } from "Explorer/Controls/IndeterminateProgressBar";
|
||||||
import { MessageBanner } from "Explorer/Controls/MessageBanner";
|
import { MessageBanner } from "Explorer/Controls/MessageBanner";
|
||||||
import { useQueryTabStyles } from "Explorer/Tabs/QueryTab/Styles";
|
import { useQueryTabStyles } from "Explorer/Tabs/QueryTab/Styles";
|
||||||
import useZoomLevel from "hooks/useZoomLevel";
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { conditionalClass } from "Utils/StyleUtils";
|
|
||||||
import RunQuery from "../../../../images/RunQuery.png";
|
import RunQuery from "../../../../images/RunQuery.png";
|
||||||
import { QueryResults } from "../../../Contracts/ViewModels";
|
import { QueryResults } from "../../../Contracts/ViewModels";
|
||||||
import { ErrorList } from "./ErrorList";
|
import { ErrorList } from "./ErrorList";
|
||||||
import { ResultsView } from "./ResultsView";
|
import { ResultsView } from "./ResultsView";
|
||||||
|
import useZoomLevel from "hooks/useZoomLevel";
|
||||||
|
import { conditionalClass } from "Utils/StyleUtils";
|
||||||
|
|
||||||
export interface ResultsViewProps {
|
export interface ResultsViewProps {
|
||||||
isMongoDB: boolean;
|
isMongoDB: boolean;
|
||||||
queryResults: QueryResults;
|
queryResults: QueryResults;
|
||||||
executeQueryDocumentsPage: (firstItemIndex: number) => Promise<void>;
|
executeQueryDocumentsPage: (firstItemIndex: number) => Promise<void>;
|
||||||
queryEditorContent?: string;
|
|
||||||
databaseId?: string;
|
|
||||||
containerId?: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface QueryResultProps extends ResultsViewProps {
|
interface QueryResultProps extends ResultsViewProps {
|
||||||
@@ -52,8 +49,6 @@ export const QueryResultSection: React.FC<QueryResultProps> = ({
|
|||||||
queryResults,
|
queryResults,
|
||||||
executeQueryDocumentsPage,
|
executeQueryDocumentsPage,
|
||||||
isExecuting,
|
isExecuting,
|
||||||
databaseId,
|
|
||||||
containerId,
|
|
||||||
}: QueryResultProps): JSX.Element => {
|
}: QueryResultProps): JSX.Element => {
|
||||||
const styles = useQueryTabStyles();
|
const styles = useQueryTabStyles();
|
||||||
const maybeSubQuery = queryEditorContent && /.*\(.*SELECT.*\)/i.test(queryEditorContent);
|
const maybeSubQuery = queryEditorContent && /.*\(.*SELECT.*\)/i.test(queryEditorContent);
|
||||||
@@ -96,9 +91,6 @@ export const QueryResultSection: React.FC<QueryResultProps> = ({
|
|||||||
queryResults={queryResults}
|
queryResults={queryResults}
|
||||||
executeQueryDocumentsPage={executeQueryDocumentsPage}
|
executeQueryDocumentsPage={executeQueryDocumentsPage}
|
||||||
isMongoDB={isMongoDB}
|
isMongoDB={isMongoDB}
|
||||||
queryEditorContent={queryEditorContent}
|
|
||||||
databaseId={databaseId}
|
|
||||||
containerId={containerId}
|
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<ExecuteQueryCallToAction />
|
<ExecuteQueryCallToAction />
|
||||||
|
|||||||
@@ -52,9 +52,8 @@ describe("QueryTabComponent", () => {
|
|||||||
copilotVersion: "v3.0",
|
copilotVersion: "v3.0",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const propsMock: Readonly<IQueryTabComponentProps> = {
|
const propsMock: Readonly<IQueryTabComponentProps> = {
|
||||||
collection: { databaseId: "CopilotSampleDB", id: () => "CopilotContainer" },
|
collection: { databaseId: "CopilotSampleDB" },
|
||||||
onTabAccessor: () => jest.fn(),
|
onTabAccessor: () => jest.fn(),
|
||||||
isExecutionError: false,
|
isExecutionError: false,
|
||||||
tabId: "mockTabId",
|
tabId: "mockTabId",
|
||||||
|
|||||||
@@ -27,7 +27,6 @@ import { TabsState, useTabs } from "hooks/useTabs";
|
|||||||
import React, { Fragment, createRef } from "react";
|
import React, { Fragment, createRef } from "react";
|
||||||
import "react-splitter-layout/lib/index.css";
|
import "react-splitter-layout/lib/index.css";
|
||||||
import { format } from "react-string-format";
|
import { format } from "react-string-format";
|
||||||
import create from "zustand";
|
|
||||||
//TODO: Uncomment next two lines when query copilot is reinstated in DE
|
//TODO: Uncomment next two lines when query copilot is reinstated in DE
|
||||||
// import QueryCommandIcon from "../../../../images/CopilotCommand.svg";
|
// import QueryCommandIcon from "../../../../images/CopilotCommand.svg";
|
||||||
// import LaunchCopilot from "../../../../images/CopilotTabIcon.svg";
|
// import LaunchCopilot from "../../../../images/CopilotTabIcon.svg";
|
||||||
@@ -57,20 +56,6 @@ import { SaveQueryPane } from "../../Panes/SaveQueryPane/SaveQueryPane";
|
|||||||
import TabsBase from "../TabsBase";
|
import TabsBase from "../TabsBase";
|
||||||
import "./QueryTabComponent.less";
|
import "./QueryTabComponent.less";
|
||||||
|
|
||||||
export interface QueryMetadataStore {
|
|
||||||
userQuery: string;
|
|
||||||
databaseId: string;
|
|
||||||
containerId: string;
|
|
||||||
setMetadata: (query1: string, db: string, container: string) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const useQueryMetadataStore = create<QueryMetadataStore>((set) => ({
|
|
||||||
userQuery: "",
|
|
||||||
databaseId: "",
|
|
||||||
containerId: "",
|
|
||||||
setMetadata: (query1, db, container) => set({ userQuery: query1, databaseId: db, containerId: container }),
|
|
||||||
}));
|
|
||||||
|
|
||||||
enum ToggleState {
|
enum ToggleState {
|
||||||
Result,
|
Result,
|
||||||
QueryMetrics,
|
QueryMetrics,
|
||||||
@@ -275,10 +260,6 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
|
|||||||
}
|
}
|
||||||
|
|
||||||
public onExecuteQueryClick = async (): Promise<void> => {
|
public onExecuteQueryClick = async (): Promise<void> => {
|
||||||
const query1 = this.state.sqlQueryEditorContent;
|
|
||||||
const db = this.props.collection.databaseId;
|
|
||||||
const container = this.props.collection.id();
|
|
||||||
useQueryMetadataStore.getState().setMetadata(query1, db, container);
|
|
||||||
this._iterator = undefined;
|
this._iterator = undefined;
|
||||||
|
|
||||||
setTimeout(async () => {
|
setTimeout(async () => {
|
||||||
@@ -794,8 +775,6 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
|
|||||||
errors={this.props.copilotStore?.errors}
|
errors={this.props.copilotStore?.errors}
|
||||||
isExecuting={this.props.copilotStore?.isExecuting}
|
isExecuting={this.props.copilotStore?.isExecuting}
|
||||||
queryResults={this.props.copilotStore?.queryResults}
|
queryResults={this.props.copilotStore?.queryResults}
|
||||||
databaseId={this.props.collection.databaseId}
|
|
||||||
containerId={this.props.collection.id()}
|
|
||||||
executeQueryDocumentsPage={(firstItemIndex: number) =>
|
executeQueryDocumentsPage={(firstItemIndex: number) =>
|
||||||
QueryDocumentsPerPage(
|
QueryDocumentsPerPage(
|
||||||
firstItemIndex,
|
firstItemIndex,
|
||||||
@@ -811,8 +790,6 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
|
|||||||
errors={this.state.errors}
|
errors={this.state.errors}
|
||||||
isExecuting={this.state.isExecuting}
|
isExecuting={this.state.isExecuting}
|
||||||
queryResults={this.state.queryResults}
|
queryResults={this.state.queryResults}
|
||||||
databaseId={this.props.collection.databaseId}
|
|
||||||
containerId={this.props.collection.id()}
|
|
||||||
executeQueryDocumentsPage={(firstItemIndex: number) =>
|
executeQueryDocumentsPage={(firstItemIndex: number) =>
|
||||||
this._executeQueryDocumentsPage(firstItemIndex)
|
this._executeQueryDocumentsPage(firstItemIndex)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,170 +0,0 @@
|
|||||||
import "@testing-library/jest-dom";
|
|
||||||
import { render, screen, waitFor } from "@testing-library/react";
|
|
||||||
import { IndexAdvisorTab } from "Explorer/Tabs/QueryTab/ResultsView";
|
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
const mockReplace = jest.fn();
|
|
||||||
const mockFetchAll = jest.fn();
|
|
||||||
const mockRead = jest.fn();
|
|
||||||
const mockLogConsoleProgress = jest.fn();
|
|
||||||
const mockHandleError = jest.fn();
|
|
||||||
|
|
||||||
const indexMetricsResponse = {
|
|
||||||
UtilizedIndexes: {
|
|
||||||
SingleIndexes: [{ IndexSpec: "/foo/?", IndexImpactScore: "High" }],
|
|
||||||
CompositeIndexes: [{ IndexSpecs: ["/baz/? DESC", "/qux/? ASC"], IndexImpactScore: "Low" }],
|
|
||||||
},
|
|
||||||
PotentialIndexes: {
|
|
||||||
SingleIndexes: [{ IndexSpec: "/bar/?", IndexImpactScore: "Medium" }],
|
|
||||||
CompositeIndexes: [] as Array<{ IndexSpecs: string[]; IndexImpactScore?: string }>,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const mockQueryResults = {
|
|
||||||
documents: [] as unknown[],
|
|
||||||
hasMoreResults: false,
|
|
||||||
itemCount: 0,
|
|
||||||
firstItemIndex: 0,
|
|
||||||
lastItemIndex: 0,
|
|
||||||
requestCharge: 0,
|
|
||||||
activityId: "test-activity-id",
|
|
||||||
};
|
|
||||||
|
|
||||||
mockRead.mockResolvedValue({
|
|
||||||
resource: {
|
|
||||||
indexingPolicy: {
|
|
||||||
automatic: true,
|
|
||||||
indexingMode: "consistent",
|
|
||||||
includedPaths: [{ path: "/*" }, { path: "/foo/?" }],
|
|
||||||
excludedPaths: [],
|
|
||||||
},
|
|
||||||
partitionKey: "pk",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
mockReplace.mockResolvedValue({
|
|
||||||
resource: {
|
|
||||||
indexingPolicy: {
|
|
||||||
automatic: true,
|
|
||||||
indexingMode: "consistent",
|
|
||||||
includedPaths: [{ path: "/*" }],
|
|
||||||
excludedPaths: [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
jest.mock("Common/CosmosClient", () => ({
|
|
||||||
client: () => ({
|
|
||||||
database: () => ({
|
|
||||||
container: () => ({
|
|
||||||
items: {
|
|
||||||
query: () => ({
|
|
||||||
fetchAll: mockFetchAll,
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
read: mockRead,
|
|
||||||
replace: mockReplace,
|
|
||||||
}),
|
|
||||||
}),
|
|
||||||
}),
|
|
||||||
}));
|
|
||||||
|
|
||||||
jest.mock("./StylesAdvisor", () => ({
|
|
||||||
useIndexAdvisorStyles: () => ({}),
|
|
||||||
}));
|
|
||||||
|
|
||||||
jest.mock("../../../Utils/NotificationConsoleUtils", () => ({
|
|
||||||
logConsoleProgress: (...args: unknown[]) => {
|
|
||||||
mockLogConsoleProgress(...args);
|
|
||||||
return () => {};
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
jest.mock("../../../Common/ErrorHandlingUtils", () => ({
|
|
||||||
handleError: (...args: unknown[]) => mockHandleError(...args),
|
|
||||||
}));
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
jest.clearAllMocks();
|
|
||||||
mockFetchAll.mockResolvedValue({ indexMetrics: indexMetricsResponse });
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("IndexAdvisorTab Basic Tests", () => {
|
|
||||||
test("component renders without crashing", () => {
|
|
||||||
const { container } = render(
|
|
||||||
<IndexAdvisorTab queryEditorContent="SELECT * FROM c" databaseId="db1" containerId="col1" />,
|
|
||||||
);
|
|
||||||
expect(container).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
test("renders component and handles missing parameters", () => {
|
|
||||||
const { container } = render(<IndexAdvisorTab />);
|
|
||||||
expect(container).toBeTruthy();
|
|
||||||
// Should not crash when parameters are missing
|
|
||||||
});
|
|
||||||
|
|
||||||
test("fetches index metrics with query results", async () => {
|
|
||||||
render(
|
|
||||||
<IndexAdvisorTab
|
|
||||||
queryResults={mockQueryResults}
|
|
||||||
queryEditorContent="SELECT * FROM c"
|
|
||||||
databaseId="db1"
|
|
||||||
containerId="col1"
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
await waitFor(() => expect(mockFetchAll).toHaveBeenCalled());
|
|
||||||
});
|
|
||||||
|
|
||||||
test("displays content after loading", async () => {
|
|
||||||
render(
|
|
||||||
<IndexAdvisorTab
|
|
||||||
queryResults={mockQueryResults}
|
|
||||||
queryEditorContent="SELECT * FROM c"
|
|
||||||
databaseId="db1"
|
|
||||||
containerId="col1"
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
// Wait for the component to finish loading
|
|
||||||
await waitFor(() => expect(mockFetchAll).toHaveBeenCalled());
|
|
||||||
// Component should have rendered some content
|
|
||||||
expect(screen.getByText(/Index Advisor/i)).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
test("calls log console progress when fetching metrics", async () => {
|
|
||||||
render(
|
|
||||||
<IndexAdvisorTab
|
|
||||||
queryResults={mockQueryResults}
|
|
||||||
queryEditorContent="SELECT * FROM c"
|
|
||||||
databaseId="db1"
|
|
||||||
containerId="col1"
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
await waitFor(() => expect(mockLogConsoleProgress).toHaveBeenCalled());
|
|
||||||
});
|
|
||||||
|
|
||||||
test("handles error when fetch fails", async () => {
|
|
||||||
mockFetchAll.mockRejectedValueOnce(new Error("fetch failed"));
|
|
||||||
render(
|
|
||||||
<IndexAdvisorTab
|
|
||||||
queryResults={mockQueryResults}
|
|
||||||
queryEditorContent="SELECT * FROM c"
|
|
||||||
databaseId="db1"
|
|
||||||
containerId="col1"
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
await waitFor(() => expect(mockHandleError).toHaveBeenCalled(), { timeout: 3000 });
|
|
||||||
});
|
|
||||||
|
|
||||||
test("renders with all required props", () => {
|
|
||||||
const { container } = render(
|
|
||||||
<IndexAdvisorTab
|
|
||||||
queryResults={mockQueryResults}
|
|
||||||
queryEditorContent="SELECT * FROM c"
|
|
||||||
databaseId="testDb"
|
|
||||||
containerId="testContainer"
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
expect(container).toBeTruthy();
|
|
||||||
expect(container.firstChild).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,8 +1,5 @@
|
|||||||
import type { CompositePath, IndexingPolicy } from "@azure/cosmos";
|
|
||||||
import { FontIcon } from "@fluentui/react";
|
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
Checkbox,
|
|
||||||
DataGrid,
|
DataGrid,
|
||||||
DataGridBody,
|
DataGridBody,
|
||||||
DataGridCell,
|
DataGridCell,
|
||||||
@@ -11,45 +8,28 @@ import {
|
|||||||
DataGridRow,
|
DataGridRow,
|
||||||
SelectTabData,
|
SelectTabData,
|
||||||
SelectTabEvent,
|
SelectTabEvent,
|
||||||
Spinner,
|
|
||||||
Tab,
|
Tab,
|
||||||
TabList,
|
TabList,
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableColumnDefinition,
|
TableColumnDefinition,
|
||||||
TableHeader,
|
|
||||||
TableRow,
|
|
||||||
createTableColumn,
|
createTableColumn,
|
||||||
} from "@fluentui/react-components";
|
} from "@fluentui/react-components";
|
||||||
import { ArrowDownloadRegular, ChevronDown20Regular, ChevronRight20Regular, CopyRegular } from "@fluentui/react-icons";
|
import { ArrowDownloadRegular, CopyRegular } from "@fluentui/react-icons";
|
||||||
import copy from "clipboard-copy";
|
|
||||||
import { HttpHeaders } from "Common/Constants";
|
import { HttpHeaders } from "Common/Constants";
|
||||||
import MongoUtility from "Common/MongoUtility";
|
import MongoUtility from "Common/MongoUtility";
|
||||||
import { QueryMetrics } from "Contracts/DataModels";
|
import { QueryMetrics } from "Contracts/DataModels";
|
||||||
import { QueryResults } from "Contracts/ViewModels";
|
|
||||||
import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
|
import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
|
||||||
import {
|
|
||||||
parseIndexMetrics,
|
|
||||||
renderImpactDots,
|
|
||||||
type IndexMetricsResponse,
|
|
||||||
} from "Explorer/Tabs/QueryTab/IndexAdvisorUtils";
|
|
||||||
import { IDocument } from "Explorer/Tabs/QueryTab/QueryTabComponent";
|
import { IDocument } from "Explorer/Tabs/QueryTab/QueryTabComponent";
|
||||||
import { useQueryTabStyles } from "Explorer/Tabs/QueryTab/Styles";
|
import { useQueryTabStyles } from "Explorer/Tabs/QueryTab/Styles";
|
||||||
import React, { useCallback, useEffect, useState } from "react";
|
|
||||||
import { userContext } from "UserContext";
|
import { userContext } from "UserContext";
|
||||||
import { logConsoleProgress } from "Utils/NotificationConsoleUtils";
|
import copy from "clipboard-copy";
|
||||||
import create from "zustand";
|
import React, { useCallback, useState } from "react";
|
||||||
import { client } from "../../../Common/CosmosClient";
|
|
||||||
import { handleError } from "../../../Common/ErrorHandlingUtils";
|
|
||||||
import { sampleDataClient } from "../../../Common/SampleDataClient";
|
|
||||||
import { ResultsViewProps } from "./QueryResultSection";
|
import { ResultsViewProps } from "./QueryResultSection";
|
||||||
import { useIndexAdvisorStyles } from "./StylesAdvisor";
|
|
||||||
enum ResultsTabs {
|
enum ResultsTabs {
|
||||||
Results = "results",
|
Results = "results",
|
||||||
QueryStats = "queryStats",
|
QueryStats = "queryStats",
|
||||||
IndexAdvisor = "indexadv",
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const ResultsTab: React.FC<ResultsViewProps> = ({ queryResults, isMongoDB, executeQueryDocumentsPage }) => {
|
const ResultsTab: React.FC<ResultsViewProps> = ({ queryResults, isMongoDB, executeQueryDocumentsPage }) => {
|
||||||
const styles = useQueryTabStyles();
|
const styles = useQueryTabStyles();
|
||||||
/* eslint-disable react/prop-types */
|
/* eslint-disable react/prop-types */
|
||||||
@@ -543,331 +523,14 @@ const QueryStatsTab: React.FC<Pick<ResultsViewProps, "queryResults">> = ({ query
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export interface IIndexMetric {
|
export const ResultsView: React.FC<ResultsViewProps> = ({ isMongoDB, queryResults, executeQueryDocumentsPage }) => {
|
||||||
index: string;
|
|
||||||
impact: string;
|
|
||||||
section: "Included" | "Not Included" | "Header";
|
|
||||||
path?: string;
|
|
||||||
composite?: { path: string; order: string }[];
|
|
||||||
}
|
|
||||||
export const IndexAdvisorTab: React.FC<{
|
|
||||||
queryResults?: QueryResults;
|
|
||||||
queryEditorContent?: string;
|
|
||||||
databaseId?: string;
|
|
||||||
containerId?: string;
|
|
||||||
}> = ({ queryResults, queryEditorContent, databaseId, containerId }) => {
|
|
||||||
const style = useIndexAdvisorStyles();
|
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [indexMetrics, setIndexMetrics] = useState<IndexMetricsResponse | null>(null);
|
|
||||||
const [showIncluded, setShowIncluded] = useState(true);
|
|
||||||
const [showNotIncluded, setShowNotIncluded] = useState(true);
|
|
||||||
const [selectedIndexes, setSelectedIndexes] = useState<IIndexMetric[]>([]);
|
|
||||||
const [selectAll, setSelectAll] = useState(false);
|
|
||||||
const [updateMessageShown, setUpdateMessageShown] = useState(false);
|
|
||||||
const [included, setIncludedIndexes] = useState<IIndexMetric[]>([]);
|
|
||||||
const [notIncluded, setNotIncludedIndexes] = useState<IIndexMetric[]>([]);
|
|
||||||
const [isUpdating, setIsUpdating] = useState(false);
|
|
||||||
const [justUpdatedPolicy, setJustUpdatedPolicy] = useState(false);
|
|
||||||
const indexingMetricsDocLink = "https://learn.microsoft.com/azure/cosmos-db/nosql/index-metrics";
|
|
||||||
|
|
||||||
const fetchIndexMetrics = async () => {
|
|
||||||
if (!queryEditorContent || !databaseId || !containerId) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading(true);
|
|
||||||
const clearMessage = logConsoleProgress(`Querying items with IndexMetrics in container ${containerId}`);
|
|
||||||
try {
|
|
||||||
const querySpec = {
|
|
||||||
query: queryEditorContent,
|
|
||||||
};
|
|
||||||
|
|
||||||
// Use sampleDataClient for CopilotSampleDB, regular client for other databases
|
|
||||||
const cosmosClient = databaseId === "CopilotSampleDB" ? sampleDataClient() : client();
|
|
||||||
|
|
||||||
const sdkResponse = await cosmosClient
|
|
||||||
.database(databaseId)
|
|
||||||
.container(containerId)
|
|
||||||
.items.query(querySpec, {
|
|
||||||
populateIndexMetrics: true,
|
|
||||||
})
|
|
||||||
.fetchAll();
|
|
||||||
|
|
||||||
const parsedMetrics =
|
|
||||||
typeof sdkResponse.indexMetrics === "string" ? JSON.parse(sdkResponse.indexMetrics) : sdkResponse.indexMetrics;
|
|
||||||
|
|
||||||
setIndexMetrics(parsedMetrics);
|
|
||||||
} catch (error) {
|
|
||||||
handleError(error, "queryItemsWithIndexMetrics", `Error querying items from ${containerId}`);
|
|
||||||
} finally {
|
|
||||||
clearMessage();
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Fetch index metrics when query results change (i.e., when Execute Query is clicked)
|
|
||||||
useEffect(() => {
|
|
||||||
if (queryEditorContent && databaseId && containerId && queryResults) {
|
|
||||||
fetchIndexMetrics();
|
|
||||||
}
|
|
||||||
}, [queryResults]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!indexMetrics) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { included, notIncluded } = parseIndexMetrics(indexMetrics);
|
|
||||||
setIncludedIndexes(included);
|
|
||||||
setNotIncludedIndexes(notIncluded);
|
|
||||||
if (justUpdatedPolicy) {
|
|
||||||
setJustUpdatedPolicy(false);
|
|
||||||
} else {
|
|
||||||
setUpdateMessageShown(false);
|
|
||||||
}
|
|
||||||
}, [indexMetrics]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const allSelected =
|
|
||||||
notIncluded.length > 0 && notIncluded.every((item) => selectedIndexes.some((s) => s.index === item.index));
|
|
||||||
setSelectAll(allSelected);
|
|
||||||
}, [selectedIndexes, notIncluded]);
|
|
||||||
|
|
||||||
const handleCheckboxChange = (indexObj: IIndexMetric, checked: boolean) => {
|
|
||||||
if (checked) {
|
|
||||||
setSelectedIndexes((prev) => [...prev, indexObj]);
|
|
||||||
} else {
|
|
||||||
setSelectedIndexes((prev) => prev.filter((item) => item.index !== indexObj.index));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSelectAll = (checked: boolean) => {
|
|
||||||
setSelectAll(checked);
|
|
||||||
setSelectedIndexes(checked ? notIncluded : []);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleUpdatePolicy = async () => {
|
|
||||||
setIsUpdating(true);
|
|
||||||
try {
|
|
||||||
const containerRef = client().database(databaseId).container(containerId);
|
|
||||||
const { resource: containerDef } = await containerRef.read();
|
|
||||||
|
|
||||||
const newIncludedPaths = selectedIndexes
|
|
||||||
.filter((index) => !index.composite)
|
|
||||||
.map((index) => {
|
|
||||||
return {
|
|
||||||
path: index.path,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
const newCompositeIndexes: CompositePath[][] = selectedIndexes
|
|
||||||
.filter((index) => Array.isArray(index.composite))
|
|
||||||
.map(
|
|
||||||
(index) =>
|
|
||||||
(index.composite as { path: string; order: string }[]).map((comp) => ({
|
|
||||||
path: comp.path,
|
|
||||||
order: comp.order === "descending" ? "descending" : "ascending",
|
|
||||||
})) as CompositePath[],
|
|
||||||
);
|
|
||||||
|
|
||||||
const updatedPolicy: IndexingPolicy = {
|
|
||||||
...containerDef.indexingPolicy,
|
|
||||||
includedPaths: [...(containerDef.indexingPolicy?.includedPaths || []), ...newIncludedPaths],
|
|
||||||
compositeIndexes: [...(containerDef.indexingPolicy?.compositeIndexes || []), ...newCompositeIndexes],
|
|
||||||
automatic: containerDef.indexingPolicy?.automatic ?? true,
|
|
||||||
indexingMode: containerDef.indexingPolicy?.indexingMode ?? "consistent",
|
|
||||||
excludedPaths: containerDef.indexingPolicy?.excludedPaths ?? [],
|
|
||||||
};
|
|
||||||
await containerRef.replace({
|
|
||||||
id: containerId,
|
|
||||||
partitionKey: containerDef.partitionKey,
|
|
||||||
indexingPolicy: updatedPolicy,
|
|
||||||
});
|
|
||||||
useIndexingPolicyStore.getState().setIndexingPolicyFor(containerId, updatedPolicy);
|
|
||||||
const selectedIndexSet = new Set(selectedIndexes.map((s) => s.index));
|
|
||||||
const updatedNotIncluded: typeof notIncluded = [];
|
|
||||||
const newlyIncluded: typeof included = [];
|
|
||||||
for (const item of notIncluded) {
|
|
||||||
if (selectedIndexSet.has(item.index)) {
|
|
||||||
newlyIncluded.push(item);
|
|
||||||
} else {
|
|
||||||
updatedNotIncluded.push(item);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const newIncluded = [...included, ...newlyIncluded];
|
|
||||||
const newNotIncluded = updatedNotIncluded;
|
|
||||||
setIncludedIndexes(newIncluded);
|
|
||||||
setNotIncludedIndexes(newNotIncluded);
|
|
||||||
setSelectedIndexes([]);
|
|
||||||
setSelectAll(false);
|
|
||||||
setUpdateMessageShown(true);
|
|
||||||
setJustUpdatedPolicy(true);
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Failed to update indexing policy:", err);
|
|
||||||
} finally {
|
|
||||||
setIsUpdating(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderRow = (item: IIndexMetric, index: number) => {
|
|
||||||
const isHeader = item.section === "Header";
|
|
||||||
const isNotIncluded = item.section === "Not Included";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TableRow key={index}>
|
|
||||||
<TableCell colSpan={2}>
|
|
||||||
<div className={style.indexAdvisorGrid}>
|
|
||||||
{isNotIncluded ? (
|
|
||||||
<Checkbox
|
|
||||||
checked={selectedIndexes.some((selected) => selected.index === item.index)}
|
|
||||||
onChange={(_, data) => handleCheckboxChange(item, data.checked === true)}
|
|
||||||
/>
|
|
||||||
) : isHeader && item.index === "Not Included in Current Policy" && notIncluded.length > 0 ? (
|
|
||||||
<Checkbox checked={selectAll} onChange={(_, data) => handleSelectAll(data.checked === true)} />
|
|
||||||
) : (
|
|
||||||
<div className={style.indexAdvisorCheckboxSpacer}></div>
|
|
||||||
)}
|
|
||||||
{isHeader ? (
|
|
||||||
<span
|
|
||||||
style={{ cursor: "pointer" }}
|
|
||||||
onClick={() => {
|
|
||||||
if (item.index === "Included in Current Policy") {
|
|
||||||
setShowIncluded(!showIncluded);
|
|
||||||
} else if (item.index === "Not Included in Current Policy") {
|
|
||||||
setShowNotIncluded(!showNotIncluded);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{item.index === "Included in Current Policy" ? (
|
|
||||||
showIncluded ? (
|
|
||||||
<ChevronDown20Regular />
|
|
||||||
) : (
|
|
||||||
<ChevronRight20Regular />
|
|
||||||
)
|
|
||||||
) : showNotIncluded ? (
|
|
||||||
<ChevronDown20Regular />
|
|
||||||
) : (
|
|
||||||
<ChevronRight20Regular />
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<div className={style.indexAdvisorChevronSpacer}></div>
|
|
||||||
)}
|
|
||||||
<div className={isHeader ? style.indexAdvisorRowBold : style.indexAdvisorRowNormal}>{item.index}</div>
|
|
||||||
<div className={isHeader ? style.indexAdvisorRowImpactHeader : style.indexAdvisorRowImpact}>
|
|
||||||
{!isHeader && item.impact}
|
|
||||||
</div>
|
|
||||||
<div>{!isHeader && renderImpactDots(item.impact)}</div>
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
const indexMetricItems = React.useMemo(() => {
|
|
||||||
const items: IIndexMetric[] = [];
|
|
||||||
items.push({ index: "Not Included in Current Policy", impact: "", section: "Header" });
|
|
||||||
if (showNotIncluded) {
|
|
||||||
notIncluded.forEach((item) => items.push({ ...item, section: "Not Included" }));
|
|
||||||
}
|
|
||||||
items.push({ index: "Included in Current Policy", impact: "", section: "Header" });
|
|
||||||
if (showIncluded) {
|
|
||||||
included.forEach((item) => items.push({ ...item, section: "Included" }));
|
|
||||||
}
|
|
||||||
return items;
|
|
||||||
}, [included, notIncluded, showIncluded, showNotIncluded]);
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Spinner
|
|
||||||
size="small"
|
|
||||||
style={
|
|
||||||
{
|
|
||||||
"--spinner-size": "16px",
|
|
||||||
"--spinner-thickness": "2px",
|
|
||||||
"--spinner-color": "#0078D4",
|
|
||||||
} as React.CSSProperties
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div className={style.indexAdvisorMessage}>
|
|
||||||
{updateMessageShown ? (
|
|
||||||
<>
|
|
||||||
<span className={style.indexAdvisorSuccessIcon}>
|
|
||||||
<FontIcon iconName="CheckMark" style={{ color: "white", fontSize: 12 }} />
|
|
||||||
</span>
|
|
||||||
<span>
|
|
||||||
Your indexing policy has been updated with the new included paths. You may review the changes in Scale &
|
|
||||||
Settings.
|
|
||||||
</span>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<span>
|
|
||||||
Index Advisor uses Indexing Metrics to suggest query paths that, when included in your indexing policy,
|
|
||||||
can improve the performance of this query by reducing RU costs and lowering latency.{" "}
|
|
||||||
<a href={indexingMetricsDocLink} target="_blank" rel="noopener noreferrer">
|
|
||||||
Learn more about Indexing Metrics
|
|
||||||
</a>
|
|
||||||
.{" "}
|
|
||||||
</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className={style.indexAdvisorTitle}>Indexes analysis</div>
|
|
||||||
<Table className={style.indexAdvisorTable}>
|
|
||||||
<TableHeader>
|
|
||||||
<TableRow>
|
|
||||||
<TableCell colSpan={2}>
|
|
||||||
<div className={style.indexAdvisorGrid}>
|
|
||||||
<div className={style.indexAdvisorCheckboxSpacer}></div>
|
|
||||||
<div className={style.indexAdvisorChevronSpacer}></div>
|
|
||||||
<div>Index</div>
|
|
||||||
<div>
|
|
||||||
<span style={{ whiteSpace: "nowrap" }}>Estimated Impact</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
</TableHeader>
|
|
||||||
<TableBody>{indexMetricItems.map(renderRow)}</TableBody>
|
|
||||||
</Table>
|
|
||||||
{selectedIndexes.length > 0 && (
|
|
||||||
<div className={style.indexAdvisorButtonBar}>
|
|
||||||
{isUpdating ? (
|
|
||||||
<div className={style.indexAdvisorButtonSpinner}>
|
|
||||||
<Spinner size="tiny" />{" "}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<button onClick={handleUpdatePolicy} className={style.indexAdvisorButton}>
|
|
||||||
Update Indexing Policy with selected index(es)
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export const ResultsView: React.FC<ResultsViewProps> = ({
|
|
||||||
isMongoDB,
|
|
||||||
queryResults,
|
|
||||||
executeQueryDocumentsPage,
|
|
||||||
queryEditorContent,
|
|
||||||
databaseId,
|
|
||||||
containerId,
|
|
||||||
}) => {
|
|
||||||
const styles = useQueryTabStyles();
|
const styles = useQueryTabStyles();
|
||||||
const [activeTab, setActiveTab] = useState<ResultsTabs>(ResultsTabs.Results);
|
const [activeTab, setActiveTab] = useState<ResultsTabs>(ResultsTabs.Results);
|
||||||
|
|
||||||
const onTabSelect = useCallback((event: SelectTabEvent, data: SelectTabData) => {
|
const onTabSelect = useCallback((event: SelectTabEvent, data: SelectTabData) => {
|
||||||
setActiveTab(data.value as ResultsTabs);
|
setActiveTab(data.value as ResultsTabs);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div data-test="QueryTab/ResultsPane/ResultsView" className={styles.queryResultsTabPanel}>
|
<div data-test="QueryTab/ResultsPane/ResultsView" className={styles.queryResultsTabPanel}>
|
||||||
<TabList selectedValue={activeTab} onTabSelect={onTabSelect}>
|
<TabList selectedValue={activeTab} onTabSelect={onTabSelect}>
|
||||||
@@ -885,13 +548,6 @@ export const ResultsView: React.FC<ResultsViewProps> = ({
|
|||||||
>
|
>
|
||||||
Query Stats
|
Query Stats
|
||||||
</Tab>
|
</Tab>
|
||||||
<Tab
|
|
||||||
data-test="QueryTab/ResultsPane/ResultsView/IndexAdvisorTab"
|
|
||||||
id={ResultsTabs.IndexAdvisor}
|
|
||||||
value={ResultsTabs.IndexAdvisor}
|
|
||||||
>
|
|
||||||
Index Advisor
|
|
||||||
</Tab>
|
|
||||||
</TabList>
|
</TabList>
|
||||||
<div className={styles.queryResultsTabContentContainer}>
|
<div className={styles.queryResultsTabContentContainer}>
|
||||||
{activeTab === ResultsTabs.Results && (
|
{activeTab === ResultsTabs.Results && (
|
||||||
@@ -902,30 +558,7 @@ export const ResultsView: React.FC<ResultsViewProps> = ({
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{activeTab === ResultsTabs.QueryStats && <QueryStatsTab queryResults={queryResults} />}
|
{activeTab === ResultsTabs.QueryStats && <QueryStatsTab queryResults={queryResults} />}
|
||||||
{activeTab === ResultsTabs.IndexAdvisor && (
|
|
||||||
<IndexAdvisorTab
|
|
||||||
queryResults={queryResults}
|
|
||||||
queryEditorContent={queryEditorContent}
|
|
||||||
databaseId={databaseId}
|
|
||||||
containerId={containerId}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
export interface IndexingPolicyStore {
|
|
||||||
indexingPolicies: { [containerId: string]: IndexingPolicy };
|
|
||||||
setIndexingPolicyFor: (containerId: string, indexingPolicy: IndexingPolicy) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const useIndexingPolicyStore = create<IndexingPolicyStore>((set) => ({
|
|
||||||
indexingPolicies: {},
|
|
||||||
setIndexingPolicyFor: (containerId, indexingPolicy) =>
|
|
||||||
set((state) => ({
|
|
||||||
indexingPolicies: {
|
|
||||||
...state.indexingPolicies,
|
|
||||||
[containerId]: { ...indexingPolicy },
|
|
||||||
},
|
|
||||||
})),
|
|
||||||
}));
|
|
||||||
|
|||||||
@@ -1,95 +0,0 @@
|
|||||||
import { makeStyles } from "@fluentui/react-components";
|
|
||||||
export type IndexAdvisorStyles = ReturnType<typeof useIndexAdvisorStyles>;
|
|
||||||
export const useIndexAdvisorStyles = makeStyles({
|
|
||||||
indexAdvisorMessage: {
|
|
||||||
padding: "1rem",
|
|
||||||
fontSize: "1.2rem",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
gap: "0.5rem",
|
|
||||||
},
|
|
||||||
indexAdvisorSuccessIcon: {
|
|
||||||
width: "18px",
|
|
||||||
height: "18px",
|
|
||||||
borderRadius: "50%",
|
|
||||||
backgroundColor: "#107C10",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
},
|
|
||||||
indexAdvisorTitle: {
|
|
||||||
padding: "1rem",
|
|
||||||
fontSize: "1.3rem",
|
|
||||||
fontWeight: "bold",
|
|
||||||
},
|
|
||||||
indexAdvisorTable: {
|
|
||||||
display: "block",
|
|
||||||
alignItems: "center",
|
|
||||||
marginBottom: "7rem",
|
|
||||||
},
|
|
||||||
indexAdvisorGrid: {
|
|
||||||
display: "grid",
|
|
||||||
gridTemplateColumns: "30px 30px 1fr 50px 120px",
|
|
||||||
alignItems: "center",
|
|
||||||
gap: "15px",
|
|
||||||
fontWeight: "bold",
|
|
||||||
},
|
|
||||||
indexAdvisorCheckboxSpacer: {
|
|
||||||
width: "18px",
|
|
||||||
height: "18px",
|
|
||||||
},
|
|
||||||
indexAdvisorChevronSpacer: {
|
|
||||||
width: "24px",
|
|
||||||
},
|
|
||||||
indexAdvisorRowBold: {
|
|
||||||
fontWeight: "bold",
|
|
||||||
},
|
|
||||||
indexAdvisorRowNormal: {
|
|
||||||
fontWeight: "normal",
|
|
||||||
},
|
|
||||||
indexAdvisorRowImpactHeader: {
|
|
||||||
fontSize: 0,
|
|
||||||
},
|
|
||||||
indexAdvisorRowImpact: {
|
|
||||||
fontWeight: "normal",
|
|
||||||
},
|
|
||||||
indexAdvisorImpactDot: {
|
|
||||||
color: "#0078D4",
|
|
||||||
fontSize: "12px",
|
|
||||||
display: "inline-flex",
|
|
||||||
},
|
|
||||||
indexAdvisorImpactDots: {
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
gap: "4px",
|
|
||||||
},
|
|
||||||
indexAdvisorButtonBar: {
|
|
||||||
padding: "1rem",
|
|
||||||
marginTop: "-7rem",
|
|
||||||
flexWrap: "wrap",
|
|
||||||
},
|
|
||||||
indexAdvisorButtonSpinner: {
|
|
||||||
marginTop: "1rem",
|
|
||||||
minWidth: "320px",
|
|
||||||
minHeight: "40px",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "left",
|
|
||||||
justifyContent: "left",
|
|
||||||
marginLeft: "10rem",
|
|
||||||
},
|
|
||||||
indexAdvisorButton: {
|
|
||||||
backgroundColor: "#0078D4",
|
|
||||||
color: "white",
|
|
||||||
padding: "8px 16px",
|
|
||||||
border: "none",
|
|
||||||
borderRadius: "4px",
|
|
||||||
cursor: "pointer",
|
|
||||||
marginTop: "1rem",
|
|
||||||
fontSize: "1rem",
|
|
||||||
fontWeight: 500,
|
|
||||||
transition: "background 0.2s",
|
|
||||||
":hover": {
|
|
||||||
backgroundColor: "#005a9e",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
import create from "zustand";
|
|
||||||
|
|
||||||
interface QueryMetadataStore {
|
|
||||||
userQuery: string;
|
|
||||||
databaseId: string;
|
|
||||||
containerId: string;
|
|
||||||
setMetadata: (query1: string, db: string, container: string) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const useQueryMetadataStore = create<QueryMetadataStore>((set) => ({
|
|
||||||
userQuery: "",
|
|
||||||
databaseId: "",
|
|
||||||
containerId: "",
|
|
||||||
setMetadata: (query1, db, container) => set({ userQuery: query1, databaseId: db, containerId: container }),
|
|
||||||
}));
|
|
||||||
Reference in New Issue
Block a user