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