mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-23 02:41:39 +00:00
my changes
This commit is contained in:
Archie Agarwal
27714
package-lock.json
generated
27714
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -569,6 +569,10 @@ const IndexAdvisorTab: React.FC<IndexAdvisorTabProps> = ({ onPolicyUpdated }) =>
|
||||
})
|
||||
.fetchAll();
|
||||
setIndexMetrics(sdkResponse.indexMetrics);
|
||||
console.log("Index Metrics:", sdkResponse.indexMetrics);
|
||||
// console.log("Query Results:", sdkResponse.resources);
|
||||
console.log(typeof sdkResponse.indexMetrics);
|
||||
console.log(typeof sdkResponse.resources)
|
||||
} catch (error) {
|
||||
handleError(error, "queryItemsWithIndexMetrics", `Error querying items from ${containerId}`);
|
||||
} finally {
|
||||
|
||||
256
src/Explorer/Tabs/QueryTab/indexadv.test.tsx
Normal file
256
src/Explorer/Tabs/QueryTab/indexadv.test.tsx
Normal file
@@ -0,0 +1,256 @@
|
||||
// import { fireEvent, render, screen, waitFor } from "@testing-library/react";
|
||||
// import { IndexAdvisorTab } from "Explorer/Tabs/QueryTab/ResultsView";
|
||||
// import React from "react";
|
||||
|
||||
// // Mock styles and icons
|
||||
// jest.mock("./indexadv", () => ({
|
||||
// useIndexAdvisorStyles: () => ({
|
||||
// indexAdvisorImpactDots: "impactDots",
|
||||
// indexAdvisorImpactDot: "impactDot",
|
||||
// indexAdvisorMessage: "advisorMessage",
|
||||
// indexAdvisorTitle: "advisorTitle",
|
||||
// indexAdvisorTable: "advisorTable",
|
||||
// indexAdvisorGrid: "advisorGrid",
|
||||
// indexAdvisorCheckboxSpacer: "checkboxSpacer",
|
||||
// indexAdvisorChevronSpacer: "chevronSpacer",
|
||||
// indexAdvisorRowBold: "rowBold",
|
||||
// indexAdvisorRowNormal: "rowNormal",
|
||||
// indexAdvisorRowImpactHeader: "rowImpactHeader",
|
||||
// indexAdvisorRowImpact: "rowImpact",
|
||||
// indexAdvisorButtonBar: "buttonBar",
|
||||
// indexAdvisorButton: "button",
|
||||
// indexAdvisorSuccessIcon: "successIcon",
|
||||
// }),
|
||||
// }));
|
||||
// jest.mock("@fluentui/react-icons", () => ({
|
||||
// ChevronDown20Regular: () => <span>ChevronDown</span>,
|
||||
// ChevronRight20Regular: () => <span>ChevronRight</span>,
|
||||
// CircleFilled: () => <span>Dot</span>,
|
||||
// }));
|
||||
|
||||
// // Mock hooks and context
|
||||
// jest.mock("../QueryTabComponent", () => ({
|
||||
// useQueryMetadataStore: () => ({
|
||||
// userQuery: "SELECT * FROM c",
|
||||
// databaseId: "db1",
|
||||
// containerId: "col1",
|
||||
// }),
|
||||
// }));
|
||||
|
||||
// // Mock Cosmos client and SDK
|
||||
// jest.mock("../../../Common/CosmosClient", () => ({
|
||||
// client: () => ({
|
||||
// database: () => ({
|
||||
// container: () => ({
|
||||
// items: {
|
||||
// query: () => ({
|
||||
// fetchAll: async () => ({
|
||||
// indexMetrics: `
|
||||
// Utilized Single Indexes
|
||||
// Index Spec: /foo/?
|
||||
// Index Impact Score: High
|
||||
// Potential Single Indexes
|
||||
// Index Spec: /bar/?
|
||||
// Index Impact Score: Medium
|
||||
// Potential Single Indexes
|
||||
// Index Spec: /baz/?
|
||||
// Index Impact Score: Low
|
||||
// `,
|
||||
// }),
|
||||
// }),
|
||||
// },
|
||||
// read: async () => ({
|
||||
// resource: {
|
||||
// indexingPolicy: {},
|
||||
// partitionKey: "pk",
|
||||
// },
|
||||
// }),
|
||||
// replace: jest.fn(),
|
||||
// }),
|
||||
// }),
|
||||
// }),
|
||||
// }));
|
||||
|
||||
// // Mock notification and error utils
|
||||
// jest.mock("../../../Utils/NotificationConsoleUtils", () => ({
|
||||
// logConsoleProgress: () => () => { },
|
||||
// }));
|
||||
// jest.mock("../../../Common/ErrorHandlingUtils", () => ({
|
||||
// handleError: jest.fn(),
|
||||
// }));
|
||||
|
||||
// // Mock zustand store
|
||||
// jest.mock("../ResultsView", () => {
|
||||
// const actual = jest.requireActual("../ResultsView");
|
||||
// return {
|
||||
// ...actual,
|
||||
// useIndexingPolicyStore: () => ({
|
||||
// indexingPolicy: {},
|
||||
// setIndexingPolicyOnly: jest.fn(),
|
||||
// }),
|
||||
// };
|
||||
// });
|
||||
|
||||
// describe("IndexAdvisorTab - Comprehensive", () => {
|
||||
// it("renders loading spinner initially", () => {
|
||||
// render(<IndexAdvisorTab />);
|
||||
// expect(screen.getByRole("status")).toBeInTheDocument();
|
||||
// });
|
||||
|
||||
// it("parses indexMetrics and sets included/notIncluded arrays", async () => {
|
||||
// render(<IndexAdvisorTab />);
|
||||
// await waitFor(() => expect(screen.getByText("Indexes analysis")).toBeInTheDocument());
|
||||
// expect(screen.getByText("/foo/?")).toBeInTheDocument();
|
||||
// expect(screen.getByText("/bar/?")).toBeInTheDocument();
|
||||
// expect(screen.getByText("/baz/?")).toBeInTheDocument();
|
||||
// expect(screen.getByText("Not Included in Current Policy")).toBeInTheDocument();
|
||||
// expect(screen.getByText("Included in Current Policy")).toBeInTheDocument();
|
||||
// });
|
||||
|
||||
// it("renders correct number of impact dots for each impact", async () => {
|
||||
// render(<IndexAdvisorTab />);
|
||||
// await waitFor(() => expect(screen.getByText("/foo/?")).toBeInTheDocument());
|
||||
// // There should be 3 dots for High, 2 for Medium, 1 for Low
|
||||
// expect(screen.getAllByText("Dot").length).toBeGreaterThanOrEqual(6);
|
||||
// });
|
||||
|
||||
// it("selects and deselects an index (handleCheckboxChange)", async () => {
|
||||
// render(<IndexAdvisorTab />);
|
||||
// await waitFor(() => expect(screen.getByText("/bar/?")).toBeInTheDocument());
|
||||
// const checkboxes = screen.getAllByRole("checkbox");
|
||||
// // Select /bar/?
|
||||
// fireEvent.click(checkboxes[1]);
|
||||
// expect(screen.getByText(/Update Indexing Policy/)).toBeInTheDocument();
|
||||
// // Deselect /bar/?
|
||||
// fireEvent.click(checkboxes[1]);
|
||||
// expect(screen.queryByText(/Update Indexing Policy/)).not.toBeInTheDocument();
|
||||
// });
|
||||
|
||||
// it("selects all indexes (handleSelectAll)", async () => {
|
||||
// render(<IndexAdvisorTab />);
|
||||
// await waitFor(() => expect(screen.getByText("/bar/?")).toBeInTheDocument());
|
||||
// const selectAllCheckbox = screen.getAllByRole("checkbox")[0];
|
||||
// fireEvent.click(selectAllCheckbox);
|
||||
// expect(screen.getByText(/Update Indexing Policy/)).toBeInTheDocument();
|
||||
// // Deselect all
|
||||
// fireEvent.click(selectAllCheckbox);
|
||||
// expect(screen.queryByText(/Update Indexing Policy/)).not.toBeInTheDocument();
|
||||
// });
|
||||
|
||||
// it("shows update message after updating policy (handleUpdatePolicy)", async () => {
|
||||
// render(<IndexAdvisorTab />);
|
||||
// await waitFor(() => expect(screen.getByText("/bar/?")).toBeInTheDocument());
|
||||
// const checkboxes = screen.getAllByRole("checkbox");
|
||||
// fireEvent.click(checkboxes[1]);
|
||||
// fireEvent.click(screen.getByText(/Update Indexing Policy/));
|
||||
// await waitFor(() =>
|
||||
// expect(
|
||||
// screen.getByText(/Your indexing policy has been updated/)
|
||||
// ).toBeInTheDocument()
|
||||
// );
|
||||
// });
|
||||
|
||||
// it("renders chevrons and toggles sections (renderRow)", async () => {
|
||||
// render(<IndexAdvisorTab />);
|
||||
// await waitFor(() => expect(screen.getByText("Included in Current Policy")).toBeInTheDocument());
|
||||
// // Click the chevron to toggle showIncluded
|
||||
// const chevrons = screen.getAllByText(/Chevron/);
|
||||
// fireEvent.click(chevrons[0]);
|
||||
// // No error means toggle worked
|
||||
// });
|
||||
|
||||
// it("does not render update button if no indexes are selected", async () => {
|
||||
// render(<IndexAdvisorTab />);
|
||||
// await waitFor(() => expect(screen.getByText("/bar/?")).toBeInTheDocument());
|
||||
// expect(screen.queryByText(/Update Indexing Policy/)).not.toBeInTheDocument();
|
||||
// });
|
||||
|
||||
// it("handles error in fetchIndexMetrics gracefully", async () => {
|
||||
// // Override the client mock to throw
|
||||
// jest.spyOn(console, "error").mockImplementation(() => { });
|
||||
// jest.mock("../../../Common/CosmosClient", () => ({
|
||||
// client: () => ({
|
||||
// database: () => ({
|
||||
// container: () => ({
|
||||
// items: {
|
||||
// query: () => ({
|
||||
// fetchAll: async () => {
|
||||
// throw new Error("fetch error");
|
||||
// },
|
||||
// }),
|
||||
// },
|
||||
// read: async () => ({
|
||||
// resource: {
|
||||
// indexingPolicy: {},
|
||||
// partitionKey: "pk",
|
||||
// },
|
||||
// }),
|
||||
// replace: jest.fn(),
|
||||
// }),
|
||||
// }),
|
||||
// }),
|
||||
// }));
|
||||
// render(<IndexAdvisorTab />);
|
||||
// await waitFor(() => expect(screen.queryByRole("status")).not.toBeInTheDocument());
|
||||
// // Should not crash
|
||||
// });
|
||||
|
||||
// it("handles error in handleUpdatePolicy gracefully", async () => {
|
||||
// // Override the replace mock to throw
|
||||
// const mockReplace = jest.fn().mockRejectedValue(new Error("replace error"));
|
||||
// jest.mock("../../../Common/CosmosClient", () => ({
|
||||
// client: () => ({
|
||||
// database: () => ({
|
||||
// container: () => ({
|
||||
// items: {
|
||||
// query: () => ({
|
||||
// fetchAll: async () => ({
|
||||
// indexMetrics: `
|
||||
// Utilized Single Indexes
|
||||
// Index Spec: /foo/?
|
||||
// Index Impact Score: High
|
||||
// `,
|
||||
// }),
|
||||
// }),
|
||||
// },
|
||||
// read: async () => ({
|
||||
// resource: {
|
||||
// indexingPolicy: {},
|
||||
// partitionKey: "pk",
|
||||
// },
|
||||
// }),
|
||||
// replace: mockReplace,
|
||||
// }),
|
||||
// }),
|
||||
// }),
|
||||
// }));
|
||||
// render(<IndexAdvisorTab />);
|
||||
// await waitFor(() => expect(screen.getByText("/foo/?")).toBeInTheDocument());
|
||||
// const checkboxes = screen.getAllByRole("checkbox");
|
||||
// fireEvent.click(checkboxes[1]);
|
||||
// fireEvent.click(screen.getByText(/Update Indexing Policy/));
|
||||
// await waitFor(() => expect(mockReplace).toHaveBeenCalled());
|
||||
// // Should not crash
|
||||
// });
|
||||
|
||||
// it("correctly computes selectAll state when all notIncluded are selected", async () => {
|
||||
// render(<IndexAdvisorTab />);
|
||||
// await waitFor(() => expect(screen.getByText("/bar/?")).toBeInTheDocument());
|
||||
// const checkboxes = screen.getAllByRole("checkbox");
|
||||
// // Select all notIncluded indexes
|
||||
// fireEvent.click(checkboxes[1]);
|
||||
// fireEvent.click(checkboxes[2]);
|
||||
// // The selectAll checkbox should be checked
|
||||
// expect(checkboxes[0]).toBeChecked();
|
||||
// });
|
||||
|
||||
// it("renders all UI elements and table structure", async () => {
|
||||
// render(<IndexAdvisorTab />);
|
||||
// await waitFor(() => expect(screen.getByText("Indexes analysis")).toBeInTheDocument());
|
||||
// expect(screen.getByText("Not Included in Current Policy")).toBeInTheDocument();
|
||||
// expect(screen.getByText("Included in Current Policy")).toBeInTheDocument();
|
||||
// expect(screen.getByText("Index")).toBeInTheDocument();
|
||||
// expect(screen.getByText("Estimated Impact")).toBeInTheDocument();
|
||||
// expect(screen.getByRole("table")).toBeInTheDocument();
|
||||
// });
|
||||
// });
|
||||
93
src/Explorer/Tabs/QueryTab/indexadv.ts
Normal file
93
src/Explorer/Tabs/QueryTab/indexadv.ts
Normal file
@@ -0,0 +1,93 @@
|
||||
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: "8px",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
indexAdvisorCheckboxSpacer: {
|
||||
width: "18px",
|
||||
height: "18px",
|
||||
},
|
||||
indexAdvisorChevronSpacer: {
|
||||
width: "24px",
|
||||
},
|
||||
indexAdvisorRowBold: {
|
||||
fontWeight: "bold",
|
||||
},
|
||||
indexAdvisorRowNormal: {
|
||||
fontWeight: "normal",
|
||||
},
|
||||
indexAdvisorRowImpactHeader: {
|
||||
fontSize: 0,
|
||||
// fontWeight: "normal",
|
||||
},
|
||||
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",
|
||||
},
|
||||
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",
|
||||
},
|
||||
},
|
||||
});
|
||||
const styles = makeStyles({
|
||||
myStyle: {
|
||||
padding: "1rem",
|
||||
fontWeight: "bold",
|
||||
} as any,
|
||||
});
|
||||
Reference in New Issue
Block a user