Add job status on expand row for hosts

Add job status on expand row for hosts.

Also, update HostDetail to remove the addition of `type=job` since it is
already present on the API hosts endpoint.

See: https://github.com/ansible/awx/issues/5236

awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx

@@ -29,7 +29,7 @@ function HostDetail({ host }) {
     variables,
     summary_fields: {
       inventory,
-      recent_jobs,
+      recent_jobs: recentJobs,
       created_by,
       modified_by,
       user_capabilities,
@@ -66,17 +66,13 @@ function HostDetail({ host }) {
     );
   }
 
-  const recentPlaybookJobs = recent_jobs.map(job => ({ ...job, type: 'job' }));
   return (
     <CardBody>
       <HostToggle host={host} css="padding-bottom: 40px" />
       <DetailList gutter="sm">
         <Detail label={t`Name`} value={name} dataCy="host-name" />
-        {recentPlaybookJobs?.length > 0 && (
+        {recentJobs?.length > 0 && (
-          <Detail
+          <Detail label={t`Activity`} value={<Sparkline jobs={recentJobs} />} />
-            label={t`Activity`}
-            value={<Sparkline jobs={recentPlaybookJobs} />}
-          />
         )}
         <Detail label={t`Description`} value={description} />
         <Detail

awx/ui_next/src/screens/Host/HostList/HostList.jsx

@@ -162,7 +162,7 @@ function HostList() {
           toolbarSearchableKeys={searchableKeys}
           toolbarRelatedSearchableKeys={relatedSearchableKeys}
           headerRow={
-            <HeaderRow qsConfig={QS_CONFIG}>
+            <HeaderRow qsConfig={QS_CONFIG} isExpandable>
               <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
               <HeaderCell>{t`Inventory`}</HeaderCell>
               <HeaderCell>{t`Actions`}</HeaderCell>

awx/ui_next/src/screens/Host/HostList/HostListItem.jsx

@@ -1,21 +1,36 @@
 import 'styled-components/macro';
-import React from 'react';
+import React, { useState } from 'react';
 import { string, bool, func } from 'prop-types';
 
 import { t } from '@lingui/macro';
 import { Button } from '@patternfly/react-core';
-import { Tr, Td } from '@patternfly/react-table';
+import { Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
 import { Host } from '../../../types';
 import HostToggle from '../../../components/HostToggle';
+import { DetailList, Detail } from '../../../components/DetailList';
+import Sparkline from '../../../components/Sparkline';
 
 function HostListItem({ host, isSelected, onSelect, detailUrl, rowIndex }) {
   const labelId = `check-action-${host.id}`;
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const {
+    summary_fields: { recent_jobs: recentJobs = [] },
+  } = host;
 
   return (
+    <>
       <Tr id={`host-row-${host.id}`}>
+        <Td
+          expand={{
+            rowIndex,
+            isExpanded,
+            onToggle: () => setIsExpanded(!isExpanded),
+          }}
+        />
         <Td
           data-cy={labelId}
           select={{
@@ -57,6 +72,26 @@ function HostListItem({ host, isSelected, onSelect, detailUrl, rowIndex }) {
           </ActionItem>
         </ActionsTd>
       </Tr>
+      <Tr isExpanded={isExpanded}>
+        <Td colSpan={2} />
+        <Td colSpan={4}>
+          <ExpandableRowContent>
+            <DetailList gutter="sm">
+              <Detail
+                label={t`Activity`}
+                value={
+                  recentJobs.length > 0 ? (
+                    <Sparkline jobs={recentJobs} />
+                  ) : (
+                    t`No job data available`
+                  )
+                }
+              />
+            </DetailList>
+          </ExpandableRowContent>
+        </Td>
+      </Tr>
+    </>
   );
 }