Upgrade Cosmos SDK to v4.3 (#2137)

* Upgrade Cosmos SDK to v4.3 * push pkg lock * fix tests * fix package-lock.json * fix package-lock * fix package-lock.json * fix package-lock.json * log console warning when RU limit is reached * fix tests * fix format * fix tests * added description to RU limit message * show warning icon on tab header --------- Co-authored-by: Asier Isayas <aisayas@microsoft.com>
2025-12-19 17:01:13 +00:00 · 2025-05-29 11:35:06 -04:00
parent c5ed537109
commit 0fc6647627
22 changed files with 354 additions and 90 deletions
--- a/src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx
@@ -16,7 +16,12 @@ import * as StorageUtility from "../../../Shared/StorageUtility";
 import { LocalStorageUtility, StorageKey } from "../../../Shared/StorageUtility";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";
+import {
+  logConsoleError,
+  logConsoleInfo,
+  logConsoleProgress,
+  logConsoleWarning,
+} from "../../../Utils/NotificationConsoleUtils";
 import { EditorReact } from "../../Controls/Editor/EditorReact";
 import * as InputTypeaheadComponent from "../../Controls/InputTypeahead/InputTypeaheadComponent";
 import * as TabComponent from "../../Controls/Tabs/TabComponent";
@@ -1083,6 +1088,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
  public static reportToConsole(type: ConsoleDataType.InProgress, msg: string, ...errorData: any[]): () => void;
  public static reportToConsole(type: ConsoleDataType.Info, msg: string, ...errorData: any[]): void;
  public static reportToConsole(type: ConsoleDataType.Error, msg: string, ...errorData: any[]): void;
+  public static reportToConsole(type: ConsoleDataType.Warning, msg: string, ...errorData: any[]): void;
  public static reportToConsole(type: ConsoleDataType, msg: string, ...errorData: any[]): void | (() => void) {
    let errorDataStr = "";
    if (errorData && errorData.length > 0) {
@@ -1099,6 +1105,8 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
        return logConsoleInfo(consoleMessage);
      case ConsoleDataType.InProgress:
        return logConsoleProgress(consoleMessage);
+      case ConsoleDataType.Warning:
+        return logConsoleWarning(consoleMessage);
    }
  }

--- a/src/Explorer/Menus/NotificationConsole/ConsoleData.tsx
+++ b/src/Explorer/Menus/NotificationConsole/ConsoleData.tsx
@@ -13,4 +13,5 @@ export enum ConsoleDataType {
  Info = 0,
  Error = 1,
  InProgress = 2,
+  Warning = 3,
 }
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
+++ b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
@@ -14,6 +14,7 @@ import ErrorRedIcon from "../../../../images/error_red.svg";
 import infoBubbleIcon from "../../../../images/info-bubble-9x9.svg";
 import InfoIcon from "../../../../images/info_color.svg";
 import LoadingIcon from "../../../../images/loading.svg";
+import WarningIcon from "../../../../images/warning.svg";
 import { ClientDefaults, KeyCodes } from "../../../Common/Constants";
 import { userContext } from "../../../UserContext";
 import { useNotificationConsole } from "../../../hooks/useNotificationConsole";
@@ -91,6 +92,9 @@ export class NotificationConsoleComponent extends React.Component<
    const numInfoItems = this.state.allConsoleData.filter(
      (data: ConsoleData) => data.type === ConsoleDataType.Info,
    ).length;
+    const numWarningItems = this.state.allConsoleData.filter(
+      (data: ConsoleData) => data.type === ConsoleDataType.Warning,
+    ).length;

    return (
      <div className="notificationConsoleContainer">
@@ -118,6 +122,10 @@ export class NotificationConsoleComponent extends React.Component<
                <img src={infoBubbleIcon} alt="Info items" />
                <span className="numInfoItems">{numInfoItems}</span>
              </span>
+              <span className="notificationConsoleHeaderIconWithData">
+                <img src={WarningIcon} alt="Warning items" />
+                <span className="numWarningItems">{numWarningItems}</span>
+              </span>
            </span>
            {userContext.features.pr && <PrPreview pr={userContext.features.pr} />}
            <span className="consoleSplitter" />
@@ -198,6 +206,7 @@ export class NotificationConsoleComponent extends React.Component<
        {item.type === ConsoleDataType.Info && <img className="infoIcon" src={InfoIcon} alt="info" />}
        {item.type === ConsoleDataType.Error && <img className="errorIcon" src={ErrorRedIcon} alt="error" />}
        {item.type === ConsoleDataType.InProgress && <img className="loaderIcon" src={LoaderIcon} alt="in progress" />}
+        {item.type === ConsoleDataType.Warning && <img className="warningIcon" src={WarningIcon} alt="warning" />}
        <span className="date">{item.date}</span>
        <span className="message" role="alert" aria-live="assertive">
          {item.message}
--- a/src/Explorer/Menus/NotificationConsole/snapshots/NotificationConsoleComponent.test.tsx.snap
+++ b/src/Explorer/Menus/NotificationConsole/snapshots/NotificationConsoleComponent.test.tsx.snap
@@ -59,6 +59,19 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
            0
          </span>
        </span>
+        <span
+          className="notificationConsoleHeaderIconWithData"
+        >
+          <img
+            alt="Warning items"
+            src={{}}
+          />
+          <span
+            className="numWarningItems"
+          >
+            0
+          </span>
+        </span>
      </span>
      <span
        className="consoleSplitter"
@@ -229,6 +242,19 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
            1
          </span>
        </span>
+        <span
+          className="notificationConsoleHeaderIconWithData"
+        >
+          <img
+            alt="Warning items"
+            src={{}}
+          />
+          <span
+            className="numWarningItems"
+          >
+            0
+          </span>
+        </span>
      </span>
      <span
        className="consoleSplitter"
--- a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
+++ b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
@@ -180,6 +180,11 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
      ? LocalStorageUtility.getEntryNumber(StorageKey.MaxWaitTimeInSeconds)
      : Constants.Queries.DefaultMaxWaitTimeInSeconds,
  );
+  const [queryControlEnabled, setQueryControlEnabled] = useState<boolean>(
+    LocalStorageUtility.hasItem(StorageKey.QueryControlEnabled)
+      ? LocalStorageUtility.getEntryString(StorageKey.QueryControlEnabled) === "true"
+      : false,
+  );
  const [maxDegreeOfParallelism, setMaxDegreeOfParallelism] = useState<number>(
    LocalStorageUtility.hasItem(StorageKey.MaxDegreeOfParellism)
      ? LocalStorageUtility.getEntryNumber(StorageKey.MaxDegreeOfParellism)
@@ -204,6 +209,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
    !isEmulator;
  const shouldShowGraphAutoVizOption = userContext.apiType === "Gremlin" && !isEmulator;
  const shouldShowCrossPartitionOption = userContext.apiType !== "Gremlin" && !isEmulator;
+  const shouldShowEnhancedQueryControl = userContext.apiType === "SQL";
  const shouldShowParallelismOption = userContext.apiType !== "Gremlin" && !isEmulator;
  const showEnableEntraIdRbac =
    isDataplaneRbacSupported(userContext.apiType) &&
@@ -381,6 +387,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
    LocalStorageUtility.setEntryNumber(StorageKey.MaxWaitTimeInSeconds, MaxWaitTimeInSeconds);
    LocalStorageUtility.setEntryString(StorageKey.ContainerPaginationEnabled, containerPaginationEnabled.toString());
    LocalStorageUtility.setEntryString(StorageKey.IsCrossPartitionQueryEnabled, crossPartitionQueryEnabled.toString());
+    LocalStorageUtility.setEntryString(StorageKey.QueryControlEnabled, queryControlEnabled.toString());
    LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, maxDegreeOfParallelism);
    LocalStorageUtility.setEntryString(StorageKey.PriorityLevel, priorityLevel.toString());
    LocalStorageUtility.setEntryString(StorageKey.CopilotSampleDBEnabled, copilotSampleDBEnabled.toString());
@@ -410,6 +417,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
      `Updated items per page setting to ${LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage)}`,
    );
    logConsoleInfo(`${crossPartitionQueryEnabled ? "Enabled" : "Disabled"} cross-partition query feed option`);
+    logConsoleInfo(`${queryControlEnabled ? "Enabled" : "Disabled"} query control option`);
    logConsoleInfo(
      `Updated the max degree of parallelism query feed option to ${LocalStorageUtility.getEntryNumber(
        StorageKey.MaxDegreeOfParellism,
@@ -760,7 +768,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                    )}
                  </AccordionPanel>
                </AccordionItem>
-
                <AccordionItem value="5">
                  <AccordionHeader>
                    <div className={styles.header}>RU Limit</div>
@@ -943,6 +950,38 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                </AccordionPanel>
              </AccordionItem>
            )}
+            {shouldShowEnhancedQueryControl && (
+              <AccordionItem value="10">
+                <AccordionHeader>
+                  <div className={styles.header}>Enhanced query control</div>
+                </AccordionHeader>
+                <AccordionPanel>
+                  <div className={styles.settingsSectionContainer}>
+                    <div className={styles.settingsSectionDescription}>
+                      Query up to the max degree of parallelism.
+                      <a
+                        href="https://learn.microsoft.com/en-us/azure/cosmos-db/nosql/performance-tips-query-sdk?tabs=v3&pivots=programming-language-nodejs#enhanced-query-control"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {" "}
+                        Learn more{" "}
+                      </a>
+                    </div>
+                    <Checkbox
+                      styles={{
+                        label: { padding: 0 },
+                      }}
+                      className="padding"
+                      ariaLabel="EnableQueryControl"
+                      checked={queryControlEnabled}
+                      onChange={() => setQueryControlEnabled(!queryControlEnabled)}
+                      label="Enable query control"
+                    />
+                  </div>
+                </AccordionPanel>
+              </AccordionItem>
+            )}
            {shouldShowParallelismOption && (
              <AccordionItem value="10">
                <AccordionHeader>
--- a/src/Explorer/Panes/SettingsPane/snapshots/SettingsPane.test.tsx.snap
+++ b/src/Explorer/Panes/SettingsPane/snapshots/SettingsPane.test.tsx.snap
@@ -495,6 +495,51 @@ exports[`Settings Pane should render Default properly 1`] = `
          </div>
        </AccordionPanel>
      </AccordionItem>
+      <AccordionItem
+        value="10"
+      >
+        <AccordionHeader>
+          <div
+            className="___15c001r_0000000 fq02s40"
+          >
+            Enhanced query control
+          </div>
+        </AccordionHeader>
+        <AccordionPanel>
+          <div
+            className="___1dfa554_0000000 fo7qwa0"
+          >
+            <div
+              className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
+            >
+              Query up to the max degree of parallelism.
+              <a
+                href="https://learn.microsoft.com/en-us/azure/cosmos-db/nosql/performance-tips-query-sdk?tabs=v3&pivots=programming-language-nodejs#enhanced-query-control"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                 
+                Learn more
+                 
+              </a>
+            </div>
+            <StyledCheckboxBase
+              ariaLabel="EnableQueryControl"
+              checked={false}
+              className="padding"
+              label="Enable query control"
+              onChange={[Function]}
+              styles={
+                {
+                  "label": {
+                    "padding": 0,
+                  },
+                }
+              }
+            />
+          </div>
+        </AccordionPanel>
+      </AccordionItem>
      <AccordionItem
        value="10"
      >
--- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable no-console */
-import { FeedOptions, QueryOperationOptions } from "@azure/cosmos";
+import { FeedOptions } from "@azure/cosmos";
 import { AuthType } from "AuthType";
 import QueryError, { createMonacoErrorLocationResolver, createMonacoMarkersForQueryErrors } from "Common/QueryError";
 import { SplitterDirection } from "Common/Splitter";
@@ -19,7 +19,7 @@ import { CosmosFluentProvider } from "Explorer/Theme/ThemeUtil";
 import { useSelectedNode } from "Explorer/useSelectedNode";
 import { KeyboardAction } from "KeyboardShortcuts";
 import { QueryConstants } from "Shared/Constants";
-import { LocalStorageUtility, StorageKey, getRUThreshold, ruThresholdEnabled } from "Shared/StorageUtility";
+import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { Allotment } from "allotment";
 import { useClientWriteEnabled } from "hooks/useClientWriteEnabled";
@@ -369,22 +369,9 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
    this.setState({
      isExecutionError: false,
    });
-
-    let queryOperationOptions: QueryOperationOptions;
-    if (userContext.apiType === "SQL" && ruThresholdEnabled()) {
-      const ruThreshold: number = getRUThreshold();
-      queryOperationOptions = {
-        ruCapPerOperation: ruThreshold,
-      } as QueryOperationOptions;
-    }
-
+    this.props.tabsBaseInstance.isExecutionWarning(false);
    const queryDocuments = async (firstItemIndex: number) =>
-      await queryDocumentsPage(
-        this.props.collection && this.props.collection.id(),
-        this._iterator,
-        firstItemIndex,
-        queryOperationOptions,
-      );
+      await queryDocumentsPage(this.props.collection && this.props.collection.id(), this._iterator, firstItemIndex);
    this.props.tabsBaseInstance.isExecuting(true);
    this.setState({
      isExecuting: true,
@@ -424,6 +411,9 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
        firstItemIndex,
        queryDocuments,
      );
+      if (queryResults.ruThresholdExceeded) {
+        this.props.tabsBaseInstance.isExecutionWarning(true);
+      }
      this.setState({ queryResults, errors: [] });
    } catch (error) {
      this.props.tabsBaseInstance.isExecutionError(true);
--- a/src/Explorer/Tabs/Tabs.tsx
+++ b/src/Explorer/Tabs/Tabs.tsx
@@ -18,6 +18,7 @@ import React, { MutableRefObject, useEffect, useRef, useState } from "react";
 import loadingIcon from "../../../images/circular_loader_black_16x16.gif";
 import errorIcon from "../../../images/close-black.svg";
 import errorQuery from "../../../images/error_no_outline.svg";
+import warningIconSvg from "../../../images/warning.svg";
 import { useObservable } from "../../hooks/useObservable";
 import { ReactTabKind, useTabs } from "../../hooks/useTabs";
 import TabsBase from "./TabsBase";
@@ -117,6 +118,9 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
          >
            <span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
              {useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
+              {useObservable(tab?.isExecutionWarning || ko.observable(false)) && (
+                <WarningIcon tab={tab} active={active} />
+              )}
              {isTabExecuting(tab, tabKind) && (
                <img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
              )}
@@ -194,6 +198,20 @@ const ErrorIcon = ({ tab, active }: { tab: Tab; active: boolean }) => (
  </div>
 );

+const WarningIcon = ({ tab, active }: { tab: Tab; active: boolean }) => (
+  <div
+    id="warningStatusIcon"
+    role="button"
+    title="Click to view more details"
+    tabIndex={active ? 0 : undefined}
+    className={active ? "actionsEnabled warningIconContainer" : "warningIconContainer"}
+    onClick={({ nativeEvent: e }) => tab.onErrorDetailsClick(undefined, e)}
+    onKeyPress={({ nativeEvent: e }) => tab.onErrorDetailsKeyPress(undefined, e)}
+  >
+    <img src={warningIconSvg} alt="Warning Icon" style={{ height: 15, marginBottom: 5 }} />
+  </div>
+);
+
 function TabPane({ tab, active }: { tab: Tab; active: boolean }) {
  const ref = useRef<HTMLDivElement>();
  const attrs = {
--- a/src/Explorer/Tabs/TabsBase.ts
+++ b/src/Explorer/Tabs/TabsBase.ts
@@ -27,6 +27,7 @@ export default class TabsBase extends WaitsForTemplateViewModel {
  public tabTitle: ko.Observable<string>;
  public tabPath: ko.Observable<string>;
  public isExecutionError = ko.observable(false);
+  public isExecutionWarning = ko.observable(false);
  public isExecuting = ko.observable(false);
  protected _theme: string;
  public onLoadStartKey: number;