Update job details box (#11288)

ui/app/components/job-page/parts/stats-box.js

@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class StatsBox extends Component {
+  @service system;
+}

ui/app/models/job.js

@@ -2,7 +2,7 @@ import { alias, equal, or, and, mapBy } from '@ember/object/computed';
 import { computed } from '@ember/object';
 import Model from '@ember-data/model';
 import { attr, belongsTo, hasMany } from '@ember-data/model';
-import { fragmentArray } from 'ember-data-model-fragments/attributes';
+import { fragment, fragmentArray } from 'ember-data-model-fragments/attributes';
 import RSVP from 'rsvp';
 import { assert } from '@ember/debug';
 import classic from 'ember-classic-decorator';
@@ -23,7 +23,8 @@ export default class Job extends Model {
   @attr('number') createIndex;
   @attr('number') modifyIndex;
   @attr('date') submitTime;
-  @attr() meta;
+
+  @fragment('structured-attributes') meta;
 
   // True when the job is the parent periodic or parameterized jobs
   // Instances of periodic or parameterized jobs are false for both properties

ui/app/models/node-driver.js

@@ -9,11 +9,11 @@ import { fragment } from 'ember-data-model-fragments/attributes';
 export default class NodeDriver extends Fragment {
   @fragmentOwner() node;
 
-  @fragment('node-attributes') attributes;
+  @fragment('structured-attributes') attributes;
 
-  @computed('name', 'attributes.attributesStructured')
+  @computed('name', 'attributes.structured')
   get attributesShort() {
-    const attributes = this.get('attributes.attributesStructured');
+    const attributes = this.get('attributes.structured');
     return get(attributes, `driver.${this.name}`);
   }
 

ui/app/models/node.js

@@ -25,8 +25,8 @@ export default class Node extends Model {
   // Available from single response
   @attr('string') httpAddr;
   @attr('boolean') tlsEnabled;
-  @fragment('node-attributes') attributes;
-  @fragment('node-attributes') meta;
+  @fragment('structured-attributes') attributes;
+  @fragment('structured-attributes') meta;
   @fragment('resources') resources;
   @fragment('resources') reserved;
   @fragment('drain-strategy') drainStrategy;

ui/app/models/node-attributes.js → ui/app/models/structured-attributes.js

@@ -5,12 +5,12 @@ import flat from 'flat';
 
 const { unflatten } = flat;
 
-export default class NodeAttributes extends Fragment {
-  @attr() nodeAttributes;
+export default class StructuredAttributes extends Fragment {
+  @attr() raw;
 
-  @computed('nodeAttributes')
-  get attributesStructured() {
-    const original = this.nodeAttributes;
+  @computed('raw')
+  get structured() {
+    const original = this.raw;
 
     if (!original) {
       return undefined;
@@ -31,8 +31,8 @@ export default class NodeAttributes extends Fragment {
     //
     // ex: nodeAttrs.get('driver.docker')
     // [ "1", { version: "17.05.0-ce", volumes: { enabled: "1" } } ]
-    if (this.attributesStructured) {
-      return get(this.attributesStructured, key);
+    if (this.structured) {
+      return get(this.structured, key);
     }
   }
 }

ui/app/models/task-group.js

@@ -24,10 +24,10 @@ export default class TaskGroup extends Fragment {
 
   @attr() meta;
 
-  @computed('job.meta', 'meta')
+  @computed('job.meta.raw', 'meta')
   get mergedMeta() {
     return {
-      ...this.job.meta,
+      ...this.job.get('meta.raw'),
       ...this.meta,
     };
   }

ui/app/serializers/structured-attributes.js

@@ -0,0 +1,7 @@
+import ApplicationSerializer from './application';
+
+export default class StructuredAttributes extends ApplicationSerializer {
+  normalize(typeHash, hash) {
+    return super.normalize(typeHash, { Raw: hash });
+  }
+}

ui/app/styles/components/inline-definitions.scss

@@ -1,9 +1,10 @@
 .inline-definitions {
   .label {
     text-transform: uppercase;
-    display: inline;
+    display: inline-block;
     color: darken($grey-blue, 20%);
     margin-right: 2rem;
+    margin-bottom: 0;
     font-size: inherit;
     font-weight: $weight-semibold;
   }

ui/app/styles/core/tag.scss

@@ -62,4 +62,9 @@
     font-size: 0.7rem;
     vertical-align: 2px;
   }
+
+  .icon {
+    height: 1rem;
+    width: 1rem;
+  }
 }

ui/app/templates/clients/client/index.hbs

@@ -441,7 +441,7 @@
             <div class="boxed-section-head">
                {{capitalize a.item.name}} Attributes
             </div>
-            {{#if a.item.attributes.attributesStructured}}
+            {{#if a.item.attributes.structured}}
               <div class="boxed-section-body is-full-bleed">
                 <AttributesTable
                   @attributePairs={{a.item.attributesShort}}
@@ -467,17 +467,17 @@
     <div class="boxed-section-body is-full-bleed">
       <AttributesTable
         data-test-attributes
-        @attributePairs={{this.model.attributes.attributesStructured}}
+        @attributePairs={{this.model.attributes.structured}}
         @class="attributes-table" />
     </div>
     <div class="boxed-section-head">
       Meta
     </div>
-    {{#if this.model.meta.attributesStructured}}
+    {{#if this.model.meta.structured}}
       <div class="boxed-section-body is-full-bleed">
         <AttributesTable
           data-test-meta
-          @attributePairs={{this.model.meta.attributesStructured}}
+          @attributePairs={{this.model.meta.structured}}
           @class="attributes-table" />
       </div>
     {{else}}

ui/app/templates/components/job-page/batch.hbs

@@ -3,15 +3,7 @@
 
   <JobPage::Parts::Title @job={{this.job}} @handleError={{action "handleError"}} />
 
-  <div class="boxed-section job-stats">
-    <div class="boxed-section-body">
-      <span data-test-job-stat="type"><strong>Type:</strong> {{this.job.type}} | </span>
-      <span data-test-job-stat="priority"><strong>Priority:</strong> {{this.job.priority}} </span>
-      {{#if (and this.job.namespace this.system.shouldShowNamespaces)}}
-        <span data-test-job-stat="namespace"> | <strong>Namespace:</strong> {{this.job.namespace.name}}</span>
-      {{/if}}
-    </div>
-  </div>
+  <JobPage::Parts::StatsBox @job={{this.job}} />
 
   <JobPage::Parts::Summary @job={{this.job}} />
 
@@ -24,4 +16,6 @@
     @gotoTaskGroup={{this.gotoTaskGroup}} />
 
   <JobPage::Parts::RecentAllocations @job={{this.job}} />
+
+  <JobPage::Parts::Meta @job={{this.job}} />
 </JobPage::Parts::Body>

ui/app/templates/components/job-page/parameterized-child.hbs

@@ -3,21 +3,16 @@
 
   <JobPage::Parts::Title @job={{this.job}} @title={{this.job.trimmedName}} @handleError={{action "handleError"}} />
 
-  <div class="boxed-section job-stats">
-    <div class="boxed-section-body">
-      <span data-test-job-stat="type"><strong>Type:</strong> {{this.job.type}} | </span>
-      <span data-test-job-stat="priority"><strong>Priority:</strong> {{this.job.priority}} |</span>
-      <span data-test-job-stat="parent">
-        <strong>Parent:</strong>
+  <JobPage::Parts::StatsBox @job={{this.job}}>
+    <:before-namespace>
+      <span class="pair" data-test-job-stat="parent">
+        <span class="term">Parent</span>
         <LinkTo @route="jobs.job" @model={{this.job.parent}} @query={{hash jobNamespace=this.job.parent.namespace.name}}>
           {{this.job.parent.name}}
         </LinkTo>
       </span>
-      {{#if (and this.job.namespace this.system.shouldShowNamespaces)}}
-        <span data-test-job-stat="namespace"> | <strong>Namespace:</strong> {{this.job.namespace.name}}</span>
-      {{/if}}
-    </div>
-  </div>
+    </:before-namespace>
+  </JobPage::Parts::StatsBox>
 
   {{#if this.job.hasClientStatus}}
     <JobPage::Parts::JobClientStatusSummary
@@ -44,12 +39,7 @@
       Meta
     </div>
     {{#if this.job.definition.Meta}}
-      <div class="boxed-section-body is-full-bleed">
-        <AttributesTable
-          data-test-meta
-          @attributePairs={{this.job.definition.Meta}}
-          @class="attributes-table" />
-      </div>
+      <JobPage::Parts::Meta @job={{this.job}} />
     {{else}}
       <div class="boxed-section-body">
         <div data-test-empty-meta-message class="empty-message">

ui/app/templates/components/job-page/parameterized.hbs

@@ -5,15 +5,7 @@
     <span class="tag is-hollow">Parameterized</span>
   </JobPage::Parts::Title>
 
-  <div class="boxed-section job-stats">
-    <div class="boxed-section-body">
-      <span data-test-job-stat="version"><strong>Version:</strong> {{this.job.version}} | </span>
-      <span data-test-job-stat="priority"><strong>Priority:</strong> {{this.job.priority}} </span>
-      {{#if (and this.job.namespace this.system.shouldShowNamespaces)}}
-        <span data-test-job-stat="namespace"> | <strong>Namespace:</strong> {{this.job.namespace.name}}</span>
-      {{/if}}
-    </div>
-  </div>
+  <JobPage::Parts::StatsBox @job={{this.job}} />
 
   <JobPage::Parts::Summary @job={{this.job}} />
   <JobPage::Parts::Children
@@ -22,4 +14,6 @@
     @sortDescending={{this.sortDescending}}
     @currentPage={{this.currentPage}}
     @gotoJob={{this.gotoJob}} />
+
+  <JobPage::Parts::Meta @job={{this.job}} />
 </JobPage::Parts::Body>

ui/app/templates/components/job-page/parts/meta.hbs

@@ -0,0 +1,13 @@
+{{#if @job.meta.structured}}
+  <div class="boxed-section">
+    <div class="boxed-section-head">
+      Meta
+    </div>
+    <div class="boxed-section-body is-full-bleed">
+      <AttributesTable
+        data-test-meta
+        @attributePairs={{@job.meta.structured}}
+        @class="attributes-table" />
+    </div>
+  </div>
+{{/if}}

ui/app/templates/components/job-page/parts/stats-box.hbs

@@ -0,0 +1,54 @@
+<div class="boxed-section is-small">
+  <div class="boxed-section-body inline-definitions">
+    <span class="label" style="width: 6.125rem;">Job Details</span>
+    <span class="pair" data-test-job-stat="type">
+      <span class="term">Type</span>
+      {{@job.type}}
+    </span>
+    <span class="pair" data-test-job-stat="priority">
+      <span class="term">Priority</span>
+      {{@job.priority}}
+    </span>
+    <span class="pair" data-test-job-stat="version">
+      <span class="term">Version</span>
+      {{@job.version}}
+    </span>
+    {{yield to="before-namespace"}}
+    {{#if (and @job.namespace this.system.shouldShowNamespaces)}}
+      <span class="pair" data-test-job-stat="namespace">
+        <span class="term">Namespace</span>
+        {{@job.namespace.name}}
+      </span>
+    {{/if}}
+    {{yield to="after-namespace"}}
+  </div>
+
+  {{#if @job.meta.structured.pack.name}}
+    <div class="boxed-section-body inline-definitions">
+      <span class="label" style="width: 6.125rem;">Pack Details</span>
+      <span class="pair" data-test-pack-stat="name">
+        <span class="term">Name</span>
+        {{@job.meta.structured.pack.name}}
+      </span>
+      {{#if @job.meta.structured.pack.registry}}
+        <span class="pair" data-test-pack-stat="registry">
+          <span class="term">Registry</span>
+          {{@job.meta.structured.pack.registry}}
+        </span>
+      {{/if}}
+      {{#if @job.meta.structured.pack.version}}
+        <span class="pair" data-test-pack-stat="version">
+          <span class="term">Version</span>
+          {{@job.meta.structured.pack.version}}
+        </span>
+      {{/if}}
+      {{#if @job.meta.structured.pack.revision}}
+        <span class="pair" data-test-pack-stat="revision">
+          <span class="term">Revision</span>
+          {{@job.meta.structured.pack.revision}}
+        </span>
+      {{/if}}
+      {{yield to="pack"}}
+    </div>
+  {{/if}}
+</div>

ui/app/templates/components/job-page/parts/title.hbs

@@ -1,6 +1,12 @@
 <h1 class="title with-flex">
   <div data-test-job-name>
     {{or this.title this.job.name}}
+    {{#if @job.meta.structured.pack}}
+      <span data-test-pack-tag class="tag is-hollow">
+        {{x-icon "box" class= "test"}}
+        <span>Pack</span>
+      </span>
+    {{/if}}
     <span class="bumper-left tag {{this.job.statusClass}}" data-test-job-status>{{this.job.status}}</span>
     {{yield}}
   </div>

ui/app/templates/components/job-page/periodic-child.hbs

@@ -3,21 +3,16 @@
 
   <JobPage::Parts::Title @job={{this.job}} @title={{this.job.trimmedName}} @handleError={{action "handleError"}} />
 
-  <div class="boxed-section job-stats">
-    <div class="boxed-section-body">
-      <span data-test-job-stat="type"><strong>Type:</strong> {{this.job.type}} | </span>
-      <span data-test-job-stat="priority"><strong>Priority:</strong> {{this.job.priority}} |</span>
-      <span data-test-job-stat="parent">
-        <strong>Parent:</strong>
+  <JobPage::Parts::StatsBox @job={{this.job}}>
+    <:before-namespace>
+      <span class="pair" data-test-job-stat="parent">
+        <span class="term">Parent</span>
         <LinkTo @route="jobs.job" @model={{this.job.parent}} @query={{hash namespace=this.job.parent.namespace.name}}>
           {{this.job.parent.name}}
         </LinkTo>
       </span>
-      {{#if (and this.job.namespace this.system.shouldShowNamespaces)}}
-        <span data-test-job-stat="namespace"> | <strong>Namespace:</strong> {{this.job.namespace.name}}</span>
-      {{/if}}
-    </div>
-  </div>
+    </:before-namespace>
+  </JobPage::Parts::StatsBox>
 
   {{#if this.job.hasClientStatus}}
     <JobPage::Parts::JobClientStatusSummary
@@ -38,4 +33,6 @@
     @gotoTaskGroup={{this.gotoTaskGroup}} />
 
   <JobPage::Parts::RecentAllocations @job={{this.job}} />
-</JobPage::Parts::Body>
+
+  <JobPage::Parts::Meta @job={{this.job}} />
+</JobPage::Parts::Body>