fix for bug 1848512: Wrong interpretation of labels for resource quot…

…a diagram
openshift · Aug 24, 2020 · 733e7a3 · 733e7a3
1 parent 42e0395
commit 733e7a3
Showing 1 changed file with 28 additions and 14 deletions.
diff --git a/frontend/public/components/resource-quota.jsx b/frontend/public/components/resource-quota.jsx
@@ -191,16 +191,32 @@ const NoQuotaGuage = ({ title, className }) => (
 
 export const QuotaGaugeCharts = ({ quota, resourceTypes, chartClassName = null }) => {
   const resourceTypesSet = new Set(resourceTypes);
+  const cpuRequestUsagePercent =
+    resourceTypesSet.has('requests.cpu') || resourceTypesSet.has('cpu')
+      ? getResourceUsage(quota, resourceTypesSet.has('requests.cpu') ? 'requests.cpu' : 'cpu')
+          .percent
+      : 0;
+  const cpuLimitUsagePercent = resourceTypesSet.has('limits.cpu')
+    ? getResourceUsage(quota, 'limits.cpu').percent
+    : 0;
+  const memoryRequestUsagePercent =
+    resourceTypesSet.has('requests.memory') || resourceTypesSet.has('memory')
+      ? getResourceUsage(
+          quota,
+          resourceTypesSet.has('requests.memory') ? 'requests.memory' : 'memory',
+        ).percent
+      : 0;
+  const memoryLimitUsagePercent = resourceTypesSet.has('limits.memory')
+    ? getResourceUsage(quota, 'limits.memory').percent
+    : 0;
   return (
     <div className="co-resource-quota-chart-row">
-      {resourceTypesSet.has('requests.cpu') || resourceTypesSet.has('cpu') ? (
+      {cpuRequestUsagePercent ? (
         <div className="co-resource-quota-gauge-chart">
           <GaugeChart
             data={{
-              y: getResourceUsage(
-                quota,
-                resourceTypesSet.has('requests.cpu') ? 'requests.cpu' : 'cpu',
-              ).percent,
+              x: `${cpuRequestUsagePercent}%`,
+              y: cpuRequestUsagePercent,
             }}
             thresholds={gaugeChartThresholds}
             title="CPU Request"
@@ -212,10 +228,10 @@ export const QuotaGaugeCharts = ({ quota, resourceTypes, chartClassName = null }
           <NoQuotaGuage title="CPU Request" />
         </div>
       )}
-      {resourceTypesSet.has('limits.cpu') ? (
+      {cpuLimitUsagePercent ? (
         <div className="co-resource-quota-gauge-chart">
           <GaugeChart
-            data={{ y: getResourceUsage(quota, 'limits.cpu').percent }}
+            data={{ x: `${cpuLimitUsagePercent}%`, y: cpuLimitUsagePercent }}
             thresholds={gaugeChartThresholds}
             title="CPU Limit"
             className={chartClassName}
@@ -226,14 +242,12 @@ export const QuotaGaugeCharts = ({ quota, resourceTypes, chartClassName = null }
           <NoQuotaGuage title="CPU Limit" className={chartClassName} />
         </div>
       )}
-      {resourceTypesSet.has('requests.memory') || resourceTypesSet.has('memory') ? (
+      {memoryRequestUsagePercent ? (
         <div className="co-resource-quota-gauge-chart">
           <GaugeChart
             data={{
-              y: getResourceUsage(
-                quota,
-                resourceTypesSet.has('requests.memory') ? 'requests.memory' : 'memory',
-              ).percent,
+              x: `${memoryRequestUsagePercent}%`,
+              y: memoryRequestUsagePercent,
             }}
             thresholds={gaugeChartThresholds}
             title="Memory Request"
@@ -245,10 +259,10 @@ export const QuotaGaugeCharts = ({ quota, resourceTypes, chartClassName = null }
           <NoQuotaGuage title="Memory Request" className={chartClassName} />
         </div>
       )}
-      {resourceTypesSet.has('limits.memory') ? (
+      {memoryLimitUsagePercent ? (
         <div className="co-resource-quota-gauge-chart">
           <GaugeChart
-            data={{ y: getResourceUsage(quota, 'limits.memory').percent }}
+            data={{ x: `${memoryLimitUsagePercent}%`, y: memoryLimitUsagePercent }}
             thresholds={gaugeChartThresholds}
             title="Memory Limit"
             className={chartClassName}