Handle timezone

airflow/www/static/js/datetime_utils.js

@@ -19,6 +19,7 @@
 
 /* global moment, $, document */
 export const defaultFormat = 'YYYY-MM-DD, HH:mm:ss';
+export const isoFormatWithoutTZ = 'YYYY-MM-DDTHH:mm:ss.SSS';
 export const defaultFormatWithTZ = 'YYYY-MM-DD, HH:mm:ss z';
 export const defaultTZFormat = 'z (Z)';
 export const dateTimeAttrFormat = 'YYYY-MM-DDThh:mm:ssTZD';

airflow/www/static/js/grid/FilterBar.jsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-/* global filtersOptions */
+/* global filtersOptions, moment */
 
 import {
   Box,
@@ -27,6 +27,8 @@ import {
   Select,
 } from '@chakra-ui/react';
 import React from 'react';
+import { useTimezone } from './context/timezone';
+import { isoFormatWithoutTZ } from '../datetime_utils';
 
 import useFilters from './utils/useFilters';
 
@@ -41,6 +43,10 @@ const FilterBar = () => {
     clearFilters,
   } = useFilters();
 
+  const { timezone } = useTimezone();
+  const time = moment(filters.baseDate);
+  const formattedTime = time.tz(timezone).format(isoFormatWithoutTZ);
+
   const inputStyles = { backgroundColor: 'white', size: 'lg' };
 
   return (
@@ -49,7 +55,7 @@ const FilterBar = () => {
         <Input
           {...inputStyles}
           type="datetime-local"
-          value={filters.baseDate || ''}
+          value={formattedTime || ''}
           onChange={onBaseDateChange}
         />
       </Box>

airflow/www/static/js/grid/utils/testUtils.jsx

@@ -65,3 +65,9 @@ export const TableWrapper = ({ children }) => (
     </Table>
   </Wrapper>
 );
+
+export const RouterWrapper = ({ children }) => (
+  <MemoryRouter>
+    {children}
+  </MemoryRouter>
+);

airflow/www/static/js/grid/utils/useFilters.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-/* global defaultDagRunDisplayNumber */
+/* global defaultDagRunDisplayNumber, moment */
 
 import { useSearchParams } from 'react-router-dom';
 
@@ -31,7 +31,7 @@ export const TASK_STATE_PARAM = 'task_state';
 const date = new Date();
 date.setMilliseconds(0);
 
-export const now = date.toISOString().replace('Z', '');
+export const now = date.toISOString();
 
 const useFilters = () => {
   const [searchParams, setSearchParams] = useSearchParams();
@@ -44,8 +44,11 @@ const useFilters = () => {
   // it is not send to the api for filtering.
   const taskState = searchParams.get(TASK_STATE_PARAM);
 
-  const makeOnChangeFn = (paramName) => (e) => {
-    const { value } = e.target;
+  const makeOnChangeFn = (paramName, formatFn) => (e) => {
+    let { value } = e.target;
+    if (formatFn) {
+      value = formatFn(value);
+    }
     const params = new URLSearchParams(searchParams);
 
     if (value) params.set(paramName, value);
@@ -54,7 +57,8 @@ const useFilters = () => {
     setSearchParams(params);
   };
 
-  const onBaseDateChange = makeOnChangeFn(BASE_DATE_PARAM);
+  const onBaseDateChange = makeOnChangeFn(BASE_DATE_PARAM,
+    (localDate) => moment(localDate).utc().format());
   const onNumRunsChange = makeOnChangeFn(NUM_RUNS_PARAM);
   const onRunTypeChange = makeOnChangeFn(RUN_TYPE_PARAM);
   const onRunStateChange = makeOnChangeFn(RUN_STATE_PARAM);

airflow/www/static/js/grid/utils/useFilters.test.jsx

@@ -17,27 +17,19 @@
  * under the License.
  */
 
-/* global describe, test, expect, jest */
-
-import React from 'react';
+/* global describe, expect, jest, test, moment */
 import { act, renderHook } from '@testing-library/react-hooks';
-import { MemoryRouter } from 'react-router-dom';
 
 import useFilters from './useFilters';
-
-const Wrapper = ({ children }) => (
-  <MemoryRouter>
-    {children}
-  </MemoryRouter>
-);
+import { RouterWrapper } from './testUtils';
 
 const date = new Date();
 date.setMilliseconds(0);
 jest.useFakeTimers().setSystemTime(date);
 
 describe('Test useFilters hook', () => {
   test('Initial values when url does not have query params', async () => {
-    const { result } = renderHook(() => useFilters(), { wrapper: Wrapper });
+    const { result } = renderHook(() => useFilters(), { wrapper: RouterWrapper });
     const {
       filters: {
         baseDate,
@@ -48,21 +40,21 @@ describe('Test useFilters hook', () => {
       },
     } = result.current;
 
-    expect(baseDate).toBe(date.toISOString().replace('Z', ''));
+    expect(baseDate).toBe(date.toISOString());
     expect(numRuns).toBe(global.defaultDagRunDisplayNumber);
     expect(runType).toBeNull();
     expect(runState).toBeNull();
     expect(taskState).toBeNull();
   });
 
   test.each([
-    { fnName: 'onBaseDateChange', paramName: 'baseDate', paramValue: new Date().toISOString() },
+    { fnName: 'onBaseDateChange', paramName: 'baseDate', paramValue: moment.utc().format() },
     { fnName: 'onNumRunsChange', paramName: 'numRuns', paramValue: '10' },
     { fnName: 'onRunTypeChange', paramName: 'runType', paramValue: 'manual' },
     { fnName: 'onRunStateChange', paramName: 'runState', paramValue: 'success' },
     { fnName: 'onTaskStateChange', paramName: 'taskState', paramValue: 'deferred' },
   ])('Test $fnName functions', async ({ fnName, paramName, paramValue }) => {
-    const { result } = renderHook(() => useFilters(), { wrapper: Wrapper });
+    const { result } = renderHook(() => useFilters(), { wrapper: RouterWrapper });
 
     await act(async () => {
       result.current[fnName]({ target: { value: paramValue } });
@@ -76,7 +68,7 @@ describe('Test useFilters hook', () => {
     });
 
     if (paramName === 'baseDate') {
-      expect(result.current.filters[paramName]).toBe(date.toISOString().replace('Z', ''));
+      expect(result.current.filters[paramName]).toBe(date.toISOString());
     } else if (paramName === 'numRuns') {
       expect(result.current.filters[paramName]).toBe(global.defaultDagRunDisplayNumber);
     } else {