add titles to breadcrumbs

ui/app/components/breadcrumbs/default.hbs

@@ -1,5 +1,16 @@
 <li data-test-breadcrumb-default>
   <LinkTo @params={{@crumb.args}} data-test-breadcrumb={{@crumb.args.firstObject}}>
-    {{@crumb.label}}
+    {{#if @crumb.title}}
+      <dl>
+        <dt>
+          {{@crumb.title}}
+        </dt>
+        <dd>
+          {{@crumb.label}}
+        </dd>
+      </dl>
+    {{else}}
+      {{@crumb.label}}
+    {{/if}}
   </LinkTo>
 </li>

ui/app/components/breadcrumbs/job.hbs

@@ -16,7 +16,14 @@
           @query={{hash namespace=(or trigger.data.result.namespace.name "default")}}
           data-test-breadcrumb={{"jobs.job.index"}}
         >
-          {{trigger.data.result.trimmedName}}
+          <dl>
+            <dt>
+              Parent Job
+            </dt>
+            <dd>
+              {{trigger.data.result.trimmedName}}
+            </dd>
+          </dl>
         </LinkTo>
       </li>
     {{/if}}
@@ -28,7 +35,14 @@
         data-test-breadcrumb={{"jobs.job.index"}}
         data-test-job-breadcrumb
       >
-        {{this.job.trimmedName}}
+        <dl>
+          <dt>
+            {{if this.job.hasChildren "Parent Job" "Job"}}
+          </dt>
+          <dd>
+            {{this.job.trimmedName}}
+          </dd>
+        </dl>
       </LinkTo>
     </li>
   {{/if}}

ui/app/controllers/allocations/allocation.js

@@ -33,10 +33,12 @@ export default class AllocationsAllocationController extends Controller {
       { label: 'Jobs', args: ['jobs.index', jobQueryParams] },
       { type: 'job', job: job },
       {
+        title: 'Task Group',
         label: allocation.taskGroupName,
         args: ['jobs.job.task-group', job.plainId, allocation.taskGroupName, jobQueryParams],
       },
       {
+        title: 'Allocation',
         label: allocation.shortId,
         args: ['allocations.allocation', allocation],
       },

ui/app/controllers/allocations/allocation/task.js

@@ -6,6 +6,7 @@ export default class AllocationsAllocationTaskController extends Controller {
     if (!model) return [];
     return [
       {
+        title: 'Task',
         label: model.get('name'),
         args: ['allocations.allocation.task', model.get('allocation'), model],
       },

ui/app/controllers/clients/client.js

@@ -6,6 +6,7 @@ export default class ClientsClientController extends Controller {
     if (!model) return [];
     return [
       {
+        title: 'Client',
         label: model.get('shortId'),
         args: ['clients.client', model.get('id')],
       },

ui/app/controllers/jobs/job/task-group.js

@@ -91,6 +91,7 @@ export default class TaskGroupController extends Controller.extend(
     if (!model) return [];
     return [
       {
+        title: 'Task Group',
         label: model.get('name'),
         args: [
           'jobs.job.task-group',

ui/app/controllers/servers/server.js

@@ -7,6 +7,7 @@ export default class ServersServerController extends Controller {
 
   get breadcrumb() {
     return {
+      title: 'Server',
       label: this.server.name,
       args: ['servers.server', this.server.id],
     };

ui/app/styles/core/breadcrumb.scss

@@ -11,7 +11,24 @@
     }
   }
 
+  ul {
+    align-items: center;
+  }
+
+  li::before {
+    font-size: x-large;
+  }
+
   li.is-active a {
     opacity: 1;
   }
+
+  dl dd {
+    margin: -4px 0px;
+    font-size: medium;
+  }
+
+  dl dt {
+    font-size: small;
+  }
 }

ui/app/styles/core/navbar.scss

@@ -1,5 +1,6 @@
 .navbar {
   display: flex;
+  align-items: center;
 
   &.is-primary {
     background: linear-gradient(to right, $nomad-green-darker, $nomad-green-dark);

ui/tests/acceptance/client-detail-test.js

@@ -68,8 +68,8 @@ module('Acceptance | client detail', function(hooks) {
     );
     assert.equal(
       Layout.breadcrumbFor('clients.client').text,
-      node.id.split('-')[0],
-      'Second breadcrumb says the node short id'
+      `Client ${node.id.split('-')[0]}`,
+      'Second breadcrumb is a titled breadcrumb saying the node short id'
     );
     await Layout.breadcrumbFor('clients.index').visit();
     assert.equal(currentURL(), '/clients', 'First breadcrumb links back to clients');

ui/tests/acceptance/client-monitor-test.js

@@ -36,7 +36,7 @@ module('Acceptance | client monitor', function(hooks) {
     await ClientMonitor.visit({ id: node.id });
 
     assert.equal(Layout.breadcrumbFor('clients.index').text, 'Clients');
-    assert.equal(Layout.breadcrumbFor('clients.client').text, node.id.split('-')[0]);
+    assert.equal(Layout.breadcrumbFor('clients.client').text, `Client ${node.id.split('-')[0]}`);
 
     await Layout.breadcrumbFor('clients.index').visit();
     assert.equal(currentURL(), '/clients');

ui/tests/acceptance/server-monitor-test.js

@@ -38,7 +38,7 @@ module('Acceptance | server monitor', function(hooks) {
       'Servers',
       'The page should read the breadcrumb Servers'
     );
-    assert.equal(Layout.breadcrumbFor('servers.server').text, agent.name);
+    assert.equal(Layout.breadcrumbFor('servers.server').text, `Server ${agent.name}`);
 
     await Layout.breadcrumbFor('servers.index').visit();
     assert.equal(currentURL(), '/servers');

ui/tests/acceptance/task-detail-test.js

@@ -62,22 +62,22 @@ module('Acceptance | task detail', function(hooks) {
     await waitFor('[data-test-job-breadcrumb]');
     assert.equal(
       Layout.breadcrumbFor('jobs.job.index').text,
-      job.name,
+      `Job ${job.name}`,
       'Job is the second breadcrumb'
     );
     assert.equal(
       Layout.breadcrumbFor('jobs.job.task-group').text,
-      taskGroup,
+      `Task Group ${taskGroup}`,
       'Task Group is the third breadcrumb'
     );
     assert.equal(
       Layout.breadcrumbFor('allocations.allocation').text,
-      shortId,
+      `Allocation ${shortId}`,
       'Allocation short id is the fourth breadcrumb'
     );
     assert.equal(
       Layout.breadcrumbFor('allocations.allocation.task').text,
-      task.name,
+      `Task ${task.name}`,
       'Task name is the fifth breadcrumb'
     );
 

ui/tests/acceptance/task-group-detail-test.js

@@ -122,12 +122,12 @@ module('Acceptance | task group detail', function(hooks) {
     assert.equal(Layout.breadcrumbFor('jobs.index').text, 'Jobs', 'First breadcrumb says jobs');
     assert.equal(
       Layout.breadcrumbFor('jobs.job.index').text,
-      job.name,
+      `Job ${job.name}`,
       'Second breadcrumb says the job name'
     );
     assert.equal(
       Layout.breadcrumbFor('jobs.job.task-group').text,
-      taskGroup.name,
+      `Task Group ${taskGroup.name}`,
       'Third breadcrumb says the job name'
     );
   });