Add host description in a couple of screens (#12292)

Add host description in a couple of screens

See:https://github.com/ansible/awx/issues/3348
Also: https://github.com/ansible/awx/issues/9363

awx/ui/src/components/Lookup/HostFilterLookup.js

@@ -419,6 +419,7 @@ function HostFilterLookup({
             headerRow={
               <HeaderRow qsConfig={QS_CONFIG} isSelectable={false}>
                 <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
+                <HeaderCell sortKey="description">{t`Description`}</HeaderCell>
                 <HeaderCell>{t`Inventory`}</HeaderCell>
               </HeaderRow>
             }

awx/ui/src/components/Lookup/HostListItem.js

@@ -6,6 +6,7 @@ function HostListItem({ item }) {
   return (
     <Tr ouiaId={`host-list-item-${item.id}`}>
       <Td dataLabel={t`Name`}>{item.name}</Td>
+      <Td dataLabel={t`Description`}>{item.description}</Td>
       <Td dataLabel={t`Inventory`}>{item.summary_fields.inventory.name}</Td>
     </Tr>
   );

awx/ui/src/components/Lookup/HostListItem.test.js

@@ -8,6 +8,7 @@ describe('HostListItem', () => {
     id: 1,
     type: 'inventory',
     name: 'Foo',
+    description: 'Buzz',
     summary_fields: {
       inventory: {
         name: 'Bar',
@@ -24,6 +25,7 @@ describe('HostListItem', () => {
     );
     expect(wrapper.find('HostListItem').length).toBe(1);
     expect(wrapper.find('Td').at(0).text()).toBe('Foo');
-    expect(wrapper.find('Td').at(1).text()).toBe('Bar');
+    expect(wrapper.find('Td').at(1).text()).toBe('Buzz');
+    expect(wrapper.find('Td').at(2).text()).toBe('Bar');
   });
 });

awx/ui/src/screens/Host/HostList/HostList.js

@@ -167,6 +167,7 @@ function HostList() {
           headerRow={
             <HeaderRow qsConfig={QS_CONFIG} isExpandable>
               <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
+              <HeaderCell sortKey="description">{t`Description`}</HeaderCell>
               <HeaderCell>{t`Inventory`}</HeaderCell>
               <HeaderCell>{t`Actions`}</HeaderCell>
             </HeaderRow>

awx/ui/src/screens/Host/HostList/HostListItem.js

@@ -52,6 +52,12 @@ function HostListItem({
             <b>{host.name}</b>
           </Link>
         </TdBreakWord>
+        <TdBreakWord
+          id={`host-description-${host.id}}`}
+          dataLabel={t`Description`}
+        >
+          {host.description}
+        </TdBreakWord>
         <TdBreakWord dataLabel={t`Inventory`}>
           {host.summary_fields.inventory && (
             <Link

awx/ui/src/screens/Host/HostList/HostListItem.test.js

@@ -7,6 +7,7 @@ const mockHost = {
   id: 1,
   name: 'Host 1',
   url: '/api/v2/hosts/1',
+  description: 'Buzz',
   inventory: 1,
   summary_fields: {
     inventory: {
@@ -38,6 +39,14 @@ describe('<HostsListItem />', () => {
     );
   });
 
+  test('should display expected details', () => {
+    expect(wrapper.find('HostListItem').length).toBe(1);
+    expect(wrapper.find('Td[dataLabel="Name"]').find('Link').prop('to')).toBe(
+      '/host/1'
+    );
+    expect(wrapper.find('Td[dataLabel="Description"]').text()).toBe('Buzz');
+  });
+
   test('edit button shown to users with edit capabilities', () => {
     expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
   });

awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostList.js

@@ -213,6 +213,7 @@ function InventoryGroupHostList() {
         headerRow={
           <HeaderRow qsConfig={QS_CONFIG}>
             <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
+            <HeaderCell sortKey="description">{t`Description`}</HeaderCell>
             <HeaderCell>{t`Activity`}</HeaderCell>
             <HeaderCell>{t`Actions`}</HeaderCell>
           </HeaderRow>

awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.js

@@ -31,7 +31,7 @@ function InventoryGroupHostListItem({
     <Tr
       id={host.id}
       ouiaId={`inventory-group-host-row-${host.id}`}
-      arialabelledby={labelId}
+      aria-labelledby={labelId}
     >
       <Td
         select={{
@@ -41,11 +41,12 @@ function InventoryGroupHostListItem({
         }}
         dataLabel={t`Selected`}
       />
-      <Td id={labelId}>
+      <Td dataLabel={t`host-name-${host.id}`} id={labelId}>
         <Link to={`${detailUrl}`}>
           <b>{host.name}</b>
         </Link>
       </Td>
+      <Td dataLabel={t`host-description-${host.id}`}>{host.description}</Td>
       <Td dataLabel={t`Activity`}>
         <Sparkline jobs={recentPlaybookJobs} />
       </Td>

awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.test.js

@@ -26,6 +26,16 @@ describe('<InventoryGroupHostListItem />', () => {
     );
   });
 
+  test('should display expected details', () => {
+    expect(wrapper.find('InventoryGroupHostListItem').length).toBe(1);
+    expect(
+      wrapper.find('Td[dataLabel="host-name-2"]').find('Link').prop('to')
+    ).toBe('/host/1');
+    expect(wrapper.find('Td[dataLabel="host-description-2"]').text()).toBe(
+      'Bar'
+    );
+  });
+
   test('should display expected row item content', () => {
     expect(wrapper.find('b').text()).toContain(
       '.host-000001.group-00000.dummy'

awx/ui/src/screens/Inventory/InventoryHosts/InventoryHostItem.js

@@ -35,6 +35,12 @@ function InventoryHostItem({
           <b>{host.name}</b>
         </Link>
       </TdBreakWord>
+      <TdBreakWord
+        id={`host-description-${host.id}`}
+        dataLabel={t`Description`}
+      >
+        {host.description}
+      </TdBreakWord>
       <ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px">
         <HostToggle host={host} />
         <ActionItem

awx/ui/src/screens/Inventory/InventoryHosts/InventoryHostItem.test.js

@@ -6,6 +6,7 @@ const mockHost = {
   id: 1,
   name: 'Host 1',
   url: '/api/v2/hosts/1',
+  description: 'Bar',
   inventory: 1,
   summary_fields: {
     inventory: {
@@ -44,6 +45,14 @@ describe('<InventoryHostItem />', () => {
     );
   });
 
+  test('should display expected details', () => {
+    expect(wrapper.find('InventoryHostItem').length).toBe(1);
+    expect(wrapper.find('Td[dataLabel="Name"]').find('Link').prop('to')).toBe(
+      '/host/1'
+    );
+    expect(wrapper.find('Td[dataLabel="Description"]').text()).toBe('Bar');
+  });
+
   test('edit button shown to users with edit capabilities', () => {
     expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
   });

awx/ui/src/screens/Inventory/InventoryHosts/InventoryHostList.js

@@ -136,6 +136,7 @@ function InventoryHostList() {
         headerRow={
           <HeaderRow qsConfig={QS_CONFIG}>
             <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
+            <HeaderCell sortKey="description">{t`Description`}</HeaderCell>
             <HeaderCell>{t`Actions`}</HeaderCell>
           </HeaderRow>
         }

awx/ui/src/screens/Inventory/shared/data.hosts.json

@@ -119,7 +119,7 @@
           "created": "2020-02-24T15:10:58.922179Z",
           "modified": "2020-02-26T21:52:43.428530Z",
           "name": ".host-000001.group-00000.dummy",
-          "description": "",
+          "description": "Bar",
           "inventory": 2,
           "enabled": false,
           "instance_id": "",
@@ -248,7 +248,7 @@
           "created": "2020-02-24T15:10:58.945113Z",
           "modified": "2020-02-27T03:43:43.635871Z",
           "name": ".host-000002.group-00000.dummy",
-          "description": "",
+          "description": "Buzz",
           "inventory": 2,
           "enabled": false,
           "instance_id": "",
@@ -377,7 +377,7 @@
           "created": "2020-02-24T15:10:58.962312Z",
           "modified": "2020-02-27T03:43:45.528882Z",
           "name": ".host-000003.group-00000.dummy",
-          "description": "",
+          "description": "BarFoo",
           "inventory": 2,
           "enabled": false,
           "instance_id": "",

awx/ui/src/screens/Job/JobOutput/HostEventModal.js

@@ -107,6 +107,12 @@ function HostEventModal({ onClose, hostEvent = {}, isOpen = false }) {
             gutter="sm"
           >
             <Detail label={t`Host`} value={hostEvent.host_name} />
+            {hostEvent.summary_fields.host?.description ? (
+              <Detail
+                label={t`Description`}
+                value={hostEvent.summary_fields.host.description}
+              />
+            ) : null}
             {hostStatus ? (
               <Detail
                 label={t`Status`}

awx/ui/src/screens/Job/JobOutput/HostEventModal.test.js

@@ -43,6 +43,13 @@ const hostEvent = {
   task: 'command',
   type: 'job_event',
   url: '/api/v2/job_events/123/',
+  summary_fields: {
+    host: {
+      id: 1,
+      name: 'foo',
+      description: 'Bar',
+    },
+  },
 };
 
 /* eslint-disable no-useless-escape */
@@ -86,7 +93,7 @@ describe('HostEventModal', () => {
       <HostEventModal hostEvent={hostEvent} onClose={() => {}} isOpen />
     );
     expect(wrapper.find('Tabs').prop('activeKey')).toEqual(0);
-    expect(wrapper.find('Detail')).toHaveLength(5);
+    expect(wrapper.find('Detail')).toHaveLength(6);
 
     function assertDetail(index, label, value) {
       const detail = wrapper.find('Detail').at(index);
@@ -96,10 +103,11 @@ describe('HostEventModal', () => {
 
     const detail = wrapper.find('Detail').first();
     expect(detail.prop('value')).toEqual('foo');
-    assertDetail(1, 'Play', 'all');
+    assertDetail(1, 'Description', 'Bar');
-    assertDetail(2, 'Task', 'command');
+    assertDetail(2, 'Play', 'all');
-    assertDetail(3, 'Module', 'command');
+    assertDetail(3, 'Task', 'command');
-    assertDetail(4, 'Command', hostEvent.event_data.res.cmd);
+    assertDetail(4, 'Module', 'command');
+    assertDetail(5, 'Command', hostEvent.event_data.res.cmd);
   });
 
   test('should display successful host status label', () => {