job details: handle different job types

awx/ui_next/src/api/models/Jobs.js

@@ -1,5 +1,14 @@
 import Base from '../Base';
 
+const BASE_URLS = {
+  playbook: '/jobs/',
+  project: '/project_updates/',
+  system: '/system_jobs/',
+  inventory: '/inventory_updates/',
+  command: '/ad_hoc_commands/',
+  workflow: '/workflow_jobs/',
+};
+
 class Jobs extends Base {
   constructor(http) {
     super(http);
@@ -7,8 +16,7 @@ class Jobs extends Base {
   }
 
   readDetail (id, type) {
-    // TODO: adjust url based on type
+    return this.http.get(`/api/v2${BASE_URLS[type]}${id}/`);
-    return this.http.get(`${this.baseUrl}${id}/`);
   }
 }
 

awx/ui_next/src/screens/Job/Job.jsx

@@ -8,7 +8,6 @@ import {
   CardHeader as PFCardHeader,
   PageSection,
 } from '@patternfly/react-core';
-
 import { JobsAPI } from '@api';
 import ContentError from '@components/ContentError';
 import CardCloseButton from '@components/CardCloseButton';
@@ -111,28 +110,18 @@ class Job extends Component {
               to="/jobs/:type/:id/details"
               exact
             />
-            {job && (
+            {job && [
               <Route
+                key="details"
                 path="/jobs/:type/:id/details"
-                render={() => (
+                render={() => <JobDetail type={match.params.type} job={job} />}
-                  <JobDetail
+              />,
-                    match={match}
-                    job={job}
-                  />
-                )}
-              />
-            )}
-            {job && (
               <Route
+                key="output"
                 path="/jobs/:type/:id/output"
-                render={() => (
+                render={() => <JobOutput type={match.params.type} job={job} />}
-                  <JobOutput
+              />,
-                    match={match}
+            ]}
-                    job={job}
-                  />
-                )}
-              />
-            )}
           </Switch>
         </Card>
       </PageSection>

awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { shape } from 'prop-types';
 import { Link, withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
@@ -48,6 +49,7 @@ function JobDetail ({ job, i18n }) {
           label={i18n._(t`Finished`)}
           value={job.finished}
         />
+        {jobTemplate && (
           <Detail
             label={i18n._(t`Template`)}
             value={(
@@ -56,10 +58,12 @@ function JobDetail ({ job, i18n }) {
               </Link>
             )}
           />
+        )}
         <Detail
           label={i18n._(t`Job Type`)}
           value={toTitleCase(job.job_type)}
         />
+        {inventory && (
           <Detail
             label={i18n._(t`Inventory`)}
             value={(
@@ -68,7 +72,9 @@ function JobDetail ({ job, i18n }) {
               </Link>
             )}
           />
+        )}
         {/* TODO: show project status icon */}
+        {project && (
           <Detail
             label={i18n._(t`Project`)}
             value={(
@@ -77,6 +83,7 @@ function JobDetail ({ job, i18n }) {
               </Link>
             )}
           />
+        )}
         <Detail
           label={i18n._(t`Revision`)}
           value={job.scm_revision}
@@ -101,6 +108,7 @@ function JobDetail ({ job, i18n }) {
           label={i18n._(t`Execution Node`)}
           value={job.exucution_node}
         />
+        {instanceGroup && (
           <Detail
             label={i18n._(t`Instance Group`)}
             value={(
@@ -109,10 +117,17 @@ function JobDetail ({ job, i18n }) {
               </Link>
             )}
           />
+        )}
+        {
+          typeof job.job_slice_number === 'number'
+          && typeof job.job_slice_count === 'number'
+          && (
             <Detail
               label={i18n._(t`Job Slice`)}
               value={`${job.job_slice_number}/${job.job_slice_count}`}
             />
+          )
+        }
         {(credentials && credentials.length > 0) && (
           <Detail
             fullWidth
@@ -140,6 +155,7 @@ function JobDetail ({ job, i18n }) {
           />
         )}
       </DetailList>
+      {job.extra_vars && (
         <VariablesInput
           css="margin: 20px 0"
           id="job-variables"
@@ -148,6 +164,7 @@ function JobDetail ({ job, i18n }) {
           rows={4}
           label={i18n._(t`Variables`)}
         />
+      )}
       <VariablesInput
         css="margin: 20px 0"
         id="job-artifacts"
@@ -169,5 +186,8 @@ function JobDetail ({ job, i18n }) {
     </CardBody>
   );
 }
+JobDetail.propTypes = {
+  job: shape({}).isRequired,
+};
 
 export default withI18n()(withRouter(JobDetail));

awx/ui_next/src/screens/Job/JobList/JobListItem.jsx

@@ -11,6 +11,15 @@ import DataListCell from '@components/DataListCell';
 import VerticalSeparator from '@components/VerticalSeparator';
 import { toTitleCase } from '@util/strings';
 
+const JOB_TYPE_URLS = {
+  job: 'playbook',
+  project_update: 'project',
+  system_job: 'system',
+  inventory_update: 'inventory',
+  ad_hoc_command: 'command',
+  workflow_job: 'workflow',
+};
+
 class JobListItem extends Component {
   render() {
     const { job, isSelected, onSelect } = this.props;
@@ -27,12 +36,11 @@ class JobListItem extends Component {
             onChange={onSelect}
             aria-labelledby={`check-action-${job.id}`}
           />
-          <DataListItemCells
+          <DataListItemCells dataListCells={[
-            dataListCells={[
             <DataListCell key="divider">
               <VerticalSeparator />
               <span>
-                  <Link to={`/jobs/${job.type}/${job.id}`}>
+                <Link to={`/jobs/${JOB_TYPE_URLS[job.type]}/${job.id}`}>
                   <b>{job.name}</b>
                 </Link>
               </span>