Line data Source code
1 : /*
2 : * Copyright (C) 2019 Red Hat, Inc.
3 : * SPDX-License-Identifier: LGPL-2.1-or-later
4 : */
5 36 : import React from 'react';
6 : import { Button } from "@patternfly/react-core/dist/esm/components/Button/index.js";
7 : import { Card, CardBody, CardFooter, CardTitle } from "@patternfly/react-core/dist/esm/components/Card/index.js";
8 : import { Progress, ProgressMeasureLocation, ProgressVariant } from "@patternfly/react-core/dist/esm/components/Progress/index.js";
9 :
10 : import * as machine_info from "machine-info.js";
11 36 : import cockpit from "cockpit";
12 :
13 : import "./usageCard.scss";
14 :
15 36 : const _ = cockpit.gettext;
16 :
17 36 : const METRICS_SPEC = {
18 36 : payload: "metrics1",
19 36 : source: "internal",
20 36 : interval: 3000,
21 36 : metrics: [
22 36 : { name: "cpu.basic.user", derive: "rate" },
23 36 : { name: "cpu.basic.system", derive: "rate" },
24 36 : { name: "cpu.basic.nice", derive: "rate" },
25 36 : { name: "memory.used" },
26 36 : ]
27 36 : };
28 :
29 36 : export class UsageCard extends React.Component {
30 36 : constructor(props) {
31 36 : super(props);
32 :
33 36 : this.metrics_channel = null;
34 36 : this.samples = [];
35 :
36 36 : this.state = {
37 36 : memTotal: 0, // bytes
38 36 : memUsed: 0, // bytes
39 36 : memUsedText: " ",
40 36 : numCpu: 1, // number
41 36 : cpuUsed: 0, // percentage
42 36 : };
43 :
44 36 : this.onVisibilityChange = this.onVisibilityChange.bind(this);
45 36 : this.onMetricsUpdate = this.onMetricsUpdate.bind(this);
46 36 : }
47 :
48 36 : componentDidMount() {
49 36 : machine_info.cpu_ram_info()
50 33 : .then(info => this.setState({
51 33 : memTotal: info.memory,
52 33 : numCpu: info.cpus,
53 33 : }));
54 36 : cockpit.addEventListener("visibilitychange", this.onVisibilityChange);
55 36 : this.onVisibilityChange();
56 36 : }
57 :
58 0 : componentWillUnmount() {
59 0 : cockpit.removeEventListener("visibilitychange", this.onVisibilityChange);
60 0 : }
61 :
62 45 : onVisibilityChange() {
63 19 : if (cockpit.hidden && this.metrics_channel !== null) {
64 19 : this.metrics_channel.removeEventListener("message", this.onMetricsUpdate);
65 19 : this.metrics_channel.close();
66 19 : this.metrics_channel = null;
67 19 : return;
68 19 : }
69 :
70 43 : if (!cockpit.hidden && this.metrics_channel === null) {
71 43 : this.metrics_channel = cockpit.channel(METRICS_SPEC);
72 0 : this.metrics_channel.addEventListener("closed", (ev, error) => console.error("metrics closed:", error));
73 43 : this.metrics_channel.addEventListener("message", this.onMetricsUpdate);
74 43 : }
75 45 : }
76 :
77 32 : onMetricsUpdate(event, message) {
78 32 : const data = JSON.parse(message);
79 :
80 : // reset state on meta messages
81 32 : if (!Array.isArray(data)) {
82 32 : this.samples = [];
83 32 : return;
84 32 : }
85 :
86 : // decompress
87 32 : data.forEach(samples => {
88 32 : samples.forEach((sample, i) => {
89 32 : if (sample !== null)
90 32 : this.samples[i] = sample;
91 32 : });
92 32 : });
93 :
94 : // CPU metrics are in ms/s; divide by 10 to get percentage
95 15 : if (this.samples[0] !== false) {
96 15 : const cpu = Math.round((this.samples[0] + this.samples[1] + this.samples[2]) / 10 / this.state.numCpu);
97 15 : this.setState({ cpuUsed: cpu });
98 15 : }
99 :
100 32 : let used_text;
101 16 : if (this.state.memTotal) {
102 16 : const [total_fmt, unit] = cockpit.format_bytes(this.state.memTotal, { base2: true, separate: true, precision: 2 });
103 : // FIXME: passing explicit unit is deprecated, redesign this
104 16 : const used_fmt = cockpit.format_bytes(this.samples[3], unit, { separate: true, precision: 2 })[0];
105 16 : used_text = cockpit.format("$0 / $1 $2", used_fmt, total_fmt, unit);
106 16 : } else {
107 32 : used_text = " ";
108 32 : }
109 :
110 32 : this.setState({ memUsed: this.samples[3], memUsedText: used_text });
111 32 : }
112 :
113 36 : render() {
114 33 : const fraction = this.state.memTotal ? this.state.memUsed / this.state.memTotal : 0;
115 36 : const cores_str = cockpit.format(cockpit.ngettext("of $0 CPU", "of $0 CPUs", this.state.numCpu), this.state.numCpu);
116 :
117 36 : return (
118 36 : <Card className="system-usage">
119 36 : <CardTitle>{_("Usage")}</CardTitle>
120 36 : <CardBody>
121 36 : <table className="pf-v6-c-table pf-m-grid-md pf-m-compact">
122 36 : <tbody className="pf-v6-c-table__tbody">
123 36 : <tr className="pf-v6-c-table__tr">
124 36 : <th className="pf-v6-c-table__th" id="system-usage-cpu-progress" scope="row">{_("CPU")}</th>
125 36 : <td className="pf-v6-c-table__td">
126 36 : <Progress value={this.state.cpuUsed}
127 36 : className="pf-m-sm"
128 36 : min={0} max={100}
129 8 : variant={ this.state.cpuUsed > 90 ? ProgressVariant.danger : undefined }
130 36 : label={ this.state.cpuUsed + '% ' + cores_str }
131 36 : aria-labelledby="system-usage-cpu-progress"
132 36 : measureLocation={ProgressMeasureLocation.outside} />
133 36 : </td>
134 36 : </tr>
135 36 : <tr className="pf-v6-c-table__tr">
136 36 : <th className="pf-v6-c-table__th" id="system-usage-memory-progress" scope="row">{_("Memory")}</th>
137 36 : <td className="pf-v6-c-table__td">
138 36 : <Progress value={this.state.memUsed}
139 36 : className="pf-m-sm"
140 36 : min={0} max={this.state.memTotal}
141 6 : variant={fraction > 0.9 ? ProgressVariant.danger : undefined}
142 36 : aria-labelledby="system-usage-memory-progress"
143 36 : label={this.state.memUsedText}
144 36 : measureLocation={ProgressMeasureLocation.outside} />
145 36 : </td>
146 36 : </tr>
147 36 : </tbody>
148 36 : </table>
149 36 : </CardBody>
150 36 : <CardFooter>
151 0 : <Button isInline variant="link" component="a" onClick={ev => { ev.preventDefault(); cockpit.jump("/metrics", cockpit.transport.host) }}>
152 36 : {_("View metrics and history")}
153 36 : </Button>
154 36 : </CardFooter>
155 36 : </Card>
156 : );
157 36 : }
158 36 : }
|
