feat: add timezone switcher (#270)

Author: erickzhao

package.json

@@ -25,12 +25,13 @@
   "license": "MIT",
   "dependencies": {
     "@ant-design/icons": "^5.6.1",
+    "@date-fns/tz": "^1.4.1",
     "antd": "^5.25.3",
     "chart.js": "3.5.0",
     "chartjs-adapter-date-fns": "^2.0.0",
     "chartjs-plugin-zoom": "^1.1.1",
     "classnames": "2.2.6",
-    "date-fns": "^2.16.1",
+    "date-fns": "4.1.0",
     "debug": "4.3.1",
     "electron-devtools-installer": "4.0.0",
     "electron-squirrel-startup": "1.0.0",
@@ -65,7 +66,6 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^12.1.2",
     "@types/classnames": "^2.2.11",
-    "@types/date-fns": "^2.6.0",
     "@types/debug": "4.1.5",
     "@types/electron-squirrel-startup": "^1.0.2",
     "@types/fs-extra": "^9.0.4",

src/renderer/components/app-core-header-filter.tsx

@@ -1,7 +1,6 @@
 import { observer } from 'mobx-react';
 import React, { useEffect } from 'react';
 import { debounce } from 'lodash';
-import dayjs, { Dayjs } from 'dayjs';
 import {
   Button,
   DatePicker,
@@ -10,6 +9,8 @@ import {
   Input,
   InputRef,
   Space,
+  Switch,
+  Tooltip,
 } from 'antd';
 import { SleuthState } from '../state/sleuth';
 import {
@@ -25,6 +26,8 @@ import {
   SearchOutlined,
   WarningOutlined,
 } from '@ant-design/icons';
+import { TZDate, tzOffset } from '@date-fns/tz';
+import dateFnsGenerateConfig from 'rc-picker/lib/generate/dateFns';
 
 export interface FilterProps {
   state: SleuthState;
@@ -79,7 +82,7 @@ export const Filter = observer((props: FilterProps) => {
   }, 500);
 
   const handleDateRangeChange = (
-    values: [Dayjs, Dayjs],
+    values: [TZDate, TZDate],
     dateStrings: [string, string],
   ) => {
     props.state.dateRange = {
@@ -108,7 +111,9 @@ export const Filter = observer((props: FilterProps) => {
     />
   );
 
-  const { RangePicker } = DatePicker;
+  const { RangePicker } = DatePicker.generatePicker<Date>(
+    dateFnsGenerateConfig,
+  );
 
   function renderFilter() {
     const { error, warn, info, debug } = props.state.levelFilter;
@@ -200,7 +205,6 @@ export const Filter = observer((props: FilterProps) => {
               key: 'reset',
             },
           ],
-          // onMouseLeave: (): void => setOpen(false),
         }}
       >
         <Button
@@ -210,17 +214,50 @@ export const Filter = observer((props: FilterProps) => {
       </Dropdown>
     );
   }
+
+  const systemTZ = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const userTZ = props.state.stateFiles['log-context.json']?.data?.systemTZ;
+  const tz = props.state.isUserTZ ? userTZ : systemTZ;
+  const offset = tzOffset(tz, new Date('2020-01-15T00:00:00Z'));
+  const isTZSwitchable = userTZ && userTZ !== systemTZ;
+
   return (
     <Space className="SearchGroup">
+      {!!userTZ && (
+        <div>
+          <Space>
+            <Tooltip
+              placement="right"
+              title={`${tz} (UTC${offset < 0 ? '' : '+'}${offset / 60})`}
+            >
+              <Switch
+                disabled={!isTZSwitchable}
+                checkedChildren={
+                  isTZSwitchable
+                    ? 'TZ: System'
+                    : `TZ: UTC${offset < 0 ? '' : '+'}${offset / 60}`
+                }
+                unCheckedChildren={'TZ: User'}
+                checked={!props.state.isUserTZ}
+                onChange={() => {
+                  props.state.toggleTZ();
+                }}
+              />
+            </Tooltip>
+          </Space>
+        </div>
+      )}
       <RangePicker
-        showTime={{
-          defaultValue: [
-            dayjs('00:00:00', 'HH:mm:ss'),
-            dayjs('23:59:59', 'HH:mm:ss'),
-          ],
-        }}
+        showTime
         onChange={handleDateRangeChange}
-        allowEmpty={[true, true]}
+        value={[
+          props.state.dateRange.from
+            ? new TZDate(props.state.dateRange.from, tz)
+            : null,
+          props.state.dateRange.to
+            ? new TZDate(props.state.dateRange.to, tz)
+            : null,
+        ]}
       />
       <Divider type="vertical" />
       <Space className="FilterGroup">

src/renderer/components/log-table-constants.ts

@@ -43,6 +43,7 @@ export interface LogTableState {
   sortDirection?: SORT_DIRECTION;
   ignoreSearchIndex?: boolean;
   scrollToSelection?: boolean;
+  userTZ?: string;
 }
 
 export interface SortFilterListOptions {

src/renderer/components/log-table.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { format } from 'date-fns';
+import { TZDate } from '@date-fns/tz';
 import { default as keydown } from 'react-keydown';
 import autoBind from 'react-autobind';
 import {
@@ -59,6 +60,8 @@ export const logColorMap: Record<ProcessableLogType, string> = {
  */
 @observer
 export class LogTable extends React.Component<LogTableProps, LogTableState> {
+  private tableRef = React.createRef<Table>();
+
   constructor(props: LogTableProps) {
     super(props);
 
@@ -67,10 +70,12 @@ export class LogTable extends React.Component<LogTableProps, LogTableState> {
       sortBy: 'index',
       sortDirection: props.state.defaultSort || SORT_DIRECTION.DESC,
       ignoreSearchIndex: false,
+      userTZ: props.state.stateFiles['log-context.json']?.data?.systemTZ,
     };
 
     autoBind(this);
     this.selectSearchIndex();
+    this.setupTimezoneReaction();
   }
 
   /**
@@ -89,6 +94,22 @@ export class LogTable extends React.Component<LogTableProps, LogTableState> {
     );
   }
 
+  /**
+   * Sets up a reaction to force update the grid when timezone setting changes.
+   *
+   * @see https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md#forceupdategrid
+   */
+  private setupTimezoneReaction() {
+    reaction(
+      () => this.props.state.isUserTZ,
+      () => {
+        if (this.tableRef.current) {
+          this.tableRef.current.forceUpdateGrid();
+        }
+      },
+    );
+  }
+
   public componentDidUpdate() {
     if (
       this.props.state.searchList.length > 0 &&
@@ -631,7 +652,13 @@ export class LogTable extends React.Component<LogTableProps, LogTableState> {
   }: TableCellProps): JSX.Element | string {
     const { dateTimeFormat } = this.props;
     const timestamp = entry.momentValue
-      ? format(entry.momentValue, dateTimeFormat)
+      ? format(
+          new TZDate(
+            entry.momentValue,
+            this.props.state.isUserTZ ? this.state.userTZ : undefined,
+          ),
+          dateTimeFormat,
+        )
       : entry.timestamp;
     let prefix = <i className="Meta ts_icon ts_icon_question" />;
 
@@ -705,7 +732,7 @@ export class LogTable extends React.Component<LogTableProps, LogTableState> {
       tableOptions.scrollToIndex = searchList[searchIndex] || 0;
 
     return (
-      <Table {...tableOptions}>
+      <Table {...tableOptions} ref={this.tableRef}>
         <Column
           label="Index"
           dataKey="index"

src/renderer/state/sleuth.ts

@@ -81,6 +81,7 @@ export class SleuthState {
   @observable public isDetailsVisible = false;
   @observable public isSidebarOpen = true;
   @observable public isSpotlightOpen = false;
+  @observable public isUserTZ = false;
   @observable.shallow public bookmarks: Array<Bookmark> = [];
   @observable public serializedBookmarks: Record<
     string,
@@ -255,6 +256,11 @@ export class SleuthState {
     this.isSpotlightOpen = !this.isSpotlightOpen;
   }
 
+  @action
+  public toggleTZ() {
+    this.isUserTZ = !this.isUserTZ;
+  }
+
   @action
   public async getSuggestions(suggestions?: Suggestion[]) {
     this.suggestions = suggestions || (await window.Sleuth.getSuggestions());
@@ -301,6 +307,7 @@ export class SleuthState {
     this.isDetailsVisible = false;
     this.dateRange = { from: null, to: null };
     this.traceThreads = undefined;
+    this.stateFiles = {};
 
     if (goBackToHome) {
       this.resetApp();