Add ability to configure the locale timezone (#2523)

package.json

@@ -224,6 +224,7 @@
     "mobx-react": "^6.2.2",
     "mock-fs": "^4.12.0",
     "moment": "^2.26.0",
+    "moment-timezone": "^0.5.33",
     "node-pty": "^0.9.0",
     "npm": "^6.14.8",
     "openid-client": "^3.15.2",

src/common/user-store.ts

@@ -3,6 +3,7 @@ import { app, remote } from "electron";
 import semver from "semver";
 import { readFile } from "fs-extra";
 import { action, computed, observable, reaction, toJS } from "mobx";
+import moment from "moment-timezone";
 import { BaseStore } from "./base-store";
 import migrations from "../migrations/user-store";
 import { getAppVersion } from "./utils/app-version";
@@ -23,6 +24,7 @@ export interface UserPreferences {
   httpsProxy?: string;
   shell?: string;
   colorTheme?: string;
+  localeTimezone?: string;
   allowUntrustedCAs?: boolean;
   allowTelemetry?: boolean;
   downloadMirror?: string | "default";
@@ -54,6 +56,7 @@ export class UserStore extends BaseStore<UserStoreModel> {
     allowTelemetry: true,
     allowUntrustedCAs: false,
     colorTheme: UserStore.defaultTheme,
+    localeTimezone: moment.tz.guess(true) || "UTC",
     downloadMirror: "default",
     downloadKubectlBinaries: true,  // Download kubectl binaries matching cluster version
     openAtLogin: false,
@@ -130,6 +133,11 @@ export class UserStore extends BaseStore<UserStoreModel> {
     this.lastSeenAppVersion = getAppVersion();
   }
 
+  @action
+  setLocaleTimezone(tz: string) {
+    this.preferences.localeTimezone = tz;
+  }
+
   protected refreshNewContexts = async () => {
     try {
       const kubeConfig = await readFile(this.kubeConfigPath, "utf8");

src/renderer/components/+events/event-details.tsx

@@ -11,6 +11,7 @@ import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { Table, TableCell, TableHead, TableRow } from "../table";
 import { lookupApiLink } from "../../api/kube-api";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
+import { LocaleDate } from "../locale-date";
 
 interface Props extends KubeObjectDetailsProps<KubeEvent> {
 }
@@ -38,10 +39,10 @@ export class EventDetails extends React.Component<Props> {
           {event.getSource()}
         </DrawerItem>
         <DrawerItem name="First seen">
-          {event.getFirstSeenTime()} ago {event.firstTimestamp}
+          {event.getFirstSeenTime()} ago (<LocaleDate date={event.firstTimestamp} />)
         </DrawerItem>
         <DrawerItem name="Last seen">
-          {event.getLastSeenTime()} ago {event.lastTimestamp}
+          {event.getLastSeenTime()} ago (<LocaleDate date={event.lastTimestamp} />)
         </DrawerItem>
         <DrawerItem name="Count">
           {count}

src/renderer/components/+preferences/preferences.tsx

@@ -1,6 +1,7 @@
 import "./preferences.scss";
 
 import React from "react";
+import moment from "moment-timezone";
 import { computed, observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 
@@ -40,6 +41,11 @@ export class Preferences extends React.Component {
     }));
   }
 
+  timezoneOptions: SelectOption<string>[] = moment.tz.names().map(zone => ({
+    label: zone,
+    value: zone,
+  }));
+
   componentDidMount() {
     disposeOnUnmount(this, [
       reaction(() => navigation.location.hash, hash => {
@@ -95,7 +101,7 @@ export class Preferences extends React.Component {
     const { preferences } = userStore;
     const extensions = appPreferenceRegistry.getItems();
     const telemetryExtensions = extensions.filter(e => e.showInPreferencesTab == Pages.Telemetry);
-    let defaultShell = process.env.SHELL || process.env.PTYSHELL;
+    let defaultShell = process.env.SHELL || process.env.PTYSHELL;
 
     if (!defaultShell) {
       if (isWindows) {
@@ -153,6 +159,18 @@ export class Preferences extends React.Component {
                 label="Automatically start Lens on login"
               />
             </section>
+
+            <hr />
+
+            <section id="locale">
+              <SubTitle title="Locale Timezone" />
+              <Select
+                options={this.timezoneOptions}
+                value={preferences.localeTimezone}
+                onChange={({ value }: SelectOption) => userStore.setLocaleTimezone(value)}
+                themeName="lens"
+              />
+            </section>
           </section>
         )}
         {this.activeTab == Pages.Proxy && (

src/renderer/components/+workloads-pods/pod-details-container.tsx

@@ -13,6 +13,7 @@ import { IMetrics } from "../../api/endpoints/metrics.api";
 import { ContainerCharts } from "./container-charts";
 import { ResourceType } from "../cluster-settings/components/cluster-metrics-setting";
 import { clusterStore } from "../../../common/cluster-store";
+import { LocaleDate } from "../locale-date";
 
 interface Props {
   pod: Pod;
@@ -39,8 +40,8 @@ export class PodDetailsContainer extends React.Component<Props> {
         <span>
           {lastState}<br/>
           Reason: {status.lastState.terminated.reason} - exit code: {status.lastState.terminated.exitCode}<br/>
-          Started at: {status.lastState.terminated.startedAt}<br/>
+          Started at: {<LocaleDate date={status.lastState.terminated.startedAt} />}<br/>
-          Finished at: {status.lastState.terminated.finishedAt}<br/>
+          Finished at: {<LocaleDate date={status.lastState.terminated.finishedAt} />}<br/>
         </span>
       );
     }

src/renderer/components/dock/log-list.tsx

@@ -6,9 +6,11 @@ import DOMPurify from "dompurify";
 import debounce from "lodash/debounce";
 import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
+import moment from "moment-timezone";
 import { Align, ListOnScrollProps } from "react-window";
 
 import { SearchStore, searchStore } from "../../../common/search-store";
+import { userStore } from "../../../common/user-store";
 import { cssNames } from "../../utils";
 import { Button } from "../button";
 import { Icon } from "../icon";
@@ -79,12 +81,15 @@ export class LogList extends React.Component<Props> {
   @computed
   get logs() {
     const showTimestamps = logTabStore.getData(this.props.id).showTimestamps;
+    const { preferences } = userStore;
 
     if (!showTimestamps) {
       return logStore.logsWithoutTimestamps;
     }
 
-    return this.props.logs;
+    return this.props.logs
+      .map(log => logStore.splitOutTimestamp(log))
+      .map(([logTimestamp, log]) => (`${moment.tz(logTimestamp, preferences.localeTimezone).format()}${log}`));
   }
 
   /**

src/renderer/components/dock/log.store.ts

@@ -146,6 +146,16 @@ export class LogStore {
     return stamp.toISOString();
   }
 
+  splitOutTimestamp(logs: string): [string, string] {
+    const extraction = /^(\d+\S+)(.*)/m.exec(logs);
+
+    if (!extraction || extraction.length < 3) {
+      return ["", ""];
+    }
+
+    return [extraction[1], extraction[2]];
+  }
+
   getTimestamps(logs: string) {
     return logs.match(/^\d+\S+/gm);
   }

src/renderer/components/kube-object/kube-object-meta.tsx

@@ -4,6 +4,7 @@ import { DrawerItem, DrawerItemLabels } from "../drawer";
 import { lookupApiLink } from "../../api/kube-api";
 import { Link } from "react-router-dom";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
+import { LocaleDate } from "../locale-date";
 import { getDetailsUrl } from "./kube-object-details";
 
 export interface KubeObjectMetaProps {
@@ -35,7 +36,7 @@ export class KubeObjectMeta extends React.Component<KubeObjectMetaProps> {
     return (
       <>
         <DrawerItem name="Created" hidden={this.isHidden("creationTimestamp")}>
-          {getAge(true, false)} ago ({creationTimestamp})
+          {getAge(true, false)} ago ({<LocaleDate date={creationTimestamp} />})
         </DrawerItem>
         <DrawerItem name="Name" hidden={this.isHidden("name")}>
           {getName()} <KubeObjectStatusIcon key="icon" object={object} />

src/renderer/components/locale-date/index.ts

@@ -0,0 +1 @@
+export * from "./locale-date";

src/renderer/components/locale-date/locale-date.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { observer } from "mobx-react";
+import moment from "moment-timezone";
+import { userStore } from "../../../common/user-store";
+
+interface Props {
+  date: string
+}
+
+@observer
+export class LocaleDate extends React.Component<Props> {
+  render() {
+    const { preferences } = userStore;
+    const { date } = this.props;
+
+    return <>{moment.tz(date, preferences.localeTimezone).format()}</>;
+  }
+}

yarn.lock

@@ -9538,6 +9538,18 @@ mock-fs@^4.12.0:
   resolved "https://registry.yarnpkg.com/mock-fs/-/mock-fs-4.12.0.tgz#a5d50b12d2d75e5bec9dac3b67ffe3c41d31ade4"
   integrity sha512-/P/HtrlvBxY4o/PzXY9cCNBrdylDNxg7gnrv2sMNxj+UJ2m8jSpl0/A6fuJeNAWr99ZvGWH8XCbE0vmnM5KupQ==
 
+moment-timezone@^0.5.33:
+  version "0.5.33"
+  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.33.tgz#b252fd6bb57f341c9b59a5ab61a8e51a73bbd22c"
+  integrity sha512-PTc2vcT8K9J5/9rDEPe5czSIKgLoGsH8UNpA4qZTVw0Vd/Uz19geE9abbIOQKaAQFcnQ3v5YEXrbSc5BpshH+w==
+  dependencies:
+    moment ">= 2.9.0"
+
+"moment@>= 2.9.0":
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 moment@^2.10.2, moment@^2.26.0:
   version "2.26.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.26.0.tgz#5e1f82c6bafca6e83e808b30c8705eed0dcbd39a"