Line data Source code
1 : /*
2 : * Copyright (C) 2020 Red Hat, Inc.
3 : * SPDX-License-Identifier: LGPL-2.1-or-later
4 : */
5 :
6 1 : import cockpit from "cockpit";
7 :
8 1 : import React, { useState, useRef, useLayoutEffect } from 'react';
9 : import { useEvent } from "hooks.js";
10 :
11 : import { Button } from "@patternfly/react-core/dist/esm/components/Button/index.js";
12 : import { Dropdown, DropdownItem, DropdownList } from '@patternfly/react-core/dist/esm/components/Dropdown/index.js';
13 : import { Divider } from '@patternfly/react-core/dist/esm/components/Divider/index.js';
14 : import { MenuToggle } from '@patternfly/react-core/dist/esm/components/MenuToggle/index.js';
15 :
16 : import { AngleLeftIcon, AngleRightIcon, SearchMinusIcon } from '@patternfly/react-icons';
17 :
18 : import * as timeformat from "timeformat";
19 : import '@patternfly/patternfly/patternfly-charts.scss';
20 : import "cockpit-components-plot.scss";
21 :
22 1 : const _ = cockpit.gettext;
23 :
24 1 : function time_ticks(data) {
25 1 : const first_plot = data[0].data;
26 1 : const start_ms = first_plot[0][0];
27 1 : const end_ms = first_plot[first_plot.length - 1][0];
28 :
29 : // Determine size between ticks
30 :
31 1 : const sizes_in_seconds = [
32 1 : 60, // minute
33 1 : 5 * 60, // 5 minutes
34 1 : 10 * 60, // 10 minutes
35 1 : 30 * 60, // half hour
36 1 : 60 * 60, // hour
37 1 : 6 * 60 * 60, // quarter day
38 1 : 12 * 60 * 60, // half day
39 1 : 24 * 60 * 60, // day
40 1 : 7 * 24 * 60 * 60, // week
41 1 : 30 * 24 * 60 * 60, // month
42 1 : 183 * 24 * 60 * 60, // half a year
43 1 : 365 * 24 * 60 * 60, // year
44 1 : 10 * 365 * 24 * 60 * 60 // 10 years
45 1 : ];
46 :
47 1 : let size;
48 1 : for (let i = 0; i < sizes_in_seconds.length; i++) {
49 0 : if (((end_ms - start_ms) / 1000) / sizes_in_seconds[i] < 10 || i == sizes_in_seconds.length - 1) {
50 1 : size = sizes_in_seconds[i] * 1000;
51 1 : break;
52 1 : }
53 1 : }
54 :
55 : // Determine what to omit from the tick label. If it's all in the
56 : // current year, we don't need to include the year; and if it's
57 : // all happening today, we don't include the month and date.
58 :
59 1 : const now_date = new Date();
60 1 : const start_date = new Date(start_ms);
61 :
62 1 : let include_year = true;
63 1 : let include_month_and_day = true;
64 :
65 1 : if (start_date.getFullYear() == now_date.getFullYear()) {
66 1 : include_year = false;
67 1 : if (start_date.getMonth() == now_date.getMonth() && start_date.getDate() == now_date.getDate())
68 1 : include_month_and_day = false;
69 1 : }
70 :
71 : // Compute the actual ticks
72 :
73 1 : const ticks = [];
74 1 : let t = Math.ceil(start_ms / size) * size;
75 1 : while (t < end_ms) {
76 1 : ticks.push(t);
77 1 : t += size;
78 1 : }
79 :
80 : // Render the label
81 :
82 1 : function pad(n) {
83 1 : let str = n.toFixed();
84 1 : if (str.length == 1)
85 1 : str = '0' + str;
86 1 : return str;
87 1 : }
88 :
89 1 : function format_tick(val, index, ticks) {
90 1 : const d = new Date(val);
91 1 : let label = ' ';
92 :
93 0 : if (include_month_and_day) {
94 0 : if (include_year)
95 0 : label += timeformat.date(d) + '\n';
96 : else
97 0 : label += timeformat.formatter({ month: "long" }).format(d) + ' ' + d.getDate().toFixed() + '\n';
98 0 : }
99 1 : label += pad(d.getHours()) + ':' + pad(d.getMinutes());
100 :
101 1 : return label;
102 1 : }
103 :
104 1 : return {
105 1 : ticks,
106 1 : formatter: format_tick,
107 1 : start: start_ms,
108 1 : end: end_ms
109 1 : };
110 1 : }
111 :
112 1 : function value_ticks(data, config) {
113 1 : let max = config.min_max;
114 1 : const last_plot = data[data.length - 1].data;
115 1 : for (let i = 0; i < last_plot.length; i++) {
116 1 : const s = last_plot[i][1] || last_plot[i][2];
117 1 : if (s > max)
118 0 : max = s;
119 1 : }
120 :
121 : // Find the highest power of the base unit that is still below
122 : // MAX.
123 : //
124 : // For example, if the base unit is 1000 and MAX is 402,345,765
125 : // this will set UNIT to 1,000,000, aka "Mega".
126 : //
127 1 : let unit = 1;
128 1 : while (config.base_unit && max > unit * config.base_unit)
129 1 : unit *= config.base_unit;
130 :
131 : // Find the highest power of 10 that is below the maximum number
132 : // on a tick label. If we use that as the distance between ticks,
133 : // we get at most 10 ticks.
134 : //
135 : // To continue the example, MAX is 402,345,765 and UNIT is thus
136 : // 1,000,000. The highest number on a tick label would be MAX /
137 : // UNIT = 402ish. The highest power of 10 below that is 100. Thus
138 : // the size between ticks is 100*UNIT = 100,000,000. Ticks would
139 : // thus be "100 Mega" apart.
140 : //
141 : // If the highest number of would be only, say, 81, then we would get
142 : // a highest power of 10, and ticks would be 10 units apart.
143 : //
144 1 : let size = Math.pow(10, Math.floor(Math.log10(max / unit))) * unit;
145 :
146 : // Get the number of ticks to be around 4, but don't produce
147 : // fractional numbers. This is done by doubling or halving the
148 : // size between ticks until we get MAX / SIZE to be less than 8 or
149 : // greater than 2.
150 : //
151 : // In the example, MAX / SIZE is already in range, so nothing
152 : // changes here.
153 : //
154 : // If MAX / UNIT is close to the next power of ten, such as 999, we
155 : // would end up with a doubled SIZE of 200,000,000.
156 : //
157 : // If on the other hand MAX / UNIT would be closer to the next
158 : // lower power of 10, like say 110, then we would half the SIZE to
159 : // get moreticks. With 110, it will happen twice and SIZE ends up
160 : // being 25,000,000.
161 : //
162 : // However, if we only have single digit tick labels, we don't
163 : // want to halve them any further, since we don't want tick labels
164 : // like "0.75".
165 : //
166 1 : while (max / size > 7)
167 0 : size *= 2;
168 1 : while (max / size < 3 && size / unit >= 10)
169 1 : size /= 2;
170 :
171 : // Make a list of tick values, each SIZE apart until we are just
172 : // above MAX.
173 : //
174 : // In the example, we get
175 : //
176 : // [ 0, 100000000, 200000000, 300000000, 400000000, 500000000 ]
177 : //
178 1 : const ticks = [];
179 1 : for (let t = 0; t < max + size; t += size)
180 1 : ticks.push(t);
181 :
182 1 : if (config.pull_out_unit) {
183 1 : const unit_str = config.formatter(unit, config.base_unit, true)[1];
184 :
185 1 : return {
186 1 : ticks,
187 1 : formatter: (val) => config.formatter(val, unit_str, true)[0],
188 1 : unit: unit_str,
189 1 : max: ticks[ticks.length - 1]
190 1 : };
191 0 : } else {
192 0 : return {
193 0 : ticks,
194 0 : formatter: config.formatter,
195 0 : max: ticks[ticks.length - 1]
196 0 : };
197 0 : }
198 1 : }
199 :
200 1 : export const ZoomControls = ({ plot_state }) => {
201 0 : function format_range(seconds) {
202 0 : let n;
203 0 : if (seconds >= 365 * 24 * 60 * 60) {
204 0 : n = Math.ceil(seconds / (365 * 24 * 60 * 60));
205 0 : return cockpit.format(cockpit.ngettext("$0 year", "$0 years", n), n);
206 0 : } else if (seconds >= 30 * 24 * 60 * 60) {
207 0 : n = Math.ceil(seconds / (30 * 24 * 60 * 60));
208 0 : return cockpit.format(cockpit.ngettext("$0 month", "$0 months", n), n);
209 0 : } else if (seconds >= 7 * 24 * 60 * 60) {
210 0 : n = Math.ceil(seconds / (7 * 24 * 60 * 60));
211 0 : return cockpit.format(cockpit.ngettext("$0 week", "$0 weeks", n), n);
212 0 : } else if (seconds >= 24 * 60 * 60) {
213 0 : n = Math.ceil(seconds / (24 * 60 * 60));
214 0 : return cockpit.format(cockpit.ngettext("$0 day", "$0 days", n), n);
215 0 : } else if (seconds >= 60 * 60) {
216 0 : n = Math.ceil(seconds / (60 * 60));
217 0 : return cockpit.format(cockpit.ngettext("$0 hour", "$0 hours", n), n);
218 0 : } else {
219 0 : n = Math.ceil(seconds / 60);
220 0 : return cockpit.format(cockpit.ngettext("$0 minute", "$0 minutes", n), n);
221 0 : }
222 0 : }
223 :
224 1 : const zoom_state = plot_state.zoom_state;
225 :
226 1 : const [isOpen, setIsOpen] = useState(false);
227 1 : useEvent(plot_state, "changed");
228 1 : useEvent(zoom_state, "changed");
229 :
230 0 : function range_item(seconds, title) {
231 0 : return (
232 0 : <DropdownItem key={title}
233 0 : onClick={() => {
234 0 : setIsOpen(false);
235 0 : zoom_state.set_range(seconds);
236 0 : }}>
237 0 : {title}
238 0 : </DropdownItem>
239 : );
240 0 : }
241 :
242 1 : if (!zoom_state)
243 1 : return null;
244 :
245 0 : const dropdownItems = [
246 0 : <DropdownItem key="now" onClick={() => { zoom_state.goto_now(); setIsOpen(false) }}>
247 0 : {_("Go to now")}
248 0 : </DropdownItem>,
249 0 : <Divider key="sep" />,
250 0 : range_item(5 * 60, _("5 minutes")),
251 0 : range_item(60 * 60, _("1 hour")),
252 0 : range_item(6 * 60 * 60, _("6 hours")),
253 0 : range_item(24 * 60 * 60, _("1 day")),
254 0 : range_item(7 * 24 * 60 * 60, _("1 week"))
255 0 : ];
256 :
257 0 : return (
258 0 : <div id="zoom-control">
259 0 : <Dropdown
260 0 : isOpen={isOpen}
261 0 : toggle={(toggleRef) => (
262 0 : <MenuToggle ref={toggleRef} onClick={() => setIsOpen(!isOpen)} isExpanded={isOpen}>
263 0 : {format_range(zoom_state.x_range)}
264 0 : </MenuToggle>
265 : )}
266 : >
267 0 : <DropdownList>
268 0 : {dropdownItems}
269 0 : </DropdownList>
270 0 : </Dropdown>
271 0 : { "\n" }
272 0 : <Button icon={<SearchMinusIcon />} variant="secondary" onClick={() => zoom_state.zoom_out()}
273 0 : isDisabled={!zoom_state.enable_zoom_out} />
274 0 : { "\n" }
275 0 : <Button icon={<AngleLeftIcon />} variant="secondary" onClick={() => zoom_state.scroll_left()}
276 0 : isDisabled={!zoom_state.enable_scroll_left} />
277 0 : <Button icon={<AngleRightIcon />} variant="secondary" onClick={() => zoom_state.scroll_right()}
278 0 : isDisabled={!zoom_state.enable_scroll_right} />
279 0 : </div>
280 : );
281 1 : };
282 :
283 1 : const useLayoutSize = (init_width, init_height) => {
284 1 : const ref = useRef(null);
285 1 : const [size, setSize] = useState({ width: init_width, height: init_height });
286 : /* eslint-disable react-hooks/exhaustive-deps */
287 1 : useLayoutEffect(() => {
288 1 : if (ref.current) {
289 1 : const rect = ref.current.getBoundingClientRect();
290 : // Some browsers, such as Bromite, add noise to the result
291 : // of getBoundingClientRect in order to deter
292 : // fingerprinting. Let's allow for that by only reacting
293 : // to significant changes.
294 1 : if (Math.abs(rect.width - size.width) > 2 || Math.abs(rect.height - size.height) > 2)
295 1 : setSize({ width: rect.width, height: rect.height });
296 1 : }
297 1 : });
298 : /* eslint-enable */
299 1 : return [ref, size];
300 1 : };
301 :
302 1 : export const SvgPlot = ({ title, config, plot_state, plot_id, className }) => {
303 1 : const [container_ref, container_size] = useLayoutSize(0, 0);
304 1 : const [measure_ref, measure_size] = useLayoutSize(36, 20);
305 :
306 1 : useEvent(plot_state, "plot:" + plot_id);
307 1 : useEvent(plot_state, "changed");
308 1 : useEvent(window, "resize");
309 :
310 1 : const [selection, setSelection] = useState(null);
311 :
312 1 : const chart_data = plot_state.data(plot_id);
313 1 : if (!chart_data || chart_data.length == 0)
314 0 : return null;
315 :
316 1 : const t_ticks = time_ticks(chart_data);
317 1 : const y_ticks = value_ticks(chart_data, config);
318 :
319 1 : function make_chart() {
320 1 : const w = container_size.width;
321 1 : const h = container_size.height;
322 :
323 1 : if (w == 0 || h == 0)
324 1 : return null;
325 :
326 1 : const x_off = t_ticks.start;
327 1 : const x_range = (t_ticks.end - t_ticks.start);
328 1 : const y_range = y_ticks.max;
329 :
330 1 : const tick_length = 5;
331 1 : const tick_gap = 3;
332 :
333 : // widest string plus gap plus tick
334 1 : const m_left = Math.ceil(measure_size.width) + tick_gap + tick_length;
335 :
336 : // half of the time label so that it pops in fully formed at the far right edge
337 1 : const m_right = 30;
338 :
339 : // half a line for the top-half of the top-most y-axis label
340 : // plus one extra line if there is a unit or a title.
341 0 : const m_top = (y_ticks.unit || title ? 1.5 : 0.5) * Math.ceil(measure_size.height);
342 :
343 : // x-axis labels can be up to two lines
344 1 : const m_bottom = tick_length + tick_gap + 2 * Math.ceil(measure_size.height);
345 :
346 1 : function x_coord(x) {
347 1 : return (x - x_off) / x_range * (w - m_left - m_right) + m_left;
348 1 : }
349 :
350 0 : function x_value(c) {
351 0 : return (c - m_left) / (w - m_left - m_right) * x_range + x_off;
352 0 : }
353 :
354 1 : function y_coord(y) {
355 1 : return h - Math.max(y, 0) / y_range * (h - m_top - m_bottom) - m_bottom;
356 1 : }
357 :
358 1 : function cmd(op, x, y) {
359 1 : return op + x.toFixed() + "," + y.toFixed() + " ";
360 1 : }
361 :
362 1 : function path(data, hover_arg) {
363 1 : let d = cmd("M", m_left, h - m_bottom);
364 1 : for (let i = 0; i < data.length; i++) {
365 1 : d += cmd("L", x_coord(data[i][0]), y_coord(data[i][1]));
366 1 : }
367 1 : d += cmd("L", w - m_right, h - m_bottom);
368 1 : d += "z";
369 :
370 1 : return (
371 1 : <path key={hover_arg} d={d}
372 1 : role="presentation">
373 1 : <title>{hover_arg}</title>
374 1 : </path>
375 : );
376 1 : }
377 :
378 1 : const paths = [];
379 1 : for (let i = chart_data.length - 1; i >= 0; i--)
380 0 : paths.push(path(chart_data[i].data, chart_data[i].name || true));
381 :
382 0 : function start_dragging(event) {
383 0 : if (event.button !== 0)
384 0 : return;
385 :
386 0 : const bounds = container_ref.current.getBoundingClientRect();
387 0 : const x = event.clientX - bounds.x;
388 0 : if (x >= m_left && x < w - m_right)
389 0 : setSelection({ start: x, stop: x, left: x, right: x });
390 0 : }
391 :
392 0 : function drag(event) {
393 0 : const bounds = container_ref.current.getBoundingClientRect();
394 0 : let x = event.clientX - bounds.x;
395 0 : if (x < m_left) x = m_left;
396 0 : if (x > w - m_right) x = w - m_right;
397 0 : setSelection({
398 0 : start: selection.start,
399 0 : stop: x,
400 0 : left: Math.min(selection.start, x),
401 0 : right: Math.max(selection.start, x)
402 0 : });
403 0 : }
404 :
405 0 : function stop_dragging() {
406 0 : const left = x_value(selection.left) / 1000;
407 0 : const right = x_value(selection.right) / 1000;
408 0 : plot_state.zoom_state.zoom_in(right - left, right);
409 0 : setSelection(null);
410 0 : }
411 :
412 1 : function cancel_dragging() {
413 1 : setSelection(null);
414 1 : }
415 :
416 : // This is a thin transparent rectangle placed at the x-axis,
417 : // on top of all the graphs. It prevents bogus hover events
418 : // for parts of the graph that are zero or very very close to
419 : // it.
420 1 : const hover_guard =
421 1 : <rect x={0} y={h - m_bottom - 1} width={w} height={5} fill="transparent" />;
422 :
423 1 : return (
424 1 : <svg width={w} height={h}
425 1 : className="ct-plot"
426 1 : aria-label={title}
427 : // TODO: Figure out a way to handle a11y without entirely hiding the live-updating graphs
428 1 : aria-hidden="true"
429 1 : role="img"
430 0 : onMouseDown={plot_state.zoom_state?.enable_zoom_in ? start_dragging : null}
431 0 : onMouseUp={selection ? stop_dragging : null}
432 0 : onMouseMove={selection ? drag : null}
433 1 : onMouseLeave={cancel_dragging}>
434 1 : <title>{title}</title>
435 1 : <text x={0} y={-20} className="ct-plot-widest" ref={measure_ref} aria-hidden="true">{config.widest_string}</text>
436 1 : <rect x={m_left} y={m_top} width={w - m_left - m_right} height={h - m_top - m_bottom}
437 1 : className="ct-plot-border" />
438 1 : { y_ticks.unit && <text x={m_left - tick_length - tick_gap} y={0.5 * m_top}
439 1 : className="ct-plot-unit"
440 1 : textAnchor="end">
441 1 : {y_ticks.unit}
442 1 : </text>
443 : }
444 1 : { title && <text x={m_left} y={0.5 * m_top} className="ct-plot-title">
445 1 : {title}
446 1 : </text>
447 : }
448 1 : <g className="ct-plot-lines" role="presentation">
449 1 : { y_ticks.ticks.map((t, i) => <line key={i}
450 1 : x1={m_left - tick_length} x2={w - m_right}
451 1 : y1={y_coord(t)} y2={y_coord(t)} />) }
452 1 : </g>
453 1 : <g className="ct-plot-ticks" role="presentation">
454 1 : { t_ticks.ticks.map((t, i) => <line key={i}
455 1 : x1={x_coord(t)} x2={x_coord(t)}
456 1 : y1={h - m_bottom} y2={h - m_bottom + tick_length} />) }
457 1 : </g>
458 1 : <g className="ct-plot-paths">
459 1 : { paths }
460 1 : </g>
461 1 : { hover_guard }
462 1 : <g className="ct-plot-axis ct-plot-axis-y" textAnchor="end">
463 1 : { y_ticks.ticks.map((t, i) => <text key={i} x={m_left - tick_length - tick_gap} y={y_coord(t) + 5}>
464 1 : {y_ticks.formatter(t)}
465 1 : </text>) }
466 1 : </g>
467 1 : <g className="ct-plot-axis ct-plot-axis-x" textAnchor="middle">
468 1 : { t_ticks.ticks.map((t, i) => <text key={i} y={h - m_bottom + tick_length + tick_gap}>
469 1 : { t_ticks.formatter(t).split("\n")
470 1 : .map((s, j) =>
471 1 : <tspan key={i + "." + j} x={x_coord(t)} dy="1.2em">{s}</tspan>) }
472 1 : </text>) }
473 1 : </g>
474 1 : { selection &&
475 0 : <rect x={selection.left} y={m_top} width={selection.right - selection.left} height={h - m_top - m_bottom}
476 0 : className="ct-plot-selection" /> }
477 1 : </svg>
478 : );
479 1 : }
480 :
481 1 : return (
482 1 : <div className={className} ref={container_ref}>
483 1 : {make_chart()}
484 1 : </div>);
485 1 : };
486 :
487 1 : export const bytes_config = {
488 1 : base_unit: 1024,
489 1 : min_max: 10240,
490 1 : pull_out_unit: true,
491 1 : widest_string: "MiB",
492 1 : formatter: cockpit.format_bytes
493 1 : };
494 :
495 1 : export const bytes_per_sec_config = {
496 1 : base_unit: 1024,
497 1 : min_max: 10240,
498 1 : pull_out_unit: true,
499 1 : widest_string: "MiB/s",
500 1 : formatter: cockpit.format_bytes_per_sec
501 1 : };
502 :
503 1 : export const bits_per_sec_config = {
504 1 : base_unit: 1000,
505 1 : min_max: 10000,
506 1 : pull_out_unit: true,
507 1 : widest_string: "Mbps",
508 1 : formatter: cockpit.format_bits_per_sec
509 1 : };
|
