Apply date formatter to lists and details

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

@@ -13,7 +13,8 @@ import ErrorDetail from '@components/ErrorDetail';
 import LaunchButton from '@components/LaunchButton';
 import { StatusIcon } from '@components/Sparkline';
 import { toTitleCase } from '@util/strings';
-import { Job } from '../../../types';
+import { formatDateString } from '@util/dates';
+import { Job } from '@types';
 import {
   JobsAPI,
   ProjectUpdatesAPI,
@@ -140,8 +141,14 @@ function JobDetail({ job, i18n, history }) {
             </StatusDetailValue>
           }
         />
-        <Detail label={i18n._(t`Started`)} value={job.started} />
+        <Detail
-        <Detail label={i18n._(t`Finished`)} value={job.finished} />
+          label={i18n._(t`Started`)}
+          value={formatDateString(job.started)}
+        />
+        <Detail
+          label={i18n._(t`Finished`)}
+          value={formatDateString(job.finished)}
+        />
         {jobTemplate && (
           <Detail
             label={i18n._(t`Template`)}

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

@@ -29,8 +29,8 @@ describe('<JobDetail />', () => {
     }
 
     assertDetail('Status', 'Successful');
-    assertDetail('Started', mockJobData.started);
+    assertDetail('Started', '8/8/2019, 7:24:18 PM');
-    assertDetail('Finished', mockJobData.finished);
+    assertDetail('Finished', '8/8/2019, 7:24:50 PM');
     assertDetail('Template', mockJobData.summary_fields.job_template.name);
     assertDetail('Job Type', 'Run');
     assertDetail('Launched By', mockJobData.summary_fields.created_by.username);

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

@@ -16,6 +16,7 @@ import DataListCheck from '@components/DataListCheck';
 import LaunchButton from '@components/LaunchButton';
 import VerticalSeparator from '@components/VerticalSeparator';
 import { toTitleCase } from '@util/strings';
+import { formatDateString } from '@util/dates';
 import { JOB_TYPE_URL_SEGMENTS } from '../../../constants';
 
 const StyledButton = styled(PFButton)`
@@ -56,7 +57,9 @@ class JobListItem extends Component {
                 </span>
               </DataListCell>,
               <DataListCell key="type">{toTitleCase(job.type)}</DataListCell>,
-              <DataListCell key="finished">{job.finished}</DataListCell>,
+              <DataListCell key="finished">
+                {formatDateString(job.finished)}
+              </DataListCell>,
               <DataListCell lastcolumn="true" key="relaunch">
                 {job.type !== 'system_job' &&
                   job.summary_fields.user_capabilities.start && (

awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx

@@ -10,6 +10,7 @@ import { DetailList, Detail } from '@components/DetailList';
 import { ChipGroup, Chip } from '@components/Chip';
 import ContentError from '@components/ContentError';
 import ContentLoading from '@components/ContentLoading';
+import { formatDateString } from '@util/dates';
 
 const CardBody = styled(PFCardBody)`
   padding-top: 20px;
@@ -53,7 +54,6 @@ class OrganizationDetail extends Component {
 
   render() {
     const { hasContentLoading, contentError, instanceGroups } = this.state;
-
     const {
       organization: {
         name,
@@ -86,8 +86,14 @@ class OrganizationDetail extends Component {
             label={i18n._(t`Ansible Environment`)}
             value={custom_virtualenv}
           />
-          <Detail label={i18n._(t`Created`)} value={created} />
+          <Detail
-          <Detail label={i18n._(t`Last Modified`)} value={modified} />
+            label={i18n._(t`Created`)}
+            value={formatDateString(created)}
+          />
+          <Detail
+            label={i18n._(t`Last Modified`)}
+            value={formatDateString(modified)}
+          />
           {instanceGroups && instanceGroups.length > 0 && (
             <Detail
               fullWidth

awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.test.jsx

@@ -13,8 +13,8 @@ describe('<OrganizationDetail />', () => {
     description: 'Bar',
     custom_virtualenv: 'Fizz',
     max_hosts: '0',
-    created: 'Bat',
+    created: '2015-07-07T17:21:26.429745Z',
-    modified: 'Boo',
+    modified: '2019-08-11T19:47:37.980466Z',
     summary_fields: {
       user_capabilities: {
         edit: true,
@@ -63,8 +63,8 @@ describe('<OrganizationDetail />', () => {
       { label: 'Name', value: 'Foo' },
       { label: 'Description', value: 'Bar' },
       { label: 'Ansible Environment', value: 'Fizz' },
-      { label: 'Created', value: 'Bat' },
+      { label: 'Created', value: '7/7/2015, 5:21:26 PM' },
-      { label: 'Last Modified', value: 'Boo' },
+      { label: 'Last Modified', value: '8/11/2019, 7:47:37 PM' },
       { label: 'Max Hosts', value: '0' },
     ];
     // eslint-disable-next-line no-restricted-syntax

awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx

@@ -17,6 +17,7 @@ import LaunchButton from '@components/LaunchButton';
 import ContentLoading from '@components/ContentLoading';
 import { ChipGroup, Chip, CredentialChip } from '@components/Chip';
 import { DetailList, Detail } from '@components/DetailList';
+import { formatDateString } from '@util/dates';
 import { JobTemplatesAPI } from '@api';
 
 const ButtonGroup = styled.div`
@@ -168,11 +169,15 @@ class JobTemplateDetail extends Component {
             <Detail label={i18n._(t`Timeout`)} value={timeout || '0'} />
             <Detail
               label={i18n._(t`Created`)}
-              value={`${created} by ${summary_fields.created_by.username}`} // TODO: link to user in users
+              value={`${formatDateString(created)} by ${
+                summary_fields.created_by.username
+              }`} // TODO: link to user in users
             />
             <Detail
               label={i18n._(t`Last Modified`)}
-              value={`${modified} by ${summary_fields.modified_by.username}`} // TODO: link to user in users
+              value={`${formatDateString(modified)} by ${
+                summary_fields.modified_by.username
+              }`} // TODO: link to user in users
             />
             <Detail
               label={i18n._(t`Show Changes`)}