Skip to content

Commit

Permalink
Merge pull request #1391 from jschuler/mtv-1690
Browse files Browse the repository at this point in the history 
MTV-1690: Plan wizard - Step 2 - Update mappings section
  • Loading branch information
@yaacov
yaacov authored Nov 24, 2024
2 parents 27ef3b4 + a226f56 commit 9169367
Show file tree
Hide file tree
Showing 5 changed files with 152 additions and 62 deletions.
9 changes: 8 additions & 1 deletion packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,6 +271,7 @@
"Network Map name re-generated": "Network Map name re-generated",
"Network map:": "Network map:",
"Network mapping is empty, make sure no mappings are required for this migration plan.": "Network mapping is empty, make sure no mappings are required for this migration plan.",
"Network mappings": "Network mappings",
"Network mappings have been re-generated": "Network mappings have been re-generated",
"Network mappings is empty": "Network mappings is empty",
"NetworkAttachmentDefinitions": "NetworkAttachmentDefinitions",
Expand Down Expand Up @@ -439,8 +440,11 @@
"Something is wrong, the data was not loaded due to an error, please try to reload the page.": "Something is wrong, the data was not loaded due to an error, please try to reload the page.",
"Something is wrong, the secret was not loaded, please try to reload the page.": "Something is wrong, the secret was not loaded, please try to reload the page.",
"source": "source",
"Source": "Source",
"Source network": "Source network",
"Source Only": "Source Only",
"Source provider": "Source provider",
"Source storage": "Source storage",
"Specify a list of passphrases for the Linux Unified Key Setup (LUKS)-encrypted devices for the VMs that you want to migrate.": "Specify a list of passphrases for the Linux Unified Key Setup (LUKS)-encrypted devices for the VMs that you want to migrate.",
"Specify the type of source provider. Allowed values are ova, ovirt, vsphere,\n openshift, and openstack. This label is needed to verify the credentials are correct when the remote system is accessible and, for RHV, to retrieve the Manager CA certificate when\n a third-party certificate is specified.": "Specify the type of source provider. Allowed values are ova, ovirt, vsphere,\n openshift, and openstack. This label is needed to verify the credentials are correct when the remote system is accessible and, for RHV, to retrieve the Manager CA certificate when\n a third-party certificate is specified.",
"Staging": "Staging",
Expand All @@ -450,12 +454,12 @@
"Status": "Status",
"Status details": "Status details",
"Storage": "Storage",
"Storage and network mappings": "Storage and network mappings",
"Storage classes": "Storage classes",
"Storage domains": "Storage domains",
"Storage Map name re-generated": "Storage Map name re-generated",
"Storage map:": "Storage map:",
"Storage mapping is empty, make sure no mappings are required for this migration plan.": "Storage mapping is empty, make sure no mappings are required for this migration plan.",
"Storage mappings": "Storage mappings",
"Storage mappings have been re-generated": "Storage mappings have been re-generated",
"Storage mappings is empty": "Storage mappings is empty",
"StorageMap details": "StorageMap details",
Expand All @@ -464,10 +468,13 @@
"StorageMaps for virtualization": "StorageMaps for virtualization",
"Storages used by the selected VMs": "Storages used by the selected VMs",
"Succeeded": "Succeeded",
"Target": "Target",
"Target and Source": "Target and Source",
"Target namespace": "Target namespace",
"Target namespace.": "Target namespace.",
"Target network": "Target network",
"Target provider": "Target provider",
"Target storage": "Target storage",
"Tasks": "Tasks",
"Template": "Template",
"Tenant": "Tenant",
Expand Down
33 changes: 32 additions & 1 deletion ...t-console-plugin/src/modules/Providers/views/migrate/ProvidersCreateVmMigration.style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,28 @@
max-width: 55rem;
}

.forklift-page-mapping-list--header {
max-width: 55rem;
font-weight: bold;
border: 0;
display: none;
}

/* stylelint-disable-next-line selector-disallowed-list */
.forklift-page-mapping-list--header .pf-v5-c-data-list__item {
border: 0;
}

.forklift-page-mapping-list--header-action-spacer {
width: 46px;
}

@media screen and (min-width: 768px) {
.forklift-page-mapping-list--header {
display: block !important;
}
}

.forklift-page-resource-link-in-description-item {
padding-left: 8px;
}
Expand All @@ -21,8 +43,17 @@

.forklift--create-vm-migration-plan--section-header {
margin-bottom: 0;
justify-content: start;
align-items: center;
}

.forklift--create-vm-migration-plan--form-actions {
margin-top: var(--pf-global--spacer--md);
}
}

@media screen and (min-width: 768px) {
/* stylelint-disable-next-line selector-disallowed-list */
.forklift-page-mapping-list .pf-v5-c-form__group-label {
display: none !important;
}
}
34 changes: 34 additions & 0 deletions ...klift-console-plugin/src/modules/Providers/views/migrate/components/MappingListHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import React from 'react';

import {
DataList,
DataListAction,
DataListCell,
DataListItem,
DataListItemCells,
DataListItemRow,
} from '@patternfly/react-core';

export const MappingListHeader = ({
sourceHeading,
destinationHeading,
}: {
sourceHeading: string;
destinationHeading: string;
}) => (
<DataList isCompact aria-label="" className="forklift-page-mapping-list--header">
<DataListItem aria-labelledby="">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="source">{sourceHeading}</DataListCell>,
<DataListCell key="destination">{destinationHeading}</DataListCell>,
]}
/>
<DataListAction aria-label="empty" id="empty" aria-labelledby="" aria-hidden>
<div className="forklift-page-mapping-list--header-action-spacer"></div>
</DataListAction>
</DataListItemRow>
</DataListItem>
</DataList>
);
79 changes: 45 additions & 34 deletions ...orklift-console-plugin/src/modules/Providers/views/migrate/components/MappingListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import {
DataListItem,
DataListItemCells,
DataListItemRow,
Form,
FormGroup,
} from '@patternfly/react-core';
import {
Select,
Expand Down Expand Up @@ -89,49 +91,58 @@ export const MappingListItem: FC<MappingListItemProps> = ({
<DataListItemCells
dataListCells={[
<DataListCell key="source">
<Select
variant={SelectVariant.single}
aria-label=""
onToggle={setToggleSrcOpen}
onSelect={onSelectSource}
selections={source}
isOpen={isSrcOpen}
isDisabled={isDisabled}
aria-labelledby=""
isGrouped
menuAppendTo={() => document.body}
>
<SelectGroup label={usedSourcesLabel} key="usedSources">
{toGroup(usedSources, noSourcesLabel, source)}
</SelectGroup>
<SelectGroup label={generalSourcesLabel} key="generalSources">
{toGroup(generalSources, noSourcesLabel, source)}
</SelectGroup>
</Select>
<Form>
<FormGroup label={t('Source')}>
<Select
variant={SelectVariant.single}
aria-label=""
onToggle={setToggleSrcOpen}
onSelect={onSelectSource}
selections={source}
isOpen={isSrcOpen}
isDisabled={isDisabled}
aria-labelledby=""
isGrouped
menuAppendTo={() => document.body}
>
<SelectGroup label={usedSourcesLabel} key="usedSources">
{toGroup(usedSources, noSourcesLabel, source)}
</SelectGroup>
<SelectGroup label={generalSourcesLabel} key="generalSources">
{toGroup(generalSources, noSourcesLabel, source)}
</SelectGroup>
</Select>
</FormGroup>
</Form>
</DataListCell>,
<DataListCell key="destination">
<Select
variant={SelectVariant.single}
aria-label=""
onToggle={setToggleTrgOpen}
onSelect={onSelectDestination}
selections={destination}
isOpen={isTrgOpen}
isDisabled={isDisabled}
aria-labelledby=""
menuAppendTo={() => document.body}
>
{destinations.map((label) => (
<SelectOption value={label} key={label} />
))}
</Select>
<Form>
<FormGroup label={t('Target')}>
<Select
variant={SelectVariant.single}
aria-label=""
onToggle={setToggleTrgOpen}
onSelect={onSelectDestination}
selections={destination}
isOpen={isTrgOpen}
isDisabled={isDisabled}
aria-labelledby=""
menuAppendTo={() => document.body}
>
{destinations.map((label) => (
<SelectOption value={label} key={label} />
))}
</Select>
</FormGroup>
</Form>
</DataListCell>,
]}
/>
<DataListAction
id={`mapping_list_item_${index}`}
aria-label={t('Actions')}
aria-labelledby=""
className="pf-v5-u-align-items-center"
>
<Button
onClick={onClick}
Expand Down
59 changes: 33 additions & 26 deletions ...orklift-console-plugin/src/modules/Providers/views/migrate/components/PlansCreateForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ import { CreateVmMigrationPageState, NetworkAlerts, StorageAlerts } from '../typ

import { EditableDescriptionItem } from './EditableDescriptionItem';
import { MappingList } from './MappingList';
import { MappingListHeader } from './MappingListHeader';
import { StateAlerts } from './StateAlerts';

const buildNetworkMessages = (
Expand Down Expand Up @@ -294,23 +295,23 @@ export const PlansCreateForm = ({
</Form>

<SectionHeading
text={t('Storage and network mappings')}
text={t('Network mappings')}
className="forklift--create-vm-migration-plan--section-header"
/>
>
<ResourceLink
groupVersionKind={NetworkMapModelGroupVersionKind}
namespace={netMap.metadata?.namespace}
name={netMap.metadata?.name}
className="forklift-page-resource-link-in-description-item"
linkTo={false}
/>
</SectionHeading>

<DescriptionListGroup>
<DescriptionListTerm>
<span className="forklift-page-editable-description-item">
{t('Network map:')}
<ResourceLink
groupVersionKind={NetworkMapModelGroupVersionKind}
namespace={netMap.metadata?.namespace}
name={netMap.metadata?.name}
className="forklift-page-resource-link-in-description-item"
linkTo={false}
/>
</span>
</DescriptionListTerm>
<MappingListHeader
sourceHeading={t('Source network')}
destinationHeading={t('Target network')}
/>
<DescriptionListDescription className="forklift-page-mapping-list">
<StateAlerts
variant={AlertVariant.danger}
Expand Down Expand Up @@ -344,19 +345,25 @@ export const PlansCreateForm = ({
/>
</DescriptionListDescription>
</DescriptionListGroup>

<SectionHeading
text={t('Storage mappings')}
className="forklift--create-vm-migration-plan--section-header"
>
<ResourceLink
groupVersionKind={StorageMapModelGroupVersionKind}
namespace={storageMap.metadata?.namespace}
name={storageMap.metadata?.name}
className="forklift-page-resource-link-in-description-item"
linkTo={false}
/>
</SectionHeading>

<DescriptionListGroup>
<DescriptionListTerm>
<span className="forklift-page-editable-description-item">
{t('Storage map:')}
<ResourceLink
groupVersionKind={StorageMapModelGroupVersionKind}
namespace={storageMap.metadata?.namespace}
name={storageMap.metadata?.name}
className="forklift-page-resource-link-in-description-item"
linkTo={false}
/>
</span>
</DescriptionListTerm>
<MappingListHeader
sourceHeading={t('Source storage')}
destinationHeading={t('Target storage')}
/>
<DescriptionListDescription className="forklift-page-mapping-list">
<StateAlerts
variant={AlertVariant.danger}
Expand Down

0 comments on commit 9169367

Please sign in to comment.