Default throughput bucket (#2460)

* default throughput bucket * nit * show inactive buckets * add e2e tests for default throughput bucket * for test sql containers, use throughput of 4000 * remove container throughput on creation * added offer throughput * add default throughput bucket info link * add text localization * upgrade playwright * Fix flaky permissionsScreen test by using unrouteAll with ignoreErrors * fix: move container creation to beforeAll to reduce CI shard timeout * remove comment --------- Co-authored-by: Asier Isayas <aisayas@microsoft.com>
2026-04-22 14:33:34 +01:00 · 2026-04-17 12:10:52 -04:00
parent 57a1876130
commit 93ef9e2cc2
10 changed files with 286 additions and 50 deletions
--- a/src/Contracts/DataModels.ts
+++ b/src/Contracts/DataModels.ts
@@ -347,6 +347,7 @@ export interface Offer {
 export interface ThroughputBucket {
  id: number;
  maxThroughputPercentage: number;
+  isDefaultBucket?: boolean;
 }

 export interface SDKOfferDefinition extends Resource {
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.test.tsx
@@ -76,11 +76,11 @@ describe("ThroughputBucketsComponent", () => {
    fireEvent.change(input, { target: { value: "70" } });

    expect(mockOnBucketsChange).toHaveBeenCalledWith([
-      { id: 1, maxThroughputPercentage: 70 },
-      { id: 2, maxThroughputPercentage: 60 },
-      { id: 3, maxThroughputPercentage: 100 },
-      { id: 4, maxThroughputPercentage: 100 },
-      { id: 5, maxThroughputPercentage: 100 },
+      { id: 1, maxThroughputPercentage: 70, isDefaultBucket: false },
+      { id: 2, maxThroughputPercentage: 60, isDefaultBucket: false },
+      { id: 3, maxThroughputPercentage: 100, isDefaultBucket: false },
+      { id: 4, maxThroughputPercentage: 100, isDefaultBucket: false },
+      { id: 5, maxThroughputPercentage: 100, isDefaultBucket: false },
    ]);
  });

@@ -102,11 +102,11 @@ describe("ThroughputBucketsComponent", () => {
    fireEvent.change(input2, { target: { value: "80" } });

    expect(mockOnBucketsChange).toHaveBeenCalledWith([
-      { id: 1, maxThroughputPercentage: 70 },
-      { id: 2, maxThroughputPercentage: 80 },
-      { id: 3, maxThroughputPercentage: 100 },
-      { id: 4, maxThroughputPercentage: 100 },
-      { id: 5, maxThroughputPercentage: 100 },
+      { id: 1, maxThroughputPercentage: 70, isDefaultBucket: false },
+      { id: 2, maxThroughputPercentage: 80, isDefaultBucket: false },
+      { id: 3, maxThroughputPercentage: 100, isDefaultBucket: false },
+      { id: 4, maxThroughputPercentage: 100, isDefaultBucket: false },
+      { id: 5, maxThroughputPercentage: 100, isDefaultBucket: false },
    ]);
  });

@@ -134,8 +134,8 @@ describe("ThroughputBucketsComponent", () => {
      <ThroughputBucketsComponent
        {...defaultProps}
        currentBuckets={[
-          { id: 1, maxThroughputPercentage: 100 },
-          { id: 2, maxThroughputPercentage: 50 },
+          { id: 1, maxThroughputPercentage: 100, isDefaultBucket: false },
+          { id: 2, maxThroughputPercentage: 50, isDefaultBucket: false },
        ]}
      />,
    );
@@ -157,21 +157,21 @@ describe("ThroughputBucketsComponent", () => {
    fireEvent.click(toggles[0]);

    expect(mockOnBucketsChange).toHaveBeenCalledWith([
-      { id: 1, maxThroughputPercentage: 100 },
-      { id: 2, maxThroughputPercentage: 60 },
-      { id: 3, maxThroughputPercentage: 100 },
-      { id: 4, maxThroughputPercentage: 100 },
-      { id: 5, maxThroughputPercentage: 100 },
+      { id: 1, maxThroughputPercentage: 100, isDefaultBucket: false },
+      { id: 2, maxThroughputPercentage: 60, isDefaultBucket: false },
+      { id: 3, maxThroughputPercentage: 100, isDefaultBucket: false },
+      { id: 4, maxThroughputPercentage: 100, isDefaultBucket: false },
+      { id: 5, maxThroughputPercentage: 100, isDefaultBucket: false },
    ]);

    fireEvent.click(toggles[0]);

    expect(mockOnBucketsChange).toHaveBeenCalledWith([
-      { id: 1, maxThroughputPercentage: 50 },
-      { id: 2, maxThroughputPercentage: 60 },
-      { id: 3, maxThroughputPercentage: 100 },
-      { id: 4, maxThroughputPercentage: 100 },
-      { id: 5, maxThroughputPercentage: 100 },
+      { id: 1, maxThroughputPercentage: 50, isDefaultBucket: false },
+      { id: 2, maxThroughputPercentage: 60, isDefaultBucket: false },
+      { id: 3, maxThroughputPercentage: 100, isDefaultBucket: false },
+      { id: 4, maxThroughputPercentage: 100, isDefaultBucket: false },
+      { id: 5, maxThroughputPercentage: 100, isDefaultBucket: false },
    ]);
  });

--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx
@@ -1,4 +1,16 @@
-import { Label, Slider, Stack, TextField, Toggle } from "@fluentui/react";
+import {
+  Dropdown,
+  Icon,
+  IDropdownOption,
+  Label,
+  Link,
+  Slider,
+  Stack,
+  Text,
+  TextField,
+  Toggle,
+  TooltipHost,
+} from "@fluentui/react";
 import { ThroughputBucket } from "Contracts/DataModels";
 import { Keys, t } from "Localization";
 import React, { FC, useEffect, useState } from "react";
@@ -9,6 +21,7 @@ const MAX_BUCKET_SIZES = 5;
 const DEFAULT_BUCKETS = Array.from({ length: MAX_BUCKET_SIZES }, (_, i) => ({
  id: i + 1,
  maxThroughputPercentage: 100,
+  isDefaultBucket: false,
 }));

 export interface ThroughputBucketsComponentProps {
@@ -24,19 +37,54 @@ export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = (
  onBucketsChange,
  onSaveableChange,
 }) => {
+  const NoDefaultThroughputSelectedKey: number = -1;
  const getThroughputBuckets = (buckets: ThroughputBucket[]): ThroughputBucket[] => {
    if (!buckets || buckets.length === 0) {
      return DEFAULT_BUCKETS;
    }
    const maxBuckets = Math.max(DEFAULT_BUCKETS.length, buckets.length);
-    const adjustedDefaultBuckets = Array.from({ length: maxBuckets }, (_, i) => ({
-      id: i + 1,
-      maxThroughputPercentage: 100,
+    const adjustedDefaultBuckets: ThroughputBucket[] = Array.from(
+      { length: maxBuckets },
+      (_, i) =>
+        ({
+          id: i + 1,
+          maxThroughputPercentage: 100,
+          isDefaultBucket: false,
+        }) as ThroughputBucket,
+    );
+
+    return adjustedDefaultBuckets.map((defaultBucket: ThroughputBucket) => {
+      const incoming: ThroughputBucket = buckets?.find((bucket) => bucket.id === defaultBucket.id);
+
+      return {
+        ...defaultBucket,
+        ...incoming,
+        ...(incoming?.isDefaultBucket && { isDefaultBucket: true }),
+      };
+    });
+  };
+
+  const getThroughputBucketOptions = (): IDropdownOption[] => {
+    const noDefaultThroughputBucketSelected: IDropdownOption = {
+      key: NoDefaultThroughputSelectedKey,
+      text: t(Keys.controls.settings.throughputBuckets.noDefaultBucketSelected),
+    };
+
+    const throughputBucketOptions: IDropdownOption[] = throughputBuckets.map((bucket) => ({
+      key: bucket.id,
+      text: t(Keys.controls.settings.throughputBuckets.bucketOptionLabel, {
+        id: String(bucket.id),
+        percentage: String(bucket.maxThroughputPercentage),
+      }),
+      disabled: bucket.maxThroughputPercentage === 100,
+      ...(bucket.maxThroughputPercentage === 100 && {
+        data: {
+          tooltip: t(Keys.controls.settings.throughputBuckets.bucketNotActive, { id: String(bucket.id) }),
+        },
+      }),
    }));

-    return adjustedDefaultBuckets.map(
-      (defaultBucket) => buckets?.find((bucket) => bucket.id === defaultBucket.id) || defaultBucket,
-    );
+    return [noDefaultThroughputBucketSelected, ...throughputBucketOptions];
  };

  const [throughputBuckets, setThroughputBuckets] = useState<ThroughputBucket[]>(getThroughputBuckets(currentBuckets));
@@ -53,7 +101,13 @@ export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = (

  const handleBucketChange = (id: number, newValue: number) => {
    const updatedBuckets = throughputBuckets.map((bucket) =>
-      bucket.id === id ? { ...bucket, maxThroughputPercentage: newValue } : bucket,
+      bucket.id === id
+        ? {
+            ...bucket,
+            maxThroughputPercentage: newValue,
+            isDefaultBucket: newValue === 100 ? false : bucket.isDefaultBucket,
+          }
+        : bucket,
    );
    setThroughputBuckets(updatedBuckets);
    const settingsChanged = isDirty(updatedBuckets, throughputBuckets);
@@ -64,6 +118,38 @@ export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = (
    handleBucketChange(id, checked ? 50 : 100);
  };

+  const onDefaultBucketToggle = (id: number, checked: boolean): void => {
+    const updatedBuckets: ThroughputBucket[] = throughputBuckets.map((bucket) =>
+      bucket.id === id ? { ...bucket, isDefaultBucket: checked } : { ...bucket, isDefaultBucket: false },
+    );
+    setThroughputBuckets(updatedBuckets);
+    const settingsChanged = isDirty(updatedBuckets, throughputBuckets);
+    settingsChanged && onBucketsChange(updatedBuckets);
+  };
+
+  const onRenderDefaultThroughputBucketLabel = (): JSX.Element => {
+    const tooltipContent = (): JSX.Element => (
+      <Text>
+        {t(Keys.controls.settings.throughputBuckets.defaultBucketTooltip)}{" "}
+        <Link
+          href="https://learn.microsoft.com/azure/cosmos-db/throughput-buckets?tabs=dotnet#configuring-default-throughput-bucket"
+          target="_blank"
+        >
+          {t(Keys.controls.settings.throughputBuckets.defaultBucketTooltipLearnMore)}
+        </Link>
+      </Text>
+    );
+
+    return (
+      <Stack horizontal verticalAlign="center">
+        <Label>{t(Keys.controls.settings.throughputBuckets.defaultBucketLabel)}</Label>
+        <TooltipHost content={tooltipContent()}>
+          <Icon iconName="Info" styles={{ root: { marginLeft: 4, marginTop: 5 } }} />
+        </TooltipHost>
+      </Stack>
+    );
+  };
+
  return (
    <Stack tokens={{ childrenGap: "m" }} styles={{ root: { width: "70%", maxWidth: 700 } }}>
      <Label styles={{ root: { color: "var(--colorNeutralForeground1)" } }}>
@@ -102,6 +188,7 @@ export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = (
                fieldGroup: { width: 80 },
              }}
              disabled={bucket.maxThroughputPercentage === 100}
+              data-test={`bucket-${bucket.id}-percentage-input`}
            />
            <Toggle
              onText={t(Keys.controls.settings.throughputBuckets.active)}
@@ -112,10 +199,36 @@ export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = (
                root: { marginBottom: 0 },
                text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
              }}
+              data-test={`bucket-${bucket.id}-active-toggle`}
            ></Toggle>
          </Stack>
        ))}
      </Stack>
+      <Dropdown
+        placeholder={t(Keys.controls.settings.throughputBuckets.defaultBucketPlaceholder)}
+        label={t(Keys.controls.settings.throughputBuckets.defaultBucketLabel)}
+        options={getThroughputBucketOptions()}
+        selectedKey={
+          throughputBuckets?.find((throughputbucket: ThroughputBucket) => throughputbucket.isDefaultBucket)?.id ||
+          NoDefaultThroughputSelectedKey
+        }
+        onChange={(_, option) => onDefaultBucketToggle(option.key as number, true)}
+        onRenderLabel={onRenderDefaultThroughputBucketLabel}
+        onRenderOption={(option: IDropdownOption) => {
+          const tooltip: string = option?.data?.tooltip;
+          if (!tooltip) {
+            return <>{option?.text}</>;
+          }
+
+          return (
+            <TooltipHost content={tooltip}>
+              <span>{option?.text}</span>
+            </TooltipHost>
+          );
+        }}
+        styles={{ root: { width: "50%" } }}
+        data-test="default-throughput-bucket-dropdown"
+      />
    </Stack>
  );
 };
--- a/src/Localization/en/Resources.json
+++ b/src/Localization/en/Resources.json
@@ -961,7 +961,14 @@
        "bucketLabel": "Bucket {{id}}",
        "dataExplorerQueryBucket": " (Data Explorer Query Bucket)",
        "active": "Active",
-        "inactive": "Inactive"
+        "inactive": "Inactive",
+        "defaultBucketLabel": "Default Throughput Bucket",
+        "defaultBucketPlaceholder": "Select a default throughput bucket",
+        "defaultBucketTooltip": "The default throughput bucket is used for operations that do not specify a particular bucket.",
+        "defaultBucketTooltipLearnMore": "Learn more.",
+        "noDefaultBucketSelected": "No Default Throughput Bucket Selected",
+        "bucketOptionLabel": "Bucket {{id}} - {{percentage}}%",
+        "bucketNotActive": "Bucket {{id}} is not active."
      }
    }
  }