-
Notifications
You must be signed in to change notification settings - Fork 31
/
html-table.tmpl
130 lines (116 loc) · 3.04 KB
/
html-table.tmpl
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="ISO-8859-1">
<title>Grype analysis</title>
<!-- Based on work by Rene Greuel - See https://github.com/anchore/grype/issues/724#issuecomment-1139563814 -->
<script>
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who do not match the search query
for (i = 1; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td");
for (j = 0; j < td.length; j++) {
var tdata = td[j];
if (tdata) {
if (tdata.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
break;
} else {
tr[i].style.display = "none";
}
}
}
}
}
</script>
<style type="text/css">
* {
font-family:
Lato,
proxima-nova,
Helvetica Neue,
Arial,
sans-serif;
box-sizing: border-box;
}
table,
th,
td {
border: 1px solid black;
}
tr:first-child {
font-weight: bold;
}
tr:nth-child(even) {
background-color: #ffffff;
}
tr:nth-child(odd) {
background-color: #eeeeee;
}
#myInput {
width: 94%;
font-size: 16px;
padding: 8px 20px 8px 40px;
border: 2px solid #f77500;
margin-bottom: 18px;
}
#myTable {
border-collapse: collapse;
border: 1px solid #ddd;
width: 100%;
margin-top: 18px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr:first-child:hover,
#myTable tr:hover {
background-color: #fee4cd;
}
#myTable tr:first-child {
background-color: #bbbbbb;
font-weight: bold;
}
</style>
</head>
<body>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search in all Fields...."
title="Type in a Search String" autofocus="autofocus">
<table id="myTable">
<caption>Identified vulnerabilities</caption>
<tr>
<th>NAME</th>
<th>INSTALLED</th>
<th>TYPE</th>
<th>VULNERABILITY</th>
<th>SEVERITY</th>
<th>DESCRIPTION</th>
<th>STATE</th>
<th>FIXED IN</th>
</tr>
{{- range .Matches}}
<tr>
<td>"{{.Artifact.Name}}"</td>
<td>"{{.Artifact.Version}}"</td>
<td>"{{.Artifact.Type}}"</td>
<td><a href = "https://nvd.nist.gov/vuln/detail/{{.Vulnerability.ID}}">{{.Vulnerability.ID}}</a></td>
<td>"{{.Vulnerability.Severity}}"</td>
<td>"{{.Vulnerability.Description}}"</td>
<td>"{{.Vulnerability.Fix.State}}"</td>
<td>"{{.Vulnerability.Fix.Versions}}"</td>
</tr>
{{- end}}
</table>
</body>
</html>