Monitoring Dashboards: Limit bar chart height

Uses a gradient at the bottom of the card to indicate it is scrollable.
openshift · Feb 6, 2020 · b49b757 · b49b757
1 parent f15f1af
commit b49b757
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/frontend/public/components/monitoring/_monitoring.scss b/frontend/public/components/monitoring/_monitoring.scss
@@ -1,3 +1,7 @@
+.monitoring-dashboards__bar-chart {
+  margin-right: 10px;
+}
+
 .monitoring-dashboards__card-header {
   flex: 20 0 auto;
 }
@@ -24,6 +28,8 @@
 .monitoring-dashboards__panel {
   height: calc(100% - 20px);
   margin: 0 -5px 20px -5px;
+  max-height: 400px;
+  overflow: scroll;
 
   .co-dashboard-card__body--dashboard-graph {
     padding: 0;

diff --git a/frontend/public/components/monitoring/dashboards/bar-chart.tsx b/frontend/public/components/monitoring/dashboards/bar-chart.tsx
@@ -2,6 +2,10 @@ import * as React from 'react';
 
 import { Bar } from '../../graphs';
 
-const BarChart: React.FC<{ query: string }> = ({ query }) => <Bar query={query} />;
+const BarChart: React.FC<{ query: string }> = ({ query }) => (
+  <div className="monitoring-dashboards__bar-chart">
+    <Bar query={query} />
+  </div>
+);
 
 export default BarChart;
diff --git a/frontend/public/components/monitoring/dashboards/index.tsx b/frontend/public/components/monitoring/dashboards/index.tsx
@@ -226,9 +226,11 @@ const Card_: React.FC<CardProps> = ({ panel, pollInterval, timespan, variables }
   const variablesJS = variables.toJS();
   const queries = rawQueries.map((expr) => evaluateTemplate(expr, variablesJS));
 
+  const isBarChart = panel.type === 'grafana-piechart-panel';
+
   return (
     <div className={`col-xs-12 col-sm-${colSpanSm} col-lg-${colSpan}`}>
-      <DashboardCard className="monitoring-dashboards__panel">
+      <DashboardCard className="monitoring-dashboards__panel" gradient={isBarChart}>
         <DashboardCardHeader className="monitoring-dashboards__card-header">
           <DashboardCardTitle>{panel.title}</DashboardCardTitle>
         </DashboardCardHeader>
@@ -237,7 +239,7 @@ const Card_: React.FC<CardProps> = ({ panel, pollInterval, timespan, variables }
             'co-dashboard-card__body--dashboard-graph': panel.type === 'graph',
           })}
         >
-          {panel.type === 'grafana-piechart-panel' && <BarChart query={queries[0]} />}
+          {isBarChart && <BarChart query={queries[0]} />}
           {panel.type === 'graph' && (
             <Graph
               formatLegendLabel={panel.legend?.show ? formatLegendLabel : undefined}