From 178af693582567a9a9fa1e565055bf571c78a3e8 Mon Sep 17 00:00:00 2001
From: Luiz Aoqui <luiz@hashicorp.com>
Date: Thu, 21 Oct 2021 16:13:57 -0400
Subject: [PATCH] ui: display server version in index table

---
 ui/app/models/agent.js                           | 5 +++++
 ui/app/templates/components/server-agent-row.hbs | 3 ++-
 ui/app/templates/servers/index.hbs               | 3 ++-
 ui/mirage/factories/agent.js                     | 6 ++++++
 ui/tests/acceptance/servers-list-test.js         | 1 +
 ui/tests/pages/servers/list.js                   | 1 +
 6 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/ui/app/models/agent.js b/ui/app/models/agent.js
index be70e5467b3..4f902c670cb 100644
--- a/ui/app/models/agent.js
+++ b/ui/app/models/agent.js
@@ -28,4 +28,9 @@ export default class Agent extends Model {
   get isLeader() {
     return this.get('system.leader.rpcAddr') === this.rpcAddr;
   }
+
+  @computed('tags.[]')
+  get version() {
+    return this.tags?.build || '';
+  }
 }
diff --git a/ui/app/templates/components/server-agent-row.hbs b/ui/app/templates/components/server-agent-row.hbs
index ea1353f07bd..5c16fc3153c 100644
--- a/ui/app/templates/components/server-agent-row.hbs
+++ b/ui/app/templates/components/server-agent-row.hbs
@@ -1,6 +1,7 @@
 <td data-test-server-name><LinkTo @route="servers.server" @model={{this.agent.id}} class="is-primary">{{this.agent.name}}</LinkTo></td>
 <td data-test-server-status>{{this.agent.status}}</td>
 <td data-test-server-is-leader>{{if this.agent.isLeader "True" "False"}}</td>
-<td data-test-server-address>{{this.agent.address}}</td>
+<td data-test-server-address class="is-200px is-truncatable">{{this.agent.address}}</td>
 <td data-test-server-port>{{this.agent.serfPort}}</td>
 <td data-test-server-datacenter>{{this.agent.datacenter}}</td>
+<td data-test-server-version>{{this.agent.version}}</td>
diff --git a/ui/app/templates/servers/index.hbs b/ui/app/templates/servers/index.hbs
index 8173b9100da..1daed7b4561 100644
--- a/ui/app/templates/servers/index.hbs
+++ b/ui/app/templates/servers/index.hbs
@@ -16,9 +16,10 @@
           <t.sort-by @prop="name">Name</t.sort-by>
           <t.sort-by @prop="status">Status</t.sort-by>
           <t.sort-by @prop="isLeader">Leader</t.sort-by>
-          <t.sort-by @prop="address">Address</t.sort-by>
+          <t.sort-by @class="is-200px is-truncatable" @prop="address">Address</t.sort-by>
           <t.sort-by @prop="serfPort">port</t.sort-by>
           <t.sort-by @prop="datacenter">Datacenter</t.sort-by>
+          <t.sort-by @prop="version">Version</t.sort-by>
         </t.head>
         <t.body as |row|>
           <ServerAgentRow data-test-server-agent-row @agent={{row.model}} />
diff --git a/ui/mirage/factories/agent.js b/ui/mirage/factories/agent.js
index cf985d95ba4..47f96df6c50 100644
--- a/ui/mirage/factories/agent.js
+++ b/ui/mirage/factories/agent.js
@@ -5,6 +5,7 @@ import { DATACENTERS } from '../common';
 
 const UUIDS = provide(100, faker.random.uuid.bind(faker.random));
 const AGENT_STATUSES = ['alive', 'leaving', 'left', 'failed'];
+const AGENT_BUILDS = ['1.1.0-beta', '1.0.2-alpha+ent', ...provide(5, faker.system.semver)];
 
 export default Factory.extend({
   id: i => (i / 100 >= 1 ? `${UUIDS[i]}-${i}` : UUIDS[i]),
@@ -29,6 +30,10 @@ export default Factory.extend({
       Tags: generateTags(serfPort),
     };
   },
+
+  version() {
+    return this.member.Tags?.build || '';
+  },
 });
 
 function generateName() {
@@ -44,5 +49,6 @@ function generateTags(serfPort) {
   return {
     port: rpcPortCandidate === serfPort ? rpcPortCandidate + 1 : rpcPortCandidate,
     dc: faker.helpers.randomize(DATACENTERS),
+    build: faker.helpers.randomize(AGENT_BUILDS),
   };
 }
diff --git a/ui/tests/acceptance/servers-list-test.js b/ui/tests/acceptance/servers-list-test.js
index d4b30c580ab..05ac3f327e7 100644
--- a/ui/tests/acceptance/servers-list-test.js
+++ b/ui/tests/acceptance/servers-list-test.js
@@ -63,6 +63,7 @@ module('Acceptance | servers list', function(hooks) {
     assert.equal(agentRow.address, agent.member.Address, 'Address');
     assert.equal(agentRow.serfPort, agent.member.Port, 'Serf Port');
     assert.equal(agentRow.datacenter, agent.member.Tags.dc, 'Datacenter');
+    assert.equal(agentRow.version, agent.version, 'Version');
   });
 
   test('each server should link to the server detail page', async function(assert) {
diff --git a/ui/tests/pages/servers/list.js b/ui/tests/pages/servers/list.js
index 9f8081e6bca..cc884d4e1d6 100644
--- a/ui/tests/pages/servers/list.js
+++ b/ui/tests/pages/servers/list.js
@@ -11,6 +11,7 @@ export default create({
     address: text('[data-test-server-address]'),
     serfPort: text('[data-test-server-port]'),
     datacenter: text('[data-test-server-datacenter]'),
+    version: text('[data-test-server-version]'),
 
     clickRow: clickable(),
     clickName: clickable('[data-test-server-name] a'),