[+] implement LocaleDate consumer

Signed-off-by: Arthur Knoepflin <arthur@knoepflin.eu>

src/common/user-store.ts

@@ -56,7 +56,7 @@ export class UserStore extends BaseStore<UserStoreModel> {
     allowTelemetry: true,
     allowUntrustedCAs: false,
     colorTheme: UserStore.defaultTheme,
-    localeTimezone: moment.tz.guess(true),
+    localeTimezone: moment.tz.guess(true) || "UTC",
     downloadMirror: "default",
     downloadKubectlBinaries: true,  // Download kubectl binaries matching cluster version
     openAtLogin: false,
@@ -133,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/+preferences/preferences.tsx

@@ -41,12 +41,10 @@ export class Preferences extends React.Component {
     }));
   }
 
-  @computed get timezoneOptions(): SelectOption<string>[] {
-    return moment.tz.names().map(zone => ({
-      label: zone,
-      value: zone,
-    }));
-  }
+  timezoneOptions: SelectOption<string>[] = moment.tz.names().map(zone => ({
+    label: zone,
+    value: zone,
+  }));
 
   componentDidMount() {
     disposeOnUnmount(this, [
@@ -169,7 +167,7 @@ export class Preferences extends React.Component {
               <Select
                 options={this.timezoneOptions}
                 value={preferences.localeTimezone}
-                onChange={({ value }: SelectOption) => preferences.localeTimezone = value}
+                onChange={({ value }: SelectOption) => userStore.setLocaleTimezone(value)}
                 themeName="lens"
               />
             </section>

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()}</>;
+  }
+}