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
2026-01-22 15:08:03 -03:30 · 2022-06-02 15:40:41 -04:00 · 2022-06-02 15:40:41 -04:00 · c31d74100d
commit c31d74100d
parent 3af89c1e2b
15 changed files with 73 additions and 11 deletions
--- a/awx/ui/src/components/Lookup/HostFilterLookup.js
+++ b/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>
            }
--- a/awx/ui/src/components/Lookup/HostListItem.js
+++ b/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>
  );
--- a/awx/ui/src/components/Lookup/HostListItem.test.js
+++ b/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');
  });
 });
--- a/awx/ui/src/screens/Host/HostList/HostList.js
+++ b/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>
--- a/awx/ui/src/screens/Host/HostList/HostListItem.js
+++ b/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
--- a/awx/ui/src/screens/Host/HostList/HostListItem.test.js
+++ b/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();
  });
--- a/awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostList.js
+++ b/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>
--- a/awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.js
+++ b/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>
--- a/awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.test.js
+++ b/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'
--- a/awx/ui/src/screens/Inventory/InventoryHosts/InventoryHostItem.js
+++ b/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
--- a/awx/ui/src/screens/Inventory/InventoryHosts/InventoryHostItem.test.js
+++ b/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();
  });
--- a/awx/ui/src/screens/Inventory/InventoryHosts/InventoryHostList.js
+++ b/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>
        }
--- a/awx/ui/src/screens/Inventory/shared/data.hosts.json
+++ b/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": "",
--- a/awx/ui/src/screens/Job/JobOutput/HostEventModal.js
+++ b/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`}
--- a/awx/ui/src/screens/Job/JobOutput/HostEventModal.test.js
+++ b/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(2, 'Task', 'command');
-    assertDetail(3, 'Module', 'command');
-    assertDetail(4, 'Command', hostEvent.event_data.res.cmd);
+    assertDetail(1, 'Description', 'Bar');
+    assertDetail(2, 'Play', 'all');
+    assertDetail(3, 'Task', 'command');
+    assertDetail(4, 'Module', 'command');
+    assertDetail(5, 'Command', hostEvent.event_data.res.cmd);
  });

  test('should display successful host status label', () => {