Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(manila): add minimum is critical feature to the UI #1448

Merged
merged 4 commits into from
Nov 5, 2024
Merged

feat(manila): add minimum is critical feature to the UI #1448

Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dbd8201
Add minimum is critical feature to the UI
VoigtS Oct 30, 2024
7bfcc4f
Add checkbox to define critical usage level
VoigtS Oct 30, 2024
8c50b98
Rephrase checkbox label
VoigtS Nov 4, 2024
1ee5e58
Merge branch 'master' into castellum_minimum_free
andypf Nov 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 28 additions & 61 deletions ...filesystem_storage/app/javascript/widgets/app/components/castellum/configuration/edit.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,16 @@ const FormBody = ({ close, errors }) => {
const values = useContext(Form.Context).formValues

let validationError = ""
if (
values.low_enabled == "false" &&
values.high_enabled == "false" &&
values.critical_enabled == "false"
) {
validationError =
"To use autoscaling, at least one threshold must be enabled."
if (values.low_enabled == "false" && values.high_enabled == "false" && values.critical_enabled == "false") {
validationError = "To use autoscaling, at least one threshold must be enabled."
}

return (
<>
<Modal.Body>
<Form.Errors errors={errors} />

<Form.ElementHorizontal
label="When usage is low:"
name="low_enabled"
labelWidth={5}
>
<Form.ElementHorizontal label="When usage is low:" name="low_enabled" labelWidth={5}>
<Form.Input elementType="select">
<option value="false">Do nothing</option>
<option value="true">Auto-shrink share</option>
Expand All @@ -39,33 +30,18 @@ const FormBody = ({ close, errors }) => {
labelWidth={5}
labelClass="control-label secondary-label"
>
<Form.Input
elementType="input"
type="number"
min="5"
disabled={values.low_enabled == "false"}
/>
<Form.Input elementType="input" type="number" min="5" disabled={values.low_enabled == "false"} />
</Form.ElementHorizontal>
<Form.ElementHorizontal
label="Usage is low below (%):"
name="low_usage"
labelWidth={5}
labelClass="control-label secondary-label"
>
<Form.Input
elementType="input"
type="number"
min="0"
max="100"
disabled={values.low_enabled == "false"}
/>
<Form.Input elementType="input" type="number" min="0" max="100" disabled={values.low_enabled == "false"} />
</Form.ElementHorizontal>

<Form.ElementHorizontal
label="When usage is high:"
name="high_enabled"
labelWidth={5}
>
<Form.ElementHorizontal label="When usage is high:" name="high_enabled" labelWidth={5}>
<Form.Input elementType="select">
<option value="false">Do nothing</option>
<option value="true">Auto-extend share</option>
Expand All @@ -77,33 +53,18 @@ const FormBody = ({ close, errors }) => {
labelWidth={5}
labelClass="control-label secondary-label"
>
<Form.Input
elementType="input"
type="number"
min="5"
disabled={values.high_enabled == "false"}
/>
<Form.Input elementType="input" type="number" min="5" disabled={values.high_enabled == "false"} />
</Form.ElementHorizontal>
<Form.ElementHorizontal
label="Usage is high above (%):"
name="high_usage"
labelWidth={5}
labelClass="control-label secondary-label"
>
<Form.Input
elementType="input"
type="number"
min="0"
max="100"
disabled={values.high_enabled == "false"}
/>
<Form.Input elementType="input" type="number" min="0" max="100" disabled={values.high_enabled == "false"} />
</Form.ElementHorizontal>

<Form.ElementHorizontal
label="When usage is critical:"
name="critical_enabled"
labelWidth={5}
>
<Form.ElementHorizontal label="When usage is critical:" name="critical_enabled" labelWidth={5}>
<Form.Input elementType="select">
<option value="false">Do nothing</option>
<option value="true">Auto-extend share immediately</option>
Expand All @@ -124,11 +85,7 @@ const FormBody = ({ close, errors }) => {
/>
</Form.ElementHorizontal>

<Form.ElementHorizontal
label="Stepping strategy:"
name="size_step_single"
labelWidth={5}
>
<Form.ElementHorizontal label="Stepping strategy:" name="size_step_single" labelWidth={5}>
<Form.Input elementType="select">
<option value="false">Percentage-step resizing</option>
<option value="true">Single-step resizing</option>
Expand Down Expand Up @@ -162,8 +119,7 @@ const FormBody = ({ close, errors }) => {
/>
<p className="help-block" style={{ marginBottom: 0 }}>
<i className="fa fa-info-circle" />
As an exception, multiple steps can be taken at once to resolve a
critical usage level.
As an exception, multiple steps can be taken at once to resolve a critical usage level.
</p>
</Form.ElementHorizontal>

Expand All @@ -190,6 +146,17 @@ const FormBody = ({ close, errors }) => {
labelClass="control-label secondary-label"
>
<Form.Input elementType="input" type="number" min="0" />
<div className="checkbox">
<label>
<Form.Input
elementType="input"
type="checkbox"
name="minimum_free_is_critical"
disabled={values.free_minimum == ""}
/>
<span>Treat crossings of this constraint as a critical usage level</span>
andypf marked this conversation as resolved.
Show resolved Hide resolved
</label>
</div>
</Form.ElementHorizontal>
</Modal.Body>
<Modal.Footer>
Expand Down Expand Up @@ -247,9 +214,7 @@ export default class CastellumConfigurationEditModal extends React.Component {

validate(values) {
return (
(values.low_enabled == "true" ||
values.high_enabled == "true" ||
values.critical_enabled == "true") &&
(values.low_enabled == "true" || values.high_enabled == "true" || values.critical_enabled == "true") &&
(values.size_step_single == "true" || values.size_step_percent != "")
)
}
Expand Down Expand Up @@ -291,6 +256,10 @@ export default class CastellumConfigurationEditModal extends React.Component {
config.size_constraints = config.size_constraints || {}
config.size_constraints.minimum_free = parseInt(values.free_minimum, 10)
}
if (values.free_minimum != "" && values.minimum_free_is_critical) {
config.size_constraints = config.size_constraints || {}
config.size_constraints.minimum_free_is_critical = true
}

this.props
.configureAutoscaling(this.props.projectID, config)
Expand All @@ -317,9 +286,7 @@ export default class CastellumConfigurationEditModal extends React.Component {
className="shared_filesystem_storage"
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-lg">
Configure Autoscaling
</Modal.Title>
<Modal.Title id="contained-modal-title-lg">Configure Autoscaling</Modal.Title>
</Modal.Header>

<Form
Expand Down
Loading