random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-10-13 15:28:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

Min/Max UX changes for Scale & Settings tab (#2192)

Browse Source 
* master pull

* changed min max text boxes for autoscale

* test update

* Update .npmrc

* Update settings.json

* Prettier run
This commit is contained in:
JustinKol 2025-07-28 13:24:19 -04:00 committed by GitHub
parent 5ea78f9abf
commit e3815734db
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 215 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.npmrc
View File

@ -1,4 +1,4 @@
save-exact=true save-exact=true
# Ignore peer dependency conflicts # Ignore peer dependency conflicts
force=true # TODO: Remove this when we update to React 17 or higher! force=true # TODO: Remove this when we update to React 17 or higher!

95
src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
View File

@ -559,26 +559,81 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
private getThroughputTextField = (): JSX.Element => ( private getThroughputTextField = (): JSX.Element => (
<> <>
{this.props.isAutoPilotSelected ? ( {this.props.isAutoPilotSelected ? (
<TextField <Stack horizontal verticalAlign="end" tokens={{ childrenGap: 8 }}>
label="Maximum RU/s required by this resource" {/* Column 1: Minimum RU/s */}
required <Stack tokens={{ childrenGap: 4 }}>
type="number" <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
id="autopilotInput" <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
key="auto pilot throughput input" Minimum RU/s
styles={getTextFieldStyles(this.props.maxAutoPilotThroughput, this.props.maxAutoPilotThroughputBaseline)} </Text>
disabled={this.overrideWithProvisionedThroughputSettings()} <FontIcon iconName="Info" style={{ fontSize: 12, color: "#666" }} />
step={AutoPilotUtils.autoPilotIncrementStep} </Stack>
value={this.overrideWithProvisionedThroughputSettings() ? "" : this.props.maxAutoPilotThroughput?.toString()} <Text
onChange={this.onAutoPilotThroughputChange} style={{
min={autoPilotThroughput1K} fontFamily: "Segoe UI",
onGetErrorMessage={(value: string) => { width: 70,
const sanitizedValue = getSanitizedInputValue(value); height: 28,
return sanitizedValue % 1000 border: "none",
? "Throughput value must be in increments of 1000" fontSize: 14,
: this.props.throughputError; backgroundColor: "transparent",
}} fontWeight: 400,
validateOnLoad={false} display: "flex",
/> alignItems: "center",
justifyContent: "center",
boxSizing: "border-box",
}}
>
{AutoPilotUtils.getMinRUsBasedOnUserInput(this.props.maxAutoPilotThroughput)}
</Text>
</Stack>
{/* Column 2: "x 10 =" Text */}
<Text
style={{
fontFamily: "Segoe UI",
fontSize: 12,
fontWeight: 400,
paddingBottom: 6,
}}
>
x 10 =
</Text>
{/* Column 3: Maximum RU/s */}
<Stack tokens={{ childrenGap: 4 }}>
<Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
<Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
Maximum RU/s
</Text>
<FontIcon iconName="Info" style={{ fontSize: 12, color: "#666" }} />
</Stack>
<TextField
required
type="number"
id="autopilotInput"
key="auto pilot throughput input"
styles={{
...getTextFieldStyles(this.props.maxAutoPilotThroughput, this.props.maxAutoPilotThroughputBaseline),
fieldGroup: { width: 100, height: 28 },
field: { fontSize: 14, fontWeight: 400 },
}}
disabled={this.overrideWithProvisionedThroughputSettings()}
step={AutoPilotUtils.autoPilotIncrementStep}
value={
this.overrideWithProvisionedThroughputSettings() ? "" : this.props.maxAutoPilotThroughput?.toString()
}
onChange={this.onAutoPilotThroughputChange}
min={autoPilotThroughput1K}
onGetErrorMessage={(value: string) => {
const sanitizedValue = getSanitizedInputValue(value);
return sanitizedValue % 1000
? "Throughput value must be in increments of 1000"
: this.props.throughputError;
}}
validateOnLoad={false}
/>
</Stack>
</Stack>
) : ( ) : (
<TextField <TextField
required required

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

@ -157,35 +157,148 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
} }
} }
> >
<StyledTextFieldBase <Stack
disabled={true} horizontal={true}
id="autopilotInput" tokens={
key="auto pilot throughput input"
label="Maximum RU/s required by this resource"
min={1000}
onChange={[Function]}
onGetErrorMessage={[Function]}
required={true}
step={1000}
styles={
{ {
"fieldGroup": { "childrenGap": 8,
"borderColor": "",
"height": 25,
"selectors": {
":disabled": {
"backgroundColor": undefined,
"borderColor": undefined,
},
},
"width": 300,
},
} }
} }
type="number" verticalAlign="end"
validateOnLoad={false} >
value="" <Stack
/> tokens={
{
"childrenGap": 4,
}
}
>
<Stack
horizontal={true}
tokens={
{
"childrenGap": 4,
}
}
verticalAlign="center"
>
<Text
style={
{
"fontWeight": 600,
"lineHeight": "20px",
}
}
variant="small"
>
Minimum RU/s
</Text>
<FontIcon
iconName="Info"
style={
{
"color": "#666",
"fontSize": 12,
}
}
/>
</Stack>
<Text
style={
{
"alignItems": "center",
"backgroundColor": "transparent",
"border": "none",
"boxSizing": "border-box",
"display": "flex",
"fontFamily": "Segoe UI",
"fontSize": 14,
"fontWeight": 400,
"height": 28,
"justifyContent": "center",
"width": 70,
}
}
>
400
</Text>
</Stack>
<Text
style={
{
"fontFamily": "Segoe UI",
"fontSize": 12,
"fontWeight": 400,
"paddingBottom": 6,
}
}
>
x 10 =
</Text>
<Stack
tokens={
{
"childrenGap": 4,
}
}
>
<Stack
horizontal={true}
tokens={
{
"childrenGap": 4,
}
}
verticalAlign="center"
>
<Text
style={
{
"fontWeight": 600,
"lineHeight": "20px",
}
}
variant="small"
>
Maximum RU/s
</Text>
<FontIcon
iconName="Info"
style={
{
"color": "#666",
"fontSize": 12,
}
}
/>
</Stack>
<StyledTextFieldBase
disabled={true}
id="autopilotInput"
key="auto pilot throughput input"
min={1000}
onChange={[Function]}
onGetErrorMessage={[Function]}
required={true}
step={1000}
styles={
{
"field": {
"fontSize": 14,
"fontWeight": 400,
},
"fieldGroup": {
"height": 28,
"width": 100,
},
}
}
type="number"
validateOnLoad={false}
value=""
/>
</Stack>
</Stack>
<Stack> <Stack>
<Stack> <Stack>
<Stack <Stack