Merge pull request #10512 from nixocio/ui_issue_5236

Add job status on expand row for hosts

Add job status on expand row for hosts

See: #5236

Reviewed-by: Jake McDermott <yo@jakemcdermott.me>
Reviewed-by: Kersom <None>
Reviewed-by: Tiago Góes <tiago.goes2009@gmail.com>

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 && (
-          <Detail
-            label={t`Activity`}
-            value={<Sparkline jobs={recentPlaybookJobs} />}
-          />
+        {recentJobs?.length > 0 && (
+          <Detail label={t`Activity`} value={<Sparkline jobs={recentJobs} />} />
         )}
         <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,62 +1,97 @@
 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
-        data-cy={labelId}
-        select={{
-          rowIndex,
-          isSelected,
-          onSelect,
-        }}
-        dataLabel={t`Selected`}
-      />
-      <Td id={labelId} dataLabel={t`Name`}>
-        <Link to={`${detailUrl}`}>
-          <b>{host.name}</b>
-        </Link>
-      </Td>
-      <Td dataLabel={t`Inventory`}>
-        {host.summary_fields.inventory && (
-          <Link
-            to={`/inventories/inventory/${host.summary_fields.inventory.id}/details`}
-          >
-            {host.summary_fields.inventory.name}
+    <>
+      <Tr id={`host-row-${host.id}`}>
+        <Td
+          expand={{
+            rowIndex,
+            isExpanded,
+            onToggle: () => setIsExpanded(!isExpanded),
+          }}
+        />
+        <Td
+          data-cy={labelId}
+          select={{
+            rowIndex,
+            isSelected,
+            onSelect,
+          }}
+          dataLabel={t`Selected`}
+        />
+        <Td id={labelId} dataLabel={t`Name`}>
+          <Link to={`${detailUrl}`}>
+            <b>{host.name}</b>
           </Link>
-        )}
-      </Td>
-      <ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px">
-        <HostToggle host={host} />
-        <ActionItem
-          visible={host.summary_fields.user_capabilities.edit}
-          tooltip={t`Edit Host`}
-        >
-          <Button
-            ouiaId={`${host.id}-edit-button}`}
-            aria-label={t`Edit Host`}
-            variant="plain"
-            component={Link}
-            to={`/hosts/${host.id}/edit`}
+        </Td>
+        <Td dataLabel={t`Inventory`}>
+          {host.summary_fields.inventory && (
+            <Link
+              to={`/inventories/inventory/${host.summary_fields.inventory.id}/details`}
+            >
+              {host.summary_fields.inventory.name}
+            </Link>
+          )}
+        </Td>
+        <ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px">
+          <HostToggle host={host} />
+          <ActionItem
+            visible={host.summary_fields.user_capabilities.edit}
+            tooltip={t`Edit Host`}
           >
-            <PencilAltIcon />
-          </Button>
-        </ActionItem>
-      </ActionsTd>
-    </Tr>
+            <Button
+              ouiaId={`${host.id}-edit-button}`}
+              aria-label={t`Edit Host`}
+              variant="plain"
+              component={Link}
+              to={`/hosts/${host.id}/edit`}
+            >
+              <PencilAltIcon />
+            </Button>
+          </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>
+    </>
   );
 }