Add sortable table to labels component

app/components/labels-section/component.js

@@ -1,21 +1,33 @@
 import Ember from 'ember';
 import ManageLabels from 'ui/mixins/manage-labels';
-import Sortable from 'ui/mixins/sortable';
 
-export default Ember.Component.extend(ManageLabels, Sortable, {
+export default Ember.Component.extend(ManageLabels, {
   model           : null,
 
   labelSource     : Ember.computed.alias('model.labels'),
-  sortableContent : Ember.computed.alias('labelArray'),
   sortBy          : 'kind',
   showKind        : true,
   descending      : true,
 
-  sorts: {
-    kind  : ['type','key'],
-    key   : ['key'],
-    value : ['value','key'],
-  },
+  headers:     [
+    {
+      name:           'kind',
+      sort:           ['type','key'],
+      translationKey: 'labelsSection.kind',
+      width:          '90',
+    },
+    {
+      name:           'key',
+      sort:           ['key'],
+      translationKey: 'labelsSection.key',
+      width:          '350',
+    },
+    {
+      name:           'value',
+      sort:           ['value','key'],
+      translationKey: 'labelsSection.value',
+    },
+  ],
 
   labelsObserver: Ember.observer('model.labels', function () {
     this.initLabels(this.get('labelSource'));

app/components/labels-section/template.hbs

@@ -1,22 +1,19 @@
-<table class="grid fixed" style="margin-bottom: 0;">
-  <thead>
-    {{#if labelArray.length}}
-      <tr>
-        {{#if showKind}}{{sortable-th sortable=this action="changeSort" name="kind" label='labelsSection.kind' width="90"}}{{/if}}
-        {{sortable-th sortable=this action="changeSort" name="key" label='labelsSection.key' width="350"}}
-        {{sortable-th sortable=this action="changeSort" name="value" label='labelsSection.value'}}
-      </tr>
-    {{/if}}
-  </thead>
-  <tbody>
-    {{#each arranged as |label|}}
-      <tr>
-        {{#if showKind}}<td data-title="{{t 'labelsSection.kind'}}:" class="valign-top">{{uc-first label.type}}</td>{{/if}}
-        <td data-title="{{t 'labelsSection.key'}}:" class="force-wrap valign-top">{{label.key}}</td>
-        <td data-title="{{t 'labelsSection.value'}}:" class="force-wrap valign-top">{{pretty-json value=label.value}}</td>
-      </tr>
-    {{else}}
-      <tr><td colspan="3" class="text-center text-muted">{{t 'labelsSection.noData'}}</td></tr>
-    {{/each}}
-  </tbody>
-</table>
+{{#sortable-table
+     classNames="grid fixed mb-0 sortable-table"
+     bulkActions=false
+     paging=false
+     search=false
+     sortBy=sortBy
+     descending=descending
+     headers=headers
+     body=labelArray
+     as |label kind|
+}}
+  {{#if (eq kind "row")}}
+    {{#if showKind}}<td data-title="{{t 'labelsSection.kind'}}:" class="valign-top">{{uc-first label.type}}</td>{{/if}}
+    <td data-title="{{t 'labelsSection.key'}}:" class="force-wrap valign-top">{{label.key}}</td>
+    <td data-title="{{t 'labelsSection.value'}}:" class="force-wrap valign-top">{{pretty-json value=label.value}}</td>
+  {{else if (eq kind "norows")}}
+    <td colspan="headers.length" class="text-center text-muted">{{t 'labelsSection.noData'}}</td>
+  {{/if}}
+{{/sortable-table}}