ui: fix service page not rendering (#28005)

Fixes: #27980

Author: pkazmierczak

.changelog/28005.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fix service detail page not rendering
+```

ui/app/adapters/watchable.js

@@ -218,9 +218,36 @@ export default class Watchable extends ApplicationAdapter {
             json,
           );
           if (replace) {
-            store.unloadAll(relationship.type);
+            // Capture existing record IDs before pushing new data.
+            // We must push first so that the relationship's LID references are
+            // updated before any old records are removed. Calling
+            // store.unloadAll() first leaves dangling LID references in the
+            // hasMany relationship state, which causes Ember Data 4.12+ to
+            // throw "Cannot create a record ... as no resource data exists"
+            // when the relationship is accessed.
+            const existingIds = store
+              .peekAll(relationship.type)
+              .map((r) => r.id);
+            const newIds = new Set(
+              (normalizedData.data || []).map((r) => r.id),
+            );
+
+            store.push(normalizedData);
+
+            // Remove records that were not present in the new payload using
+            // removeRecord, which safely unlinks the record from all of its
+            // relationships before unloading it from the store.
+            existingIds.forEach((id) => {
+              if (!newIds.has(id)) {
+                const record = store.peekRecord(relationship.type, id);
+                if (record) {
+                  removeRecord(store, record);
+                }
+              }
+            });
+          } else {
+            store.push(normalizedData);
           }
-          store.push(normalizedData);
         },
         (error) => {
           if (error instanceof AbortError || error.name === 'AbortError') {

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

@@ -1,12 +1,20 @@
 /**
- * Copyright IBM Corp. 2015, 2025
+ * Copyright IBM Corp. 2015, 2026
  * SPDX-License-Identifier: BUSL-1.1
  */
 
 import Helper from '@ember/component/helper';
 
 export function asyncEscapeHatch([model, relationship]) {
-  return model[relationship].content;
+  // Guard against accessing async relationship proxies on records that have
+  // been unloaded from the store (e.g. after removeRecord). The optional chain
+  // on the relationship handles the null-belongsTo case set by removeRecord,
+  // and the try/catch handles the fully-unloaded record case.
+  try {
+    return model[relationship]?.content ?? null;
+  } catch {
+    return null;
+  }
 }
 
 export default Helper.helper(asyncEscapeHatch);

ui/app/helpers/format-id.js

@@ -1,13 +1,21 @@
 /**
- * Copyright IBM Corp. 2015, 2025
+ * Copyright IBM Corp. 2015, 2026
  * SPDX-License-Identifier: BUSL-1.1
  */
 
 import Helper from '@ember/component/helper';
 
 export function formatID([model, relationship]) {
-  const id = model.belongsTo(relationship).id();
-  return { id, shortId: id.split('-')[0] };
+  // store.unloadRecord() does not set isDestroyed=true on the Ember Object, so
+  // we cannot use that flag as a guard. Use try/catch instead: if the record
+  // has been removed from the store its internal identifier is gone and
+  // belongsTo() will throw an assertion error.
+  try {
+    const id = model.belongsTo(relationship).id();
+    return { id, shortId: id?.split('-')[0] };
+  } catch {
+    return { id: null, shortId: null };
+  }
 }
 
 export default Helper.helper(formatID);

ui/app/routes/jobs/job/services/service.js

@@ -4,6 +4,7 @@
  */
 
 import Route from '@ember/routing/route';
+import { addObserver, removeObserver } from '@ember/object/observers';
 
 export default class JobsJobServicesServiceRoute extends Route {
   model({ name = '', level = '' }) {
@@ -14,4 +15,35 @@ export default class JobsJobServicesServiceRoute extends Route {
       );
     return { name, instances: services || [] };
   }
+
+  // Watch the parent job's services collection while this detail route is
+  // active. When the watcher updates job.services (e.g. after
+  // `nomad service delete`), job.services.length changes and we refresh this
+  // route so model() reruns with a fresh filtered snapshot. Without this, the
+  // static `instances` array captured at route entry would keep stale
+  // references to records that have been unloaded from the store.
+  //
+  // The observer is added in activate() and torn down in deactivate(), so its
+  // lifetime is bounded to the time this route is active. The ember/no-observers
+  // rule is disabled because we genuinely need cross-route reactivity here.
+  activate() {
+    super.activate(...arguments);
+    const job = this.modelFor('jobs.job');
+    if (!job) return;
+    this._servicesObserver = () => {
+      if (this.isDestroyed || this.isDestroying) return;
+      this.refresh();
+    };
+    // eslint-disable-next-line ember/no-observers
+    addObserver(job, 'services.length', this._servicesObserver);
+  }
+
+  deactivate() {
+    const job = this.modelFor('jobs.job');
+    if (job && this._servicesObserver) {
+      removeObserver(job, 'services.length', this._servicesObserver);
+    }
+    this._servicesObserver = null;
+    super.deactivate(...arguments);
+  }
 }

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

@@ -16,41 +16,64 @@
     {{this.model.name}}
   </h1>
 
-  <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>
-        {{#let (format-id row.model "allocation") as |allocation|}}
-          <td
-            {{keyboard-shortcut
-              enumerated=true
-              action=(fn this.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|}}
+  {{#if this.model.instances.length}}
+    <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>
+          {{#let (format-id row.model "allocation") as |allocation|}}
+            <td
+              {{keyboard-shortcut
+                enumerated=true
+                action=(fn this.gotoAllocation row.model.allocation)
+              }}
+            >
+              {{! Guard: allocation.id can be null if the underlying service
+                  record has been removed from the store (e.g. nomad service
+                  delete). Without this guard LinkTo throws while trying to
+                  generate a URL from a null model. }}
+              {{#if allocation.id}}
+                <LinkTo
+                  @route="allocations.allocation"
+                  @model={{allocation.id}}
+                >{{allocation.shortId}}</LinkTo>
+              {{/if}}
+            </td>
+          {{/let}}
+          {{#let (async-escape-hatch row.model "node") as |node|}}
+            <td>
+              {{! Guard: node can be null when the service's node relationship
+                  has been cleared or unloaded. }}
+              {{#if node}}
+                <Tooltip @text={{node.name}}>
+                  <LinkTo
+                    @route="clients.client"
+                    @model={{node.id}}
+                  >{{node.shortId}}</LinkTo>
+                </Tooltip>
+              {{/if}}
+            </td>
+          {{/let}}
           <td>
-            <Tooltip @text={{node.name}}>
-              <LinkTo
-                @route="clients.client"
-                @model={{node.id}}
-              >{{node.shortId}}</LinkTo>
-            </Tooltip>
+            {{row.model.address}}:{{row.model.port}}
           </td>
-        {{/let}}
-        <td>
-          {{row.model.address}}:{{row.model.port}}
-        </td>
-      </tr>
-    </t.body>
-  </ListTable>
-</section>
+        </tr>
+      </t.body>
+    </ListTable>
+  {{else}}
+    <div class="boxed-section-body">
+      <div class="empty-message" data-test-empty-service-instances>
+        <h3 class="empty-message-headline">No Running Instances</h3>
+        <p class="empty-message-body">
+          There are no running registrations for this service. The service is
+          defined in the job specification but no allocations are currently
+          registering it.
+        </p>
+      </div>
+    </div>
+  {{/if}}
+</section>

ui/tests/acceptance/job-services-test.js

@@ -8,6 +8,7 @@ import { find, findAll, currentURL, settled } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import { allScenarios } from '../../mirage/scenarios/default';
+import removeRecord from 'nomad-ui/utils/remove-record';
 
 import a11yAudit from 'nomad-ui/tests/helpers/a11y-audit';
 import Services from 'nomad-ui/tests/pages/jobs/job/services';
@@ -57,4 +58,72 @@ module('Acceptance | job services', function (hooks) {
       'Same number of alloc rows as the index shows',
     );
   });
+
+  test('service detail page handles registrations being deleted from under the job', async function (assert) {
+    const serviceName = find(
+      '[data-test-service-level="group"][data-test-service-provider="nomad"]',
+    ).getAttribute('data-test-service-name');
+    const initialCount = Number(
+      find(
+        '[data-test-service-level="group"][data-test-service-provider="nomad"]',
+      ).getAttribute('data-test-num-allocs'),
+    );
+
+    await find(
+      '[data-test-service-level="group"][data-test-service-provider="nomad"] a',
+    ).click();
+    await settled();
+
+    assert.strictEqual(
+      findAll('tr[data-test-service-row]').length,
+      initialCount,
+      'detail page renders the expected number of instances',
+    );
+
+    // Simulate what reloadRelationship + removeRecord do when `nomad service
+    // delete` runs on the backend: null out relationships (which removes the
+    // service from job.services via inverse) and unload the record. The route
+    // observer should pick up the job.services.length change and refresh.
+    const store = this.owner.lookup('service:store');
+    const toRemove = store
+      .peekAll('service')
+      .find((s) => s.name === serviceName && s.derivedLevel === 'group');
+
+    if (toRemove) {
+      removeRecord(store, toRemove);
+    }
+
+    await settled();
+
+    assert.strictEqual(
+      findAll('tr[data-test-service-row]').length,
+      initialCount - 1,
+      'detail page updates after a service registration is removed',
+    );
+    assert.dom('.empty-message-headline').doesNotExist();
+  });
+
+  test('service detail page shows empty state when there are no live instances', async function (assert) {
+    const serviceName = find(
+      '[data-test-service-level="group"][data-test-service-provider="nomad"]',
+    ).getAttribute('data-test-service-name');
+
+    // Remove every live registration for this service before navigating in.
+    const store = this.owner.lookup('service:store');
+    store
+      .peekAll('service')
+      .filter((s) => s.name === serviceName && s.derivedLevel === 'group')
+      .forEach((s) => removeRecord(store, s));
+    await settled();
+
+    await find(
+      '[data-test-service-level="group"][data-test-service-provider="nomad"] a',
+    ).click();
+    await settled();
+
+    assert
+      .dom('[data-test-empty-service-instances]')
+      .exists('empty state is shown when no live registrations exist');
+    assert.dom('tr[data-test-service-row]').doesNotExist();
+  });
 });

ui/tests/unit/adapters/job-test.js

@@ -278,6 +278,73 @@ module('Unit | Adapter | Job', function (hooks) {
     );
   });
 
+  test('reloadRelationship with replace:true pushes new records before removing stale ones, preventing dangling LID references', async function (assert) {
+    await this.initializeUI();
+
+    // Create two services for job-1 in mirage
+    this.server.create('service', {
+      id: 'svc-keep',
+      jobId: 'job-1',
+      namespace: 'default',
+    });
+    this.server.create('service', {
+      id: 'svc-remove',
+      jobId: 'job-1',
+      namespace: 'default',
+    });
+
+    // Load the job and trigger the initial services relationship load
+    const job = await this.store.findRecord(
+      'job',
+      JSON.stringify(['job-1', 'default']),
+    );
+    await job.services;
+    await settled();
+
+    assert.strictEqual(
+      this.store.peekAll('service').length,
+      2,
+      'Initially 2 services are in the store',
+    );
+
+    // Simulate a server-side change: svc-remove is gone from the server
+    this.server.db.services.remove('svc-remove');
+
+    // Reload the services relationship with replace: true
+    await this.store.adapterFor('job').reloadRelationship(job, 'services', {
+      replace: true,
+    });
+    await settled();
+
+    assert.notOk(
+      this.store.peekRecord('service', 'svc-remove'),
+      'svc-remove is removed from the store after the replace reload',
+    );
+    assert.ok(
+      this.store.peekRecord('service', 'svc-keep'),
+      'svc-keep is still in the store after the replace reload',
+    );
+
+    // Critically, accessing the job's services relationship must not throw
+    // the "Cannot create a record ... as no resource data exists" error that
+    // Ember Data 4.12 raises when a hasMany relationship still holds a dangling
+    // LID for a record that was removed via store.unloadAll().
+    let errorThrown = null;
+    try {
+      const currentServices = job.hasMany('services').value();
+      if (currentServices) {
+        currentServices.forEach((s) => void s.serviceName);
+      }
+    } catch (e) {
+      errorThrown = e;
+    }
+    assert.strictEqual(
+      errorThrown,
+      null,
+      'Accessing job.services after a replace reload does not throw',
+    );
+  });
+
   test('findAll can be canceled', async function (assert) {
     await this.initializeUI();