Add column to display resource related to a schedule

Add column to display what resource is related to a schedule

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

awx/ui/src/components/Schedule/ScheduleList/ScheduleList.js

@@ -166,7 +166,8 @@ function ScheduleList({
         headerRow={
           <HeaderRow qsConfig={QS_CONFIG}>
             <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
-            <HeaderCell sortKey="unified_job_template__polymorphic_ctype__model">{t`Type`}</HeaderCell>
+            <HeaderCell sortKey="unified_job_template">{t`Related resource`}</HeaderCell>
+            <HeaderCell sortKey="unified_job_template__polymorphic_ctype__model">{t`Resource type`}</HeaderCell>
             <HeaderCell sortKey="next_run">{t`Next Run`}</HeaderCell>
             <HeaderCell>{t`Actions`}</HeaderCell>
           </HeaderRow>

awx/ui/src/components/Schedule/ScheduleList/ScheduleListItem.js

@@ -41,22 +41,28 @@ function ScheduleListItem({
   };
 
   let scheduleBaseUrl;
+  let relatedResourceUrl;
 
   switch (schedule.summary_fields.unified_job_template.unified_job_type) {
     case 'inventory_update':
       scheduleBaseUrl = `/inventories/inventory/${schedule.summary_fields.inventory.id}/sources/${schedule.summary_fields.unified_job_template.id}/schedules/${schedule.id}`;
+      relatedResourceUrl = `/inventories/inventory/${schedule.summary_fields.inventory.id}/sources/${schedule.summary_fields.unified_job_template.id}/details`;
       break;
     case 'job':
       scheduleBaseUrl = `/templates/job_template/${schedule.summary_fields.unified_job_template.id}/schedules/${schedule.id}`;
+      relatedResourceUrl = `/templates/job_template/${schedule.summary_fields.unified_job_template.id}/details`;
       break;
     case 'project_update':
       scheduleBaseUrl = `/projects/${schedule.summary_fields.unified_job_template.id}/schedules/${schedule.id}`;
+      relatedResourceUrl = `/projects/${schedule.summary_fields.unified_job_template.id}/details`;
       break;
     case 'system_job':
       scheduleBaseUrl = `/management_jobs/${schedule.summary_fields.unified_job_template.id}/schedules/${schedule.id}`;
+      relatedResourceUrl = `/management_jobs`;
       break;
     case 'workflow_job':
       scheduleBaseUrl = `/templates/workflow_job_template/${schedule.summary_fields.unified_job_template.id}/schedules/${schedule.id}`;
+      relatedResourceUrl = `/templates/workflow_job_template/${schedule.summary_fields.unified_job_template.id}/details`;
       break;
     default:
       break;
@@ -94,7 +100,15 @@ function ScheduleListItem({
           </span>
         )}
       </TdBreakWord>
-      <Td dataLabel={t`Type`}>
+      <TdBreakWord
+        id={`related-resource-${schedule.id}`}
+        dataLabel={t`Related resource`}
+      >
+        <Link to={`${relatedResourceUrl}`}>
+          <b>{schedule.summary_fields.unified_job_template.name}</b>
+        </Link>
+      </TdBreakWord>
+      <Td dataLabel={t`Resource type`}>
         {
           jobTypeLabels[
             schedule.summary_fields.unified_job_template.unified_job_type

awx/ui/src/components/Schedule/ScheduleList/ScheduleListItem.test.js

@@ -65,14 +65,30 @@ describe('ScheduleListItem', () => {
     });
 
     test('Name correctly shown with correct link', () => {
+      expect(wrapper.find('Td').at(1).prop('dataLabel')).toBe('Name');
       expect(wrapper.find('Td').at(1).text()).toBe('Mock Schedule');
       expect(wrapper.find('Td').at(1).find('Link').props().to).toBe(
         '/templates/job_template/12/schedules/6/details'
       );
     });
 
-    test('Type correctly shown', () => {
+    test('Related resource correctly shown', () => {
-      expect(wrapper.find('Td').at(2).text()).toBe('Playbook Run');
+      expect(wrapper.find('Td').at(2).prop('dataLabel')).toBe(
+        'Related resource'
+      );
+      expect(wrapper.find('Td').at(2).text()).toBe('Mock JT');
+    });
+
+    test('Resource type correctly shown', () => {
+      expect(wrapper.find('Td').at(3).prop('dataLabel')).toBe('Resource type');
+      expect(wrapper.find('Td').at(3).text()).toBe('Playbook Run');
+    });
+
+    test('Next run correctly shown', () => {
+      expect(wrapper.find('Td').at(4).prop('dataLabel')).toBe('Next Run');
+      expect(wrapper.find('Td').at(4).text()).toBe(
+        'Next Run2/20/2020, 12:00:00 AM'
+      );
     });
 
     test('Edit button shown with correct link', () => {
@@ -120,16 +136,31 @@ describe('ScheduleListItem', () => {
     });
 
     test('Name correctly shown with correct link', () => {
+      expect(wrapper.find('Td').at(1).prop('dataLabel')).toBe('Name');
       expect(wrapper.find('Td').at(1).text()).toBe('Mock Schedule');
       expect(wrapper.find('Td').at(1).find('Link').props().to).toBe(
         '/templates/job_template/12/schedules/6/details'
       );
     });
 
-    test('Type correctly shown', () => {
+    test('Related resource correctly shown', () => {
-      expect(wrapper.find('Td').at(2).text()).toBe('Playbook Run');
+      expect(wrapper.find('Td').at(2).prop('dataLabel')).toBe(
+        'Related resource'
+      );
+      expect(wrapper.find('Td').at(2).text()).toBe('Mock JT');
     });
 
+    test('Resource type correctly shown', () => {
+      expect(wrapper.find('Td').at(3).prop('dataLabel')).toBe('Resource type');
+      expect(wrapper.find('Td').at(3).text()).toBe('Playbook Run');
+    });
+
+    test('Next run correctly shown', () => {
+      expect(wrapper.find('Td').at(4).prop('dataLabel')).toBe('Next Run');
+      expect(wrapper.find('Td').at(4).text()).toBe(
+        'Next Run2/20/2020, 12:00:00 AM'
+      );
+    });
     test('Edit button hidden', () => {
       expect(wrapper.find('PencilAltIcon').length).toBe(0);
     });