Skip to content

Commit 9e5ad1c

Browse files
roman-khimovroman-khimov
authored
Merge pull request #123 from nspcc-dev/119-add-capacity-metrics
2 parents 4df6d32 + 976504d commit 9e5ad1c

File tree

5 files changed

+205
-7
lines changed

5 files changed

+205
-7
lines changed

‎get_webstat_metrics.py‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,18 @@ async def main():
8686
"mainnet": "unknown",
8787
"testnet": "unknown",
8888
},
89+
"objects": {
90+
"mainnet": "unknown",
91+
"testnet": "unknown",
92+
},
93+
"containers_size": {
94+
"mainnet": "unknown",
95+
"testnet": "unknown",
96+
},
97+
"capacity": {
98+
"mainnet": "unknown",
99+
"testnet": "unknown",
100+
},
89101
"time": time.time(),
90102
"node_map": [],
91103
"contract": {
@@ -159,6 +171,12 @@ async def main():
159171
output['network_epoch']['mainnet'] = family.samples[0].value
160172
if family.name == 'neo_exporter_containers_number':
161173
output['containers']['mainnet'] = family.samples[0].value
174+
if family.name == 'neo_exporter_containers_objects':
175+
output['objects']['mainnet'] = family.samples[0].value
176+
if family.name == 'neo_exporter_containers_size':
177+
output['containers_size']['mainnet'] = family.samples[0].value
178+
if family.name == 'neo_exporter_sn_capacity_total':
179+
output['capacity']['mainnet'] = family.samples[0].value
162180
if family.name == 'neo_exporter_netmap':
163181
for sample in family.samples:
164182
node_mainnet_count += int(sample.value)
@@ -189,6 +207,12 @@ async def main():
189207
output['network_epoch']['testnet'] = family.samples[0].value
190208
if family.name == 'neo_exporter_containers_number':
191209
output['containers']['testnet'] = family.samples[0].value
210+
if family.name == 'neo_exporter_containers_objects':
211+
output['objects']['testnet'] = family.samples[0].value
212+
if family.name == 'neo_exporter_containers_size':
213+
output['containers_size']['testnet'] = family.samples[0].value
214+
if family.name == 'neo_exporter_sn_capacity_total':
215+
output['capacity']['testnet'] = family.samples[0].value
192216
if family.name == 'neo_exporter_netmap':
193217
for sample in family.samples:
194218
node_testnet_count += int(sample.value)

‎public/img/icons/info_circle.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎src/App.css‎

Lines changed: 69 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,34 @@ a.navbar-item:hover {
104104
background-color: #ffffff;
105105
}
106106

107+
.tooltip_block .tooltip {
108+
position: absolute;
109+
top: -30px;
110+
right: 35px;
111+
z-index: 20;
112+
padding: 8px;
113+
border-radius: 6px;
114+
background: var(--text-primary, #111);
115+
color: var(--white, #fff);
116+
font-size: 12px;
117+
text-align: center;
118+
box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
119+
width: 200px;
120+
display: none;
121+
}
122+
123+
.tooltip_block:hover .tooltip {
124+
display: block;
125+
}
126+
127+
.tooltip_icon {
128+
cursor: pointer;
129+
position: absolute;
130+
right: 0;
131+
top: 0;
132+
margin: 1.25rem 1.5rem;
133+
}
134+
107135
#mapcontainer {
108136
border: 0;
109137
border-radius: 6px;
@@ -117,7 +145,7 @@ a.navbar-item:hover {
117145
stroke-width: 0.5px;
118146
}
119147

120-
.tooltip {
148+
.map_tooltip {
121149
position: absolute;
122150
background: #fff;
123151
text-align: center;
@@ -240,6 +268,24 @@ a.navbar-item:hover {
240268
}
241269
}
242270

271+
@media (max-width: 1000px) {
272+
#main {
273+
margin-top: .5rem !important;
274+
flex-wrap: wrap;
275+
display: flex;
276+
}
277+
278+
#main>.tile {
279+
flex-basis: 50%;
280+
}
281+
}
282+
283+
@media (max-width: 550px) {
284+
#main .tile .subtitle.has-text-weight-semibold {
285+
font-size: 16px;
286+
}
287+
}
288+
243289
@media (max-width: 500px) {
244290
.title {
245291
font-size: 20px;
@@ -252,4 +298,26 @@ a.navbar-item:hover {
252298
.notification {
253299
padding: 1rem;
254300
}
301+
302+
.tooltip_icon {
303+
margin: 1rem;
304+
}
305+
306+
.tooltip_block .tooltip {
307+
width: 140px;
308+
}
309+
310+
#main {
311+
padding: 0 0.5rem;
312+
}
313+
314+
#main>.tile {
315+
padding: .25rem;
316+
}
317+
}
318+
319+
@media (max-width: 400px) {
320+
#main .tile .subtitle.has-text-weight-semibold {
321+
font-size: 14px;
322+
}
255323
}

‎src/App.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,18 @@ export interface Data {
2828
"mainnet": number | string
2929
"testnet": number | string
3030
}
31+
"objects": {
32+
"mainnet": number | string
33+
"testnet": number | string
34+
}
35+
"containers_size": {
36+
"mainnet": number | string
37+
"testnet": number | string
38+
}
39+
"capacity": {
40+
"mainnet": number | string
41+
"testnet": number | string
42+
}
3143
"time": number
3244
"gateways": {
3345
"mainnet": string[][]

‎src/Home.tsx‎

Lines changed: 93 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ const Home = ({
113113
<div>${activeNet === 'mainnet' ? 'Mainnet' : 'Testnet'}: ${d.nodes.filter((item: Node) => item.net === net)[0].value} node${d.nodes.filter((item: Node) => item.net === net)[0].value > 1 ? 's' : ''}</div>
114114
`);
115115
tip.transition()
116-
.attr("class", "tooltip")
116+
.attr("class", "map_tooltip")
117117
.style("display", "block");
118118
tip.style("left", window.d3.event.pageX + 5 + "px")
119119
.style("top", window.d3.event.pageY - 25 + "px");
@@ -147,6 +147,21 @@ const Home = ({
147147
return currentTimestamp - dataTimeMs < timeRelevance;
148148
};
149149

150+
function formatBytes(bytes: number): string {
151+
const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
152+
153+
if (bytes === undefined) return '';
154+
let i = 0
155+
for (i; bytes >= 1024; i += 1) {
156+
if (i > 4) {
157+
break;
158+
}
159+
bytes /= 1024;
160+
}
161+
162+
return `${Number.isInteger(bytes) ? bytes : parseFloat(bytes.toFixed(2))} ${units[i]}`;
163+
};
164+
150165
return (
151166
<Container>
152167
{!isLoading ? (
@@ -169,21 +184,93 @@ const Home = ({
169184
>{`• ${statusMsgItem}`}</Heading>
170185
))}
171186
</Tile>
172-
<Tile kind="ancestor" style={{ marginTop: '1.5rem' }} id="main">
187+
<Tile kind="ancestor" style={{ marginTop: '.75rem' }} id="main">
173188
<Tile kind="parent">
174189
<Tile
175190
kind="child"
176191
renderAs={Notification}
177192
color="grey"
178193
>
179194
<Heading subtitle size={6}>
180-
{`Network epoch: `}
181-
<span>{data.network_epoch && data.network_epoch[activeNet]}</span>
195+
Network epoch
196+
<div className="tooltip_block">
197+
<img
198+
className="tooltip_icon"
199+
src="/img/icons/info_circle.svg"
200+
height={18}
201+
width={18}
202+
alt="info"
203+
/>
204+
<div className="tooltip">Epoch number of NeoFS network</div>
205+
</div>
182206
</Heading>
207+
<Heading subtitle weight="semibold">{data.network_epoch && data.network_epoch[activeNet].toLocaleString('ru-RU')}</Heading>
208+
</Tile>
209+
</Tile>
210+
<Tile kind="parent">
211+
<Tile
212+
kind="child"
213+
renderAs={Notification}
214+
color="grey"
215+
>
216+
<Heading subtitle size={6}>
217+
Containers
218+
<div className="tooltip_block">
219+
<img
220+
className="tooltip_icon"
221+
src="/img/icons/info_circle.svg"
222+
height={18}
223+
width={18}
224+
alt="info"
225+
/>
226+
<div className="tooltip">Number of registered containers</div>
227+
</div>
228+
</Heading>
229+
<Heading subtitle weight="semibold">{data.containers && data.containers[activeNet].toLocaleString('ru-RU')}</Heading>
230+
</Tile>
231+
</Tile>
232+
<Tile kind="parent">
233+
<Tile
234+
kind="child"
235+
renderAs={Notification}
236+
color="grey"
237+
>
238+
<Heading subtitle size={6}>
239+
Objects
240+
<div className="tooltip_block">
241+
<img
242+
className="tooltip_icon"
243+
src="/img/icons/info_circle.svg"
244+
height={18}
245+
width={18}
246+
alt="info"
247+
/>
248+
<div className="tooltip">Total number of stored objects (counting all replicas)</div>
249+
</div>
250+
</Heading>
251+
<Heading subtitle weight="semibold">{data.containers && data.containers_objects[activeNet].toLocaleString('ru-RU')}</Heading>
252+
</Tile>
253+
</Tile>
254+
<Tile kind="parent">
255+
<Tile
256+
kind="child"
257+
renderAs={Notification}
258+
color="grey"
259+
>
183260
<Heading subtitle size={6}>
184-
{`Containers: `}
185-
<span>{data.containers && data.containers[activeNet]}</span>
261+
Used capacity
262+
<div className="tooltip_block">
263+
<img
264+
className="tooltip_icon"
265+
src="/img/icons/info_circle.svg"
266+
height={18}
267+
width={18}
268+
alt="info"
269+
/>
270+
<div className="tooltip">Sum of all payload sizes (counting all replicas) / Sum of all nodes capacity</div>
271+
</div>
186272
</Heading>
273+
<Heading subtitle weight="semibold">{`${data.containers && formatBytes(data.containers_size[activeNet])} / ${data.containers && formatBytes(data.capacity[activeNet] * 1024 * 1024 * 1024)}`}</Heading>
187274
</Tile>
188275
</Tile>
189276
</Tile>

0 commit comments

Comments
 (0)