Merge pull request #5788 from marshmalien/5693-inv-host-sparkline

Fix host details and list sparkline links

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

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

@@ -40,6 +40,8 @@ function HostDetail({ host, i18n, onUpdateHost }) {
   const [toggleLoading, setToggleLoading] = useState(false);
   const [toggleError, setToggleError] = useState(false);
 
+  const recentPlaybookJobs = recent_jobs.map(job => ({ ...job, type: 'job' }));
+
   const handleHostToggle = async () => {
     setToggleLoading(true);
     try {
@@ -107,7 +109,7 @@ function HostDetail({ host, i18n, onUpdateHost }) {
         <Detail label={i18n._(t`Name`)} value={name} />
         <Detail
           css="display: flex; flex: 1;"
-          value={<Sparkline jobs={recent_jobs} />}
+          value={<Sparkline jobs={recentPlaybookJobs} />}
           label={i18n._(t`Activity`)}
         />
         <Detail label={i18n._(t`Description`)} value={description} />

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

@@ -23,6 +23,7 @@ describe('<HostDetail />', () => {
       user_capabilities: {
         edit: true,
       },
+      recent_jobs: [],
     },
   };
 

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

@@ -22,6 +22,7 @@ const mockHosts = [
         delete: true,
         update: true,
       },
+      recent_jobs: [],
     },
   },
   {
@@ -38,6 +39,7 @@ const mockHosts = [
         delete: true,
         update: true,
       },
+      recent_jobs: [],
     },
   },
   {
@@ -50,6 +52,14 @@ const mockHosts = [
         id: 1,
         name: 'inv 1',
       },
+      recent_jobs: [
+        {
+          id: 123,
+          name: 'Bibbity Bop',
+          status: 'success',
+          finished: '2020-01-27T19:40:36.208728Z',
+        },
+      ],
       user_capabilities: {
         delete: false,
         update: false,

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

@@ -38,6 +38,12 @@ class HostListItem extends React.Component {
       toggleLoading,
       i18n,
     } = this.props;
+
+    const recentPlaybookJobs = host.summary_fields.recent_jobs.map(job => ({
+      ...job,
+      type: 'job',
+    }));
+
     const labelId = `check-action-${host.id}`;
     return (
       <DataListItem key={host.id} aria-labelledby={labelId} id={`${host.id}`}>
@@ -57,7 +63,7 @@ class HostListItem extends React.Component {
                 </Link>
               </DataListCell>,
               <DataListCell key="recentJobs">
-                <Sparkline jobs={host.summary_fields.recent_jobs} />
+                <Sparkline jobs={recentPlaybookJobs} />
               </DataListCell>,
               <DataListCell key="inventory">
                 {host.summary_fields.inventory && (

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

@@ -19,6 +19,7 @@ const mockHost = {
     user_capabilities: {
       edit: true,
     },
+    recent_jobs: [],
   },
 };
 

awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx

@@ -32,6 +32,11 @@ function InventoryHostItem(props) {
     toggleLoading,
   } = props;
 
+  const recentPlaybookJobs = host.summary_fields.recent_jobs.map(job => ({
+    ...job,
+    type: 'job',
+  }));
+
   const labelId = `check-action-${host.id}`;
 
   return (
@@ -52,7 +57,7 @@ function InventoryHostItem(props) {
               </Link>
             </DataListCell>,
             <DataListCell key="recentJobs">
-              <Sparkline jobs={host.summary_fields.recent_jobs} />
+              <Sparkline jobs={recentPlaybookJobs} />
             </DataListCell>,
             <ActionButtonCell lastcolumn="true" key="action">
               <Tooltip
@@ -69,13 +74,14 @@ function InventoryHostItem(props) {
                   labelOff={i18n._(t`Off`)}
                   isChecked={host.enabled}
                   isDisabled={
-                    toggleLoading || !host.summary_fields.user_capabilities.edit
+                    toggleLoading ||
+                    !host.summary_fields.user_capabilities?.edit
                   }
                   onChange={() => toggleHost(host)}
                   aria-label={i18n._(t`Toggle host`)}
                 />
               </Tooltip>
-              {host.summary_fields.user_capabilities.edit && (
+              {host.summary_fields.user_capabilities?.edit && (
                 <Tooltip content={i18n._(t`Edit Host`)} position="top">
                   <ListActionButton
                     variant="plain"

awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.test.jsx

@@ -17,6 +17,7 @@ const mockHost = {
     user_capabilities: {
       edit: true,
     },
+    recent_jobs: [],
   },
 };
 

awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx

@@ -23,6 +23,7 @@ const mockHosts = [
         delete: true,
         update: true,
       },
+      recent_jobs: [],
     },
   },
   {
@@ -41,6 +42,7 @@ const mockHosts = [
         delete: true,
         update: true,
       },
+      recent_jobs: [],
     },
   },
   {
@@ -58,6 +60,7 @@ const mockHosts = [
         delete: false,
         update: false,
       },
+      recent_jobs: [],
     },
   },
 ];