1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
import React, {Component} from 'react';
import './Services.scss';
import {Button, Col, Container, Modal, Row, Table} from "react-bootstrap";
import {filtersDefinitions, filtersNames} from "../components/filters/FiltersDefinitions";
class Filters extends Component {
constructor(props) {
super(props);
let newState = {};
filtersNames.forEach(elem => newState[`${elem}_active`] = false);
this.state = newState;
}
componentDidMount() {
let newState = {};
filtersNames.forEach(elem => newState[`${elem}_active`] = localStorage.getItem(`filters.${elem}`) === "true");
this.setState(newState);
}
checkboxChangesHandler(filterName, event) {
this.setState({[`${filterName}_active`]: event.target.checked});
localStorage.setItem(`filters.${filterName}`, event.target.checked);
if (typeof window !== "undefined") {
window.dispatchEvent(new Event("quick-filters"));
}
}
generateRows(filtersNames) {
return filtersNames.map(name =>
<tr key={name}>
<td><input type="checkbox"
checked={this.state[`${name}_active`]}
onChange={event => this.checkboxChangesHandler(name, event)} /></td>
<td>{filtersDefinitions[name]}</td>
</tr>
);
}
render() {
return (
<Modal
{...this.props}
show="true"
size="lg"
aria-labelledby="filters-dialog"
centered
>
<Modal.Header>
<Modal.Title id="filters-dialog">
~/filters
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Container>
<Row>
<Col md={6}>
<Table borderless size="sm" className="filters-table">
<thead>
<tr>
<th>show</th>
<th>filter</th>
</tr>
</thead>
<tbody>
{this.generateRows(["service_port", "client_address", "min_duration",
"min_bytes", "started_after", "closed_after", "marked"])}
</tbody>
</Table>
</Col>
<Col md={6}>
<Table borderless size="sm" className="filters-table">
<thead>
<tr>
<th>show</th>
<th>filter</th>
</tr>
</thead>
<tbody>
{this.generateRows(["matched_rules", "client_port", "max_duration",
"max_bytes", "started_before", "closed_before", "hidden"])}
</tbody>
</Table>
</Col>
</Row>
</Container>
</Modal.Body>
<Modal.Footer className="dialog-footer">
<Button variant="red" onClick={this.props.onHide}>close</Button>
</Modal.Footer>
</Modal>
);
}
}
export default Filters;
|
