Resource Quota Charts: removed 'compact' css, quota scope changes

openshift · Feb 25, 2019 · f738c30 · f738c30
1 parent 9f97a9b
commit f738c30
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 64 deletions.
diff --git a/frontend/public/components/_cluster-overview.scss b/frontend/public/components/_cluster-overview.scss
@@ -16,11 +16,6 @@
   }
 }
 
-.group__title--no-side-borders {
-  border-left: none;
-  border-right: none;
-}
-
 .group__body {
   border: 1px solid $color-grey-background-border;
   border-top: none;

diff --git a/frontend/public/components/_quota.scss b/frontend/public/components/_quota.scss
@@ -1,12 +1,9 @@
 .co-resource-quota-chart-row {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
-  margin-bottom: 20px;
-}
-
-.co-resource-quota-chart-row--compact {
-  margin-bottom: 2px;
+  justify-content: space-evenly;
+  margin-left: 40px;
+  margin-right: 40px;
 }
 
 .co-resource-quota-empty {
@@ -21,41 +18,16 @@
   padding-left: 34px;
 }
 
-.co-resource-quota-scope__description {
-  font-size: $font-size-small;
+.quota-dashboard-scopes {
+  font-size: $font-size-h5;
   font-weight: 300;
 }
 
-.co-resource-quota-scope__description--compact {
-  display: inline;
-  padding-left: 6px;
+.co-resource-quota-scope__description {
+  font-size: $font-size-small;
+  font-weight: 300;
 }
 
 .co-resource-quota-scope__label {
   font-weight: 500;
 }
-
-.co-resource-quota-scope__label--compact {
-  display: inline;
-  font-size: $font-size-small;
-}
-
-
-.quota-dashboard-column {
-  display: flex;
-  flex-direction: column;
-}
-
-.quota-dashboard-row {
-  display: flex;
-}
-
-.quota-dashboard-scopes {
-  padding-left: 24px;
-  padding-right: 24px;
-}
-
-.quota-dashboard-scopes--compact {
-  line-height: ($line-height-base - .2);
-  margin-bottom: 2px;
-}
diff --git a/frontend/public/components/graphs/_graphs.scss b/frontend/public/components/graphs/_graphs.scss
@@ -5,12 +5,6 @@
   overflow: hidden;
 }
 
-.graph-wrapper--compact {
-  margin-top: 2px;
-  margin-bottom: 0px;
-  padding-top: 10px;
-}
-
 .graph-title {
   margin: 0;
   text-align: center;

diff --git a/frontend/public/components/overview/namespace-overview.tsx b/frontend/public/components/overview/namespace-overview.tsx
@@ -9,7 +9,7 @@ import { deleteModal, NamespaceLineCharts, NamespaceSummary, TopPodsBarChart } f
 import { Firehose, LoadingInline, ResourceLink, resourceListPathFromModel, StatusBox } from '../utils';
 import { RoleBindingModel } from '../../models';
 import { K8sResourceKind } from '../../module/k8s';
-import { getQuotaResourceTypes, hasComputeResources, QuotaGaugeCharts, QuotaScopes } from '../resource-quota';
+import { getQuotaResourceTypes, hasComputeResources, QuotaGaugeCharts, QuotaScopesInline } from '../resource-quota';
 
 const editRoleBindings = (kind, obj) => ({
   label: 'Edit Role Bindings',
@@ -52,14 +52,12 @@ const ResourceQuotaCharts = ({quota, resourceTypes}) => {
     <div className="group__title">
       <h2 className="h3">
         <ResourceLink kind="ResourceQuota" name={quota.metadata.name} className="co-resource-link-truncate"
-          namespace={quota.metadata.namespace} title={quota.metadata.name} />
+          namespace={quota.metadata.namespace} inline="true" title={quota.metadata.name} />
+        {scopes && <QuotaScopesInline className="quota-dashboard-scopes" scopes={scopes} />}
       </h2>
     </div>
     <div className="container-fluid group__body group__graphs">
-      <QuotaGaugeCharts quota={quota} resourceTypes={resourceTypes} compact />
-      {scopes && <dl className="co-m-pane__details quota-dashboard-scopes">
-        <QuotaScopes scopes={scopes} compact />
-      </dl>}
+      <QuotaGaugeCharts quota={quota} resourceTypes={resourceTypes} />
     </div>
   </div>;
 };

diff --git a/frontend/public/components/resource-quota.jsx b/frontend/public/components/resource-quota.jsx
@@ -83,39 +83,48 @@ const ResourceUsageRow = ({quota, resourceType}) => {
   </div>;
 };
 
-export const QuotaGaugeCharts = ({quota, resourceTypes, compact}) => {
+export const QuotaGaugeCharts = ({quota, resourceTypes}) => {
   const resourceTypesSet = new Set(resourceTypes);
-  return <div className={classNames('co-resource-quota-chart-row', {'co-resource-quota-chart-row--compact': compact})} >
+  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} className={classNames({'graph-wrapper--compact': compact})}
+      <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} className={classNames({'graph-wrapper--compact': compact})}
+      <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} className={classNames({'graph-wrapper--compact': compact})}
+      <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} className={classNames({'graph-wrapper--compact': compact})}
+      <Gauge title="Memory Limit" thresholds={gaugeChartThresholds}
         percent={getResourceUsage(quota, 'limits.memory').percent} />
     </div>}
   </div>;
 };
 
-export const QuotaScopes = ({scopes, compact}) => {
+export const QuotaScopesInline = ({scopes, className}) => {
+  return <span className={classNames(className)}>(
+    {scopes.map(scope => {
+      const scopeObj = _.get(quotaScopes, scope);
+      return scopeObj ? scopeObj.label : scope;
+    }).join(',')})
+  </span>;
+};
+
+export const QuotaScopesList = ({scopes}) => {
   return scopes.map(scope => {
     const scopeObj = _.get(quotaScopes, scope);
     return scopeObj ?
-      <dd key={scope} className={classNames({'quota-dashboard-scopes--compact': compact})}>
-        <div className={classNames('co-resource-quota-scope__label', {'co-resource-quota-scope__label--compact': compact})}>{scopeObj.label}</div>
-        <div className={classNames('co-resource-quota-scope__description', {'co-resource-quota-scope__description--compact': compact})}>{scopeObj.description}</div>
+      <dd key={scope}>
+        <div className="co-resource-quota-scope__label">{scopeObj.label}</div>
+        <div className="co-resource-quota-scope__description">{scopeObj.description}</div>
       </dd>
       : <dd key={scope} className="co-resource-quota-scope__label">{scope}</dd>;
   });
@@ -141,7 +150,7 @@ const Details = ({obj: rq}) => {
         {scopes && <div className="col-sm-6">
           <dl className="co-m-pane__details">
             <dt>Scopes</dt>
-            <QuotaScopes scopes={scopes} />
+            <QuotaScopesList scopes={scopes} />
           </dl>
         </div>}
       </div>