Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add toggle to change timezone to UTC for Nakama Console graphs #1260

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add toggle to change timezone to UTC for Nakama Console graphs #1260

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
edfab3f
Add toggle to change timezone to UTC for Nakama Console graphs
toqueteos Aug 3, 2024
d029394
Remove unused StatusListStatus
toqueteos Aug 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 13 additions & 7 deletions console/ui/src/app/status/status.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down
16 changes: 15 additions & 1 deletion console/ui/src/app/status/status.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed StatusListStatus as it's unused in this file.

import {Observable, of, Subscription, timer} from 'rxjs';
import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
import {ActivatedRoute, ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} from '@angular/router';
Expand All @@ -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',
Expand All @@ -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
});
Expand Down Expand Up @@ -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));
Expand Down
Loading