Skip to content

[web] [Storage] Allow setting/editing volume sizes#590

Merged
dgdavid merged 16 commits intomasterfrom
volume-sizes
Jun 9, 2023
Merged

[web] [Storage] Allow setting/editing volume sizes#590
dgdavid merged 16 commits intomasterfrom
volume-sizes

Conversation

@joseivanlopez
Copy link
Copy Markdown
Contributor

@joseivanlopez joseivanlopez commented May 25, 2023

Problem

For now, users can only add volumes/filesystems that come from the product definition, but nothing else. They cannot even adjust the sizes of these predefined volumes.

Solution

Allow users to modify the volume size by letting them choose among "Auto" (only when possible), "Manual", and "Range".

This approach satisfies the requirements from the Trello card linked above:

No matter if the volume supports auto-calculated sizes or not, or whether it was originated from the product definition or created from scratch, it should be possible to set the min and the max to fixed values (including none/unlimited for max).

If the volume supports auto-calculated sizes, it should also be possible to set the sizes to "auto".

Testing

  • Added new unit tests
  • Tested manually

Notes

This PR also drops the filesize dependency in favor of xbytes because the latter allows parsing human-readable sizes into bytes too, although the former has more development activity.

We can change it again at any time if a better alternative is found. Maybe we could write our own DiskSize in JavaScript or TypeScript. Let's see.

Screenshots

Size options

Auto Manual Range
Volume form with auto size selected Volume form with manual size selected Volume form with range size selected

Size validations

Manual without size Range without min size Range with max size smaller than min size
Volume form complaining about no manual size specified Volume form complaining about no min size given for a range Volume form complaining about max size smaller than min size in a range

@dgdavid dgdavid force-pushed the volume-sizes branch 4 times, most recently from b9a233c to d6367ea Compare June 7, 2023 15:43
@dgdavid dgdavid changed the title Edit volume sizes [web] Allow setting/editing volume sizes Jun 7, 2023
@dgdavid dgdavid changed the title [web] Allow setting/editing volume sizes [web] [Storage] Allow setting/editing volume sizes Jun 7, 2023
@dgdavid dgdavid marked this pull request as ready for review June 7, 2023 15:48
@dgdavid dgdavid requested a review from imobachgs June 7, 2023 15:48
@dgdavid

This comment was marked as outdated.

@coveralls

This comment was marked as resolved.

@dgdavid dgdavid force-pushed the volume-sizes branch 2 times, most recently from 89778f6 to ce104a2 Compare June 8, 2023 09:50
*
* @returns {ReactComponent}
*/
export default function NumericTextInput({ value = "", onChange = noop, ...textInputProps }) {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could go further and do this helper more generic by receiving the pattern via prop. But let's wait until we really need it. Do you agree?

BTW, we are not using directly the HTML pattern attribute because it's not intended for limiting the input from the user but for performing validations before send the form. But since we're preventing the form submission, it is not as direct as the proposed solution. To learn more, read https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process

Of course, we can evaluate the use of pattern attribute in the future.

dgdavid and others added 10 commits June 9, 2023 09:16
Until now, the form for adding an additional volume was an internal
component inside agama/storage/ProposalVolumes.jsx. But this commit
extracted it to its own file since it has grown considerably after

  - Add the ability to specify the volume size by choosing among two or
    three options, depending on the volume itself: "Auto", "Manual", and
    "Range".

  - Support not only adding but also editing existing volumes, which
    allows resizing.

This commit also drops the `filesize`[1] dependency in favor of
`xbytes`[2] because the latter allows parsing human readable sizes into
bytes too, although the former has more development activity.

[1] filesize - https://github.com/avoidwork/filesize.js
[2] xbytes - https://github.com/miraclx/xbytes

Co-Authored-By: José Iván López González <jlopez@suse.com>
By renaming it from "Size limits" to "Size" and changing how the desired
size is rendered:

  - "X SizeUnit" when the volume is configured for having an exact size
    (min === max)

  - "At least X SizeUnit" when only the desired min size was specified

  - "X SizeUnit - Y SizeUnit" when both the min and max size limits have
    been set.

Additionally, it removes the word "Unlimited", which we found odd when
talking about size.

Co-Authored-By: José Iván López González <jlopez@suse.com>
For limiting entered values to not signed numbers and empty string.

This helps to avoid mistakes like entering "100O GiB" instead of "1000
GiB" withoug noticing it (the library parsing the human readable size
will ignore from 0 onwards, interpreting the size as 100 B).
Copy link
Copy Markdown
Contributor

@imobachgs imobachgs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In general, it looks good. Great job! Otherwise, I have a few comments.

dgdavid and others added 2 commits June 9, 2023 14:02
Because there were a hidden bug when initializating the form with a
missing size unit for either, minSize or maxSize.

Changes introduced in this commit fixes the problem.
Co-authored-by: Imobach González Sosa <igonzalezsosa@suse.com>
It was using a NumericTextInput by mistake.
@imobachgs imobachgs self-requested a review June 9, 2023 13:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants