-
Notifications
You must be signed in to change notification settings - Fork 367
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
upcoming: [M3 7738] - Update Placement Group Create & Edit Drawers (#…
…10205) * Change "rename" nomenclature * Initial commit - refactor * Post rebase fix * Affinity Enforcement * test * pg/account limit * update tests * Handle region PG limit * Handle region PG limit test * Better edit form * cleanup * PlacementGroupsAffinityTypeSelect * PlacementGroupsAffinityEnforcementRadioGroup * cleanup * cleanup * Added changeset: Update Placement Group Create & Edit Drawers * Make sure id is required * Added changeset: Allow the disabling of the TypeToConfirm input * Revert "Make sure id is required" This reverts commit 82d2fb0. * Feedback
- Loading branch information
1 parent
fbf6e39
commit e8b3716
Showing
25 changed files
with
763 additions
and
538 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 5 additions & 0 deletions
5
packages/manager/.changeset/pr-10205-changed-1709570324014.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@linode/manager": Changed | ||
| --- | ||
|
|
||
| Allow the disabling of the TypeToConfirm input ([#10205](https://github.com/linode/manager/pull/10205)) |
5 changes: 5 additions & 0 deletions
5
packages/manager/.changeset/pr-10205-upcoming-features-1709303410944.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@linode/manager": Upcoming Features | ||
| --- | ||
|
|
||
| Update Placement Group Create & Edit Drawers ([#10205](https://github.com/linode/manager/pull/10205)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
65 changes: 65 additions & 0 deletions
65
...ges/manager/src/features/PlacementGroups/PlacementGroupsAffinityEnforcementRadioGroup.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| import { Box } from 'src/components/Box'; | ||
| import { FormControlLabel } from 'src/components/FormControlLabel'; | ||
| import { FormLabel } from 'src/components/FormLabel'; | ||
| import { Notice } from 'src/components/Notice/Notice'; | ||
| import { Radio } from 'src/components/Radio/Radio'; | ||
| import { RadioGroup } from 'src/components/RadioGroup'; | ||
| import { Typography } from 'src/components/Typography'; | ||
|
|
||
| import type { FormikHelpers } from 'formik'; | ||
|
|
||
| interface Props { | ||
| handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void; | ||
| setFieldValue: FormikHelpers<any>['setFieldValue']; | ||
| value: boolean; | ||
| } | ||
|
|
||
| export const PlacementGroupsAffinityEnforcementRadioGroup = (props: Props) => { | ||
| const { handleChange, setFieldValue, value } = props; | ||
| return ( | ||
| <Box sx={{ pt: 2 }}> | ||
| <Notice | ||
| text="Once you create a placement group, you cannot change its Affinity Enforcement setting." | ||
| variant="warning" | ||
| /> | ||
| <FormLabel htmlFor="affinity-enforcement-radio-group"> | ||
| Affinity Enforcement | ||
| </FormLabel> | ||
| <RadioGroup | ||
| onChange={(event) => { | ||
| handleChange(event); | ||
| setFieldValue('is_strict', event.target.value === 'true'); | ||
| }} | ||
| id="affinity-enforcement-radio-group" | ||
| name="is_strict" | ||
| value={value} | ||
| > | ||
| <FormControlLabel | ||
| label={ | ||
| <Typography> | ||
| <strong>Strict.</strong> You cannot assign a Linode to your | ||
| placement group if it will violate the policy of your selected | ||
| Affinity Type (best practice). | ||
| </Typography> | ||
| } | ||
| control={<Radio />} | ||
| value={true} | ||
| /> | ||
| <FormControlLabel | ||
| label={ | ||
| <Typography> | ||
| <strong>Flexible.</strong> You can assign a Linode to your | ||
| placement group, even if it violates the policy of your selected | ||
| Affinity Type. | ||
| </Typography> | ||
| } | ||
| control={<Radio />} | ||
| sx={{ mt: 2 }} | ||
| value={false} | ||
| /> | ||
| </RadioGroup> | ||
| </Box> | ||
| ); | ||
| }; |
91 changes: 91 additions & 0 deletions
91
packages/manager/src/features/PlacementGroups/PlacementGroupsAffinityTypeSelect.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; | ||
| import { Link } from 'src/components/Link'; | ||
| import { ListItem } from 'src/components/ListItem'; | ||
| import { Tooltip } from 'src/components/Tooltip'; | ||
| import { Typography } from 'src/components/Typography'; | ||
|
|
||
| import { affinityTypeOptions } from './utils'; | ||
|
|
||
| import type { FormikHelpers } from 'formik'; | ||
|
|
||
| interface Props { | ||
| error: string | undefined; | ||
| setFieldValue: FormikHelpers<any>['setFieldValue']; | ||
| } | ||
|
|
||
| export const PlacementGroupsAffinityTypeSelect = (props: Props) => { | ||
| const { error, setFieldValue } = props; | ||
| return ( | ||
| <Autocomplete | ||
| defaultValue={affinityTypeOptions.find( | ||
| (option) => option.value === 'anti_affinity' | ||
| )} | ||
| onChange={(_, value) => { | ||
| setFieldValue('affinity_type', value?.value ?? ''); | ||
| }} | ||
| renderOption={(props, option) => { | ||
| const isDisabledMenuItem = option.value === 'affinity'; | ||
|
|
||
| return ( | ||
| <Tooltip | ||
| title={ | ||
| isDisabledMenuItem ? ( | ||
| <Typography> | ||
| Only supporting Anti-affinity host placement groups for Beta.{' '} | ||
| <Link to="TODO VM_Placement: update link">Learn more</Link>. | ||
| </Typography> | ||
| ) : ( | ||
| '' | ||
| ) | ||
| } | ||
| disableFocusListener={!isDisabledMenuItem} | ||
| disableHoverListener={!isDisabledMenuItem} | ||
| disableTouchListener={!isDisabledMenuItem} | ||
| enterDelay={200} | ||
| enterNextDelay={200} | ||
| enterTouchDelay={200} | ||
| key={option.value} | ||
| > | ||
| <ListItem | ||
| {...props} | ||
| className={ | ||
| isDisabledMenuItem | ||
| ? `${props.className} Mui-disabled` | ||
| : props.className | ||
| } | ||
| onClick={(e) => | ||
| isDisabledMenuItem | ||
| ? e.preventDefault() | ||
| : props.onClick | ||
| ? props.onClick(e) | ||
| : null | ||
| } | ||
| component="li" | ||
| > | ||
| {option.label} | ||
| </ListItem> | ||
| </Tooltip> | ||
| ); | ||
| }} | ||
| textFieldProps={{ | ||
| tooltipText: ( | ||
| <Typography> | ||
| Linodes in a placement group that use ‘Affinity’ always exist on the | ||
| same host. This can help with performance. Linodes in a placement | ||
| group that use ‘Anti-affinity: Host’ are never on the same host. Use | ||
| this to support a high-availability model. | ||
| <br /> | ||
| <Link to="TODO VM_Placement: update link">Learn more.</Link> | ||
| </Typography> | ||
| ), | ||
| }} | ||
| disableClearable={true} | ||
| errorText={error} | ||
| label="Affinity Type" | ||
| options={affinityTypeOptions} | ||
| placeholder="Select an Affinity Type" | ||
| /> | ||
| ); | ||
| }; |
Oops, something went wrong.