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
100
101
102
103
104
105
106
107
108
109
110
111
112
|
import React, { useEffect, useState } from "react";
import Pagination from "@mui/material/Pagination";
import ListItem from "./ListItem";
import SearchForm from "./SearchForm";
function ListView(props) {
let [scans, setScans] = useState([]);
let [filter, setFilter] = useState({ field: null, value: null });
let [page, setPage] = useState(1);
let [totalPages, setTotalPages] = useState(1);
useEffect(getData, [filter]);
useEffect(() => {
getData();
window.scrollTo(0, 0);
}, [page]);
function getData() {
function filterString() {
return filter.field == null || filter.value == null
? null
: filter.field + "=" + filter.value;
}
function queryString() {
return [
`limit=${window.injectedEnv.PER_PAGE}`,
`skip=${(page - 1) * window.injectedEnv.PER_PAGE}`,
filterString()
]
.filter(x => x !== null)
.join("&");
}
fetch(
window.injectedEnv.COLLECTOR_URL + "/sc/v0/get?" + queryString(),
{
headers: {
Authorization: "Bearer " + props.token
}
}
)
.then(resp => {
if (resp.status !== 200)
throw new Error(
`Unexpected HTTP response code from soc_collector: ${resp.status} ${resp.statusText}`
);
setTotalPages(parseInt(resp.headers.get("X-Total-Count")));
return resp.json();
})
.then(json => {
setScans(
json.docs.map(d => ({
...d,
timestamp: new Date(d.timestamp)
}))
);
})
.catch(e => props.setError(e.toString()));
}
return (
<div id="list-container">
<div id="controls">
<SearchForm
filter={(field, value) => {
setFilter({ field: field, value: value });
setPage(1);
}}
/>
</div>
<table id="main">
<tbody>
{scans
.sort((a, b) => (a.timestamp > b.timestamp ? 1 : -1))
.map(scan =>
Object.entries(scan.result)
.filter(
([_, res]) =>
res.vulnerable ||
res.investigation_needed
)
.map(([id, res]) => (
<ListItem
key={scan._id + id}
{...scan}
result={res}
/>
))
)
.flat()}
</tbody>
</table>
<div id="pagination">
<Pagination
page={page}
count={totalPages}
onChange={(_, v) => setPage(v)}
variant="outlined"
shape="rounded"
showFirstButton
showLastButton
/>
</div>
</div>
);
}
export default ListView;
|
