diff --git a/src/Explorer/Controls/Settings/SettingsComponent.tsx b/src/Explorer/Controls/Settings/SettingsComponent.tsx index c9ab6f3c5..720bef874 100644 --- a/src/Explorer/Controls/Settings/SettingsComponent.tsx +++ b/src/Explorer/Controls/Settings/SettingsComponent.tsx @@ -7,6 +7,10 @@ import { ContainerPolicyComponent, ContainerPolicyComponentProps, } from "Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent"; +import { + ThroughputBucketsComponent, + ThroughputBucketsComponentProps, +} from "Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent"; import { useDatabases } from "Explorer/useDatabases"; import { isFullTextSearchEnabled, isVectorSearchEnabled } from "Utils/CapabilityUtils"; import { isRunningOnPublicCloud } from "Utils/CloudUtils"; @@ -338,7 +342,8 @@ export class SettingsComponent extends React.Component, + }); + } + const pivotProps: IPivotProps = { onLinkClick: this.onPivotChange, selectedKey: SettingsV2TabTypes[this.state.selectedTab], diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx index 0bab3711a..251a3b841 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx @@ -16,7 +16,6 @@ import { titleAndInputStackProps, } from "../SettingsRenderUtils"; import { hasDatabaseSharedThroughput } from "../SettingsUtils"; -import { ThroughputBucketsComponent } from "./ThroughputInputComponents/ThroughputBucketsComponent"; import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component"; export interface ScaleComponentProps { @@ -34,22 +33,10 @@ export interface ScaleComponentProps { onMaxAutoPilotThroughputChange: (newThroughput: number) => void; onScaleSaveableChange: (isScaleSaveable: boolean) => void; onScaleDiscardableChange: (isScaleDiscardable: boolean) => void; - throughputBuckets: DataModels.ThroughputBucket[]; - throughputBucketsBaseline: DataModels.ThroughputBucket[]; - enableThroughputBuckets: boolean; - onThroughputBucketChange: (throughputBuckets: DataModels.ThroughputBucket[]) => void; - onThroughputBucketsSaveableChange: (isSaveable: boolean) => void; throughputError?: string; } -interface ScaleComponentState { - isThroughputSaveable: boolean; - isThroughputBucketsSaveable: boolean; - isThroughputDiscardable: boolean; - isThroughputBucketsDiscardable: boolean; -} - -export class ScaleComponent extends React.Component { +export class ScaleComponent extends React.Component { private isEmulator: boolean; private offer: DataModels.Offer; private databaseId: string; @@ -61,12 +48,6 @@ export class ScaleComponent extends React.Component { @@ -80,6 +61,7 @@ export class ScaleComponent extends React.Component) => { - this.setState( - (prevState) => { - const hasChanges = Object.keys(updates).some( - (key) => prevState[key as keyof ScaleComponentState] !== updates[key as keyof ScaleComponentState], - ); - return hasChanges ? { ...prevState, ...updates } : null; - }, - () => { - const isSaveable = this.state.isThroughputSaveable - ? this.state.isThroughputDiscardable || this.state.isThroughputBucketsSaveable - : this.state.isThroughputBucketsSaveable; - const isDiscardable = this.state.isThroughputDiscardable || this.state.isThroughputBucketsDiscardable; - this.props.onScaleSaveableChange(isSaveable); - this.props.onThroughputBucketsSaveableChange(this.state.isThroughputBucketsSaveable); - this.props.onScaleDiscardableChange(isDiscardable); - }, - ); - }; - - private handleThroughputSaveableChange = (isSaveable: boolean) => { - this.updateScaleSettingsState({ isThroughputSaveable: isSaveable }); - }; - - private handleThroughputDiscardableChange = (isDiscardable: boolean) => { - this.updateScaleSettingsState({ isThroughputDiscardable: isDiscardable }); - }; - - private handleThroughputBucketsSaveableChange = (isSaveable: boolean) => { - this.updateScaleSettingsState({ isThroughputBucketsSaveable: isSaveable }); - }; - - private handleThroughputBucketsDiscardableChange = (isDiscardable: boolean) => { - this.updateScaleSettingsState({ isThroughputBucketsDiscardable: isDiscardable }); - }; - public render(): JSX.Element { return ( @@ -235,15 +182,6 @@ export class ScaleComponent extends React.Component{this.getInitialNotificationElement()} )} {!this.isAutoScaleEnabled() && {this.getThroughputInputComponent()}} - {this.props.enableThroughputBuckets && ( - - )} {/* TODO: Replace link with call to the Azure Support blade */} {this.isAutoScaleEnabled() && ( diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx index 8bfe0dafa..cc60cb8eb 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx @@ -10,12 +10,11 @@ const DEFAULT_BUCKETS = Array.from({ length: MAX_BUCKET_SIZES }, (_, i) => ({ maxThroughputPercentage: 100, })); -interface ThroughputBucketsComponentProps { +export interface ThroughputBucketsComponentProps { currentBuckets: ThroughputBucket[]; throughputBucketsBaseline: ThroughputBucket[]; onBucketsChange: (updatedBuckets: ThroughputBucket[]) => void; onSaveableChange: (isSaveable: boolean) => void; - onDiscardableChange: (isDiscardable: boolean) => void; } export const ThroughputBucketsComponent: FC = ({ @@ -23,7 +22,6 @@ export const ThroughputBucketsComponent: FC = ( throughputBucketsBaseline, onBucketsChange, onSaveableChange, - onDiscardableChange, }) => { const getThroughputBuckets = (buckets: ThroughputBucket[]): ThroughputBucket[] => { if (!buckets || buckets.length === 0) { @@ -45,13 +43,13 @@ export const ThroughputBucketsComponent: FC = ( useEffect(() => { setThroughputBuckets(getThroughputBuckets(currentBuckets)); onSaveableChange(false); - onDiscardableChange(false); + // onDiscardableChange(false); }, [currentBuckets]); useEffect(() => { const isChanged = isDirty(throughputBuckets, getThroughputBuckets(throughputBucketsBaseline)); onSaveableChange(isChanged); - onDiscardableChange(isChanged); + // onDiscardableChange(isChanged); }, [throughputBuckets]); const handleBucketChange = (id: number, newValue: number) => { @@ -69,7 +67,7 @@ export const ThroughputBucketsComponent: FC = ( return ( - + {throughputBuckets?.map((bucket) => ( @@ -80,7 +78,7 @@ export const ThroughputBucketsComponent: FC = ( value={bucket.maxThroughputPercentage} onChange={(newValue) => handleBucketChange(bucket.id, newValue)} showValue={false} - label={`Group ${bucket.id}${bucket.id === 1 ? " (Data Explorer Query Group)" : ""}`} + label={`Group ${bucket.id}${bucket.id === 1 ? " (Data Explorer Query Bucket)" : ""}`} styles={{ root: { flex: 2, maxWidth: 400 } }} disabled={bucket.maxThroughputPercentage === 100} /> @@ -94,9 +92,13 @@ export const ThroughputBucketsComponent: FC = ( }} disabled={bucket.maxThroughputPercentage === 100} /> + {/* onToggle(bucket.id, bucket.maxThroughputPercentage === 100)} + > */} onToggle(bucket.id, checked)} styles={{ root: { marginBottom: 0 }, text: { fontSize: 12 } }} diff --git a/src/Explorer/Controls/Settings/SettingsUtils.tsx b/src/Explorer/Controls/Settings/SettingsUtils.tsx index 5b2f7ca8e..900ad6ab0 100644 --- a/src/Explorer/Controls/Settings/SettingsUtils.tsx +++ b/src/Explorer/Controls/Settings/SettingsUtils.tsx @@ -56,6 +56,7 @@ export enum SettingsV2TabTypes { PartitionKeyTab, ComputedPropertiesTab, ContainerVectorPolicyTab, + ThroughputBucketsTab, } export enum ContainerPolicyTabTypes { @@ -168,6 +169,8 @@ export const getTabTitle = (tab: SettingsV2TabTypes): string => { return "Computed Properties"; case SettingsV2TabTypes.ContainerVectorPolicyTab: return "Container Policies"; + case SettingsV2TabTypes.ThroughputBucketsTab: + return "Throughput Buckets"; default: throw new Error(`Unknown tab ${tab}`); }