From a96d6790878f7b911d47f64350577415696800e7 Mon Sep 17 00:00:00 2001 From: Archie Agarwal Date: Mon, 16 Jun 2025 15:16:47 +0530 Subject: [PATCH] clean up the code --- .vscode/settings.json | 5 +- .../Tabs/QueryTab/QueryTabComponent.tsx | 6 - src/Explorer/Tabs/QueryTab/ResultsView.tsx | 538 +++++++++--------- 3 files changed, 272 insertions(+), 277 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index a57d40961..64b189e09 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -24,5 +24,8 @@ "source.organizeImports": "explicit" }, "typescript.preferences.importModuleSpecifier": "non-relative", - "editor.defaultFormatter": "esbenp.prettier-vscode" + "editor.defaultFormatter": "esbenp.prettier-vscode", + "[typescriptreact]": { + "editor.defaultFormatter": "vscode.typescript-language-features" + } } diff --git a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx index 6a04fdcd5..11dc3e3d6 100644 --- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx +++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx @@ -265,16 +265,10 @@ class QueryTabComponentImpl extends React.Component => { - // console.log("i am ",this.props.collection.databaseId); - // console.log("I am query",this.state.sqlQueryEditorContent ); - // console.log("i am",this.props.collection.id()); const query1=this.state.sqlQueryEditorContent; const db = this.props.collection.databaseId; const container = this.props.collection.id(); useQueryMetadataStore.getState().setMetadata(query1, db, container); - console.log("i am ",query1); - console.log("I am db",db); - console.log("i am cnt",container); this._iterator = undefined; setTimeout(async () => { diff --git a/src/Explorer/Tabs/QueryTab/ResultsView.tsx b/src/Explorer/Tabs/QueryTab/ResultsView.tsx index 93af07bd4..95a419d65 100644 --- a/src/Explorer/Tabs/QueryTab/ResultsView.tsx +++ b/src/Explorer/Tabs/QueryTab/ResultsView.tsx @@ -39,7 +39,7 @@ import { ResultsViewProps } from "./QueryResultSection"; enum ResultsTabs { Results = "results", QueryStats = "queryStats", - IndexAdvisor="indexadv", + IndexAdvisor = "indexadv", } const ResultsTab: React.FC = ({ queryResults, isMongoDB, executeQueryDocumentsPage }) => { @@ -392,9 +392,8 @@ const QueryStatsTab: React.FC> = ({ query }, { metric: "User defined function execution time", - value: `${ - aggregatedQueryMetrics.runtimeExecutionTimes?.userDefinedFunctionExecutionTime?.toString() || 0 - } ms`, + value: `${aggregatedQueryMetrics.runtimeExecutionTimes?.userDefinedFunctionExecutionTime?.toString() || 0 + } ms`, toolTip: "Total time spent executing user-defined functions", }, { @@ -536,12 +535,12 @@ const QueryStatsTab: React.FC> = ({ query }; interface IIndexMetric { - index: string; - impact: string; - section: "Included" | "Not Included" | "Header"; + index: string; + impact: string; + section: "Included" | "Not Included" | "Header"; } const IndexAdvisorTab: React.FC = () => { - const {userQuery, databaseId, containerId}=useQueryMetadataStore(); + const { userQuery, databaseId, containerId } = useQueryMetadataStore(); const [loading, setLoading] = useState(true); const [indexMetrics, setIndexMetrics] = useState(null); const [showIncluded, setShowIncluded] = useState(true); @@ -574,253 +573,251 @@ const IndexAdvisorTab: React.FC = () => { setLoading(false); } } - if(userQuery && databaseId && containerId){ + if (userQuery && databaseId && containerId) { fetchIndexMetrics(); } }, [userQuery, databaseId, containerId]); -useEffect(() => { - if (!indexMetrics) return ; + useEffect(() => { + if (!indexMetrics) return; - const included: any[] = []; - const notIncluded: any[] = []; - const lines = indexMetrics.split("\n").map((line: string) => line.trim()).filter(Boolean); - let currentSection = ""; - for (let i = 0; i < lines.length; i++) { - const line = lines[i]; - if (line.startsWith("Utilized Single Indexes") || line.startsWith("Utilized Composite Indexes")) { - currentSection = "included"; - } else if (line.startsWith("Potential Single Indexes") || line.startsWith("Potential Composite Indexes")) { - currentSection = "notIncluded"; - } else if (line.startsWith("Index Spec:")) { - const index = line.replace("Index Spec:", "").trim(); - const impactLine = lines[i + 1]; - const impact = impactLine?.includes("Index Impact Score:") ? impactLine.split(":")[1].trim() : "Unknown"; + const included: any[] = []; + const notIncluded: any[] = []; + const lines = indexMetrics.split("\n").map((line: string) => line.trim()).filter(Boolean); + let currentSection = ""; + for (let i = 0; i < lines.length; i++) { + const line = lines[i]; + if (line.startsWith("Utilized Single Indexes") || line.startsWith("Utilized Composite Indexes")) { + currentSection = "included"; + } else if (line.startsWith("Potential Single Indexes") || line.startsWith("Potential Composite Indexes")) { + currentSection = "notIncluded"; + } else if (line.startsWith("Index Spec:")) { + const index = line.replace("Index Spec:", "").trim(); + const impactLine = lines[i + 1]; + const impact = impactLine?.includes("Index Impact Score:") ? impactLine.split(":")[1].trim() : "Unknown"; - const isComposite = index.includes(","); - const indexObj: any = { index, impact }; - if (isComposite) { - indexObj.composite = index.split(",").map((part:string) => { - const [path, order] = part.trim().split(/\s+/); - return { - path: path.trim(), - order: order?.toLowerCase() === "desc" ? "descending" : "ascending", - }; - }); - } else { - let path = "/unknown/*"; - const pathRegex = /\/[^\/\s*?]+(?:\/[^\/\s*?]+)*(\/\*|\?)/; - const match = index.match(pathRegex); - if (match) { - path = match[0]; + const isComposite = index.includes(","); + const indexObj: any = { index, impact }; + if (isComposite) { + indexObj.composite = index.split(",").map((part: string) => { + const [path, order] = part.trim().split(/\s+/); + return { + path: path.trim(), + order: order?.toLowerCase() === "desc" ? "descending" : "ascending", + }; + }); } else { - const simplePathRegex = /\/[^\/\s]+/; - const simpleMatch = index.match(simplePathRegex); - if (simpleMatch) { - path = simpleMatch[0] + "/*"; + let path = "/unknown/*"; + const pathRegex = /\/[^\/\s*?]+(?:\/[^\/\s*?]+)*(\/\*|\?)/; + const match = index.match(pathRegex); + if (match) { + path = match[0]; + } else { + const simplePathRegex = /\/[^\/\s]+/; + const simpleMatch = index.match(simplePathRegex); + if (simpleMatch) { + path = simpleMatch[0] + "/*"; + } } + indexObj.path = path; } - indexObj.path = path; - } - if (currentSection === "included") { - included.push(indexObj); - } else if (currentSection === "notIncluded") { - notIncluded.push(indexObj); + if (currentSection === "included") { + included.push(indexObj); + } else if (currentSection === "notIncluded") { + notIncluded.push(indexObj); + } } } - } - setIncludedIndexes(included); - setNotIncludedIndexes(notIncluded); -},[indexMetrics]); + setIncludedIndexes(included); + setNotIncludedIndexes(notIncluded); + }, [indexMetrics]); -useEffect(() => { - const allSelected = notIncluded.length > 0 && notIncluded.every((item) => selectedIndexes.some((s) => s.index === item.index)); - setSelectAll(allSelected); -}, [selectedIndexes, notIncluded]); + useEffect(() => { + const allSelected = notIncluded.length > 0 && notIncluded.every((item) => selectedIndexes.some((s) => s.index === item.index)); + setSelectAll(allSelected); + }, [selectedIndexes, notIncluded]); -const handleCheckboxChange = (indexObj: any, checked: boolean) => { - if (checked) { - setSelectedIndexes((prev) => [...prev, indexObj]); - } else { - setSelectedIndexes((prev) => - prev.filter((item) => item.index !== indexObj.index) - ); - } -}; + const handleCheckboxChange = (indexObj: any, checked: boolean) => { + if (checked) { + setSelectedIndexes((prev) => [...prev, indexObj]); + } else { + setSelectedIndexes((prev) => + prev.filter((item) => item.index !== indexObj.index) + ); + } + }; -const handleSelectAll = (checked: boolean) => { + const handleSelectAll = (checked: boolean) => { setSelectAll(checked); setSelectedIndexes(checked ? notIncluded : []); }; -const handleUpdatePolicy = async () => { - if (selectedIndexes.length === 0) { - console.log("No indexes selected for update"); - return; - } - try { - const { resource: containerDef } = await client() - .database(databaseId) - .container(containerId) - .read(); + const handleUpdatePolicy = async () => { + if (selectedIndexes.length === 0) { + console.log("No indexes selected for update"); + return; + } + try { + const { resource: containerDef } = await client() + .database(databaseId) + .container(containerId) + .read(); - const newIncludedPaths = selectedIndexes - .filter(index => !index.composite) - .map(index => { + const newIncludedPaths = selectedIndexes + .filter(index => !index.composite) + .map(index => { - return { - path: index.path, - }; - }); + return { + path: index.path, + }; + }); - const newCompositeIndexes = selectedIndexes - .filter(index => index.composite) - .map(index => index.composite); + const newCompositeIndexes = selectedIndexes + .filter(index => index.composite) + .map(index => index.composite); - const updatedPolicy = { - ...containerDef.indexingPolicy, - includedPaths: [ - ...(containerDef.indexingPolicy?.includedPaths || []), - ...newIncludedPaths, - ], - compositeIndexes: [ - ...(containerDef.indexingPolicy?.compositeIndexes || []), - ...newCompositeIndexes, - ], - }; + const updatedPolicy = { + ...containerDef.indexingPolicy, + includedPaths: [ + ...(containerDef.indexingPolicy?.includedPaths || []), + ...newIncludedPaths, + ], + compositeIndexes: [ + ...(containerDef.indexingPolicy?.compositeIndexes || []), + ...newCompositeIndexes, + ], + }; - await client() - .database(databaseId) - .container(containerId) - .replace({ - id: containerId, - partitionKey: containerDef.partitionKey, - indexingPolicy: updatedPolicy, - }); + await client() + .database(databaseId) + .container(containerId) + .replace({ + id: containerId, + partitionKey: containerDef.partitionKey, + indexingPolicy: updatedPolicy, + }); - console.log("Indexing policy successfully updated:", updatedPolicy); + const newIncluded = [...included, ...notIncluded.filter(item => + selectedIndexes.find(s => s.index === item.index) + )]; + const newNotIncluded = notIncluded.filter(item => + !selectedIndexes.find(s => s.index === item.index) + ); - const newIncluded = [...included, ...notIncluded.filter(item => - selectedIndexes.find(s => s.index === item.index) - )]; - const newNotIncluded = notIncluded.filter(item => - !selectedIndexes.find(s => s.index === item.index) - ); + setSelectedIndexes([]); + setSelectAll(false); + setIndexMetricsFromParsed(newIncluded, newNotIncluded); + setUpdateMessageShown(true); + } catch (err) { + console.error("Failed to update indexing policy:", err); + } + }; - setSelectedIndexes([]); - setSelectAll(false); - setIndexMetricsFromParsed(newIncluded, newNotIncluded); - setUpdateMessageShown(true); - } catch (err) { - console.error("Failed to update indexing policy:", err); - } -}; - -const setIndexMetricsFromParsed = (included: { index: string; impact: string }[], notIncluded: { index: string; impact: string }[]) => { + const setIndexMetricsFromParsed = (included: { index: string; impact: string }[], notIncluded: { index: string; impact: string }[]) => { const serialize = (sectionTitle: string, items: { index: string; impact: string }[], isUtilized: boolean) => items.length ? `${sectionTitle}\n` + - items - .map((item) => `Index Spec: ${item.index}\nIndex Impact Score: ${item.impact}`) - .join("\n") + "\n" + items + .map((item) => `Index Spec: ${item.index}\nIndex Impact Score: ${item.impact}`) + .join("\n") + "\n" : ""; -const composedMetrics = + const composedMetrics = serialize("Utilized Single Indexes", included, true) + serialize("Potential Single Indexes", notIncluded, false); setIndexMetrics(composedMetrics.trim()); }; -const renderImpactDots = (impact: string) => { - let count = 0; - if (impact === "High") count = 3; - else if (impact === "Medium") count = 2; - else if (impact === "Low") count = 1; + const renderImpactDots = (impact: string) => { + let count = 0; + if (impact === "High") count = 3; + else if (impact === "Medium") count = 2; + else if (impact === "Low") count = 1; - return( -
- {Array.from({ length: count }).map((_, i) => ( - - ))} -
- ); -}; + return ( +
+ {Array.from({ length: count }).map((_, i) => ( + + ))} +
+ ); + }; -const renderRow = (item: IIndexMetric, index: number) => { - const isHeader = item.section === "Header"; - const isNotIncluded = item.section === "Not Included"; - const isIncluded = item.section === "Included"; + const renderRow = (item: IIndexMetric, index: number) => { + const isHeader = item.section === "Header"; + const isNotIncluded = item.section === "Not Included"; + const isIncluded = item.section === "Included"; - return ( - - -
- {isNotIncluded ? ( - selected.index===item.index)} - onChange={(_, data) => handleCheckboxChange(item, data.checked === true)} - /> - ) : isHeader && item.index === "Not Included in Current Policy" && notIncluded.length > 0 ? ( - handleSelectAll(data.checked === true)} - /> - ) : ( -
- )} - {isHeader ? ( - { - if (item.index === "Included in Current Policy") { - setShowIncluded(!showIncluded); - } else if (item.index === "Not Included in Current Policy") { - setShowNotIncluded(!showNotIncluded); + return ( + + +
+ {isNotIncluded ? ( + selected.index === item.index)} + onChange={(_, data) => handleCheckboxChange(item, data.checked === true)} + /> + ) : isHeader && item.index === "Not Included in Current Policy" && notIncluded.length > 0 ? ( + handleSelectAll(data.checked === true)} + /> + ) : ( +
+ )} + {isHeader ? ( + { + if (item.index === "Included in Current Policy") { + setShowIncluded(!showIncluded); + } else if (item.index === "Not Included in Current Policy") { + setShowNotIncluded(!showNotIncluded); + } + }} + > + {item.index === "Included in Current Policy" + ? showIncluded + ? + : + : showNotIncluded + ? + : } - }} - > - {item.index === "Included in Current Policy" - ? showIncluded - ? - : - : showNotIncluded - ? - : - } - - ) : ( -
- )} -
- {item.index} + + ) : ( +
+ )} +
+ {item.index} +
+
+ {isHeader ? null : item.impact} +
+
+ {isHeader ? null : renderImpactDots(item.impact)} +
-
- {isHeader ? null : item.impact} -
-
- {isHeader ? null : renderImpactDots(item.impact)} -
-
- - - ); -}; + + + ); + }; const generateIndexMetricItems = ( - + included: { index: string; impact: string }[], notIncluded: { index: string; impact: string }[] ): IIndexMetric[] => { @@ -840,59 +837,60 @@ const renderRow = (item: IIndexMetric, index: number) => { } return items; }; - + if (loading) { return
- -
;} + +
; + } -return ( + return (
{updateMessageShown ? ( <> - - - - - Your indexing policy has been updated with the new included paths. You may review the changes in Scale & Settings. - - - ) : ( - "Here is an analysis on the indexes utilized for executing the query. Based on the analysis, Cosmos DB recommends adding the selected indexes to your indexing policy to optimize the performance of this particular query." - )} -
+ + + + + Your indexing policy has been updated with the new included paths. You may review the changes in Scale & Settings. + + + ) : ( + "Here is an analysis on the indexes utilized for executing the query. Based on the analysis, Cosmos DB recommends adding the selected indexes to your indexing policy to optimize the performance of this particular query." + )} +
Indexes analysis
- +
-
{/* Checkbox column */} -
{/* Chevron column */} + display: "grid", + gridTemplateColumns: "30px 30px 1fr 50px 120px", + alignItems: "center", + gap: "8px", + fontWeight: "bold", + }} + > +
+
Index
Estimated Impact
@@ -904,23 +902,23 @@ return (
{selectedIndexes.length > 0 && ( -
- -
- )} +
+ +
+ )} ); }; @@ -928,7 +926,7 @@ export const ResultsView: React.FC = ({ isMongoDB, queryResult const styles = useQueryTabStyles(); const [activeTab, setActiveTab] = useState(ResultsTabs.Results); - const onTabSelect = useCallback((event: SelectTabEvent, data: SelectTabData) =>{ + const onTabSelect = useCallback((event: SelectTabEvent, data: SelectTabData) => { setActiveTab(data.value as ResultsTabs); }, []);