diff --git a/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json b/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json index 810d0ee8f..3ea35e544 100644 --- a/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json +++ b/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json @@ -41,6 +41,7 @@ "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.", + "Assessment": "Assessment", "Authentication type": "Authentication type", "Bandwidth": "Bandwidth", "CA certificate": "CA certificate", @@ -192,6 +193,7 @@ "Inventory server is not reachable. To troubleshoot, check the Forklift controller pod logs.": "Inventory server is not reachable. To troubleshoot, check the Forklift controller pod logs.", "Issuer": "Issuer", "Kubernetes name of the new migration Plan resource": "Kubernetes name of the new migration Plan resource", + "Label": "Label", "List of objects depended by this object. If ALL objects in the list have been deleted,\n this object will be garbage collected. If this object is managed by a controller,\n then an entry in this list will point to this controller, with the controller field set to true.\n There cannot be more than one managing controller.": "List of objects depended by this object. If ALL objects in the list have been deleted,\n this object will be garbage collected. If this object is managed by a controller,\n then an entry in this list will point to this controller, with the controller field set to true.\n There cannot be more than one managing controller.", "Loading": "Loading", "Loading...": "Loading...", @@ -249,6 +251,7 @@ "New name was generated for the Network Map due to naming conflict.": "New name was generated for the Network Map due to naming conflict.", "New name was generated for the Storage Map due to naming conflict.": "New name was generated for the Storage Map due to naming conflict.", "NICs with empty NIC profile": "NICs with empty NIC profile", + "No concerns found for this virtual machine.": "No concerns found for this virtual machine.", "No credentials found.": "No credentials found.", "No inventory data available.": "No inventory data available.", "No Mapping found.": "No Mapping found.", diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/ConcernsTable.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/ConcernsTable.tsx new file mode 100644 index 000000000..9e59f4735 --- /dev/null +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/ConcernsTable.tsx @@ -0,0 +1,67 @@ +import React from 'react'; +import { useForkliftTranslation } from 'src/utils/i18n'; + +import { RowProps, TableComposable, Tbody, Td, Th, Thead, Tr } from '@kubev2v/common'; +import { HelperText, HelperTextItem, Label, PageSection } from '@patternfly/react-core'; + +import { + getCategoryColor, + getCategoryIcon, + getCategoryTitle, + groupConcernsByCategory, +} from '../utils'; + +import { VmData } from './VMCellProps'; + +/** + * React Component to display a table of concerns. + */ +export const ConcernsTable: React.FC> = ({ resourceData }) => { + const { t } = useForkliftTranslation(); + + if (!resourceData?.vm?.['concerns'] || resourceData?.vm?.['concerns']?.length < 1) { + return ( + + + + {t('No concerns found for this virtual machine.')} + + + + ); + } + + const groupedConcerns = groupConcernsByCategory(resourceData?.vm?.['concerns']); + + return ( + + + + + {t('Label')} + {t('Category')} + {t('Assessment')} + + + + {['Critical', 'Warning', 'Information'].map((category) => + groupedConcerns?.[category]?.map((concern) => ( + + {concern.label} + + + + {concern?.assessment || '-'} + + )), + )} + + + + ); +}; diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/ProviderVirtualMachinesList.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/ProviderVirtualMachinesList.tsx index 6ec461a47..052581a58 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/ProviderVirtualMachinesList.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/ProviderVirtualMachinesList.tsx @@ -19,9 +19,9 @@ import { Concern } from '@kubev2v/types'; import { useInventoryVms } from '../utils/useInventoryVms'; +import { ConcernsTable } from './ConcernsTable'; import { MigrationAction } from './MigrationAction'; import { VmData } from './VMCellProps'; - export interface ProviderVirtualMachinesListProps extends RouteComponentProps { title?: string; obj: ProviderData; @@ -58,6 +58,7 @@ export const ProviderVirtualMachinesList: FC = const initialSelectedIds_ = initialSelectedIds || []; const [selectedIds, setSelectedIds] = useState(initialSelectedIds_); + const [expandedIds, setExpandedIds] = useState([]); const [userSettings] = useState(() => loadUserSettings({ pageId })); const [vmData, loading] = useInventoryVms(obj, loaded, loadError); @@ -102,6 +103,9 @@ export const ProviderVirtualMachinesList: FC = selectedIds={selectedIds} page={page} setPage={setPage} + expandedIds={expandedIds} + onExpand={setExpandedIds} + ExpandedComponent={ConcernsTable} /> ); }; diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/VMConcernsCellRenderer.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/VMConcernsCellRenderer.tsx index 266e5032a..0d58ade38 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/VMConcernsCellRenderer.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/VMConcernsCellRenderer.tsx @@ -1,16 +1,17 @@ import React from 'react'; -import { TFunction } from 'react-i18next'; import { TableCell, TableEmptyCell } from 'src/modules/Providers/utils'; import { useForkliftTranslation } from 'src/utils/i18n'; import { Concern } from '@kubev2v/types'; -import { - BlueInfoCircleIcon, - RedExclamationCircleIcon, - YellowExclamationTriangleIcon, -} from '@openshift-console/dynamic-plugin-sdk'; import { Button, Flex, FlexItem, Label, Popover, Stack, StackItem } from '@patternfly/react-core'; +import { + getCategoryColor, + getCategoryIcon, + getCategoryTitle, + groupConcernsByCategory, +} from '../utils'; + import { VMCellProps } from './VMCellProps'; /** @@ -87,75 +88,3 @@ const ConcernList: React.FC<{ concerns: Concern[] }> = ({ concerns }) => ( ))} ); - -/** - * Groups concerns by their category. - * - * @param {Concern[]} concerns - The list of concerns to group. - * @returns {Record} The grouped concerns by category. - */ -const groupConcernsByCategory = (concerns: Concern[] = []): Record => { - return concerns.reduce( - (acc, concern) => { - if (!acc[concern.category]) { - acc[concern.category] = []; - } - acc[concern.category].push(concern); - return acc; - }, - { - Critical: [], - Information: [], - Warning: [], - }, - ); -}; - -/** - * Retrieves the title for a given concern category. - * - * @param {string} category - The category of the concern. - * @param {TFunction} t - The translation function. - * @returns {string} The title for the given category. - */ -const getCategoryTitle = (category: string, t: TFunction): string => { - const titles = { - Critical: t('Critical concerns'), - Information: t('Information concerns'), - Warning: t('Warning concerns'), - }; - - return titles[category] || ''; -}; - -/** - * Retrieves the icon for a given concern category. - * - * @param {string} category - The category of the concern. - * @returns {ReactElement} The icon for the given category. - */ -const getCategoryIcon = (category: string) => { - const icons = { - Critical: , - Information: , - Warning: , - }; - - return icons[category] || <>; -}; - -/** - * Retrieves the color for a given concern category. - * - * @param {string} category - The category of the concern. - * @returns {string} The color for the given category. - */ -const getCategoryColor = (category: string) => { - const colors = { - Critical: 'red', - Information: 'blue', - Warning: 'orange', - }; - - return colors[category] || 'grey'; -}; diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/index.ts b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/index.ts index 5e23e1172..042dd14b4 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/index.ts +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/index.ts @@ -1,8 +1,11 @@ // @index(['./*', /style/g], f => `export * from '${f.path}';`) +export * from './ConcernsTable'; +export * from './MigrationAction'; export * from './PowerStateCellRenderer'; export * from './ProviderVirtualMachinesList'; export * from './VMCellProps'; export * from './VMConcernsCellRenderer'; export * from './VmFeaturesCell'; export * from './VMNameCellRenderer'; +export * from './VmResourceLinkRenderer'; // @endindex diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/utils/helpers/getCategoryTitle.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/utils/helpers/getCategoryTitle.tsx new file mode 100644 index 000000000..7782648c3 --- /dev/null +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/utils/helpers/getCategoryTitle.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { TFunction } from 'react-i18next'; + +import { + BlueInfoCircleIcon, + RedExclamationCircleIcon, + YellowExclamationTriangleIcon, +} from '@openshift-console/dynamic-plugin-sdk'; + +/** + * Retrieves the title for a given concern category. + * + * @param {string} category - The category of the concern. + * @param {TFunction} t - The translation function. + * @returns {string} The title for the given category. + */ +export const getCategoryTitle = (category: string, t: TFunction): string => { + const titles = { + Critical: t('Critical concerns'), + Information: t('Information concerns'), + Warning: t('Warning concerns'), + }; + + return titles[category] || ''; +}; + +/** + * Retrieves the icon for a given concern category. + * + * @param {string} category - The category of the concern. + * @returns {ReactElement} The icon for the given category. + */ +export const getCategoryIcon = (category: string) => { + const icons = { + Critical: , + Information: , + Warning: , + }; + + return icons[category] || <>; +}; + +/** + * Retrieves the color for a given concern category. + * + * @param {string} category - The category of the concern. + * @returns {string} The color for the given category. + */ +export const getCategoryColor = (category: string) => { + const colors = { + Critical: 'red', + Information: 'blue', + Warning: 'orange', + }; + + return colors[category] || 'grey'; +}; diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/utils/helpers/groupConcernsByCategory.ts b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/utils/helpers/groupConcernsByCategory.ts new file mode 100644 index 000000000..b576b9749 --- /dev/null +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/utils/helpers/groupConcernsByCategory.ts @@ -0,0 +1,24 @@ +import { Concern } from '@kubev2v/types'; + +/** + * Groups concerns by their category. + * + * @param {Concern[]} concerns - The list of concerns to group. + * @returns {Record} The grouped concerns by category. + */ +export const groupConcernsByCategory = (concerns: Concern[] = []): Record => { + return concerns.reduce( + (acc, concern) => { + if (!acc[concern.category]) { + acc[concern.category] = []; + } + acc[concern.category].push(concern); + return acc; + }, + { + Critical: [], + Information: [], + Warning: [], + }, + ); +}; diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/utils/helpers/index.ts b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/utils/helpers/index.ts index c97ba37f1..ecfe87573 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/utils/helpers/index.ts +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/utils/helpers/index.ts @@ -1,5 +1,8 @@ // @index(['./*', /style/g], f => `export * from '${f.path}';`) +export * from './getCategoryTitle'; export * from './getOpenShiftFeatureMap'; export * from './getVmPowerState'; +export * from './groupConcernsByCategory'; +export * from './toVmFeatureEnum'; export * from './vmProps'; // @endindex