Working through timing issues w breadcrumbs

ui/app/components/breadcrumbs/default.hbs

@@ -10,7 +10,7 @@
     exclusive=true
   )}}
 >
-
+{{log "CRUMB" @crumb @crumb.peers}}
 {{#if @crumb.peers}}
   <span class="peer-dropdown-container">
     {{#if @crumb.title}}

ui/app/components/breadcrumbs/peers.js

@@ -8,6 +8,7 @@ export default class BreadcrumbsPeersComponent extends Component {
   selectedPeer = {};
   selectPeer(peer) {
     const [routeName, ...models] = peer.args;
+    console.log('about to transition to', routeName, models);
     this.router.transitionTo(routeName, ...models);
   }
 }

ui/app/components/lifecycle-chart.js

@@ -13,6 +13,10 @@ export default class LifecycleChart extends Component {
   @computed('tasks.@each.lifecycle', 'taskStates.@each.state')
   get lifecyclePhases() {
     const tasksOrStates = this.taskStates || this.tasks;
+    console.log(
+      'phases for 1',
+      tasksOrStates.map((x) => x.get('allocation').get('shortId'))
+    );
     const lifecycles = {
       'prestart-ephemerals': [],
       'prestart-sidecars': [],
@@ -61,11 +65,13 @@ export default class LifecycleChart extends Component {
   }
 
   @sort('taskStates', function (a, b) {
+    console.log('+++TS', a);
     return getTaskSortPrefix(a.task).localeCompare(getTaskSortPrefix(b.task));
   })
   sortedLifecycleTaskStates;
 
   @sort('tasks', function (a, b) {
+    console.log('!!!SLT', a);
     return getTaskSortPrefix(a).localeCompare(getTaskSortPrefix(b));
   })
   sortedLifecycleTasks;
@@ -81,5 +87,5 @@ const lifecycleNameSortPrefix = {
 };
 
 function getTaskSortPrefix(task) {
-  return `${lifecycleNameSortPrefix[task.lifecycleName]}-${task.name}`;
+  return `${lifecycleNameSortPrefix[task?.lifecycleName]}-${task?.name}`;
 }

ui/app/controllers/allocations/allocation.js

@@ -16,6 +16,42 @@ export default class AllocationsAllocationController extends Controller {
     return job;
   }
 
+  get allocationPeers() {
+    return this.job.taskGroups
+      .filterBy('name', this.allocation.taskGroup.name)
+      .reduce((allocs, group) => {
+        return allocs.concat(
+          group.allocations.rejectBy('id', this.allocation.id).map((alloc) => {
+            return {
+              label: alloc.shortId,
+              args: ['allocations.allocation', alloc.id],
+            };
+          })
+        );
+      }, []);
+
+    // console.log('getting allocpeers', this.allocation, this.store.peekAll('allocation'));
+    // return this.store
+    //   .peekAll('allocation')
+    //   .rejectBy('id', this.allocation?.id)
+    //   .map((alloc) => {
+    //     return {
+    //       label: alloc.shortId,
+    //       args: ['allocations.allocation', alloc.id],
+    //     };
+    //   });
+  }
+
+  get taskGroupPeers() {
+    const groupsWithinJob = this.job.taskGroups.map((group) => {
+      return {
+        label: group.name,
+        args: ['jobs.job.task-group', this.job.idWithNamespace, group.name],
+      };
+    });
+    return groupsWithinJob.length > 1 ? groupsWithinJob : null;
+  }
+
   get jobNamespace() {
     const jobNamespaceId = this.job.belongsTo('namespace').id();
 
@@ -40,11 +76,13 @@ export default class AllocationsAllocationController extends Controller {
           job.idWithNamespace,
           allocation.taskGroupName,
         ],
+        peers: this.taskGroupPeers,
       },
       {
         title: 'Allocation',
         label: allocation.shortId,
         args: ['allocations.allocation', allocation],
+        peers: this.allocationPeers,
       },
     ];
   }

ui/app/styles/core/breadcrumb.scss

@@ -36,6 +36,7 @@
     position: relative;
     & > .peer-dropdown-container {
       padding-left: 0.75em;
+      padding-right: 0.75em;
     }
     .ember-power-select-trigger {
       background-color: transparent;
@@ -46,6 +47,7 @@
       padding-bottom: 0;
       // outline: none;
       box-shadow: none;
+      padding-right: 24px;
 
       &:focus {
         border-bottom: 1px solid white;
@@ -58,6 +60,7 @@
 
       .ember-power-select-prefix {
         color: unset;
+        font-size: 16px;
       }
       .ember-power-select-selected-item {
         margin-left: 0;