mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-27 12:51:41 +00:00
Compare commits
5 Commits
master
...
release/ig
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
35ff57308e | ||
|
|
85d8aa8f03 | ||
|
|
9ba6bd9ff9 | ||
|
|
8b34470361 | ||
|
|
613fcdcd24 |
@@ -7,7 +7,6 @@ const backendEndpoint = "https://cdb-ms-mpac-pbe.cosmos.azure.com";
|
|||||||
const previewSiteEndpoint = "https://dataexplorer-preview.azurewebsites.net";
|
const previewSiteEndpoint = "https://dataexplorer-preview.azurewebsites.net";
|
||||||
const previewStorageWebsiteEndpoint = "https://dataexplorerpreview.z5.web.core.windows.net/";
|
const previewStorageWebsiteEndpoint = "https://dataexplorerpreview.z5.web.core.windows.net/";
|
||||||
const githubApiUrl = "https://api.github.com/repos/Azure/cosmos-explorer";
|
const githubApiUrl = "https://api.github.com/repos/Azure/cosmos-explorer";
|
||||||
const githubPullRequestUrl = "https://github.com/Azure/cosmos-explorer/pull";
|
|
||||||
const azurePortalMpacEndpoint = "https://ms.portal.azure.com/";
|
const azurePortalMpacEndpoint = "https://ms.portal.azure.com/";
|
||||||
|
|
||||||
const api = createProxyMiddleware({
|
const api = createProxyMiddleware({
|
||||||
@@ -57,11 +56,7 @@ app.get("/pull/:pr(\\d+)", (req, res) => {
|
|||||||
|
|
||||||
fetch(`${githubApiUrl}/pulls/${pr}`)
|
fetch(`${githubApiUrl}/pulls/${pr}`)
|
||||||
.then((response) => response.json())
|
.then((response) => response.json())
|
||||||
.then(({ head: { ref, sha } }) => {
|
.then(({ head: { sha } }) => {
|
||||||
const prUrl = new URL(`${githubPullRequestUrl}/${pr}`);
|
|
||||||
prUrl.hash = ref;
|
|
||||||
search.set("feature.pr", prUrl.href);
|
|
||||||
|
|
||||||
const explorer = new URL(`${previewSiteEndpoint}/commit/${sha}/explorer.html`);
|
const explorer = new URL(`${previewSiteEndpoint}/commit/${sha}/explorer.html`);
|
||||||
explorer.search = search.toString();
|
explorer.search = search.toString();
|
||||||
|
|
||||||
|
|||||||
@@ -93,7 +93,7 @@ export class CapabilityNames {
|
|||||||
public static readonly EnableDataMasking: string = "EnableDataMasking";
|
public static readonly EnableDataMasking: string = "EnableDataMasking";
|
||||||
public static readonly EnableDynamicDataMasking: string = "EnableDynamicDataMasking";
|
public static readonly EnableDynamicDataMasking: string = "EnableDynamicDataMasking";
|
||||||
public static readonly EnableNoSQLFullTextSearchPreviewFeatures: string = "EnableNoSQLFullTextSearchPreviewFeatures";
|
public static readonly EnableNoSQLFullTextSearchPreviewFeatures: string = "EnableNoSQLFullTextSearchPreviewFeatures";
|
||||||
public static readonly EnableOnlineCopyFeature: string = "EnableOnlineCopyFeature";
|
public static readonly EnableOnlineCopyFeature: string = "EnableOnlineContainerCopy";
|
||||||
}
|
}
|
||||||
|
|
||||||
export enum CapacityMode {
|
export enum CapacityMode {
|
||||||
|
|||||||
@@ -23,7 +23,10 @@ export const handleError = (error: string | ARMError | Error, area: string, cons
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const getErrorMessage = (error: string | Error = ""): string => {
|
export const getErrorMessage = (error: string | Error = ""): string => {
|
||||||
const errorMessage = typeof error === "string" ? error : error.message;
|
let errorMessage = typeof error === "string" ? error : error.message;
|
||||||
|
if (!errorMessage) {
|
||||||
|
errorMessage = JSON.stringify(error);
|
||||||
|
}
|
||||||
return replaceKnownError(errorMessage);
|
return replaceKnownError(errorMessage);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { userContext } from "UserContext";
|
import { userContext } from "UserContext";
|
||||||
|
import { logError } from "../../../Common/Logger";
|
||||||
import { useSidePanel } from "../../../hooks/useSidePanel";
|
import { useSidePanel } from "../../../hooks/useSidePanel";
|
||||||
import {
|
import {
|
||||||
cancel,
|
cancel,
|
||||||
@@ -159,7 +160,8 @@ export const submitCreateCopyJob = async (state: CopyJobContextState, onSuccess:
|
|||||||
onSuccess();
|
onSuccess();
|
||||||
return response;
|
return response;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error submitting create copy job:", error);
|
const errorMessage = error.message || "Error submitting create copy job. Please try again later.";
|
||||||
|
logError(errorMessage, "CopyJob/CopyJobActions.submitCreateCopyJob");
|
||||||
throw error;
|
throw error;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -198,8 +200,7 @@ export const updateCopyJobStatus = async (job: CopyJobType, action: string): Pro
|
|||||||
pattern,
|
pattern,
|
||||||
`'${ContainerCopyMessages.MonitorJobs.Status.InProgress}'`,
|
`'${ContainerCopyMessages.MonitorJobs.Status.InProgress}'`,
|
||||||
);
|
);
|
||||||
|
logError(`Error updating copy job status: ${normalizedErrorMessage}`, "CopyJob/CopyJobActions.updateCopyJobStatus");
|
||||||
console.error(`Error updating copy job status: ${normalizedErrorMessage}`);
|
|
||||||
throw error;
|
throw error;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -48,8 +48,10 @@ export default {
|
|||||||
|
|
||||||
// Assign Permissions Screen
|
// Assign Permissions Screen
|
||||||
assignPermissions: {
|
assignPermissions: {
|
||||||
description:
|
crossAccountDescription:
|
||||||
"To copy data from the source to the destination container, ensure that the managed identity of the destination account has read access to the source account by completing the following steps.",
|
"To copy data from the source to the destination container, ensure that the managed identity of the destination account has read access to the source account by completing the following steps.",
|
||||||
|
intraAccountOnlineDescription: (accountName: string) =>
|
||||||
|
`Follow the steps below to enable online copy on your "${accountName}" account.`,
|
||||||
},
|
},
|
||||||
toggleBtn: {
|
toggleBtn: {
|
||||||
onText: "On",
|
onText: "On",
|
||||||
@@ -115,7 +117,7 @@ export default {
|
|||||||
},
|
},
|
||||||
onlineCopyEnabled: {
|
onlineCopyEnabled: {
|
||||||
title: "Online copy enabled",
|
title: "Online copy enabled",
|
||||||
description: (accountName: string) => `Use Azure CLI to enable Online copy on "${accountName}".`,
|
description: (accountName: string) => `Enable Online copy on "${accountName}".`,
|
||||||
hrefText: "Learn more about online copy jobs",
|
hrefText: "Learn more about online copy jobs",
|
||||||
href: "https://learn.microsoft.com/en-us/azure/cosmos-db/container-copy?tabs=online-copy&pivots=api-nosql#enable-online-copy",
|
href: "https://learn.microsoft.com/en-us/azure/cosmos-db/container-copy?tabs=online-copy&pivots=api-nosql#enable-online-copy",
|
||||||
buttonText: "Enable Online Copy",
|
buttonText: "Enable Online Copy",
|
||||||
|
|||||||
@@ -39,16 +39,23 @@ const getInitialCopyJobState = (): CopyJobContextState => {
|
|||||||
const CopyJobContextProvider: React.FC<CopyJobContextProviderProps> = (props) => {
|
const CopyJobContextProvider: React.FC<CopyJobContextProviderProps> = (props) => {
|
||||||
const [copyJobState, setCopyJobState] = React.useState<CopyJobContextState>(getInitialCopyJobState());
|
const [copyJobState, setCopyJobState] = React.useState<CopyJobContextState>(getInitialCopyJobState());
|
||||||
const [flow, setFlow] = React.useState<CopyJobFlowType | null>(null);
|
const [flow, setFlow] = React.useState<CopyJobFlowType | null>(null);
|
||||||
|
const [contextError, setContextError] = React.useState<string | null>(null);
|
||||||
|
|
||||||
const resetCopyJobState = () => {
|
const resetCopyJobState = () => {
|
||||||
setCopyJobState(getInitialCopyJobState());
|
setCopyJobState(getInitialCopyJobState());
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
const contextValue: CopyJobContextProviderType = {
|
||||||
<CopyJobContext.Provider value={{ copyJobState, setCopyJobState, flow, setFlow, resetCopyJobState }}>
|
contextError,
|
||||||
{props.children}
|
setContextError,
|
||||||
</CopyJobContext.Provider>
|
copyJobState,
|
||||||
);
|
setCopyJobState,
|
||||||
|
flow,
|
||||||
|
setFlow,
|
||||||
|
resetCopyJobState,
|
||||||
|
};
|
||||||
|
|
||||||
|
return <CopyJobContext.Provider value={contextValue}>{props.children}</CopyJobContext.Provider>;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default CopyJobContextProvider;
|
export default CopyJobContextProvider;
|
||||||
|
|||||||
@@ -106,7 +106,7 @@ export function getAccountDetailsFromResourceId(accountId: string | undefined) {
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
const pattern = new RegExp(
|
const pattern = new RegExp(
|
||||||
"/subscriptions/([^/]+)/resourceGroups/([^/]+)/providers/Microsoft\\.DocumentDB/databaseAccounts/([^/]+)",
|
"/subscriptions/([^/]+)/resourceGroups/([^/]+)/providers/Microsoft\\.DocumentDB?/databaseAccounts/([^/]+)",
|
||||||
"i",
|
"i",
|
||||||
);
|
);
|
||||||
const matches = accountId.match(pattern);
|
const matches = accountId.match(pattern);
|
||||||
@@ -114,3 +114,13 @@ export function getAccountDetailsFromResourceId(accountId: string | undefined) {
|
|||||||
const [_, subscriptionId, resourceGroup, accountName] = matches || [];
|
const [_, subscriptionId, resourceGroup, accountName] = matches || [];
|
||||||
return { subscriptionId, resourceGroup, accountName };
|
return { subscriptionId, resourceGroup, accountName };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function isIntraAccountCopy(sourceAccountId: string | undefined, targetAccountId: string | undefined): boolean {
|
||||||
|
const sourceAccountDetails = getAccountDetailsFromResourceId(sourceAccountId);
|
||||||
|
const targetAccountDetails = getAccountDetailsFromResourceId(targetAccountId);
|
||||||
|
return (
|
||||||
|
sourceAccountDetails?.subscriptionId === targetAccountDetails?.subscriptionId &&
|
||||||
|
sourceAccountDetails?.resourceGroup === targetAccountDetails?.resourceGroup &&
|
||||||
|
sourceAccountDetails?.accountName === targetAccountDetails?.accountName
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { Link, Stack, Text, Toggle } from "@fluentui/react";
|
import { Link, Stack, Text, Toggle } from "@fluentui/react";
|
||||||
import React, { useCallback } from "react";
|
import React, { useCallback } from "react";
|
||||||
|
import { logError } from "../../../../../Common/Logger";
|
||||||
import { assignRole } from "../../../../../Utils/arm/RbacUtils";
|
import { assignRole } from "../../../../../Utils/arm/RbacUtils";
|
||||||
import ContainerCopyMessages from "../../../ContainerCopyMessages";
|
import ContainerCopyMessages from "../../../ContainerCopyMessages";
|
||||||
import { useCopyJobContext } from "../../../Context/CopyJobContext";
|
import { useCopyJobContext } from "../../../Context/CopyJobContext";
|
||||||
@@ -21,7 +22,7 @@ type AddReadPermissionToDefaultIdentityProps = Partial<PermissionSectionConfig>;
|
|||||||
|
|
||||||
const AddReadPermissionToDefaultIdentity: React.FC<AddReadPermissionToDefaultIdentityProps> = () => {
|
const AddReadPermissionToDefaultIdentity: React.FC<AddReadPermissionToDefaultIdentityProps> = () => {
|
||||||
const [loading, setLoading] = React.useState(false);
|
const [loading, setLoading] = React.useState(false);
|
||||||
const { copyJobState, setCopyJobState } = useCopyJobContext();
|
const { copyJobState, setCopyJobState, setContextError } = useCopyJobContext();
|
||||||
const [readPermissionAssigned, onToggle] = useToggle(false);
|
const [readPermissionAssigned, onToggle] = useToggle(false);
|
||||||
|
|
||||||
const handleAddReadPermission = useCallback(async () => {
|
const handleAddReadPermission = useCallback(async () => {
|
||||||
@@ -48,11 +49,14 @@ const AddReadPermissionToDefaultIdentity: React.FC<AddReadPermissionToDefaultIde
|
|||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error assigning read permission to default identity:", error);
|
const errorMessage =
|
||||||
|
error.message || "Error assigning read permission to default identity. Please try again later.";
|
||||||
|
logError(errorMessage, "CopyJob/AddReadPermissionToDefaultIdentity.handleAddReadPermission");
|
||||||
|
setContextError(errorMessage);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
}, [copyJobState, setCopyJobState]);
|
}, [copyJobState, setCopyJobState, setContextError]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack className="defaultManagedIdentityContainer" tokens={{ childrenGap: 15, padding: "0 0 0 20px" }}>
|
<Stack className="defaultManagedIdentityContainer" tokens={{ childrenGap: 15, padding: "0 0 0 20px" }}>
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ import WarningIcon from "../../../../../../images/warning.svg";
|
|||||||
import ShimmerTree, { IndentLevel } from "../../../../../Common/ShimmerTree/ShimmerTree";
|
import ShimmerTree, { IndentLevel } from "../../../../../Common/ShimmerTree/ShimmerTree";
|
||||||
import ContainerCopyMessages from "../../../ContainerCopyMessages";
|
import ContainerCopyMessages from "../../../ContainerCopyMessages";
|
||||||
import { useCopyJobContext } from "../../../Context/CopyJobContext";
|
import { useCopyJobContext } from "../../../Context/CopyJobContext";
|
||||||
|
import { isIntraAccountCopy } from "../../../CopyJobUtils";
|
||||||
import { CopyJobMigrationType } from "../../../Enums/CopyJobEnums";
|
import { CopyJobMigrationType } from "../../../Enums/CopyJobEnums";
|
||||||
import usePermissionSections, { PermissionSectionConfig } from "./hooks/usePermissionsSection";
|
import usePermissionSections, { PermissionSectionConfig } from "./hooks/usePermissionsSection";
|
||||||
|
|
||||||
@@ -39,6 +40,8 @@ const AssignPermissions = () => {
|
|||||||
[],
|
[],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const isSameAccount = isIntraAccountCopy(copyJobState?.source?.account?.id, copyJobState?.target?.account?.id);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const firstIncompleteSection = permissionSections.find((section) => !section.completed);
|
const firstIncompleteSection = permissionSections.find((section) => !section.completed);
|
||||||
const nextOpenItems = firstIncompleteSection ? [firstIncompleteSection.id] : [];
|
const nextOpenItems = firstIncompleteSection ? [firstIncompleteSection.id] : [];
|
||||||
@@ -49,7 +52,13 @@ const AssignPermissions = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack className="assignPermissionsContainer" tokens={{ childrenGap: 15 }}>
|
<Stack className="assignPermissionsContainer" tokens={{ childrenGap: 15 }}>
|
||||||
<span>{ContainerCopyMessages.assignPermissions.description}</span>
|
<span>
|
||||||
|
{isSameAccount && copyJobState.migrationType === CopyJobMigrationType.Online
|
||||||
|
? ContainerCopyMessages.assignPermissions.intraAccountOnlineDescription(
|
||||||
|
copyJobState?.source?.account?.name || "",
|
||||||
|
)
|
||||||
|
: ContainerCopyMessages.assignPermissions.crossAccountDescription}
|
||||||
|
</span>
|
||||||
{permissionSections?.length === 0 ? (
|
{permissionSections?.length === 0 ? (
|
||||||
<ShimmerTree indentLevels={indentLevels} style={{ width: "100%" }} />
|
<ShimmerTree indentLevels={indentLevels} style={{ width: "100%" }} />
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
@@ -1,7 +1,10 @@
|
|||||||
import { Link, PrimaryButton, Stack } from "@fluentui/react";
|
import { Link, PrimaryButton, Stack } from "@fluentui/react";
|
||||||
|
import { CapabilityNames } from "Common/Constants";
|
||||||
import { DatabaseAccount } from "Contracts/DataModels";
|
import { DatabaseAccount } from "Contracts/DataModels";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { fetchDatabaseAccount } from "Utils/arm/databaseAccountUtils";
|
import { fetchDatabaseAccount } from "Utils/arm/databaseAccountUtils";
|
||||||
|
import { logError } from "../../../../../Common/Logger";
|
||||||
|
import { update as updateDatabaseAccount } from "../../../../../Utils/arm/generatedClients/cosmos/databaseAccounts";
|
||||||
import ContainerCopyMessages from "../../../ContainerCopyMessages";
|
import ContainerCopyMessages from "../../../ContainerCopyMessages";
|
||||||
import { useCopyJobContext } from "../../../Context/CopyJobContext";
|
import { useCopyJobContext } from "../../../Context/CopyJobContext";
|
||||||
import { getAccountDetailsFromResourceId } from "../../../CopyJobUtils";
|
import { getAccountDetailsFromResourceId } from "../../../CopyJobUtils";
|
||||||
@@ -19,8 +22,10 @@ const OnlineCopyEnabled: React.FC = () => {
|
|||||||
const [showRefreshButton, setShowRefreshButton] = React.useState(false);
|
const [showRefreshButton, setShowRefreshButton] = React.useState(false);
|
||||||
const intervalRef = React.useRef<NodeJS.Timeout | null>(null);
|
const intervalRef = React.useRef<NodeJS.Timeout | null>(null);
|
||||||
const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
|
const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
|
||||||
const { copyJobState: { source } = {}, setCopyJobState } = useCopyJobContext();
|
const { setContextError, copyJobState: { source } = {}, setCopyJobState } = useCopyJobContext();
|
||||||
const selectedSourceAccount = source?.account;
|
const selectedSourceAccount = source?.account;
|
||||||
|
const sourceAccountCapabilities = selectedSourceAccount?.properties?.capabilities ?? [];
|
||||||
|
|
||||||
const {
|
const {
|
||||||
subscriptionId: sourceSubscriptionId,
|
subscriptionId: sourceSubscriptionId,
|
||||||
resourceGroup: sourceResourceGroup,
|
resourceGroup: sourceResourceGroup,
|
||||||
@@ -38,16 +43,24 @@ const OnlineCopyEnabled: React.FC = () => {
|
|||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error fetching source account after enabling online copy:", error);
|
const errorMessage =
|
||||||
setLoading(false);
|
error.message || "Error fetching source account after enabling online copy. Please try again later.";
|
||||||
|
logError(errorMessage, "CopyJob/OnlineCopyEnabled.handleFetchAccount");
|
||||||
|
setContextError(errorMessage);
|
||||||
|
clearAccountFetchInterval();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const clearIntervalAndShowRefresh = () => {
|
const clearAccountFetchInterval = () => {
|
||||||
if (intervalRef.current) {
|
if (intervalRef.current) {
|
||||||
clearInterval(intervalRef.current);
|
clearInterval(intervalRef.current);
|
||||||
intervalRef.current = null;
|
intervalRef.current = null;
|
||||||
}
|
}
|
||||||
|
setLoading(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearIntervalAndShowRefresh = () => {
|
||||||
|
clearAccountFetchInterval();
|
||||||
setShowRefreshButton(true);
|
setShowRefreshButton(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -56,18 +69,42 @@ const OnlineCopyEnabled: React.FC = () => {
|
|||||||
handleFetchAccount();
|
handleFetchAccount();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleOnlineCopyEnable = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
setShowRefreshButton(false);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await updateDatabaseAccount(sourceSubscriptionId, sourceResourceGroup, sourceAccountName, {
|
||||||
|
properties: {
|
||||||
|
enableAllVersionsAndDeletesChangeFeed: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await updateDatabaseAccount(sourceSubscriptionId, sourceResourceGroup, sourceAccountName, {
|
||||||
|
properties: {
|
||||||
|
capabilities: [...sourceAccountCapabilities, { name: CapabilityNames.EnableOnlineCopyFeature }],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
intervalRef.current = setInterval(() => {
|
||||||
|
handleFetchAccount();
|
||||||
|
}, 30 * 1000);
|
||||||
|
|
||||||
|
timeoutRef.current = setTimeout(
|
||||||
|
() => {
|
||||||
|
clearIntervalAndShowRefresh();
|
||||||
|
},
|
||||||
|
10 * 60 * 1000,
|
||||||
|
);
|
||||||
|
} catch (error) {
|
||||||
|
const errorMessage = error.message || "Failed to enable online copy feature. Please try again later.";
|
||||||
|
logError(errorMessage, "CopyJob/OnlineCopyEnabled.handleOnlineCopyEnable");
|
||||||
|
setContextError(errorMessage);
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
intervalRef.current = setInterval(() => {
|
|
||||||
handleFetchAccount();
|
|
||||||
}, 30 * 1000);
|
|
||||||
|
|
||||||
timeoutRef.current = setTimeout(
|
|
||||||
() => {
|
|
||||||
clearIntervalAndShowRefresh();
|
|
||||||
},
|
|
||||||
15 * 60 * 1000,
|
|
||||||
);
|
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
if (intervalRef.current) {
|
if (intervalRef.current) {
|
||||||
clearInterval(intervalRef.current);
|
clearInterval(intervalRef.current);
|
||||||
@@ -89,32 +126,7 @@ const OnlineCopyEnabled: React.FC = () => {
|
|||||||
</Link>
|
</Link>
|
||||||
</Stack.Item>
|
</Stack.Item>
|
||||||
<Stack.Item>
|
<Stack.Item>
|
||||||
<pre style={{ backgroundColor: "#f5f5f5", padding: "10px", borderRadius: "4px", overflow: "auto" }}>
|
{showRefreshButton ? (
|
||||||
<code>
|
|
||||||
{`# Set shell variables
|
|
||||||
$resourceGroupName = <azure_resource_group>
|
|
||||||
$accountName = <azure_cosmos_db_account_name>
|
|
||||||
$EnableOnlineContainerCopy = "EnableOnlineContainerCopy"
|
|
||||||
|
|
||||||
# List down existing capabilities of your account
|
|
||||||
$cosmosdb = az cosmosdb show --resource-group $resourceGroupName --name $accountName
|
|
||||||
|
|
||||||
$capabilities = (($cosmosdb | ConvertFrom-Json).capabilities)
|
|
||||||
|
|
||||||
# Append EnableOnlineContainerCopy capability in the list of capabilities
|
|
||||||
$capabilitiesToAdd = @()
|
|
||||||
foreach ($item in $capabilities) {
|
|
||||||
$capabilitiesToAdd += $item.name
|
|
||||||
}
|
|
||||||
$capabilitiesToAdd += $EnableOnlineContainerCopy
|
|
||||||
|
|
||||||
# Update Cosmos DB account
|
|
||||||
az cosmosdb update --capabilities $capabilitiesToAdd -n $accountName -g $resourceGroupName`}
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
</Stack.Item>
|
|
||||||
{showRefreshButton && (
|
|
||||||
<Stack.Item>
|
|
||||||
<PrimaryButton
|
<PrimaryButton
|
||||||
className="fullWidth"
|
className="fullWidth"
|
||||||
text={ContainerCopyMessages.refreshButtonLabel}
|
text={ContainerCopyMessages.refreshButtonLabel}
|
||||||
@@ -122,8 +134,16 @@ az cosmosdb update --capabilities $capabilitiesToAdd -n $accountName -g $resourc
|
|||||||
onClick={handleRefresh}
|
onClick={handleRefresh}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
/>
|
/>
|
||||||
</Stack.Item>
|
) : (
|
||||||
)}
|
<PrimaryButton
|
||||||
|
className="fullWidth"
|
||||||
|
text={loading ? "" : ContainerCopyMessages.onlineCopyEnabled.buttonText}
|
||||||
|
{...(loading ? { iconProps: { iconName: "SyncStatusSolid" } } : {})}
|
||||||
|
disabled={loading}
|
||||||
|
onClick={handleOnlineCopyEnable}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Stack.Item>
|
||||||
</Stack>
|
</Stack>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import { Link, PrimaryButton, Stack, Text } from "@fluentui/react";
|
|||||||
import { DatabaseAccount } from "Contracts/DataModels";
|
import { DatabaseAccount } from "Contracts/DataModels";
|
||||||
import React, { useEffect, useRef, useState } from "react";
|
import React, { useEffect, useRef, useState } from "react";
|
||||||
import { fetchDatabaseAccount } from "Utils/arm/databaseAccountUtils";
|
import { fetchDatabaseAccount } from "Utils/arm/databaseAccountUtils";
|
||||||
|
import { logError } from "../../../../../Common/Logger";
|
||||||
import ContainerCopyMessages from "../../../ContainerCopyMessages";
|
import ContainerCopyMessages from "../../../ContainerCopyMessages";
|
||||||
import { useCopyJobContext } from "../../../Context/CopyJobContext";
|
import { useCopyJobContext } from "../../../Context/CopyJobContext";
|
||||||
import { buildResourceLink, getAccountDetailsFromResourceId } from "../../../CopyJobUtils";
|
import { buildResourceLink, getAccountDetailsFromResourceId } from "../../../CopyJobUtils";
|
||||||
@@ -63,17 +64,23 @@ const PointInTimeRestore: React.FC = () => {
|
|||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error fetching source account after Point-in-Time Restore:", error);
|
const errorMessage =
|
||||||
setLoading(false);
|
error.message || "Error fetching source account after Point-in-Time Restore. Please try again later.";
|
||||||
|
logError(errorMessage, "CopyJob/PointInTimeRestore.handleFetchAccount");
|
||||||
|
clearAccountFetchInterval();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const clearIntervalAndShowRefresh = () => {
|
const clearAccountFetchInterval = () => {
|
||||||
if (intervalRef.current) {
|
if (intervalRef.current) {
|
||||||
clearInterval(intervalRef.current);
|
clearInterval(intervalRef.current);
|
||||||
intervalRef.current = null;
|
intervalRef.current = null;
|
||||||
}
|
}
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearIntervalAndShowRefresh = () => {
|
||||||
|
clearAccountFetchInterval();
|
||||||
setShowRefreshButton(true);
|
setShowRefreshButton(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -95,7 +102,7 @@ const PointInTimeRestore: React.FC = () => {
|
|||||||
() => {
|
() => {
|
||||||
clearIntervalAndShowRefresh();
|
clearIntervalAndShowRefresh();
|
||||||
},
|
},
|
||||||
15 * 60 * 1000,
|
10 * 60 * 1000,
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { DatabaseAccount } from "Contracts/DataModels";
|
import { DatabaseAccount } from "Contracts/DataModels";
|
||||||
import { useCallback, useState } from "react";
|
import { useCallback, useState } from "react";
|
||||||
|
import { logError } from "../../../../../../Common/Logger";
|
||||||
import { useCopyJobContext } from "../../../../Context/CopyJobContext";
|
import { useCopyJobContext } from "../../../../Context/CopyJobContext";
|
||||||
import { getAccountDetailsFromResourceId } from "../../../../CopyJobUtils";
|
import { getAccountDetailsFromResourceId } from "../../../../CopyJobUtils";
|
||||||
|
|
||||||
@@ -19,7 +20,7 @@ interface UseManagedIdentityUpdaterReturn {
|
|||||||
const useManagedIdentity = (
|
const useManagedIdentity = (
|
||||||
updateIdentityFn: UseManagedIdentityUpdaterParams["updateIdentityFn"],
|
updateIdentityFn: UseManagedIdentityUpdaterParams["updateIdentityFn"],
|
||||||
): UseManagedIdentityUpdaterReturn => {
|
): UseManagedIdentityUpdaterReturn => {
|
||||||
const { copyJobState, setCopyJobState } = useCopyJobContext();
|
const { copyJobState, setCopyJobState, setContextError } = useCopyJobContext();
|
||||||
const [loading, setLoading] = useState<boolean>(false);
|
const [loading, setLoading] = useState<boolean>(false);
|
||||||
|
|
||||||
const handleAddSystemIdentity = useCallback(async (): Promise<void> => {
|
const handleAddSystemIdentity = useCallback(async (): Promise<void> => {
|
||||||
@@ -40,7 +41,9 @@ const useManagedIdentity = (
|
|||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error enabling system-assigned managed identity:", error);
|
const errorMessage = error.message || "Error enabling system-assigned managed identity. Please try again later.";
|
||||||
|
logError(errorMessage, "CopyJob/useManagedIdentity.handleAddSystemIdentity");
|
||||||
|
setContextError(errorMessage);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
|
|||||||
import { CapabilityNames } from "../../../../../../Common/Constants";
|
import { CapabilityNames } from "../../../../../../Common/Constants";
|
||||||
import { fetchRoleAssignments, fetchRoleDefinitions, RoleDefinitionType } from "../../../../../../Utils/arm/RbacUtils";
|
import { fetchRoleAssignments, fetchRoleDefinitions, RoleDefinitionType } from "../../../../../../Utils/arm/RbacUtils";
|
||||||
import ContainerCopyMessages from "../../../../ContainerCopyMessages";
|
import ContainerCopyMessages from "../../../../ContainerCopyMessages";
|
||||||
import { getAccountDetailsFromResourceId } from "../../../../CopyJobUtils";
|
import { getAccountDetailsFromResourceId, isIntraAccountCopy } from "../../../../CopyJobUtils";
|
||||||
import {
|
import {
|
||||||
BackupPolicyType,
|
BackupPolicyType,
|
||||||
CopyJobMigrationType,
|
CopyJobMigrationType,
|
||||||
@@ -139,7 +139,9 @@ const usePermissionSections = (state: CopyJobContextState): PermissionSectionCon
|
|||||||
const isValidatingRef = useRef(false);
|
const isValidatingRef = useRef(false);
|
||||||
|
|
||||||
const sectionToValidate = useMemo(() => {
|
const sectionToValidate = useMemo(() => {
|
||||||
const baseSections = sourceAccountId === targetAccountId ? [] : [...PERMISSION_SECTIONS_CONFIG];
|
const isSameAccount = isIntraAccountCopy(sourceAccountId, targetAccountId);
|
||||||
|
|
||||||
|
const baseSections = isSameAccount ? [] : [...PERMISSION_SECTIONS_CONFIG];
|
||||||
if (state.migrationType === CopyJobMigrationType.Online) {
|
if (state.migrationType === CopyJobMigrationType.Online) {
|
||||||
return [...baseSections, ...PERMISSION_SECTIONS_FOR_ONLINE_JOBS];
|
return [...baseSections, ...PERMISSION_SECTIONS_FOR_ONLINE_JOBS];
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { MessageBar, MessageBarType, Stack } from "@fluentui/react";
|
import { MessageBar, MessageBarType, Stack } from "@fluentui/react";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
import { useCopyJobContext } from "../../Context/CopyJobContext";
|
||||||
import { useCopyJobNavigation } from "../Utils/useCopyJobNavigation";
|
import { useCopyJobNavigation } from "../Utils/useCopyJobNavigation";
|
||||||
import NavigationControls from "./Components/NavigationControls";
|
import NavigationControls from "./Components/NavigationControls";
|
||||||
|
|
||||||
@@ -12,24 +13,23 @@ const CreateCopyJobScreens: React.FC = () => {
|
|||||||
handlePrevious,
|
handlePrevious,
|
||||||
handleCancel,
|
handleCancel,
|
||||||
primaryBtnText,
|
primaryBtnText,
|
||||||
error,
|
|
||||||
setError,
|
|
||||||
} = useCopyJobNavigation();
|
} = useCopyJobNavigation();
|
||||||
|
const { contextError, setContextError } = useCopyJobContext();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack verticalAlign="space-between" className="createCopyJobScreensContainer">
|
<Stack verticalAlign="space-between" className="createCopyJobScreensContainer">
|
||||||
<Stack.Item className="createCopyJobScreensContent">
|
<Stack.Item className="createCopyJobScreensContent">
|
||||||
{error && (
|
{contextError && (
|
||||||
<MessageBar
|
<MessageBar
|
||||||
className="createCopyJobErrorMessageBar"
|
className="createCopyJobErrorMessageBar"
|
||||||
messageBarType={MessageBarType.blocked}
|
messageBarType={MessageBarType.blocked}
|
||||||
isMultiline={false}
|
isMultiline={false}
|
||||||
onDismiss={() => setError(null)}
|
onDismiss={() => setContextError(null)}
|
||||||
dismissButtonAriaLabel="Close"
|
dismissButtonAriaLabel="Close"
|
||||||
truncated={true}
|
truncated={true}
|
||||||
overflowButtonAriaLabel="See more"
|
overflowButtonAriaLabel="See more"
|
||||||
>
|
>
|
||||||
{error}
|
{contextError}
|
||||||
</MessageBar>
|
</MessageBar>
|
||||||
)}
|
)}
|
||||||
{currentScreen?.component}
|
{currentScreen?.component}
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import React from "react";
|
|||||||
import { DatabaseAccount, Subscription } from "../../../../../../Contracts/DataModels";
|
import { DatabaseAccount, Subscription } from "../../../../../../Contracts/DataModels";
|
||||||
import { CopyJobMigrationType } from "../../../../Enums/CopyJobEnums";
|
import { CopyJobMigrationType } from "../../../../Enums/CopyJobEnums";
|
||||||
import { CopyJobContextProviderType, CopyJobContextState, DropdownOptionType } from "../../../../Types/CopyJobTypes";
|
import { CopyJobContextProviderType, CopyJobContextState, DropdownOptionType } from "../../../../Types/CopyJobTypes";
|
||||||
|
import { useCopyJobPrerequisitesCache } from "../../../Utils/useCopyJobPrerequisitesCache";
|
||||||
|
|
||||||
export function useDropdownOptions(
|
export function useDropdownOptions(
|
||||||
subscriptions: Subscription[],
|
subscriptions: Subscription[],
|
||||||
@@ -36,6 +37,7 @@ export function useDropdownOptions(
|
|||||||
type setCopyJobStateType = CopyJobContextProviderType["setCopyJobState"];
|
type setCopyJobStateType = CopyJobContextProviderType["setCopyJobState"];
|
||||||
|
|
||||||
export function useEventHandlers(setCopyJobState: setCopyJobStateType) {
|
export function useEventHandlers(setCopyJobState: setCopyJobStateType) {
|
||||||
|
const { setValidationCache } = useCopyJobPrerequisitesCache();
|
||||||
const handleSelectSourceAccount = React.useCallback(
|
const handleSelectSourceAccount = React.useCallback(
|
||||||
(type: "subscription" | "account", data: (Subscription & DatabaseAccount) | undefined) => {
|
(type: "subscription" | "account", data: (Subscription & DatabaseAccount) | undefined) => {
|
||||||
setCopyJobState((prevState: CopyJobContextState) => {
|
setCopyJobState((prevState: CopyJobContextState) => {
|
||||||
@@ -60,8 +62,9 @@ export function useEventHandlers(setCopyJobState: setCopyJobStateType) {
|
|||||||
}
|
}
|
||||||
return prevState;
|
return prevState;
|
||||||
});
|
});
|
||||||
|
setValidationCache(new Map<string, boolean>());
|
||||||
},
|
},
|
||||||
[setCopyJobState],
|
[setCopyJobState, setValidationCache],
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleMigrationTypeChange = React.useCallback(
|
const handleMigrationTypeChange = React.useCallback(
|
||||||
@@ -70,8 +73,9 @@ export function useEventHandlers(setCopyJobState: setCopyJobStateType) {
|
|||||||
...prevState,
|
...prevState,
|
||||||
migrationType: checked ? CopyJobMigrationType.Offline : CopyJobMigrationType.Online,
|
migrationType: checked ? CopyJobMigrationType.Offline : CopyJobMigrationType.Online,
|
||||||
}));
|
}));
|
||||||
|
setValidationCache(new Map<string, boolean>());
|
||||||
},
|
},
|
||||||
[setCopyJobState],
|
[setCopyJobState, setValidationCache],
|
||||||
);
|
);
|
||||||
|
|
||||||
return { handleSelectSourceAccount, handleMigrationTypeChange };
|
return { handleSelectSourceAccount, handleMigrationTypeChange };
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import { useCallback, useMemo, useReducer, useState } from "react";
|
|||||||
import { useSidePanel } from "../../../../hooks/useSidePanel";
|
import { useSidePanel } from "../../../../hooks/useSidePanel";
|
||||||
import { submitCreateCopyJob } from "../../Actions/CopyJobActions";
|
import { submitCreateCopyJob } from "../../Actions/CopyJobActions";
|
||||||
import { useCopyJobContext } from "../../Context/CopyJobContext";
|
import { useCopyJobContext } from "../../Context/CopyJobContext";
|
||||||
|
import { isIntraAccountCopy } from "../../CopyJobUtils";
|
||||||
import { CopyJobMigrationType } from "../../Enums/CopyJobEnums";
|
import { CopyJobMigrationType } from "../../Enums/CopyJobEnums";
|
||||||
import { useCopyJobPrerequisitesCache } from "./useCopyJobPrerequisitesCache";
|
import { useCopyJobPrerequisitesCache } from "./useCopyJobPrerequisitesCache";
|
||||||
import { SCREEN_KEYS, useCreateCopyJobScreensList } from "./useCreateCopyJobScreensList";
|
import { SCREEN_KEYS, useCreateCopyJobScreensList } from "./useCreateCopyJobScreensList";
|
||||||
@@ -33,8 +34,7 @@ function navigationReducer(state: NavigationState, action: Action): NavigationSt
|
|||||||
|
|
||||||
export function useCopyJobNavigation() {
|
export function useCopyJobNavigation() {
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const { copyJobState, resetCopyJobState, setContextError } = useCopyJobContext();
|
||||||
const { copyJobState, resetCopyJobState } = useCopyJobContext();
|
|
||||||
const screens = useCreateCopyJobScreensList();
|
const screens = useCreateCopyJobScreensList();
|
||||||
const { validationCache: cache } = useCopyJobPrerequisitesCache();
|
const { validationCache: cache } = useCopyJobPrerequisitesCache();
|
||||||
const [state, dispatch] = useReducer(navigationReducer, { screenHistory: [SCREEN_KEYS.SelectAccount] });
|
const [state, dispatch] = useReducer(navigationReducer, { screenHistory: [SCREEN_KEYS.SelectAccount] });
|
||||||
@@ -71,18 +71,13 @@ export function useCopyJobNavigation() {
|
|||||||
containerId: container?.containerId || "",
|
containerId: container?.containerId || "",
|
||||||
});
|
});
|
||||||
|
|
||||||
const isSameAccount = (
|
|
||||||
sourceIds: ReturnType<typeof getContainerIdentifiers>,
|
|
||||||
targetIds: ReturnType<typeof getContainerIdentifiers>,
|
|
||||||
) => sourceIds.accountId === targetIds.accountId;
|
|
||||||
|
|
||||||
const areContainersIdentical = () => {
|
const areContainersIdentical = () => {
|
||||||
const { source, target } = copyJobState;
|
const { source, target } = copyJobState;
|
||||||
const sourceIds = getContainerIdentifiers(source);
|
const sourceIds = getContainerIdentifiers(source);
|
||||||
const targetIds = getContainerIdentifiers(target);
|
const targetIds = getContainerIdentifiers(target);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
isSameAccount(sourceIds, targetIds) &&
|
isIntraAccountCopy(sourceIds.accountId, targetIds.accountId) &&
|
||||||
sourceIds.databaseId === targetIds.databaseId &&
|
sourceIds.databaseId === targetIds.databaseId &&
|
||||||
sourceIds.containerId === targetIds.containerId
|
sourceIds.containerId === targetIds.containerId
|
||||||
);
|
);
|
||||||
@@ -90,9 +85,10 @@ export function useCopyJobNavigation() {
|
|||||||
|
|
||||||
const shouldNotShowPermissionScreen = () => {
|
const shouldNotShowPermissionScreen = () => {
|
||||||
const { source, target, migrationType } = copyJobState;
|
const { source, target, migrationType } = copyJobState;
|
||||||
|
const sourceIds = getContainerIdentifiers(source);
|
||||||
|
const targetIds = getContainerIdentifiers(target);
|
||||||
return (
|
return (
|
||||||
migrationType === CopyJobMigrationType.Offline &&
|
migrationType === CopyJobMigrationType.Offline && isIntraAccountCopy(sourceIds.accountId, targetIds.accountId)
|
||||||
isSameAccount(getContainerIdentifiers(source), getContainerIdentifiers(target))
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -105,7 +101,7 @@ export function useCopyJobNavigation() {
|
|||||||
error instanceof Error
|
error instanceof Error
|
||||||
? error.message || "Failed to create copy job. Please try again later."
|
? error.message || "Failed to create copy job. Please try again later."
|
||||||
: "Failed to create copy job. Please try again later.";
|
: "Failed to create copy job. Please try again later.";
|
||||||
setError(errorMessage);
|
setContextError(errorMessage);
|
||||||
} finally {
|
} finally {
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
}
|
}
|
||||||
@@ -113,11 +109,13 @@ export function useCopyJobNavigation() {
|
|||||||
|
|
||||||
const handlePrimary = useCallback(() => {
|
const handlePrimary = useCallback(() => {
|
||||||
if (currentScreenKey === SCREEN_KEYS.SelectSourceAndTargetContainers && areContainersIdentical()) {
|
if (currentScreenKey === SCREEN_KEYS.SelectSourceAndTargetContainers && areContainersIdentical()) {
|
||||||
setError("Source and destination containers cannot be the same. Please select different containers to proceed.");
|
setContextError(
|
||||||
|
"Source and destination containers cannot be the same. Please select different containers to proceed.",
|
||||||
|
);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
setError(null);
|
setContextError(null);
|
||||||
const transitions = {
|
const transitions = {
|
||||||
[SCREEN_KEYS.SelectAccount]: shouldNotShowPermissionScreen()
|
[SCREEN_KEYS.SelectAccount]: shouldNotShowPermissionScreen()
|
||||||
? SCREEN_KEYS.SelectSourceAndTargetContainers
|
? SCREEN_KEYS.SelectSourceAndTargetContainers
|
||||||
@@ -146,7 +144,5 @@ export function useCopyJobNavigation() {
|
|||||||
handlePrevious,
|
handlePrevious,
|
||||||
handleCancel,
|
handleCancel,
|
||||||
primaryBtnText,
|
primaryBtnText,
|
||||||
error,
|
|
||||||
setError,
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,7 +11,14 @@ interface CopyJobActionMenuProps {
|
|||||||
|
|
||||||
const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick }) => {
|
const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick }) => {
|
||||||
const [updatingJobAction, setUpdatingJobAction] = React.useState<{ jobName: string; action: string } | null>(null);
|
const [updatingJobAction, setUpdatingJobAction] = React.useState<{ jobName: string; action: string } | null>(null);
|
||||||
if ([CopyJobStatusType.Completed, CopyJobStatusType.Cancelled].includes(job.Status)) {
|
if (
|
||||||
|
[
|
||||||
|
CopyJobStatusType.Completed,
|
||||||
|
CopyJobStatusType.Cancelled,
|
||||||
|
CopyJobStatusType.Failed,
|
||||||
|
CopyJobStatusType.Faulted,
|
||||||
|
].includes(job.Status)
|
||||||
|
) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -55,7 +62,7 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
|
|||||||
[CopyJobStatusType.InProgress, CopyJobStatusType.Running, CopyJobStatusType.Partitioning].includes(job.Status)
|
[CopyJobStatusType.InProgress, CopyJobStatusType.Running, CopyJobStatusType.Partitioning].includes(job.Status)
|
||||||
) {
|
) {
|
||||||
const filteredItems = baseItems.filter((item) => item.key !== CopyJobActions.resume);
|
const filteredItems = baseItems.filter((item) => item.key !== CopyJobActions.resume);
|
||||||
if (job.Mode === CopyJobMigrationType.Online) {
|
if ((job.Mode ?? "").toLowerCase() === CopyJobMigrationType.Online) {
|
||||||
filteredItems.push({
|
filteredItems.push({
|
||||||
key: CopyJobActions.complete,
|
key: CopyJobActions.complete,
|
||||||
text: ContainerCopyMessages.MonitorJobs.Actions.complete,
|
text: ContainerCopyMessages.MonitorJobs.Actions.complete,
|
||||||
@@ -67,7 +74,7 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
|
|||||||
return filteredItems;
|
return filteredItems;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ([CopyJobStatusType.Failed, CopyJobStatusType.Faulted, CopyJobStatusType.Skipped].includes(job.Status)) {
|
if ([CopyJobStatusType.Skipped].includes(job.Status)) {
|
||||||
return baseItems.filter((item) => item.key === CopyJobActions.resume);
|
return baseItems.filter((item) => item.key === CopyJobActions.resume);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -73,6 +73,8 @@ export interface CopyJobFlowType {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface CopyJobContextProviderType {
|
export interface CopyJobContextProviderType {
|
||||||
|
contextError: string | null;
|
||||||
|
setContextError: React.Dispatch<React.SetStateAction<string | null>>;
|
||||||
flow: CopyJobFlowType;
|
flow: CopyJobFlowType;
|
||||||
setFlow: React.Dispatch<React.SetStateAction<CopyJobFlowType>>;
|
setFlow: React.Dispatch<React.SetStateAction<CopyJobFlowType>>;
|
||||||
copyJobState: CopyJobContextState | null;
|
copyJobState: CopyJobContextState | null;
|
||||||
|
|||||||
@@ -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": [
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -16,7 +16,6 @@ import InfoIcon from "../../../../images/info_color.svg";
|
|||||||
import LoadingIcon from "../../../../images/loading.svg";
|
import LoadingIcon from "../../../../images/loading.svg";
|
||||||
import WarningIcon from "../../../../images/warning.svg";
|
import WarningIcon from "../../../../images/warning.svg";
|
||||||
import { ClientDefaults, KeyCodes } from "../../../Common/Constants";
|
import { ClientDefaults, KeyCodes } from "../../../Common/Constants";
|
||||||
import { userContext } from "../../../UserContext";
|
|
||||||
import { useNotificationConsole } from "../../../hooks/useNotificationConsole";
|
import { useNotificationConsole } from "../../../hooks/useNotificationConsole";
|
||||||
import { ConsoleData, ConsoleDataType } from "./ConsoleData";
|
import { ConsoleData, ConsoleDataType } from "./ConsoleData";
|
||||||
|
|
||||||
@@ -127,7 +126,6 @@ export class NotificationConsoleComponent extends React.Component<
|
|||||||
<span className="numWarningItems">{numWarningItems}</span>
|
<span className="numWarningItems">{numWarningItems}</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
{userContext.features.pr && <PrPreview pr={userContext.features.pr} />}
|
|
||||||
<span className="consoleSplitter" />
|
<span className="consoleSplitter" />
|
||||||
<span className="headerStatus">
|
<span className="headerStatus">
|
||||||
<span className="headerStatusEllipsis" aria-live="assertive" aria-atomic="true">
|
<span className="headerStatusEllipsis" aria-live="assertive" aria-atomic="true">
|
||||||
@@ -293,21 +291,6 @@ export class NotificationConsoleComponent extends React.Component<
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const PrPreview = (props: { pr: string }) => {
|
|
||||||
const url = new URL(props.pr);
|
|
||||||
const [, ref] = url.hash.split("#");
|
|
||||||
url.hash = "";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<span className="consoleSplitter" />
|
|
||||||
<a target="_blank" rel="noreferrer" href={url.href} style={{ marginRight: "1em", fontWeight: "bold" }}>
|
|
||||||
{ref}
|
|
||||||
</a>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const NotificationConsole: React.FC = () => {
|
export const NotificationConsole: React.FC = () => {
|
||||||
const setIsExpanded = useNotificationConsole((state) => state.setIsExpanded);
|
const setIsExpanded = useNotificationConsole((state) => state.setIsExpanded);
|
||||||
const isExpanded = useNotificationConsole((state) => state.isExpanded);
|
const isExpanded = useNotificationConsole((state) => state.isExpanded);
|
||||||
|
|||||||
@@ -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 }),
|
|
||||||
}));
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Notebook Viewer</title>
|
|
||||||
<link rel="shortcut icon" href="../../images/CosmosDB_rgb_ui_lighttheme.ico" type="image/x-icon" />
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="notebookComponentContainer" id="notebookContent"></div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -25,7 +25,6 @@ export type Features = {
|
|||||||
readonly notebookServerUrl?: string;
|
readonly notebookServerUrl?: string;
|
||||||
readonly sandboxNotebookOutputs: boolean;
|
readonly sandboxNotebookOutputs: boolean;
|
||||||
readonly selfServeType?: string;
|
readonly selfServeType?: string;
|
||||||
readonly pr?: string;
|
|
||||||
readonly showMinRUSurvey: boolean;
|
readonly showMinRUSurvey: boolean;
|
||||||
readonly ttl90Days: boolean;
|
readonly ttl90Days: boolean;
|
||||||
readonly mongoProxyEndpoint?: string;
|
readonly mongoProxyEndpoint?: string;
|
||||||
@@ -96,7 +95,6 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
|
|||||||
notebookServerUrl: get("notebookserverurl"),
|
notebookServerUrl: get("notebookserverurl"),
|
||||||
sandboxNotebookOutputs: "true" === get("sandboxnotebookoutputs", "true"),
|
sandboxNotebookOutputs: "true" === get("sandboxnotebookoutputs", "true"),
|
||||||
selfServeType: get("selfservetype"),
|
selfServeType: get("selfservetype"),
|
||||||
pr: get("pr"),
|
|
||||||
showMinRUSurvey: "true" === get("showminrusurvey"),
|
showMinRUSurvey: "true" === get("showminrusurvey"),
|
||||||
ttl90Days: "true" === get("ttl90days"),
|
ttl90Days: "true" === get("ttl90days"),
|
||||||
autoscaleDefault: "true" === get("autoscaledefault"),
|
autoscaleDefault: "true" === get("autoscaledefault"),
|
||||||
|
|||||||
@@ -113,7 +113,6 @@ module.exports = function (_env = {}, argv = {}) {
|
|||||||
hostedExplorer: "./src/HostedExplorer.tsx",
|
hostedExplorer: "./src/HostedExplorer.tsx",
|
||||||
terminal: "./src/Terminal/index.ts",
|
terminal: "./src/Terminal/index.ts",
|
||||||
cellOutputViewer: "./src/CellOutputViewer/CellOutputViewer.tsx",
|
cellOutputViewer: "./src/CellOutputViewer/CellOutputViewer.tsx",
|
||||||
notebookViewer: "./src/NotebookViewer/NotebookViewer.tsx",
|
|
||||||
galleryViewer: "./src/GalleryViewer/GalleryViewer.tsx",
|
galleryViewer: "./src/GalleryViewer/GalleryViewer.tsx",
|
||||||
selfServe: "./src/SelfServe/SelfServe.tsx",
|
selfServe: "./src/SelfServe/SelfServe.tsx",
|
||||||
connectToGitHub: "./src/GitHub/GitHubConnector.ts",
|
connectToGitHub: "./src/GitHub/GitHubConnector.ts",
|
||||||
@@ -151,11 +150,6 @@ module.exports = function (_env = {}, argv = {}) {
|
|||||||
template: "src/CellOutputViewer/cellOutputViewer.html",
|
template: "src/CellOutputViewer/cellOutputViewer.html",
|
||||||
chunks: ["cellOutputViewer"],
|
chunks: ["cellOutputViewer"],
|
||||||
}),
|
}),
|
||||||
new HtmlWebpackPlugin({
|
|
||||||
filename: "notebookViewer.html",
|
|
||||||
template: "src/NotebookViewer/notebookViewer.html",
|
|
||||||
chunks: ["notebookViewer"],
|
|
||||||
}),
|
|
||||||
new HtmlWebpackPlugin({
|
new HtmlWebpackPlugin({
|
||||||
filename: "gallery.html",
|
filename: "gallery.html",
|
||||||
template: "src/GalleryViewer/galleryViewer.html",
|
template: "src/GalleryViewer/galleryViewer.html",
|
||||||
|
|||||||
Reference in New Issue
Block a user