@@ -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';