feat(timezone): enable switch timezone in ui

modules/web/i18n/de/messages.de.xlf

@@ -2680,6 +2680,14 @@
         <source>Hides all-namespaces option from the namespaces dropdown list in UI.</source>
         <target state="new">Hides all-namespaces option from the namespaces dropdown list in UI.</target>
       </trans-unit>
+      <trans-unit id="3894039560161506093" datatype="html">
+        <source>Timezone</source>
+        <target state="new">Timezone</target>
+      </trans-unit>
+      <trans-unit id="752874111362710041" datatype="html">
+        <source>Change the timezone of the dashboard</source>
+        <target state="new">Change the timezone of the dashboard</target>
+      </trans-unit>
     </body>
   </file>
 </xliff>

modules/web/i18n/es/messages.es.xlf

@@ -2672,6 +2672,14 @@
         <source>Hides all-namespaces option from the namespaces dropdown list in UI.</source>
         <target state="new">Hides all-namespaces option from the namespaces dropdown list in UI.</target>
       </trans-unit>
+      <trans-unit id="3894039560161506093" datatype="html">
+        <source>Timezone</source>
+        <target state="new">Timezone</target>
+      </trans-unit>
+      <trans-unit id="752874111362710041" datatype="html">
+        <source>Change the timezone of the dashboard</source>
+        <target state="new">Change the timezone of the dashboard</target>
+      </trans-unit>
     </body>
   </file>
 </xliff>

modules/web/i18n/fr/messages.fr.xlf

@@ -2668,6 +2668,14 @@
         <source>Hides all-namespaces option from the namespaces dropdown list in UI.</source>
         <target state="new">Hides all-namespaces option from the namespaces dropdown list in UI.</target>
       </trans-unit>
+      <trans-unit id="3894039560161506093" datatype="html">
+        <source>Timezone</source>
+        <target state="new">Timezone</target>
+      </trans-unit>
+      <trans-unit id="752874111362710041" datatype="html">
+        <source>Change the timezone of the dashboard</source>
+        <target state="new">Change the timezone of the dashboard</target>
+      </trans-unit>
     </body>
   </file>
 </xliff>

modules/web/i18n/ja/messages.ja.xlf

@@ -2672,6 +2672,14 @@
         <source>Hides all-namespaces option from the namespaces dropdown list in UI.</source>
         <target state="new">Hides all-namespaces option from the namespaces dropdown list in UI.</target>
       </trans-unit>
+      <trans-unit id="3894039560161506093" datatype="html">
+        <source>Timezone</source>
+        <target state="new">Timezone</target>
+      </trans-unit>
+      <trans-unit id="752874111362710041" datatype="html">
+        <source>Change the timezone of the dashboard</source>
+        <target state="new">Change the timezone of the dashboard</target>
+      </trans-unit>
     </body>
   </file>
 </xliff>

modules/web/i18n/ko/messages.ko.xlf

@@ -2672,6 +2672,14 @@
         <source>Hides all-namespaces option from the namespaces dropdown list in UI.</source>
         <target state="new">Hides all-namespaces option from the namespaces dropdown list in UI.</target>
       </trans-unit>
+      <trans-unit id="3894039560161506093" datatype="html">
+        <source>Timezone</source>
+        <target state="new">Timezone</target>
+      </trans-unit>
+      <trans-unit id="752874111362710041" datatype="html">
+        <source>Change the timezone of the dashboard</source>
+        <target state="new">Change the timezone of the dashboard</target>
+      </trans-unit>
     </body>
   </file>
 </xliff>

modules/web/i18n/messages.xlf

@@ -1979,6 +1979,12 @@
       <trans-unit id="8967487471439603323" datatype="html">
         <source>Hides all-namespaces option from the namespaces dropdown list in UI.</source>
       </trans-unit>
+      <trans-unit id="3894039560161506093" datatype="html">
+        <source>Timezone</source>
+      </trans-unit>
+      <trans-unit id="752874111362710041" datatype="html">
+        <source>Change the timezone of the dashboard</source>
+      </trans-unit>
     </body>
   </file>
 </xliff>

modules/web/i18n/zh-Hans/messages.zh-Hans.xlf

@@ -2672,6 +2672,14 @@
         <source>Hides all-namespaces option from the namespaces dropdown list in UI.</source>
         <target state="new">Hides all-namespaces option from the namespaces dropdown list in UI.</target>
       </trans-unit>
+      <trans-unit id="3894039560161506093" datatype="html">
+        <source>Timezone</source>
+        <target state="new">Timezone</target>
+      </trans-unit>
+      <trans-unit id="752874111362710041" datatype="html">
+        <source>Change the timezone of the dashboard</source>
+        <target state="new">Change the timezone of the dashboard</target>
+      </trans-unit>
     </body>
   </file>
 </xliff>

modules/web/i18n/zh-Hant-HK/messages.zh-Hant-HK.xlf

@@ -2672,6 +2672,14 @@
         <source>Hides all-namespaces option from the namespaces dropdown list in UI.</source>
         <target state="new">Hides all-namespaces option from the namespaces dropdown list in UI.</target>
       </trans-unit>
+      <trans-unit id="3894039560161506093" datatype="html">
+        <source>Timezone</source>
+        <target state="new">Timezone</target>
+      </trans-unit>
+      <trans-unit id="752874111362710041" datatype="html">
+        <source>Change the timezone of the dashboard</source>
+        <target state="new">Change the timezone of the dashboard</target>
+      </trans-unit>
     </body>
   </file>
 </xliff>

modules/web/i18n/zh-Hant/messages.zh-Hant.xlf

@@ -2672,6 +2672,14 @@
         <source>Hides all-namespaces option from the namespaces dropdown list in UI.</source>
         <target state="new">Hides all-namespaces option from the namespaces dropdown list in UI.</target>
       </trans-unit>
+      <trans-unit id="3894039560161506093" datatype="html">
+        <source>Timezone</source>
+        <target state="new">Timezone</target>
+      </trans-unit>
+      <trans-unit id="752874111362710041" datatype="html">
+        <source>Change the timezone of the dashboard</source>
+        <target state="new">Change the timezone of the dashboard</target>
+      </trans-unit>
     </body>
   </file>
 </xliff>

modules/web/package.json

@@ -60,6 +60,7 @@
     "@swimlane/ngx-charts": "20.5.0",
     "ace-builds": "1.36.3",
     "core-js": "3.39.0",
+    "countries-and-timezones": "^3.7.2",
     "crop-url": "4.0.1",
     "d3-shape": "3.2.0",
     "d3-time-format": "4.1.0",

modules/web/src/common/components/date/component.ts

@@ -24,6 +24,7 @@ import {
 import {Subject, timer} from 'rxjs';
 import {switchMap} from 'rxjs/operators';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {TimezoneService} from '@common/services/global/timezone';
 
 /**
  * Display a date
@@ -64,6 +65,10 @@ export class DateComponent implements OnChanges {
     return this.relative_;
   }
 
+  get timezone(): string {
+    return this._timezone.utcOffset;
+  }
+
   iteration = 0;
 
   private relative_: boolean;
@@ -75,7 +80,10 @@ export class DateComponent implements OnChanges {
     24, // Hours in a day
   ];
 
-  constructor(private readonly cdr_: ChangeDetectorRef) {}
+  constructor(
+    private readonly cdr_: ChangeDetectorRef,
+    private readonly _timezone: TimezoneService
+  ) {}
 
   ngOnChanges() {
     if (this.relative_) {

modules/web/src/common/components/date/template.html

@@ -16,7 +16,7 @@
 
 <span
   class="kd-date"
-  [matTooltip]="date | date: format"
+  [matTooltip]="date | date: format: timezone"
 >
-  {{ relative ? (date | kdRelativeTime: iteration) : (date | date) }}
+  {{ relative ? (date | kdRelativeTime: iteration) : (date | date: undefined: timezone) }}
 </span>

modules/web/src/common/services/global/localsettings.ts

@@ -16,15 +16,20 @@ import {Injectable} from '@angular/core';
 
 import {LocalSettings} from '@api/root.api';
 import {ThemeService} from './theme';
+import {TimezoneService} from './timezone';
 
 @Injectable()
 export class LocalSettingsService {
   private readonly _settingsKey = 'localSettings';
   private settings_: LocalSettings = {
     theme: ThemeService.SystemTheme,
+    timezone: TimezoneService.DefaultTimezone,
   };
 
-  constructor(private readonly theme_: ThemeService) {}
+  constructor(
+    private readonly theme_: ThemeService,
+    private readonly timezone_: TimezoneService
+  ) {}
 
   init(): void {
     const cookieValue = localStorage.getItem(this._settingsKey);
@@ -43,6 +48,12 @@ export class LocalSettingsService {
     this.updateCookie_();
   }
 
+  handleTimezoneChange(timezone: string): void {
+    this.settings_.timezone = timezone;
+    this.timezone_.timezone = timezone;
+    this.updateCookie_();
+  }
+
   updateCookie_(): void {
     localStorage.setItem(this._settingsKey, JSON.stringify(this.settings_));
   }

modules/web/src/common/services/global/module.ts

@@ -37,6 +37,7 @@ import {TitleService} from './title';
 import {VerberService} from './verber';
 import {PinnerService} from './pinner';
 import {MeService} from '@common/services/global/me';
+import {TimezoneService} from './timezone';
 
 @NgModule({
   providers: [
@@ -61,6 +62,7 @@ import {MeService} from '@common/services/global/me';
     ParamsService,
     LocalConfigLoaderService,
     DecoderService,
+    TimezoneService,
     {
       provide: APP_INITIALIZER,
       useFactory: init,
@@ -73,6 +75,7 @@ import {MeService} from '@common/services/global/me';
         ThemeService,
         LocalConfigLoaderService,
         MeService,
+        TimezoneService,
       ],
       multi: true,
     },
@@ -99,7 +102,8 @@ export function init(
   history: HistoryService,
   theme: ThemeService,
   loader: LocalConfigLoaderService,
-  me: MeService
+  me: MeService,
+  timezone: TimezoneService
 ): Function {
   return async () => {
     await loader.init();
@@ -108,6 +112,7 @@ export function init(
     config.init();
     history.init();
     theme.init();
+    timezone.init();
     await me.init();
     return await globalSettings.init();
   };

modules/web/src/common/services/global/timezone.ts

@@ -0,0 +1,48 @@
+// Copyright 2017 The Kubernetes Authors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {Timezone} from '@api/root.api';
+import {getAllTimezones, getTimezone} from 'countries-and-timezones';
+
+export class TimezoneService {
+  private _timezones: Timezone[] = [];
+  static DefaultTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  private _timezone = TimezoneService.DefaultTimezone;
+  constructor() {}
+
+  get timezone(): string {
+    return this._timezone;
+  }
+
+  set timezone(timezone: string) {
+    this._timezone = timezone;
+  }
+
+  get timezones(): Timezone[] {
+    return this._timezones;
+  }
+
+  get utcOffset(): string {
+    return getTimezone(this._timezone).utcOffsetStr;
+  }
+
+  init(): void {
+    this._timezones = Object.entries(getAllTimezones())
+      .sort((a, b) => a[1].utcOffset - b[1].utcOffset)
+      .map(([key, value]) => ({
+        label: `${key} (UTC ${value.utcOffsetStr})`,
+        value: key,
+      }));
+  }
+}

modules/web/src/index.component.ts

@@ -17,28 +17,37 @@ import {Component, ElementRef, OnInit} from '@angular/core';
 
 import {LocalSettingsService} from '@common/services/global/localsettings';
 import {ThemeService} from '@common/services/global/theme';
+import {TimezoneService} from '@common/services/global/timezone';
 import {TitleService} from '@common/services/global/title';
 
 @Component({selector: 'kd-root', template: '<router-outlet></router-outlet>'})
 export class RootComponent implements OnInit {
   private _theme = this._themeService.theme;
+  private _timezone = this._timezoneService.timezone;
 
   constructor(
     private readonly _themeService: ThemeService,
     private readonly _localSettingService: LocalSettingsService,
     private readonly _overlayContainer: OverlayContainer,
     private readonly _kdRootRef: ElementRef,
-    private readonly _titleService: TitleService
+    private readonly _titleService: TitleService,
+    private readonly _timezoneService: TimezoneService
   ) {}
 
   ngOnInit(): void {
     this._titleService.update();
     this._themeService.subscribe(this.onThemeChange_.bind(this));
 
     const localSettings = this._localSettingService.get();
-    if (localSettings && localSettings.theme) {
-      this._theme = localSettings.theme;
-      this._themeService.theme = localSettings.theme;
+    if (localSettings) {
+      if (localSettings.theme) {
+        this._theme = localSettings.theme;
+        this._themeService.theme = localSettings.theme;
+      }
+      if (localSettings.timezone) {
+        this._timezone = localSettings.timezone;
+        this._timezoneService.timezone = localSettings.timezone;
+      }
     }
 
     this.applyOverlayContainerTheme_('', this._theme);