-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add a plan details item to edit boot disk
Signed-off-by: yaacov <[email protected]>
- Loading branch information
Showing
6 changed files
with
217 additions
and
0 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
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
59 changes: 59 additions & 0 deletions
59
...modules/Plans/views/details/components/SettingsSection/components/RootDiskDetailsItem.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,59 @@ | ||
| import React from 'react'; | ||
| import { useModal } from 'src/modules/Providers/modals'; | ||
| import { DetailsItem } from 'src/modules/Providers/utils'; | ||
| import { useForkliftTranslation } from 'src/utils/i18n'; | ||
|
|
||
| import { Label } from '@patternfly/react-core'; | ||
|
|
||
| import { PlanDetailsItemProps } from '../../DetailsSection'; | ||
| import { EditRootDisk } from '../modals/EditRootDisk/EditRootDisk'; | ||
|
|
||
| export const RootDiskDetailsItem: React.FC<PlanDetailsItemProps> = ({ | ||
| resource, | ||
| canPatch, | ||
| helpContent, | ||
| }) => { | ||
| const { t } = useForkliftTranslation(); | ||
| const { showModal } = useModal(); | ||
|
|
||
| const defaultHelpContent = t( | ||
| `Specify the root disk for Openshift Virtualization configuration and guest agent setup.`, | ||
| ); | ||
|
|
||
| const rootDisk = resource?.spec?.vms?.[0].rootDisk || '1'; | ||
|
|
||
| const labelMap = { | ||
| '1': ( | ||
| <Label isCompact color={'blue'}> | ||
| {t('First disk')} | ||
| </Label> | ||
| ), | ||
| '2': ( | ||
| <Label isCompact color={'orange'}> | ||
| {t('Second disk')} | ||
| </Label> | ||
| ), | ||
| }; | ||
|
|
||
| const getDiskLabel = (diskNumber: string) => { | ||
| if (diskNumber in labelMap) { | ||
| return labelMap[diskNumber]; | ||
| } | ||
|
|
||
| return ( | ||
| <Label isCompact color={'red'}> | ||
| {t('Disk {{diskNumber}}', { diskNumber })} | ||
| </Label> | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <DetailsItem | ||
| title={t('Root disk')} | ||
| content={getDiskLabel(rootDisk)} | ||
| helpContent={helpContent ?? defaultHelpContent} | ||
| crumbs={['spec', 'vms', 'rootDisk']} | ||
| onEdit={canPatch && (() => showModal(<EditRootDisk resource={resource} />))} | ||
| /> | ||
| ); | ||
| }; |
1 change: 1 addition & 0 deletions
1
...ole-plugin/src/modules/Plans/views/details/components/SettingsSection/components/index.ts
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
138 changes: 138 additions & 0 deletions
138
...dules/Plans/views/details/components/SettingsSection/modals/EditRootDisk/EditRootDisk.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,138 @@ | ||
| import React from 'react'; | ||
| import { useToggle } from 'src/modules/Providers/hooks'; | ||
| import { | ||
| AlertMessageForModals, | ||
| EditModal, | ||
| EditModalProps, | ||
| ModalInputComponentType, | ||
| OnConfirmHookType, | ||
| } from 'src/modules/Providers/modals'; | ||
| import { useForkliftTranslation } from 'src/utils/i18n'; | ||
|
|
||
| import { Modify, PlanModel, V1beta1Plan } from '@kubev2v/types'; | ||
| import { K8sModel, k8sPatch } from '@openshift-console/dynamic-plugin-sdk'; | ||
| import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core'; | ||
|
|
||
| const onConfirm: OnConfirmHookType = async ({ resource, model, newValue }) => { | ||
| const plan = resource as V1beta1Plan; | ||
|
|
||
| const resourceValue = plan?.spec?.vms; | ||
| const op = resourceValue ? 'replace' : 'add'; | ||
| const newVMs = resourceValue.map((vm) => ({ | ||
| ...vm, | ||
| rootDisk: newValue || undefined, | ||
| })); | ||
|
|
||
| const obj = await k8sPatch({ | ||
| model: model, | ||
| resource: resource, | ||
| data: [ | ||
| { | ||
| op, | ||
| path: '/spec/vms', | ||
| value: newVMs || undefined, | ||
| }, | ||
| ], | ||
| }); | ||
|
|
||
| return obj; | ||
| }; | ||
|
|
||
| interface DropdownRendererProps { | ||
| value: string | number; | ||
| onChange: (V1beta1PlanSpecTransferNetwork) => void; | ||
| } | ||
|
|
||
| const RootDiskInputFactory: () => ModalInputComponentType = () => { | ||
| const DropdownRenderer: React.FC<DropdownRendererProps> = ({ value, onChange }) => { | ||
| const { t } = useForkliftTranslation(); | ||
| const [isOpen, onToggle] = useToggle(false); | ||
|
|
||
| const diskOptions = [ | ||
| { key: '', description: t('Boot from the first disk'), content: 'First disk' }, | ||
| { key: '2', description: t('Boot from the second disk'), content: 'Second disk' }, | ||
| { key: '3', description: t('Boot from the third disk'), content: 'Third disk' }, | ||
| { key: '4', description: t('Boot from the fourth disk'), content: 'Fourth disk' }, | ||
| { key: '5', description: t('Boot from the fifth disk'), content: 'Fifth disk' }, | ||
| ]; | ||
|
|
||
| const dropdownItems = diskOptions.map((option) => ( | ||
| <DropdownItem | ||
| key={option.key} | ||
| description={option.description} | ||
| onClick={() => onChange(option.key)} | ||
| > | ||
| {option.content} | ||
| </DropdownItem> | ||
| )); | ||
|
|
||
| return ( | ||
| <Dropdown | ||
| onSelect={onToggle} | ||
| toggle={ | ||
| <DropdownToggle id="select network" onToggle={onToggle}> | ||
| {diskOptions.find((o) => o.key === value)?.content || 'First disk'} | ||
| </DropdownToggle> | ||
| } | ||
| isOpen={isOpen} | ||
| dropdownItems={dropdownItems} | ||
| menuAppendTo="parent" | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| return DropdownRenderer; | ||
| }; | ||
|
|
||
| export const EditRootDisk: React.FC<EditRootDiskProps> = (props) => { | ||
| const { t } = useForkliftTranslation(); | ||
|
|
||
| const plan = props.resource; | ||
| const rootDisk = plan.spec.vms?.[0]?.rootDisk; | ||
| const allVMsHasMatchingRootDisk = plan.spec.vms.every((vm) => vm?.rootDisk === rootDisk); | ||
|
|
||
| return ( | ||
| <EditModal | ||
| {...props} | ||
| jsonPath={(obj: V1beta1Plan) => obj?.spec?.vms?.[0]?.rootDisk} | ||
| title={props?.title || t('Edit root disk')} | ||
| label={props?.label || t('Root disk')} | ||
| model={PlanModel} | ||
| onConfirmHook={onConfirm} | ||
| body={ | ||
| <> | ||
| {t( | ||
| `Specify the root disk for Openshift Virtualization configuration and guest agent setup.`, | ||
| )} | ||
| {!allVMsHasMatchingRootDisk && ( | ||
| <AlertMessageForModals | ||
| variant="warning" | ||
| title={'The plan rootDisk keys was manually configured'} | ||
| message={ | ||
| <> | ||
| <p> | ||
| Warning: not all virtual machines are configures using the same root disk | ||
| number, | ||
| </p> | ||
| <p>updating the root disk number will override the current configuration.</p> | ||
| </> | ||
| } | ||
| /> | ||
| )} | ||
| </> | ||
| } | ||
| InputComponent={RootDiskInputFactory()} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export type EditRootDiskProps = Modify< | ||
| EditModalProps, | ||
| { | ||
| resource: V1beta1Plan; | ||
| title?: string; | ||
| label?: string; | ||
| model?: K8sModel; | ||
| jsonPath?: string | string[]; | ||
| } | ||
| >; |
3 changes: 3 additions & 0 deletions
3
...n/src/modules/Plans/views/details/components/SettingsSection/modals/EditRootDisk/index.ts
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,3 @@ | ||
| // @index(['./*', /style/g], f => `export * from '${f.path}';`) | ||
| export * from './EditRootDisk'; | ||
| // @endindex |