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

MTV-1690: Plan wizard - Step 2 - Update mappings section #1391

Merged
merged 1 commit into from
Nov 24, 2024
Merged

MTV-1690: Plan wizard - Step 2 - Update mappings section #1391

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
9 changes: 8 additions & 1 deletion packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json
View file
Open in desktop
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
Open in desktop
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;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

So that the NM and SM labels in the headers appear next to the text and are vertically centered

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
Open in desktop
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
Open in desktop
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')}>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

wrapped existing Selects in FormGroup so that they can be given labels for small screen widths

Copy link
Member

Choose a reason for hiding this comment

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

nice !

<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
Open in desktop
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
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Shifted ResourceLink labels into the section headings

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
Loading