Merge pull request #4542 from sg00dwin/monitoring-dashboards-safari-c…

…ard-wrap Bug 1804447: Improve display of dashboard panels
openshift · Feb 28, 2020 · fa54977 · fa54977
2 parents e355e91 + cc58558
commit fa54977
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 28 deletions.
diff --git a/frontend/public/components/monitoring/_monitoring.scss b/frontend/public/components/monitoring/_monitoring.scss
@@ -1,5 +1,35 @@
+.graph-empty-state {
+  min-height: 310px;
+}
+
+.monitoring-dashboards__card {
+  height: calc(100% - 20px);
+  margin: 0 0 20px 0;
+
+  .co-dashboard-card__body--dashboard-graph {
+    padding: 10px;
+  }
+
+  &.co-dashboard-card--gradient {
+    .pf-c-card__body {
+      max-height: 350px;
+      overflow: scroll;
+    }
+    &:after {
+      width: calc(100% - 10px);
+    }
+  }
+
+  .query-browser__wrapper {
+    border: 0;
+    margin: 0;
+    overflow: hidden;
+    padding: 0;
+  }
+}
+
 .monitoring-dashboards__card-header {
-  flex: 20 0 auto;
+  flex: 0 0 auto;
 }
 
 .monitoring-dashboards__dropdown-button {
@@ -42,34 +72,53 @@
 }
 
 .monitoring-dashboards__panel {
-  height: calc(100% - 20px);
-  margin: 0 -5px 20px -5px;
+  padding: 0 10px;
+}
 
-  .co-dashboard-card__body--dashboard-graph {
-    padding: 10px;
+.monitoring-dashboards__panel--max-1 {
+  width: 100%;
+}
+
+$screen-phone-landscape-min-width: 567px;
+
+@media (max-width: $screen-phone-landscape-min-width) {
+  .monitoring-dashboards__panel--max-2,
+  .monitoring-dashboards__panel--max-3,
+  .monitoring-dashboards__panel--max-4 {
+    min-width: 100%;
   }
+}
 
-  &.co-dashboard-card--gradient {
-    .pf-c-card__body {
-      max-height: 350px;
-      overflow: scroll;
-    }
-    &:after {
-      width: calc(100% - 10px);
-    }
+@media (min-width: $screen-phone-landscape-min-width) and (max-width: $screen-md-max) {
+  .monitoring-dashboards__panel--max-2 {
+    width: 100%;
+  }
+  .monitoring-dashboards__panel--max-3,
+  .monitoring-dashboards__panel--max-4 {
+    flex: 1 0 50%;
+    min-width: 50%;
   }
+}
 
-  .query-browser__wrapper {
-    border: 0;
-    margin: 0;
-    overflow: hidden;
-    padding: 0;
+@media (min-width: $screen-lg-min) {
+  .monitoring-dashboards__panel--max-2 {
+    flex: 1 0 50%;
+    min-width: 50%;
+  }
+  .monitoring-dashboards__panel--max-3 {
+    flex: 1 0 33%;
+		min-width: 33%;
+  }
+  .monitoring-dashboards__panel--max-4 {
+    flex: 0 0 25%;
+		min-width: 25%;
   }
 }
 
 .monitoring-dashboards__row {
   display: flex;
   flex-wrap: wrap;
+  margin: 0 -10px;
 }
 
 .monitoring-dashboards__single-stat {
@@ -307,7 +356,6 @@ $tooltip-background-color: #151515;
 .query-browser__wrapper {
   border: 1px solid $color-grey-background-border;
   margin: 0 0 20px 0;
-  min-height: 310px;
   overflow: visible;
   padding: 10px;
   width: 100%;

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,16 +367,13 @@ const Card: React.FC<CardProps> = ({ panel }) => {
     );
   }
 
-  // Our grid has 12 columns, so don't allow colSpan over 12
-  const colSpan = Math.min(getPanelSpan(panel), 12);
-
-  // Don't allow very narrow panels at intermediate page widths
-  const colSpanMd = Math.max(colSpan, 3);
-
+  const panelClassModifier = getPanelClassModifier(panel);
   return (
-    <div className={`col-xs-12 col-md-${colSpanMd} col-lg-${colSpan}`}>
+    <div
+      className={`monitoring-dashboards__panel monitoring-dashboards__panel--${panelClassModifier}`}
+    >
       <DashboardCard
-        className="monitoring-dashboards__panel"
+        className="monitoring-dashboards__card"
         gradient={panel.type === 'grafana-piechart-panel'}
       >
         <DashboardCardHeader className="monitoring-dashboards__card-header">
@@ -375,7 +390,7 @@ const Card: React.FC<CardProps> = ({ panel }) => {
 const Board: React.FC<BoardProps> = ({ rows }) => (
   <>
     {_.map(rows, (row, i) => (
-      <div className="row monitoring-dashboards__row" key={i}>
+      <div className="monitoring-dashboards__row" key={i}>
         {_.map(row.panels, (panel) => (
           <Card key={panel.id} panel={panel} />
         ))}