[ui] Show ALL regions' leaders when viewing servers route

.changelog/24723.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: add leadership status for servers in other regions
+```

ui/app/models/agent.js

@@ -7,10 +7,10 @@ import { inject as service } from '@ember/service';
 import { computed } from '@ember/object';
 import Model from '@ember-data/model';
 import { attr } from '@ember-data/model';
-import classic from 'ember-classic-decorator';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 import formatHost from 'nomad-ui/utils/format-host';
 
-@classic
 export default class Agent extends Model {
   @service system;
 
@@ -29,9 +29,12 @@ export default class Agent extends Model {
     return formatHost(address, rpcPort);
   }
 
-  @computed('rpcAddr', 'system.leader.rpcAddr')
-  get isLeader() {
-    return this.get('system.leader.rpcAddr') === this.rpcAddr;
+  @tracked isLeader = false;
+
+  @action async checkForLeadership() {
+    const leaders = await this.system.leaders;
+    this.isLeader = leaders.includes(this.rpcAddr);
+    return this.isLeader;
   }
 
   @computed('tags.build')

ui/app/routes/clients.js

@@ -13,11 +13,6 @@ import classic from 'ember-classic-decorator';
 @classic
 export default class ClientsRoute extends Route.extend(WithForbiddenState) {
   @service store;
-  @service system;
-
-  beforeModel() {
-    return this.get('system.leader');
-  }
 
   model() {
     return RSVP.hash({

ui/app/routes/servers.js

@@ -15,14 +15,16 @@ export default class ServersRoute extends Route.extend(WithForbiddenState) {
   @service store;
   @service system;
 
-  beforeModel() {
-    return this.get('system.leader');
+  async beforeModel() {
+    await this.system.leaders;
   }
 
-  model() {
+  async model() {
+    const agents = await this.store.findAll('agent');
+    await Promise.all(agents.map((agent) => agent.checkForLeadership()));
     return RSVP.hash({
       nodes: this.store.findAll('node'),
-      agents: this.store.findAll('agent'),
+      agents,
     }).catch(notifyForbidden(this));
   }
 }

ui/app/services/system.js

@@ -12,27 +12,23 @@ import { namespace } from '../adapters/application';
 import jsonWithDefault from '../utils/json-with-default';
 import classic from 'ember-classic-decorator';
 import { task } from 'ember-concurrency';
-
 @classic
 export default class SystemService extends Service {
   @service token;
   @service store;
 
-  @computed('activeRegion')
-  get leader() {
-    const token = this.token;
-
-    return PromiseObject.create({
-      promise: token
-        .authorizedRequest(`/${namespace}/status/leader`)
-        .then((res) => res.json())
-        .then((rpcAddr) => ({ rpcAddr }))
-        .then((leader) => {
-          // Dirty self so leader can be used as a dependent key
-          this.notifyPropertyChange('leader.rpcAddr');
-          return leader;
-        }),
-    });
+  /**
+   * Iterates over all regions and returns a list of leaders' rpcAddrs
+   */
+  @computed('regions.[]')
+  get leaders() {
+    return Promise.all(
+      this.regions.map((region) => {
+        return this.token
+          .authorizedRequest(`/${namespace}/status/leader?region=${region}`)
+          .then((res) => res.json());
+      })
+    );
   }
 
   @computed

ui/app/templates/components/server-agent-row.hbs

@@ -4,7 +4,7 @@
 ~}}
 
 <td data-test-server-name
-  {{keyboard-shortcut 
+  {{keyboard-shortcut
     enumerated=true
     action=(action this.goToAgent)
   }}
@@ -17,13 +17,20 @@
     />
   </span></td>
 <td data-test-server-is-leader>
-
-    <Hds::Badge
-      @text={{if this.agent.isLeader "True" "False"}}
-      @icon={{if this.agent.isLeader "check-circle" ""}}
-      @color={{if this.agent.isLeader "success" "neutral"}}
-      @size="large"
-    />
+  <Hds::Badge
+    @text={{if
+      this.agent.isLeader
+      (if
+        this.agent.system.shouldShowRegions
+        (concat "True" " (" this.agent.region ")")
+        "True"
+      )
+      "False"
+    }}
+    @icon={{if this.agent.isLeader "check-circle" ""}}
+    @color={{if this.agent.isLeader "success" "neutral"}}
+    @size="large"
+  />
 </td>
 <td data-test-server-address class="is-200px is-truncatable">{{this.agent.address}}</td>
 <td data-test-server-port>{{this.agent.serfPort}}</td>