Very basic checkbox and mirage alloc placement depending on running node

Author: philrenaud

ui/app/components/topo-viz.js

@@ -93,6 +93,7 @@ export default class TopoViz extends Component {
   buildTopology() {
     const nodes = this.args.nodes;
     const allocations = this.args.allocations;
+    console.log('building topo', nodes, allocations);
 
     // Nodes may not have a resources property due to having an old Nomad agent version.
     const badNodes = [];

ui/app/controllers/topology.js

@@ -157,6 +157,8 @@ export default class TopologyControllers extends Controller.extend(Searchable) {
 
   @alias('userSettings.showTopoVizPollingNotice') showPollingNotice;
 
+  @tracked showEmptyNodes = true;
+
   @tracked pre09Nodes = null;
 
   get filteredNodes() {
@@ -191,7 +193,8 @@ export default class TopologyControllers extends Controller.extend(Searchable) {
           : true) &&
         (node.name.includes(searchTerm) ||
           node.datacenter.includes(searchTerm) ||
-          node.nodeClass.includes(searchTerm))
+          node.nodeClass.includes(searchTerm)) &&
+        (this.showEmptyNodes || node.allocations.length > 0)
       );
     });
   }

ui/app/routes/topology.js

@@ -16,6 +16,7 @@ export default class TopologyRoute extends Route.extend(WithForbiddenState) {
   @service system;
 
   model() {
+    console.log('re-firing model');
     return RSVP.hash({
       allocations: this.store.query('allocation', {
         resources: true,

ui/app/templates/topology.hbs

@@ -487,6 +487,14 @@
             </div>
             <div class="toolbar-item is-right-aligned is-mobile-full-width">
               <div class="button-bar">
+                {{!-- HDS checkbox for selecting whether to show or hide empty nodes, default true --}}
+                Show empty nodes? {{this.showEmptyNodes}}
+                <Hds::Form::Checkbox::Field checked={{this.showEmptyNodes}} name="show-empty-nodes"
+                  {{on "change" (fn (mut this.showEmptyNodes) (not this.showEmptyNodes))}}
+                 as |F|>
+                  <F.Label>Show Empty Nodes</F.Label>
+                </Hds::Form::Checkbox::Field>
+
                 <MultiSelectDropdown
                   data-test-node-pool-facet
                   @label="Node Pool"
@@ -525,6 +533,7 @@
               </div>
             </div>
           </div>
+          {{log "Allocations from topology.hbs" this.model.allocations}}
           <TopoViz
             @nodes={{this.filteredNodes}}
             @allocations={{this.model.allocations}}
@@ -541,4 +550,4 @@
       </div>
     {{/if}}
   </section>
-</PageLayout>
+</PageLayout>

ui/mirage/factories/allocation.js

@@ -194,7 +194,9 @@ export default Factory.extend({
     const namespace = allocation.namespace || job.namespace;
     const node = allocation.nodeId
       ? server.db.nodes.find(allocation.nodeId)
-      : pickOne(server.db.nodes);
+      : pickOne(
+          server.db.nodes.where({ status: 'ready' }) || pickOne(server.db.nodes)
+        );
     const taskGroup = allocation.taskGroup
       ? server.db.taskGroups.findBy({ name: allocation.taskGroup })
       : pickOne(server.db.taskGroups.where({ jobId: job.id }));

ui/mirage/scenarios/default.js

@@ -105,6 +105,12 @@ function smallCluster(server) {
     },
     'withMeta'
   );
+  // Create one more node that is unusable
+  server.create('node', {
+    name: 'unusable-node',
+    status: 'down',
+    meta: { unusable: true },
+  });
   server.createList('job', 10, { createRecommendations: true });
   server.create('job', {
     withGroupServices: true,