bug: hitting refresh on `/jobs/:jobId/services/:serviceId` doesn't display data (#15431)

* ui: create id helper

* refact: handle async relationships

* chore: prettify template

* ui: helper async escape hatch

* refact: use escape hatch for tooltip

ui/app/helpers/async-escape-hatch.js

@@ -0,0 +1,7 @@
+import Helper from '@ember/component/helper';
+
+export function asyncEscapeHatch([model, relationship]) {
+  return model[relationship].content;
+}
+
+export default Helper.helper(asyncEscapeHatch);

ui/app/helpers/format-id.js

@@ -0,0 +1,8 @@
+import Helper from '@ember/component/helper';
+
+export function formatID([model, relationship]) {
+  const id = model.belongsTo(relationship).id();
+  return { id, shortId: id.split('-')[0] };
+}
+
+export default Helper.helper(formatID);

ui/app/templates/jobs/job/services/service.hbs

@@ -1,43 +1,46 @@
 <section class="section service-list">
-	<h1 class="title">
-		<LinkTo class="back-link" @route="jobs.job.services">
-			<FlightIcon
-				@name="chevron-left"
-				@title="Back to services"
-				@size="24"
-				/>
-		</LinkTo>
-		{{this.model.name}}
-	</h1>
+  <h1 class="title">
+    <LinkTo class="back-link" @route="jobs.job.services">
+      <FlightIcon @name="chevron-left" @title="Back to services" @size="24" />
+    </LinkTo>
+    {{this.model.name}}
+  </h1>
 
-	<ListTable
-		@source={{this.model.instances}}
-		as |t|
-	>
-		<t.head>
-			<th>Allocation</th>
+  <ListTable @source={{this.model.instances}} as |t|>
+    <t.head>
+      <th>Allocation</th>
       <th>Client</th>
-			<th>IP Address &amp; Port</th>
-		</t.head>
-		<t.body as |row|>
-			<tr data-test-service-row>
-				<td
-					{{keyboard-shortcut 
-						enumerated=true
-						action=(action "gotoAllocation" row.model.allocation)
-					}}
-				>
-					<LinkTo @route="allocations.allocation" @model={{row.model.allocation}}>{{row.model.allocation.shortId}}</LinkTo>
-				</td>
+      <th>IP Address &amp; Port</th>
+    </t.head>
+    <t.body as |row|>
+      <tr data-test-service-row>
+        {{#let (format-id row.model "allocation") as |allocation|}}
+          <td
+            {{keyboard-shortcut
+              enumerated=true
+              action=(action "gotoAllocation" row.model.allocation)
+            }}
+          >
+            <LinkTo
+              @route="allocations.allocation"
+              @model={{allocation.id}}
+            >{{allocation.shortId}}</LinkTo>
+          </td>
+        {{/let}}
+		{{#let (async-escape-hatch row.model "node") as |node|}}
+          <td>
+            <Tooltip @text={{node.name}}>
+              <LinkTo
+                @route="clients.client"
+                @model={{node.id}}
+              >{{node.shortId}}</LinkTo>
+            </Tooltip>
+          </td>
+        {{/let}}
         <td>
-          <Tooltip @text={{row.model.node.name}}>
-            <LinkTo @route="clients.client" @model={{row.model.node.id}}>{{row.model.node.shortId}}</LinkTo>
-          </Tooltip>
+          {{row.model.address}}:{{row.model.port}}
         </td>
-				<td>
-					{{row.model.address}}:{{row.model.port}}
-				</td>
-			</tr>
-		</t.body>
-	</ListTable>
+      </tr>
+    </t.body>
+  </ListTable>
 </section>