Add toggle to change timezone to UTC for Nakama Console graphs

heroiclabs · Aug 3, 2024 · bf5de5f · bf5de5f
1 parent 72eb462
commit bf5de5f
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 7 deletions.
diff --git 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
@@ -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',
@@ -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));