Tests for multi-region leadership badges and css same-line fix

ui/app/styles/core/table.scss

@@ -110,7 +110,8 @@
       white-space: nowrap;
     }
 
-    &.node-status-badges {
+    &.node-status-badges,
+    &.server-status-badges {
       .hds-badge__text {
         white-space: nowrap;
       }

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

@@ -16,7 +16,7 @@
       @size="large"
     />
   </span></td>
-<td data-test-server-is-leader>
+<td data-test-server-is-leader class="server-status-badges">
   <Hds::Badge
     @text={{if
       this.agent.isLeader
@@ -30,6 +30,7 @@
     @icon={{if this.agent.isLeader "check-circle" ""}}
     @color={{if this.agent.isLeader "success" "neutral"}}
     @size="large"
+    class="no-wrap"
   />
 </td>
 <td data-test-server-address class="is-200px is-truncatable">{{this.agent.address}}</td>

ui/mirage/config.js

@@ -13,8 +13,14 @@ import { copy } from 'ember-copy';
 import formatHost from 'nomad-ui/utils/format-host';
 import faker from 'nomad-ui/mirage/faker';
 
-export function findLeader(schema) {
-  const agent = schema.agents.first();
+export function findLeader(schema, region = null) {
+  let agent;
+  let agents = schema.agents.all().models;
+  if (region) {
+    agent = agents.find((agent) => agent.member?.Tags?.region === region);
+  } else {
+    agent = agents[0];
+  }
   return formatHost(agent.member.Address, agent.member.Tags.port);
 }
 
@@ -741,8 +747,9 @@ export default function () {
     return logEncode(logFrames, logFrames.length - 1);
   });
 
-  this.get('/status/leader', function (schema) {
-    return JSON.stringify(findLeader(schema));
+  this.get('/status/leader', function (schema, { queryParams: { region } }) {
+    let leader = JSON.stringify(findLeader(schema, region));
+    return leader;
   });
 
   this.get('/acl/tokens', function ({ tokens }, req) {

ui/mirage/factories/agent.js

@@ -90,5 +90,6 @@ function generateTags(serfPort) {
       rpcPortCandidate === serfPort ? rpcPortCandidate + 1 : rpcPortCandidate,
     dc: faker.helpers.randomize(DATACENTERS),
     build: faker.helpers.randomize(AGENT_BUILDS),
+    region: 'global',
   };
 }

ui/mirage/scenarios/default.js

@@ -92,6 +92,9 @@ function smallCluster(server) {
   server.create('feature', { name: 'Dynamic Application Sizing' });
   server.create('feature', { name: 'Sentinel Policies' });
   server.createList('agent', 3, 'withConsulLink', 'withVaultLink');
+  if (withRegions) {
+    server.db.agents[0].member.Tags.region = server.db.regions[0].id;
+  }
   server.createList('node-pool', 2);
   server.createList('node', 5);
   server.create(

ui/tests/acceptance/servers-list-test.js

@@ -35,6 +35,10 @@ module('Acceptance | servers list', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
 
+  hooks.beforeEach(function () {
+    server.create('region', { id: 'global' });
+  });
+
   test('it passes an accessibility audit', async function (assert) {
     minimumSetup();
     await ServersList.visit();
@@ -51,7 +55,6 @@ module('Acceptance | servers list', function (hooks) {
     const sortedAgents = server.db.agents.sort(agentSort(leader)).reverse();
 
     await ServersList.visit();
-
     await percySnapshot(assert);
 
     assert.equal(
@@ -116,4 +119,31 @@ module('Acceptance | servers list', function (hooks) {
     await ServersList.error.seekHelp();
     assert.equal(currentURL(), '/settings/tokens');
   });
+
+  test('multiple regions should each show leadership values', async function (assert) {
+    server.createList('node-pool', 1);
+    server.createList('node', 1);
+    server.create('region', { id: 'global' });
+    server.create('region', { id: 'galactic' });
+    server.createList('agent', 3);
+    server.db.agents[0].member.Tags.region = 'global';
+    server.db.agents[1].member.Tags.region = 'galactic';
+    server.db.agents[2].member.Tags.region = 'galactic';
+    await ServersList.visit();
+    assert.equal(
+      ServersList.servers.objectAt(0).leader,
+      'True (galactic)',
+      'Leadership is shown for the galactic region'
+    );
+    assert.equal(
+      ServersList.servers.objectAt(1).leader,
+      'True (global)',
+      'Leadership is shown for the global region'
+    );
+    assert.equal(
+      ServersList.servers.objectAt(2).leader,
+      'False',
+      'Non-leader servers are shown'
+    );
+  });
 });