Add service name to container if present

rancher/rancher#9258

app/container/route.js

@@ -11,12 +11,18 @@ export default Ember.Route.extend({
         instanceLinks: container.followLink('instanceLinks'),
       }).then((hash) => {
 
-        return {
+        let out = {
           container:     container,
           ports:         hash.ports,
           hosts:         hash.hosts,
           instanceLinks: hash.instanceLinks,
         };
+
+        if (container.serviceId) {
+          out.service = this.get('store').getById('service', container.serviceId);
+        }
+
+        return out;
       });
     });
   },

app/container/template.hbs

@@ -36,6 +36,12 @@
         {{t 'generic.none'}}
       {{/if}}
     </div>
+    {{#if model.container.serviceId}}
+      <div class="inline-block">
+        <label class="acc-label p-0">{{t 'generic.service'}}:</label>
+        {{#link-to "service" projects.current.id model.container.serviceId}}{{model.service.name}}{{/link-to}}
+      </div>
+    {{/if}}
     {{#if model.container.stack}}
       <div class="inline-block">
         <label class="acc-label p-0">{{t 'generic.stack'}}:</label>

app/styles/layout/_header.scss

@@ -35,20 +35,21 @@ header {
   padding: 10px;
   font-size: 14px;
   line-height: 14px;
+  display: flex !important;
+  flex-flow: row wrap;
+  justify-content: space-around;
+
 
   > .inline-block {
-    // vertical-align: bottom;
+    text-align: center;
     padding: 0 25px;
     border-right: solid 2px $info;
+    flex: 1 1;
 
     label, span, div {
       vertical-align: baseline;
     }
 
-    &:first-child {
-      padding-left: 0;
-    }
-
     &:last-child {
       border: 0;
     }