Add toggle to change timezone to UTC for Nakama Console graphs

Author: toqueteos

console/ui/src/app/status/status.component.html

@@ -41,18 +41,20 @@ <h6 class="mr-2 d-inline font-weight-bold">An error occurred: {{error}}</h6>
   </tbody>
 </table>
 
-<form [formGroup]="rangeForm">
-  <div class="row no-gutters justify-content-end">
-    <div class="col-12 text-right">
-      <span>View:</span>
+<div class="row no-gutters align-items-center justify-content-end col-12 text-right">
+    <form [formGroup]="utcForm">
+      <span>UTC:</span>
+      <input type="checkbox" class="ml-1" id="isUTC" formControlName="isUTC" (change)=setIsUTC($event) value="true">
+    </form>
+    <form [formGroup]="rangeForm">
+      <span class="ml-3">View:</span>
       <div class="btn-group" ngbDropdown role="group">
         <select formControlName="rangeMinutes" class="custom-select custom-select-sm ml-3" (change)=setRange($event)>
           <option *ngFor="let key of rangesKeys | sortNumbers" value="{{key}}">{{ranges[key]}}</option>
         </select>
       </div>
-    </div>
-  </div>
-</form>
+    </form>
+</div>
 
 <div class="row">
   <div class="col-6 d-inline-flex justify-content-between align-items-center">
@@ -78,6 +80,7 @@ <h6 class="mr-2 d-inline font-weight-bold">An error occurred: {{error}}</h6>
         [yAxis]="true"
         xAxisLabel="Time"
         yAxisLabel="Latency (ms)"
+        [xAxisTickFormatting]="xAxisFormatFn"
         [yScaleMin]="0"
         [roundDomains]="true"
         [results]="latencyGraphData">
@@ -108,6 +111,7 @@ <h6 class="mr-2 d-inline font-weight-bold">An error occurred: {{error}}</h6>
         [yAxis]="true"
         xAxisLabel="Time"
         yAxisLabel="Request Count"
+        [xAxisTickFormatting]="xAxisFormatFn"
         [yScaleMin]="0"
         [roundDomains]="true"
         [results]="rateGraphData">
@@ -151,6 +155,7 @@ <h6 class="mr-2 d-inline font-weight-bold">An error occurred: {{error}}</h6>
         [yAxis]="true"
         xAxisLabel="Time"
         yAxisLabel="Input (kb/s)"
+        [xAxisTickFormatting]="xAxisFormatFn"
         [yScaleMin]="0"
         [roundDomains]="true"
         [results]="inputGraphData">
@@ -181,6 +186,7 @@ <h6 class="mr-2 d-inline font-weight-bold">An error occurred: {{error}}</h6>
         [yAxis]="true"
         xAxisLabel="Time"
         yAxisLabel="Output (kb/s)"
+        [xAxisTickFormatting]="xAxisFormatFn"
         [yScaleMin]="0"
         [roundDomains]="true"
         [results]="outputGraphData">

console/ui/src/app/status/status.component.ts

@@ -32,6 +32,7 @@ export class StatusComponent implements OnInit, OnDestroy {
   public latencyGraphData = [];
   public inputGraphData = [];
   public outputGraphData = [];
+  public utcForm: UntypedFormGroup;
   public rangeForm: UntypedFormGroup;
   public readonly ranges = {
     1: 'last 1 minute',
@@ -42,7 +43,7 @@ export class StatusComponent implements OnInit, OnDestroy {
   };
   public rangesKeys = Object.keys(this.ranges).map(n => +n);
   public readonly colorScheme = {
-    domain: ['#5AA454', '#E44D25', '#1e59cf', '#7aa3e5', '#a8385d', '#d0bd00']
+    domain: ['#5AA454', '#E44D25', '#1e59cf', '#7aa3e5', '#a8385d', '#d0bd00'],
   };
   private readonly samples = 60; // Number of samples in the series
   private refreshTimer: Observable<number>;
@@ -55,6 +56,9 @@ export class StatusComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
+    this.utcForm = this.formBuilder.group({
+      isUTC: false, // Default show in local timezone
+    });
     this.rangeForm = this.formBuilder.group({
       rangeMinutes: [10], // Default range to 10 min window
     });
@@ -162,9 +166,19 @@ export class StatusComponent implements OnInit, OnDestroy {
 
   public setRange(event): void {
     this.rangeForm.reset({rangeMinutes: +event.target.value});
+  }
+
+  public setIsUTC(event): void {
+    this.utcForm.reset({isUTC: event.target.checked});
     this.reset();
   }
 
+  private formatDateLocal = new Intl.DateTimeFormat(navigator.languages.slice(), { hour: "2-digit", minute: "2-digit" });
+  private formatDateUTC = new Intl.DateTimeFormat(navigator.languages.slice(), { hour: "2-digit", minute: "2-digit", timeZone: "UTC" });
+
+  // Declared as fat arrow to avoid having to bind it in xAxisTickFormatting (see https://github.com/swimlane/ngx-charts/issues/261)
+  xAxisFormatFn = (value) => this.utcForm?.value.isUTC ? this.formatDateUTC.format(value) : this.formatDateLocal.format(value);
+
   private reset(): void {
     this.consoleService.getStatus('').subscribe(data => {
       this.initData(data.nodes.map(n => n.name));