Payload details for the parameterized child job detail page

ui/app/components/job-page/parameterized-child.js

@@ -1,3 +1,16 @@
-import AbstractJobPage from './abstract';
+import { computed } from '@ember/object';
+import { alias } from '@ember/object/computed';
+import PeriodicChildJobPage from './periodic-child';
 
-export default AbstractJobPage.extend();
+export default PeriodicChildJobPage.extend({
+  payload: alias('job.decodedPayload'),
+  payloadJSON: computed('payload', function() {
+    let json;
+    try {
+      json = JSON.parse(this.get('payload'));
+    } catch (e) {
+      // Swallow error and fall back to plain text rendering
+    }
+    return json;
+  }),
+});

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

@@ -0,0 +1,52 @@
+{{#global-header class="page-header"}}
+  {{#each breadcrumbs as |breadcrumb index|}}
+    <li class="{{if (eq (inc index) breadcrumbs.length) "is-active"}}">
+      {{#link-to data-test-breadcrumb=breadcrumb.label params=breadcrumb.args}}{{breadcrumb.label}}{{/link-to}}
+    </li>
+  {{/each}}
+{{/global-header}}
+{{#job-page/parts/body job=job onNamespaceChange=onNamespaceChange}}
+  <h1 class="title">
+    {{job.name}}
+    <span class="bumper-left tag {{job.statusClass}}" data-test-job-status>{{job.status}}</span>
+  </h1>
+
+  <div class="boxed-section job-stats">
+    <div class="boxed-section-body">
+      <span data-test-job-stat="type"><strong>Type:</strong> {{job.type}} | </span>
+      <span data-test-job-stat="priority"><strong>Priority:</strong> {{job.priority}} </span>
+      <span data-test-job-stat="parent">
+        <strong>Parent:</strong>
+        {{#link-to "jobs.job" job.parent (query-params jobNamespace=job.parent.namespace.name)}}
+          {{job.parent.name}}
+        {{/link-to}}
+      </span>
+      {{#if (and job.namespace system.shouldShowNamespaces)}}
+        <span data-test-job-stat="namespace"> | <strong>Namespace:</strong> {{job.namespace.name}}</span>
+      {{/if}}
+    </div>
+  </div>
+
+  {{job-page/parts/summary job=job}}
+
+  {{job-page/parts/placement-failures job=job}}
+
+  {{job-page/parts/task-groups
+    job=job
+    sortProperty=sortProperty
+    sortDescending=sortDescending
+    gotoTaskGroup=gotoTaskGroup}}
+
+  {{job-page/parts/evaluations job=job}}
+
+  <div class="boxed-section">
+    <div class="boxed-section-head">Payload</div>
+    <div class="boxed-section-body is-dark">
+      {{#if payloadJSON}}
+        {{json-viewer json=payloadJSON}}
+      {{else}}
+        <pre class="cli-window is-elastic"><code>{{payload}}</code></pre>
+      {{/if}}
+    </div>
+  </div>
+{{/job-page/parts/body}}