Project Status Dashboard: No Limit/Request resource quota placeholder…

… charts.
openshift · Feb 25, 2019 · f22175f · f22175f
1 parent f738c30
commit f22175f
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 23 deletions.
diff --git a/frontend/public/components/graphs/gauge.jsx b/frontend/public/components/graphs/gauge.jsx
@@ -175,8 +175,15 @@ class Gauge_ extends BaseGraph {
     } else {
       data = Math.round(data);
     }
-    this.layout.annotations[0].text = `${data}%`;
-    this.layout.annotations[0].font.color = fontColor;
+
+    if (this.props.centerText){
+      this.layout.annotations[0].text = this.props.centerText;
+      this.layout.annotations[0].font.size = 16;
+    } else {
+      this.layout.annotations[0].text = `${data}%`;
+      this.layout.annotations[0].font.color = fontColor;
+    }
+
     relayout(this.node, this.layout);
   }
 }

diff --git a/frontend/public/components/resource-quota.jsx b/frontend/public/components/resource-quota.jsx
@@ -15,7 +15,8 @@ const { common } = Kebab.factory;
 const menuActions = [...common];
 
 const quotaKind = quota => quota.metadata.namespace ? referenceForModel(ResourceQuotaModel) : referenceForModel(ClusterResourceQuotaModel);
-const gaugeChartThresholds = {warn: 90,error: 101};
+const gaugeChartThresholds = {warn: 90, error: 101};
+const gaugeChartNoThresholds = {warn: 100, error: 100};
 
 const quotaScopes = Object.freeze({
   'Terminating': {label: 'Terminating', description: 'Affects pods that have an active deadline. These pods usually include builds, deployers, and jobs.'},
@@ -86,26 +87,46 @@ const ResourceUsageRow = ({quota, resourceType}) => {
 export const QuotaGaugeCharts = ({quota, resourceTypes}) => {
   const resourceTypesSet = new Set(resourceTypes);
   return <div className="co-resource-quota-chart-row">
-    {(resourceTypesSet.has('requests.cpu') || resourceTypesSet.has('cpu')) &&
-    <div className="co-resource-quota-gauge-chart">
-      <Gauge title="CPU Request" thresholds={gaugeChartThresholds}
-        percent={getResourceUsage(quota, resourceTypesSet.has('requests.cpu') ? 'requests.cpu' : 'cpu').percent} />
-    </div>}
-    {resourceTypesSet.has('limits.cpu') &&
-    <div className="co-resource-quota-gauge-chart">
-      <Gauge title="CPU Limit" thresholds={gaugeChartThresholds}
-        percent={getResourceUsage(quota, 'limits.cpu').percent} />
-    </div>}
-    {(resourceTypesSet.has('requests.memory') || resourceTypesSet.has('memory')) &&
-    <div className="co-resource-quota-gauge-chart">
-      <Gauge title="Memory Request" thresholds={gaugeChartThresholds}
-        percent={getResourceUsage(quota, resourceTypesSet.has('requests.memory') ? 'requests.memory' : 'memory').percent} />
-    </div>}
-    {resourceTypesSet.has('limits.memory') &&
-    <div className="co-resource-quota-gauge-chart">
-      <Gauge title="Memory Limit" thresholds={gaugeChartThresholds}
-        percent={getResourceUsage(quota, 'limits.memory').percent} />
-    </div>}
+    {(resourceTypesSet.has('requests.cpu') || resourceTypesSet.has('cpu')) ?
+      <div className="co-resource-quota-gauge-chart">
+        <Gauge title="CPU Request" thresholds={gaugeChartThresholds}
+          percent={getResourceUsage(quota, resourceTypesSet.has('requests.cpu') ? 'requests.cpu' : 'cpu').percent} />
+      </div>
+      :
+      <div className="co-resource-quota-gauge-chart">
+        <Gauge title="CPU Request" thresholds={gaugeChartNoThresholds} centerText="No Request" />
+      </div>
+    }
+    {resourceTypesSet.has('limits.cpu') ?
+      <div className="co-resource-quota-gauge-chart">
+        <Gauge title="CPU Limit" thresholds={gaugeChartThresholds}
+          percent={getResourceUsage(quota, 'limits.cpu').percent} />
+      </div>
+      :
+      <div className="co-resource-quota-gauge-chart">
+        <Gauge title="CPU Limit" thresholds={gaugeChartNoThresholds} centerText="No Limit" />
+      </div>
+    }
+    {(resourceTypesSet.has('requests.memory') || resourceTypesSet.has('memory')) ?
+      <div className="co-resource-quota-gauge-chart">
+        <Gauge title="Memory Request" thresholds={gaugeChartThresholds}
+          percent={getResourceUsage(quota, resourceTypesSet.has('requests.memory') ? 'requests.memory' : 'memory').percent} />
+      </div>
+      :
+      <div className="co-resource-quota-gauge-chart">
+        <Gauge title="Memory Request" thresholds={gaugeChartNoThresholds} centerText="No Request" />
+      </div>
+    }
+    {resourceTypesSet.has('limits.memory') ?
+      <div className="co-resource-quota-gauge-chart">
+        <Gauge title="Memory Limit" thresholds={gaugeChartThresholds}
+          percent={getResourceUsage(quota, 'limits.memory').percent} />
+      </div>
+      :
+      <div className="co-resource-quota-gauge-chart">
+        <Gauge title="Memory Limit" thresholds={gaugeChartNoThresholds} centerText="No Limit" />
+      </div>
+    }
   </div>;
 };