Breadcrumbs for the periodic child job page

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

@@ -1,3 +1,21 @@
 import AbstractJobPage from './abstract';
+import { computed } from '@ember/object';
 
-export default AbstractJobPage.extend();
+export default AbstractJobPage.extend({
+  breadcrumbs: computed('job.{name,id}', 'job.parent.{name,id}', function() {
+    const job = this.get('job');
+    const parent = this.get('job.parent');
+
+    return [
+      { label: 'Jobs', args: ['jobs'] },
+      {
+        label: parent.get('name'),
+        args: ['jobs.job', parent],
+      },
+      {
+        label: job.get('name'),
+        args: ['jobs.job', job],
+      },
+    ];
+  }),
+});

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

@@ -0,0 +1,41 @@
+{{#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}}
+{{/job-page/parts/body}}