Merge pull request #1047 from sgratch/plan-resources-align-to-dec-point

🐞 Align Resources tab's table columns by decimal point
kubev2v · Apr 3, 2024 · 2ddd760 · 2ddd760
2 parents 31bcecf + f47f8b3
commit 2ddd760
Show file tree

Hide file tree

Showing 8 changed files with 165 additions and 30 deletions.
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
@@ -132,3 +132,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;
+}
diff --git a/...forklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/AlignedDecimal.tsx b/...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<AlignedDecimalProps> = ({
+  value,
+  unit = '',
+  fractionalPrecision = 2,
+}) => {
+  const { t } = useForkliftTranslation();
+
+  const [integerPart, fractionalPart] = value.toFixed(fractionalPrecision).split('.');
+  const formattedFractionalPart = fractionalPrecision === 0 ? ' ' : '.' + fractionalPart;
+
+  return (
+    <div>
+      <div className="forklift-page-plan-resources-td-integer">{integerPart}</div>
+      <div className="forklift-page-plan-resources-td-fractional">
+        {formattedFractionalPart}&nbsp;&nbsp;{t(unit)}
+      </div>
+    </div>
+  );
+};
diff --git a/...rklift-console-plugin/src/modules/Plans/views/details/tabs/Resources/OVAPlanResources.tsx b/...rklift-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
             <Td width={10}>
               <strong>{t('Virtual machines:')}</strong>
             </Td>
-            <Td width={10}>{planInventory?.length}</Td>
-            <Td width={10}>{planInventoryRunning?.length}</Td>
+            <Td width={10}>
+              <AlignedDecimal value={planInventory?.length} />
+            </Td>
+            <Td width={10}>
+              <AlignedDecimal value={planInventoryRunning?.length} />
+            </Td>
           </Tr>
           <Tr>
             <Th width={10}>
               <strong>{t('Total CPU count:')}</strong>
             </Th>
-            <Td width={10}>{totalResources.cpuCount} Cores</Td>
-            <Td width={10}>{totalResourcesRunning.cpuCount} Cores</Td>
+            <Td width={10}>
+              <AlignedDecimal value={totalResources.cpuCount} unit={'Cores'} />
+            </Td>
+            <Td width={10}>
+              <AlignedDecimal value={totalResourcesRunning.cpuCount} unit={'Cores'} />
+            </Td>
           </Tr>
           <Tr>
             <Th width={10}>
               <strong>{t('Total memory:')}</strong>
             </Th>
-            <Td width={10}>{totalResources.memoryMB} MB</Td>
-            <Td width={10}>{totalResourcesRunning.memoryMB} MB</Td>
+            <Td width={10}>
+              <AlignedDecimal value={totalResources.memoryMB} unit={'MB'} />
+            </Td>
+            <Td width={10}>
+              <AlignedDecimal value={totalResourcesRunning.memoryMB} unit={'MB'} />
+            </Td>
           </Tr>
         </Tbody>
       </TableComposable>

diff --git a/...-console-plugin/src/modules/Plans/views/details/tabs/Resources/OpenshiftPlanResources.tsx b/...-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[] }>
             <Td width={10}>
               <strong>{t('Virtual machines:')}</strong>
             </Td>
-            <Td width={10}>{planInventory?.length}</Td>
-            <Td width={10}>{planInventoryRunning?.length}</Td>
+            <Td width={10}>
+              <AlignedDecimal value={planInventory?.length} />
+            </Td>
+            <Td width={10}>
+              <AlignedDecimal value={planInventoryRunning?.length} />
+            </Td>
           </Tr>
           <Tr>
             <Th width={10}>
               <strong>{t('Total CPU count:')}</strong>
             </Th>
-            <Td width={10}>{missingCPUInfo ? '-' : `${totalResources.cpuCount} Cores`}</Td>
-            <Td width={10}>{missingCPUInfo ? '-' : `${totalResourcesRunning.cpuCount} Cores`}</Td>
+            <Td width={10}>
+              {missingCPUInfo ? (
+                <div className="forklift-page-plan-resources-td-integer">-</div>
+              ) : (
+                <AlignedDecimal value={totalResources.cpuCount} unit={'Cores'} />
+              )}
+            </Td>
+            <Td width={10}>
+              {missingCPUInfo ? (
+                <div className="forklift-page-plan-resources-td-integer">-</div>
+              ) : (
+                <AlignedDecimal value={totalResourcesRunning.cpuCount} unit={'Cores'} />
+              )}
+            </Td>
           </Tr>
           <Tr>
             <Th width={10}>
               <strong>{t('Total memory:')}</strong>
             </Th>
-            <Td width={10}>{missingMemoryInfo ? '-' : `${totalResources.memoryMB} MB`}</Td>
-            <Td width={10}>{missingMemoryInfo ? '-' : `${totalResourcesRunning.memoryMB} MB`}</Td>
+            <Td width={10}>
+              {missingMemoryInfo ? (
+                <div className="forklift-page-plan-resources-td-integer">-</div>
+              ) : (
+                <AlignedDecimal value={totalResources.memoryMB} unit={'MB'} />
+              )}
+            </Td>
+            <Td width={10}>
+              {missingMemoryInfo ? (
+                <div className="forklift-page-plan-resources-td-integer">-</div>
+              ) : (
+                <AlignedDecimal value={totalResourcesRunning.memoryMB} unit={'MB'} />
+              )}
+            </Td>
           </Tr>
         </Tbody>
       </TableComposable>

diff --git a/...-console-plugin/src/modules/Plans/views/details/tabs/Resources/OpenstackPlanResources.tsx b/...-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[] }>
             <Td width={10}>
               <strong>{t('Virtual machines:')}</strong>
             </Td>
-            <Td width={10}>{planInventory?.length}</Td>
-            <Td width={10}>{planInventoryRunning?.length}</Td>
+            <Td width={10}>
+              <AlignedDecimal value={planInventory?.length} />
+            </Td>
+            <Td width={10}>
+              <AlignedDecimal value={planInventoryRunning?.length} />
+            </Td>
           </Tr>
           <Tr>
             <Th width={10}>
               <strong>{t('Total CPU count:')}</strong>
             </Th>
-            <Td width={10}>-</Td>
-            <Td width={10}>-</Td>
+            <Td width={10}>
+              <div className="forklift-page-plan-resources-td-integer">-</div>
+            </Td>
+            <Td width={10}>
+              <div className="forklift-page-plan-resources-td-integer">-</div>
+            </Td>
           </Tr>
           <Tr>
             <Th width={10}>
               <strong>{t('Total memory:')}</strong>
             </Th>
-            <Td width={10}>-</Td>
-            <Td width={10}>-</Td>
+            <Td width={10}>
+              <div className="forklift-page-plan-resources-td-integer">-</div>
+            </Td>
+            <Td width={10}>
+              <div className="forklift-page-plan-resources-td-integer">-</div>
+            </Td>
           </Tr>
         </Tbody>
       </TableComposable>

diff --git a/...lift-console-plugin/src/modules/Plans/views/details/tabs/Resources/OvirtPlanResources.tsx b/...lift-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
             <Td width={10}>
               <strong>{t('Virtual machines:')}</strong>
             </Td>
-            <Td width={10}>{planInventory?.length}</Td>
-            <Td width={10}>{planInventoryRunning?.length}</Td>
+            <Td width={10}>
+              <AlignedDecimal value={planInventory?.length} />
+            </Td>
+            <Td width={10}>
+              <AlignedDecimal value={planInventoryRunning?.length} />
+            </Td>
           </Tr>
           <Tr>
             <Th width={10}>
               <strong>{t('Total CPU count:')}</strong>
             </Th>
-            <Td width={10}>{totalResources.cpuCount} Cores</Td>
-            <Td width={10}>{totalResourcesRunning.cpuCount} Cores</Td>
+            <Td width={10}>
+              <AlignedDecimal value={totalResources.cpuCount} unit={'Cores'} />
+            </Td>
+            <Td width={10}>
+              <AlignedDecimal value={totalResourcesRunning.cpuCount} unit={'Cores'} />
+            </Td>
           </Tr>
           <Tr>
             <Th width={10}>
               <strong>{t('Total memory:')}</strong>
             </Th>
-            <Td width={10}>{totalResources.memoryMB} MB</Td>
-            <Td width={10}>{totalResourcesRunning.memoryMB} MB</Td>
+            <Td width={10}>
+              <AlignedDecimal value={totalResources.memoryMB} unit={'MB'} />
+            </Td>
+            <Td width={10}>
+              <AlignedDecimal value={totalResourcesRunning.memoryMB} unit={'MB'} />
+            </Td>
           </Tr>
         </Tbody>
       </TableComposable>

diff --git a/...ft-console-plugin/src/modules/Plans/views/details/tabs/Resources/VSpherePlanResources.tsx b/...ft-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[] }> = ({
             <Td width={10}>
               <strong>{t('Virtual machines:')}</strong>
             </Td>
-            <Td width={10}>{planInventory?.length}</Td>
-            <Td width={10}>{planInventoryRunning?.length}</Td>
+            <Td width={10}>
+              <AlignedDecimal value={planInventory?.length} />
+            </Td>
+            <Td width={10}>
+              <AlignedDecimal value={planInventoryRunning?.length} />
+            </Td>
           </Tr>
           <Tr>
             <Th width={10}>
               <strong>{t('Total CPU count:')}</strong>
             </Th>
-            <Td width={10}>{totalResources.cpuCount} Cores</Td>
-            <Td width={10}>{totalResourcesRunning.cpuCount} Cores</Td>
+            <Td width={10}>
+              <AlignedDecimal value={totalResources.cpuCount} unit={'Cores'} />
+            </Td>
+            <Td width={10}>
+              <AlignedDecimal value={totalResourcesRunning.cpuCount} unit={'Cores'} />
+            </Td>
           </Tr>
           <Tr>
             <Th width={10}>
               <strong>{t('Total memory:')}</strong>
             </Th>
-            <Td width={10}>{totalResources.memoryMB} MB</Td>
-            <Td width={10}>{totalResourcesRunning.memoryMB} MB</Td>
+            <Td width={10}>
+              <AlignedDecimal value={totalResources.memoryMB} unit={'MB'} />
+            </Td>
+            <Td width={10}>
+              <AlignedDecimal value={totalResourcesRunning.memoryMB} unit={'MB'} />
+            </Td>
           </Tr>
         </Tbody>
       </TableComposable>

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
@@ -1,4 +1,5 @@
 // @index(['./*', /style/g], f => `export * from '${f.path}';`)
+export * from './AlignedDecimal';
 export * from './OpenshiftPlanResources';
 export * from './OVAPlanResources';
 export * from './OvirtPlanResources';