Redo column widths on the topology page.

Now the info panel has a fixed width and the TopoViz will display as a
single column if the TopoViz column is too narrow for two columns.

ui/app/components/topo-viz.js

@@ -14,9 +14,10 @@ export default class TopoViz extends Component {
   @tracked activeAllocation = null;
   @tracked activeEdges = [];
   @tracked edgeOffset = { x: 0, y: 0 };
+  @tracked viewportColumns = 2;
 
   get isSingleColumn() {
-    if (this.topology.datacenters.length <= 1) return true;
+    if (this.topology.datacenters.length <= 1 || this.viewportColumns === 1) return true;
 
     // Compute the coefficient of variance to determine if it would be
     // better to stack datacenters or place them in columns
@@ -32,6 +33,7 @@ export default class TopoViz extends Component {
   get datacenterIsSingleColumn() {
     // If there are enough nodes, use two columns of nodes within
     // a single column layout of datacenters to increase density.
+    if (this.viewportColumns === 1) return true;
     return !this.isSingleColumn || (this.isSingleColumn && this.args.nodes.length <= 20);
   }
 
@@ -124,6 +126,7 @@ export default class TopoViz extends Component {
   @action
   captureElement(element) {
     this.element = element;
+    this.determineViewportColumns();
   }
 
   @action
@@ -184,6 +187,12 @@ export default class TopoViz extends Component {
     if (this.args.onNodeSelect) this.args.onNodeSelect(this.activeNode);
   }
 
+  @action
+  determineViewportColumns() {
+    console.log(this.element.clientWidth);
+    this.viewportColumns = this.element.clientWidth < 900 ? 1 : 2;
+  }
+
   @action
   computedActiveEdges() {
     // Wait a render cycle

ui/app/styles/components/dashboard-metric.scss

@@ -1,4 +1,7 @@
 .dashboard-metric {
+  width: 350px;
+  max-width: 350px;
+
   &:not(:last-child) {
     margin-bottom: 1.5em;
   }
@@ -7,6 +10,11 @@
     margin-bottom: 0;
   }
 
+  &.column {
+    width: auto;
+    max-width: auto;
+  }
+
   .metric {
     text-align: left;
     font-weight: $weight-bold;

ui/app/templates/components/topo-viz.hbs

@@ -1,4 +1,9 @@
-<div data-test-topo-viz class="topo-viz {{if this.isSingleColumn "is-single-column"}}" {{did-insert this.buildTopology}} {{did-insert this.captureElement}}>
+<div
+  data-test-topo-viz
+  class="topo-viz {{if this.isSingleColumn "is-single-column"}}"
+  {{did-insert this.buildTopology}}
+  {{did-insert this.captureElement}}
+  {{window-resize this.determineViewportColumns}}>
   <FlexMasonry
     @columns={{if this.isSingleColumn 1 2}}
     @items={{this.topology.datacenters}}

ui/app/templates/topology.hbs

@@ -2,7 +2,7 @@
 <PageLayout>
   <section class="section is-full-width">
     <div class="columns">
-      <div class="column is-one-quarter">
+      <div class="column is-narrow">
         <div class="boxed-section">
           <div class="boxed-section-head">Legend</div>
           <div class="boxed-section-body">