24 hour format

Signed-off-by: Adrian Nackov <[email protected]>

awx/main/management/commands/host_metric.py

@@ -35,15 +35,7 @@ def host_metric_queryset(self, result, offset=0, limit=BATCHED_FETCH_COUNT):
 
     def host_metric_summary_monthly_queryset(self, result, offset=0, limit=BATCHED_FETCH_COUNT):
         list_of_queryset = list(
-            result.values(
-                'id',
-                'date',
-                'license_consumed',
-                'license_capacity',
-                'hosts_added',
-                'hosts_deleted',
-                'indirectly_managed_hosts',
-            ).order_by(
+            result.values('id', 'date', 'license_consumed', 'license_capacity', 'hosts_added', 'hosts_deleted', 'indirectly_managed_hosts',).order_by(
                 'date'
             )[offset : offset + limit]
         )

awx/settings/defaults.py

@@ -659,6 +659,11 @@
 # Note: This setting may be overridden by database settings.
 PENDO_TRACKING_STATE = "off"
 
+
+# Datetime format across the UI
+# Note: This setting may be overridden by database settings.
+DATETIME_FORMAT = "am-pm"
+
 # Enables Insights data collection.
 # Note: This setting may be overridden by database settings.
 INSIGHTS_TRACKING_STATE = False

awx/ui/conf.py

@@ -71,3 +71,15 @@
     category_slug='ui',
     hidden=True,
 )
+
+register(
+    'DATETIME_FORMAT',
+    field_class=fields.ChoiceField,
+    choices=[('24-hour', _('2012-05-09, 14:45:55 (24-hour)')), ('am-pm', _('9/5/2012, 2:45:55 PM (am-pm)'))],
+    allow_null=False,
+    default='am-pm',
+    label=_('Datetime Format'),
+    help_text=_('Datetime format across the user interface.'),
+    category=_('UI'),
+    category_slug='ui',
+)

awx/ui/src/components/DetailList/UserDateDetail.js

@@ -4,6 +4,7 @@ import { Trans } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { formatDateString } from 'util/dates';
+import { useConfig } from 'contexts/Config';
 import { SummaryFieldUser } from 'types';
 import _Detail from './Detail';
 
@@ -12,7 +13,8 @@ const Detail = styled(_Detail)`
 `;
 
 function UserDateDetail({ label, date, user }) {
-  const dateStr = formatDateString(date);
+  const config = useConfig();
+  const dateStr = formatDateString(date, null, config);
   const username = user ? user.username : '';
   return (
     <Detail

awx/ui/src/components/JobList/JobListItem.js

@@ -7,6 +7,7 @@ import { Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { RocketIcon } from '@patternfly/react-icons';
 import styled from 'styled-components';
 import { formatDateString } from 'util/dates';
+import { useConfig } from 'contexts/Config';
 import { isJobRunning } from 'util/jobs';
 import getScheduleUrl from 'util/getScheduleUrl';
 import { ActionsTd, ActionItem, TdBreakWord } from '../PaginatedTable';
@@ -36,6 +37,7 @@ function JobListItem({
   isSuperUser = false,
   inventorySourceLabels,
 }) {
+  const config = useConfig();
   const labelId = `check-action-${job.id}`;
 
   const jobTypes = {
@@ -96,9 +98,11 @@ function JobListItem({
           {job.status && <StatusLabel status={job.status} />}
         </Td>
         {showTypeColumn && <Td dataLabel={t`Type`}>{jobTypes[job.type]}</Td>}
-        <Td dataLabel={t`Start Time`}>{formatDateString(job.started)}</Td>
+        <Td dataLabel={t`Start Time`}>
+          {formatDateString(job.started, null, config)}
+        </Td>
         <Td dataLabel={t`Finish Time`}>
-          {job.finished ? formatDateString(job.finished) : ''}
+          {job.finished ? formatDateString(job.finished, null, config) : ''}
         </Td>
         <ActionsTd dataLabel={t`Actions`}>
           <ActionItem

awx/ui/src/components/Schedule/ScheduleDetail/FrequencyDetails.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import { t, Plural, SelectOrdinal } from '@lingui/macro';
-import { DateTime } from 'luxon';
-import { formatDateString } from 'util/dates';
+import { makeDateTime, formatDateString } from 'util/dates';
+import { useConfig } from 'contexts/Config';
 import { DetailList, Detail } from '../../DetailList';
 
 const Label = styled.div`
@@ -17,6 +17,7 @@ export default function FrequencyDetails({
   timezone,
   isException,
 }) {
+  const config = useConfig();
   const getRunEveryLabel = () => {
     const { interval } = options;
     switch (type) {
@@ -107,7 +108,7 @@ export default function FrequencyDetails({
         <RunOnDetail type={type} options={options} prefix={prefix} />
         <Detail
           label={t`End`}
-          value={getEndValue(type, options, timezone)}
+          value={getEndValue(type, options, timezone, config)}
           dataCy={`${prefix}-end`}
         />
       </DetailList>
@@ -216,7 +217,7 @@ function RunOnDetail({ type, options, prefix }) {
   return null;
 }
 
-function getEndValue(type, options, timezone) {
+function getEndValue(type, options, timezone, config) {
   if (options.end === 'never') {
     return t`Never`;
   }
@@ -231,12 +232,6 @@ function getEndValue(type, options, timezone) {
     );
   }
 
-  const date = DateTime.fromFormat(
-    `${options.endDate} ${options.endTime}`,
-    'yyyy-MM-dd h:mm a',
-    {
-      zone: timezone,
-    }
-  );
-  return formatDateString(date, timezone);
+  const date = makeDateTime(options.endDate, options.endTime, timezone, config);
+  return formatDateString(date, timezone, config);
 }

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

@@ -94,11 +94,11 @@ function ScheduleDetail({ hasDaysToKeepField, schedule, surveyConfig }) {
     timezone,
     verbosity,
   } = schedule;
+  const config = useConfig();
   const helpText = getHelpText();
   const history = useHistory();
   const { pathname } = useLocation();
   const pathRoot = pathname.substr(0, pathname.indexOf('schedules'));
-  const config = useConfig();
 
   const {
     request: deleteSchedule,
@@ -190,7 +190,7 @@ function ScheduleDetail({ hasDaysToKeepField, schedule, surveyConfig }) {
   let exceptionOptions = {};
   try {
     ({ frequency, frequencyOptions, exceptionFrequency, exceptionOptions } =
-      parseRuleObj(schedule));
+      parseRuleObj(schedule, config));
   } catch (parseRuleError) {
     if (parseRuleError instanceof UnsupportedRRuleError) {
       rruleError = parseRuleError;
@@ -339,15 +339,18 @@ function ScheduleDetail({ hasDaysToKeepField, schedule, surveyConfig }) {
         />
         <Detail
           label={t`First Run`}
-          value={formatDateString(dtstart, timezone)}
+          value={formatDateString(dtstart, timezone, config)}
           dataCy="schedule-first-run"
         />
         <Detail
           label={t`Next Run`}
-          value={formatDateString(next_run, timezone)}
+          value={formatDateString(next_run, timezone, config)}
           dataCy="schedule-next-run"
         />
-        <Detail label={t`Last Run`} value={formatDateString(dtend, timezone)} />
+        <Detail
+          label={t`Last Run`}
+          value={formatDateString(dtend, timezone, config)}
+        />
         <Detail
           label={t`Local Time Zone`}
           value={timezone}

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

@@ -13,6 +13,7 @@ import {
 import styled from 'styled-components';
 import { Schedule } from 'types';
 import { formatDateString } from 'util/dates';
+import { useConfig } from 'contexts/Config';
 import { DetailList, Detail } from '../../DetailList';
 import { ActionsTd, ActionItem, TdBreakWord } from '../../PaginatedTable';
 import { ScheduleToggle } from '..';
@@ -30,6 +31,7 @@ function ScheduleListItem({
   isMissingInventory,
   isMissingSurvey,
 }) {
+  const config = useConfig();
   const labelId = `check-action-${schedule.id}`;
 
   const jobTypeLabels = {
@@ -120,7 +122,11 @@ function ScheduleListItem({
           <DetailList stacked>
             <Detail
               label={t`Next Run`}
-              value={formatDateString(schedule.next_run, schedule.timezone)}
+              value={formatDateString(
+                schedule.next_run,
+                schedule.timezone,
+                config
+              )}
             />
           </DetailList>
         )}

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

@@ -6,6 +6,7 @@ import styled from 'styled-components';
 import { t } from '@lingui/macro';
 import { Split, SplitItem, TextListItemVariants } from '@patternfly/react-core';
 import { formatDateString } from 'util/dates';
+import { useConfig } from 'contexts/Config';
 import { DetailName, DetailValue } from '../../DetailList';
 import MultiButtonToggle from '../../MultiButtonToggle';
 
@@ -23,6 +24,7 @@ const OccurrencesLabel = styled.div`
 `;
 
 function ScheduleOccurrences({ preview = { local: [], utc: [] }, tz }) {
+  const config = useConfig();
   const [mode, setMode] = useState('local');
 
   if (preview.local.length < 2) {
@@ -64,8 +66,8 @@ function ScheduleOccurrences({ preview = { local: [], utc: [] }, tz }) {
         {preview[mode].map((dateStr) => (
           <div key={dateStr}>
             {mode === 'local'
-              ? formatDateString(dateStr, tz)
-              : formatDateString(dateStr, 'UTC')}
+              ? formatDateString(dateStr, tz, config)
+              : formatDateString(dateStr, 'UTC', config)}
           </div>
         ))}
       </DetailValue>

awx/ui/src/components/Schedule/shared/DateTimePicker.js

@@ -8,13 +8,15 @@ import {
   TimePicker,
   FormGroup,
 } from '@patternfly/react-core';
+import { useConfig } from 'contexts/Config';
 import styled from 'styled-components';
 import { required, validateTime, combine } from 'util/validators';
 
 const DateTimeGroup = styled.span`
   display: flex;
 `;
 function DateTimePicker({ dateFieldName, timeFieldName, label }) {
+  const config = useConfig();
   const [dateField, dateMeta, dateHelpers] = useField({
     name: dateFieldName,
     validate: combine([required(null), isValidDate]),
@@ -55,13 +57,16 @@ function DateTimePicker({ dateFieldName, timeFieldName, label }) {
           onChange={onDateChange}
         />
         <TimePicker
-          placeholder="hh:mm AM/PM"
+          placeholder={
+            config.datetime_format === 'am-pm' ? 'hh:mm AM/PM' : 'HH:mm'
+          }
           stepMinutes={15}
           aria-label={
             timeFieldName.startsWith('start') ? t`Start time` : t`End time`
           }
           time={timeField.value}
           {...timeField}
+          is24Hour={config.datetime_format === '24-hour'}
           onChange={(_, time) => timeHelpers.setValue(time)}
         />
       </DateTimeGroup>

awx/ui/src/components/Schedule/shared/ScheduleForm.js

@@ -5,7 +5,7 @@ import { t } from '@lingui/macro';
 import { Formik } from 'formik';
 import { RRule } from 'rrule';
 import { Button, Form, ActionGroup } from '@patternfly/react-core';
-import { Config } from 'contexts/Config';
+import { useConfig, Config } from 'contexts/Config';
 import { JobTemplatesAPI, SchedulesAPI, WorkflowJobTemplatesAPI } from 'api';
 import { dateToInputDateTime } from 'util/dates';
 import useRequest from 'hooks/useRequest';
@@ -39,6 +39,7 @@ function ScheduleForm({
   surveyConfig,
   resourceDefaultCredentials,
 }) {
+  const config = useConfig();
   const [isWizardOpen, setIsWizardOpen] = useState(false);
   const [isPromptTouched, setIsPromptTouched] = useState(false);
   const [isSaveDisabled, setIsSaveDisabled] = useState(false);
@@ -283,9 +284,13 @@ function ScheduleForm({
   ) {
     showPromptButton = true;
   }
-  const [currentDate, time] = dateToInputDateTime(closestQuarterHour.toISO());
+  const [currentDate, time] = dateToInputDateTime(
+    closestQuarterHour.toISO(),
+    null,
+    config
+  );
 
-  const [tomorrowDate] = dateToInputDateTime(tomorrow.toISO());
+  const [tomorrowDate] = dateToInputDateTime(tomorrow.toISO(), null, config);
   const initialFrequencyOptions = {
     minute: {
       interval: 1,
@@ -379,7 +384,7 @@ function ScheduleForm({
   let overriddenValues = {};
   if (schedule.rrule) {
     try {
-      overriddenValues = parseRuleObj(schedule);
+      overriddenValues = parseRuleObj(schedule, config);
     } catch (error) {
       if (error instanceof UnsupportedRRuleError) {
         return (