Show dismissable no live updating notice on the topology page

ui/app/controllers/topology.js

@@ -1,5 +1,7 @@
 import Controller from '@ember/controller';
 import { computed, action } from '@ember/object';
+import { alias } from '@ember/object/computed';
+import { inject as service } from '@ember/service';
 import classic from 'ember-classic-decorator';
 import { reduceToLargestUnit } from 'nomad-ui/helpers/format-bytes';
 
@@ -7,6 +9,10 @@ const sumAggregator = (sum, value) => sum + (value || 0);
 
 @classic
 export default class TopologyControllers extends Controller {
+  @service userSettings;
+
+  @alias('userSettings.showTopoVizPollingNotice') showPollingNotice;
+
   @computed('model.nodes.@each.datacenter')
   get datacenters() {
     return Array.from(new Set(this.model.nodes.mapBy('datacenter'))).compact();

ui/app/services/user-settings.js

@@ -4,4 +4,5 @@ import localStorageProperty from 'nomad-ui/utils/properties/local-storage';
 export default class UserSettingsService extends Service {
   @localStorageProperty('nomadPageSize', 25) pageSize;
   @localStorageProperty('nomadLogMode', 'stdout') logMode;
+  @localStorageProperty('nomadTopoVizPollingNotice', true) showTopoVizPollingNotice;
 }

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

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

ui/app/styles/core/columns.scss

@@ -9,6 +9,11 @@
     &.is-minimum {
       flex-grow: 0;
     }
+
+    &.is-400 {
+      width: 400px;
+      max-width: 400px;
+    }
   }
 
   &.is-bottom-aligned {

ui/app/templates/topology.hbs

@@ -5,7 +5,20 @@
       <ForbiddenMessage />
     {{else}}
       <div class="columns">
-        <div class="column is-narrow">
+        <div class="column is-narrow is-400">
+          {{#if this.showPollingNotice}}
+            <div class="notification is-warning">
+              <div class="columns">
+                <div class="column">
+                  <h3 class="title is-4">No Live Updating</h3>
+                  <p>The topology visualization depends on too much data to continuously poll.</p>
+                </div>
+                <div class="column is-centered is-minimum">
+                  <button data-test-polling-notice-dismiss class="button is-warning" type="button" onclick={{toggle-action "showPollingNotice" this}}>Okay</button>
+                </div>
+              </div>
+            </div>
+          {{/if}}
           <div class="boxed-section">
             <div class="boxed-section-head">
               Legend