From a9b73fffccf27d59d7b12ed298cb362bd5340377 Mon Sep 17 00:00:00 2001
From: Carlos Cobo <699969+toqueteos@users.noreply.github.com>
Date: Sat, 3 Aug 2024 15:34:32 +0200
Subject: [PATCH] Add toggle to change timezone to UTC for Nakama Console
 graphs

---
 .../ui/src/app/status/status.component.html   | 20 ++++++++++++-------
 console/ui/src/app/status/status.component.ts | 16 ++++++++++++++-
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/console/ui/src/app/status/status.component.html b/console/ui/src/app/status/status.component.html
index 70c2043088..f8d0d3512b 100644
--- a/console/ui/src/app/status/status.component.html
+++ b/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">
diff --git a/console/ui/src/app/status/status.component.ts b/console/ui/src/app/status/status.component.ts
index bffd3e7d01..000df3e5ac 100644
--- a/console/ui/src/app/status/status.component.ts
+++ b/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));