Skip to content

Commit 0599417

Browse files
virdvird
authored
Merge pull request #19 from ArweaveTeam/feat/node_table_component
table component from ar_miner_ui_playground
2 parents 3d64b4b + ed060f4 commit 0599417

File tree

2 files changed

+343
-0
lines changed

2 files changed

+343
-0
lines changed

‎renderer/components/Navbar.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@ export default function Navbar() {
3333
href: "/dashboard",
3434
label: "Dashboard",
3535
},
36+
{
37+
href: "/monitor",
38+
label: "Monitor",
39+
},
3640
{
3741
href: "/learn",
3842
label: "Learn",

‎renderer/pages/monitor.tsx

Lines changed: 339 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,339 @@
1+
import React from "react";
2+
import { filesize } from "filesize/dist/filesize.esm.js";
3+
import { MainLayout } from "../layouts/MainLayout";
4+
5+
interface tooltipHeaderOpt {
6+
title: string;
7+
hint_fn: () => React.ReactElement;
8+
}
9+
function tooltipHeader(opt: tooltipHeaderOpt) {
10+
// TODO use opt.hint_fn
11+
return <th>{opt.title}</th>;
12+
}
13+
14+
interface Node {
15+
ip: string;
16+
downloaded_size_bn: bigint;
17+
sm_avail_size_bn: bigint;
18+
dl_speed: number;
19+
ul_speed: number;
20+
hashrate: number;
21+
h1: number;
22+
h2: number;
23+
h2_cm: number;
24+
vdf: number;
25+
start_ts: number;
26+
is_alive: boolean;
27+
smart_status: string;
28+
}
29+
30+
export default function MonitorPage() {
31+
// TODO style
32+
// TODO data feed with real data
33+
// But keep test data feed (so it will be possible see all component states)
34+
const sample_node: Node = {
35+
ip: "192.168.1.10",
36+
// typescript or I a bit dumb
37+
// downloaded_size_bn: 100n * 1024n ** 4n,
38+
// sm_avail_size_bn: 120n * 1024n ** 4n,
39+
downloaded_size_bn: 109951162777600n,
40+
sm_avail_size_bn: 131941395333120n,
41+
dl_speed: 1e6,
42+
ul_speed: 1e3,
43+
hashrate: 5678,
44+
h1: 5000,
45+
h2: 78,
46+
h2_cm: 600,
47+
vdf: 1.2,
48+
start_ts: Date.now(),
49+
is_alive: true,
50+
smart_status: "OK",
51+
};
52+
const nodeList: Node[] = [];
53+
for (let i = 10; i < 20; i++) {
54+
const node: Node = Object.assign({}, sample_node);
55+
node.ip = `192.168.1.${i}`;
56+
nodeList.push(node);
57+
}
58+
59+
nodeList.push({
60+
ip: "192.168.1.250",
61+
// downloaded_size_bn: 100n * 1024n ** 2n,
62+
// sm_avail_size_bn: 100n * 1024n ** 3n,
63+
downloaded_size_bn: 104857600n,
64+
sm_avail_size_bn: 104857600n,
65+
dl_speed: 100e6,
66+
ul_speed: 0,
67+
hashrate: 10,
68+
h1: 10,
69+
h2: 0,
70+
h2_cm: 0,
71+
vdf: 5,
72+
start_ts: Date.now(),
73+
is_alive: false,
74+
smart_status: "1 HDD fail",
75+
});
76+
77+
// I am not sure that this function works ok
78+
// I only know original fmt_size worked fine
79+
const fmtSize = (value: bigint) => filesize(Number(value), { standard: "si" });
80+
// TODO
81+
const fmtHashrate = (value: number) => value.toString();
82+
// TODO
83+
const fmtNetSpeed = (value: number) => value.toString();
84+
// TODO
85+
const fmtTimestampDiff = (value: number) => value.toString();
86+
87+
let total_downloaded_size_bn = 0n;
88+
let total_sm_avail_size_bn = 0n;
89+
let total_hashrate = 0;
90+
let total_h1 = 0;
91+
let total_h2 = 0;
92+
let total_h2_cm = 0;
93+
let total_dl_speed = 0;
94+
let total_ul_speed = 0;
95+
96+
const numCellStyle: React.CSSProperties = {
97+
textAlign: "right",
98+
};
99+
100+
const now = Date.now();
101+
// TODO refresh each second
102+
103+
const reactNodeList = nodeList.map((node, index) => {
104+
if (node.is_alive) {
105+
total_downloaded_size_bn += node.downloaded_size_bn;
106+
total_sm_avail_size_bn += node.sm_avail_size_bn;
107+
total_hashrate += node.hashrate;
108+
total_h1 += node.h1;
109+
total_h2 += node.h2;
110+
total_h2_cm += node.h2_cm;
111+
total_dl_speed += node.dl_speed;
112+
total_ul_speed += node.ul_speed;
113+
}
114+
return (
115+
<tr key={index} className={!node.is_alive ? "warning" : undefined}>
116+
<td>{node.ip}</td>
117+
<td style={numCellStyle}>{fmtSize(node.downloaded_size_bn)}</td>
118+
<td style={numCellStyle}>{fmtSize(node.sm_avail_size_bn)}</td>
119+
<td style={numCellStyle}>{fmtHashrate(node.hashrate)}</td>
120+
<td style={numCellStyle}>{fmtHashrate(node.h1)}</td>
121+
<td style={numCellStyle}>{fmtHashrate(node.h2)}</td>
122+
<td style={numCellStyle}>{fmtHashrate(node.h2_cm)}</td>
123+
<td style={numCellStyle}>{fmtNetSpeed(node.dl_speed)}</td>
124+
<td style={numCellStyle}>{fmtNetSpeed(node.ul_speed)}</td>
125+
<td style={numCellStyle}>{node.vdf.toFixed(2)}</td>
126+
<td></td>
127+
<td></td>
128+
<td style={numCellStyle}>{node.smart_status}</td>
129+
<td style={numCellStyle}>{fmtTimestampDiff(now - node.start_ts)}</td>
130+
</tr>
131+
);
132+
});
133+
134+
return (
135+
<MainLayout>
136+
<div className="w-full">
137+
<div className="max-w-screen-xl mx-auto p-4 h-[90vh]">
138+
<div className="flex flex-col items-start justify-center h-full">
139+
<h1 className="text-3xl font-medium mb-2 tracking-wide">Monitor</h1>
140+
141+
<table
142+
style={{
143+
fontFamily: "monospace",
144+
}}
145+
>
146+
<tbody>
147+
<tr>
148+
<th>IP</th>
149+
{tooltipHeader({
150+
title: "DL size",
151+
hint_fn: () => {
152+
return <span>Downloaded size</span>;
153+
},
154+
})}
155+
{tooltipHeader({
156+
title: "Disk space",
157+
hint_fn: () => {
158+
return (
159+
<>
160+
<div>
161+
<span>Total storage modules </span>
162+
</div>
163+
<div>
164+
<b>declared</b>
165+
<span> space</span>
166+
</div>
167+
</>
168+
);
169+
},
170+
})}
171+
{tooltipHeader({
172+
title: "Hashrate",
173+
hint_fn: () => {
174+
return (
175+
<>
176+
<div>
177+
<span>Hashrate =</span>
178+
</div>
179+
<div>
180+
<span>H1 + H2 + CM H2</span>
181+
</div>
182+
</>
183+
);
184+
},
185+
})}
186+
{tooltipHeader({
187+
title: "H1",
188+
hint_fn: () => {
189+
return <span>Hashrate for H1</span>;
190+
},
191+
})}
192+
{tooltipHeader({
193+
title: "H2",
194+
hint_fn: () => {
195+
return (
196+
<>
197+
<div>
198+
<span>Hashrate for H2</span>
199+
</div>
200+
<div>
201+
<span>only </span>
202+
<b>own</b>
203+
<span> H2</span>
204+
</div>
205+
</>
206+
);
207+
},
208+
})}
209+
{tooltipHeader({
210+
title: "CM H2",
211+
hint_fn: () => {
212+
return (
213+
<>
214+
<div>
215+
<span>Hashrate for H2</span>
216+
</div>
217+
<div>
218+
<span>only </span>
219+
<b>coordinated mining</b>
220+
<span> H2</span>
221+
</div>
222+
</>
223+
);
224+
},
225+
})}
226+
{tooltipHeader({
227+
title: "DL",
228+
hint_fn: () => {
229+
return (
230+
<>
231+
<span>Download speed</span>
232+
<div>
233+
<span>(</span>
234+
<b>bytes</b>
235+
<span> per second)</span>
236+
</div>
237+
</>
238+
);
239+
},
240+
})}
241+
{tooltipHeader({
242+
title: "UL",
243+
hint_fn: () => {
244+
return (
245+
<>
246+
<span>Upload speed</span>
247+
<div>
248+
<span>(</span>
249+
<b>bytes</b>
250+
<span> per second)</span>
251+
</div>
252+
</>
253+
);
254+
},
255+
})}
256+
{tooltipHeader({
257+
title: "VDF",
258+
hint_fn: () => {
259+
return <span>VDF time in seconds</span>;
260+
},
261+
})}
262+
{tooltipHeader({
263+
title: "CPU",
264+
hint_fn: () => {
265+
return (
266+
<>
267+
<span>CPU usage</span>
268+
<div>
269+
<span>(available only in ssh-mode)</span>
270+
</div>
271+
</>
272+
);
273+
},
274+
})}
275+
{tooltipHeader({
276+
title: "RAM",
277+
hint_fn: () => {
278+
return (
279+
<>
280+
<span>System memory usage</span>
281+
<div>
282+
<span>(available only in ssh-mode)</span>
283+
</div>
284+
</>
285+
);
286+
},
287+
})}
288+
{tooltipHeader({
289+
title: "SMART",
290+
hint_fn: () => {
291+
return (
292+
<>
293+
<div>HDD S.M.A.R.T.</div>
294+
<div>monitor status</div>
295+
<div>
296+
<span>(available only in ssh-mode)</span>
297+
</div>
298+
</>
299+
);
300+
},
301+
})}
302+
{tooltipHeader({
303+
title: "uptime",
304+
hint_fn: () => {
305+
return (
306+
<>
307+
<span>uptime from last </span>
308+
<b>node</b>
309+
<span> restart</span>
310+
</>
311+
);
312+
},
313+
})}
314+
</tr>
315+
{reactNodeList}
316+
<tr>
317+
<th style={numCellStyle}>Total</th>
318+
<th style={numCellStyle}>{fmtSize(total_downloaded_size_bn)}</th>
319+
<th style={numCellStyle}>{fmtSize(total_sm_avail_size_bn)}</th>
320+
<th style={numCellStyle}>{fmtHashrate(total_hashrate)}</th>
321+
<th style={numCellStyle}>{fmtHashrate(total_h1)}</th>
322+
<th style={numCellStyle}>{fmtHashrate(total_h2)}</th>
323+
<th style={numCellStyle}>{fmtHashrate(total_h2_cm)}</th>
324+
<th style={numCellStyle}>{fmtNetSpeed(total_dl_speed)}</th>
325+
<th style={numCellStyle}>{fmtNetSpeed(total_ul_speed)}</th>
326+
<th></th>
327+
<th></th>
328+
<th></th>
329+
<th></th>
330+
<th></th>
331+
</tr>
332+
</tbody>
333+
</table>
334+
</div>
335+
</div>
336+
</div>
337+
</MainLayout>
338+
);
339+
}

0 commit comments

Comments
 (0)