diff options
Diffstat (limited to 'frontend/src/components/panels/StatsPane.jsx')
| -rw-r--r-- | frontend/src/components/panels/StatsPane.jsx | 274 |
1 files changed, 274 insertions, 0 deletions
diff --git a/frontend/src/components/panels/StatsPane.jsx b/frontend/src/components/panels/StatsPane.jsx new file mode 100644 index 0000000..a35ef0c --- /dev/null +++ b/frontend/src/components/panels/StatsPane.jsx @@ -0,0 +1,274 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <http://www.gnu.org/licenses/>. + */ + +import React, {Component} from "react"; +import Table from "react-bootstrap/Table"; +import backend from "../../backend"; +import dispatcher from "../../dispatcher"; +import {formatSize} from "../../utils"; +import ButtonField from "../fields/ButtonField"; +import CopyLinkPopover from "../objects/CopyLinkPopover"; +import LinkPopover from "../objects/LinkPopover"; +import "./common.scss"; +import "./StatsPane.scss"; + +class StatsPane extends Component { + + state = { + rules: [] + }; + + componentDidMount() { + this.loadStats(); + this.loadResourcesStats(); + this.loadRules(); + dispatcher.register("notifications", this.handleNotifications); + document.title = "caronte:~/stats$"; + this.intervalToken = setInterval(() => this.loadResourcesStats(), 3000); + } + + componentWillUnmount() { + dispatcher.unregister(this.handleNotifications); + clearInterval(this.intervalToken); + } + + handleNotifications = (payload) => { + if (payload.event.startsWith("pcap")) { + this.loadStats(); + } else if (payload.event.startsWith("rules")) { + this.loadRules(); + } + }; + + loadStats = () => { + backend.get("/api/statistics/totals") + .then((res) => this.setState({stats: res.json, statsStatusCode: res.status})) + .catch((res) => this.setState({ + stats: res.json, statsStatusCode: res.status, + statsResponse: JSON.stringify(res.json) + })); + }; + + loadResourcesStats = () => { + backend.get("/api/resources/system") + .then((res) => this.setState({resourcesStats: res.json, resourcesStatsStatusCode: res.status})) + .catch((res) => this.setState({ + resourcesStats: res.json, resourcesStatsStatusCode: res.status, + resourcesStatsResponse: JSON.stringify(res.json) + })); + }; + + loadRules = () => { + backend.get("/api/rules").then((res) => this.setState({rules: res.json})); + }; + + render() { + const s = this.state.stats; + const rs = this.state.resourcesStats; + + const ports = s && s["connections_per_service"] ? Object.keys(s["connections_per_service"]) : []; + let connections = 0, clientBytes = 0, serverBytes = 0, totalBytes = 0, duration = 0; + let servicesStats = ports.map((port) => { + connections += s["connections_per_service"][port]; + clientBytes += s["client_bytes_per_service"][port]; + serverBytes += s["server_bytes_per_service"][port]; + totalBytes += s["total_bytes_per_service"][port]; + duration += s["duration_per_service"][port]; + + return <tr key={port} className="row-small row-clickable"> + <td>{port}</td> + <td>{formatSize(s["connections_per_service"][port])}</td> + <td>{formatSize(s["client_bytes_per_service"][port])}B</td> + <td>{formatSize(s["server_bytes_per_service"][port])}B</td> + <td>{formatSize(s["total_bytes_per_service"][port])}B</td> + <td>{formatSize(s["duration_per_service"][port] / 1000)}s</td> + </tr>; + }); + servicesStats.push(<tr key="totals" className="row-small row-clickable font-weight-bold"> + <td>totals</td> + <td>{formatSize(connections)}</td> + <td>{formatSize(clientBytes)}B</td> + <td>{formatSize(serverBytes)}B</td> + <td>{formatSize(totalBytes)}B</td> + <td>{formatSize(duration / 1000)}s</td> + </tr>); + + const rulesStats = this.state.rules.map((r) => + <tr key={r.id} className="row-small row-clickable"> + <td><CopyLinkPopover text={r["id"].substring(0, 8)} value={r["id"]}/></td> + <td>{r["name"]}</td> + <td><ButtonField name={r["color"]} color={r["color"]} small/></td> + <td>{formatSize(s && s["matched_rules"] && s["matched_rules"][r.id] ? s["matched_rules"][r.id] : 0)}</td> + </tr> + ); + + const cpuStats = (rs ? rs["cpu_times"] : []).map((cpu, index) => + <tr key={cpu["cpu"]} className="row-small row-clickable"> + <td>{cpu["cpu"]}</td> + <td>{cpu["user"]}</td> + <td>{cpu["system"]}</td> + <td>{cpu["idle"]}</td> + <td>{cpu["nice"]}</td> + <td>{cpu["iowait"]}</td> + <td>{rs["cpu_percents"][index].toFixed(2)} %</td> + </tr> + ); + + return ( + <div className="pane-container stats-pane"> + <div className="pane-section stats-list"> + <div className="section-header"> + <span className="api-request">GET /api/statistics/totals</span> + <span className="api-response"><LinkPopover text={this.state.statsStatusCode} + content={this.state.statsResponse} + placement="left"/></span> + </div> + + <div className="section-content"> + <div className="section-table"> + <Table borderless size="sm"> + <thead> + <tr> + <th>service</th> + <th>connections</th> + <th>client_bytes</th> + <th>server_bytes</th> + <th>total_bytes</th> + <th>duration</th> + </tr> + </thead> + <tbody> + {servicesStats} + </tbody> + </Table> + </div> + + <div className="section-table"> + <Table borderless size="sm"> + <thead> + <tr> + <th>rule_id</th> + <th>rule_name</th> + <th>rule_color</th> + <th>occurrences</th> + </tr> + </thead> + <tbody> + {rulesStats} + </tbody> + </Table> + </div> + </div> + </div> + + <div className="pane-section stats-list" style={{"paddingTop": "10px"}}> + <div className="section-header"> + <span className="api-request">GET /api/resources/system</span> + <span className="api-response"><LinkPopover text={this.state.resourcesStatsStatusCode} + content={this.state.resourcesStatsResponse} + placement="left"/></span> + </div> + + <div className="section-content"> + <div className="section-table"> + <Table borderless size="sm"> + <thead> + <tr> + <th>type</th> + <th>total</th> + <th>used</th> + <th>free</th> + <th>shared</th> + <th>buff/cache</th> + <th>available</th> + </tr> + </thead> + <tbody> + <tr className="row-small row-clickable"> + <td>mem</td> + <td>{rs && formatSize(rs["virtual_memory"]["total"])}</td> + <td>{rs && formatSize(rs["virtual_memory"]["used"])}</td> + <td>{rs && formatSize(rs["virtual_memory"]["free"])}</td> + <td>{rs && formatSize(rs["virtual_memory"]["shared"])}</td> + <td>{rs && formatSize(rs["virtual_memory"]["cached"])}</td> + <td>{rs && formatSize(rs["virtual_memory"]["available"])}</td> + </tr> + <tr className="row-small row-clickable"> + <td>swap</td> + <td>{rs && formatSize(rs["virtual_memory"]["swaptotal"])}</td> + <td>{rs && formatSize(rs["virtual_memory"]["swaptotal"])}</td> + <td>{rs && formatSize(rs["virtual_memory"]["swapfree"])}</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> + </Table> + </div> + + <div className="section-table"> + <Table borderless size="sm"> + <thead> + <tr> + <th>cpu</th> + <th>user</th> + <th>system</th> + <th>idle</th> + <th>nice</th> + <th>iowait</th> + <th>used_percent</th> + </tr> + </thead> + <tbody> + {cpuStats} + </tbody> + </Table> + </div> + + <div className="section-table"> + <Table borderless size="sm"> + <thead> + <tr> + <th>disk_path</th> + <th>fs_type</th> + <th>total</th> + <th>free</th> + <th>used</th> + <th>used_percent</th> + </tr> + </thead> + <tbody> + <tr className="row-small row-clickable"> + <td>{rs && rs["disk_usage"]["path"]}</td> + <td>{rs && rs["disk_usage"]["fstype"]}</td> + <td>{rs && formatSize(rs["disk_usage"]["total"])}</td> + <td>{rs && formatSize(rs["disk_usage"]["free"])}</td> + <td>{rs && formatSize(rs["disk_usage"]["used"])}</td> + <td>{rs && rs["disk_usage"]["usedPercent"].toFixed(2)} %</td> + </tr> + </tbody> + </Table> + </div> + </div> + </div> + </div> + ); + } + +} + +export default StatsPane; |