Throw an error when host inventory doesn't match parent inventory

awx/ui_next/src/api/models/Inventories.js

@@ -8,6 +8,7 @@ class Inventories extends InstanceGroupsMixin(Base) {
 
     this.readAccessList = this.readAccessList.bind(this);
     this.readHosts = this.readHosts.bind(this);
+    this.readHostDetail = this.readHostDetail.bind(this);
     this.readGroups = this.readGroups.bind(this);
     this.readGroupsOptions = this.readGroupsOptions.bind(this);
     this.promoteGroup = this.promoteGroup.bind(this);
@@ -27,6 +28,22 @@ class Inventories extends InstanceGroupsMixin(Base) {
     return this.http.get(`${this.baseUrl}${id}/hosts/`, { params });
   }
 
+  async readHostDetail(inventoryId, hostId) {
+    const {
+      data: { results },
+    } = await this.http.get(
+      `${this.baseUrl}${inventoryId}/hosts/?id=${hostId}`
+    );
+
+    if (Array.isArray(results) && results.length) {
+      return results[0];
+    }
+
+    throw new Error(
+      `How did you get here? Host not found for Inventory ID: ${inventoryId}`
+    );
+  }
+
   readGroups(id, params) {
     return this.http.get(`${this.baseUrl}${id}/groups/`, { params });
   }

awx/ui_next/src/screens/Inventory/InventoryHost/InventoryHost.jsx

@@ -11,7 +11,7 @@ import {
 } from 'react-router-dom';
 import useRequest from '@util/useRequest';
 
-import { HostsAPI } from '@api';
+import { InventoriesAPI } from '@api';
 import { Card, CardActions } from '@patternfly/react-core';
 import { CaretLeftIcon } from '@patternfly/react-icons';
 import { TabbedCardHeader } from '@components/Card';
@@ -23,11 +23,6 @@ import JobList from '@components/JobList';
 import InventoryHostDetail from '../InventoryHostDetail';
 import InventoryHostEdit from '../InventoryHostEdit';
 
-const checkHostInventory = (host, inventory) =>
-  host &&
-  inventory &&
-  host.summary_fields?.inventory?.id === parseInt(inventory.id, 10);
-
 function InventoryHost({ i18n, setBreadcrumb, inventory }) {
   const location = useLocation();
   const match = useRouteMatch('/inventories/inventory/:id/hosts/:hostId');
@@ -40,12 +35,14 @@ function InventoryHost({ i18n, setBreadcrumb, inventory }) {
     request: fetchHost,
   } = useRequest(
     useCallback(async () => {
-      const { data } = await HostsAPI.readDetail(match.params.hostId);
+      const response = await InventoriesAPI.readHostDetail(
-
+        inventory.id,
+        match.params.hostId
+      );
       return {
-        host: data,
+        host: response,
       };
-    }, [match.params.hostId]),
+    }, [inventory.id, match.params.hostId]),
     {
       host: null,
     }
@@ -111,15 +108,6 @@ function InventoryHost({ i18n, setBreadcrumb, inventory }) {
     );
   }
 
-  const isInventoryValid = checkHostInventory(host, inventory);
-  if (!isLoading && !isInventoryValid) {
-    return (
-      <ContentError isNotFound>
-        <Link to={hostListUrl}>{i18n._(t`View all Inventory Hosts.`)}</Link>
-      </ContentError>
-    );
-  }
-
   return (
     <>
       {['edit'].some(name => location.pathname.includes(name)) ? null : (
@@ -133,7 +121,7 @@ function InventoryHost({ i18n, setBreadcrumb, inventory }) {
 
       {isLoading && <ContentLoading />}
 
-      {!isLoading && isInventoryValid && (
+      {!isLoading && host && (
         <Switch>
           <Redirect
             from="/inventories/inventory/:id/hosts/:hostId"

awx/ui_next/src/screens/Inventory/InventoryHost/InventoryHost.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { createMemoryHistory } from 'history';
-import { HostsAPI } from '@api';
+import { InventoriesAPI } from '@api';
 import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
 import mockHost from '../shared/data.host.json';
 import InventoryHost from './InventoryHost';
@@ -15,7 +15,7 @@ jest.mock('react-router-dom', () => ({
   }),
 }));
 
-HostsAPI.readDetail.mockResolvedValue({
+InventoriesAPI.readHostDetail.mockResolvedValue({
   data: { ...mockHost },
 });
 
@@ -54,7 +54,7 @@ describe('<InventoryHost />', () => {
   });
 
   test('should show content error when api throws error on initial render', async () => {
-    HostsAPI.readDetail.mockRejectedValueOnce(new Error());
+    InventoriesAPI.readHostDetail.mockRejectedValueOnce(new Error());
     await act(async () => {
       wrapper = mountWithContexts(
         <InventoryHost inventory={mockInventory} setBreadcrumb={() => {}} />