Monitoring Dashboards: Tweak panel class modifier logic

openshift · Feb 27, 2020 · e44e96a · e44e96a
1 parent 2229a87
commit e44e96a
Showing 1 changed file with 22 additions and 14 deletions.
diff --git a/frontend/public/components/monitoring/dashboards/index.tsx b/frontend/public/components/monitoring/dashboards/index.tsx
@@ -338,6 +338,24 @@ const getPanelSpan = (panel: Panel): number => {
   return 12;
 };
 
+const getPanelClassModifier = (panel: Panel): string => {
+  const span: number = getPanelSpan(panel);
+  switch (span) {
+    case 6:
+      return 'max-2';
+    case 2:
+    // fallthrough
+    case 4:
+    // fallthrough
+    case 5:
+      return 'max-3';
+    case 3:
+      return 'max-4';
+    default:
+      return 'max-1';
+  }
+};
+
 const Card: React.FC<CardProps> = ({ panel }) => {
   if (panel.type === 'row') {
     return (
@@ -349,21 +367,11 @@ const Card: React.FC<CardProps> = ({ panel }) => {
     );
   }
 
-  const panelSpan: number = getPanelSpan(panel);
-  // If panel.span is greater than 12, default colSpan to 12
-  const colSpan: number = panelSpan > 12 ? 12 : panelSpan;
-
-  let colSpanSize = 'max-1';
-  if (colSpan == 6) {
-    colSpanSize = 'max-2';
-  } else if (colSpan == 2 || colSpan == 4 || colSpan == 5) {
-    colSpanSize = 'max-3';
-  } else if (colSpan == 3) {
-    colSpanSize = 'max-4';
-  }
-
+  const panelClassModifier = getPanelClassModifier(panel);
   return (
-    <div className={`monitoring-dashboards__panel monitoring-dashboards__panel--${colSpanSize}`}>
+    <div
+      className={`monitoring-dashboards__panel monitoring-dashboards__panel--${panelClassModifier}`}
+    >
       <DashboardCard
         className="monitoring-dashboards__card"
         gradient={panel.type === 'grafana-piechart-panel'}