Merge pull request #6058 from marshmalien/5890-jt-completed-jobs-list

Add Completed Job list tab to multiple resources Reviewed-by: Alex Corey <Alex.swansboro@gmail.com> https://github.com/AlexSCorey
2026-01-11 18:09:57 -03:30 · 2020-02-27 09:13:22 +00:00 · 2020-02-27 09:13:22 +00:00 · 5ca73f1101
commit 5ca73f1101
parent 258689a9ed 37a33f931a
22 changed files with 336 additions and 278 deletions
--- a/awx/ui_next/src/screens/Job/JobList/JobList.jsx
+++ b/awx/ui_next/src/screens/Job/JobList/JobList.jsx
@ -2,8 +2,17 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { useLocation } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { Card, PageSection } from '@patternfly/react-core';

+import { Card } from '@patternfly/react-core';
+import AlertModal from '@components/AlertModal';
+import DatalistToolbar from '@components/DataListToolbar';
+import ErrorDetail from '@components/ErrorDetail';
+import PaginatedDataList, {
+  ToolbarDeleteButton,
+} from '@components/PaginatedDataList';
+import useRequest, { useDeleteItems } from '@util/useRequest';
+import { getQSConfig, parseQueryString } from '@util/qs';
+import JobListItem from './JobListItem';
 import {
  AdHocCommandsAPI,
  InventoryUpdatesAPI,
@ -13,16 +22,6 @@ import {
  UnifiedJobsAPI,
  WorkflowJobsAPI,
 } from '@api';
-import AlertModal from '@components/AlertModal';
-import DatalistToolbar from '@components/DataListToolbar';
-import ErrorDetail from '@components/ErrorDetail';
-import PaginatedDataList, {
-  ToolbarDeleteButton,
-} from '@components/PaginatedDataList';
-import useRequest, { useDeleteItems } from '@util/useRequest';
-import { getQSConfig, parseQueryString } from '@util/qs';
-
-import JobListItem from './JobListItem';

 const QS_CONFIG = getQSConfig(
  'job',
@ -30,12 +29,11 @@ const QS_CONFIG = getQSConfig(
    page: 1,
    page_size: 20,
    order_by: '-finished',
-    not__launch_type: 'sync',
  },
-  ['page', 'page_size', 'id']
+  ['page', 'page_size']
 );

-function JobList({ i18n }) {
+function JobList({ i18n, defaultParams, showTypeColumn = false }) {
  const [selected, setSelected] = useState([]);
  const location = useLocation();

@ -47,14 +45,16 @@ function JobList({ i18n }) {
  } = useRequest(
    useCallback(async () => {
      const params = parseQueryString(QS_CONFIG, location.search);
+
      const {
        data: { count, results },
-      } = await UnifiedJobsAPI.read(params);
+      } = await UnifiedJobsAPI.read({ ...params, ...defaultParams });
+
      return {
        itemCount: count,
        jobs: results,
      };
-    }, [location]),
+    }, [location]), // eslint-disable-line react-hooks/exhaustive-deps
    {
      jobs: [],
      itemCount: 0,
@ -119,7 +119,7 @@ function JobList({ i18n }) {
  };

  return (
-    <PageSection>
+    <>
      <Card>
        <PaginatedDataList
          contentError={contentError}
@ -225,9 +225,8 @@ function JobList({ i18n }) {
          renderItem={job => (
            <JobListItem
              key={job.id}
-              value={job.name}
              job={job}
-              detailUrl={`${location.pathname}/${job}/${job.id}`}
+              showTypeColumn={showTypeColumn}
              onSelect={() => handleSelect(job)}
              isSelected={selected.some(row => row.id === job.id)}
            />
@ -243,7 +242,7 @@ function JobList({ i18n }) {
        {i18n._(t`Failed to delete one or more jobs.`)}
        <ErrorDetail error={deletionError} />
      </AlertModal>
-    </PageSection>
+    </>
  );
 }

--- a/awx/ui_next/src/screens/Job/JobList/JobList.test.jsx
+++ b/awx/ui_next/src/screens/Job/JobList/JobList.test.jsx
--- a/awx/ui_next/src/components/JobList/JobListItem.jsx
+++ b/awx/ui_next/src/components/JobList/JobListItem.jsx
@ -0,0 +1,90 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import {
+  Button,
+  DataListAction,
+  DataListCell,
+  DataListCheck,
+  DataListItem,
+  DataListItemRow,
+  DataListItemCells,
+  Tooltip,
+} from '@patternfly/react-core';
+import { RocketIcon } from '@patternfly/react-icons';
+import LaunchButton from '@components/LaunchButton';
+import StatusIcon from '@components/StatusIcon';
+import { toTitleCase } from '@util/strings';
+import { formatDateString } from '@util/dates';
+import { JOB_TYPE_URL_SEGMENTS } from '@constants';
+
+function JobListItem({
+  i18n,
+  job,
+  isSelected,
+  onSelect,
+  showTypeColumn = false,
+}) {
+  const labelId = `check-action-${job.id}`;
+
+  return (
+    <DataListItem aria-labelledby={labelId} id={`${job.id}`}>
+      <DataListItemRow>
+        <DataListCheck
+          id={`select-job-${job.id}`}
+          checked={isSelected}
+          onChange={onSelect}
+          aria-labelledby={labelId}
+        />
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="status" isFilled={false}>
+              {job.status && <StatusIcon status={job.status} />}
+            </DataListCell>,
+            <DataListCell key="name">
+              <span>
+                <Link to={`/jobs/${JOB_TYPE_URL_SEGMENTS[job.type]}/${job.id}`}>
+                  <b>
+                    {job.id} &mdash; {job.name}
+                  </b>
+                </Link>
+              </span>
+            </DataListCell>,
+            ...(showTypeColumn
+              ? [
+                  <DataListCell key="type" aria-label="type">
+                    {toTitleCase(job.type)}
+                  </DataListCell>,
+                ]
+              : []),
+            <DataListCell key="finished">
+              {formatDateString(job.finished)}
+            </DataListCell>,
+          ]}
+        />
+        {job.type !== 'system_job' &&
+          job.summary_fields?.user_capabilities?.start && (
+            <DataListAction
+              aria-label="actions"
+              aria-labelledby={labelId}
+              id={labelId}
+            >
+              <Tooltip content={i18n._(t`Relaunch Job`)} position="top">
+                <LaunchButton resource={job}>
+                  {({ handleRelaunch }) => (
+                    <Button variant="plain" onClick={handleRelaunch}>
+                      <RocketIcon />
+                    </Button>
+                  )}
+                </LaunchButton>
+              </Tooltip>
+            </DataListAction>
+          )}
+      </DataListItemRow>
+    </DataListItem>
+  );
+}
+
+export { JobListItem as _JobListItem };
+export default withI18n()(JobListItem);
--- a/awx/ui_next/src/components/JobList/JobListItem.test.jsx
+++ b/awx/ui_next/src/components/JobList/JobListItem.test.jsx
@ -0,0 +1,82 @@
+import React from 'react';
+import { createMemoryHistory } from 'history';
+
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+
+import JobListItem from './JobListItem';
+
+const mockJob = {
+  id: 123,
+  type: 'job',
+  url: '/api/v2/jobs/123/',
+  summary_fields: {
+    user_capabilities: {
+      delete: true,
+      start: true,
+    },
+  },
+  created: '2019-08-08T19:24:05.344276Z',
+  modified: '2019-08-08T19:24:18.162949Z',
+  name: 'Demo Job Template',
+  job_type: 'run',
+  started: '2019-08-08T19:24:18.329589Z',
+  finished: '2019-08-08T19:24:50.119995Z',
+  status: 'successful',
+};
+
+describe('<JobListItem />', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    const history = createMemoryHistory({
+      initialEntries: ['/jobs'],
+    });
+    wrapper = mountWithContexts(
+      <JobListItem job={mockJob} isSelected onSelect={() => {}} />,
+      { context: { router: { history } } }
+    );
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
+  test('initially renders successfully', () => {
+    expect(wrapper.find('JobListItem').length).toBe(1);
+  });
+
+  test('launch button shown to users with launch capabilities', () => {
+    expect(wrapper.find('LaunchButton').length).toBe(1);
+  });
+
+  test('launch button hidden from users without launch capabilities', () => {
+    wrapper = mountWithContexts(
+      <JobListItem
+        job={{
+          ...mockJob,
+          summary_fields: { user_capabilities: { start: false } },
+        }}
+        detailUrl={`/jobs/playbook/${mockJob.id}`}
+        onSelect={() => {}}
+        isSelected={false}
+      />
+    );
+    expect(wrapper.find('LaunchButton').length).toBe(0);
+  });
+
+  test('should hide type column when showTypeColumn is false', () => {
+    expect(wrapper.find('DataListCell[aria-label="type"]').length).toBe(0);
+  });
+
+  test('should show type column when showTypeColumn is true', () => {
+    wrapper = mountWithContexts(
+      <JobListItem
+        job={mockJob}
+        showTypeColumn
+        isSelected
+        onSelect={() => {}}
+      />
+    );
+    expect(wrapper.find('DataListCell[aria-label="type"]').length).toBe(1);
+  });
+});
--- a/awx/ui_next/src/components/JobList/index.js
+++ b/awx/ui_next/src/components/JobList/index.js
@ -0,0 +1 @@
+export { default } from './JobList';
--- a/awx/ui_next/src/screens/Host/Host.jsx
+++ b/awx/ui_next/src/screens/Host/Host.jsx
@ -17,11 +17,11 @@ import CardCloseButton from '@components/CardCloseButton';
 import RoutedTabs from '@components/RoutedTabs';
 import ContentError from '@components/ContentError';
 import ContentLoading from '@components/ContentLoading';
+import JobList from '@components/JobList';
 import HostFacts from './HostFacts';
 import HostDetail from './HostDetail';
 import HostEdit from './HostEdit';
 import HostGroups from './HostGroups';
-import HostCompletedJobs from './HostCompletedJobs';
 import { HostsAPI } from '@api';

 function Host({ inventory, i18n, setBreadcrumb }) {
@ -181,11 +181,15 @@ function Host({ inventory, i18n, setBreadcrumb }) {
            render={() => <HostGroups host={host} />}
          />
        )}
-        {host && (
+        {host?.id && (
          <Route
-            path="/hosts/:id/completed_jobs"
-            render={() => <HostCompletedJobs host={host} />}
-          />
+            path={[
+              '/hosts/:id/completed_jobs',
+              '/inventories/inventory/:id/hosts/:hostId/completed_jobs',
+            ]}
+          >
+            <JobList defaultParams={{ job__hosts: host.id }} />
+          </Route>
        )}
        <Route
          key="not-found"
--- a/awx/ui_next/src/screens/Host/HostCompletedJobs/HostCompletedJobs.jsx
+++ b/awx/ui_next/src/screens/Host/HostCompletedJobs/HostCompletedJobs.jsx
@ -1,10 +0,0 @@
-import React, { Component } from 'react';
-import { CardBody } from '@components/Card';
-
-class HostCompletedJobs extends Component {
-  render() {
-    return <CardBody>Coming soon :)</CardBody>;
-  }
-}
-
-export default HostCompletedJobs;
--- a/awx/ui_next/src/screens/Host/HostCompletedJobs/index.js
+++ b/awx/ui_next/src/screens/Host/HostCompletedJobs/index.js
@ -1 +0,0 @@
-export { default } from './HostCompletedJobs';
--- a/awx/ui_next/src/screens/Inventory/Inventories.jsx
+++ b/awx/ui_next/src/screens/Inventory/Inventories.jsx
@ -64,24 +64,25 @@ class Inventories extends Component {
      [`/inventories/${inventoryKind}/${inventory.id}/hosts/add`]: i18n._(
        t`Create New Host`
      ),
+      [`/inventories/${inventoryKind}/${inventory.id}/hosts/${nestedResource &&
+        nestedResource.id}`]: i18n._(
+        t`${nestedResource && nestedResource.name}`
+      ),
      [`/inventories/${inventoryKind}/${inventory.id}/hosts/${nestedResource &&
        nestedResource.id}/edit`]: i18n._(t`Edit Details`),
      [`/inventories/${inventoryKind}/${inventory.id}/hosts/${nestedResource &&
        nestedResource.id}/details`]: i18n._(t`Host Details`),
      [`/inventories/${inventoryKind}/${inventory.id}/hosts/${nestedResource &&
-        nestedResource.id}`]: i18n._(
-        t`${nestedResource && nestedResource.name}`
-      ),
-
+        nestedResource.id}/completed_jobs`]: i18n._(t`Completed Jobs`),
      [`/inventories/${inventoryKind}/${inventory.id}/groups/add`]: i18n._(
        t`Create New Group`
      ),
+      [`/inventories/${inventoryKind}/${inventory.id}/groups/${nestedResource &&
+        nestedResource.id}`]: `${nestedResource && nestedResource.name}`,
      [`/inventories/${inventoryKind}/${inventory.id}/groups/${nestedResource &&
        nestedResource.id}/edit`]: i18n._(t`Edit Details`),
      [`/inventories/${inventoryKind}/${inventory.id}/groups/${nestedResource &&
        nestedResource.id}/details`]: i18n._(t`Group Details`),
-      [`/inventories/${inventoryKind}/${inventory.id}/groups/${nestedResource &&
-        nestedResource.id}`]: `${nestedResource && nestedResource.name}`,
    };
    this.setState({ breadcrumbConfig });
  };
--- a/awx/ui_next/src/screens/Inventory/Inventory.jsx
+++ b/awx/ui_next/src/screens/Inventory/Inventory.jsx
@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { t } from '@lingui/macro';
 import { withI18n } from '@lingui/react';
-import { Card, CardActions, PageSection } from '@patternfly/react-core';
 import {
  Switch,
  Route,
@ -10,20 +9,21 @@ import {
  useLocation,
  useRouteMatch,
 } from 'react-router-dom';
+
+import { Card, CardActions, PageSection } from '@patternfly/react-core';
 import { TabbedCardHeader } from '@components/Card';
 import CardCloseButton from '@components/CardCloseButton';
 import ContentError from '@components/ContentError';
+import ContentLoading from '@components/ContentLoading';
+import JobList from '@components/JobList';
 import RoutedTabs from '@components/RoutedTabs';
 import { ResourceAccessList } from '@components/ResourceAccessList';
-import ContentLoading from '@components/ContentLoading';
 import InventoryDetail from './InventoryDetail';
-
+import InventoryEdit from './InventoryEdit';
 import InventoryGroups from './InventoryGroups';
-import InventoryCompletedJobs from './InventoryCompletedJobs';
+import InventoryHosts from './InventoryHosts/InventoryHosts';
 import InventorySources from './InventorySources';
 import { InventoriesAPI } from '@api';
-import InventoryEdit from './InventoryEdit';
-import InventoryHosts from './InventoryHosts/InventoryHosts';

 function Inventory({ i18n, setBreadcrumb }) {
  const [contentError, setContentError] = useState(null);
@ -172,8 +172,17 @@ function Inventory({ i18n, setBreadcrumb }) {
            <Route
              key="completed_jobs"
              path="/inventories/inventory/:id/completed_jobs"
-              render={() => <InventoryCompletedJobs inventory={inventory} />}
-            />,
+            >
+              <JobList
+                defaultParams={{
+                  or__job__inventory: inventory.id,
+                  or__adhoccommand__inventory: inventory.id,
+                  or__inventoryupdate__inventory_source__inventory:
+                    inventory.id,
+                  or__workflowjob__inventory: inventory.id,
+                }}
+              />
+            </Route>,
            <Route
              key="not-found"
              path="*"
--- a/awx/ui_next/src/screens/Inventory/InventoryCompletedJobs/InventoryCompletedJobs.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryCompletedJobs/InventoryCompletedJobs.jsx
@ -1,10 +0,0 @@
-import React, { Component } from 'react';
-import { CardBody } from '@components/Card';
-
-class InventoryCompletedJobs extends Component {
-  render() {
-    return <CardBody>Coming soon :)</CardBody>;
-  }
-}
-
-export default InventoryCompletedJobs;
--- a/awx/ui_next/src/screens/Inventory/InventoryCompletedJobs/index.js
+++ b/awx/ui_next/src/screens/Inventory/InventoryCompletedJobs/index.js
@ -1 +0,0 @@
-export { default } from './InventoryCompletedJobs';
--- a/awx/ui_next/src/screens/Inventory/SmartInventory.jsx
+++ b/awx/ui_next/src/screens/Inventory/SmartInventory.jsx
@ -6,11 +6,11 @@ import { Switch, Route, Redirect, withRouter, Link } from 'react-router-dom';
 import { TabbedCardHeader } from '@components/Card';
 import CardCloseButton from '@components/CardCloseButton';
 import ContentError from '@components/ContentError';
+import JobList from '@components/JobList';
 import RoutedTabs from '@components/RoutedTabs';
 import { ResourceAccessList } from '@components/ResourceAccessList';
 import SmartInventoryDetail from './SmartInventoryDetail';
 import SmartInventoryHosts from './SmartInventoryHosts';
-import SmartInventoryCompletedJobs from './SmartInventoryCompletedJobs';
 import { InventoriesAPI } from '@api';
 import SmartInventoryEdit from './SmartInventoryEdit';

@ -149,10 +149,17 @@ class SmartInventory extends Component {
              <Route
                key="completed_jobs"
                path="/inventories/smart_inventory/:id/completed_jobs"
-                render={() => (
-                  <SmartInventoryCompletedJobs inventory={inventory} />
-                )}
-              />,
+              >
+                <JobList
+                  defaultParams={{
+                    or__job__inventory: inventory.id,
+                    or__adhoccommand__inventory: inventory.id,
+                    or__inventoryupdate__inventory_source__inventory:
+                      inventory.id,
+                    or__workflowjob__inventory: inventory.id,
+                  }}
+                />
+              </Route>,
              <Route
                key="not-found"
                path="*"
--- a/awx/ui_next/src/screens/Inventory/SmartInventoryCompletedJobs/SmartInventoryCompletedJobs.jsx
+++ b/awx/ui_next/src/screens/Inventory/SmartInventoryCompletedJobs/SmartInventoryCompletedJobs.jsx
@ -1,10 +0,0 @@
-import React, { Component } from 'react';
-import { CardBody } from '@components/Card';
-
-class SmartInventoryCompletedJobs extends Component {
-  render() {
-    return <CardBody>Coming soon :)</CardBody>;
-  }
-}
-
-export default SmartInventoryCompletedJobs;
--- a/awx/ui_next/src/screens/Inventory/SmartInventoryCompletedJobs/index.js
+++ b/awx/ui_next/src/screens/Inventory/SmartInventoryCompletedJobs/index.js
@ -1 +0,0 @@
-export { default } from './SmartInventoryCompletedJobs';
--- a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
+++ b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
@ -1,82 +0,0 @@
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
-import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
-import {
-  Button,
-  DataListAction,
-  DataListCell,
-  DataListCheck,
-  DataListItem,
-  DataListItemRow,
-  DataListItemCells,
-  Tooltip,
-} from '@patternfly/react-core';
-import { RocketIcon } from '@patternfly/react-icons';
-import LaunchButton from '@components/LaunchButton';
-import StatusIcon from '@components/StatusIcon';
-import { toTitleCase } from '@util/strings';
-import { formatDateString } from '@util/dates';
-import { JOB_TYPE_URL_SEGMENTS } from '@constants';
-
-class JobListItem extends Component {
-  render() {
-    const { i18n, job, isSelected, onSelect } = this.props;
-    const labelId = `check-action-${job.id}`;
-
-    return (
-      <DataListItem aria-labelledby={labelId} id={`${job.id}`}>
-        <DataListItemRow>
-          <DataListCheck
-            id={`select-job-${job.id}`}
-            checked={isSelected}
-            onChange={onSelect}
-            aria-labelledby={labelId}
-          />
-          <DataListItemCells
-            dataListCells={[
-              <DataListCell key="status" isFilled={false}>
-                {job.status && <StatusIcon status={job.status} />}
-              </DataListCell>,
-              <DataListCell key="name">
-                <span>
-                  <Link
-                    to={`/jobs/${JOB_TYPE_URL_SEGMENTS[job.type]}/${job.id}`}
-                  >
-                    <b>
-                      {job.id} &mdash; {job.name}
-                    </b>
-                  </Link>
-                </span>
-              </DataListCell>,
-              <DataListCell key="type">{toTitleCase(job.type)}</DataListCell>,
-              <DataListCell key="finished">
-                {formatDateString(job.finished)}
-              </DataListCell>,
-            ]}
-          />
-          {job.type !== 'system_job' &&
-            job.summary_fields?.user_capabilities?.start && (
-              <DataListAction
-                aria-label="actions"
-                aria-labelledby={labelId}
-                id={labelId}
-              >
-                <Tooltip content={i18n._(t`Relaunch Job`)} position="top">
-                  <LaunchButton resource={job}>
-                    {({ handleRelaunch }) => (
-                      <Button variant="plain" onClick={handleRelaunch}>
-                        <RocketIcon />
-                      </Button>
-                    )}
-                  </LaunchButton>
-                </Tooltip>
-              </DataListAction>
-            )}
-        </DataListItemRow>
-      </DataListItem>
-    );
-  }
-}
-export { JobListItem as _JobListItem };
-export default withI18n()(JobListItem);
--- a/awx/ui_next/src/screens/Job/JobList/JobListItem.test.jsx
+++ b/awx/ui_next/src/screens/Job/JobList/JobListItem.test.jsx
@ -1,32 +0,0 @@
-import React from 'react';
-import { createMemoryHistory } from 'history';
-
-import { mountWithContexts } from '@testUtils/enzymeHelpers';
-
-import JobListItem from './JobListItem';
-
-describe('<JobListItem />', () => {
-  test('initially renders succesfully', () => {
-    const history = createMemoryHistory({
-      initialEntries: ['/jobs'],
-    });
-    mountWithContexts(
-      <JobListItem
-        job={{
-          id: 1,
-          name: 'Job',
-          type: 'project update',
-          summary_fields: {
-            user_capabilities: {
-              start: true,
-            },
-          },
-        }}
-        detailUrl="/organization/1"
-        isSelected
-        onSelect={() => {}}
-      />,
-      { context: { router: { history } } }
-    );
-  });
-});
--- a/awx/ui_next/src/screens/Job/JobList/index.js
+++ b/awx/ui_next/src/screens/Job/JobList/index.js
@ -1,2 +0,0 @@
-export { default as JobList } from './JobList';
-export { default as JobListItem } from './JobListItem';
--- a/awx/ui_next/src/screens/Job/Jobs.jsx
+++ b/awx/ui_next/src/screens/Job/Jobs.jsx
@ -1,96 +1,89 @@
-import React, { Component, Fragment } from 'react';
-import { Route, withRouter, Switch } from 'react-router-dom';
+import React, { useState, useCallback } from 'react';
+import {
+  Route,
+  Switch,
+  useHistory,
+  useLocation,
+  useRouteMatch,
+} from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
+import { PageSection } from '@patternfly/react-core';
 import Breadcrumbs from '@components/Breadcrumbs/Breadcrumbs';
 import Job from './Job';
 import JobTypeRedirect from './JobTypeRedirect';
-import JobList from './JobList/JobList';
+import JobList from '@components/JobList';
 import { JOB_TYPE_URL_SEGMENTS } from '@constants';

-class Jobs extends Component {
-  constructor(props) {
-    super(props);
+function Jobs({ i18n }) {
+  const history = useHistory();
+  const location = useLocation();
+  const match = useRouteMatch();
+  const [breadcrumbConfig, setBreadcrumbConfig] = useState({
+    '/jobs': i18n._(t`Jobs`),
+  });

-    const { i18n } = props;
+  const buildBreadcrumbConfig = useCallback(
+    job => {
+      if (!job) {
+        return;
+      }

-    this.state = {
-      breadcrumbConfig: {
+      const type = JOB_TYPE_URL_SEGMENTS[job.type];
+      setBreadcrumbConfig({
        '/jobs': i18n._(t`Jobs`),
-      },
-    };
-  }
+        [`/jobs/${type}/${job.id}`]: `${job.name}`,
+        [`/jobs/${type}/${job.id}/output`]: i18n._(t`Output`),
+        [`/jobs/${type}/${job.id}/details`]: i18n._(t`Details`),
+      });
+    },
+    [i18n]
+  );

-  setBreadcrumbConfig = job => {
-    const { i18n } = this.props;
-
-    if (!job) {
-      return;
-    }
-
-    const type = JOB_TYPE_URL_SEGMENTS[job.type];
-    const breadcrumbConfig = {
-      '/jobs': i18n._(t`Jobs`),
-      [`/jobs/${type}/${job.id}`]: `${job.name}`,
-      [`/jobs/${type}/${job.id}/output`]: i18n._(t`Output`),
-      [`/jobs/${type}/${job.id}/details`]: i18n._(t`Details`),
-    };
-
-    this.setState({ breadcrumbConfig });
-  };
-
-  render() {
-    const { match, history, location } = this.props;
-    const { breadcrumbConfig } = this.state;
-
-    return (
-      <Fragment>
-        <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
-        <Switch>
-          <Route
-            exact
-            path={match.path}
-            render={() => (
-              <JobList
-                history={history}
-                location={location}
-                setBreadcrumb={this.setBreadcrumbConfig}
-              />
-            )}
-          />
-          <Route
-            path={`${match.path}/:id/details`}
-            render={({ match: m }) => (
-              <JobTypeRedirect id={m.params.id} path={m.path} view="details" />
-            )}
-          />
-          <Route
-            path={`${match.path}/:id/output`}
-            render={({ match: m }) => (
-              <JobTypeRedirect id={m.params.id} path={m.path} view="output" />
-            )}
-          />
-          <Route
-            path={`${match.path}/:type/:id`}
-            render={() => (
-              <Job
-                history={history}
-                location={location}
-                setBreadcrumb={this.setBreadcrumbConfig}
-              />
-            )}
-          />
-          <Route
-            path={`${match.path}/:id`}
-            render={({ match: m }) => (
-              <JobTypeRedirect id={m.params.id} path={m.path} />
-            )}
-          />
-        </Switch>
-      </Fragment>
-    );
-  }
+  return (
+    <>
+      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
+      <Switch>
+        <Route exact path={match.path}>
+          <PageSection>
+            <JobList
+              showTypeColumn
+              defaultParams={{ not__launch_type: 'sync' }}
+            />
+          </PageSection>
+        </Route>
+        <Route
+          path={`${match.path}/:id/details`}
+          render={({ match: m }) => (
+            <JobTypeRedirect id={m.params.id} path={m.path} view="details" />
+          )}
+        />
+        <Route
+          path={`${match.path}/:id/output`}
+          render={({ match: m }) => (
+            <JobTypeRedirect id={m.params.id} path={m.path} view="output" />
+          )}
+        />
+        <Route
+          path={`${match.path}/:type/:id`}
+          render={() => (
+            <Job
+              history={history}
+              location={location}
+              setBreadcrumb={buildBreadcrumbConfig}
+            />
+          )}
+        />
+        <Route
+          path={`${match.path}/:id`}
+          render={({ match: m }) => (
+            <JobTypeRedirect id={m.params.id} path={m.path} />
+          )}
+        />
+      </Switch>
+    </>
+  );
 }

 export { Jobs as _Jobs };
-export default withI18n()(withRouter(Jobs));
+export default withI18n()(Jobs);
--- a/awx/ui_next/src/screens/Template/Template.jsx
+++ b/awx/ui_next/src/screens/Template/Template.jsx
@ -3,15 +3,17 @@ import { t } from '@lingui/macro';
 import { withI18n } from '@lingui/react';
 import { Card, CardActions, PageSection } from '@patternfly/react-core';
 import { Switch, Route, Redirect, withRouter, Link } from 'react-router-dom';
+
 import { TabbedCardHeader } from '@components/Card';
 import CardCloseButton from '@components/CardCloseButton';
 import ContentError from '@components/ContentError';
+import JobList from '@components/JobList';
 import NotificationList from '@components/NotificationList';
 import RoutedTabs from '@components/RoutedTabs';
 import { ResourceAccessList } from '@components/ResourceAccessList';
 import JobTemplateDetail from './JobTemplateDetail';
-import { JobTemplatesAPI, OrganizationsAPI } from '@api';
 import JobTemplateEdit from './JobTemplateEdit';
+import { JobTemplatesAPI, OrganizationsAPI } from '@api';

 class Template extends Component {
  constructor(props) {
@ -109,7 +111,7 @@ class Template extends Component {
      },
      {
        name: i18n._(t`Completed Jobs`),
-        link: '/home',
+        link: `${match.url}/completed_jobs`,
      },
      {
        name: i18n._(t`Survey`),
@ -203,6 +205,11 @@ class Template extends Component {
              )}
            />
          )}
+          {template?.id && (
+            <Route path="/templates/:templateType/:id/completed_jobs">
+              <JobList defaultParams={{ job__job_template: template.id }} />
+            </Route>
+          )}
          <Route
            key="not-found"
            path="*"
--- a/awx/ui_next/src/screens/Template/Templates.jsx
+++ b/awx/ui_next/src/screens/Template/Templates.jsx
@ -39,10 +39,13 @@ class Templates extends Component {
      [`/templates/${template.type}/${template.id}/edit`]: i18n._(
        t`Edit Details`
      ),
+      [`/templates/${template.type}/${template.id}/access`]: i18n._(t`Access`),
      [`/templates/${template.type}/${template.id}/notifications`]: i18n._(
        t`Notifications`
      ),
-      [`/templates/${template.type}/${template.id}/access`]: i18n._(t`Access`),
+      [`/templates/${template.type}/${template.id}/completed_jobs`]: i18n._(
+        t`Completed Jobs`
+      ),
    };
    this.setState({ breadcrumbConfig });
  };
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
@ -8,6 +8,7 @@ import AppendBody from '@components/AppendBody';
 import CardCloseButton from '@components/CardCloseButton';
 import ContentError from '@components/ContentError';
 import FullPage from '@components/FullPage';
+import JobList from '@components/JobList';
 import RoutedTabs from '@components/RoutedTabs';
 import { WorkflowJobTemplatesAPI, CredentialsAPI } from '@api';
 import WorkflowJobTemplateDetail from './WorkflowJobTemplateDetail';
@ -81,6 +82,7 @@ class WorkflowJobTemplate extends Component {
    const tabsArray = [
      { name: i18n._(t`Details`), link: `${match.url}/details` },
      { name: i18n._(t`Visualizer`), link: `${match.url}/visualizer` },
+      { name: i18n._(t`Completed Jobs`), link: `${match.url}/completed_jobs` },
    ];

    tabsArray.forEach((tab, n) => {
@ -151,6 +153,15 @@ class WorkflowJobTemplate extends Component {
              )}
            />
          )}
+          {template?.id && (
+            <Route path="/templates/workflow_job_template/:id/completed_jobs">
+              <JobList
+                defaultParams={{
+                  workflow_job__workflow_job_template: template.id,
+                }}
+              />
+            </Route>
+          )}
          <Route
            key="not-found"
            path="*"
				`@ -1 +0,0 @@`
				`export { default } from './HostCompletedJobs';`
				`@ -1 +0,0 @@`
				`export { default } from './InventoryCompletedJobs';`
				`@ -1 +0,0 @@`
				`export { default } from './SmartInventoryCompletedJobs';`