random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-20 09:20:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

resolve merge conflict

Browse Source
This commit is contained in:
hardiknai-techm
2021-05-04 13:03:01 +05:30
parent 7b6975761f 038f3ee684
commit 5485a0d3c6
75 changed files with 6769 additions and 3886 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
View File

@@ -5,6 +5,7 @@ import { accordionStackTokens } from "../Settings/SettingsRenderUtils";
export interface CollapsibleSectionProps {
title: string;
isExpandedByDefault: boolean;
onExpand?: () => void;
}
export interface CollapsibleSectionState {
@@ -23,6 +24,12 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
this.setState({ isExpanded: !this.state.isExpanded });
};
public componentDidUpdate(): void {
if (this.state.isExpanded && this.props.onExpand) {
this.props.onExpand();
}
}
public render(): JSX.Element {
return (
<>

13
src/Explorer/Controls/GitHub/GitHubReposComponent.tsx
View File

@@ -23,8 +23,6 @@ export interface RepoListItem {
}
export class GitHubReposComponent extends React.Component<GitHubReposComponentProps> {
public static readonly ConnectToGitHubTitle = "Connect to GitHub";
public static readonly ManageGitHubRepoTitle = "Manage GitHub settings";
private static readonly ManageGitHubRepoDescription =
"Select your GitHub repos and branch(es) to pin to your notebooks workspace.";
private static readonly ManageGitHubRepoResetConnection = "View or change your GitHub authorization settings.";
@@ -32,14 +30,6 @@ export class GitHubReposComponent extends React.Component<GitHubReposComponentPr
private static readonly CancelButtonText = "Cancel";
public render(): JSX.Element {
const header: JSX.Element = (
<p>
{this.props.showAuthorizeAccess
? GitHubReposComponent.ConnectToGitHubTitle
: GitHubReposComponent.ManageGitHubRepoTitle}
</p>
);
const content: JSX.Element = this.props.showAuthorizeAccess ? (
<AuthorizeAccessComponent {...this.props.authorizeAccessProps} />
) : (
@@ -66,9 +56,6 @@ export class GitHubReposComponent extends React.Component<GitHubReposComponentPr
return (
<>
<div className={"firstdivbg headerline"} role="heading" aria-level={2}>
{header}
</div>
<div className={"paneMainContent"}>{content}</div>
{!this.props.showAuthorizeAccess && (
<>

15
src/Explorer/Controls/GitHub/GitHubStyleConstants.ts
View File

@@ -1,19 +1,21 @@
import {
IStyleFunctionOrObject,
ICheckboxStyleProps,
ICheckboxStyles,
IDropdownStyles,
IDropdownStyleProps,
IDropdownStyles,
IStyleFunctionOrObject,
} from "office-ui-fabric-react";
export const ButtonsFooterStyle: React.CSSProperties = {
padding: 14,
paddingTop: 14,
height: "auto",
borderTop: "2px solid lightGray",
};
export const ContentFooterStyle: React.CSSProperties = {
padding: "10px 24px 10px 24px",
paddingTop: "10px",
height: "auto",
borderTop: "2px solid lightGray",
};
export const ChildrenMargin = 10;
@@ -53,6 +55,11 @@ export const BranchesDropdownOptionContainerStyle: React.CSSProperties = {
padding: 8,
};
export const ContentMainStyle: React.CSSProperties = {
display: "flex",
flexDirection: "column",
};
export const ReposListRepoColumnMinWidth = 192;
export const ReposListBranchesColumnWidth = 116;
export const BranchesDropdownWidth = 200;

4
src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap
View File

@@ -415,7 +415,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
</Text>
<Text>
<em>
*This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
</em>
</Text>
</Stack>
@@ -689,7 +689,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
</Text>
<Text>
<em>
*This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
</em>
</Text>
</Stack>

3092
src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

2
src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap
View File

@@ -150,7 +150,7 @@ exports[`SettingsUtils functions render 1`] = `
</Text>
<Text>
<em>
*This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
</em>
</Text>
</Stack>

2
src/Explorer/Controls/ThroughputInput/CostEstimateText/index.test.tsx → src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.test.tsx
View File

@@ -1,6 +1,6 @@
import { shallow } from "enzyme";
import React from "react";
import { CostEstimateText } from ".";
import { CostEstimateText } from "./CostEstimateText";
const props = {
requestUnits: 5,
isAutoscale: false,

45
src/Explorer/Controls/ThroughputInput/CostEstimateText/index.tsx → src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx
View File

@@ -1,8 +1,17 @@
import { Text } from "office-ui-fabric-react";
import React, { FunctionComponent } from "react";
import { Tooltip } from "../../../../Common/Tooltip/Tooltip";
import * as SharedConstants from "../../../../Shared/Constants";
import { userContext } from "../../../../UserContext";
import * as PricingUtils from "../../../../Utils/PricingUtils";
import {
calculateEstimateNumber,
computeRUUsagePriceHourly,
getAutoscalePricePerRu,
getCurrencySign,
getMultimasterMultiplier,
getPriceCurrency,
getPricePerRu,
} from "../../../../Utils/PricingUtils";
interface CostEstimateTextProps {
requestUnits: number;
@@ -13,15 +22,15 @@ export const CostEstimateText: FunctionComponent<CostEstimateTextProps> = ({
requestUnits,
isAutoscale,
}: CostEstimateTextProps) => {
const databaseAccount = userContext.databaseAccount;
if (!databaseAccount || !databaseAccount.properties) {
const { databaseAccount } = userContext;
if (!databaseAccount?.properties) {
return <></>;
}
const serverId: string = userContext.portalEnv;
const numberOfRegions: number = databaseAccount.properties.readLocations?.length || 1;
const multimasterEnabled: boolean = databaseAccount.properties.enableMultipleWriteLocations;
const hourlyPrice: number = PricingUtils.computeRUUsagePriceHourly({
const hourlyPrice: number = computeRUUsagePriceHourly({
serverId,
requestUnits,
numberOfRegions,
@@ -30,20 +39,22 @@ export const CostEstimateText: FunctionComponent<CostEstimateTextProps> = ({
});
const dailyPrice: number = hourlyPrice * 24;
const monthlyPrice: number = hourlyPrice * SharedConstants.hoursInAMonth;
const currency: string = PricingUtils.getPriceCurrency(serverId);
const currencySign: string = PricingUtils.getCurrencySign(serverId);
const multiplier = PricingUtils.getMultimasterMultiplier(numberOfRegions, multimasterEnabled);
const currency: string = getPriceCurrency(serverId);
const currencySign: string = getCurrencySign(serverId);
const multiplier = getMultimasterMultiplier(numberOfRegions, multimasterEnabled);
const pricePerRu = isAutoscale
? PricingUtils.getAutoscalePricePerRu(serverId, multiplier) * multiplier
: PricingUtils.getPricePerRu(serverId) * multiplier;
? getAutoscalePricePerRu(serverId, multiplier) * multiplier
: getPricePerRu(serverId) * multiplier;
const iconWithEstimatedCostDisclaimer: JSX.Element = <Tooltip>PricingUtils.estimatedCostDisclaimer</Tooltip>;
if (isAutoscale) {
return (
<Text variant="small">
Estimated monthly cost ({currency}):{" "}
Estimated monthly cost ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
<b>
{currencySign + PricingUtils.calculateEstimateNumber(monthlyPrice / 10)} -{" "}
{currencySign + PricingUtils.calculateEstimateNumber(monthlyPrice)}{" "}
{currencySign + calculateEstimateNumber(monthlyPrice / 10)} -{" "}
{currencySign + calculateEstimateNumber(monthlyPrice)}{" "}
</b>
({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits / 10} - {requestUnits}{" "}
RU/s, {currencySign + pricePerRu}/RU)
@@ -53,16 +64,14 @@ export const CostEstimateText: FunctionComponent<CostEstimateTextProps> = ({
return (
<Text variant="small">
Cost ({currency}):{" "}
Estimated cost ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
<b>
{currencySign + PricingUtils.calculateEstimateNumber(hourlyPrice)} hourly /{" "}
{currencySign + PricingUtils.calculateEstimateNumber(dailyPrice)} daily /{" "}
{currencySign + PricingUtils.calculateEstimateNumber(monthlyPrice)} monthly{" "}
{currencySign + calculateEstimateNumber(hourlyPrice)} hourly /{" "}
{currencySign + calculateEstimateNumber(dailyPrice)} daily /{" "}
{currencySign + calculateEstimateNumber(monthlyPrice)} monthly{" "}
</b>
({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits}RU/s,{" "}
{currencySign + pricePerRu}/RU)
<br />
<em>{PricingUtils.estimatedCostDisclaimer}</em>
</Text>
);
};

0
src/Explorer/Controls/ThroughputInput/CostEstimateText/__snapshots__/index.test.tsx.snap → src/Explorer/Controls/ThroughputInput/CostEstimateText/__snapshots__/CostEstimateText.test.tsx.snap
View File

4
src/Explorer/Controls/ThroughputInput/styles.less → src/Explorer/Controls/ThroughputInput/ThroughputInput.less
View File

@@ -11,6 +11,6 @@
padding: 0 @LargeSpace 0 @SmallSpace;
}
.throughputInputSpacing {
margin-bottom: @SmallSpace;
.throughputInputSpacing > :not(:last-child) {
margin-bottom: @DefaultSpace;
}

3
src/Explorer/Controls/ThroughputInput/ThroughputInput.test.tsx
View File

@@ -4,6 +4,7 @@ import { ThroughputInput } from "./ThroughputInput";
const props = {
isDatabase: false,
showFreeTierExceedThroughputTooltip: true,
isSharded: false,
setThroughputValue: () => jest.fn(),
setIsAutoscale: () => jest.fn(),
onCostAcknowledgeChange: () => jest.fn(),
@@ -22,7 +23,7 @@ describe("ThroughputInput Pane", () => {
it("test Autoscale Mode select", () => {
wrapper.setProps({ isAutoscaleSelected: true });
expect(wrapper.find('[data-testid="ruDescription"]').at(0).text()).toContain(
"Provision maximum RU/s required by this resource. Estimate your required RU/s with"
"Estimate your required RU/s with capacity calculator."
);
expect(wrapper.find('[data-testid="maxRUDescription"]').at(0).text()).toContain("Max RU/s");
});

49
src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
View File

@@ -14,13 +14,15 @@ import * as Constants from "../../../Common/Constants";
import { Tooltip } from "../../../Common/Tooltip/Tooltip";
import * as SharedConstants from "../../../Shared/Constants";
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";
import "./styles.less";
import { CostEstimateText } from "./CostEstimateText/CostEstimateText";
import "./ThroughputInput.less";
export interface ThroughputInputProps {
isDatabase: boolean;
isSharded: boolean;
showFreeTierExceedThroughputTooltip: boolean;
setThroughputValue: (throughput: number) => void;
setIsAutoscale: (isAutoscale: boolean) => void;
@@ -34,32 +36,40 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
showFreeTierExceedThroughputTooltip,
setThroughputValue,
setIsAutoscale,
isSharded,
isAutoscaleSelected = true,
throughput = AutoPilotUtils.minAutoPilotThroughput,
onCostAcknowledgeChange,
}: ThroughputInputProps) => {
const [isCostAcknowledged, setIsCostAcknowledged] = useState<boolean>(false);
const [throughputError, setThroughputError] = useState<string>("");
const getThroughputLabelText = (): string => {
let throughputHeaderText: string;
if (isAutoscaleSelected) {
return AutoPilotUtils.getAutoPilotHeaderText();
throughputHeaderText = AutoPilotUtils.getAutoPilotHeaderText().toLocaleLowerCase();
} else {
const minRU: string = SharedConstants.CollectionCreation.DefaultCollectionRUs400.toLocaleString();
const maxRU: string = userContext.isTryCosmosDBSubscription
? Constants.TryCosmosExperience.maxRU.toLocaleString()
: "unlimited";
throughputHeaderText = `throughput (${minRU} - ${maxRU} RU/s)`;
}
const minRU: string = SharedConstants.CollectionCreation.DefaultCollectionRUs400.toLocaleString();
const maxRU: string = userContext.isTryCosmosDBSubscription
? Constants.TryCosmosExperience.maxRU.toLocaleString()
: "unlimited";
return isAutoscaleSelected ? AutoPilotUtils.getAutoPilotHeaderText() : `Throughput (${minRU} - ${maxRU} RU/s)`;
return `${isDatabase ? "Database" : getCollectionName()} ${throughputHeaderText}`;
};
const onThroughputValueChange = (newInput: string): void => {
const newThroughput = parseInt(newInput);
setThroughputValue(newThroughput);
setIsAutoscale(isAutoscaleSelected);
if (!isSharded && newThroughput > 10000) {
setThroughputError("Unsharded collections support up to 10,000 RUs");
} else {
setThroughputError("");
}
};
const getAutoScaleTooltip = (): string => {
return `After the first ${AutoPilotUtils.getStorageBasedOnUserInput(throughput)} GB of data stored, the max
RU/s will be automatically upgraded based on the new storage value.`;
const collectionName = getCollectionName().toLocaleLowerCase();
return `Set the max RU/s to the highest RU/s you want your ${collectionName} to scale to. The ${collectionName} will scale between 10% of max RU/s to the max RU/s based on usage.`;
};
const getCostAcknowledgeText = (): string => {
@@ -98,13 +108,13 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
<div className="throughputInputContainer throughputInputSpacing">
<Stack horizontal>
<span className="mandatoryStar">*&nbsp;</span>
<Text variant="small" style={{ lineHeight: "20px" }}>
<Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
{getThroughputLabelText()}
</Text>
<Tooltip>{PricingUtils.getRuToolTipText()}</Tooltip>
</Stack>
<Stack>
<Stack horizontal verticalAlign="center">
<ChoiceGroup
selectedKey={"" + isAutoscaleSelected}
options={optionList}
@@ -116,7 +126,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
{isAutoscaleSelected && (
<Stack className="throughputInputSpacing">
<Text variant="small" data-testid="ruDescription">
Provision maximum RU/s required by this resource. Estimate your required RU/s with&nbsp;
Estimate your required RU/s with&nbsp;
<Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" data-testid="ruDescription">
capacity calculator
</Link>
@@ -124,8 +134,8 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
</Text>
<Stack horizontal>
<Text variant="small" style={{ lineHeight: "20px" }} data-testid="maxRUDescription">
Max RU/s
<Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }} data-testid="maxRUDescription">
{isDatabase ? "Database" : getCollectionName()} Max RU/s
</Text>
<Tooltip>{getAutoScaleTooltip()}</Tooltip>
</Stack>
@@ -142,10 +152,12 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
value={throughput.toString()}
aria-label="Max request units per second"
required={true}
errorMessage={throughputError}
/>
<Text variant="small">
Your {isDatabase ? "database" : "container"} throughput will automatically scale from{" "}
Your {isDatabase ? "database" : getCollectionName().toLocaleLowerCase()} throughput will automatically scale
from{" "}
<b>
{AutoPilotUtils.getMinRUsBasedOnUserInput(throughput)} RU/s (10% of max RU/s) - {throughput} RU/s
</b>{" "}
@@ -186,6 +198,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
value={throughput.toString()}
aria-label="Max request units per second"
required={true}
errorMessage={throughputError}
/>
</TooltipHost>
</Stack>

35
src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
View File

@@ -3,6 +3,7 @@
exports[`ThroughputInput Pane should render Default properly 1`] = `
<ThroughputInput
isDatabase={false}
isSharded={false}
onCostAcknowledgeChange={[Function]}
setIsAutoscale={[Function]}
setThroughputValue={[Function]}
@@ -27,6 +28,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
key=".0:$.1"
style={
Object {
"fontWeight": 600,
"lineHeight": "20px",
}
}
@@ -36,11 +38,12 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
className="css-41"
style={
Object {
"fontWeight": 600,
"lineHeight": "20px",
}
}
>
Throughput (autoscale)
Container throughput (autoscale)
</span>
</Text>
<Tooltip
@@ -1423,7 +1426,10 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
</Tooltip>
</div>
</Stack>
<Stack>
<Stack
horizontal={true}
verticalAlign="center"
>
<div
className="ms-Stack css-51"
>
@@ -2426,7 +2432,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
className="throughputInputSpacing"
>
<div
className="ms-Stack throughputInputSpacing css-51"
className="ms-Stack throughputInputSpacing css-63"
>
<Text
data-testid="ruDescription"
@@ -2437,7 +2443,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
className="css-41"
data-testid="ruDescription"
>
Provision maximum RU/s required by this resource. Estimate your required RU/s with 
Estimate your required RU/s with 
<StyledLinkBase
data-testid="ruDescription"
href="https://cosmos.azure.com/capacitycalculator/"
@@ -2723,7 +2729,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
}
>
<a
className="ms-Link root-63"
className="ms-Link root-64"
data-testid="ruDescription"
href="https://cosmos.azure.com/capacitycalculator/"
onClick={[Function]}
@@ -2748,6 +2754,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
key=".0:$.0"
style={
Object {
"fontWeight": 600,
"lineHeight": "20px",
}
}
@@ -2758,11 +2765,13 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
data-testid="maxRUDescription"
style={
Object {
"fontWeight": 600,
"lineHeight": "20px",
}
}
>
Max RU/s
Container
Max RU/s
</span>
</Text>
<Tooltip
@@ -2775,8 +2784,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"gapSpace": 0,
}
}
content="After the first 40 GB of data stored, the max
RU/s will be automatically upgraded based on the new storage value."
content="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
id="tooltip8"
styles={
Object {
@@ -2792,8 +2800,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"gapSpace": 0,
}
}
content="After the first 40 GB of data stored, the max
RU/s will be automatically upgraded based on the new storage value."
content="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
delay={1}
id="tooltip8"
styles={[Function]}
@@ -4149,6 +4156,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
</Stack>
<StyledTextFieldBase
aria-label="Max request units per second"
errorMessage=""
key=".0:$.2"
min={4000}
onChange={[Function]}
@@ -4172,6 +4180,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
aria-label="Max request units per second"
canRevealPassword={false}
deferredValidationTime={200}
errorMessage=""
min={4000}
onChange={[Function]}
required={true}
@@ -4456,17 +4465,17 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
value="4000"
>
<div
className="ms-TextField is-required root-65"
className="ms-TextField is-required root-66"
>
<div
className="ms-TextField-wrapper"
>
<div
className="ms-TextField-fieldGroup fieldGroup-66"
className="ms-TextField-fieldGroup fieldGroup-67"
>
<input
aria-invalid={false}
className="ms-TextField-field field-67"
className="ms-TextField-field field-68"
id="TextField14"
min={4000}
onBlur={[Function]}