Merge pull request #1214 from westlywright/concloud

General Bug Fixes
2017-06-06 14:10:11 -07:00 · 2017-06-06 14:10:11 -07:00 · afaf71d602
parent 39dc9d5c4a 3492b0416c
commit afaf71d602
17 changed files with 382 additions and 178 deletions
--- a/app/apps-tab/index/controller.js
+++ b/app/apps-tab/index/controller.js
@ -1,4 +1,5 @@
 import Ember from 'ember';
+import C from 'ui/utils/constants';
 import { tagsToArray } from 'ui/models/stack';

 export default Ember.Controller.extend({
@ -30,7 +31,12 @@ export default Ember.Controller.extend({

  filteredStacks: function() {
    var needTags = tagsToArray(this.get('tags'));
-    var out = this.get('model.stacks').filterBy('isFromCatalog', true);
+    var out      = this.get('model.stacks').filter((stack) => {
+      if (stack.get('isFromCatalog') && C.REMOVEDISH_STATES.indexOf(stack.get('state')) === -1) {
+        return true;
+      }
+      return false;
+    });

    if ( !this.get('prefs.showSystemResources') ) {
      out = out.filterBy('system', false);
@ -41,5 +47,5 @@ export default Ember.Controller.extend({
    }

    return out;
-  }.property('model.stacks.@each.{type,isFromCatalog,tags}','tags','prefs.showSystemResources'),
+  }.property('model.stacks.@each.{type,isFromCatalog,tags,state}','tags','prefs.showSystemResources'),
 });
--- a/app/apps-tab/index/route.js
+++ b/app/apps-tab/index/route.js
@ -6,7 +6,7 @@ export default Ember.Route.extend({
  catalog: Ember.inject.service(),

  model() {
-    return this.get('store').find('stack').then((stacks) => {
+    return this.get('store').findAll('stack').then((stacks) => {
      let deps = [];
      let catalog = this.get('catalog');
      stacks = stacks.filterBy('isFromCatalog', true);
--- a/app/components/container/form-command/template.hbs
+++ b/app/components/container/form-command/template.hbs
@ -110,8 +110,8 @@
    </div>
  </div>

-  <div class="row box">
-    <div class="col span-4">
+  <div class="row">
+    <div class="col span-6 box">
      <label class="acc-label">{{t 'formCommand.logDriver.label'}}</label>
      {{#input-or-display editable=editing value=instance.logConfig.driver}}
        {{input-suggest
@ -121,7 +121,7 @@
        }}
      {{/input-or-display}}
    </div>
-    <div class="col span-8">
+    <div class="col span-6 box">
      <label class="acc-label">{{t 'formCommand.logConfig.label'}}</label>
      {{form-key-value
        initialMap=instance.logConfig.config
@ -133,4 +133,13 @@
      }}
    </div>
  </div>
+  <div class="row">
+    <div class="col span-6 box">
+      <label class="acc-label">{{t 'formCommand.environment.label'}}</label>
+      {{form-key-value
+          initialMap=instance.environment
+          editing=editing
+      }}
+    </div>
+  </div>
 {{/accordion-list-item}}
--- a/app/components/container/form-container-links/component.js
+++ b/app/components/container/form-container-links/component.js
@ -52,8 +52,9 @@ export default Ember.Component.extend(ContainerChoices, {
      });
    }

+    this.set('linksArray', out);
+
    Ember.run.scheduleOnce('afterRender', () => {
-      this.set('linksArray', out);
      this.linksDidChange();
    });
  },
--- a/app/components/container/form-container-links/template.hbs
+++ b/app/components/container/form-container-links/template.hbs
@ -14,7 +14,7 @@

  {{#if linksArray.length}}
    <table class="table fixed no-lines no-top-padding mt-10">
-      <tr>
+      <tr class="text-muted">
        <th>{{t 'formContainerLinks.targetInstance.label'}}</th>
        <th width="30">&nbsp;</th>
        <th>{{t 'formContainerLinks.name.label'}}</th>
--- a/app/components/container/form-networking/template.hbs
+++ b/app/components/container/form-networking/template.hbs
@ -7,7 +7,7 @@
     expand=(action expandFn)
 }}
  <div class="row">
-    <div class="col {{if (or isContainerNetwork isHostNetwork isBridgeNetwork) 'span-6' (if isManagedNetwork 'span-4' 'span-12')}}">
+    <div class="col {{if (or isContainerNetwork isHostNetwork isBridgeNetwork) 'span-6' (if isManagedNetwork 'span-6' 'span-12')}}">
      <label class="acc-label">{{t 'formNetwork.networkMode.label'}}</label>
      {{#input-or-display editable=editing value=instance.networkMode}}
        {{new-select
--- a/app/components/container/form-secrets/component.js
+++ b/app/components/container/form-secrets/component.js
@ -6,24 +6,34 @@ const DEFAULT_GID = '0';
 const DEFAULT_MODE = '444';

 export default Ember.Component.extend({
-  intl: Ember.inject.service(),
-  secrets: null,
+  intl:            Ember.inject.service(),
+  secrets:         null,
+  editing:         false,
  showPermissions: false,

-  allSecrets: null,
-  haveAny: Ember.computed.gte('allSecrets.length',1),
+  allSecrets:      null,
+  haveAny:         Ember.computed.gte('allSecrets.length',1),

  init: function() {
    this._super(...arguments);

-    this.set('allSecrets', this.get('store').all('secret'));
-
+    let allSecrets = this.set('allSecrets', this.get('store').all('secret'));
    let secrets = this.get('secrets');
+    let instance = this.get('instance');
+
    if ( !secrets ) {
      secrets = [];
      this.set('secrets', secrets);
    }

+    if (instance && instance.get('secrets.length')) {
+      instance.get('secrets').forEach((secret) => {
+        let selected = allSecrets.findBy('id', secret.secretId);
+        secret.set('alias', selected.get('name'));
+        secrets.push(secret);
+      });
+    }
+
    for ( var i = 0 ; i < secrets.get('length') ; i++ ) {
      let secret = secrets.objectAt(i);
      let uid = secret.get('uid');
--- a/app/components/container/form-secrets/template.hbs
+++ b/app/components/container/form-secrets/template.hbs
@ -7,10 +7,12 @@
    expand=(action expandFn)
 }}
  {{#if haveAny}}
-    <button class="btn bg-link icon-btn" {{action "addSecret"}}>
-      <span class="darken"><i class="icon icon-plus text-small"/></span>
-      <span>{{t 'formSecrets.addLabel'}}</span>
-    </button>
+    {{#if editing}}
+      <button class="btn bg-link icon-btn" {{action "addSecret"}}>
+        <span class="darken"><i class="icon icon-plus text-small"/></span>
+        <span>{{t 'formSecrets.addLabel'}}</span>
+      </button>
+    {{/if}}

    {{#if secrets.length}}
      <table class="grid fixed no-lines mt-10 cell-padding">
@ -28,7 +30,11 @@
        {{#each secrets as |row|}}
          <tr>
            <td data-title="{{t 'formSecrets.secret.label'}}: ">
-              {{schema/input-secret selectClass="form-control input-sm" selected=row.secretId}}
+              {{#if editing}}
+                {{schema/input-secret selectClass="form-control input-sm" selected=row.secretId}}
+              {{else}}
+                {{row.alias}}
+              {{/if}}
            </td>

            <td class="text-center">
@ -36,25 +42,35 @@
            </td>

            <td data-title="{{t 'formSecrets.name.label'}}: ">
-              {{input type="text" class="form-control input-sm" value=row.name placeholder=(t 'formSecrets.name.placeholder')}}
+              {{#input-or-display editable=editing value=row.name}}
+                {{input type="text" class="form-control input-sm" value=row.name placeholder=(t 'formSecrets.name.placeholder')}}
+              {{/input-or-display}}
            </td>

            {{#if showPermissions}}
              <td class="divided" data-title="{{t 'formSecrets.uid.label'}}: ">
-                {{input-integer type="text" class="form-control input-sm" value=row.uid placeholder=(t 'formSecrets.uid.placeholder')}}
+                {{#input-or-display editable=editing value=row.uid}}
+                  {{input-integer type="text" class="form-control input-sm" value=row.uid placeholder=(t 'formSecrets.uid.placeholder')}}
+                {{/input-or-display}}
              </td>
              <td data-title="{{t 'formSecrets.gid.label'}}: ">
-                {{input-integer class="form-control input-sm" value=row.gid placeholder=(t 'formSecrets.gid.placeholder')}}
+                {{#input-or-display editable=editing value=row.gid}}
+                  {{input-integer class="form-control input-sm" value=row.gid placeholder=(t 'formSecrets.gid.placeholder')}}
+                {{/input-or-display}}
              </td>

              <td data-title="{{t 'formSecrets.mode.label'}}: ">
-                {{input-integer class="form-control input-sm" value=row.mode placeholder=(t 'formSecrets.mode.placeholder')}}
+                {{#input-or-display editable=editing value=row.mode}}
+                  {{input-integer class="form-control input-sm" value=row.mode placeholder=(t 'formSecrets.mode.placeholder')}}
+                {{/input-or-display}}
              </td>
            {{/if}}

-            <td class="text-right">
-              <button class="btn bg-primary btn-sm" {{action "removeSecret" row}}><i class="icon icon-minus"/><span class="sr-only">{{t 'generic.remove'}}</span></button>
-            </td>
+              <td class="text-right">
+                {{#if editing}}
+                  <button class="btn bg-primary btn-sm" {{action "removeSecret" row}}><i class="icon icon-minus"/><span class="sr-only">{{t 'generic.remove'}}</span></button>
+                {{/if}}
+              </td>
          </tr>
        {{/each}}
      </table>
--- a/app/components/container/form-security/template.hbs
+++ b/app/components/container/form-security/template.hbs
@ -64,27 +64,27 @@
    <div class="row">
      <div class="col span-4 col-inline">
        <label class="acc-label">{{t 'formSecurity.memoryLimit.label'}}</label>
-        <div class="radio">
-          <label>{{radio-button selection=memoryMode value="unlimited"}} {{t 'formSecurity.memoryLimit.unlimited'}}</label>
-        </div>
-        <div class="radio">
-          <label>
-            {{radio-button selection=memoryMode value="set"}} {{t 'formSecurity.memoryLimit.set'}}
-            <span class="with-input" style="width: 175px;">
-              <div class="input-group input-sm">
-                {{input-integer min="4" step="1" value=memoryMb disabled=(not-eq memoryMode 'set')}}
-                <div class="input-group-addon bg-default">{{t 'generic.mibibyte'}}</div>
-              </div>
-            </span>
-          </label>
-        </div>
+        {{#input-or-display editable=editing value=memoryMode classesForDisplay="text-muted form-control-static"}}
+          <div class="radio">
+            <label>{{radio-button selection=memoryMode value="unlimited"}} {{t 'formSecurity.memoryLimit.unlimited'}}</label>
+          </div>
+          <div class="radio">
+            <label>
+              {{radio-button selection=memoryMode value="set"}} {{t 'formSecurity.memoryLimit.set'}}
+              <span class="with-input" style="width: 175px;">
+                <div class="input-group input-sm">
+                  {{input-integer min="4" step="1" value=memoryMb disabled=(not-eq memoryMode 'set')}}
+                  <div class="input-group-addon bg-default">{{t 'generic.mibibyte'}}</div>
+                </div>
+              </span>
+            </label>
+          </div>
+        {{/input-or-display}}
      </div>

      <div class="col span-4 col-inline">
        <label class="acc-label">{{t 'formSecurity.swapLimit.label'}}</label>
-        {{#if (eq memoryMode "unlimited")}}
-          <div class="text-muted form-control-static">{{t 'formSecurity.swapLimit.unlimited'}}</div>
-        {{else}}
+        {{#input-or-display editable=editing value=swapMode classesForDisplay="text-muted form-control-static"}}
          <div class="radio">
            <label>{{radio-button selection=swapMode value="default"}} {{t 'formSecurity.swapLimit.default'}}</label>
          </div>
@ -105,14 +105,12 @@
              </span>
            </label>
          </div>
-        {{/if}}
+        {{/input-or-display}}
      </div>

      <div class="col span-4 col-inline">
        <label class="acc-label">{{t 'formSecurity.swappiness.label'}}</label>
-        {{#if (eq swapMode "none")}}
-          <p class="text-muted form-control-static">{{t 'generic.na'}}</p>
-        {{else}}
+        {{#input-or-display editable=editing value=swappinessMode classesForDisplay="text-muted form-control-static"}}
          <div class="radio">
            <label>{{radio-button selection=swappinessMode value="default" disabled=(eq swapMode "none")}} {{t 'formSecurity.swappiness.default'}}</label>
          </div>
@ -127,37 +125,41 @@
              </span>
            </label>
          </div>
-        {{/if}}
+        {{/input-or-display}}
      </div>
    </div>

-    <div class="row box mt-20">
-      <div class="col span-6">
+    <div class="row mt-20">
+      <div class="col box span-6">
        <label class="acc-label">{{t 'formSecurity.memoryReservation.label'}}</label>
-        <div class="input-group">
-          {{input-integer min="4" step="1" value=memoryReservationMb classNames="form-control" placeholder=(t 'formSecurity.memoryReservation.placeholder')}}
-          <div class="input-group-addon bg-default">{{t 'generic.mibibyte'}}</div>
-        </div>
-      </div>
-      <div class="col span-6">
-        <label class="acc-label">{{t 'formSecurity.milliCpuReservation.label'}}</label>
-        <span class="with-input">
+        {{#input-or-display editable=editing value=memoryReservationMb classesForDisplay="text-muted form-control-static"}}
          <div class="input-group">
-            {{input-integer min="1" step="1" value=instance.milliCpuReservation classNames="form-control"}}
-          <div class="input-group-addon bg-default">{{t 'formSecurity.milliCpuReservation.unit'}}</div>
+            {{input-integer min="4" step="1" value=memoryReservationMb classNames="form-control" placeholder=(t 'formSecurity.memoryReservation.placeholder')}}
+            <div class="input-group-addon bg-default">{{t 'generic.mibibyte'}}</div>
          </div>
-        </span>
+        {{/input-or-display}}
+      </div>
+      <div class="col box span-6">
+        <label class="acc-label">{{t 'formSecurity.milliCpuReservation.label'}}</label>
+        {{#input-or-display editable=editing value=instance.milliCpuReservation classesForDisplay="text-muted form-control-static"}}
+          <span class="with-input">
+            <div class="input-group">
+              {{input-integer min="1" step="1" value=instance.milliCpuReservation classNames="form-control"}}
+              <div class="input-group-addon bg-default">{{t 'formSecurity.milliCpuReservation.unit'}}</div>
+            </div>
+          </span>
+        {{/input-or-display}}
      </div>
    </div>

-    <div class="row box mt-20">
-      <div class="col span-6">
+    <div class="row mt-20">
+      <div class="col box span-6">
        <label class="acc-label">{{t 'formSecurity.cpuPinning.label'}}</label>
        {{#input-or-display editable=editing value=instance.cpuSet}}
          {{input type="text" value=instance.cpuSet classNames="form-control" placeholder=(t 'formSecurity.cpuPinning.placeholder')}}
        {{/input-or-display}}
      </div>
-      <div class="col span-6">
+      <div class="col box span-6">
        <label class="acc-label">{{t 'formSecurity.shares.label'}}</label>
        {{#input-or-display editable=editing value=instance.cpuShares}}
          {{input-integer value=instance.cpuShares step=128 min=0 classNames="form-control" placeholder=(t 'formSecurity.shares.placeholder')}}
@ -165,8 +167,8 @@
      </div>
    </div>

-    <div class="row box mt-20">
-      <div class="col span-6">
+    <div class="row mt-20">
+      <div class="col box span-6">
        <label class="acc-label">{{t 'formSecurity.capabilities.add'}}</label>
        {{#if editing}}
          <select class="form-control select-cap-add" multiple="true" onchange={{action 'modifyCapabilities' 'capAdd' }}>
@ -185,7 +187,7 @@
        {{/if}}
      </div>

-      <div class="col span-6">
+      <div class="col box span-6">
        <label class="acc-label">{{t 'formSecurity.capabilities.drop'}}</label>
        {{#if editing}}
          <select class="form-control select-cap-drop" multiple="true" onchange={{action 'modifyCapabilities' 'capDrop'}}>
--- a/app/components/form-healthcheck/template.hbs
+++ b/app/components/form-healthcheck/template.hbs
@ -21,7 +21,10 @@
      </div>
    {{else}}
      {{#if checkType}}
-        <div>{{checkType}}</div>
+        <div>
+          <label class="acc-label">{{t 'generic.type'}}:</label>
+          {{checkType}}
+        </div>
      {{else}}
        <div>{{t 'generic.none'}}</div>
      {{/if}}
@ -96,8 +99,8 @@
        </div>


-        <div class="col span-6 box row mb-0 mt-0">
-          <div class="col span-6">
+        <div class="col span-3 box row mb-0 mt-0">
+          <div class="">
            <label class="acc-label">{{t 'formHealthCheck.healthyThreshold.label'}}</label>
            {{#input-or-display editable=editing value=healthCheck.healthyThreshold}}
              <div class="input-group">
@ -106,8 +109,10 @@
              </div>
            {{/input-or-display}}
          </div>
+        </div>

-          <div class="col span-6">
+        <div class="col span-3 box row mb-0 mt-0">
+          <div class="">
            <label class="acc-label">{{t 'formHealthCheck.unhealthyThreshold.label'}}</label>
            {{#input-or-display editable=editing value=healthCheck.unhealthyThreshold}}
              <div class="input-group">
@ -120,8 +125,8 @@

      </div>

-      <div class="row box mt-20">
-        <div class="col span-4">
+      <div class="row mt-20">
+        <div class="col box span-4">
          <label class="acc-label">{{t 'formHealthCheck.timeout.label'}}</label>
          {{#input-or-display editable=editing value=healthCheck.responseTimeout}}
            <div class="input-group">
@ -130,7 +135,7 @@
            </div>
          {{/input-or-display}}
        </div>
-        <div class="col span-4">
+        <div class="col box span-4">
          <label class="acc-label">{{t 'formHealthCheck.initializingTimeout.label'}}</label>
          {{#input-or-display editable=editing value=healthCheck.initializingTimeout}}
            <div class="input-group">
@ -139,7 +144,7 @@
            </div>
          {{/input-or-display}}
        </div>
-        <div class="col span-4">
+        <div class="col box span-4">
          <label class="acc-label">{{t 'formHealthCheck.reinitializingTimeout.label'}}</label>
          {{#input-or-display editable=editing value=healthCheck.reinitializingTimeout}}
            <div class="input-group">
--- a/app/container/controller.js
+++ b/app/container/controller.js
@ -8,11 +8,11 @@ export default Ember.Controller.extend({
      this.transitionToRoute('container', container.get('id'));
    }
  },
-  sortBy: 'privatePort',
+  portSortBy: 'privatePort',
  queryParams: ['sortBy'],
  searchText: '',

-  headers: [
+  portHeaders: [
    {
      name: 'publicIp',
      sort: ['displayPublicIp','privatePort','protocol'],
@ -38,4 +38,23 @@ export default Ember.Controller.extend({
      translationKey: 'containerPage.portsTab.table.protocol',
    },
  ],
+  storageSortBy: 'state',
+  storageHeaders:  [
+    {
+      name:           'state',
+      sort:           ['stateSort','displayUri','id'],
+      translationKey: 'hostsPage.hostPage.storageTab.table.header.state',
+      width:          125,
+    },
+    {
+      name:           'hostPath',
+      sort:           ['displayUri','id'],
+      translationKey: 'hostsPage.hostPage.storageTab.table.header.hostPath',
+    },
+    {
+      name:           'mounts',
+      sort:           false,
+      translationKey: 'hostsPage.hostPage.storageTab.table.header.mounts',
+    },
+  ],
 });
--- a/app/container/route.js
+++ b/app/container/route.js
@ -2,17 +2,40 @@ import Ember from 'ember';

 export default Ember.Route.extend({
  model: function(params) {
+
    return this.get('store').find('container', params.container_id).then((container) => {
+
      return Ember.RSVP.hash({
-        ports: container.followLink('ports'),
-        hosts: this.get('store').findAll('host')
+        ports:         container.followLink('ports'),
+        hosts:         this.get('store').findAll('host'),
+        instanceLinks: container.followLink('instanceLinks'),
      }).then((hash) => {
+
        return {
-          container: container,
-          ports: hash.ports,
-          hosts: hash.hosts
+          container:     container,
+          ports:         hash.ports,
+          hosts:         hash.hosts,
+          instanceLinks: hash.instanceLinks,
        };
      });
    });
  },
+  afterModel(model) {
+    var iLinks = model.instanceLinks;
+    var linkedInstances = [];
+
+    iLinks.forEach((link) => {
+      linkedInstances.push(this.get('store').getById('container', link.get('targetInstanceId')));
+    });
+
+    return Ember.RSVP.all(linkedInstances).then((instances) => {
+
+      instances.forEach((instance) => {
+        let link = iLinks.findBy('targetInstanceId', instance.id);
+        link.set('linkedInstanceName', instance.name);
+      });
+
+      return model;
+    })
+  },
 });
--- a/app/container/template.hbs
+++ b/app/container/template.hbs
@ -100,13 +100,13 @@
             classNames="grid sortable-table"
             body=model.ports
             searchText=searchText
-             sortBy=sortBy
+             sortBy=portSortBy
             bulkActions=false
             rowActions=false
             stickyHeader=false
             pagingLabel="pagination.port"
             isVisible=parent.expanded
-             headers=headers as |sortable kind port dt|}}
+             headers=portHeaders as |sortable kind port dt|}}
          {{#if (eq kind "row")}}
            <td data-title="{{dt.publicIp}}">
              {{#if (eq "0.0.0.0" port.displayPublicIp)}}
@ -176,6 +176,36 @@
          expandFn=expandFn
      }}
    </div>
+    <div class="mt-20">
+      {{#accordion-list-item
+           title=(t 'containerPage.linksTab.header')
+           detail=(t 'containerPage.linksTab.detail')
+           status=(t 'containerPage.linksTab.status' count=model.instanceLinks.length)
+           statusClass=(if model.instanceLinks.length 'bg-success' 'text-muted')
+           expandAll=al.expandAll
+           expand=(action expandFn)
+      }}
+        <ul class="list-unstyled list-inline with-room">
+          {{#each model.instanceLinks as |link|}}
+            <li>
+              <a href="{{href-to 'container' link.targetInstanceId }}">
+                {{link.linkedInstanceName}} as {{link.linkName}}
+              </a>
+            </li>
+          {{else}}
+            <li class="text-muted text-center">{{t 'containerPage.linksTab.noData'}}</li>
+          {{/each}}
+        </ul>
+      {{/accordion-list-item}}
+    </div>
+    <div class="mt-20">
+      {{container/form-secrets
+          instance=model.container
+          editing=false
+          expandAll=al.expandAll
+          expandFn=expandFn
+      }}
+    </div>
    <div class="mt-20">
      {{#accordion-list-item
           title=(t 'containerPage.volumesTab.header')
@ -196,7 +226,7 @@
             stickyHeader=false
             pagingLabel="pagination.volume"
             isVisible=parent.expanded
-             headers=headers as |sortable kind mount dt|}}
+             headers=storageHeaders as |sortable kind mount dt|}}
          {{#if (eq kind "row")}}
            <td data-title="{{dt.name}}">
              {{mount.displayVolumeName}}
--- a/app/mixins/cattle-transitioning-resource.js
+++ b/app/mixins/cattle-transitioning-resource.js
@ -370,9 +370,7 @@ export default Ember.Mixin.create({
          if ( field.nullable )
          {
            val = null;
-            if ( val !== null ) {
-              this.set(key, val);
-            }
+            this.set(key, val);
          }
        }
      }
--- a/app/service/controller.js
+++ b/app/service/controller.js
@ -4,7 +4,59 @@ export default Ember.Controller.extend({
  service: Ember.computed.alias('model.service'),
  stack: Ember.computed.alias('model.stack'),
  application: Ember.inject.controller(),
-  rules: Ember.computed.alias('model.lbConfig.portRules'),
+  rules: Ember.computed.alias('service.lbConfig.portRules'),
+  sortBy: 'priority',
+  headers: [
+    {
+      name: 'priority',
+      sort: ['priority'],
+      translationKey: 'formBalancerRules.priority.label',
+      width: 85,
+    },
+    {
+      name: 'access',
+      sort: ['access'],
+      translationKey: 'formBalancerRules.access.label',
+      width: 85,
+    },
+    {
+      name: 'protocol',
+      sort: ['protocol'],
+      translationKey: 'formBalancerRules.protocol.label',
+      width: 95
+    },
+    {
+      name: 'hostname',
+      sort: ['hostname'],
+      translationKey: 'formBalancerRules.hostname.label',
+    },
+    {
+      name: 'sourcePort',
+      sort: ['sourcePort'],
+      translationKey: 'formBalancerRules.sourcePort.label',
+      width: 145
+    },
+    {
+      name: 'path',
+      sort: ['path'],
+      translationKey: 'formBalancerRules.path.label',
+    },
+    {
+      name: 'target',
+      translationKey: 'formBalancerRules.target',
+    },
+    {
+      name: 'targetPort',
+      sort: ['targetPort'],
+      translationKey: 'formBalancerRules.targetPort.label',
+      width: 80
+    },
+    {
+      name: 'backendName',
+      sort: ['backendName'],
+      translationKey: 'formBalancerRules.backendName.label',
+    },
+  ],

  actions: {
    changeService(service) {
--- a/app/service/template.hbs
+++ b/app/service/template.hbs
@ -114,100 +114,103 @@

    {{#if service.isBalancer}}
      {{#accordion-list-item
-            title=(t 'formBalancerRules.label')
-            detail=(t 'formBalancerRules.detail')
-            status=(t 'formBalancerRules.status' count=(if rules.length rules.length 0))
-            statusClass=(if rules.length 'bg-success' 'text-muted')
-            expandAll=al.expandAll
-            expand=(action expandFn)
+           title=(t 'formBalancerRules.label')
+           detail=(t 'formBalancerRules.detail')
+           status=(t 'formBalancerRules.status' count=(if rules.length rules.length 0))
+           statusClass=(if rules.length 'bg-success' 'text-muted')
+           expandAll=al.expandAll
+           expand=(action expandFn)
+           componentName='sortable-table'
+           as | parent |
      }}
        {{#if rules.length}}
-          <table class="grid fixed no-lines no-top-padding tight mb-0">
-            <thead>
+          {{#component parent.intent
+               body=rules
+               bulkActions=false
+               classNames="grid fixed mb-0 sortable-table"
+               descending=descending
+               fullRows=true
+               headers=headers
+               paging=false
+               rowActions=false
+               search=true
+               sortBy=sortBy
+               stickyHeader=false
+               as |sortable kind rule|
+          }}
+            {{#if (eq kind "row")}}
              <tr>
-                <th width="65">{{t 'formBalancerRules.priority.label'}}</th>
-                <th width="60">{{t 'formBalancerRules.access.label'}}</th>
-                <th width="70">{{t 'formBalancerRules.protocol.label'}}</th>
-                <th class="divided">{{t 'formBalancerRules.hostname.label'}}</th>
-                <th width="60">{{t 'formBalancerRules.sourcePort.label'}}</th>
-                <th>{{t 'formBalancerRules.path.label'}}</th>
-                <th class="divided">{{t 'formBalancerRules.target'}}</th>
-                <th width="60">{{t 'formBalancerRules.targetPort.label'}}</th>
-                <th class="divided">{{t 'formBalancerRules.backendName.label'}}</th>
-              </tr>
-            </thead>
+                <td data-title="{{t 'formBalancerRules.priority.label'}}">
+                  {{rule.priority}}
+                </td>

-            <tbody>
-              {{#each rules as |rule idx|}}
-                <tr>
-                  <td data-title="{{t 'formBalancerRules.priority.label'}}">
-                    {{rule.priority}}
-                  </td>
+                <td data-title="{{t 'formBalancerRules.access.label'}}">
+                  {{uc-first rule.access}}
+                </td>

-                  <td data-title="{{t 'formBalancerRules.access.label'}}">
-                    {{uc-first rule.access}}
-                  </td>
+                <td data-title="{{t 'formBalancerRules.protocol.label'}}">
+                  {{upper-case rule.protocol}}
+                </td>

-                  <td data-title="{{t 'formBalancerRules.protocol.label'}}">
-                    {{upper-case rule.protocol}}
-                  </td>
-
-                  <td class="divided" data-title="{{t 'formBalancerRules.hostname.label'}}">
-                    {{#if rule.canHostname}}
-                      {{#if rule.hostname}}
-                        {{rule.hostname}}
-                      {{else}}
-                        <span class="text-muted">{{t 'generic.none'}}</span>
-                      {{/if}}
-                    {{else}}
-                      <span class="text-muted">{{t 'generic.na'}}</span>
-                    {{/if}}
-                  </td>
-
-                  <td data-title="{{t 'formBalancerRules.sourcePort.label'}}">
-                    {{rule.sourcePort}}
-                  </td>
-
-                  <td data-title="{{t 'formBalancerRules.path.label'}}">
-                    {{#if rule.canPath}}
-                      {{#if rule.path}}
-                        {{rule.path}}
-                      {{else}}
-                        <span class="text-muted">{{t 'generic.none'}}</span>
-                      {{/if}}
-                    {{else}}
-                      <span class="text-muted">{{t 'generic.na'}}</span>
-                    {{/if}}
-                  </td>
-
-                  <td class="divided" data-title="{{t (if rule.isSelector 'formBalancerRules.selector.label' 'formBalancerRules.serviceId.label')}}">
-                    {{#if rule.selector}}
-                      {{rule.selector}}
-                    {{else}}
-                      <a href="{{href-to "service" rule.serviceId}}">
-                        {{#if (not-eq service.stackId rule.service.stackId)~}}
-                          {{rule.service.displayStack}}/
-                          {{~/if~}}
-                          {{~rule.service.displayName~}}
-                      </a>
-                      {{~/if~}}
-                  </td>
-
-                  <td data-title="{{t 'formBalancerRules.targetPort.label'}}">
-                    {{rule.targetPort}}
-                  </td>
-
-                  <td class="divided" data-title="{{t 'formBalancerRules.backendName.label'}}">
-                    {{#if rule.backendName}}
-                      {{rule.backendName}}
+                <td class="divided" data-title="{{t 'formBalancerRules.hostname.label'}}">
+                  {{#if rule.canHostname}}
+                    {{#if rule.hostname}}
+                      {{rule.hostname}}
                    {{else}}
                      <span class="text-muted">{{t 'generic.none'}}</span>
                    {{/if}}
-                  </td>
-                </tr>
-              {{/each}}
-            </tbody>
-          </table>
+                  {{else}}
+                    <span class="text-muted">{{t 'generic.na'}}</span>
+                  {{/if}}
+                </td>
+
+                <td data-title="{{t 'formBalancerRules.sourcePort.label'}}">
+                  {{rule.sourcePort}}
+                </td>
+
+                <td data-title="{{t 'formBalancerRules.path.label'}}">
+                  {{#if rule.canPath}}
+                    {{#if rule.path}}
+                      {{rule.path}}
+                    {{else}}
+                      <span class="text-muted">{{t 'generic.none'}}</span>
+                    {{/if}}
+                  {{else}}
+                    <span class="text-muted">{{t 'generic.na'}}</span>
+                  {{/if}}
+                </td>
+
+                <td class="divided" data-title="{{t (if rule.isSelector 'formBalancerRules.selector.label' 'formBalancerRules.serviceId.label')}}">
+                  {{#if rule.selector}}
+                    {{rule.selector}}
+                  {{else}}
+                    <a href="{{href-to "service" rule.serviceId}}">
+                      {{#if (not-eq service.stackId rule.service.stackId)~}}
+                        {{rule.service.displayStack}}/
+                        {{~/if~}}
+                        {{~rule.service.displayName~}}
+                    </a>
+                    {{~/if~}}
+                </td>
+
+                <td data-title="{{t 'formBalancerRules.targetPort.label'}}">
+                  {{rule.targetPort}}
+                </td>
+
+                <td class="divided" data-title="{{t 'formBalancerRules.backendName.label'}}">
+                  {{#if rule.backendName}}
+                    {{rule.backendName}}
+                  {{else}}
+                    <span class="text-muted">{{t 'generic.none'}}</span>
+                  {{/if}}
+                </td>
+              </tr>
+            {{else if (eq kind "norows")}}
+              <tr>
+                <td colspan="{{sortable.fullColspan}}" class="text-center text-muted pt-20 pb-20">{{t 'labelsSection.noData'}}</td>
+              </tr>
+            {{/if}}
+          {{/component}}
        {{else}}
          <div class="text-muted text-center">{{t 'formBalancerRules.noRules'}}</div>
        {{/if}}
@ -305,12 +308,11 @@
          expandAll=al.expandAll
          expand=(action expandFn)
    }}
-      <label class="acc-label">{{t 'servicePage.linksTab.header'}}</label>
      <ul class="list-unstyled list-inline with-room">
        {{#each service.consumedServicesWithNames as |link|}}
          <li>{{consumed-service-link link=link stackId=service.stackId}}</li>
        {{else}}
-          <li class="text-muted">{{t 'servicePage.linksTab.noData'}}</li>
+          <li class="text-muted text-center">{{t 'servicePage.linksTab.noData'}}</li>
        {{/each}}
      </ul>
    {{/accordion-list-item}}
--- a/translations/en-us.yaml
+++ b/translations/en-us.yaml
@ -489,6 +489,16 @@ containerPage:
      noData: This container has no ports
      noMatch: No ports match the current search
    hostPrimaryIp: '({ip})'
+  linksTab:
+    header: Links
+    detail: 'These properties show the links between containers in this container.'
+    status: |
+      {count, plural,
+      =0 {No links}
+      =1 {# link}
+      other {# links}
+      }
+    noData: This Container has no links
  volumesTab:
    header: Volumes
    detail: 'These properties show the volumes attached to your container.'
@ -1081,7 +1091,7 @@ servicePage:
      =1 {# link}
      other {# links}
      }
-    noData: No Links
+    noData: This Service has no links
  certsTab:
    title: Certificates
    detail: 'Certificates used for TLS-termination of requests.'
@ -1938,11 +1948,30 @@ formBalancerListeners:

 formBalancerRules:
  label: Target Rules
+  detail: Control the mapping of requests coming into the balancer to the desired target.
+  status: |
+    {count, plural,
+    =0 {No rules}
+    =1 {# rule}
+    other {# rules}
+    }
  noRules: No Rules
  addServiceLabel:  Add a Service
  addInstanceLabel: Add a Container
  addSelectorLabel: Add a Selector
  addTargetLabel:   Add a Rule
+  access:
+    label: Access
+    public: Public
+    internal: Internal
+  protocol:
+    label: Protocol
+  sourceIp:
+    label: Host IP
+    placeholder: "e.g. 1.2.3.4; Default: All"
+  sourcePort:
+    label: Listening Port
+    placeholder: e.g. 80
  path:
    label: Path
    placeholder: e.g. /foo
@ -1981,6 +2010,8 @@ formCommand:
  entryPoint:
    label: Entrypoint
    placeholder: e.g. /bin/sh
+  environment:
+    label: Environment Labels
  workingDir:
    label: Working Dir
    placeholder: e.g. /myapp