Merge pull request #3437 from hashicorp/f-ui-sort-server-tags

Sort server tags

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);

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>

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) {