From ea5851984022dc2c9d44d14e9ee531f406cbc6de Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Tue, 24 Oct 2017 11:29:00 -0700
Subject: [PATCH] Sort server tags

---
 ui/app/controllers/servers/server.js      | 12 +++++++++++-
 ui/app/templates/servers/server.hbs       |  8 ++++----
 ui/tests/acceptance/server-detail-test.js | 13 ++++++++-----
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/ui/app/controllers/servers/server.js b/ui/app/controllers/servers/server.js
index c9ef734e8..94f5f0bdd 100644
--- a/ui/app/controllers/servers/server.js
+++ b/ui/app/controllers/servers/server.js
@@ -1,10 +1,20 @@
 import Ember from 'ember';
 
-const { Controller } = Ember;
+const { Controller, computed } = Ember;
 
 export default Controller.extend({
   activeTab: 'tags',
 
+  sortedTags: computed('model.tags', function() {
+    const tags = this.get('model.tags') || {};
+    return Object.keys(tags)
+      .map(name => ({
+        name,
+        value: tags[name],
+      }))
+      .sortBy('name');
+  }),
+
   actions: {
     setTab(tab) {
       this.set('activeTab', tab);
diff --git a/ui/app/templates/servers/server.hbs b/ui/app/templates/servers/server.hbs
index 8c32c9184..231d704e1 100644
--- a/ui/app/templates/servers/server.hbs
+++ b/ui/app/templates/servers/server.hbs
@@ -12,12 +12,12 @@
           </tr>
         </thead>
         <tbody>
-          {{#each-in model.tags as |name value|}}
+          {{#each sortedTags as |tag|}}
             <tr>
-              <td>{{name}}</td>
-              <td>{{value}}</td>
+              <td>{{tag.name}}</td>
+              <td>{{tag.value}}</td>
             </tr>
-          {{/each-in}}
+          {{/each}}
         </tbody>
       </table>
     </div>
diff --git a/ui/tests/acceptance/server-detail-test.js b/ui/tests/acceptance/server-detail-test.js
index 2815df672..94bd414b6 100644
--- a/ui/tests/acceptance/server-detail-test.js
+++ b/ui/tests/acceptance/server-detail-test.js
@@ -23,11 +23,14 @@ test('the server detail page should list all tags for the server', function(asse
   const tags = agent.tags;
 
   assert.equal(findAll('.server-tags tbody tr').length, Object.keys(tags).length, '# of tags');
-  Object.keys(tags).forEach((key, index) => {
-    const row = $(`.server-tags tbody tr:eq(${index})`);
-    assert.equal(row.find('td:eq(0)').text(), key, `Label: ${key}`);
-    assert.equal(row.find('td:eq(1)').text(), tags[key], `Value: ${tags[key]}`);
-  });
+  Object.keys(tags)
+    .map(name => ({ name, value: tags[name] }))
+    .sortBy('name')
+    .forEach((tag, index) => {
+      const row = $(`.server-tags tbody tr:eq(${index})`);
+      assert.equal(row.find('td:eq(0)').text(), tag.name, `Label: ${tag.name}`);
+      assert.equal(row.find('td:eq(1)').text(), tag.value, `Value: ${tag.value}`);
+    });
 });
 
 test('the list of servers from /servers should still be present', function(assert) {