This fixes the html template when using '-fmt=html'

- resolves HTML escaping issues within the template
 - resolves reference issues to reportInfo struct i.e. issues -> Issues, metrics -> Stats
This commit is contained in:
NeverOddOrEven 2018-10-03 13:17:25 -05:00
parent f9b41874b1
commit 027dc2b8a7

View file

@ -62,7 +62,7 @@ const html = `
level = "is-warning"; level = "is-warning";
} }
return ( return (
<div className={ "tag " + level }> <div className="tag { level }">
{ this.props.label }: { this.props.level } { this.props.label }: { this.props.level }
</div> </div>
); );
@ -100,8 +100,8 @@ const html = `
render: function() { render: function() {
return ( return (
<p className="help"> <p className="help">
Scanned { this.props.data.metrics.files.toLocaleString() } files Scanned { this.props.data.Stats.files.toLocaleString() } files
with { this.props.data.metrics.lines.toLocaleString() } lines of code. with { this.props.data.Stats.lines.toLocaleString() } lines of code.
</p> </p>
); );
} }
@ -109,7 +109,7 @@ const html = `
var Issues = React.createClass({ var Issues = React.createClass({
render: function() { render: function() {
if (this.props.data.metrics.files === 0) { if (this.props.data.Stats.files === 0) {
return ( return (
<div className="notification"> <div className="notification">
No source files found. Do you even Go? No source files found. Do you even Go?
@ -117,7 +117,7 @@ const html = `
); );
} }
if (this.props.data.issues.length === 0) { if (this.props.data.Issues.length === 0) {
return ( return (
<div> <div>
<div className="notification"> <div className="notification">
@ -128,7 +128,7 @@ const html = `
); );
} }
var issues = this.props.data.issues var issues = this.props.data.Issues
.filter(function(issue) { .filter(function(issue) {
return this.props.severity.includes(issue.severity); return this.props.severity.includes(issue.severity);
}.bind(this)) }.bind(this))
@ -151,7 +151,7 @@ const html = `
<div> <div>
<div className="notification"> <div className="notification">
No issues matched given filters No issues matched given filters
(of total { this.props.data.issues.length } issues). (of total { this.props.data.Issues.length } issues).
</div> </div>
<Stats data={ this.props.data } /> <Stats data={ this.props.data } />
</div> </div>
@ -182,31 +182,32 @@ const html = `
var highDisabled = !this.props.available.includes("HIGH"); var highDisabled = !this.props.available.includes("HIGH");
var mediumDisabled = !this.props.available.includes("MEDIUM"); var mediumDisabled = !this.props.available.includes("MEDIUM");
var lowDisabled = !this.props.available.includes("LOW"); var lowDisabled = !this.props.available.includes("LOW");
var on = "", off = "disabled";
var HIGH = "HIGH", MEDIUM = "MEDIUM", LOW = "LOW";
return ( return (
<span> <span>
<label className={"label checkbox " + (highDisabled ? "disabled" : "") }> <label className="label checkbox { (highDisabled ? off : on )}">
<input <input
type="checkbox" type="checkbox"
checked={ this.props.selected.includes("HIGH") } checked={ this.props.selected.includes(HIGH) }
disabled={ highDisabled } disabled={ highDisabled }
onChange={ this.handleChange("HIGH") }/> onChange={ this.handleChange(HIGH) }/>
High High
</label> </label>
<label className={"label checkbox " + (mediumDisabled ? "disabled" : "") }> <label className="label checkbox {( mediumDisabled ? off : on )}">
<input <input
type="checkbox" type="checkbox"
checked={ this.props.selected.includes("MEDIUM") } checked={ this.props.selected.includes(MEDIUM) }
disabled={ mediumDisabled } disabled={ mediumDisabled }
onChange={ this.handleChange("MEDIUM") }/> onChange={ this.handleChange(MEDIUM) }/>
Medium Medium
</label> </label>
<label className={"label checkbox " + (lowDisabled ? "disabled" : "") }> <label className="label checkbox {( lowDisabled ? off : on )}">
<input <input
type="checkbox" type="checkbox"
checked={ this.props.selected.includes("LOW") } checked={ this.props.selected.includes(LOW) }
disabled={ lowDisabled } disabled={ lowDisabled }
onChange={ this.handleChange("LOW") }/> onChange={ this.handleChange(LOW) }/>
Low Low
</label> </label>
</span> </span>
@ -231,13 +232,13 @@ const html = `
render: function() { render: function() {
var issueTypes = this.props.allIssueTypes var issueTypes = this.props.allIssueTypes
.map(function(it) { .map(function(it) {
var matches = this.props.issueType == it
return ( return (
<option value={ it } selected={ this.props.issueType == it }> <option value={ it } selected={ matches }>
{ it } { it }
</option> </option>
); );
}.bind(this)); }.bind(this));
return ( return (
<nav className="panel"> <nav className="panel">
<div className="panel-heading"> <div className="panel-heading">
@ -282,7 +283,6 @@ const html = `
); );
} }
}); });
var IssueBrowser = React.createClass({ var IssueBrowser = React.createClass({
getInitialState: function() { getInitialState: function() {
return {}; return {};
@ -291,11 +291,11 @@ const html = `
this.updateIssues(this.props.data); this.updateIssues(this.props.data);
}, },
handleSeverity: function(val) { handleSeverity: function(val) {
this.updateIssueTypes(this.props.data.issues, val, this.state.confidence); this.updateIssueTypes(this.props.data.Issues, val, this.state.confidence);
this.setState({severity: val}); this.setState({severity: val});
}, },
handleConfidence: function(val) { handleConfidence: function(val) {
this.updateIssueTypes(this.props.data.issues, this.state.severity, val); this.updateIssueTypes(this.props.data.Issues, this.state.severity, val);
this.setState({confidence: val}); this.setState({confidence: val});
}, },
handleIssueType: function(val) { handleIssueType: function(val) {
@ -306,8 +306,7 @@ const html = `
this.setState({data: data}); this.setState({data: data});
return; return;
} }
var allSeverities = data.Issues
var allSeverities = data.issues
.map(function(issue) { .map(function(issue) {
return issue.severity return issue.severity
}) })
@ -315,8 +314,7 @@ const html = `
.filter(function(item, pos, ary) { .filter(function(item, pos, ary) {
return !pos || item != ary[pos - 1]; return !pos || item != ary[pos - 1];
}); });
var allConfidences = data.Issues
var allConfidences = data.issues
.map(function(issue) { .map(function(issue) {
return issue.confidence return issue.confidence
}) })
@ -324,12 +322,9 @@ const html = `
.filter(function(item, pos, ary) { .filter(function(item, pos, ary) {
return !pos || item != ary[pos - 1]; return !pos || item != ary[pos - 1];
}); });
var selectedSeverities = allSeverities; var selectedSeverities = allSeverities;
var selectedConfidences = allConfidences; var selectedConfidences = allConfidences;
this.updateIssueTypes(data.Issues, selectedSeverities, selectedConfidences);
this.updateIssueTypes(data.issues, selectedSeverities, selectedConfidences);
this.setState({ this.setState({
data: data, data: data,
severity: selectedSeverities, severity: selectedSeverities,
@ -358,7 +353,7 @@ const html = `
if (this.state.issueType && !allTypes.includes(this.state.issueType)) { if (this.state.issueType && !allTypes.includes(this.state.issueType)) {
this.setState({issueType: null}); this.setState({issueType: null});
} }
this.setState({allIssueTypes: allTypes}); this.setState({allIssueTypes: allTypes});
}, },
render: function() { render: function() {
@ -391,7 +386,7 @@ const html = `
); );
} }
}); });
ReactDOM.render( ReactDOM.render(
<IssueBrowser data={ data } />, <IssueBrowser data={ data } />,
document.getElementById("content") document.getElementById("content")