Skip to content

Commit

Permalink
Merge pull request #1000 from yaacov/plan-vms-tab
Browse files Browse the repository at this point in the history
🐾 Plan details page vms tab
  • Loading branch information
yaacov authored Mar 19, 2024
2 parents e67eb5b + 2f0e149 commit 84c7c12
Show file tree
Hide file tree
Showing 60 changed files with 1,738 additions and 273 deletions.
2 changes: 1 addition & 1 deletion ci/deploy-kubevirt.sh
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ K8S_TIMEOUT=${K8S_TIMEOUT:="360s"}
# https://github.com/kubevirt/hyperconverged-cluster-operator/blob/<release tag>/hack/config

# Default version values
KUBEVIRT_VERSION="v1.2.0-beta.0"
KUBEVIRT_VERSION="v1.2.0"
CDI_VERSION="v1.58.1"
NETWORK_ADDONS_VERSION="v0.91.0"

Expand Down
422 changes: 260 additions & 162 deletions package-lock.json

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions packages/common/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@
"@storybook/react": "^7.0.14",
"@storybook/react-webpack5": "^7.0.14",
"@storybook/testing-library": "^0.0.14-next.2",
"@types/react": "^17.0.1",
"@types/react-dom": "^17.0.1",
"eslint-plugin-storybook": "^0.6.12",
"prop-types": "^15.8.1",
"sass": "^1.63.3",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const meta: Meta<typeof DefaultHeader> = {
tags: ['autodocs'],
decorators: [
(Story) => (
<TableComposable>
<TableComposable onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined}>
<Story />
</TableComposable>
),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -89,9 +89,14 @@ const visibleColumns: ResourceField[] = [

function SimpleRow<T>({ resourceFields, resourceData }: RowProps<T>) {
return (
<Tr>
<Tr onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined}>
{resourceFields.map(({ resourceFieldId, label }) => (
<Td key={resourceFieldId} dataLabel={label}>
<Td
key={resourceFieldId}
dataLabel={label}
onPointerEnterCapture={undefined}
onPointerLeaveCapture={undefined}
>
{String(resourceData[resourceFieldId] ?? '')}
</Td>
))}
Expand Down
2 changes: 2 additions & 0 deletions packages/common/src/components/TableView/DefaultHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ export function DefaultHeader<T>({
setActiveSort,
})
}
onPointerEnterCapture={undefined}
onPointerLeaveCapture={undefined}
>
{label}
</Th>
Expand Down
9 changes: 7 additions & 2 deletions packages/common/src/components/TableView/DefaultRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,14 @@ import { RowProps } from './types';
*/
export function DefaultRow<T>({ resourceFields, resourceData }: RowProps<T>) {
return (
<Tr>
<Tr onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined}>
{resourceFields?.map(({ resourceFieldId, label }) => (
<Td key={resourceFieldId} dataLabel={label}>
<Td
key={resourceFieldId}
dataLabel={label}
onPointerEnterCapture={undefined}
onPointerLeaveCapture={undefined}
>
{String(getResourceFieldValue(resourceData, resourceFieldId, resourceFields) ?? '')}
</Td>
))}
Expand Down
57 changes: 51 additions & 6 deletions packages/common/src/components/TableView/TableView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,20 +31,33 @@ export function TableView<T>({
setActiveSort,
currentNamespace,
Header,
toId,
expandedIds,
}: TableViewProps<T>) {
const hasChildren = children.filter(Boolean).length > 0;
const columnSignature = visibleColumns.map(({ resourceFieldId: id }) => id).join();

return (
<TableComposable aria-label={ariaLabel} variant="compact" isStickyHeader>
<Thead>
<Tr>
<TableComposable
aria-label={ariaLabel}
variant="compact"
isStickyHeader
onPointerEnterCapture={undefined}
onPointerLeaveCapture={undefined}
>
<Thead onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined}>
<Tr onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined}>
<Header {...{ activeSort, setActiveSort, visibleColumns, dataOnScreen: entities }} />
</Tr>
</Thead>
<Tbody>
<Tbody onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined}>
{hasChildren && (
<Tr>
<Td colSpan={visibleColumns.length || 1}>
<Tr onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined}>
<Td
colSpan={visibleColumns.length || 1}
onPointerEnterCapture={undefined}
onPointerLeaveCapture={undefined}
>
<Bullseye>{children}</Bullseye>
</Td>
</Tr>
Expand All @@ -57,6 +70,8 @@ export function TableView<T>({
resourceFields={visibleColumns}
namespace={currentNamespace}
resourceIndex={index}
length={visibleColumns.length}
isExpanded={expandedIds?.includes(toId(resourceData))}
/>
))}
</Tbody>
Expand Down Expand Up @@ -105,4 +120,34 @@ interface TableViewProps<T> {
* Maps resourceFields to header rows.
*/
Header(props: TableViewHeaderProps<T>): JSX.Element;

/**
* @returns string that can be used as an unique identifier
*/
toId?: (item: T) => string;

/**
* @returns true if items can be selected, false otherwise
*/
canSelect?: (item: T) => boolean;

/**
* onSelect is called when selection changes
*/
onSelect?: (selectedIds: string[]) => void;

/**
* Selected ids
*/
selectedIds?: string[];

/**
* onExpand is called when expand changes
*/
onExpand?: (expandedIds: string[]) => void;

/**
* Expanded ids
*/
expandedIds?: string[];
}
108 changes: 108 additions & 0 deletions packages/common/src/components/TableView/Warpers.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
import React from 'react';

import {
Table as PfTable,
TableComposable as PfTableComposable,
Tbody as PfTbody,
Td as PfTd,
Th as PfTh,
Thead as PfThead,
Tr as PfTr,
} from '@patternfly/react-table';

/*
* This wrappers workaround a bug in @patternfly/react-table types,
* they can be safely removed once this but is fixed.
*/

type PfTableComposableProps = React.ComponentProps<typeof PfTableComposable>;
type TableComposableProps = Omit<
PfTableComposableProps,
'onPointerEnterCapture' | 'onPointerLeaveCapture'
> & {
onPointerEnterCapture?: PfTableComposableProps['onPointerEnterCapture'];
onPointerLeaveCapture?: PfTableComposableProps['onPointerLeaveCapture'];
};

type PfTdProps = React.ComponentProps<typeof PfTd>;
type TdProps = Omit<PfTdProps, 'onPointerEnterCapture' | 'onPointerLeaveCapture'> & {
onPointerEnterCapture?: PfTdProps['onPointerEnterCapture'];
onPointerLeaveCapture?: PfTdProps['onPointerLeaveCapture'];
};

type PfThProps = React.ComponentProps<typeof PfTh>;
type ThProps = Omit<PfThProps, 'onPointerEnterCapture' | 'onPointerLeaveCapture'> & {
onPointerEnterCapture?: PfThProps['onPointerEnterCapture'];
onPointerLeaveCapture?: PfThProps['onPointerLeaveCapture'];
};

type PfTrProps = React.ComponentProps<typeof PfTr>;
type TrProps = Omit<PfTrProps, 'onPointerEnterCapture' | 'onPointerLeaveCapture'> & {
onPointerEnterCapture?: PfTrProps['onPointerEnterCapture'];
onPointerLeaveCapture?: PfTrProps['onPointerLeaveCapture'];
};

type PfTheadProps = React.ComponentProps<typeof PfThead>;
type TheadProps = Omit<PfTheadProps, 'onPointerEnterCapture' | 'onPointerLeaveCapture'> & {
onPointerEnterCapture?: PfTheadProps['onPointerEnterCapture'];
onPointerLeaveCapture?: PfTheadProps['onPointerLeaveCapture'];
};

type PfTbodyProps = React.ComponentProps<typeof PfTbody>;
type TbodyProps = Omit<PfTbodyProps, 'onPointerEnterCapture' | 'onPointerLeaveCapture'> & {
onPointerEnterCapture?: PfTbodyProps['onPointerEnterCapture'];
onPointerLeaveCapture?: PfTbodyProps['onPointerLeaveCapture'];
};

type PfTableProps = React.ComponentProps<typeof PfTable>;
type TableProps = Omit<PfTableProps, 'onPointerEnterCapture' | 'onPointerLeaveCapture'>;

export const Td: React.FC<TdProps> = (props) => (
<PfTd
{...props}
onPointerEnterCapture={props?.onPointerEnterCapture}
onPointerLeaveCapture={props.onPointerLeaveCapture}
/>
);

export const Tr: React.FC<TrProps> = (props) => (
<PfTr
{...props}
onPointerEnterCapture={props?.onPointerEnterCapture}
onPointerLeaveCapture={props.onPointerLeaveCapture}
/>
);

export const Th: React.FC<ThProps> = (props) => (
<PfTh
{...props}
onPointerEnterCapture={props?.onPointerEnterCapture}
onPointerLeaveCapture={props.onPointerLeaveCapture}
/>
);

export const Thead: React.FC<TheadProps> = (props) => (
<PfThead
{...props}
onPointerEnterCapture={props?.onPointerEnterCapture}
onPointerLeaveCapture={props.onPointerLeaveCapture}
/>
);

export const Tbody: React.FC<TbodyProps> = (props) => (
<PfTbody
{...props}
onPointerEnterCapture={props?.onPointerEnterCapture}
onPointerLeaveCapture={props.onPointerLeaveCapture}
/>
);

export const TableComposable: React.FC<TableComposableProps> = (props) => (
<PfTableComposable
{...props}
onPointerEnterCapture={props?.onPointerEnterCapture}
onPointerLeaveCapture={props.onPointerLeaveCapture}
/>
);

export const Table: React.FC<TableProps> = (props) => <PfTable {...props} />;
1 change: 1 addition & 0 deletions packages/common/src/components/TableView/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,6 @@ export * from './ManageColumnsToolbarItem';
export * from './sort';
export * from './TableView';
export * from './types';
export * from './Warpers';
export * from './withTr';
// @endindex
2 changes: 2 additions & 0 deletions packages/common/src/components/TableView/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ export interface RowProps<T> {
resourceIndex: number;
namespace: string;
isSelected?: boolean;
isExpanded?: boolean;
toggleSelect?: () => void;
length?: number;
}

export interface TableViewHeaderProps<T> {
Expand Down
50 changes: 43 additions & 7 deletions packages/common/src/components/TableView/withTr.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,51 @@
import React from 'react';

import { Tr } from '@patternfly/react-table';
import { ExpandableRowContent, Td, Tr } from '@patternfly/react-table';

import { RowProps } from './types';

export function withTr<T>(Component: React.FC<RowProps<T>>) {
const Enhanced = (props: RowProps<T>) => (
<Tr>
<Component {...props} />
</Tr>
);
export function withTr<T>(
Component: React.FC<RowProps<T>>,
ExpandedComponent?: React.FC<RowProps<T>>,
) {
const Enhanced = (props: RowProps<T>) => {
const { isExpanded, length } = props;

if (ExpandedComponent) {
return (
<>
<Tr onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined}>
<Component {...props} />
</Tr>
<Tr
isExpanded={isExpanded}
onPointerEnterCapture={undefined}
onPointerLeaveCapture={undefined}
>
<Td onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined} />
<Td
noPadding
colSpan={length}
onPointerEnterCapture={undefined}
onPointerLeaveCapture={undefined}
>
{isExpanded && (
<ExpandableRowContent>
<ExpandedComponent {...props} />
</ExpandableRowContent>
)}
</Td>
</Tr>
</>
);
}

return (
<Tr onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined}>
<Component {...props} />
</Tr>
);
};
Enhanced.displayName = `${Component.displayName || 'Component'}WithTr`;
return Enhanced;
}
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"All discovered storages have been mapped to the default storage.": "All discovered storages have been mapped to the default storage.",
"All networks detected on the selected VMs require a mapping.": "All networks detected on the selected VMs require a mapping.",
"All storages detected on the selected VMs require a mapping.": "All storages detected on the selected VMs require a mapping.",
"All virtual machines planed for migration are selected for deletion, deleting all virtual machines from a migration plan is not allowed.": "All virtual machines planed for migration are selected for deletion, deleting all virtual machines from a migration plan is not allowed.",
"Application credential ID": "Application credential ID",
"Application credential name": "Application credential name",
"Application credential secret": "Application credential secret",
Expand All @@ -40,12 +41,16 @@
"Archive Plan": "Archive Plan",
"Archived": "Archived",
"Archiving": "Archiving",
"Are you sure you want to delete this virtual machines from the migration plan.": "Are you sure you want to delete this virtual machines from the migration plan.",
"Authentication type": "Authentication type",
"Bandwidth": "Bandwidth",
"CA certificate": "CA certificate",
"CA certificate - disabled when 'Skip certificate validation' is selected": "CA certificate - disabled when 'Skip certificate validation' is selected",
"CA certificate - leave empty to use system CA certificates": "CA certificate - leave empty to use system CA certificates",
"Cancel": "Cancel",
"Cancel migration": "Cancel migration",
"Cancel virtual machines": "Cancel virtual machines",
"Cancel virtual machines from migration plan": "Cancel virtual machines from migration plan",
"Canceled": "Canceled",
"Cannot retrieve certificate": "Cannot retrieve certificate",
"Category": "Category",
Expand Down Expand Up @@ -98,9 +103,11 @@
"Delete Plan": "Delete Plan",
"Delete Provider": "Delete Provider",
"Delete StorageMap": "Delete StorageMap",
"Delete virtual machines from migration plan": "Delete virtual machines from migration plan",
"Description": "Description",
"Details": "Details",
"Determines the frequency with which the system checks the status of snapshot creation or removal during oVirt warm migration. The default value is 10 seconds.": "Determines the frequency with which the system checks the status of snapshot creation or removal during oVirt warm migration. The default value is 10 seconds.",
"Disk Transfer": "Disk Transfer",
"Domain": "Domain",
"Domain name": "Domain name",
"Drag and drop a file or upload one": "Drag and drop a file or upload one",
Expand Down Expand Up @@ -334,6 +341,7 @@
"Reason": "Reason",
"Region": "Region",
"Regions": "Regions",
"Remove virtual machines": "Remove virtual machines",
"Reorder": "Reorder",
"Restore default columns": "Restore default columns",
"Return to the providers list page": "Return to the providers list page",
Expand Down Expand Up @@ -480,6 +488,7 @@
"Whether to preserve the CPU model": "Whether to preserve the CPU model",
"YAML": "YAML",
"You can always bring this welcome card back into view by clicking 'Show the welcome card' in the page heading.": "You can always bring this welcome card back into view by clicking 'Show the welcome card' in the page heading.",
"You can cancel virtual machines from a running migration plan.": "You can cancel virtual machines from a running migration plan.",
"You can select a default migration network for an OpenShift Virtualization provider in the\n Red Hat OpenShift web console to improve performance. The default migration network is used to\n transfer disks to the namespaces in which it is configured.If you do not select a migration network,\n the default migration network is the pod network, which might not be optimal for disk transfer.": "You can select a default migration network for an OpenShift Virtualization provider in the\n Red Hat OpenShift web console to improve performance. The default migration network is used to\n transfer disks to the namespaces in which it is configured.If you do not select a migration network,\n the default migration network is the pod network, which might not be optimal for disk transfer.",
"You can select a default migration network for an OpenShift Virtualization provider in the Red Hat OpenShift web console to improve performance.\n The default migration network is used to transfer disks to the namespaces in which it is configured.If you do not select a migration network,\n the default migration network is the pod network, which might not be optimal for disk transfer.": "You can select a default migration network for an OpenShift Virtualization provider in the Red Hat OpenShift web console to improve performance.\n The default migration network is used to transfer disks to the namespaces in which it is configured.If you do not select a migration network,\n the default migration network is the pod network, which might not be optimal for disk transfer.",
"You can select a migration network for a source provider to reduce risk to the source environment and to improve performance.": "You can select a migration network for a source provider to reduce risk to the source environment and to improve performance.",
Expand Down
Loading

0 comments on commit 84c7c12

Please sign in to comment.