* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
+import * as classNames from 'classnames';
import { Link } from 'react-router';
import { translate } from '../../../helpers/l10n';
import { SecurityHotspot, Component, BranchLike } from '../../../app/types';
renderCWECategory,
Standards
} from '../utils';
+import DetachIcon from '../../../components/icons-components/DetachIcon';
+import Tooltip from '../../../components/controls/Tooltip';
+import { getRatingTooltip } from '../../../helpers/measures';
interface Props {
branchLike?: BranchLike;
this.state.standards[type][category].description && (
<HelpTooltip
className="spacer-left"
- overlay={this.state.standards[type][category].description}
+ overlay={this.renderOverlay(this.state.standards[type][category].description)}
/>
)}
</>
);
}
+ renderOverlay = (description: string | undefined) => {
+ return (
+ <>
+ <p>{description}</p>
+ <hr className="spacer-top spacer-bottom" />
+ {translate('learn_more')}:
+ <Link
+ className="spacer-left"
+ target="_blank"
+ to={{ pathname: '/documentation/security-reports' }}>
+ Security Reports
+ </Link>
+ <DetachIcon
+ className="little-spacer-left little-spacer-right vertical-baseline"
+ size={12}
+ />
+ </>
+ );
+ };
+
renderFinding(finding: SecurityHotspot, isCWE?: boolean): React.ReactFragment {
const { branchLike, component, type } = this.props;
const params: { [name: string]: string | undefined } = {
...getBranchLikeQuery(branchLike),
types: 'SECURITY_HOTSPOT'
};
- params[type] = finding.category || finding.cwe;
+ params[isCWE ? 'cwe' : type] = finding.cwe || finding.category;
const subFindings =
this.props.showCWE && finding.distribution
? finding.distribution.map(f => this.renderFinding(f, true))
: null;
+ const title = getRatingTooltip('security_rating', finding.vulnerabilityRating || 1);
return (
<React.Fragment key={finding.category || finding.cwe}>
<tr>
- {isCWE && <td />}
- <td className="nowrap" colSpan={isCWE ? 1 : 2}>
- <div className="display-inline-flex-center">
- {this.getName(finding, isCWE ? 'cwe' : type)}
- </div>
+ <td className={classNames({ 'cwe-title-cell': isCWE })}>
+ {this.getName(finding, isCWE ? 'cwe' : type)}
</td>
- <td>
+ <td className="text-right">
<div className="display-inline-flex-center">
<Link
- to={getComponentIssuesUrl(component.key, { ...params, types: 'VULNERABILITY' })}>
+ to={getComponentIssuesUrl(component.key, {
+ ...params,
+ types: 'VULNERABILITY',
+ resolved: 'false'
+ })}>
{finding.vulnerabilities}
</Link>
- <Link
- className="link-no-underline spacer-left"
- to={getComponentIssuesUrl(component.key, { ...params, types: 'VULNERABILITY' })}>
- <Rating value={finding.vulnerabilityRating || 1} />
- </Link>
+ <Tooltip overlay={title}>
+ <Link
+ className="link-no-underline spacer-left"
+ to={getComponentIssuesUrl(component.key, {
+ ...params,
+ types: 'VULNERABILITY',
+ resolved: 'false'
+ })}>
+ <Rating value={finding.vulnerabilityRating || 1} />
+ </Link>
+ </Tooltip>
</div>
</td>
- <td>
+ <td className="text-right">
<Link
className="spacer-right"
to={getComponentIssuesUrl(component.key, {
...params,
types: 'SECURITY_HOTSPOT',
resolved: 'false',
- statuses: 'OPEN'
+ statuses: 'OPEN,REOPENED'
})}>
{finding.openSecurityHotspots}
</Link>
</td>
- <td>
+ <td className="text-right">
<Link
className="spacer-right"
to={getComponentIssuesUrl(component.key, {
...params,
types: 'SECURITY_HOTSPOT',
- resolutions: 'FIXED'
+ resolutions: 'FIXED',
+ statuses: 'RESOLVED'
})}>
{finding.toReviewSecurityHotspots}
</Link>
</td>
- <td>
+ <td className="text-right">
<Link
className="spacer-right"
to={getComponentIssuesUrl(component.key, {
...params,
types: 'SECURITY_HOTSPOT',
- resolutions: 'WONTFIX'
+ resolutions: 'WONTFIX',
+ statuses: 'RESOLVED'
})}>
{finding.wontFixSecurityHotspots}
</Link>
<table className="data zebra">
<thead>
<tr>
- <th className="security-category-column" colSpan={2}>
+ <th className="security-category-column">
{translate('security_reports.list.categories')}
</th>
<th className="security-result-column">
<div className="display-inline-flex-center">
- <VulnerabilityIcon className="spacer-right" />{' '}
+ <VulnerabilityIcon className="spacer-right" />
{translate('security_reports.list.vulnerabilities')}
</div>
</th>
<th colSpan={3}>
<div className="display-inline-flex-center">
- <SecurityHotspotIcon className="spacer-right" />{' '}
+ <SecurityHotspotIcon className="spacer-right" />
{translate('security_reports.list.hotspots')}
</div>
</th>
</tr>
<tr className="subheader">
- <th colSpan={3} />
- <th className="security-result-column">{translate('security_reports.line.open')}</th>
- <th className="security-result-column">
+ <th colSpan={2} />
+ <th className="text-right security-result-column">
+ {translate('security_reports.line.open')}
+ </th>
+ <th className="text-right security-result-column">
{translate('security_reports.line.in_review')}
</th>
- <th className="security-result-column">
+ <th className="text-right security-result-column">
{translate('security_reports.line.wont_fix')}
</th>
</tr>
<tr>
<th
className="security-category-column"
- colSpan={2}
>
security_reports.list.categories
</th>
<VulnerabilityIcon
className="spacer-right"
/>
-
security_reports.list.vulnerabilities
</div>
</th>
<SecurityHotspotIcon
className="spacer-right"
/>
-
security_reports.list.hotspots
</div>
</th>
className="subheader"
>
<th
- colSpan={3}
+ colSpan={2}
/>
<th
- className="security-result-column"
+ className="text-right security-result-column"
>
security_reports.line.open
</th>
<th
- className="security-result-column"
+ className="text-right security-result-column"
>
security_reports.line.in_review
</th>
<th
- className="security-result-column"
+ className="text-right security-result-column"
>
security_reports.line.wont_fix
</th>
>
<tr>
<td
- className="nowrap"
- colSpan={2}
+ className=""
>
- <div
- className="display-inline-flex-center"
- >
- <React.Fragment>
- A1
- </React.Fragment>
- </div>
+ <React.Fragment>
+ A1
+ </React.Fragment>
</td>
- <td>
+ <td
+ className="text-right"
+ >
<div
className="display-inline-flex-center"
>
"query": Object {
"id": "foo",
"owaspTop10": "a1",
+ "resolved": "false",
"types": "VULNERABILITY",
},
}
>
2
</Link>
- <Link
- className="link-no-underline spacer-left"
- onlyActiveOnIndex={false}
- style={Object {}}
- to={
- Object {
- "pathname": "/project/issues",
- "query": Object {
- "id": "foo",
- "owaspTop10": "a1",
- "types": "VULNERABILITY",
- },
- }
- }
+ <Tooltip
+ overlay="metric.security_rating.tooltip.E"
>
- <Rating
- value={5}
- />
- </Link>
+ <Link
+ className="link-no-underline spacer-left"
+ onlyActiveOnIndex={false}
+ style={Object {}}
+ to={
+ Object {
+ "pathname": "/project/issues",
+ "query": Object {
+ "id": "foo",
+ "owaspTop10": "a1",
+ "resolved": "false",
+ "types": "VULNERABILITY",
+ },
+ }
+ }
+ >
+ <Rating
+ value={5}
+ />
+ </Link>
+ </Tooltip>
</div>
</td>
- <td>
+ <td
+ className="text-right"
+ >
<Link
className="spacer-right"
onlyActiveOnIndex={false}
"id": "foo",
"owaspTop10": "a1",
"resolved": "false",
- "statuses": "OPEN",
+ "statuses": "OPEN,REOPENED",
"types": "SECURITY_HOTSPOT",
},
}
10
</Link>
</td>
- <td>
+ <td
+ className="text-right"
+ >
<Link
className="spacer-right"
onlyActiveOnIndex={false}
"id": "foo",
"owaspTop10": "a1",
"resolutions": "FIXED",
+ "statuses": "RESOLVED",
"types": "SECURITY_HOTSPOT",
},
}
2
</Link>
</td>
- <td>
+ <td
+ className="text-right"
+ >
<Link
className="spacer-right"
onlyActiveOnIndex={false}
"id": "foo",
"owaspTop10": "a1",
"resolutions": "WONTFIX",
+ "statuses": "RESOLVED",
"types": "SECURITY_HOTSPOT",
},
}
>
<tr>
<td
- className="nowrap"
- colSpan={2}
+ className=""
>
- <div
- className="display-inline-flex-center"
- >
- <React.Fragment>
- UNKNOWN
- </React.Fragment>
- </div>
+ <React.Fragment>
+ UNKNOWN
+ </React.Fragment>
</td>
- <td>
+ <td
+ className="text-right"
+ >
<div
className="display-inline-flex-center"
>
"query": Object {
"id": "foo",
"owaspTop10": "unknown",
+ "resolved": "false",
"types": "VULNERABILITY",
},
}
>
3
</Link>
- <Link
- className="link-no-underline spacer-left"
- onlyActiveOnIndex={false}
- style={Object {}}
- to={
- Object {
- "pathname": "/project/issues",
- "query": Object {
- "id": "foo",
- "owaspTop10": "unknown",
- "types": "VULNERABILITY",
- },
- }
- }
+ <Tooltip
+ overlay="metric.security_rating.tooltip.C"
>
- <Rating
- value={3}
- />
- </Link>
+ <Link
+ className="link-no-underline spacer-left"
+ onlyActiveOnIndex={false}
+ style={Object {}}
+ to={
+ Object {
+ "pathname": "/project/issues",
+ "query": Object {
+ "id": "foo",
+ "owaspTop10": "unknown",
+ "resolved": "false",
+ "types": "VULNERABILITY",
+ },
+ }
+ }
+ >
+ <Rating
+ value={3}
+ />
+ </Link>
+ </Tooltip>
</div>
</td>
- <td>
+ <td
+ className="text-right"
+ >
<Link
className="spacer-right"
onlyActiveOnIndex={false}
"id": "foo",
"owaspTop10": "unknown",
"resolved": "false",
- "statuses": "OPEN",
+ "statuses": "OPEN,REOPENED",
"types": "SECURITY_HOTSPOT",
},
}
100
</Link>
</td>
- <td>
+ <td
+ className="text-right"
+ >
<Link
className="spacer-right"
onlyActiveOnIndex={false}
"id": "foo",
"owaspTop10": "unknown",
"resolutions": "FIXED",
+ "statuses": "RESOLVED",
"types": "SECURITY_HOTSPOT",
},
}
8
</Link>
</td>
- <td>
+ <td
+ className="text-right"
+ >
<Link
className="spacer-right"
onlyActiveOnIndex={false}
"id": "foo",
"owaspTop10": "unknown",
"resolutions": "WONTFIX",
+ "statuses": "RESOLVED",
"types": "SECURITY_HOTSPOT",
},
}
<tr>
<th
className="security-category-column"
- colSpan={2}
>
security_reports.list.categories
</th>
<VulnerabilityIcon
className="spacer-right"
/>
-
security_reports.list.vulnerabilities
</div>
</th>
<SecurityHotspotIcon
className="spacer-right"
/>
-
security_reports.list.hotspots
</div>
</th>
className="subheader"
>
<th
- colSpan={3}
+ colSpan={2}
/>
<th
- className="security-result-column"
+ className="text-right security-result-column"
>
security_reports.line.open
</th>
<th
- className="security-result-column"
+ className="text-right security-result-column"
>
security_reports.line.in_review
</th>
<th
- className="security-result-column"
+ className="text-right security-result-column"
>
security_reports.line.wont_fix
</th>
>
<tr>
<td
- className="nowrap"
- colSpan={2}
+ className=""
>
- <div
- className="display-inline-flex-center"
- >
- <React.Fragment>
- A1
- </React.Fragment>
- </div>
+ <React.Fragment>
+ A1
+ </React.Fragment>
</td>
- <td>
+ <td
+ className="text-right"
+ >
<div
className="display-inline-flex-center"
>
"query": Object {
"id": "foo",
"owaspTop10": "a1",
+ "resolved": "false",
"types": "VULNERABILITY",
},
}
>
2
</Link>
- <Link
- className="link-no-underline spacer-left"
- onlyActiveOnIndex={false}
- style={Object {}}
- to={
- Object {
- "pathname": "/project/issues",
- "query": Object {
- "id": "foo",
- "owaspTop10": "a1",
- "types": "VULNERABILITY",
- },
- }
- }
+ <Tooltip
+ overlay="metric.security_rating.tooltip.E"
>
- <Rating
- value={5}
- />
- </Link>
+ <Link
+ className="link-no-underline spacer-left"
+ onlyActiveOnIndex={false}
+ style={Object {}}
+ to={
+ Object {
+ "pathname": "/project/issues",
+ "query": Object {
+ "id": "foo",
+ "owaspTop10": "a1",
+ "resolved": "false",
+ "types": "VULNERABILITY",
+ },
+ }
+ }
+ >
+ <Rating
+ value={5}
+ />
+ </Link>
+ </Tooltip>
</div>
</td>
- <td>
+ <td
+ className="text-right"
+ >
<Link
className="spacer-right"
onlyActiveOnIndex={false}
"id": "foo",
"owaspTop10": "a1",
"resolved": "false",
- "statuses": "OPEN",
+ "statuses": "OPEN,REOPENED",
"types": "SECURITY_HOTSPOT",
},
}
10
</Link>
</td>
- <td>
+ <td
+ className="text-right"
+ >
<Link
className="spacer-right"
onlyActiveOnIndex={false}
"id": "foo",
"owaspTop10": "a1",
"resolutions": "FIXED",
+ "statuses": "RESOLVED",
"types": "SECURITY_HOTSPOT",
},
}
2
</Link>
</td>
- <td>
+ <td
+ className="text-right"
+ >
<Link
className="spacer-right"
onlyActiveOnIndex={false}
"id": "foo",
"owaspTop10": "a1",
"resolutions": "WONTFIX",
+ "statuses": "RESOLVED",
"types": "SECURITY_HOTSPOT",
},
}
key="42"
>
<tr>
- <td />
<td
- className="nowrap"
- colSpan={1}
+ className="cwe-title-cell"
>
- <div
- className="display-inline-flex-center"
- >
- <React.Fragment>
- CWE-42
- </React.Fragment>
- </div>
+ <React.Fragment>
+ CWE-42
+ </React.Fragment>
</td>
- <td>
+ <td
+ className="text-right"
+ >
<div
className="display-inline-flex-center"
>
Object {
"pathname": "/project/issues",
"query": Object {
+ "cwe": "42",
"id": "foo",
- "owaspTop10": "42",
+ "resolved": "false",
"types": "VULNERABILITY",
},
}
>
1
</Link>
- <Link
- className="link-no-underline spacer-left"
- onlyActiveOnIndex={false}
- style={Object {}}
- to={
- Object {
- "pathname": "/project/issues",
- "query": Object {
- "id": "foo",
- "owaspTop10": "42",
- "types": "VULNERABILITY",
- },
- }
- }
+ <Tooltip
+ overlay="metric.security_rating.tooltip.A"
>
- <Rating
- value={1}
- />
- </Link>
+ <Link
+ className="link-no-underline spacer-left"
+ onlyActiveOnIndex={false}
+ style={Object {}}
+ to={
+ Object {
+ "pathname": "/project/issues",
+ "query": Object {
+ "cwe": "42",
+ "id": "foo",
+ "resolved": "false",
+ "types": "VULNERABILITY",
+ },
+ }
+ }
+ >
+ <Rating
+ value={1}
+ />
+ </Link>
+ </Tooltip>
</div>
</td>
- <td>
+ <td
+ className="text-right"
+ >
<Link
className="spacer-right"
onlyActiveOnIndex={false}
Object {
"pathname": "/project/issues",
"query": Object {
+ "cwe": "42",
"id": "foo",
- "owaspTop10": "42",
"resolved": "false",
- "statuses": "OPEN",
+ "statuses": "OPEN,REOPENED",
"types": "SECURITY_HOTSPOT",
},
}
10
</Link>
</td>
- <td>
+ <td
+ className="text-right"
+ >
<Link
className="spacer-right"
onlyActiveOnIndex={false}
Object {
"pathname": "/project/issues",
"query": Object {
+ "cwe": "42",
"id": "foo",
- "owaspTop10": "42",
"resolutions": "FIXED",
+ "statuses": "RESOLVED",
"types": "SECURITY_HOTSPOT",
},
}
2
</Link>
</td>
- <td>
+ <td
+ className="text-right"
+ >
<Link
className="spacer-right"
onlyActiveOnIndex={false}
Object {
"pathname": "/project/issues",
"query": Object {
+ "cwe": "42",
"id": "foo",
- "owaspTop10": "42",
"resolutions": "WONTFIX",
+ "statuses": "RESOLVED",
"types": "SECURITY_HOTSPOT",
},
}
>
<tr>
<td
- className="nowrap"
- colSpan={2}
+ className=""
>
- <div
- className="display-inline-flex-center"
- >
- <React.Fragment>
- UNKNOWN
- </React.Fragment>
- </div>
+ <React.Fragment>
+ UNKNOWN
+ </React.Fragment>
</td>
- <td>
+ <td
+ className="text-right"
+ >
<div
className="display-inline-flex-center"
>
"query": Object {
"id": "foo",
"owaspTop10": "unknown",
+ "resolved": "false",
"types": "VULNERABILITY",
},
}
>
3
</Link>
- <Link
- className="link-no-underline spacer-left"
- onlyActiveOnIndex={false}
- style={Object {}}
- to={
- Object {
- "pathname": "/project/issues",
- "query": Object {
- "id": "foo",
- "owaspTop10": "unknown",
- "types": "VULNERABILITY",
- },
- }
- }
+ <Tooltip
+ overlay="metric.security_rating.tooltip.C"
>
- <Rating
- value={3}
- />
- </Link>
+ <Link
+ className="link-no-underline spacer-left"
+ onlyActiveOnIndex={false}
+ style={Object {}}
+ to={
+ Object {
+ "pathname": "/project/issues",
+ "query": Object {
+ "id": "foo",
+ "owaspTop10": "unknown",
+ "resolved": "false",
+ "types": "VULNERABILITY",
+ },
+ }
+ }
+ >
+ <Rating
+ value={3}
+ />
+ </Link>
+ </Tooltip>
</div>
</td>
- <td>
+ <td
+ className="text-right"
+ >
<Link
className="spacer-right"
onlyActiveOnIndex={false}
"id": "foo",
"owaspTop10": "unknown",
"resolved": "false",
- "statuses": "OPEN",
+ "statuses": "OPEN,REOPENED",
"types": "SECURITY_HOTSPOT",
},
}
100
</Link>
</td>
- <td>
+ <td
+ className="text-right"
+ >
<Link
className="spacer-right"
onlyActiveOnIndex={false}
"id": "foo",
"owaspTop10": "unknown",
"resolutions": "FIXED",
+ "statuses": "RESOLVED",
"types": "SECURITY_HOTSPOT",
},
}
8
</Link>
</td>
- <td>
+ <td
+ className="text-right"
+ >
<Link
className="spacer-right"
onlyActiveOnIndex={false}
"id": "foo",
"owaspTop10": "unknown",
"resolutions": "WONTFIX",
+ "statuses": "RESOLVED",
"types": "SECURITY_HOTSPOT",
},
}