update templates
This commit is contained in:
jgsqware
parent
d78cb4356d
commit
b3d7eb7060
1
.gitignore
vendored
1
.gitignore
vendored
@ -1 +1,2 @@
|
||||
**/.vscode
|
||||
/cmd/clairctl/reports
|
||||
|
||||
@ -19,27 +19,34 @@ var Report ReportConfig
|
||||
|
||||
//VulnerabiliesCounts Total count of vulnerabilities
|
||||
type VulnerabiliesCounts struct {
|
||||
Total int
|
||||
High int
|
||||
Medium int
|
||||
Low int
|
||||
Negligible int
|
||||
Total int
|
||||
Unknown, Negligible, Low, Medium, High, Critical, Defcon1 int
|
||||
}
|
||||
|
||||
//RelativeCount get the percentage of vulnerabilities of a severity
|
||||
func (vulnerabilityCount VulnerabiliesCounts) RelativeCount(severity string) float64 {
|
||||
var count int
|
||||
|
||||
switch severity {
|
||||
switch strings.TrimSpace(severity) {
|
||||
case "Defcon1":
|
||||
count = vulnerabilityCount.Defcon1
|
||||
case "Critical":
|
||||
count = vulnerabilityCount.Critical
|
||||
case "High":
|
||||
count = vulnerabilityCount.High
|
||||
case "Medium":
|
||||
count = vulnerabilityCount.Medium
|
||||
case "Low":
|
||||
count = vulnerabilityCount.Low
|
||||
case "Negligible":
|
||||
count = vulnerabilityCount.Negligible
|
||||
case "Unknown":
|
||||
count = vulnerabilityCount.Unknown
|
||||
|
||||
}
|
||||
|
||||
return math.Ceil(float64(count)/float64(vulnerabilityCount.Total)*100*100) / 100
|
||||
result := float64(count) / float64(vulnerabilityCount.Total) * 100
|
||||
return math.Ceil(result*100) / 100
|
||||
}
|
||||
|
||||
//ImageAnalysis Full image analysis
|
||||
@ -71,25 +78,36 @@ func (imageAnalysis ImageAnalysis) CountVulnerabilities(l v1.Layer) int {
|
||||
func (imageAnalysis ImageAnalysis) CountAllVulnerabilities() VulnerabiliesCounts {
|
||||
var result VulnerabiliesCounts
|
||||
result.Total = 0
|
||||
result.Defcon1 = 0
|
||||
result.Critical = 0
|
||||
result.High = 0
|
||||
result.Medium = 0
|
||||
result.Low = 0
|
||||
result.Negligible = 0
|
||||
result.Unknown = 0
|
||||
|
||||
for _, l := range imageAnalysis.Layers {
|
||||
for _, f := range l.Layer.Features {
|
||||
result.Total += len(f.Vulnerabilities)
|
||||
for _, v := range f.Vulnerabilities {
|
||||
switch v.Severity {
|
||||
case "High":
|
||||
result.High++
|
||||
case "Medium":
|
||||
result.Medium++
|
||||
case "Low":
|
||||
result.Low++
|
||||
case "Negligible":
|
||||
result.Negligible++
|
||||
}
|
||||
l := imageAnalysis.Layers[len(imageAnalysis.Layers)-1]
|
||||
|
||||
for _, f := range l.Layer.Features {
|
||||
|
||||
result.Total += len(f.Vulnerabilities)
|
||||
|
||||
for _, v := range f.Vulnerabilities {
|
||||
switch v.Severity {
|
||||
case "Defcon1":
|
||||
result.Defcon1++
|
||||
case "Critical":
|
||||
result.Critical++
|
||||
case "High":
|
||||
result.High++
|
||||
case "Medium":
|
||||
result.Medium++
|
||||
case "Low":
|
||||
result.Low++
|
||||
case "Negligible":
|
||||
result.Negligible++
|
||||
case "Unknown":
|
||||
result.Unknown++
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -107,13 +125,19 @@ func (v Vulnerability) Weight() int {
|
||||
weight := 0
|
||||
|
||||
switch v.Severity {
|
||||
case "Defcon1":
|
||||
weight = 7
|
||||
case "Critical":
|
||||
weight = 6
|
||||
case "High":
|
||||
weight = 4
|
||||
weight = 5
|
||||
case "Medium":
|
||||
weight = 3
|
||||
weight = 4
|
||||
case "Low":
|
||||
weight = 2
|
||||
weight = 3
|
||||
case "Negligible":
|
||||
weight = 2
|
||||
case "Unknown":
|
||||
weight = 1
|
||||
}
|
||||
|
||||
@ -193,47 +217,48 @@ func (a FeatureByVulnerabilities) Less(i, j int) bool {
|
||||
// SortLayers give layers ordered by vulnerability algorithm
|
||||
func (imageAnalysis ImageAnalysis) SortLayers() []Layer {
|
||||
layers := []Layer{}
|
||||
l := imageAnalysis.Layers[len(imageAnalysis.Layers)-1]
|
||||
|
||||
for _, l := range imageAnalysis.Layers {
|
||||
features := []Feature{}
|
||||
// for _, l := range imageAnalysis.Layers {
|
||||
features := []Feature{}
|
||||
|
||||
for _, f := range l.Layer.Features {
|
||||
vulnerabilities := []Vulnerability{}
|
||||
for _, f := range l.Layer.Features {
|
||||
vulnerabilities := []Vulnerability{}
|
||||
|
||||
for _, v := range f.Vulnerabilities {
|
||||
nv := Vulnerability{
|
||||
Name: v.Name,
|
||||
Severity: v.Severity,
|
||||
IntroduceBy: f.Name + ":" + f.Version,
|
||||
Description: v.Description,
|
||||
Layer: l.Layer.Name,
|
||||
Link: v.Link,
|
||||
}
|
||||
|
||||
vulnerabilities = append(vulnerabilities, nv)
|
||||
for _, v := range f.Vulnerabilities {
|
||||
nv := Vulnerability{
|
||||
Name: v.Name,
|
||||
Severity: v.Severity,
|
||||
IntroduceBy: f.Name + ":" + f.Version,
|
||||
Description: v.Description,
|
||||
Layer: l.Layer.Name,
|
||||
Link: v.Link,
|
||||
}
|
||||
|
||||
sort.Sort(VulnerabilitiesBySeverity(vulnerabilities))
|
||||
|
||||
nf := Feature{
|
||||
Name: f.Name,
|
||||
Version: f.Version,
|
||||
Vulnerabilities: vulnerabilities,
|
||||
}
|
||||
|
||||
features = append(features, nf)
|
||||
vulnerabilities = append(vulnerabilities, nv)
|
||||
}
|
||||
|
||||
sort.Sort(FeatureByVulnerabilities(features))
|
||||
sort.Sort(VulnerabilitiesBySeverity(vulnerabilities))
|
||||
|
||||
nl := Layer{
|
||||
Name: l.Layer.Name,
|
||||
Path: l.Layer.Path,
|
||||
Features: features,
|
||||
nf := Feature{
|
||||
Name: f.Name,
|
||||
Version: f.Version,
|
||||
Vulnerabilities: vulnerabilities,
|
||||
}
|
||||
layers = append(layers, nl)
|
||||
|
||||
features = append(features, nf)
|
||||
}
|
||||
|
||||
sort.Sort(FeatureByVulnerabilities(features))
|
||||
|
||||
nl := Layer{
|
||||
Name: l.Layer.Name,
|
||||
Path: l.Layer.Path,
|
||||
Features: features,
|
||||
}
|
||||
layers = append(layers, nl)
|
||||
// }
|
||||
|
||||
sort.Sort(LayerByVulnerabilities(layers))
|
||||
|
||||
return layers
|
||||
@ -244,21 +269,23 @@ func (imageAnalysis ImageAnalysis) SortVulnerabilities() []Vulnerability {
|
||||
vulnerabilities := []Vulnerability{}
|
||||
|
||||
// there should be a better method, but I don't know how to easlily concert []v1.Vulnerability to [Vulnerability]
|
||||
for _, l := range imageAnalysis.Layers {
|
||||
for _, f := range l.Layer.Features {
|
||||
for _, v := range f.Vulnerabilities {
|
||||
nv := Vulnerability{
|
||||
Name: v.Name,
|
||||
Severity: v.Severity,
|
||||
IntroduceBy: f.Name + ":" + f.Version,
|
||||
Description: v.Description,
|
||||
Layer: l.Layer.Name,
|
||||
}
|
||||
l := imageAnalysis.Layers[len(imageAnalysis.Layers)-1]
|
||||
|
||||
vulnerabilities = append(vulnerabilities, nv)
|
||||
// for _, l := range imageAnalysis.Layers {
|
||||
for _, f := range l.Layer.Features {
|
||||
for _, v := range f.Vulnerabilities {
|
||||
nv := Vulnerability{
|
||||
Name: v.Name,
|
||||
Severity: v.Severity,
|
||||
IntroduceBy: f.Name + ":" + f.Version,
|
||||
Description: v.Description,
|
||||
Layer: l.Layer.Name,
|
||||
}
|
||||
|
||||
vulnerabilities = append(vulnerabilities, nv)
|
||||
}
|
||||
}
|
||||
// }
|
||||
|
||||
sort.Sort(VulnerabilitiesBySeverity(vulnerabilities))
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@ import (
|
||||
"text/template"
|
||||
)
|
||||
|
||||
//execute go generate ./clair
|
||||
//go:generate go-bindata -pkg clair -o templates.go templates/...
|
||||
|
||||
//ReportConfig Reporting configuration
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,420 +1,560 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<title>Clair Control report : {{.ImageName}}</title>
|
||||
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,600italic,400italic,300italic,300' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: ghostwhite;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: ghostwhite;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
/* Typography */
|
||||
|
||||
/* Typography */
|
||||
.lead {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
/* global layout */
|
||||
|
||||
.lead {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
.container {
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
/* global layout */
|
||||
.container {
|
||||
padding: 0 0;
|
||||
}
|
||||
.clearfix:after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
content:"";
|
||||
display:block;
|
||||
clear:both;
|
||||
}
|
||||
.row {
|
||||
margin: 0 -20px;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin: 0 -20px;
|
||||
}
|
||||
.row:after {
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.row:after {
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
[class*="col-"] {
|
||||
padding: 0 20px;
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
[class*="col-"] {
|
||||
padding: 0 20px;
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.col-6 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
width: 50%;
|
||||
}
|
||||
.panel {
|
||||
/* padding: 1em; */
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
box-shadow: 0px 1px 2px #e2e2e2;
|
||||
}
|
||||
|
||||
.panel {
|
||||
/* padding: 1em; */
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
box-shadow: 0px 1px 2px #e2e2e2;
|
||||
}
|
||||
.panel h2 {
|
||||
margin-top: 0;
|
||||
padding-bottom: .2em;
|
||||
border-bottom: solid 1px gainsboro;
|
||||
}
|
||||
|
||||
.panel h2 {
|
||||
margin-top: 0;
|
||||
padding-bottom: .2em;
|
||||
border-bottom: solid 1px gainsboro;
|
||||
}
|
||||
.panel:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
/* Header */
|
||||
|
||||
.panel :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.app-header {
|
||||
background: #2196F3;
|
||||
color: white;
|
||||
margin: 0 0px 0px 0px;
|
||||
padding: 16px 20px;
|
||||
box-shadow: 0 -2px 16px #263238;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.app-header h1 {
|
||||
margin: 0;
|
||||
font-weight: lighter;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
background: #2196F3;
|
||||
color: white;
|
||||
margin: 0 0px 0px 0px;
|
||||
padding: 16px 20px;
|
||||
box-shadow: 0 -2px 16px #263238;
|
||||
position: relative;
|
||||
}
|
||||
.app-intro {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #263238;
|
||||
background: rgba(255, 255, 255, .8);
|
||||
border-bottom: solid 1px #ECEFF1;
|
||||
}
|
||||
|
||||
.app-header h1 {
|
||||
margin: 0;
|
||||
font-weight: lighter;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.app-intro h2 {
|
||||
font-size: 2em;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.app-intro {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #263238;
|
||||
background: rgba(255, 255, 255, .8);
|
||||
border-bottom: solid 1px #ECEFF1;
|
||||
}
|
||||
.summary {
|
||||
line-height: .6em;
|
||||
}
|
||||
/* report */
|
||||
|
||||
.app-intro h2 {
|
||||
font-size: 2em;
|
||||
font-weight: lighter;
|
||||
}
|
||||
.report {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.summary {
|
||||
line-height: .6em;
|
||||
}
|
||||
.graph {
|
||||
margin: 0 auto;
|
||||
max-width: 960px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
/* Style of the graph */
|
||||
|
||||
/* report */
|
||||
.graph .node {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.report {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.graph {
|
||||
margin: 0 auto;
|
||||
max-width: 960px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
/* Style of the graph */
|
||||
.graph .node {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin: 2px;
|
||||
}
|
||||
.graph .node .dot {
|
||||
position: relative;
|
||||
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
border-radius: 24px;
|
||||
|
||||
float: left;
|
||||
|
||||
background: gray;
|
||||
|
||||
/* box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
|
||||
.graph .node .dot {
|
||||
position: relative;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
border-radius: 24px;
|
||||
float: left;
|
||||
background: gray;
|
||||
/* box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
|
||||
border: solid 1px rgba(255, 255, 255, .2); */
|
||||
}
|
||||
}
|
||||
|
||||
.graph .node.High .dot {
|
||||
background: #E91E63;
|
||||
}
|
||||
.graph .node.Defcon1 .dot {
|
||||
background: black;
|
||||
}
|
||||
|
||||
.graph .node.Medium .dot {
|
||||
background: #FFA726;
|
||||
}
|
||||
.graph .node.Critical .dot {
|
||||
background: #e81e1e;
|
||||
}
|
||||
|
||||
.graph .node.Low .dot {
|
||||
background: #8BC34A;
|
||||
}
|
||||
.graph .node.High .dot {
|
||||
background: #E91E63;
|
||||
}
|
||||
|
||||
.graph .node .popup {
|
||||
display: none;
|
||||
.graph .node.Medium .dot {
|
||||
background: #FFA726;
|
||||
}
|
||||
|
||||
width: 300px;
|
||||
.graph .node.Low .dot {
|
||||
background: #8BC34A;
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
margin-bottom: 20px;
|
||||
margin-left: -150px;
|
||||
left: 2px;
|
||||
.graph .node.Negligible .dot {
|
||||
background: #37474F;
|
||||
}
|
||||
|
||||
background: white;
|
||||
box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
|
||||
.graph .node.Unknown .dot {
|
||||
background: #37474F;
|
||||
}
|
||||
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
/* border: solid 1px #e2e2e2; */
|
||||
text-shadow: 0 0 0 transparent;
|
||||
}
|
||||
.graph .node .popup {
|
||||
display: none;
|
||||
width: 300px;
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
margin-bottom: 20px;
|
||||
margin-left: -150px;
|
||||
left: 2px;
|
||||
background: white;
|
||||
box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
/* border: solid 1px #e2e2e2; */
|
||||
text-shadow: 0 0 0 transparent;
|
||||
}
|
||||
|
||||
.graph .node .popup:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -10px;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 10px 10px 0 10px;
|
||||
border-color: white transparent transparent transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
.graph .node .popup:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -10px;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 10px 10px 0 10px;
|
||||
border-color: white transparent transparent transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.graph .node .popup:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -10px;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 11px 11px 0 10px;
|
||||
border-color: rgba(0, 0, 0, .2) transparent transparent transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
.graph .node .popup:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -10px;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 11px 11px 0 10px;
|
||||
border-color: rgba(0, 0, 0, .2) transparent transparent transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.graph .node .popup > div {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.graph .node .popup > div {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.graph .node:hover .dot {
|
||||
opacity: .8;
|
||||
}
|
||||
.graph .node:hover .dot {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.graph .node:hover .popup {
|
||||
display: block;
|
||||
max-height: 180px;
|
||||
color: dimgray;
|
||||
}
|
||||
.graph .node:hover .popup {
|
||||
display: block;
|
||||
max-height: 180px;
|
||||
color: dimgray;
|
||||
}
|
||||
/* bars */
|
||||
|
||||
/* bars */
|
||||
.bar-bg {
|
||||
display: inline-block;
|
||||
width: 240px;
|
||||
height: 6px;
|
||||
position: relative;
|
||||
}
|
||||
.bar-bg {
|
||||
display: inline-block;
|
||||
width: 240px;
|
||||
height: 6px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bar-bar {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #E91E63;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.bar-bar {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #E91E63;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.bar-bar.High {
|
||||
background: #E91E63;
|
||||
}
|
||||
.bar-bar.Defcon1 {
|
||||
background: black;
|
||||
}
|
||||
|
||||
.bar-bar.Medium {
|
||||
background: #FFA726;
|
||||
}
|
||||
.bar-bar.Critical {
|
||||
background: #e81e1e;
|
||||
}
|
||||
|
||||
.bar-bar.Low {
|
||||
background: #8BC34A;
|
||||
}
|
||||
.bar-bar.High {
|
||||
background: #E91E63;
|
||||
}
|
||||
|
||||
/* vulnerabilities */
|
||||
.report {
|
||||
margin: 18px auto;
|
||||
max-width: 960px;
|
||||
}
|
||||
.bar-bar.Medium {
|
||||
background: #FFA726;
|
||||
}
|
||||
|
||||
.report .vulnerabilities,
|
||||
.report .features > ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.bar-bar.Low {
|
||||
background: #8BC34A;
|
||||
}
|
||||
|
||||
.report .features > ul {
|
||||
list-style: none;
|
||||
}
|
||||
.bar-bar.Negligible {
|
||||
background: #37474F;
|
||||
}
|
||||
|
||||
.feature {
|
||||
border-bottom: solid 1px #ECEFF1;
|
||||
}
|
||||
.bar-bar.Unknown {
|
||||
background: #37474F;
|
||||
}
|
||||
/* vulnerabilities */
|
||||
|
||||
.feature:last-child {
|
||||
border-color: #CFD8DC;
|
||||
}
|
||||
.report {
|
||||
margin: 18px auto;
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.feature__title {
|
||||
padding: 1em;
|
||||
}
|
||||
.report .vulnerabilities,
|
||||
.report .features > ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.vulnerabilities {
|
||||
padding-left: 2.6em !important;
|
||||
}
|
||||
.report .features > ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.vulnerability {
|
||||
padding-bottom: .8em;
|
||||
padding-right: 2.2em;
|
||||
}
|
||||
.feature {
|
||||
border-bottom: solid 1px #ECEFF1;
|
||||
}
|
||||
|
||||
.vulnerabilities .High .name {
|
||||
color: #E91E63;
|
||||
}
|
||||
.feature:last-child {
|
||||
border-color: #CFD8DC;
|
||||
}
|
||||
|
||||
.vulnerabilities .Medium .name {
|
||||
color: #FFA726;
|
||||
}
|
||||
.feature__title {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.vulnerabilities .Low .name {
|
||||
color: #8BC34A;
|
||||
}
|
||||
.vulnerabilities {
|
||||
padding-left: 2.6em !important;
|
||||
}
|
||||
|
||||
/* layers */
|
||||
.vulnerability {
|
||||
padding-bottom: .8em;
|
||||
padding-right: 2.2em;
|
||||
}
|
||||
|
||||
.layer .layer__title {
|
||||
cursor: pointer;
|
||||
padding: 1em;
|
||||
border-bottom: solid 1px #CFD8DC;
|
||||
color: #37474F;
|
||||
margin: 0;
|
||||
}
|
||||
.vulnerabilities .Defcon1 .name {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.layer .layer__title:hover {
|
||||
background: #ECEFF1;
|
||||
}
|
||||
.vulnerabilities .Critical .name {
|
||||
color: #e81e1e;
|
||||
}
|
||||
|
||||
.layer.closed .features {
|
||||
display: none;
|
||||
}
|
||||
.vulnerabilities .High .name {
|
||||
color: #E91E63;
|
||||
}
|
||||
|
||||
.vulnerabilities .Medium .name {
|
||||
color: #FFA726;
|
||||
}
|
||||
|
||||
.vulnerabilities .Low .name {
|
||||
color: #8BC34A;
|
||||
}
|
||||
|
||||
.vulnerabilities .Negligible .name {
|
||||
color: #37474F;
|
||||
}
|
||||
|
||||
.vulnerabilities .Unknown .name {
|
||||
color: #37474F;
|
||||
}
|
||||
/* layers */
|
||||
|
||||
.layer .layer__title {
|
||||
cursor: pointer;
|
||||
padding: 1em;
|
||||
border-bottom: solid 1px #CFD8DC;
|
||||
color: #37474F;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.layer .layer__title:hover {
|
||||
background: #ECEFF1;
|
||||
}
|
||||
|
||||
.layer.closed .features {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.summary-text {
|
||||
display: flex;
|
||||
max-width: 940px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1em;
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
.summary-text .node {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.summary-text .node:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 50%;
|
||||
background: #2196F3;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.summary-text .node.Defcon1:before {
|
||||
background: black;
|
||||
}
|
||||
|
||||
.summary-text .node.Critical:before {
|
||||
background: #e81e1e;
|
||||
}
|
||||
|
||||
.summary-text .node.High:before {
|
||||
background: #E91E63;
|
||||
}
|
||||
|
||||
.summary-text .node.Medium:before {
|
||||
background: #FFA726;
|
||||
}
|
||||
|
||||
.summary-text .node.Low:before {
|
||||
background: #8BC34A;
|
||||
}
|
||||
|
||||
.summary-text .node.Negligible:before {
|
||||
background: #37474F;
|
||||
}
|
||||
|
||||
.summary-text .node.Unknown:before {
|
||||
background: #37474F;
|
||||
}
|
||||
|
||||
.relative-graph {
|
||||
display: flex;
|
||||
max-width: 940px;
|
||||
margin: 0 auto;
|
||||
background: #2196F3;
|
||||
flex-direction: row-reverse;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.relative-graph .node {
|
||||
text-align: center;
|
||||
height: 8px;
|
||||
background: #2196F3;
|
||||
}
|
||||
|
||||
.relative-graph .node.Defcon1 {
|
||||
background: black;
|
||||
}
|
||||
|
||||
.relative-graph .node.Critical {
|
||||
background: #e81e1e;
|
||||
}
|
||||
|
||||
.relative-graph .node.High {
|
||||
background: #E91E63;
|
||||
}
|
||||
|
||||
.relative-graph .node.Medium {
|
||||
background: #FFA726;
|
||||
}
|
||||
|
||||
.relative-graph .node.Low {
|
||||
background: #8BC34A;
|
||||
}
|
||||
|
||||
.relative-graph .node.Negligible {
|
||||
background: #37474F;
|
||||
}
|
||||
|
||||
.relative-graph .node.Unknown {
|
||||
background: #37474F;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<header class="app-header">
|
||||
<h1>Clair Control report</h1>
|
||||
</header>
|
||||
<header class="app-header">
|
||||
<h1>Clair Control report</h1>
|
||||
</header>
|
||||
|
||||
<div class="app-intro clearfix">
|
||||
<h2>Image: {{.ImageName}}</h2>
|
||||
<div class="app-intro clearfix">
|
||||
<h2>Image: {{.ImageName}}</h2>
|
||||
|
||||
<section class="summary">
|
||||
<div>
|
||||
{{with $vulnerabilitiesCount := .CountAllVulnerabilities}}
|
||||
<p><span class="lead"><strong>Total : {{$vulnerabilitiesCount.Total}}</strong></span></p>
|
||||
<p>
|
||||
<span style="display: inline-block; width: 120px;">Critical : <strong>{{$vulnerabilitiesCount.High}}</strong></span>
|
||||
<!--<span class="bar-bg">
|
||||
<span class="bar-bar High" style="width: {{$vulnerabilitiesCount.RelativeCount "High"}}%"></span>
|
||||
</span>-->
|
||||
</p>
|
||||
<p>
|
||||
<span style="display: inline-block; width: 120px;">Medium : <strong>{{$vulnerabilitiesCount.Medium}}</strong></span>
|
||||
<!--<span class="bar-bg">
|
||||
<span class="bar-bar Medium" style="width: {{$vulnerabilitiesCount.RelativeCount "Medium"}}%"></span>
|
||||
</span>-->
|
||||
</p>
|
||||
<p>
|
||||
<span style="display: inline-block; width: 120px;">Low : <strong>{{$vulnerabilitiesCount.Low}}</strong></span>
|
||||
<!--<span class="bar-bg">
|
||||
<span class="bar-bar Low" style="width: {{$vulnerabilitiesCount.RelativeCount "Low"}}%"></span>
|
||||
</span>-->
|
||||
</p>
|
||||
<span style="display: inline-block; width: 120px;">Negligible : <strong>{{$vulnerabilitiesCount.Negligible}}</strong></span>
|
||||
<p>
|
||||
</p>
|
||||
{{end}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="graph">
|
||||
{{range .SortVulnerabilities}}
|
||||
<a class="node {{.Severity}}" href="#{{ .Name }}">
|
||||
<div class="dot"></div>
|
||||
<div class="popup">
|
||||
<div><strong>{{.Name}}</strong></div>
|
||||
<div>{{.Severity}}</div>
|
||||
<!--<div>{{.IntroduceBy}}</div>-->
|
||||
<!--<div>{{.Description}}</div>-->
|
||||
<div>{{.Layer}}</div>
|
||||
</div>
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="report">
|
||||
<div>
|
||||
<div class="panel">
|
||||
<div class="layers">
|
||||
{{range .SortLayers}}
|
||||
<div id="{{.Name}}" class="layer">
|
||||
<h3 class="layer__title" data-toggle-layer="{{.Name}}">{{.Name}}</h3>
|
||||
<div>{{.Path}}</div>
|
||||
<div class="features">
|
||||
<ul>
|
||||
{{range .Features}}
|
||||
<li class="feature">
|
||||
<div class="feature__title">
|
||||
<strong>{{ .Name }}</strong> <span>{{ .Version }}</span> - <span class="fa fa-{{if .Status}}check-circle{{else}}exclamation-triangle{{end}}" aria-hidden="true"></span>
|
||||
</div>
|
||||
<ul class="vulnerabilities">
|
||||
{{range .Vulnerabilities}}
|
||||
<li class="vulnerability {{ .Severity }}">
|
||||
<a class="vulnerability__title" name="{{ .Name }}"></a>
|
||||
<strong class="name">{{ .Name }}</strong>
|
||||
<div>{{ .Description }}</div>
|
||||
<a href="{{ .Link }}" target="blank">Link</a>
|
||||
</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
</li>
|
||||
<section class="summary">
|
||||
<div>
|
||||
{{with $vulnerabilitiesCount := .CountAllVulnerabilities}}
|
||||
<p><span class="lead"><strong>Total : {{$vulnerabilitiesCount.Total}} vulnerabilities</strong></span></p>
|
||||
</p>
|
||||
<div class="summary-text">
|
||||
{{if gt $vulnerabilitiesCount.Unknown 0}}
|
||||
<div class="node Unknown">Unknown : <strong>{{$vulnerabilitiesCount.Unknown}}</strong></div>
|
||||
{{end}} {{if gt $vulnerabilitiesCount.Negligible 0}}
|
||||
<div class="node Negligible">Negligible : <strong>{{$vulnerabilitiesCount.Negligible}}</strong></div>
|
||||
{{end}} {{if gt $vulnerabilitiesCount.Low 0}}
|
||||
<div class="node Low">Low : <strong>{{$vulnerabilitiesCount.Low}}</strong></div>
|
||||
{{end}} {{if gt $vulnerabilitiesCount.Medium 0}}
|
||||
<div class="node Medium">Medium : <strong>{{$vulnerabilitiesCount.Medium}}</strong></div>
|
||||
{{end}} {{if gt $vulnerabilitiesCount.High 0}}
|
||||
<div class="node High">High : <strong>{{$vulnerabilitiesCount.High}}</strong></div>
|
||||
{{end}} {{if gt $vulnerabilitiesCount.Critical 0}}
|
||||
<div class="node Critical">Critical : <strong>{{$vulnerabilitiesCount.Critical}}</strong></div>
|
||||
{{end}} {{if gt $vulnerabilitiesCount.Defcon1 0}}
|
||||
<div class="node Defcon1">Defcon1 : <strong>{{$vulnerabilitiesCount.Defcon1}}</strong></div>
|
||||
{{end}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative-graph">
|
||||
<div class="node Defcon1" style="width: {{$vulnerabilitiesCount.RelativeCount " Defcon1 "}}%"></div>
|
||||
<div class="node Critical" style="width: {{$vulnerabilitiesCount.RelativeCount " Critical "}}%"></div>
|
||||
<div class="node High" style="width: {{$vulnerabilitiesCount.RelativeCount " High "}}%"></div>
|
||||
<div class="node Medium" style="width: {{$vulnerabilitiesCount.RelativeCount " Medium "}}%"></div>
|
||||
<div class="node Low" style="width: {{$vulnerabilitiesCount.RelativeCount " Low "}}%"></div>
|
||||
<div class="node Negligible" style="width: {{$vulnerabilitiesCount.RelativeCount " Negligible "}}%"></div>
|
||||
<div class="node Unknown" style="width: {{$vulnerabilitiesCount.RelativeCount " Unknown "}}%"></div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="graph">
|
||||
{{range .SortVulnerabilities}}
|
||||
<a class="node {{.Severity}}" href="#{{ .Name }}">
|
||||
<div class="dot"></div>
|
||||
<div class="popup">
|
||||
<div><strong>{{.Name}}</strong></div>
|
||||
<div>{{.Severity}}</div>
|
||||
<!--<div>{{.IntroduceBy}}</div>-->
|
||||
<!--<div>{{.Description}}</div>-->
|
||||
<div>{{.Layer}}</div>
|
||||
</div>
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="report">
|
||||
<div>
|
||||
<div class="panel">
|
||||
<div class="layers">
|
||||
{{range .SortLayers}}
|
||||
<div id="{{.Name}}" class="layer">
|
||||
<h3 class="layer__title" data-toggle-layer="{{.Name}}">{{.Name}}</h3>
|
||||
<div>{{.Path}}</div>
|
||||
<div class="features">
|
||||
<ul>
|
||||
{{range .Features}}
|
||||
<li class="feature">
|
||||
<div class="feature__title">
|
||||
<strong>{{ .Name }}</strong> <span>{{ .Version }}</span> - <span class="fa fa-{{if .Status}}check-circle{{else}}exclamation-triangle{{end}}" aria-hidden="true"></span>
|
||||
</div>
|
||||
<ul class="vulnerabilities">
|
||||
{{range .Vulnerabilities}}
|
||||
<li class="vulnerability {{ .Severity }}">
|
||||
<a class="vulnerability__title" name="{{ .Name }}"></a>
|
||||
<strong class="name">{{ .Name }}</strong>
|
||||
<div>{{ .Description }}</div>
|
||||
<a href="{{ .Link }}" target="blank">Link</a>
|
||||
</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const togglers = document.querySelectorAll('[data-toggle-layer]');
|
||||
console.log(togglers);
|
||||
(function() {
|
||||
const togglers = document.querySelectorAll('[data-toggle-layer]');
|
||||
console.log(togglers);
|
||||
|
||||
for (var i = togglers.length - 1; i >= 0; i--) {
|
||||
togglers[i].onclick = function (e) {
|
||||
e.target.parentNode.classList.toggle('closed');
|
||||
};
|
||||
}
|
||||
})();
|
||||
for (var i = togglers.length - 1; i >= 0; i--) {
|
||||
togglers[i].onclick = function(e) {
|
||||
e.target.parentNode.classList.toggle('closed');
|
||||
};
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user