Skip to content

Commit 91dae7f

Browse files
mmorel-35mmorel-35
authored
Update the design of HTML report
1 parent e72f54e commit 91dae7f

File tree

1 file changed

+117
-113
lines changed

1 file changed

+117
-113
lines changed

‎report/html/template.go‎

Lines changed: 117 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -20,30 +20,26 @@ const templateContent = `
2020
<head>
2121
<meta charset="utf-8">
2222
<title>Golang Security Checker</title>
23-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.1/css/bulma.min.css" integrity="sha256-DRcOKg8NK1KkSkcymcGmxOtS/lAn0lHWJXRa15gMHHk=" crossorigin="anonymous"/>
23+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.2/css/bulma.min.css" integrity="sha512-byErQdWdTqREz6DLAA9pCnLbdoGGhXfU6gm1c8bkf7F51JVmUBlayGe2A31VpXWQP+eiJ3ilTAZHCR3vmMyybA==" crossorigin="anonymous"/>
24+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css" integrity="sha512-kZqGbhf9JTB4bVJ0G8HCkqmaPcRgo88F0dneK30yku5Y/dep7CZfCnNml2Je/sY4lBoqoksXz4PtVXS4GHSUzQ==" crossorigin="anonymous"/>
25+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js" integrity="sha512-s+tOYYcC3Jybgr9mVsdAxsRYlGNq4mlAurOrfNuGMQ/SCofNPu92tjE7YRZCsdEtWL1yGkqk15fU/ark206YTg==" crossorigin="anonymous"></script>
26+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/languages/go.min.js" integrity="sha512-+UYV2NyyynWEQcZ4sMTKmeppyV331gqvMOGZ61/dqc89Tn1H40lF05ACd03RSD9EWwGutNwKj256mIR8waEJBQ==" crossorigin="anonymous"></script>
2427
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js" integrity="sha256-cLWs9L+cjZg8CjGHMpJqUgKKouPlmoMP/0wIdPtaPGs=" crossorigin="anonymous"></script>
2528
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js" integrity="sha256-JIW8lNqN2EtqC6ggNZYnAdKMJXRQfkPMvdRt+b0/Jxc=" crossorigin="anonymous"></script>
2629
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js" integrity="sha256-1IWWLlCKFGFj/cjryvC7GDF5wRYnf9tSvNVVEj8Bm+o=" crossorigin="anonymous"></script>
2730
<style>
28-
div.issue div.tag, div.panel-block input[type="checkbox"] {
29-
margin-right: 0.5em;
30-
}
31-
32-
label.disabled {
33-
text-decoration: line-through;
34-
}
35-
36-
nav.panel select {
37-
width: 100%;
38-
}
39-
40-
.break-word {
41-
word-wrap: break-word;
42-
}
43-
44-
.help {
45-
white-space: pre-wrap;
46-
}
31+
.field-label {
32+
min-width: 80px;
33+
}
34+
.break-word {
35+
word-wrap: break-word;
36+
}
37+
.help {
38+
white-space: pre-wrap;
39+
}
40+
.tag {
41+
width: 80px;
42+
}
4743
</style>
4844
</head>
4945
<body>
@@ -58,57 +54,70 @@ const templateContent = `
5854
<script type="text/babel">
5955
var IssueTag = React.createClass({
6056
render: function() {
61-
var level = "tag "
57+
var level = "tag"
6258
if (this.props.level === "HIGH") {
63-
level += "is-danger";
59+
level += " is-danger";
6460
} else if (this.props.level === "MEDIUM") {
65-
level += "is-warning";
61+
level += " is-warning";
62+
} else if (this.props.level === "LOW") {
63+
level += " is-info";
6664
}
65+
level +=" is-rounded";
6766
return (
68-
<div className={ level }>
69-
{ this.props.label }: { this.props.level }
67+
<div className="control">
68+
<div className="tags has-addons">
69+
<span className="tag is-dark is-rounded">{ this.props.label }</span>
70+
<span className={ level }>{ this.props.level }</span>
71+
</div>
7072
</div>
7173
);
7274
}
7375
});
74-
76+
var Highlight = React.createClass({
77+
componentDidMount: function(){
78+
var current = ReactDOM.findDOMNode(this);
79+
hljs.highlightElement(current);
80+
},
81+
render: function() {
82+
return (
83+
<pre className="go"><code >{ this.props.code }</code></pre>
84+
);
85+
}
86+
});
7587
var Issue = React.createClass({
7688
render: function() {
7789
return (
7890
<div className="issue box">
79-
<div className="is-pulled-right">
80-
<IssueTag label="Severity" level={ this.props.data.severity }/>
81-
<IssueTag label="Confidence" level={ this.props.data.confidence }/>
91+
<div className="columns">
92+
<div className="column is-three-quarters">
93+
<strong className="break-word">{ this.props.data.file } (line { this.props.data.line })</strong>
94+
<p>{ this.props.data.details }</p>
95+
</div>
96+
<div className="column is-one-quarter">
97+
<div className="field is-grouped is-grouped-multiline">
98+
<IssueTag label="Severity" level={ this.props.data.severity }/>
99+
<IssueTag label="Confidence" level={ this.props.data.confidence }/>
100+
</div>
101+
</div>
102+
</div>
103+
<div className="highlight">
104+
<Highlight code={ this.props.data.code }/>
82105
</div>
83-
<p>
84-
<strong className="break-word">
85-
{ this.props.data.file } (line { this.props.data.line })
86-
</strong>
87-
<br/>
88-
{ this.props.data.details }
89-
</p>
90-
<figure className="highlight">
91-
<pre>
92-
<code className="go">{ this.props.data.code }</code>
93-
</pre>
94-
</figure>
95106
</div>
96107
);
97108
}
98109
});
99-
100110
var Stats = React.createClass({
101111
render: function() {
102112
return (
103-
<p className="help">
113+
<p className="help is-pulled-right">
104114
Gosec {this.props.data.GosecVersion} scanned { this.props.data.Stats.files.toLocaleString() } files
105115
with { this.props.data.Stats.lines.toLocaleString() } lines of code.
106116
{ this.props.data.Stats.nosec ? '\n' + this.props.data.Stats.nosec.toLocaleString() + ' false positives (nosec) have been waived.' : ''}
107117
</p>
108118
);
109119
}
110120
});
111-
112121
var Issues = React.createClass({
113122
render: function() {
114123
if (this.props.data.Stats.files === 0) {
@@ -118,7 +127,6 @@ const templateContent = `
118127
</div>
119128
);
120129
}
121-
122130
if (this.props.data.Issues.length === 0) {
123131
return (
124132
<div>
@@ -129,7 +137,6 @@ const templateContent = `
129137
</div>
130138
);
131139
}
132-
133140
var issues = this.props.data.Issues
134141
.filter(function(issue) {
135142
return this.props.severity.includes(issue.severity);
@@ -147,7 +154,6 @@ const templateContent = `
147154
.map(function(issue) {
148155
return (<Issue data={issue} />);
149156
}.bind(this));
150-
151157
if (issues.length === 0) {
152158
return (
153159
<div>
@@ -159,7 +165,6 @@ const templateContent = `
159165
</div>
160166
);
161167
}
162-
163168
return (
164169
<div className="issues">
165170
{ issues }
@@ -184,38 +189,36 @@ const templateContent = `
184189
var highDisabled = !this.props.available.includes(HIGH);
185190
var mediumDisabled = !this.props.available.includes(MEDIUM);
186191
var lowDisabled = !this.props.available.includes(LOW);
187-
var on = "", off = "disabled";
188-
var baseClassName = "label checkbox ";
189-
var highClassName = baseClassName + (highDisabled ? off : on);
190-
var mediumClassName = baseClassName + (mediumDisabled ? off : on);
191-
var lowClassName = baseClassName + (lowDisabled ? off : on);
192192
return (
193-
<span>
194-
<label className={ highClassName }>
195-
<input
196-
type="checkbox"
197-
checked={ this.props.selected.includes(HIGH) }
198-
disabled={ highDisabled }
199-
onChange={ this.handleChange(HIGH) }/>
200-
High
201-
</label>
202-
<label className={mediumClassName}>
203-
<input
204-
type="checkbox"
205-
checked={ this.props.selected.includes(MEDIUM) }
206-
disabled={ mediumDisabled }
207-
onChange={ this.handleChange(MEDIUM) }/>
208-
Medium
209-
</label>
210-
<label className={lowClassName}>
211-
<input
212-
type="checkbox"
213-
checked={ this.props.selected.includes(LOW) }
214-
disabled={ lowDisabled }
215-
onChange={ this.handleChange(LOW) }/>
216-
Low
217-
</label>
218-
</span>
193+
<div className="field">
194+
<div className="control">
195+
<label className="checkbox" disabled={ highDisabled }>
196+
<input
197+
type="checkbox"
198+
checked={ this.props.selected.includes(HIGH) }
199+
disabled={ highDisabled }
200+
onChange={ this.handleChange(HIGH) }/> High
201+
</label>
202+
</div>
203+
<div className="control">
204+
<label className="checkbox" disabled={ mediumDisabled }>
205+
<input
206+
type="checkbox"
207+
checked={ this.props.selected.includes(MEDIUM) }
208+
disabled={ mediumDisabled }
209+
onChange={ this.handleChange(MEDIUM) }/> Medium
210+
</label>
211+
</div>
212+
<div className="control">
213+
<label className="checkbox" disabled={ lowDisabled }>
214+
<input
215+
type="checkbox"
216+
checked={ this.props.selected.includes(LOW) }
217+
disabled={ lowDisabled }
218+
onChange={ this.handleChange(LOW) }/> Low
219+
</label>
220+
</div>
221+
</div>
219222
);
220223
}
221224
});
@@ -245,44 +248,46 @@ const templateContent = `
245248
}.bind(this));
246249
return (
247250
<nav className="panel">
248-
<div className="panel-heading">
249-
Filters
250-
</div>
251-
<div className="panel-block">
252-
<strong>
253-
Severity
254-
</strong>
255-
</div>
251+
<div className="panel-heading">Filters</div>
256252
<div className="panel-block">
257-
<LevelSelector
258-
selected={ this.props.severity }
259-
available={ this.props.allSeverities }
260-
onChange={ this.updateSeverity } />
253+
<div className="field is-horizontal">
254+
<div className="field-label is-normal">
255+
<label className="label is-pulled-left">Severity</label>
256+
</div>
257+
<div className="field-body">
258+
<LevelSelector selected={ this.props.severity } available={ this.props.allSeverities } onChange={ this.updateSeverity } />
259+
</div>
260+
</div>
261261
</div>
262262
<div className="panel-block">
263-
<strong>
264-
Confidence
265-
</strong>
266-
</div>
267-
<div className="panel-block">
268-
<LevelSelector
269-
selected={ this.props.confidence }
270-
available={ this.props.allConfidences }
271-
onChange={ this.updateConfidence } />
272-
</div>
273-
<div className="panel-block">
274-
<strong>
275-
Issue Type
276-
</strong>
263+
<div className="field is-horizontal">
264+
<div className="field-label is-normal">
265+
<label className="label is-pulled-left">Confidence</label>
266+
</div>
267+
<div className="field-body">
268+
<LevelSelector selected={ this.props.confidence } available={ this.props.allConfidences } onChange={ this.updateConfidence } />
269+
</div>
270+
</div>
277271
</div>
278272
<div className="panel-block">
279-
<div className="select">
280-
<select onChange={ this.updateIssueType }>
281-
<option value="all" selected={ !this.props.issueType }>
282-
(all)
283-
</option>
284-
{ issueTypes }
285-
</select>
273+
<div className="field is-horizontal">
274+
<div className="field-label is-normal">
275+
<label className="label is-pulled-left">Issue type</label>
276+
</div>
277+
<div className="field-body">
278+
<div className="field">
279+
<div className="control">
280+
<div className="select is-fullwidth">
281+
<select onChange={ this.updateIssueType }>
282+
<option value="all" selected={ !this.props.issueType }>
283+
(all)
284+
</option>
285+
{ issueTypes }
286+
</select>
287+
</div>
288+
</div>
289+
</div>
290+
</div>
286291
</div>
287292
</div>
288293
</nav>
@@ -390,7 +395,6 @@ const templateContent = `
390395
);
391396
}
392397
});
393-
394398
ReactDOM.render(
395399
<IssueBrowser data={ data } />,
396400
document.getElementById("content")

0 commit comments

Comments
 (0)