From edfab3f3899febcf6b7126bd291e78a7e2bfb826 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 1/2] 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 | 14 +++++++++++++ 2 files changed, 27 insertions(+), 7 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 @@
An error occurred: {{error}}
-
-
-
- View: +
+ + UTC: + + +
+ View:
-
-
- + +
@@ -78,6 +80,7 @@
An error occurred: {{error}}
[yAxis]="true" xAxisLabel="Time" yAxisLabel="Latency (ms)" + [xAxisTickFormatting]="xAxisFormatFn" [yScaleMin]="0" [roundDomains]="true" [results]="latencyGraphData"> @@ -108,6 +111,7 @@
An error occurred: {{error}}
[yAxis]="true" xAxisLabel="Time" yAxisLabel="Request Count" + [xAxisTickFormatting]="xAxisFormatFn" [yScaleMin]="0" [roundDomains]="true" [results]="rateGraphData"> @@ -151,6 +155,7 @@
An error occurred: {{error}}
[yAxis]="true" xAxisLabel="Time" yAxisLabel="Input (kb/s)" + [xAxisTickFormatting]="xAxisFormatFn" [yScaleMin]="0" [roundDomains]="true" [results]="inputGraphData"> @@ -181,6 +186,7 @@
An error occurred: {{error}}
[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..e6fa5bfd23 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', @@ -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)); From d0293945346cb0cba441c6da964a65018a63c4d2 Mon Sep 17 00:00:00 2001 From: Carlos Cobo <699969+toqueteos@users.noreply.github.com> Date: Sat, 3 Aug 2024 15:57:19 +0200 Subject: [PATCH 2/2] Remove unused StatusListStatus --- console/ui/src/app/status/status.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/console/ui/src/app/status/status.component.ts b/console/ui/src/app/status/status.component.ts index e6fa5bfd23..af00b67fa5 100644 --- a/console/ui/src/app/status/status.component.ts +++ b/console/ui/src/app/status/status.component.ts @@ -13,7 +13,7 @@ // limitations under the License. import {Component, OnInit, OnDestroy, Injectable, Pipe, PipeTransform} from '@angular/core'; -import {ConsoleService, StatusList, StatusListStatus} from '../console.service'; +import {ConsoleService, StatusList} from '../console.service'; import {Observable, of, Subscription, timer} from 'rxjs'; import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms'; import {ActivatedRoute, ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} from '@angular/router';