From f47f8b37edc10dd63da6e7d9850977dca5c1f7de Mon Sep 17 00:00:00 2001 From: Sharon Gratch Date: Mon, 1 Apr 2024 14:28:58 +0300 Subject: [PATCH] Align Resources tab's table columns by decimal point Reference: https://github.com/kubev2v/forklift-console-plugin/issues/1013 Align the table column of the Plan Resources tab by decimal point. Signed-off-by: Sharon Gratch --- .../views/details/PlanDetailsPage.style.css | 11 +++++ .../details/tabs/Resources/AlignedDecimal.tsx | 37 ++++++++++++++++ .../tabs/Resources/OVAPlanResources.tsx | 26 +++++++++--- .../tabs/Resources/OpenshiftPlanResources.tsx | 42 ++++++++++++++++--- .../tabs/Resources/OpenstackPlanResources.tsx | 26 +++++++++--- .../tabs/Resources/OvirtPlanResources.tsx | 26 +++++++++--- .../tabs/Resources/VSpherePlanResources.tsx | 26 +++++++++--- .../views/details/tabs/Resources/index.ts | 1 + 8 files changed, 165 insertions(+), 30 deletions(-) create mode 100644 packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/AlignedDecimal.tsx diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/PlanDetailsPage.style.css b/packages/forklift-console-plugin/src/modules/Plans/views/details/PlanDetailsPage.style.css index 4fd6295f3..93ff6ec6b 100644 --- a/packages/forklift-console-plugin/src/modules/Plans/views/details/PlanDetailsPage.style.css +++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/PlanDetailsPage.style.css @@ -128,3 +128,14 @@ .forklift-page-plan-details-vm-status__section-actions { padding-bottom: 0; } + +.forklift-page-plan-resources-td-integer { + width: 7em; + text-align: right; + display: inline-block; +} + +.forklift-page-plan-resources-td-fractional { + text-align: left; + display: inline-block; +} \ No newline at end of file diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/AlignedDecimal.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/AlignedDecimal.tsx new file mode 100644 index 000000000..b1b59ab4f --- /dev/null +++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/AlignedDecimal.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { useForkliftTranslation } from 'src/utils'; + +export type AlignedDecimalProps = { + /** + * The number to align. + */ + value: number; + /** + * (optional) units to be displayed next to the number. E.g 'MB', 'Cores'. + */ + unit?: string; + /** + * (optional) The number fractional part precision, I.e, number of fractional digits to leave. + */ + fractionalPrecision?: number; +}; + +export const AlignedDecimal: React.FC = ({ + value, + unit = '', + fractionalPrecision = 2, +}) => { + const { t } = useForkliftTranslation(); + + const [integerPart, fractionalPart] = value.toFixed(fractionalPrecision).split('.'); + const formattedFractionalPart = fractionalPrecision === 0 ? ' ' : '.' + fractionalPart; + + return ( +
+
{integerPart}
+
+ {formattedFractionalPart}  {t(unit)} +
+
+ ); +}; diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/OVAPlanResources.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/OVAPlanResources.tsx index 32b246785..db8f6fe57 100644 --- a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/OVAPlanResources.tsx +++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/OVAPlanResources.tsx @@ -6,6 +6,8 @@ import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@kubev2v/common'; import { OvaVM } from '@kubev2v/types'; import { PageSection } from '@patternfly/react-core'; +import { AlignedDecimal } from './AlignedDecimal'; + export const OVAPlanResources: React.FC<{ planInventory: OvaVM[] }> = ({ planInventory }) => { const { t } = useForkliftTranslation(); @@ -45,22 +47,34 @@ export const OVAPlanResources: React.FC<{ planInventory: OvaVM[] }> = ({ planInv {t('Virtual machines:')} - {planInventory?.length} - {planInventoryRunning?.length} + + + + + + {t('Total CPU count:')} - {totalResources.cpuCount} Cores - {totalResourcesRunning.cpuCount} Cores + + + + + + {t('Total memory:')} - {totalResources.memoryMB} MB - {totalResourcesRunning.memoryMB} MB + + + + + + diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/OpenshiftPlanResources.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/OpenshiftPlanResources.tsx index 532fc2f95..e392215bf 100644 --- a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/OpenshiftPlanResources.tsx +++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/OpenshiftPlanResources.tsx @@ -6,6 +6,8 @@ import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@kubev2v/common'; import { OpenshiftVM, V1VirtualMachine } from '@kubev2v/types'; import { PageSection } from '@patternfly/react-core'; +import { AlignedDecimal } from './AlignedDecimal'; + export const OpenshiftPlanResources: React.FC<{ planInventory: OpenshiftVM[] }> = ({ planInventory, }) => { @@ -52,22 +54,50 @@ export const OpenshiftPlanResources: React.FC<{ planInventory: OpenshiftVM[] }> {t('Virtual machines:')} - {planInventory?.length} - {planInventoryRunning?.length} + + + + + + {t('Total CPU count:')} - {missingCPUInfo ? '-' : `${totalResources.cpuCount} Cores`} - {missingCPUInfo ? '-' : `${totalResourcesRunning.cpuCount} Cores`} + + {missingCPUInfo ? ( +
-
+ ) : ( + + )} + + + {missingCPUInfo ? ( +
-
+ ) : ( + + )} + {t('Total memory:')} - {missingMemoryInfo ? '-' : `${totalResources.memoryMB} MB`} - {missingMemoryInfo ? '-' : `${totalResourcesRunning.memoryMB} MB`} + + {missingMemoryInfo ? ( +
-
+ ) : ( + + )} + + + {missingMemoryInfo ? ( +
-
+ ) : ( + + )} + diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/OpenstackPlanResources.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/OpenstackPlanResources.tsx index a36f79125..a131edc81 100644 --- a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/OpenstackPlanResources.tsx +++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/OpenstackPlanResources.tsx @@ -6,6 +6,8 @@ import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@kubev2v/common'; import { OpenstackVM } from '@kubev2v/types'; import { PageSection } from '@patternfly/react-core'; +import { AlignedDecimal } from './AlignedDecimal'; + export const OpenstackPlanResources: React.FC<{ planInventory: OpenstackVM[] }> = ({ planInventory, }) => { @@ -27,22 +29,34 @@ export const OpenstackPlanResources: React.FC<{ planInventory: OpenstackVM[] }> {t('Virtual machines:')} - {planInventory?.length} - {planInventoryRunning?.length} + + + + + + {t('Total CPU count:')} - - - - + +
-
+ + +
-
+ {t('Total memory:')} - - - - + +
-
+ + +
-
+ diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/OvirtPlanResources.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/OvirtPlanResources.tsx index ec566cce7..2487431b5 100644 --- a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/OvirtPlanResources.tsx +++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/OvirtPlanResources.tsx @@ -6,6 +6,8 @@ import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@kubev2v/common'; import { OVirtVM } from '@kubev2v/types'; import { PageSection } from '@patternfly/react-core'; +import { AlignedDecimal } from './AlignedDecimal'; + export const OvirtPlanResources: React.FC<{ planInventory: OVirtVM[] }> = ({ planInventory }) => { const { t } = useForkliftTranslation(); @@ -45,22 +47,34 @@ export const OvirtPlanResources: React.FC<{ planInventory: OVirtVM[] }> = ({ pla {t('Virtual machines:')} - {planInventory?.length} - {planInventoryRunning?.length} + + + + + + {t('Total CPU count:')} - {totalResources.cpuCount} Cores - {totalResourcesRunning.cpuCount} Cores + + + + + + {t('Total memory:')} - {totalResources.memoryMB} MB - {totalResourcesRunning.memoryMB} MB + + + + + + diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/VSpherePlanResources.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/VSpherePlanResources.tsx index 356374e34..3d52a5a20 100644 --- a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/VSpherePlanResources.tsx +++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/VSpherePlanResources.tsx @@ -6,6 +6,8 @@ import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@kubev2v/common'; import { VSphereVM } from '@kubev2v/types'; import { PageSection } from '@patternfly/react-core'; +import { AlignedDecimal } from './AlignedDecimal'; + export const VSpherePlanResources: React.FC<{ planInventory: VSphereVM[] }> = ({ planInventory, }) => { @@ -47,22 +49,34 @@ export const VSpherePlanResources: React.FC<{ planInventory: VSphereVM[] }> = ({ {t('Virtual machines:')} - {planInventory?.length} - {planInventoryRunning?.length} + + + + + + {t('Total CPU count:')} - {totalResources.cpuCount} Cores - {totalResourcesRunning.cpuCount} Cores + + + + + + {t('Total memory:')} - {totalResources.memoryMB} MB - {totalResourcesRunning.memoryMB} MB + + + + + + diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/index.ts b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/index.ts index 6e55db4c9..8f3bfee14 100644 --- a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/index.ts +++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/index.ts @@ -1,4 +1,5 @@ // @index(['./*', /style/g], f => `export * from '${f.path}';`) +export * from './AlignedDecimal'; export * from './OpenshiftPlanResources'; export * from './OVAPlanResources'; export * from './OvirtPlanResources';