ui: Fix bug where switching topo viz allocation highlights doesn’t update charts (#10490)

This closes #10489. It adds `dependentKeyCompat` to the allocation getter so it works
as expected as a dependent key for the `tracker` computed property, as described here:
https://guides.emberjs.com/release/upgrading/current-edition/tracked-properties/#toc_backwards-compatibility

ui/app/components/primary-metric/allocation.hbs

@@ -10,7 +10,11 @@
     <StatsTimeSeries @data={{this.series}} @dataProp="data" >
       <:svg as |c|>
         {{#each (reverse this.series) as |series idx|}}
-          <c.Area @data={{series.data}} @colorScale={{this.colorScale}} @index={{idx}} />
+          <c.Area
+            @data={{series.data}}
+            @colorScale={{this.colorScale}}
+            @index={{idx}}
+            data-test-task-name={{series.name}} />
         {{/each}}
       </:svg>
       <:after as |c|>

ui/app/components/primary-metric/allocation.js

@@ -4,6 +4,7 @@ import { task, timeout } from 'ember-concurrency';
 import { assert } from '@ember/debug';
 import { inject as service } from '@ember/service';
 import { action, get, computed } from '@ember/object';
+import { dependentKeyCompat } from '@ember/object/compat';
 
 export default class AllocationPrimaryMetric extends Component {
   @service('stats-trackers-registry') statsTrackersRegistry;
@@ -18,6 +19,7 @@ export default class AllocationPrimaryMetric extends Component {
     return this.args.metric;
   }
 
+  @dependentKeyCompat
   get allocation() {
     return this.args.allocation;
   }

ui/tests/acceptance/topology-test.js

@@ -158,6 +158,34 @@ module('Acceptance | topology', function(hooks) {
     assert.equal(currentURL(), `/clients/${node.id}`);
   });
 
+  test('changing which allocation is selected changes the metric charts', async function(assert) {
+    server.create('node');
+    const job1 = server.create('job', { createAllocations: false });
+    const taskGroup1 = server.schema.find('taskGroup', job1.taskGroupIds[0]).name;
+    server.create('allocation', {
+      forceRunningClientStatus: true,
+      jobId: job1.id,
+      taskGroup1,
+    });
+
+    const job2 = server.create('job', { createAllocations: false });
+    const taskGroup2 = server.schema.find('taskGroup', job2.taskGroupIds[0]).name;
+    server.create('allocation', {
+      forceRunningClientStatus: true,
+      jobId: job2.id,
+      taskGroup2,
+    });
+
+    await Topology.visit();
+    await Topology.viz.datacenters[0].nodes[0].memoryRects[0].select();
+    const firstAllocationTaskNames = Topology.allocInfoPanel.charts[0].areas.mapBy('taskName');
+
+    await Topology.viz.datacenters[0].nodes[0].memoryRects[1].select();
+    const secondAllocationTaskNames = Topology.allocInfoPanel.charts[0].areas.mapBy('taskName');
+
+    assert.notDeepEqual(firstAllocationTaskNames, secondAllocationTaskNames);
+  });
+
   test('when a node is selected, the info panel shows information on the node', async function(assert) {
     // A high node count is required for node selection
     const nodes = server.createList('node', 51);

ui/tests/pages/topology.js

@@ -1,4 +1,4 @@
-import { attribute, clickable, create, hasClass, text, visitable } from 'ember-cli-page-object';
+import { attribute, clickable, collection, create, hasClass, text, visitable } from 'ember-cli-page-object';
 
 import TopoViz from 'nomad-ui/tests/pages/components/topo-viz';
 import notification from 'nomad-ui/tests/pages/components/notification';
@@ -59,5 +59,11 @@ export default create({
 
     client: text('[data-test-client]'),
     visitClient: clickable('[data-test-client]'),
+
+    charts: collection('[data-test-primary-metric]', {
+      areas: collection('[data-test-chart-area]', {
+        taskName: attribute('data-test-task-name'),
+      }),
+    }),
   },
 });