chore(DW): 5294 refactor resourceUsageBar

Signed-off-by: gitdallas <[email protected]>
opendatahub-io · Apr 17, 2024 · b3eb4bf · b3eb4bf
1 parent 99fe109
commit b3eb4bf
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 33 deletions.
diff --git a/frontend/src/pages/distributedWorkloads/components/WorkloadResourceUsageBar.scss b/frontend/src/pages/distributedWorkloads/components/WorkloadResourceUsageBar.scss
@@ -1,21 +1,5 @@
-.dw-workload-resource-usage-bar-container {
-  // Vertically aligns the bar and the text to its left/right
-  align-items: center;
-  // Extra margin to space out the adjacent numbers of bars in two columns
-  margin-right: var(--pf-v5-global--spacer--xl);
-}
-
 .dw-workload-resource-usage-bar {
   // Prevents extra whitespace to the right of the bar when combining measureLocation="none" with no title prop
+  // TODO: can remove this after https://github.com/patternfly/patternfly-react/issues/10278 is in place
   grid-gap: 0;
-}
-
-.dw-workload-resource-usage-bar-color-swatch {
-  font-size: var(--pf-v5-global--icon--FontSize--md);
-  &.used {
-    color: var(--pf-v5-global--primary-color--100);
-  }
-  &.requested {
-    color: #d1e0f5; // Can't find where this is defined in PF CSS...
-  }
 }
diff --git a/frontend/src/pages/distributedWorkloads/components/WorkloadResourceUsageBar.tsx b/frontend/src/pages/distributedWorkloads/components/WorkloadResourceUsageBar.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { Split, SplitItem, Progress, Tooltip, Stack, StackItem } from '@patternfly/react-core';
+import { Progress, Tooltip, Stack, StackItem, Flex, FlexItem } from '@patternfly/react-core';
 import { roundNumber } from '~/utilities/number';
-
 import './WorkloadResourceUsageBar.scss';
 
 type WorkloadResourceUsageBarProps = {
@@ -24,27 +23,23 @@ export const WorkloadResourceUsageBar: React.FC<WorkloadResourceUsageBarProps> =
   if (!showData) {
     return '-';
   }
-  const getColorSwatch = (className: string) => (
-    <span className={`dw-workload-resource-usage-bar-color-swatch ${className}`}>&#x25A0;</span>
-  );
   return (
     <Tooltip
       isContentLeftAligned
       content={
         <Stack>
           <StackItem>
-            {getColorSwatch('used')} {metricLabel} usage: {roundNumber(used, 3)} {unitLabel}
+            {metricLabel} usage: {roundNumber(used, 3)} {unitLabel}
           </StackItem>
           <StackItem>
-            {getColorSwatch('requested')} {metricLabel} requested: {roundNumber(requested, 3)}{' '}
-            {unitLabel}
+            {metricLabel} requested: {roundNumber(requested, 3)} {unitLabel}
           </StackItem>
         </Stack>
       }
     >
-      <Split hasGutter className="dw-workload-resource-usage-bar-container">
-        <SplitItem>{roundNumber(used)}</SplitItem>
-        <SplitItem isFilled style={{ textAlign: 'center', verticalAlign: 'middle' }}>
+      <Flex alignItems={{ default: 'alignItemsCenter' }}>
+        <FlexItem>{roundNumber(used)}</FlexItem>
+        <FlexItem grow={{ default: 'grow' }}>
           <Progress
             className="dw-workload-resource-usage-bar"
             value={used}
@@ -53,9 +48,9 @@ export const WorkloadResourceUsageBar: React.FC<WorkloadResourceUsageBarProps> =
             measureLocation="none"
             aria-label={progressBarAriaLabel}
           />
-        </SplitItem>
-        <SplitItem>{roundNumber(requested)}</SplitItem>
-      </Split>
+        </FlexItem>
+        <FlexItem>{roundNumber(requested)}</FlexItem>
+      </Flex>
     </Tooltip>
   );
 };
diff --git a/...ages/distributedWorkloads/global/projectMetrics/sections/WorkloadResourceMetricsTable.tsx b/...ages/distributedWorkloads/global/projectMetrics/sections/WorkloadResourceMetricsTable.tsx
@@ -81,7 +81,10 @@ export const WorkloadResourceMetricsTable: React.FC = () => {
         return (
           <Tr key={workload.metadata?.uid}>
             <Td dataLabel="Name">{workload.metadata?.name || 'Unnamed'}</Td>
-            <Td dataLabel="CPU usage (cores)">
+            <Td
+              dataLabel="CPU usage (cores)"
+              style={{ paddingRight: 'var(--pf-v5-global--spacer--xl)' }}
+            >
               <WorkloadResourceUsageBar
                 showData={showUsageBars}
                 used={usage.cpuCoresUsed}
@@ -91,7 +94,10 @@ export const WorkloadResourceMetricsTable: React.FC = () => {
                 progressBarAriaLabel="CPU usage/requested"
               />
             </Td>
-            <Td dataLabel="Memory usage (GiB)">
+            <Td
+              dataLabel="Memory usage (GiB)"
+              style={{ paddingRight: 'var(--pf-v5-global--spacer--xl)' }}
+            >
               <WorkloadResourceUsageBar
                 showData={showUsageBars}
                 used={bytesAsPreciseGiB(usage.memoryBytesUsed)}