diff --git a/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx b/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx index 17492691f..4667a1a74 100644 --- a/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx +++ b/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx @@ -1,4 +1,4 @@ -import { Text } from "@fluentui/react"; +import { Stack, Text } from "@fluentui/react"; import React, { FunctionComponent } from "react"; import { InfoTooltip } from "../../../../Common/Tooltip/InfoTooltip"; import * as SharedConstants from "../../../../Shared/Constants"; @@ -54,28 +54,32 @@ export const CostEstimateText: FunctionComponent = ({ if (isAutoscale) { return ( - - {estimatedMonthlyCost} ({currency}){iconWithEstimatedCostDisclaimer}:{" "} - - {currencySign + calculateEstimateNumber(monthlyPrice / 10)} -{" "} - {currencySign + calculateEstimateNumber(monthlyPrice)}{" "} - - ({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits / 10} - {requestUnits}{" "} - RU/s, {currencySign + pricePerRu}/RU) - + + + {estimatedMonthlyCost} ({currency}){iconWithEstimatedCostDisclaimer}:{" "} + + {currencySign + calculateEstimateNumber(monthlyPrice / 10)} -{" "} + {currencySign + calculateEstimateNumber(monthlyPrice)}{" "} + + ({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits / 10} - {requestUnits}{" "} + RU/s, {currencySign + pricePerRu}/RU) + + ); } return ( - - Estimated cost ({currency}){iconWithEstimatedCostDisclaimer}:{" "} - - {currencySign + calculateEstimateNumber(hourlyPrice)} hourly /{" "} - {currencySign + calculateEstimateNumber(dailyPrice)} daily /{" "} - {currencySign + calculateEstimateNumber(monthlyPrice)} monthly{" "} - - ({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits}RU/s,{" "} - {currencySign + pricePerRu}/RU) - + + + Estimated cost ({currency}){iconWithEstimatedCostDisclaimer}:{" "} + + {currencySign + calculateEstimateNumber(hourlyPrice)} hourly /{" "} + {currencySign + calculateEstimateNumber(dailyPrice)} daily /{" "} + {currencySign + calculateEstimateNumber(monthlyPrice)} monthly{" "} + + ({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits}RU/s,{" "} + {currencySign + pricePerRu}/RU) + + ); }; diff --git a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx index a98803593..c72925be0 100644 --- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx +++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx @@ -1,5 +1,6 @@ -import { Checkbox, DirectionalHint, Link, Stack, Text, TextField, TooltipHost } from "@fluentui/react"; +import { Checkbox, DirectionalHint, Link, Separator, Stack, Text, TextField, TooltipHost } from "@fluentui/react"; import { getWorkloadType } from "Common/DatabaseAccountUtility"; +import { CostEstimateText } from "Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText"; import { useDatabases } from "Explorer/useDatabases"; import React, { FunctionComponent, useEffect, useState } from "react"; import * as Constants from "../../../Common/Constants"; @@ -9,7 +10,6 @@ import { userContext } from "../../../UserContext"; import { getCollectionName } from "../../../Utils/APITypeUtils"; import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils"; import * as PricingUtils from "../../../Utils/PricingUtils"; -import { CostEstimateText } from "./CostEstimateText/CostEstimateText"; import "./ThroughputInput.less"; import { isFabricNative } from "../../../Platform/Fabric/FabricUtil"; @@ -232,53 +232,92 @@ export const ThroughputInput: FunctionComponent = ({ )} + {isAutoscaleSelected && ( - - Estimate your required RU/s with{" "} - - capacity calculator - - . + + Your container throughput will automatically scale up to the maximum value you select, from a minimum of 10% + of that value. + + + + + Minimum RU/s + + The minimum RU/s your container will scale to + + + {Math.round(throughput / 10).toString()} + + - - - {isDatabase ? "Database" : getCollectionName()} Max RU/s + + x 10 = - {getAutoScaleTooltip()} + + + + + Maximum RU/s + + {getAutoScaleTooltip()} + + onThroughputValueChange(newInput)} + step={AutoPilotUtils.autoPilotIncrementStep} + min={AutoPilotUtils.autoPilotThroughput1K} + max={isSharded ? Number.MAX_SAFE_INTEGER.toString() : "10000"} + value={throughput.toString()} + ariaLabel={`${isDatabase ? "Database" : getCollectionName()} max RU/s`} + required={true} + errorMessage={throughputError} + /> + - onThroughputValueChange(newInput)} - step={AutoPilotUtils.autoPilotIncrementStep} - min={AutoPilotUtils.autoPilotThroughput1K} - max={isSharded ? Number.MAX_SAFE_INTEGER.toString() : "10000"} - value={throughput.toString()} - ariaLabel={`${isDatabase ? "Database" : getCollectionName()} max RU/s`} - required={true} - errorMessage={throughputError} - /> - - - Your {isDatabase ? "database" : getCollectionName().toLocaleLowerCase()} throughput will automatically scale - from{" "} - - {AutoPilotUtils.getMinRUsBasedOnUserInput(throughput)} RU/s (10% of max RU/s) - {throughput} RU/s - {" "} - based on usage. - + + + + Estimate your required RU/s with  + + capacity calculator + + . + + + )} @@ -302,7 +341,6 @@ export const ThroughputInput: FunctionComponent = ({ {getAutoScaleTooltip()} - = ({ errorMessage={throughputError} /> + )} - - {throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K && ( - Estimate your required RU/s with - - - - - capacity calculator - - - - . + Your container throughput will automatically scale up to the maximum value you select, from a minimum of 10% of that value.
- +
+ +
+ + + Minimum RU/s + + + + + + +
+ + + +  + + + + +
+ + + + +
+ + + + 400 + + +
+ + - Container - Max RU/s + x 10 = - - - + - + + + Maximum RU/s + + + + + + +
+ + + +  + + + + +
+ + + + +
+ + +
- - - -  - - -
- - - - + + + + - + +
+ + + Estimate your required RU/s with  + + + + capacity calculator + + + + . + + +
+ + -
-
- -
-
+ aria-orientation="horizontal" + className="content-135" + role="separator" + />
- - - - - Your - container - throughput will automatically scale from - - - 400 - RU/s (10% of max RU/s) - - 4000 - RU/s - - - based on usage. - - + + - `; diff --git a/src/Explorer/Explorer.tsx b/src/Explorer/Explorer.tsx index 23ff72edc..a3685dae9 100644 --- a/src/Explorer/Explorer.tsx +++ b/src/Explorer/Explorer.tsx @@ -31,6 +31,7 @@ import { readDatabases } from "../Common/dataAccess/readDatabases"; import * as DataModels from "../Contracts/DataModels"; import { ContainerConnectionInfo, IPhoenixServiceInfo, IProvisionData, IResponse } from "../Contracts/DataModels"; import * as ViewModels from "../Contracts/ViewModels"; +import { UploadDetailsRecord } from "../Contracts/ViewModels"; import { GitHubOAuthService } from "../GitHub/GitHubOAuthService"; import { PhoenixClient } from "../Phoenix/PhoenixClient"; import * as ExplorerSettings from "../Shared/ExplorerSettings"; @@ -71,7 +72,6 @@ import { ResourceTreeAdapter } from "./Tree/ResourceTreeAdapter"; import StoredProcedure from "./Tree/StoredProcedure"; import { useDatabases } from "./useDatabases"; import { useSelectedNode } from "./useSelectedNode"; -import { UploadDetailsRecord } from "../Contracts/ViewModels"; BindingHandlersRegisterer.registerBindingHandlers(); diff --git a/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx index 424df04dc..5b7fd1112 100644 --- a/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx +++ b/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx @@ -25,7 +25,7 @@ import { FullTextPoliciesComponent } from "Explorer/Controls/FullTextSeach/FullT import { VectorEmbeddingPoliciesComponent } from "Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent"; import { AllPropertiesIndexed, - AnalyticalStorageContent, + AnalyticalStoreHeader, ContainerVectorPolicyTooltipContent, FullTextPolicyDefault, getPartitionKey, @@ -265,7 +265,7 @@ export class AddCollectionPanel extends React.Component {!(isFabricNative() && this.props.databaseId !== undefined) && ( -