Add ability to configure the locale timezone (#2523)

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/>
-          Finished at: {status.lastState.terminated.finishedAt}<br/>
+          Started at: {<LocaleDate date={status.lastState.terminated.startedAt} />}<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()}</>;
+  }
+}