mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2026-01-25 04:34:13 +00:00
Compare commits
29 Commits
copilot/su
...
users/sind
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
4c1c3782ba | ||
|
|
05407b3e0f | ||
|
|
703218debf | ||
|
|
f83a2c4442 | ||
|
|
2ff01c6379 | ||
|
|
1f1ab078c6 | ||
|
|
31385950dd | ||
|
|
6dce2632c8 | ||
|
|
80ad5f10d4 | ||
|
|
f02611c90e | ||
|
|
9646dfcf04 | ||
|
|
90f3c3a79e | ||
|
|
abd41485e8 | ||
|
|
151ce0ac3a | ||
|
|
c89c878636 | ||
|
|
1a2d2b0e4e | ||
|
|
36e8fd3519 | ||
|
|
5c83b36fd2 | ||
|
|
79dbdbbe7f | ||
|
|
3f977df00d | ||
|
|
865e9c906b | ||
|
|
1c34425dd8 | ||
|
|
50a244e6f9 | ||
|
|
9dad75c2f9 | ||
|
|
876b531248 | ||
|
|
28fe5846b3 | ||
|
|
f8533abb64 | ||
|
|
2921294a3d | ||
|
|
a03c289da0 |
@@ -7,16 +7,27 @@ import { HttpStatusCodes } from "./Constants";
|
|||||||
import { logError } from "./Logger";
|
import { logError } from "./Logger";
|
||||||
import { sendMessage } from "./MessageHandler";
|
import { sendMessage } from "./MessageHandler";
|
||||||
|
|
||||||
export const handleError = (error: string | ARMError | Error, area: string, consoleErrorPrefix?: string): void => {
|
export interface HandleErrorOptions {
|
||||||
|
/** Optional redacted error to use for telemetry logging instead of the original error */
|
||||||
|
redactedError?: string | ARMError | Error;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const handleError = (
|
||||||
|
error: string | ARMError | Error,
|
||||||
|
area: string,
|
||||||
|
consoleErrorPrefix?: string,
|
||||||
|
options?: HandleErrorOptions,
|
||||||
|
): void => {
|
||||||
const errorMessage = getErrorMessage(error);
|
const errorMessage = getErrorMessage(error);
|
||||||
const errorCode = error instanceof ARMError ? error.code : undefined;
|
const errorCode = error instanceof ARMError ? error.code : undefined;
|
||||||
|
|
||||||
// logs error to data explorer console
|
// logs error to data explorer console (always shows original, non-redacted message)
|
||||||
const consoleErrorMessage = consoleErrorPrefix ? `${consoleErrorPrefix}:\n ${errorMessage}` : errorMessage;
|
const consoleErrorMessage = consoleErrorPrefix ? `${consoleErrorPrefix}:\n ${errorMessage}` : errorMessage;
|
||||||
logConsoleError(consoleErrorMessage);
|
logConsoleError(consoleErrorMessage);
|
||||||
|
|
||||||
// logs error to both app insight and kusto
|
// logs error to both app insight and kusto (use redacted message if provided)
|
||||||
logError(errorMessage, area, errorCode);
|
const telemetryErrorMessage = options?.redactedError ? getErrorMessage(options.redactedError) : errorMessage;
|
||||||
|
logError(telemetryErrorMessage, area, errorCode);
|
||||||
|
|
||||||
// checks for errors caused by firewall and sends them to portal to handle
|
// checks for errors caused by firewall and sends them to portal to handle
|
||||||
sendNotificationForError(errorMessage, errorCode);
|
sendNotificationForError(errorMessage, errorCode);
|
||||||
|
|||||||
@@ -44,7 +44,8 @@ export const deleteDocuments = async (
|
|||||||
documentIds: DocumentId[],
|
documentIds: DocumentId[],
|
||||||
abortSignal: AbortSignal,
|
abortSignal: AbortSignal,
|
||||||
): Promise<IBulkDeleteResult[]> => {
|
): Promise<IBulkDeleteResult[]> => {
|
||||||
const clearMessage = logConsoleProgress(`Deleting ${documentIds.length} ${getEntityName(true)}`);
|
const totalCount = documentIds.length;
|
||||||
|
const clearMessage = logConsoleProgress(`Deleting ${totalCount} ${getEntityName(true)}`);
|
||||||
try {
|
try {
|
||||||
const v2Container = await client().database(collection.databaseId).container(collection.id());
|
const v2Container = await client().database(collection.databaseId).container(collection.id());
|
||||||
|
|
||||||
@@ -83,11 +84,7 @@ export const deleteDocuments = async (
|
|||||||
const flatAllResult = Array.prototype.concat.apply([], allResult);
|
const flatAllResult = Array.prototype.concat.apply([], allResult);
|
||||||
return flatAllResult;
|
return flatAllResult;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
handleError(
|
handleError(error, "DeleteDocuments", `Error while deleting ${totalCount} ${getEntityName(totalCount > 1)}`);
|
||||||
error,
|
|
||||||
"DeleteDocuments",
|
|
||||||
`Error while deleting ${documentIds.length} ${getEntityName(documentIds.length > 1)}`,
|
|
||||||
);
|
|
||||||
throw error;
|
throw error;
|
||||||
} finally {
|
} finally {
|
||||||
clearMessage();
|
clearMessage();
|
||||||
|
|||||||
171
src/Common/dataAccess/queryDocumentsPage.test.ts
Normal file
171
src/Common/dataAccess/queryDocumentsPage.test.ts
Normal file
@@ -0,0 +1,171 @@
|
|||||||
|
import { redactSyntaxErrorMessage } from "./queryDocumentsPage";
|
||||||
|
|
||||||
|
/* Typical error to redact looks like this (the message property contains a JSON string with nested structure):
|
||||||
|
{
|
||||||
|
"message": "{\"code\":\"BadRequest\",\"message\":\"{\\\"errors\\\":[{\\\"severity\\\":\\\"Error\\\",\\\"location\\\":{\\\"start\\\":0,\\\"end\\\":5},\\\"code\\\":\\\"SC1001\\\",\\\"message\\\":\\\"Syntax error, incorrect syntax near 'Crazy'.\\\"}]}\\r\\nActivityId: d5424e10-51bd-46f7-9aec-7b40bed36f17, Windows/10.0.20348 cosmos-netstandard-sdk/3.18.0\"}"
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Helper to create the nested error structure that matches what the SDK returns
|
||||||
|
const createNestedError = (
|
||||||
|
errors: Array<{ severity?: string; location?: { start: number; end: number }; code: string; message: string }>,
|
||||||
|
activityId: string = "test-activity-id",
|
||||||
|
): { message: string } => {
|
||||||
|
const innerErrorsJson = JSON.stringify({ errors });
|
||||||
|
const innerMessage = `${innerErrorsJson}\r\n${activityId}`;
|
||||||
|
const outerJson = JSON.stringify({ code: "BadRequest", message: innerMessage });
|
||||||
|
return { message: outerJson };
|
||||||
|
};
|
||||||
|
|
||||||
|
// Helper to parse the redacted result
|
||||||
|
const parseRedactedResult = (result: { message: string }) => {
|
||||||
|
const outerParsed = JSON.parse(result.message);
|
||||||
|
const [innerErrorsJson, activityIdPart] = outerParsed.message.split("\r\n");
|
||||||
|
const innerErrors = JSON.parse(innerErrorsJson);
|
||||||
|
return { outerParsed, innerErrors, activityIdPart };
|
||||||
|
};
|
||||||
|
|
||||||
|
describe("redactSyntaxErrorMessage", () => {
|
||||||
|
it("should redact SC1001 error message", () => {
|
||||||
|
const error = createNestedError(
|
||||||
|
[
|
||||||
|
{
|
||||||
|
severity: "Error",
|
||||||
|
location: { start: 0, end: 5 },
|
||||||
|
code: "SC1001",
|
||||||
|
message: "Syntax error, incorrect syntax near 'Crazy'.",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
"ActivityId: d5424e10-51bd-46f7-9aec-7b40bed36f17",
|
||||||
|
);
|
||||||
|
|
||||||
|
const result = redactSyntaxErrorMessage(error) as { message: string };
|
||||||
|
const { outerParsed, innerErrors, activityIdPart } = parseRedactedResult(result);
|
||||||
|
|
||||||
|
expect(outerParsed.code).toBe("BadRequest");
|
||||||
|
expect(innerErrors.errors[0].message).toBe("__REDACTED__");
|
||||||
|
expect(activityIdPart).toContain("ActivityId: d5424e10-51bd-46f7-9aec-7b40bed36f17");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should redact SC2001 error message", () => {
|
||||||
|
const error = createNestedError(
|
||||||
|
[
|
||||||
|
{
|
||||||
|
severity: "Error",
|
||||||
|
location: { start: 0, end: 10 },
|
||||||
|
code: "SC2001",
|
||||||
|
message: "Some sensitive syntax error message.",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
"ActivityId: abc123",
|
||||||
|
);
|
||||||
|
|
||||||
|
const result = redactSyntaxErrorMessage(error) as { message: string };
|
||||||
|
const { outerParsed, innerErrors, activityIdPart } = parseRedactedResult(result);
|
||||||
|
|
||||||
|
expect(outerParsed.code).toBe("BadRequest");
|
||||||
|
expect(innerErrors.errors[0].message).toBe("__REDACTED__");
|
||||||
|
expect(activityIdPart).toContain("ActivityId: abc123");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should redact multiple errors with SC1001 and SC2001 codes", () => {
|
||||||
|
const error = createNestedError(
|
||||||
|
[
|
||||||
|
{ severity: "Error", code: "SC1001", message: "First error" },
|
||||||
|
{ severity: "Error", code: "SC2001", message: "Second error" },
|
||||||
|
],
|
||||||
|
"ActivityId: xyz",
|
||||||
|
);
|
||||||
|
|
||||||
|
const result = redactSyntaxErrorMessage(error) as { message: string };
|
||||||
|
const { innerErrors } = parseRedactedResult(result);
|
||||||
|
|
||||||
|
expect(innerErrors.errors[0].message).toBe("__REDACTED__");
|
||||||
|
expect(innerErrors.errors[1].message).toBe("__REDACTED__");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should not redact errors with other codes", () => {
|
||||||
|
const error = createNestedError(
|
||||||
|
[{ severity: "Error", code: "SC9999", message: "This should not be redacted." }],
|
||||||
|
"ActivityId: test123",
|
||||||
|
);
|
||||||
|
|
||||||
|
const result = redactSyntaxErrorMessage(error);
|
||||||
|
|
||||||
|
expect(result).toBe(error); // Should return original error unchanged
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should not modify non-BadRequest errors", () => {
|
||||||
|
const innerMessage = JSON.stringify({ errors: [{ code: "SC1001", message: "Should not be redacted" }] });
|
||||||
|
const error = {
|
||||||
|
message: JSON.stringify({ code: "NotFound", message: innerMessage }),
|
||||||
|
};
|
||||||
|
|
||||||
|
const result = redactSyntaxErrorMessage(error);
|
||||||
|
|
||||||
|
expect(result).toBe(error);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle errors without message property", () => {
|
||||||
|
const error = { code: "BadRequest" };
|
||||||
|
|
||||||
|
const result = redactSyntaxErrorMessage(error);
|
||||||
|
|
||||||
|
expect(result).toBe(error);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle non-object errors", () => {
|
||||||
|
const stringError = "Simple string error";
|
||||||
|
const nullError: null = null;
|
||||||
|
const undefinedError: undefined = undefined;
|
||||||
|
|
||||||
|
expect(redactSyntaxErrorMessage(stringError)).toBe(stringError);
|
||||||
|
expect(redactSyntaxErrorMessage(nullError)).toBe(nullError);
|
||||||
|
expect(redactSyntaxErrorMessage(undefinedError)).toBe(undefinedError);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle malformed JSON in message", () => {
|
||||||
|
const error = {
|
||||||
|
message: "not valid json",
|
||||||
|
};
|
||||||
|
|
||||||
|
const result = redactSyntaxErrorMessage(error);
|
||||||
|
|
||||||
|
expect(result).toBe(error);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle message without ActivityId suffix", () => {
|
||||||
|
const innerErrorsJson = JSON.stringify({
|
||||||
|
errors: [{ severity: "Error", code: "SC1001", message: "Syntax error near something." }],
|
||||||
|
});
|
||||||
|
const error = {
|
||||||
|
message: JSON.stringify({ code: "BadRequest", message: innerErrorsJson + "\r\n" }),
|
||||||
|
};
|
||||||
|
|
||||||
|
const result = redactSyntaxErrorMessage(error) as { message: string };
|
||||||
|
const { innerErrors } = parseRedactedResult(result);
|
||||||
|
|
||||||
|
expect(innerErrors.errors[0].message).toBe("__REDACTED__");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should preserve other error properties", () => {
|
||||||
|
const baseError = createNestedError([{ code: "SC1001", message: "Error" }], "ActivityId: test");
|
||||||
|
const error = {
|
||||||
|
...baseError,
|
||||||
|
statusCode: 400,
|
||||||
|
additionalInfo: "extra data",
|
||||||
|
};
|
||||||
|
|
||||||
|
const result = redactSyntaxErrorMessage(error) as {
|
||||||
|
message: string;
|
||||||
|
statusCode: number;
|
||||||
|
additionalInfo: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
expect(result.statusCode).toBe(400);
|
||||||
|
expect(result.additionalInfo).toBe("extra data");
|
||||||
|
|
||||||
|
const { innerErrors } = parseRedactedResult(result);
|
||||||
|
expect(innerErrors.errors[0].message).toBe("__REDACTED__");
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -4,6 +4,51 @@ import { getEntityName } from "../DocumentUtility";
|
|||||||
import { handleError } from "../ErrorHandlingUtils";
|
import { handleError } from "../ErrorHandlingUtils";
|
||||||
import { MinimalQueryIterator, nextPage } from "../IteratorUtilities";
|
import { MinimalQueryIterator, nextPage } from "../IteratorUtilities";
|
||||||
|
|
||||||
|
// Redact sensitive information from BadRequest errors with specific codes
|
||||||
|
export const redactSyntaxErrorMessage = (error: unknown): unknown => {
|
||||||
|
const codesToRedact = ["SC1001", "SC2001"];
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Handle error objects with a message property
|
||||||
|
if (error && typeof error === "object" && "message" in error) {
|
||||||
|
const errorObj = error as { code?: string; message?: string };
|
||||||
|
if (typeof errorObj.message === "string") {
|
||||||
|
// Parse the inner JSON from the message
|
||||||
|
const innerJson = JSON.parse(errorObj.message);
|
||||||
|
if (innerJson.code === "BadRequest" && typeof innerJson.message === "string") {
|
||||||
|
const [innerErrorsJson, activityIdPart] = innerJson.message.split("\r\n");
|
||||||
|
const innerErrorsObj = JSON.parse(innerErrorsJson);
|
||||||
|
if (Array.isArray(innerErrorsObj.errors)) {
|
||||||
|
let modified = false;
|
||||||
|
innerErrorsObj.errors = innerErrorsObj.errors.map((err: { code?: string; message?: string }) => {
|
||||||
|
if (err.code && codesToRedact.includes(err.code)) {
|
||||||
|
modified = true;
|
||||||
|
return { ...err, message: "__REDACTED__" };
|
||||||
|
}
|
||||||
|
return err;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (modified) {
|
||||||
|
// Reconstruct the message with the redacted content
|
||||||
|
const redactedMessage = JSON.stringify(innerErrorsObj) + `\r\n${activityIdPart}`;
|
||||||
|
const redactedError = {
|
||||||
|
...error,
|
||||||
|
message: JSON.stringify({ ...innerJson, message: redactedMessage }),
|
||||||
|
body: undefined as unknown, // Clear body to avoid sensitive data
|
||||||
|
};
|
||||||
|
return redactedError;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// If parsing fails, return the original error
|
||||||
|
}
|
||||||
|
|
||||||
|
return error;
|
||||||
|
};
|
||||||
|
|
||||||
export const queryDocumentsPage = async (
|
export const queryDocumentsPage = async (
|
||||||
resourceName: string,
|
resourceName: string,
|
||||||
documentsIterator: MinimalQueryIterator,
|
documentsIterator: MinimalQueryIterator,
|
||||||
@@ -18,7 +63,12 @@ export const queryDocumentsPage = async (
|
|||||||
logConsoleInfo(`Successfully fetched ${itemCount} ${entityName} for container ${resourceName}`);
|
logConsoleInfo(`Successfully fetched ${itemCount} ${entityName} for container ${resourceName}`);
|
||||||
return result;
|
return result;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
handleError(error, "QueryDocumentsPage", `Failed to query ${entityName} for container ${resourceName}`);
|
// Redact sensitive information for telemetry while showing original in console
|
||||||
|
const redactedError = redactSyntaxErrorMessage(error);
|
||||||
|
|
||||||
|
handleError(error, "QueryDocumentsPage", `Failed to query ${entityName} for container ${resourceName}`, {
|
||||||
|
redactedError: redactedError as Error,
|
||||||
|
});
|
||||||
throw error;
|
throw error;
|
||||||
} finally {
|
} finally {
|
||||||
clearMessage();
|
clearMessage();
|
||||||
|
|||||||
@@ -46,6 +46,10 @@ export type DataExploreMessageV3 =
|
|||||||
params: {
|
params: {
|
||||||
updateType: "created" | "deleted" | "settings";
|
updateType: "created" | "deleted" | "settings";
|
||||||
};
|
};
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
type: FabricMessageTypes.RestoreContainer;
|
||||||
|
params: [];
|
||||||
};
|
};
|
||||||
export interface GetCosmosTokenMessageOptions {
|
export interface GetCosmosTokenMessageOptions {
|
||||||
verb: "connect" | "delete" | "get" | "head" | "options" | "patch" | "post" | "put" | "trace";
|
verb: "connect" | "delete" | "get" | "head" | "options" | "patch" | "post" | "put" | "trace";
|
||||||
|
|||||||
@@ -516,7 +516,7 @@ describe("CopyJobActionMenu", () => {
|
|||||||
expect(screen.getByText("Cancel")).toBeInTheDocument();
|
expect(screen.getByText("Cancel")).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("should handle complete action disabled state for online jobs", () => {
|
it("should disable complete action when job is being updated", () => {
|
||||||
const job = createMockJob({
|
const job = createMockJob({
|
||||||
Status: CopyJobStatusType.InProgress,
|
Status: CopyJobStatusType.InProgress,
|
||||||
Mode: CopyJobMigrationType.Online,
|
Mode: CopyJobMigrationType.Online,
|
||||||
@@ -530,8 +530,34 @@ describe("CopyJobActionMenu", () => {
|
|||||||
const completeButton = screen.getByText("Complete");
|
const completeButton = screen.getByText("Complete");
|
||||||
fireEvent.click(completeButton);
|
fireEvent.click(completeButton);
|
||||||
|
|
||||||
|
// Simulate dialog confirmation to trigger state update
|
||||||
|
const [, , , onOkCallback] = mockShowOkCancelModalDialog.mock.calls[0];
|
||||||
|
onOkCallback();
|
||||||
|
|
||||||
fireEvent.click(actionButton);
|
fireEvent.click(actionButton);
|
||||||
expect(screen.getByText("Complete")).toBeInTheDocument();
|
const completeButtonAfterClick = screen.getByText("Complete").closest("button");
|
||||||
|
expect(completeButtonAfterClick).toBeInTheDocument();
|
||||||
|
expect(completeButtonAfterClick).toHaveAttribute("aria-disabled", "true");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should disable complete action when any other action is being performed", () => {
|
||||||
|
const job = createMockJob({
|
||||||
|
Status: CopyJobStatusType.InProgress,
|
||||||
|
Mode: CopyJobMigrationType.Online,
|
||||||
|
});
|
||||||
|
|
||||||
|
render(<TestComponentWrapper job={job} />);
|
||||||
|
|
||||||
|
const actionButton = screen.getByRole("button", { name: "Actions" });
|
||||||
|
fireEvent.click(actionButton);
|
||||||
|
|
||||||
|
const pauseButton = screen.getByText("Pause");
|
||||||
|
fireEvent.click(pauseButton);
|
||||||
|
fireEvent.click(actionButton);
|
||||||
|
|
||||||
|
const completeButtonAfterClick = screen.getByText("Complete").closest("button");
|
||||||
|
expect(completeButtonAfterClick).toBeInTheDocument();
|
||||||
|
expect(completeButtonAfterClick).toHaveAttribute("aria-disabled", "true");
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -61,7 +61,6 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
|
|||||||
|
|
||||||
const getMenuItems = (): IContextualMenuProps["items"] => {
|
const getMenuItems = (): IContextualMenuProps["items"] => {
|
||||||
const isThisJobUpdating = updatingJobAction?.jobName === job.Name;
|
const isThisJobUpdating = updatingJobAction?.jobName === job.Name;
|
||||||
const updatingAction = updatingJobAction?.action;
|
|
||||||
|
|
||||||
const baseItems = [
|
const baseItems = [
|
||||||
{
|
{
|
||||||
@@ -105,7 +104,7 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
|
|||||||
text: ContainerCopyMessages.MonitorJobs.Actions.complete,
|
text: ContainerCopyMessages.MonitorJobs.Actions.complete,
|
||||||
iconProps: { iconName: "CheckMark" },
|
iconProps: { iconName: "CheckMark" },
|
||||||
onClick: () => showActionConfirmationDialog(job, CopyJobActions.complete),
|
onClick: () => showActionConfirmationDialog(job, CopyJobActions.complete),
|
||||||
disabled: isThisJobUpdating && updatingAction === CopyJobActions.complete,
|
disabled: isThisJobUpdating,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
return filteredItems;
|
return filteredItems;
|
||||||
|
|||||||
@@ -11,9 +11,17 @@ jest.mock("../../Actions/CopyJobActions", () => ({
|
|||||||
|
|
||||||
jest.mock("./CopyJobColumns", () => ({
|
jest.mock("./CopyJobColumns", () => ({
|
||||||
getColumns: jest.fn(() => [
|
getColumns: jest.fn(() => [
|
||||||
|
{
|
||||||
|
key: "LastUpdatedTime",
|
||||||
|
name: "Date & time",
|
||||||
|
fieldName: "LastUpdatedTime",
|
||||||
|
minWidth: 140,
|
||||||
|
maxWidth: 300,
|
||||||
|
isResizable: true,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
key: "Name",
|
key: "Name",
|
||||||
name: "Name",
|
name: "Job name",
|
||||||
fieldName: "Name",
|
fieldName: "Name",
|
||||||
minWidth: 140,
|
minWidth: 140,
|
||||||
maxWidth: 300,
|
maxWidth: 300,
|
||||||
@@ -165,6 +173,165 @@ describe("CopyJobsList", () => {
|
|||||||
expect(screen.getByTestId("action-menu-job-2")).toBeInTheDocument();
|
expect(screen.getByTestId("action-menu-job-2")).toBeInTheDocument();
|
||||||
expect(screen.getByTestId("action-menu-job-3")).toBeInTheDocument();
|
expect(screen.getByTestId("action-menu-job-3")).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("renders filter TextField with data-test attribute", () => {
|
||||||
|
render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
|
||||||
|
|
||||||
|
const filterTextField = document.querySelector('[data-test="CopyJobsList/FilterTextField"]');
|
||||||
|
expect(filterTextField).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("renders search TextField with correct placeholder", () => {
|
||||||
|
render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
|
||||||
|
|
||||||
|
const searchInput = screen.getByPlaceholderText("Search jobs...");
|
||||||
|
expect(searchInput).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("Filtering", () => {
|
||||||
|
it("filters jobs by Name when text is entered", async () => {
|
||||||
|
render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
|
||||||
|
|
||||||
|
const filterInput = screen.getByPlaceholderText("Search jobs...");
|
||||||
|
fireEvent.change(filterInput, { target: { value: "Job 1" } });
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByText("Test Job 1")).toBeInTheDocument();
|
||||||
|
expect(screen.queryByText("Test Job 2")).not.toBeInTheDocument();
|
||||||
|
expect(screen.queryByText("Test Job 3")).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("filters jobs case-insensitively", async () => {
|
||||||
|
render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
|
||||||
|
|
||||||
|
const filterInput = screen.getByPlaceholderText("Search jobs...");
|
||||||
|
fireEvent.change(filterInput, { target: { value: "test job 1" } });
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByText("Test Job 1")).toBeInTheDocument();
|
||||||
|
expect(screen.queryByText("Test Job 2")).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("shows all jobs when filter text is empty", async () => {
|
||||||
|
render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
|
||||||
|
|
||||||
|
const filterInput = screen.getByPlaceholderText("Search jobs...");
|
||||||
|
fireEvent.change(filterInput, { target: { value: "Job 1" } });
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.queryByText("Test Job 2")).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
fireEvent.change(filterInput, { target: { value: "" } });
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByText("Test Job 1")).toBeInTheDocument();
|
||||||
|
expect(screen.getByText("Test Job 2")).toBeInTheDocument();
|
||||||
|
expect(screen.getByText("Test Job 3")).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("filters jobs by Status across all columns", async () => {
|
||||||
|
render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
|
||||||
|
|
||||||
|
const filterInput = screen.getByPlaceholderText("Search jobs...");
|
||||||
|
fireEvent.change(filterInput, { target: { value: CopyJobStatusType.Running } });
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByText("Test Job 1")).toBeInTheDocument();
|
||||||
|
expect(screen.queryByText("Test Job 2")).not.toBeInTheDocument();
|
||||||
|
expect(screen.queryByText("Test Job 3")).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("filters jobs by Mode across all columns", async () => {
|
||||||
|
render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
|
||||||
|
|
||||||
|
const filterInput = screen.getByPlaceholderText("Search jobs...");
|
||||||
|
fireEvent.change(filterInput, { target: { value: "Offline" } });
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.queryByText("Test Job 1")).not.toBeInTheDocument();
|
||||||
|
expect(screen.getByText("Test Job 2")).toBeInTheDocument();
|
||||||
|
expect(screen.queryByText("Test Job 3")).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("shows no results when filter matches no jobs", async () => {
|
||||||
|
render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
|
||||||
|
|
||||||
|
const filterInput = screen.getByPlaceholderText("Search jobs...");
|
||||||
|
fireEvent.change(filterInput, { target: { value: "NonExistentJob" } });
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.queryByText("Test Job 1")).not.toBeInTheDocument();
|
||||||
|
expect(screen.queryByText("Test Job 2")).not.toBeInTheDocument();
|
||||||
|
expect(screen.queryByText("Test Job 3")).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("filters by partial text match", async () => {
|
||||||
|
render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
|
||||||
|
|
||||||
|
const filterInput = screen.getByPlaceholderText("Search jobs...");
|
||||||
|
fireEvent.change(filterInput, { target: { value: "Test" } });
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByText("Test Job 1")).toBeInTheDocument();
|
||||||
|
expect(screen.getByText("Test Job 2")).toBeInTheDocument();
|
||||||
|
expect(screen.getByText("Test Job 3")).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("resets pagination when filter changes", async () => {
|
||||||
|
const manyJobs: CopyJobType[] = Array.from({ length: 25 }, (_, i) => ({
|
||||||
|
...mockJobs[0],
|
||||||
|
ID: `job-${i + 1}`,
|
||||||
|
Name: `Test Job ${i + 1}`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
render(<CopyJobsList jobs={manyJobs} handleActionClick={mockHandleActionClick} pageSize={10} />);
|
||||||
|
|
||||||
|
// Navigate to page 2
|
||||||
|
fireEvent.click(screen.getByLabelText("Go to next page"));
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByText("Showing 11 - 20 of 25 items")).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Apply filter - should reset to page 1
|
||||||
|
const filterInput = screen.getByPlaceholderText("Search jobs...");
|
||||||
|
fireEvent.change(filterInput, { target: { value: "Job 1" } });
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
// Filtered results show from the beginning
|
||||||
|
expect(screen.getByText("Test Job 1")).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("updates filtered count in pager", async () => {
|
||||||
|
const manyJobs: CopyJobType[] = Array.from({ length: 25 }, (_, i) => ({
|
||||||
|
...mockJobs[0],
|
||||||
|
ID: `job-${i + 1}`,
|
||||||
|
Name: i < 5 ? `Alpha Job ${i + 1}` : `Beta Job ${i + 1}`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
render(<CopyJobsList jobs={manyJobs} handleActionClick={mockHandleActionClick} pageSize={10} />);
|
||||||
|
|
||||||
|
expect(screen.getByText("Showing 1 - 10 of 25 items")).toBeInTheDocument();
|
||||||
|
|
||||||
|
const filterInput = screen.getByPlaceholderText("Search jobs...");
|
||||||
|
fireEvent.change(filterInput, { target: { value: "Alpha" } });
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.queryByText("Showing 1 - 10 of 25 items")).not.toBeInTheDocument();
|
||||||
|
// Pager should not be visible since filtered results (5) are less than page size (10)
|
||||||
|
expect(screen.queryByLabelText("Go to next page")).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("Pagination", () => {
|
describe("Pagination", () => {
|
||||||
@@ -342,7 +509,7 @@ describe("CopyJobsList", () => {
|
|||||||
|
|
||||||
describe("Component Props", () => {
|
describe("Component Props", () => {
|
||||||
it("uses default page size when not provided", () => {
|
it("uses default page size when not provided", () => {
|
||||||
const manyJobs: CopyJobType[] = Array.from({ length: 12 }, (_, i) => ({
|
const manyJobs: CopyJobType[] = Array.from({ length: 20 }, (_, i) => ({
|
||||||
...mockJobs[0],
|
...mockJobs[0],
|
||||||
ID: `job-${i + 1}`,
|
ID: `job-${i + 1}`,
|
||||||
Name: `Test Job ${i + 1}`,
|
Name: `Test Job ${i + 1}`,
|
||||||
@@ -351,7 +518,7 @@ describe("CopyJobsList", () => {
|
|||||||
render(<CopyJobsList jobs={manyJobs} handleActionClick={mockHandleActionClick} />);
|
render(<CopyJobsList jobs={manyJobs} handleActionClick={mockHandleActionClick} />);
|
||||||
|
|
||||||
expect(screen.getByLabelText("Go to next page")).toBeInTheDocument();
|
expect(screen.getByLabelText("Go to next page")).toBeInTheDocument();
|
||||||
expect(screen.getByText("Showing 1 - 10 of 12 items")).toBeInTheDocument();
|
expect(screen.getByText("Showing 1 - 15 of 20 items")).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("passes correct props to getColumns function", async () => {
|
it("passes correct props to getColumns function", async () => {
|
||||||
@@ -440,7 +607,33 @@ describe("CopyJobsList", () => {
|
|||||||
render(<CopyJobsList jobs={largeJobsList} handleActionClick={mockHandleActionClick} />);
|
render(<CopyJobsList jobs={largeJobsList} handleActionClick={mockHandleActionClick} />);
|
||||||
}).not.toThrow();
|
}).not.toThrow();
|
||||||
|
|
||||||
expect(screen.getByText("Showing 1 - 10 of 1000 items")).toBeInTheDocument();
|
expect(screen.getByText("Showing 1 - 15 of 1000 items")).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("handles filtering with null or undefined values gracefully", async () => {
|
||||||
|
const jobsWithNullValues: CopyJobType[] = [
|
||||||
|
{
|
||||||
|
...mockJobs[0],
|
||||||
|
ID: "job-with-values",
|
||||||
|
Name: "Valid Job",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
...mockJobs[1],
|
||||||
|
ID: "job-null-name",
|
||||||
|
Name: undefined as unknown as string,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
expect(() => {
|
||||||
|
render(<CopyJobsList jobs={jobsWithNullValues} handleActionClick={mockHandleActionClick} />);
|
||||||
|
}).not.toThrow();
|
||||||
|
|
||||||
|
const filterInput = screen.getByPlaceholderText("Search jobs...");
|
||||||
|
fireEvent.change(filterInput, { target: { value: "Valid" } });
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByText("Valid Job")).toBeInTheDocument();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -12,8 +12,9 @@ import {
|
|||||||
Stack,
|
Stack,
|
||||||
Sticky,
|
Sticky,
|
||||||
StickyPositionType,
|
StickyPositionType,
|
||||||
|
TextField,
|
||||||
} from "@fluentui/react";
|
} from "@fluentui/react";
|
||||||
import React, { useEffect } from "react";
|
import React, { useEffect, useMemo } from "react";
|
||||||
import Pager from "../../../../Common/Pager";
|
import Pager from "../../../../Common/Pager";
|
||||||
import { useThemeStore } from "../../../../hooks/useTheme";
|
import { useThemeStore } from "../../../../hooks/useTheme";
|
||||||
import { getThemeTokens } from "../../../Theme/ThemeUtil";
|
import { getThemeTokens } from "../../../Theme/ThemeUtil";
|
||||||
@@ -30,9 +31,15 @@ interface CopyJobsListProps {
|
|||||||
const styles = {
|
const styles = {
|
||||||
container: { height: "100%" } as React.CSSProperties,
|
container: { height: "100%" } as React.CSSProperties,
|
||||||
stackItem: { position: "relative", marginBottom: "20px" } as React.CSSProperties,
|
stackItem: { position: "relative", marginBottom: "20px" } as React.CSSProperties,
|
||||||
|
filterContainer: {
|
||||||
|
margin: "15px 5px",
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const PAGE_SIZE = 10;
|
const PAGE_SIZE = 15;
|
||||||
|
|
||||||
|
// Columns to search across
|
||||||
|
const searchableFields = ["Name", "Status", "LastUpdatedTime", "Mode"];
|
||||||
|
|
||||||
const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pageSize = PAGE_SIZE }) => {
|
const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pageSize = PAGE_SIZE }) => {
|
||||||
const isDarkMode = useThemeStore((state) => state.isDarkMode);
|
const isDarkMode = useThemeStore((state) => state.isDarkMode);
|
||||||
@@ -41,6 +48,23 @@ const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pa
|
|||||||
const [sortedJobs, setSortedJobs] = React.useState<CopyJobType[]>(jobs);
|
const [sortedJobs, setSortedJobs] = React.useState<CopyJobType[]>(jobs);
|
||||||
const [sortedColumnKey, setSortedColumnKey] = React.useState<string | undefined>(undefined);
|
const [sortedColumnKey, setSortedColumnKey] = React.useState<string | undefined>(undefined);
|
||||||
const [isSortedDescending, setIsSortedDescending] = React.useState<boolean>(false);
|
const [isSortedDescending, setIsSortedDescending] = React.useState<boolean>(false);
|
||||||
|
const [filterText, setFilterText] = React.useState<string>("");
|
||||||
|
|
||||||
|
const filteredJobs = useMemo(() => {
|
||||||
|
if (!filterText) {
|
||||||
|
return sortedJobs;
|
||||||
|
}
|
||||||
|
const lowerFilterText = filterText.toLowerCase();
|
||||||
|
return sortedJobs.filter((job: any) => {
|
||||||
|
return searchableFields.some((field) => {
|
||||||
|
const value = job[field];
|
||||||
|
if (value === undefined || value === null) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return String(value).toLowerCase().includes(lowerFilterText);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}, [sortedJobs, filterText]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setSortedJobs(jobs);
|
setSortedJobs(jobs);
|
||||||
@@ -64,7 +88,15 @@ const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pa
|
|||||||
setStartIndex(0);
|
setStartIndex(0);
|
||||||
};
|
};
|
||||||
|
|
||||||
const columns: IColumn[] = getColumns(handleSort, handleActionClick, sortedColumnKey, isSortedDescending);
|
const sortableColumns: IColumn[] = getColumns(handleSort, handleActionClick, sortedColumnKey, isSortedDescending);
|
||||||
|
|
||||||
|
const handleFilterTextChange = (
|
||||||
|
_event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
|
||||||
|
newValue?: string,
|
||||||
|
) => {
|
||||||
|
setFilterText(newValue || "");
|
||||||
|
setStartIndex(0);
|
||||||
|
};
|
||||||
|
|
||||||
const _handleRowClick = (job: CopyJobType) => {
|
const _handleRowClick = (job: CopyJobType) => {
|
||||||
openCopyJobDetailsPanel(job);
|
openCopyJobDetailsPanel(job);
|
||||||
@@ -81,14 +113,25 @@ const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pa
|
|||||||
return (
|
return (
|
||||||
<div style={styles.container}>
|
<div style={styles.container}>
|
||||||
<Stack verticalFill={true}>
|
<Stack verticalFill={true}>
|
||||||
|
<Stack.Item>
|
||||||
|
<div style={styles.filterContainer}>
|
||||||
|
<TextField
|
||||||
|
data-test="CopyJobsList/FilterTextField"
|
||||||
|
placeholder="Search jobs..."
|
||||||
|
ariaLabel="Search jobs"
|
||||||
|
value={filterText}
|
||||||
|
onChange={handleFilterTextChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Stack.Item>
|
||||||
<Stack.Item verticalFill={true} grow={1} shrink={1} style={styles.stackItem}>
|
<Stack.Item verticalFill={true} grow={1} shrink={1} style={styles.stackItem}>
|
||||||
<ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
|
<ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
|
||||||
<ShimmeredDetailsList
|
<ShimmeredDetailsList
|
||||||
className="CopyJobListContainer"
|
className="CopyJobListContainer"
|
||||||
onRenderRow={_onRenderRow}
|
onRenderRow={_onRenderRow}
|
||||||
checkboxVisibility={2}
|
checkboxVisibility={2}
|
||||||
columns={columns}
|
columns={sortableColumns}
|
||||||
items={sortedJobs.slice(startIndex, startIndex + pageSize)}
|
items={filteredJobs.slice(startIndex, startIndex + pageSize)}
|
||||||
enableShimmer={false}
|
enableShimmer={false}
|
||||||
constrainMode={ConstrainMode.unconstrained}
|
constrainMode={ConstrainMode.unconstrained}
|
||||||
layoutMode={DetailsListLayoutMode.justified}
|
layoutMode={DetailsListLayoutMode.justified}
|
||||||
@@ -117,12 +160,12 @@ const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pa
|
|||||||
/>
|
/>
|
||||||
</ScrollablePane>
|
</ScrollablePane>
|
||||||
</Stack.Item>
|
</Stack.Item>
|
||||||
{sortedJobs.length > pageSize && (
|
{filteredJobs.length > pageSize && (
|
||||||
<Stack.Item>
|
<Stack.Item>
|
||||||
<Pager
|
<Pager
|
||||||
disabled={false}
|
disabled={false}
|
||||||
startIndex={startIndex}
|
startIndex={startIndex}
|
||||||
totalCount={sortedJobs.length}
|
totalCount={filteredJobs.length}
|
||||||
pageSize={pageSize}
|
pageSize={pageSize}
|
||||||
onLoadPage={(startIdx /* pageSize */) => {
|
onLoadPage={(startIdx /* pageSize */) => {
|
||||||
setStartIndex(startIdx);
|
setStartIndex(startIdx);
|
||||||
|
|||||||
@@ -1,5 +1,27 @@
|
|||||||
@import "../../../less/Common/Constants.less";
|
@import "../../../less/Common/Constants.less";
|
||||||
|
|
||||||
|
.themedTextFieldStyles() {
|
||||||
|
.ms-TextField {
|
||||||
|
.ms-TextField-fieldGroup {
|
||||||
|
background-color: var(--colorNeutralBackground1);
|
||||||
|
border-color: var(--colorNeutralStroke1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-TextField-field {
|
||||||
|
color: var(--colorNeutralForeground1);
|
||||||
|
background-color: var(--colorNeutralBackground1);
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: var(--colorNeutralForeground4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-Label {
|
||||||
|
color: var(--colorNeutralForeground1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Common theme-aware classes
|
// Common theme-aware classes
|
||||||
.themeText {
|
.themeText {
|
||||||
color: var(--colorNeutralForeground1);
|
color: var(--colorNeutralForeground1);
|
||||||
@@ -119,25 +141,8 @@
|
|||||||
filter: invert(1);
|
filter: invert(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ms-TextField {
|
.themedTextFieldStyles();
|
||||||
.ms-TextField-fieldGroup {
|
|
||||||
background-color: var(--colorNeutralBackground1);
|
|
||||||
border-color: var(--colorNeutralStroke1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ms-TextField-field {
|
|
||||||
color: var(--colorNeutralForeground1);
|
|
||||||
background-color: var(--colorNeutralBackground1);
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
color: var(--colorNeutralForeground4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ms-Label {
|
|
||||||
color: var(--colorNeutralForeground1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.migrationTypeDescription {
|
.migrationTypeDescription {
|
||||||
p {
|
p {
|
||||||
color: var(--colorNeutralForeground1);
|
color: var(--colorNeutralForeground1);
|
||||||
@@ -173,6 +178,11 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
|
body.isDarkMode & {
|
||||||
|
.themedTextFieldStyles();
|
||||||
|
}
|
||||||
|
|
||||||
.ms-DetailsList {
|
.ms-DetailsList {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ import {
|
|||||||
AddGlobalSecondaryIndexPanelProps,
|
AddGlobalSecondaryIndexPanelProps,
|
||||||
} from "Explorer/Panes/AddGlobalSecondaryIndexPanel/AddGlobalSecondaryIndexPanel";
|
} from "Explorer/Panes/AddGlobalSecondaryIndexPanel/AddGlobalSecondaryIndexPanel";
|
||||||
import { useDatabases } from "Explorer/useDatabases";
|
import { useDatabases } from "Explorer/useDatabases";
|
||||||
import { isFabric, isFabricNative } from "Platform/Fabric/FabricUtil";
|
import { isFabric, isFabricNative, openRestoreContainerDialog } from "Platform/Fabric/FabricUtil";
|
||||||
import { Action } from "Shared/Telemetry/TelemetryConstants";
|
import { Action } from "Shared/Telemetry/TelemetryConstants";
|
||||||
import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
|
import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
|
||||||
import { ReactTabKind, useTabs } from "hooks/useTabs";
|
import { ReactTabKind, useTabs } from "hooks/useTabs";
|
||||||
@@ -35,6 +35,7 @@ import StoredProcedure from "./Tree/StoredProcedure";
|
|||||||
import Trigger from "./Tree/Trigger";
|
import Trigger from "./Tree/Trigger";
|
||||||
import UserDefinedFunction from "./Tree/UserDefinedFunction";
|
import UserDefinedFunction from "./Tree/UserDefinedFunction";
|
||||||
import { useSelectedNode } from "./useSelectedNode";
|
import { useSelectedNode } from "./useSelectedNode";
|
||||||
|
import { extractFeatures } from "../Platform/Hosted/extractFeatures";
|
||||||
|
|
||||||
export interface CollectionContextMenuButtonParams {
|
export interface CollectionContextMenuButtonParams {
|
||||||
databaseId: string;
|
databaseId: string;
|
||||||
@@ -60,6 +61,17 @@ export const createDatabaseContextMenu = (container: Explorer, databaseId: strin
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
if (isFabricNative() && !userContext.fabricContext?.isReadOnly) {
|
||||||
|
const features = extractFeatures();
|
||||||
|
if (features?.enableRestoreContainer) {
|
||||||
|
items.push({
|
||||||
|
iconSrc: AddCollectionIcon,
|
||||||
|
onClick: () => openRestoreContainerDialog(),
|
||||||
|
label: `Restore ${getCollectionName()}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (!isFabricNative() && (userContext.apiType !== "Tables" || userContext.features.enableSDKoperations)) {
|
if (!isFabricNative() && (userContext.apiType !== "Tables" || userContext.features.enableSDKoperations)) {
|
||||||
items.push({
|
items.push({
|
||||||
iconSrc: DeleteDatabaseIcon,
|
iconSrc: DeleteDatabaseIcon,
|
||||||
|
|||||||
@@ -54,6 +54,6 @@
|
|||||||
.mainButtonsContainer {
|
.mainButtonsContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0 16px;
|
gap: 0 16px;
|
||||||
margin-bottom: 10px
|
margin: 40px auto
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -164,6 +164,23 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
|
|||||||
const container = explorer;
|
const container = explorer;
|
||||||
const subscriptions: Array<{ dispose: () => void }> = [];
|
const subscriptions: Array<{ dispose: () => void }> = [];
|
||||||
|
|
||||||
|
let title: string;
|
||||||
|
let subtitle: string;
|
||||||
|
|
||||||
|
switch (userContext.apiType) {
|
||||||
|
case "Postgres":
|
||||||
|
title = "Welcome to Azure Cosmos DB for PostgreSQL";
|
||||||
|
subtitle = "Get started with our sample datasets, documentation, and additional tools.";
|
||||||
|
break;
|
||||||
|
case "VCoreMongo":
|
||||||
|
title = "Welcome to Azure DocumentDB (with MongoDB compatibility)";
|
||||||
|
subtitle = "Get started with our sample datasets, documentation, and additional tools.";
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
title = "Welcome to Azure Cosmos DB";
|
||||||
|
subtitle = "Globally distributed, multi-model database service for any scale";
|
||||||
|
}
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
subscriptions.push(
|
subscriptions.push(
|
||||||
{
|
{
|
||||||
@@ -902,10 +919,11 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
|
|||||||
return (
|
return (
|
||||||
<div className={styles.splashScreenContainer}>
|
<div className={styles.splashScreenContainer}>
|
||||||
<div className={styles.splashScreen}>
|
<div className={styles.splashScreen}>
|
||||||
<h2 className={styles.title} role="heading" aria-label="Welcome to Azure Cosmos DB">
|
<h2 className={styles.title} role="heading" aria-label={title}>
|
||||||
Welcome to Azure Cosmos DB<span className="activePatch"></span>
|
{title}
|
||||||
|
<span className="activePatch"></span>
|
||||||
</h2>
|
</h2>
|
||||||
<div className={styles.subtitle}>Globally distributed, multi-model database service for any scale</div>
|
<div className={styles.subtitle}>{subtitle}</div>
|
||||||
{getSplashScreenButtons()}
|
{getSplashScreenButtons()}
|
||||||
{useCarousel.getState().showCoachMark && (
|
{useCarousel.getState().showCoachMark && (
|
||||||
<Coachmark
|
<Coachmark
|
||||||
|
|||||||
@@ -105,9 +105,12 @@ const App = (): JSX.Element => {
|
|||||||
// Scenario-based health tracking: start ApplicationLoad and complete phases.
|
// Scenario-based health tracking: start ApplicationLoad and complete phases.
|
||||||
const { startScenario, completePhase } = useMetricScenario();
|
const { startScenario, completePhase } = useMetricScenario();
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
startScenario(MetricScenario.ApplicationLoad);
|
// Only start scenario after config is initialized to avoid race conditions
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// with message handlers that depend on configContext.platform
|
||||||
}, []);
|
if (config) {
|
||||||
|
startScenario(MetricScenario.ApplicationLoad);
|
||||||
|
}
|
||||||
|
}, [config, startScenario]);
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (explorer) {
|
if (explorer) {
|
||||||
|
|||||||
@@ -1,88 +0,0 @@
|
|||||||
import { initializeIcons } from "@fluentui/react";
|
|
||||||
import "bootstrap/dist/css/bootstrap.css";
|
|
||||||
import React from "react";
|
|
||||||
import * as ReactDOM from "react-dom";
|
|
||||||
import { configContext, initializeConfiguration } from "../ConfigContext";
|
|
||||||
import { GalleryHeaderComponent } from "../Explorer/Controls/Header/GalleryHeaderComponent";
|
|
||||||
import { GalleryTab } from "../Explorer/Controls/NotebookGallery/GalleryViewerComponent";
|
|
||||||
import {
|
|
||||||
NotebookViewerComponent,
|
|
||||||
NotebookViewerComponentProps,
|
|
||||||
} from "../Explorer/Controls/NotebookViewer/NotebookViewerComponent";
|
|
||||||
import * as FileSystemUtil from "../Explorer/Notebook/FileSystemUtil";
|
|
||||||
import { IGalleryItem, JunoClient } from "../Juno/JunoClient";
|
|
||||||
import * as GalleryUtils from "../Utils/GalleryUtils";
|
|
||||||
|
|
||||||
const onInit = async () => {
|
|
||||||
initializeIcons();
|
|
||||||
await initializeConfiguration();
|
|
||||||
const galleryViewerProps = GalleryUtils.getGalleryViewerProps(window.location.search);
|
|
||||||
const notebookViewerProps = GalleryUtils.getNotebookViewerProps(window.location.search);
|
|
||||||
let backNavigationText: string;
|
|
||||||
let onBackClick: () => void;
|
|
||||||
if (galleryViewerProps.selectedTab !== undefined) {
|
|
||||||
backNavigationText = GalleryUtils.getTabTitle(galleryViewerProps.selectedTab);
|
|
||||||
onBackClick = () =>
|
|
||||||
(window.location.href = `${configContext.hostedExplorerURL}gallery.html?tab=${
|
|
||||||
GalleryTab[galleryViewerProps.selectedTab]
|
|
||||||
}`);
|
|
||||||
}
|
|
||||||
const hideInputs = notebookViewerProps.hideInputs;
|
|
||||||
|
|
||||||
const notebookUrl = decodeURIComponent(notebookViewerProps.notebookUrl);
|
|
||||||
|
|
||||||
const galleryItemId = notebookViewerProps.galleryItemId;
|
|
||||||
let galleryItem: IGalleryItem;
|
|
||||||
|
|
||||||
if (galleryItemId) {
|
|
||||||
const junoClient = new JunoClient();
|
|
||||||
const galleryItemJunoResponse = await junoClient.getNotebookInfo(galleryItemId);
|
|
||||||
galleryItem = galleryItemJunoResponse.data;
|
|
||||||
}
|
|
||||||
|
|
||||||
// The main purpose of hiding the prompt is to hide everything when hiding inputs.
|
|
||||||
// It is generally not very useful to just hide the prompt.
|
|
||||||
const hidePrompts = hideInputs;
|
|
||||||
|
|
||||||
render(notebookUrl, backNavigationText, hideInputs, hidePrompts, galleryItem, onBackClick);
|
|
||||||
};
|
|
||||||
|
|
||||||
const render = (
|
|
||||||
notebookUrl: string,
|
|
||||||
backNavigationText: string,
|
|
||||||
hideInputs?: boolean,
|
|
||||||
hidePrompts?: boolean,
|
|
||||||
galleryItem?: IGalleryItem,
|
|
||||||
onBackClick?: () => void,
|
|
||||||
) => {
|
|
||||||
const props: NotebookViewerComponentProps = {
|
|
||||||
junoClient: galleryItem ? new JunoClient() : undefined,
|
|
||||||
notebookUrl,
|
|
||||||
galleryItem,
|
|
||||||
backNavigationText,
|
|
||||||
hideInputs,
|
|
||||||
hidePrompts,
|
|
||||||
onBackClick: onBackClick,
|
|
||||||
onTagClick: undefined,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (galleryItem) {
|
|
||||||
document.title = FileSystemUtil.stripExtension(galleryItem.name, "ipynb");
|
|
||||||
}
|
|
||||||
|
|
||||||
const element = (
|
|
||||||
<>
|
|
||||||
<header>
|
|
||||||
<GalleryHeaderComponent />
|
|
||||||
</header>
|
|
||||||
<div style={{ marginLeft: 120, marginRight: 120 }}>
|
|
||||||
<NotebookViewerComponent {...props} />
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
ReactDOM.render(element, document.getElementById("notebookContent"));
|
|
||||||
};
|
|
||||||
|
|
||||||
// Entry point
|
|
||||||
window.addEventListener("load", onInit);
|
|
||||||
@@ -105,6 +105,12 @@ const requestAndStoreAccessToken = async (): Promise<void> => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const openRestoreContainerDialog = (): void => {
|
||||||
|
if (isFabricNative()) {
|
||||||
|
sendCachedDataMessage(FabricMessageTypes.RestoreContainer, []);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Check token validity and schedule a refresh if necessary
|
* Check token validity and schedule a refresh if necessary
|
||||||
* @param tokenTimestamp
|
* @param tokenTimestamp
|
||||||
|
|||||||
@@ -40,6 +40,7 @@ export type Features = {
|
|||||||
readonly disableConnectionStringLogin: boolean;
|
readonly disableConnectionStringLogin: boolean;
|
||||||
readonly enableContainerCopy: boolean;
|
readonly enableContainerCopy: boolean;
|
||||||
readonly enableCloudShell: boolean;
|
readonly enableCloudShell: boolean;
|
||||||
|
readonly enableRestoreContainer: boolean; // only for Fabric
|
||||||
|
|
||||||
// can be set via both flight and feature flag
|
// can be set via both flight and feature flag
|
||||||
autoscaleDefault: boolean;
|
autoscaleDefault: boolean;
|
||||||
@@ -93,7 +94,7 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
|
|||||||
notebookBasePath: get("notebookbasepath"),
|
notebookBasePath: get("notebookbasepath"),
|
||||||
notebookServerToken: get("notebookservertoken"),
|
notebookServerToken: get("notebookservertoken"),
|
||||||
notebookServerUrl: get("notebookserverurl"),
|
notebookServerUrl: get("notebookserverurl"),
|
||||||
sandboxNotebookOutputs: "true" === get("sandboxnotebookoutputs", "true"),
|
sandboxNotebookOutputs: true,
|
||||||
selfServeType: get("selfservetype"),
|
selfServeType: get("selfservetype"),
|
||||||
showMinRUSurvey: "true" === get("showminrusurvey"),
|
showMinRUSurvey: "true" === get("showminrusurvey"),
|
||||||
ttl90Days: "true" === get("ttl90days"),
|
ttl90Days: "true" === get("ttl90days"),
|
||||||
@@ -111,6 +112,7 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
|
|||||||
enablePriorityBasedExecution: "true" === get("enableprioritybasedexecution"),
|
enablePriorityBasedExecution: "true" === get("enableprioritybasedexecution"),
|
||||||
disableConnectionStringLogin: "true" === get("disableconnectionstringlogin"),
|
disableConnectionStringLogin: "true" === get("disableconnectionstringlogin"),
|
||||||
enableContainerCopy: "true" === get("enablecontainercopy"),
|
enableContainerCopy: "true" === get("enablecontainercopy"),
|
||||||
|
enableRestoreContainer: "true" === get("enablerestorecontainer"),
|
||||||
enableCloudShell: true,
|
enableCloudShell: true,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -27,7 +27,7 @@ describe("AuthorizationUtils", () => {
|
|||||||
enableKoResourceTree: false,
|
enableKoResourceTree: false,
|
||||||
enableThroughputBuckets: false,
|
enableThroughputBuckets: false,
|
||||||
hostedDataExplorer: false,
|
hostedDataExplorer: false,
|
||||||
sandboxNotebookOutputs: false,
|
sandboxNotebookOutputs: true,
|
||||||
showMinRUSurvey: false,
|
showMinRUSurvey: false,
|
||||||
ttl90Days: false,
|
ttl90Days: false,
|
||||||
enableThroughputCap: false,
|
enableThroughputCap: false,
|
||||||
@@ -43,6 +43,7 @@ describe("AuthorizationUtils", () => {
|
|||||||
partitionKeyDefault: false,
|
partitionKeyDefault: false,
|
||||||
partitionKeyDefault2: false,
|
partitionKeyDefault2: false,
|
||||||
notebooksDownBanner: false,
|
notebooksDownBanner: false,
|
||||||
|
enableRestoreContainer: false,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -58,7 +58,9 @@ export const defaultAccounts: Record<TestAccount, string> = {
|
|||||||
export const resourceGroupName = process.env.DE_TEST_RESOURCE_GROUP ?? "de-e2e-tests";
|
export const resourceGroupName = process.env.DE_TEST_RESOURCE_GROUP ?? "de-e2e-tests";
|
||||||
export const subscriptionId = process.env.DE_TEST_SUBSCRIPTION_ID ?? "69e02f2d-f059-4409-9eac-97e8a276ae2c";
|
export const subscriptionId = process.env.DE_TEST_SUBSCRIPTION_ID ?? "69e02f2d-f059-4409-9eac-97e8a276ae2c";
|
||||||
export const TEST_AUTOSCALE_THROUGHPUT_RU = 1000;
|
export const TEST_AUTOSCALE_THROUGHPUT_RU = 1000;
|
||||||
|
export const TEST_MANUAL_THROUGHPUT_RU = 800;
|
||||||
export const TEST_AUTOSCALE_MAX_THROUGHPUT_RU_2K = 2000;
|
export const TEST_AUTOSCALE_MAX_THROUGHPUT_RU_2K = 2000;
|
||||||
|
export const TEST_AUTOSCALE_MAX_THROUGHPUT_RU_4K = 4000;
|
||||||
export const TEST_MANUAL_THROUGHPUT_RU_2K = 2000;
|
export const TEST_MANUAL_THROUGHPUT_RU_2K = 2000;
|
||||||
export const ONE_MINUTE_MS: number = 60 * 1000;
|
export const ONE_MINUTE_MS: number = 60 * 1000;
|
||||||
|
|
||||||
|
|||||||
@@ -246,13 +246,17 @@ test.describe("Container Copy - Offline Migration", () => {
|
|||||||
expect(response.ok()).toBe(true);
|
expect(response.ok()).toBe(true);
|
||||||
|
|
||||||
// Verify panel closes and job appears in the list
|
// Verify panel closes and job appears in the list
|
||||||
await expect(panel).not.toBeVisible({ timeout: 5000 });
|
await expect(panel).not.toBeVisible();
|
||||||
|
|
||||||
|
const filterTextField = wrapper.getByTestId("CopyJobsList/FilterTextField");
|
||||||
|
await filterTextField.waitFor({ state: "visible" });
|
||||||
|
await filterTextField.fill(validJobName);
|
||||||
|
|
||||||
const jobsListContainer = wrapper.locator(".CopyJobListContainer .ms-DetailsList-contentWrapper .ms-List-page");
|
const jobsListContainer = wrapper.locator(".CopyJobListContainer .ms-DetailsList-contentWrapper .ms-List-page");
|
||||||
await jobsListContainer.waitFor({ state: "visible", timeout: 5000 });
|
await jobsListContainer.waitFor({ state: "visible" });
|
||||||
|
|
||||||
const jobItem = jobsListContainer.getByText(validJobName);
|
const jobItem = jobsListContainer.getByText(validJobName);
|
||||||
await jobItem.waitFor({ state: "visible", timeout: 5000 });
|
await jobItem.waitFor({ state: "visible" });
|
||||||
await expect(jobItem).toBeVisible();
|
await expect(jobItem).toBeVisible();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -120,18 +120,22 @@ test.describe("Container Copy - Online Migration", () => {
|
|||||||
expect(response.ok()).toBe(true);
|
expect(response.ok()).toBe(true);
|
||||||
|
|
||||||
// Verify panel closes and job appears in the list
|
// Verify panel closes and job appears in the list
|
||||||
await expect(panel).not.toBeVisible({ timeout: 5000 });
|
await expect(panel).not.toBeVisible();
|
||||||
|
|
||||||
|
const filterTextField = wrapper.getByTestId("CopyJobsList/FilterTextField");
|
||||||
|
await filterTextField.waitFor({ state: "visible" });
|
||||||
|
await filterTextField.fill(onlineMigrationJobName);
|
||||||
|
|
||||||
const jobsListContainer = wrapper.locator(".CopyJobListContainer .ms-DetailsList-contentWrapper .ms-List-page");
|
const jobsListContainer = wrapper.locator(".CopyJobListContainer .ms-DetailsList-contentWrapper .ms-List-page");
|
||||||
await jobsListContainer.waitFor({ state: "visible", timeout: 5000 });
|
await jobsListContainer.waitFor({ state: "visible" });
|
||||||
|
|
||||||
let jobRow, statusCell, actionMenuButton;
|
let jobRow, statusCell, actionMenuButton;
|
||||||
jobRow = jobsListContainer.locator(".ms-DetailsRow", { hasText: onlineMigrationJobName });
|
jobRow = jobsListContainer.locator(".ms-DetailsRow", { hasText: onlineMigrationJobName });
|
||||||
statusCell = jobRow.locator("[data-automationid='DetailsRowCell'][data-automation-key='CopyJobStatus']");
|
statusCell = jobRow.locator("[data-automationid='DetailsRowCell'][data-automation-key='CopyJobStatus']");
|
||||||
await jobRow.waitFor({ state: "visible", timeout: 5000 });
|
await jobRow.waitFor({ state: "visible" });
|
||||||
|
|
||||||
// Verify job status changes to queued state
|
// Verify job status changes to queued state
|
||||||
await expect(statusCell).toContainText(/running|queued|pending/i, { timeout: 5000 });
|
await expect(statusCell).toContainText(/running|queued|pending/i);
|
||||||
|
|
||||||
// Test job lifecycle management through action menu
|
// Test job lifecycle management through action menu
|
||||||
actionMenuButton = wrapper.getByTestId(`CopyJobActionMenu/Button:${onlineMigrationJobName}`);
|
actionMenuButton = wrapper.getByTestId(`CopyJobActionMenu/Button:${onlineMigrationJobName}`);
|
||||||
|
|||||||
@@ -134,7 +134,7 @@ test.describe("Container Copy - Permission Screen Verification", () => {
|
|||||||
|
|
||||||
const pitrBtn = accordionPanel.getByTestId("pointInTimeRestore:PrimaryBtn");
|
const pitrBtn = accordionPanel.getByTestId("pointInTimeRestore:PrimaryBtn");
|
||||||
await expect(pitrBtn).toBeVisible();
|
await expect(pitrBtn).toBeVisible();
|
||||||
await pitrBtn.click();
|
await pitrBtn.click({ force: true });
|
||||||
|
|
||||||
// Verify new page opens with correct URL pattern
|
// Verify new page opens with correct URL pattern
|
||||||
page.context().on("page", async (newPage) => {
|
page.context().on("page", async (newPage) => {
|
||||||
@@ -246,7 +246,7 @@ test.describe("Container Copy - Permission Screen Verification", () => {
|
|||||||
|
|
||||||
const toggleButton = crossAccordionPanel.getByTestId("btn-toggle");
|
const toggleButton = crossAccordionPanel.getByTestId("btn-toggle");
|
||||||
await expect(toggleButton).toBeVisible();
|
await expect(toggleButton).toBeVisible();
|
||||||
await toggleButton.click();
|
await toggleButton.click({ force: true });
|
||||||
|
|
||||||
// Verify popover functionality
|
// Verify popover functionality
|
||||||
const popover = frame.locator("[data-test='popover-container']");
|
const popover = frame.locator("[data-test='popover-container']");
|
||||||
@@ -257,7 +257,7 @@ test.describe("Container Copy - Permission Screen Verification", () => {
|
|||||||
await expect(yesButton).toBeVisible();
|
await expect(yesButton).toBeVisible();
|
||||||
await expect(noButton).toBeVisible();
|
await expect(noButton).toBeVisible();
|
||||||
|
|
||||||
await yesButton.click();
|
await yesButton.click({ force: true });
|
||||||
|
|
||||||
// Verify loading states
|
// Verify loading states
|
||||||
await expect(loadingOverlay).toBeVisible();
|
await expect(loadingOverlay).toBeVisible();
|
||||||
@@ -265,6 +265,6 @@ test.describe("Container Copy - Permission Screen Verification", () => {
|
|||||||
await expect(popover).toBeHidden({ timeout: 10 * 1000 });
|
await expect(popover).toBeHidden({ timeout: 10 * 1000 });
|
||||||
|
|
||||||
// Cancel the panel to clean up
|
// Cancel the panel to clean up
|
||||||
await panel.getByRole("button", { name: "Cancel" }).click();
|
await panel.getByRole("button", { name: "Cancel" }).click({ force: true });
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ let CONTAINER_ID: string;
|
|||||||
|
|
||||||
// Set up test database and container with data before all tests
|
// Set up test database and container with data before all tests
|
||||||
test.beforeAll(async () => {
|
test.beforeAll(async () => {
|
||||||
testContainer = await createTestSQLContainer(true);
|
testContainer = await createTestSQLContainer({ includeTestData: true });
|
||||||
DATABASE_ID = testContainer.database.id;
|
DATABASE_ID = testContainer.database.id;
|
||||||
CONTAINER_ID = testContainer.container.id;
|
CONTAINER_ID = testContainer.container.id;
|
||||||
});
|
});
|
||||||
|
|||||||
232
test/sql/scaleAndSettings/sharedThroughput.spec.ts
Normal file
232
test/sql/scaleAndSettings/sharedThroughput.spec.ts
Normal file
@@ -0,0 +1,232 @@
|
|||||||
|
import { Locator, expect, test } from "@playwright/test";
|
||||||
|
import {
|
||||||
|
CommandBarButton,
|
||||||
|
DataExplorer,
|
||||||
|
ONE_MINUTE_MS,
|
||||||
|
TEST_AUTOSCALE_MAX_THROUGHPUT_RU_4K,
|
||||||
|
TEST_MANUAL_THROUGHPUT_RU,
|
||||||
|
TestAccount,
|
||||||
|
} from "../../fx";
|
||||||
|
import { TestDatabaseContext, createTestDB } from "../../testData";
|
||||||
|
|
||||||
|
test.describe("Database with Shared Throughput", () => {
|
||||||
|
let dbContext: TestDatabaseContext = null!;
|
||||||
|
let explorer: DataExplorer = null!;
|
||||||
|
const containerId = "sharedcontainer";
|
||||||
|
|
||||||
|
// Helper methods
|
||||||
|
const getThroughputInput = (type: "manual" | "autopilot"): Locator => {
|
||||||
|
return explorer.frame.getByTestId(`${type}-throughput-input`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Delete database only if not running in CI
|
||||||
|
if (!process.env.CI) {
|
||||||
|
test.afterEach("Delete Test Database", async () => {
|
||||||
|
await dbContext?.dispose();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
test.describe("Manual Throughput Tests", () => {
|
||||||
|
test.beforeEach(async ({ page }) => {
|
||||||
|
explorer = await DataExplorer.open(page, TestAccount.SQL);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Create database with shared manual throughput and verify Scale node in UI", async () => {
|
||||||
|
test.setTimeout(120000); // 2 minutes timeout
|
||||||
|
// Create database with shared manual throughput (400 RU/s)
|
||||||
|
dbContext = await createTestDB({ throughput: 400 });
|
||||||
|
|
||||||
|
// Verify database node appears in the tree
|
||||||
|
const databaseNode = await explorer.waitForNode(dbContext.database.id);
|
||||||
|
expect(databaseNode).toBeDefined();
|
||||||
|
|
||||||
|
// Expand the database node to see child nodes
|
||||||
|
await databaseNode.expand();
|
||||||
|
|
||||||
|
// Verify that "Scale" node appears under the database
|
||||||
|
const scaleNode = await explorer.waitForNode(`${dbContext.database.id}/Scale`);
|
||||||
|
expect(scaleNode).toBeDefined();
|
||||||
|
await expect(scaleNode.element).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Add container to shared database without dedicated throughput", async () => {
|
||||||
|
// Create database with shared manual throughput
|
||||||
|
dbContext = await createTestDB({ throughput: 400 });
|
||||||
|
|
||||||
|
// Wait for the database to appear in the tree
|
||||||
|
await explorer.waitForNode(dbContext.database.id);
|
||||||
|
|
||||||
|
// Add a container to the shared database via UI
|
||||||
|
const newContainerButton = await explorer.globalCommandButton("New Container");
|
||||||
|
await newContainerButton.click();
|
||||||
|
|
||||||
|
await explorer.whilePanelOpen(
|
||||||
|
"New Container",
|
||||||
|
async (panel, okButton) => {
|
||||||
|
// Select "Use existing" database
|
||||||
|
const useExistingRadio = panel.getByRole("radio", { name: /Use existing/i });
|
||||||
|
await useExistingRadio.click();
|
||||||
|
|
||||||
|
// Select the database from dropdown using the new data-testid
|
||||||
|
const databaseDropdown = panel.getByRole("combobox", { name: "Choose an existing database" });
|
||||||
|
await databaseDropdown.click();
|
||||||
|
|
||||||
|
await explorer.frame.getByRole("option", { name: dbContext.database.id }).click();
|
||||||
|
// Now you can target the specific database option by its data-testid
|
||||||
|
//await panel.getByTestId(`database-option-${dbContext.database.id}`).click();
|
||||||
|
// Fill container id
|
||||||
|
await panel.getByRole("textbox", { name: "Container id, Example Container1" }).fill(containerId);
|
||||||
|
|
||||||
|
// Fill partition key
|
||||||
|
await panel.getByRole("textbox", { name: "Partition key" }).fill("/pk");
|
||||||
|
|
||||||
|
// Ensure "Provision dedicated throughput" is NOT checked
|
||||||
|
const dedicatedThroughputCheckbox = panel.getByRole("checkbox", {
|
||||||
|
name: /Provision dedicated throughput for this container/i,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (await dedicatedThroughputCheckbox.isVisible()) {
|
||||||
|
const isChecked = await dedicatedThroughputCheckbox.isChecked();
|
||||||
|
if (isChecked) {
|
||||||
|
await dedicatedThroughputCheckbox.uncheck();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
await okButton.click();
|
||||||
|
},
|
||||||
|
{ closeTimeout: 5 * ONE_MINUTE_MS },
|
||||||
|
);
|
||||||
|
|
||||||
|
// Verify container was created under the database
|
||||||
|
const containerNode = await explorer.waitForContainerNode(dbContext.database.id, containerId);
|
||||||
|
expect(containerNode).toBeDefined();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Scale shared database manual throughput", async () => {
|
||||||
|
// Create database with shared manual throughput (400 RU/s)
|
||||||
|
dbContext = await createTestDB({ throughput: 400 });
|
||||||
|
|
||||||
|
// Navigate to the scale settings by clicking the "Scale" node in the tree
|
||||||
|
const databaseNode = await explorer.waitForNode(dbContext.database.id);
|
||||||
|
await databaseNode.expand();
|
||||||
|
const scaleNode = await explorer.waitForNode(`${dbContext.database.id}/Scale`);
|
||||||
|
await scaleNode.element.click();
|
||||||
|
|
||||||
|
// Update manual throughput from 400 to 800
|
||||||
|
await getThroughputInput("manual").fill(TEST_MANUAL_THROUGHPUT_RU.toString());
|
||||||
|
|
||||||
|
// Save changes
|
||||||
|
await explorer.commandBarButton(CommandBarButton.Save).click();
|
||||||
|
|
||||||
|
// Verify success message
|
||||||
|
await expect(explorer.getConsoleHeaderStatus()).toContainText(
|
||||||
|
`Successfully updated offer for database ${dbContext.database.id}`,
|
||||||
|
{
|
||||||
|
timeout: 2 * ONE_MINUTE_MS,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Scale shared database from manual to autoscale", async () => {
|
||||||
|
// Create database with shared manual throughput (400 RU/s)
|
||||||
|
dbContext = await createTestDB({ throughput: 400 });
|
||||||
|
|
||||||
|
// Open database settings by clicking the "Scale" node
|
||||||
|
const databaseNode = await explorer.waitForNode(dbContext.database.id);
|
||||||
|
await databaseNode.expand();
|
||||||
|
const scaleNode = await explorer.waitForNode(`${dbContext.database.id}/Scale`);
|
||||||
|
await scaleNode.element.click();
|
||||||
|
|
||||||
|
// Switch to Autoscale
|
||||||
|
const autoscaleRadio = explorer.frame.getByText("Autoscale", { exact: true });
|
||||||
|
await autoscaleRadio.click();
|
||||||
|
|
||||||
|
// Set autoscale max throughput to 1000
|
||||||
|
//await getThroughputInput("autopilot").fill(TEST_AUTOSCALE_THROUGHPUT_RU.toString());
|
||||||
|
|
||||||
|
// Save changes
|
||||||
|
await explorer.commandBarButton(CommandBarButton.Save).click();
|
||||||
|
|
||||||
|
await expect(explorer.getConsoleHeaderStatus()).toContainText(
|
||||||
|
`Successfully updated offer for database ${dbContext.database.id}`,
|
||||||
|
{
|
||||||
|
timeout: 2 * ONE_MINUTE_MS,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test.describe("Autoscale Throughput Tests", () => {
|
||||||
|
test.beforeEach(async ({ page }) => {
|
||||||
|
explorer = await DataExplorer.open(page, TestAccount.SQL);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Create database with shared autoscale throughput and verify Scale node in UI", async () => {
|
||||||
|
test.setTimeout(120000); // 2 minutes timeout
|
||||||
|
|
||||||
|
// Create database with shared autoscale throughput (max 1000 RU/s)
|
||||||
|
dbContext = await createTestDB({ maxThroughput: 1000 });
|
||||||
|
|
||||||
|
// Verify database node appears
|
||||||
|
const databaseNode = await explorer.waitForNode(dbContext.database.id);
|
||||||
|
expect(databaseNode).toBeDefined();
|
||||||
|
|
||||||
|
// Expand the database node to see child nodes
|
||||||
|
await databaseNode.expand();
|
||||||
|
|
||||||
|
// Verify that "Scale" node appears under the database
|
||||||
|
const scaleNode = await explorer.waitForNode(`${dbContext.database.id}/Scale`);
|
||||||
|
expect(scaleNode).toBeDefined();
|
||||||
|
await expect(scaleNode.element).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Scale shared database autoscale throughput", async () => {
|
||||||
|
// Create database with shared autoscale throughput (max 1000 RU/s)
|
||||||
|
dbContext = await createTestDB({ maxThroughput: 1000 });
|
||||||
|
|
||||||
|
// Open database settings
|
||||||
|
const databaseNode = await explorer.waitForNode(dbContext.database.id);
|
||||||
|
await databaseNode.expand();
|
||||||
|
const scaleNode = await explorer.waitForNode(`${dbContext.database.id}/Scale`);
|
||||||
|
await scaleNode.element.click();
|
||||||
|
|
||||||
|
// Update autoscale max throughput from 1000 to 4000
|
||||||
|
await getThroughputInput("autopilot").fill(TEST_AUTOSCALE_MAX_THROUGHPUT_RU_4K.toString());
|
||||||
|
|
||||||
|
// Save changes
|
||||||
|
await explorer.commandBarButton(CommandBarButton.Save).click();
|
||||||
|
|
||||||
|
// Verify success message
|
||||||
|
await expect(explorer.getConsoleHeaderStatus()).toContainText(
|
||||||
|
`Successfully updated offer for database ${dbContext.database.id}`,
|
||||||
|
{
|
||||||
|
timeout: 2 * ONE_MINUTE_MS,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Scale shared database from autoscale to manual", async () => {
|
||||||
|
// Create database with shared autoscale throughput (max 1000 RU/s)
|
||||||
|
dbContext = await createTestDB({ maxThroughput: 1000 });
|
||||||
|
|
||||||
|
// Open database settings
|
||||||
|
const databaseNode = await explorer.waitForNode(dbContext.database.id);
|
||||||
|
await databaseNode.expand();
|
||||||
|
const scaleNode = await explorer.waitForNode(`${dbContext.database.id}/Scale`);
|
||||||
|
await scaleNode.element.click();
|
||||||
|
|
||||||
|
// Switch to Manual
|
||||||
|
const manualRadio = explorer.frame.getByText("Manual", { exact: true });
|
||||||
|
await manualRadio.click();
|
||||||
|
|
||||||
|
// Save changes
|
||||||
|
await explorer.commandBarButton(CommandBarButton.Save).click();
|
||||||
|
|
||||||
|
// Verify success message
|
||||||
|
await expect(explorer.getConsoleHeaderStatus()).toContainText(
|
||||||
|
`Successfully updated offer for database ${dbContext.database.id}`,
|
||||||
|
{ timeout: 2 * ONE_MINUTE_MS },
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
121
test/testData.ts
121
test/testData.ts
@@ -82,6 +82,75 @@ export class TestContainerContext {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export class TestDatabaseContext {
|
||||||
|
constructor(
|
||||||
|
public armClient: CosmosDBManagementClient,
|
||||||
|
public client: CosmosClient,
|
||||||
|
public database: Database,
|
||||||
|
) {}
|
||||||
|
|
||||||
|
async dispose() {
|
||||||
|
await this.database.delete();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CreateTestDBOptions {
|
||||||
|
throughput?: number;
|
||||||
|
maxThroughput?: number; // For autoscale
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper function to create ARM client and Cosmos client for SQL account
|
||||||
|
async function createCosmosClientForSQLAccount(
|
||||||
|
accountType: TestAccount.SQL | TestAccount.SQLContainerCopyOnly = TestAccount.SQL,
|
||||||
|
): Promise<{ armClient: CosmosDBManagementClient; client: CosmosClient }> {
|
||||||
|
const credentials = getAzureCLICredentials();
|
||||||
|
const adaptedCredentials = new AzureIdentityCredentialAdapter(credentials);
|
||||||
|
const armClient = new CosmosDBManagementClient(adaptedCredentials, subscriptionId);
|
||||||
|
const accountName = getAccountName(accountType);
|
||||||
|
const account = await armClient.databaseAccounts.get(resourceGroupName, accountName);
|
||||||
|
|
||||||
|
const clientOptions: CosmosClientOptions = {
|
||||||
|
endpoint: account.documentEndpoint!,
|
||||||
|
};
|
||||||
|
|
||||||
|
const rbacToken =
|
||||||
|
accountType === TestAccount.SQL
|
||||||
|
? process.env.NOSQL_TESTACCOUNT_TOKEN
|
||||||
|
: accountType === TestAccount.SQLContainerCopyOnly
|
||||||
|
? process.env.NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN
|
||||||
|
: "";
|
||||||
|
|
||||||
|
if (rbacToken) {
|
||||||
|
clientOptions.tokenProvider = async (): Promise<string> => {
|
||||||
|
const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
|
||||||
|
const authorizationToken = `${AUTH_PREFIX}${rbacToken}`;
|
||||||
|
return authorizationToken;
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
const keys = await armClient.databaseAccounts.listKeys(resourceGroupName, accountName);
|
||||||
|
clientOptions.key = keys.primaryMasterKey;
|
||||||
|
}
|
||||||
|
|
||||||
|
const client = new CosmosClient(clientOptions);
|
||||||
|
|
||||||
|
return { armClient, client };
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function createTestDB(options?: CreateTestDBOptions): Promise<TestDatabaseContext> {
|
||||||
|
const databaseId = generateUniqueName("db");
|
||||||
|
const { armClient, client } = await createCosmosClientForSQLAccount();
|
||||||
|
|
||||||
|
// Create database with provisioned throughput (shared throughput)
|
||||||
|
// This checks the "Provision database throughput" option
|
||||||
|
const { database } = await client.databases.create({
|
||||||
|
id: databaseId,
|
||||||
|
throughput: options?.throughput, // Manual throughput (e.g., 400)
|
||||||
|
maxThroughput: options?.maxThroughput, // Autoscale max throughput (e.g., 1000)
|
||||||
|
});
|
||||||
|
|
||||||
|
return new TestDatabaseContext(armClient, client, database);
|
||||||
|
}
|
||||||
|
|
||||||
type createTestSqlContainerConfig = {
|
type createTestSqlContainerConfig = {
|
||||||
includeTestData?: boolean;
|
includeTestData?: boolean;
|
||||||
partitionKey?: string;
|
partitionKey?: string;
|
||||||
@@ -104,34 +173,7 @@ export async function createMultipleTestContainers({
|
|||||||
const creationPromises: Promise<TestContainerContext>[] = [];
|
const creationPromises: Promise<TestContainerContext>[] = [];
|
||||||
|
|
||||||
const databaseId = databaseName ? databaseName : generateUniqueName("db");
|
const databaseId = databaseName ? databaseName : generateUniqueName("db");
|
||||||
const credentials = getAzureCLICredentials();
|
const { armClient, client } = await createCosmosClientForSQLAccount(accountType);
|
||||||
const adaptedCredentials = new AzureIdentityCredentialAdapter(credentials);
|
|
||||||
const armClient = new CosmosDBManagementClient(adaptedCredentials, subscriptionId);
|
|
||||||
const accountName = getAccountName(accountType);
|
|
||||||
const account = await armClient.databaseAccounts.get(resourceGroupName, accountName);
|
|
||||||
|
|
||||||
const clientOptions: CosmosClientOptions = {
|
|
||||||
endpoint: account.documentEndpoint!,
|
|
||||||
};
|
|
||||||
|
|
||||||
const rbacToken =
|
|
||||||
accountType === TestAccount.SQL
|
|
||||||
? process.env.NOSQL_TESTACCOUNT_TOKEN
|
|
||||||
: accountType === TestAccount.SQLContainerCopyOnly
|
|
||||||
? process.env.NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN
|
|
||||||
: "";
|
|
||||||
if (rbacToken) {
|
|
||||||
clientOptions.tokenProvider = async (): Promise<string> => {
|
|
||||||
const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
|
|
||||||
const authorizationToken = `${AUTH_PREFIX}${rbacToken}`;
|
|
||||||
return authorizationToken;
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
const keys = await armClient.databaseAccounts.listKeys(resourceGroupName, accountName);
|
|
||||||
clientOptions.key = keys.primaryMasterKey;
|
|
||||||
}
|
|
||||||
|
|
||||||
const client = new CosmosClient(clientOptions);
|
|
||||||
const { database } = await client.databases.createIfNotExists({ id: databaseId });
|
const { database } = await client.databases.createIfNotExists({ id: databaseId });
|
||||||
|
|
||||||
try {
|
try {
|
||||||
@@ -158,29 +200,8 @@ export async function createTestSQLContainer({
|
|||||||
}: createTestSqlContainerConfig = {}) {
|
}: createTestSqlContainerConfig = {}) {
|
||||||
const databaseId = databaseName ? databaseName : generateUniqueName("db");
|
const databaseId = databaseName ? databaseName : generateUniqueName("db");
|
||||||
const containerId = "testcontainer"; // A unique container name isn't needed because the database is unique
|
const containerId = "testcontainer"; // A unique container name isn't needed because the database is unique
|
||||||
const credentials = getAzureCLICredentials();
|
const { armClient, client } = await createCosmosClientForSQLAccount();
|
||||||
const adaptedCredentials = new AzureIdentityCredentialAdapter(credentials);
|
|
||||||
const armClient = new CosmosDBManagementClient(adaptedCredentials, subscriptionId);
|
|
||||||
const accountName = getAccountName(TestAccount.SQL);
|
|
||||||
const account = await armClient.databaseAccounts.get(resourceGroupName, accountName);
|
|
||||||
|
|
||||||
const clientOptions: CosmosClientOptions = {
|
|
||||||
endpoint: account.documentEndpoint!,
|
|
||||||
};
|
|
||||||
|
|
||||||
const nosqlAccountRbacToken = process.env.NOSQL_TESTACCOUNT_TOKEN;
|
|
||||||
if (nosqlAccountRbacToken) {
|
|
||||||
clientOptions.tokenProvider = async (): Promise<string> => {
|
|
||||||
const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
|
|
||||||
const authorizationToken = `${AUTH_PREFIX}${nosqlAccountRbacToken}`;
|
|
||||||
return authorizationToken;
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
const keys = await armClient.databaseAccounts.listKeys(resourceGroupName, accountName);
|
|
||||||
clientOptions.key = keys.primaryMasterKey;
|
|
||||||
}
|
|
||||||
|
|
||||||
const client = new CosmosClient(clientOptions);
|
|
||||||
const { database } = await client.databases.createIfNotExists({ id: databaseId });
|
const { database } = await client.databases.createIfNotExists({ id: databaseId });
|
||||||
try {
|
try {
|
||||||
const { container } = await database.containers.createIfNotExists({
|
const { container } = await database.containers.createIfNotExists({
|
||||||
|
|||||||
Reference in New Issue
Block a user