From 6e55d8a6ebd349550977d42f8a3322484c8eb4f3 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Tue, 29 Sep 2020 14:23:58 -0700
Subject: [PATCH] Conditionally use the FlexMasonry layout for datacenters
 within TopoViz

---
 ui/app/styles/charts/topo-viz-node.scss             | 4 ++++
 ui/app/templates/components/topo-viz/datacenter.hbs | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/ui/app/styles/charts/topo-viz-node.scss b/ui/app/styles/charts/topo-viz-node.scss
index e0006a614..61db0702b 100644
--- a/ui/app/styles/charts/topo-viz-node.scss
+++ b/ui/app/styles/charts/topo-viz-node.scss
@@ -62,6 +62,10 @@
   }
 }
 
+.flex-masonry-columns-2 > .flex-masonry-item > .chart.topo-viz-node svg {
+  width: calc(100% - 0.75em);
+}
+
 .chart.topo-viz-edges {
   width: 100%;
   height: 100%;
diff --git a/ui/app/templates/components/topo-viz/datacenter.hbs b/ui/app/templates/components/topo-viz/datacenter.hbs
index 655976fca..810f6e810 100644
--- a/ui/app/templates/components/topo-viz/datacenter.hbs
+++ b/ui/app/templates/components/topo-viz/datacenter.hbs
@@ -7,11 +7,11 @@
       {{this.aggregatedAllocationResources.cpu}}/{{this.aggregatedNodeResources.cpu}} Mhz</span>
   </div>
   <div class="boxed-section-body">
-    {{#each @datacenter.nodes as |node|}}
+    <FlexMasonry @columns={{if @isSingleColumn 1 2}} @items={{@datacenter.nodes}} as |node|>
       <TopoViz::Node
         @node={{node}}
         @heightScale={{@heightScale}}
         @onAllocationSelect={{@onAllocationSelect}} />
-    {{/each}}
+    </FlexMasonry>
   </div>
 </div>