+
+ *
+
+ {this.getThroughputLabelText()}
+
+
+
+
+
+
+
+ Autoscale
+
+
+ Manual
+
+
+ {this.state.isAutoscaleSelected && (
+
+
+ Provision maximum RU/s required by this resource. Estimate your required RU/s with
+
+ capacity calculator
+
+ .
+
+
+
+
+ Max RU/s
+
+
+
+
+
+ this.onThroughputValueChange(newInput)}
+ step={AutoPilotUtils.autoPilotIncrementStep}
+ min={AutoPilotUtils.minAutoPilotThroughput}
+ value={this.state.throughput.toString()}
+ aria-label="Max request units per second"
+ required={true}
+ />
+
+
+ Your {this.props.isDatabase ? "database" : "container"} throughput will automatically scale from{" "}
+
+ {AutoPilotUtils.getMinRUsBasedOnUserInput(this.state.throughput)} RU/s (10% of max RU/s) -{" "}
+ {this.state.throughput} RU/s
+ {" "}
+ based on usage.
+
+
+ )}
+
+ {!this.state.isAutoscaleSelected && (
+
+
+ Estimate your required RU/s with
+
+ capacity calculator
+
+ .
+
+
+ SharedConstants.CollectionCreation.DefaultCollectionRUs400
+ ? "The first 400 RU/s in this account are free. Billing will apply to any throughput beyond 400 RU/s."
+ : undefined
+ }
+ >
+ this.onThroughputValueChange(newInput)}
+ step={100}
+ min={SharedConstants.CollectionCreation.DefaultCollectionRUs400}
+ max={userContext.isTryCosmosDBSubscription ? Constants.TryCosmosExperience.maxRU : Infinity}
+ value={this.state.throughput.toString()}
+ aria-label="Max request units per second"
+ required={true}
+ />
+
+
+ )}
+
+
+ , isChecked: boolean) => {
+ this.setState({ isCostAcknowledged: isChecked });
+ this.props.onCostAcknowledgeChange(isChecked);
+ }}
+ />
+
+ {this.getCostAcknowledgeText()}
+
+
+ )}
+
+ );
+ }
+
+ private getThroughputLabelText(): string {
+ if (this.state.isAutoscaleSelected) {
+ return AutoPilotUtils.getAutoPilotHeaderText();
+ }
+
+ const minRU: string = SharedConstants.CollectionCreation.DefaultCollectionRUs400.toLocaleString();
+ const maxRU: string = userContext.isTryCosmosDBSubscription
+ ? Constants.TryCosmosExperience.maxRU.toLocaleString()
+ : "unlimited";
+ return this.state.isAutoscaleSelected
+ ? AutoPilotUtils.getAutoPilotHeaderText()
+ : `Throughput (${minRU} - ${maxRU} RU/s)`;
+ }
+
+ private onThroughputValueChange(newInput: string): void {
+ const newThroughput = parseInt(newInput);
+ this.setState({ throughput: newThroughput });
+ this.props.setThroughputValue(newThroughput);
+ }
+
+ private getAutoScaleTooltip(): string {
+ return `After the first ${AutoPilotUtils.getStorageBasedOnUserInput(
+ this.state.throughput
+ )} GB of data stored, the max
+ RU/s will be automatically upgraded based on the new storage value.`;
+ }
+
+ private getCostAcknowledgeText(): string {
+ const databaseAccount = userContext.databaseAccount;
+ if (!databaseAccount || !databaseAccount.properties) {
+ return "";
+ }
+
+ const numberOfRegions: number = databaseAccount.properties.readLocations?.length || 1;
+ const multimasterEnabled: boolean = databaseAccount.properties.enableMultipleWriteLocations;
+
+ return PricingUtils.getEstimatedSpendAcknowledgeString(
+ this.state.throughput,
+ userContext.portalEnv,
+ numberOfRegions,
+ multimasterEnabled,
+ this.state.isAutoscaleSelected
+ );
+ }
+
+ private onAutoscaleRadioBtnChange(event: React.ChangeEvent+ {PricingUtils.estimatedCostDisclaimer} +
-
+
- {props.isWarning ? (
-
- {props.message}
-
- {props.showErrorDetails && (
-
- More details
-
- )}
-
-
-);
diff --git a/src/Explorer/Panes/PanelFooterComponent.tsx b/src/Explorer/Panes/PanelFooterComponent.tsx
index cbe3adab7..b6c2cb255 100644
--- a/src/Explorer/Panes/PanelFooterComponent.tsx
+++ b/src/Explorer/Panes/PanelFooterComponent.tsx
@@ -3,13 +3,12 @@ import { PrimaryButton } from "office-ui-fabric-react";
export interface PanelFooterProps {
buttonLabel: string;
- onOKButtonClicked: () => void;
}
export const PanelFooterComponent: React.FunctionComponent
- props.onOKButtonClicked()} />
+
);
diff --git a/src/Explorer/Panes/PanelInfoErrorComponent.tsx b/src/Explorer/Panes/PanelInfoErrorComponent.tsx
new file mode 100644
index 000000000..97282b12e
--- /dev/null
+++ b/src/Explorer/Panes/PanelInfoErrorComponent.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { Icon, Link, Stack, Text } from "office-ui-fabric-react";
+
+export interface PanelInfoErrorProps {
+ message: string;
+ messageType: string;
+ showErrorDetails: boolean;
+ link?: string;
+ linkText?: string;
+ openNotificationConsole?: () => void;
+}
+
+export const PanelInfoErrorComponent: React.FunctionComponent
+ 
+
+);
diff --git a/src/Explorer/Panes/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap b/src/Explorer/Panes/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
index cf04bc32d..8166cf4f6 100644
--- a/src/Explorer/Panes/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
+++ b/src/Explorer/Panes/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
@@ -15,324 +15,334 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
}
openNotificationConsole={[Function]}
>
-
-
-
+
+ Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
+
+
+
+
+
+
+
-
-
+
-
-
-
-
-
-
-
+
+
+
+
+
-
- Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
-
-
-
-
-
@@ -348,7 +358,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small"
>
Confirm by typing the collection id
@@ -649,18 +659,18 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
validateOnLoad={true}
>
Help us improve Azure Cosmos DB!
@@ -693,7 +703,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small"
>
What is the reason why you are deleting this container?
@@ -996,17 +1006,17 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
validateOnLoad={true}
>