1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
// Copyright Epic Games, Inc. All Rights Reserved.
"use strict";
import { ZenPage } from "./page.js"
import { Fetcher } from "../util/fetcher.js"
import { Friendly } from "../util/friendly.js"
import { Table } from "../util/widgets.js"
////////////////////////////////////////////////////////////////////////////////
export class Page extends ZenPage
{
async main()
{
this.set_title("hub");
// Capacity
const stats_section = this.add_section("Capacity");
this._stats_grid = stats_section.tag().classify("grid").classify("stats-tiles");
// Modules
const mod_section = this.add_section("Modules");
this._mod_host = mod_section;
this._mod_table = null;
await this._update();
this._poll_timer = setInterval(() => this._update(), 2000);
}
async _update()
{
try
{
const [stats, status] = await Promise.all([
new Fetcher().resource("/hub/stats").json(),
new Fetcher().resource("/hub/status").json(),
]);
this._render_capacity(stats);
this._render_modules(status);
}
catch (e) { /* service unavailable */ }
}
_render_capacity(data)
{
const grid = this._stats_grid;
grid.inner().innerHTML = "";
const current = data.currentInstanceCount || 0;
const max = data.maxInstanceCount || 0;
const limit = data.instanceLimit || 0;
{
const tile = grid.tag().classify("card").classify("stats-tile");
tile.tag().classify("card-title").text("Active Modules");
const body = tile.tag().classify("tile-metrics");
this._metric(body, Friendly.sep(current), "currently provisioned", true);
}
{
const tile = grid.tag().classify("card").classify("stats-tile");
tile.tag().classify("card-title").text("Peak Modules");
const body = tile.tag().classify("tile-metrics");
this._metric(body, Friendly.sep(max), "high watermark", true);
}
{
const tile = grid.tag().classify("card").classify("stats-tile");
tile.tag().classify("card-title").text("Instance Limit");
const body = tile.tag().classify("tile-metrics");
this._metric(body, Friendly.sep(limit), "maximum allowed", true);
if (limit > 0)
{
const pct = ((current / limit) * 100).toFixed(0) + "%";
this._metric(body, pct, "utilization");
}
}
}
_render_modules(data)
{
const modules = data.modules || [];
if (this._mod_table)
{
this._mod_table.clear();
}
else
{
this._mod_table = this._mod_host.add_widget(
Table,
["module ID", "status"],
Table.Flag_FitLeft|Table.Flag_PackRight
);
}
if (modules.length === 0)
{
return;
}
for (const m of modules)
{
this._mod_table.add_row(
m.moduleId || "",
m.provisioned ? "provisioned" : "inactive",
);
}
}
_metric(parent, value, label, hero = false)
{
const m = parent.tag().classify("tile-metric");
if (hero)
{
m.classify("tile-metric-hero");
}
m.tag().classify("metric-value").text(value);
m.tag().classify("metric-label").text(label);
}
}
|