From caa927052caed31756f8865efb6804f3249f8f0a Mon Sep 17 00:00:00 2001
From: Pascal Mugnier <pascal.mugnier@sonarsource.com>
Date: Thu, 12 Jul 2018 11:39:46 +0200
Subject: Apply feedback for security reports (#503)

---
 .../components/nav/component/ComponentNavMenu.tsx  |   3 +
 .../__snapshots__/ComponentNavMenu-test.tsx.snap   |  43 ---
 .../src/main/js/app/styles/init/links.css          |   9 +
 .../js/apps/securityReports/components/App.tsx     |   9 +-
 .../components/VulnerabilityList.tsx               |  90 +++--
 .../__snapshots__/VulnerabilityList-test.tsx.snap  | 406 ++++++++++++---------
 .../src/main/js/apps/securityReports/style.css     |   4 +
 .../sonar-web/src/main/js/helpers/standards.json   |   2 +-
 8 files changed, 315 insertions(+), 251 deletions(-)

(limited to 'server/sonar-web/src')

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMenu.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMenu.tsx
index ca3a9ce6f5f..45c15f90b35 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMenu.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMenu.tsx
@@ -191,6 +191,9 @@ export default class ComponentNavMenu extends React.PureComponent<Props> {
   }
 
   renderSecurityReports() {
+    if (this.props.component.qualifier === 'BRC' || this.props.component.qualifier === 'DIR') {
+      return null;
+    }
     const isActive = location.pathname.startsWith('/project/security_reports');
     return (
       <Dropdown overlay={this.renderSecurityReportsLink()} tagName="li">
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMenu-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMenu-test.tsx.snap
index 40cbe0f76bb..d35a9a9e59e 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMenu-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMenu-test.tsx.snap
@@ -251,49 +251,6 @@ exports[`should work for all qualifiers 2`] = `
       issues.page
     </Link>
   </li>
-  <Dropdown
-    overlay={
-      <ul
-        className="menu"
-      >
-        <li>
-          <Link
-            activeClassName="active"
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to={
-              Object {
-                "pathname": "/project/security_reports/owasp_top_10",
-                "query": Object {
-                  "id": "foo",
-                },
-              }
-            }
-          >
-            security_reports.owaspTop10.page
-          </Link>
-        </li>
-        <li>
-          <Link
-            activeClassName="active"
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to={
-              Object {
-                "pathname": "/project/security_reports/sans_top_25",
-                "query": Object {
-                  "id": "foo",
-                },
-              }
-            }
-          >
-            security_reports.sansTop25.page
-          </Link>
-        </li>
-      </ul>
-    }
-    tagName="li"
-  />
   <li>
     <Link
       activeClassName="active"
diff --git a/server/sonar-web/src/main/js/app/styles/init/links.css b/server/sonar-web/src/main/js/app/styles/init/links.css
index bcf268567d2..bc4b5507a76 100644
--- a/server/sonar-web/src/main/js/app/styles/init/links.css
+++ b/server/sonar-web/src/main/js/app/styles/init/links.css
@@ -73,6 +73,15 @@ a:focus {
   border-bottom: none;
 }
 
+.link-checkbox.disabled {
+  cursor: not-allowed;
+}
+
+.link-checkbox.disabled label {
+  color: var(--secondFontColor);
+  cursor: not-allowed;
+}
+
 .link-checkbox:hover,
 .link-checkbox:active,
 .link-checkbox:focus {
diff --git a/server/sonar-web/src/main/js/apps/securityReports/components/App.tsx b/server/sonar-web/src/main/js/apps/securityReports/components/App.tsx
index 90cce4b3fdc..0dbf8ffed55 100755
--- a/server/sonar-web/src/main/js/apps/securityReports/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/securityReports/components/App.tsx
@@ -94,7 +94,14 @@ export default class App extends React.PureComponent<Props, State> {
     })
       .then(results => {
         if (this.mounted) {
-          const hasVulnerabilities = results.categories.some(item => item.vulnerabilities > 0);
+          const hasVulnerabilities = results.categories.some(
+            item =>
+              item.vulnerabilities +
+                item.openSecurityHotspots +
+                item.toReviewSecurityHotspots +
+                item.wontFixSecurityHotspots >
+              0
+          );
           this.setState({ hasVulnerabilities, findings: results.categories, loading: false });
         }
       })
diff --git a/server/sonar-web/src/main/js/apps/securityReports/components/VulnerabilityList.tsx b/server/sonar-web/src/main/js/apps/securityReports/components/VulnerabilityList.tsx
index c2bc6b51304..a1af8a0f808 100755
--- a/server/sonar-web/src/main/js/apps/securityReports/components/VulnerabilityList.tsx
+++ b/server/sonar-web/src/main/js/apps/securityReports/components/VulnerabilityList.tsx
@@ -18,6 +18,7 @@
  * 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';
@@ -33,6 +34,9 @@ import {
   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;
@@ -86,78 +90,108 @@ export default class VulnerabilityList extends React.PureComponent<Props, State>
           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>
@@ -174,29 +208,31 @@ export default class VulnerabilityList extends React.PureComponent<Props, State>
         <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>
diff --git a/server/sonar-web/src/main/js/apps/securityReports/components/__tests__/__snapshots__/VulnerabilityList-test.tsx.snap b/server/sonar-web/src/main/js/apps/securityReports/components/__tests__/__snapshots__/VulnerabilityList-test.tsx.snap
index 437b86a78db..cde2b7944a4 100644
--- a/server/sonar-web/src/main/js/apps/securityReports/components/__tests__/__snapshots__/VulnerabilityList-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/securityReports/components/__tests__/__snapshots__/VulnerabilityList-test.tsx.snap
@@ -11,7 +11,6 @@ exports[`renders 1`] = `
       <tr>
         <th
           className="security-category-column"
-          colSpan={2}
         >
           security_reports.list.categories
         </th>
@@ -24,7 +23,6 @@ exports[`renders 1`] = `
             <VulnerabilityIcon
               className="spacer-right"
             />
-             
             security_reports.list.vulnerabilities
           </div>
         </th>
@@ -37,7 +35,6 @@ exports[`renders 1`] = `
             <SecurityHotspotIcon
               className="spacer-right"
             />
-             
             security_reports.list.hotspots
           </div>
         </th>
@@ -46,20 +43,20 @@ exports[`renders 1`] = `
         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>
@@ -71,18 +68,15 @@ exports[`renders 1`] = `
       >
         <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"
             >
@@ -95,6 +89,7 @@ exports[`renders 1`] = `
                     "query": Object {
                       "id": "foo",
                       "owaspTop10": "a1",
+                      "resolved": "false",
                       "types": "VULNERABILITY",
                     },
                   }
@@ -102,28 +97,35 @@ exports[`renders 1`] = `
               >
                 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}
@@ -135,7 +137,7 @@ exports[`renders 1`] = `
                     "id": "foo",
                     "owaspTop10": "a1",
                     "resolved": "false",
-                    "statuses": "OPEN",
+                    "statuses": "OPEN,REOPENED",
                     "types": "SECURITY_HOTSPOT",
                   },
                 }
@@ -144,7 +146,9 @@ exports[`renders 1`] = `
               10
             </Link>
           </td>
-          <td>
+          <td
+            className="text-right"
+          >
             <Link
               className="spacer-right"
               onlyActiveOnIndex={false}
@@ -156,6 +160,7 @@ exports[`renders 1`] = `
                     "id": "foo",
                     "owaspTop10": "a1",
                     "resolutions": "FIXED",
+                    "statuses": "RESOLVED",
                     "types": "SECURITY_HOTSPOT",
                   },
                 }
@@ -164,7 +169,9 @@ exports[`renders 1`] = `
               2
             </Link>
           </td>
-          <td>
+          <td
+            className="text-right"
+          >
             <Link
               className="spacer-right"
               onlyActiveOnIndex={false}
@@ -176,6 +183,7 @@ exports[`renders 1`] = `
                     "id": "foo",
                     "owaspTop10": "a1",
                     "resolutions": "WONTFIX",
+                    "statuses": "RESOLVED",
                     "types": "SECURITY_HOTSPOT",
                   },
                 }
@@ -191,18 +199,15 @@ exports[`renders 1`] = `
       >
         <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"
             >
@@ -215,6 +220,7 @@ exports[`renders 1`] = `
                     "query": Object {
                       "id": "foo",
                       "owaspTop10": "unknown",
+                      "resolved": "false",
                       "types": "VULNERABILITY",
                     },
                   }
@@ -222,28 +228,35 @@ exports[`renders 1`] = `
               >
                 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}
@@ -255,7 +268,7 @@ exports[`renders 1`] = `
                     "id": "foo",
                     "owaspTop10": "unknown",
                     "resolved": "false",
-                    "statuses": "OPEN",
+                    "statuses": "OPEN,REOPENED",
                     "types": "SECURITY_HOTSPOT",
                   },
                 }
@@ -264,7 +277,9 @@ exports[`renders 1`] = `
               100
             </Link>
           </td>
-          <td>
+          <td
+            className="text-right"
+          >
             <Link
               className="spacer-right"
               onlyActiveOnIndex={false}
@@ -276,6 +291,7 @@ exports[`renders 1`] = `
                     "id": "foo",
                     "owaspTop10": "unknown",
                     "resolutions": "FIXED",
+                    "statuses": "RESOLVED",
                     "types": "SECURITY_HOTSPOT",
                   },
                 }
@@ -284,7 +300,9 @@ exports[`renders 1`] = `
               8
             </Link>
           </td>
-          <td>
+          <td
+            className="text-right"
+          >
             <Link
               className="spacer-right"
               onlyActiveOnIndex={false}
@@ -296,6 +314,7 @@ exports[`renders 1`] = `
                     "id": "foo",
                     "owaspTop10": "unknown",
                     "resolutions": "WONTFIX",
+                    "statuses": "RESOLVED",
                     "types": "SECURITY_HOTSPOT",
                   },
                 }
@@ -322,7 +341,6 @@ exports[`renders with cwe 1`] = `
       <tr>
         <th
           className="security-category-column"
-          colSpan={2}
         >
           security_reports.list.categories
         </th>
@@ -335,7 +353,6 @@ exports[`renders with cwe 1`] = `
             <VulnerabilityIcon
               className="spacer-right"
             />
-             
             security_reports.list.vulnerabilities
           </div>
         </th>
@@ -348,7 +365,6 @@ exports[`renders with cwe 1`] = `
             <SecurityHotspotIcon
               className="spacer-right"
             />
-             
             security_reports.list.hotspots
           </div>
         </th>
@@ -357,20 +373,20 @@ exports[`renders with cwe 1`] = `
         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>
@@ -382,18 +398,15 @@ exports[`renders with cwe 1`] = `
       >
         <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"
             >
@@ -406,6 +419,7 @@ exports[`renders with cwe 1`] = `
                     "query": Object {
                       "id": "foo",
                       "owaspTop10": "a1",
+                      "resolved": "false",
                       "types": "VULNERABILITY",
                     },
                   }
@@ -413,28 +427,35 @@ exports[`renders with cwe 1`] = `
               >
                 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}
@@ -446,7 +467,7 @@ exports[`renders with cwe 1`] = `
                     "id": "foo",
                     "owaspTop10": "a1",
                     "resolved": "false",
-                    "statuses": "OPEN",
+                    "statuses": "OPEN,REOPENED",
                     "types": "SECURITY_HOTSPOT",
                   },
                 }
@@ -455,7 +476,9 @@ exports[`renders with cwe 1`] = `
               10
             </Link>
           </td>
-          <td>
+          <td
+            className="text-right"
+          >
             <Link
               className="spacer-right"
               onlyActiveOnIndex={false}
@@ -467,6 +490,7 @@ exports[`renders with cwe 1`] = `
                     "id": "foo",
                     "owaspTop10": "a1",
                     "resolutions": "FIXED",
+                    "statuses": "RESOLVED",
                     "types": "SECURITY_HOTSPOT",
                   },
                 }
@@ -475,7 +499,9 @@ exports[`renders with cwe 1`] = `
               2
             </Link>
           </td>
-          <td>
+          <td
+            className="text-right"
+          >
             <Link
               className="spacer-right"
               onlyActiveOnIndex={false}
@@ -487,6 +513,7 @@ exports[`renders with cwe 1`] = `
                     "id": "foo",
                     "owaspTop10": "a1",
                     "resolutions": "WONTFIX",
+                    "statuses": "RESOLVED",
                     "types": "SECURITY_HOTSPOT",
                   },
                 }
@@ -500,20 +527,16 @@ exports[`renders with cwe 1`] = `
           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"
               >
@@ -524,8 +547,9 @@ exports[`renders with cwe 1`] = `
                     Object {
                       "pathname": "/project/issues",
                       "query": Object {
+                        "cwe": "42",
                         "id": "foo",
-                        "owaspTop10": "42",
+                        "resolved": "false",
                         "types": "VULNERABILITY",
                       },
                     }
@@ -533,28 +557,35 @@ exports[`renders with cwe 1`] = `
                 >
                   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}
@@ -563,10 +594,10 @@ exports[`renders with cwe 1`] = `
                   Object {
                     "pathname": "/project/issues",
                     "query": Object {
+                      "cwe": "42",
                       "id": "foo",
-                      "owaspTop10": "42",
                       "resolved": "false",
-                      "statuses": "OPEN",
+                      "statuses": "OPEN,REOPENED",
                       "types": "SECURITY_HOTSPOT",
                     },
                   }
@@ -575,7 +606,9 @@ exports[`renders with cwe 1`] = `
                 10
               </Link>
             </td>
-            <td>
+            <td
+              className="text-right"
+            >
               <Link
                 className="spacer-right"
                 onlyActiveOnIndex={false}
@@ -584,9 +617,10 @@ exports[`renders with cwe 1`] = `
                   Object {
                     "pathname": "/project/issues",
                     "query": Object {
+                      "cwe": "42",
                       "id": "foo",
-                      "owaspTop10": "42",
                       "resolutions": "FIXED",
+                      "statuses": "RESOLVED",
                       "types": "SECURITY_HOTSPOT",
                     },
                   }
@@ -595,7 +629,9 @@ exports[`renders with cwe 1`] = `
                 2
               </Link>
             </td>
-            <td>
+            <td
+              className="text-right"
+            >
               <Link
                 className="spacer-right"
                 onlyActiveOnIndex={false}
@@ -604,9 +640,10 @@ exports[`renders with cwe 1`] = `
                   Object {
                     "pathname": "/project/issues",
                     "query": Object {
+                      "cwe": "42",
                       "id": "foo",
-                      "owaspTop10": "42",
                       "resolutions": "WONTFIX",
+                      "statuses": "RESOLVED",
                       "types": "SECURITY_HOTSPOT",
                     },
                   }
@@ -623,18 +660,15 @@ exports[`renders with cwe 1`] = `
       >
         <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"
             >
@@ -647,6 +681,7 @@ exports[`renders with cwe 1`] = `
                     "query": Object {
                       "id": "foo",
                       "owaspTop10": "unknown",
+                      "resolved": "false",
                       "types": "VULNERABILITY",
                     },
                   }
@@ -654,28 +689,35 @@ exports[`renders with cwe 1`] = `
               >
                 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}
@@ -687,7 +729,7 @@ exports[`renders with cwe 1`] = `
                     "id": "foo",
                     "owaspTop10": "unknown",
                     "resolved": "false",
-                    "statuses": "OPEN",
+                    "statuses": "OPEN,REOPENED",
                     "types": "SECURITY_HOTSPOT",
                   },
                 }
@@ -696,7 +738,9 @@ exports[`renders with cwe 1`] = `
               100
             </Link>
           </td>
-          <td>
+          <td
+            className="text-right"
+          >
             <Link
               className="spacer-right"
               onlyActiveOnIndex={false}
@@ -708,6 +752,7 @@ exports[`renders with cwe 1`] = `
                     "id": "foo",
                     "owaspTop10": "unknown",
                     "resolutions": "FIXED",
+                    "statuses": "RESOLVED",
                     "types": "SECURITY_HOTSPOT",
                   },
                 }
@@ -716,7 +761,9 @@ exports[`renders with cwe 1`] = `
               8
             </Link>
           </td>
-          <td>
+          <td
+            className="text-right"
+          >
             <Link
               className="spacer-right"
               onlyActiveOnIndex={false}
@@ -728,6 +775,7 @@ exports[`renders with cwe 1`] = `
                     "id": "foo",
                     "owaspTop10": "unknown",
                     "resolutions": "WONTFIX",
+                    "statuses": "RESOLVED",
                     "types": "SECURITY_HOTSPOT",
                   },
                 }
diff --git a/server/sonar-web/src/main/js/apps/securityReports/style.css b/server/sonar-web/src/main/js/apps/securityReports/style.css
index bf6e1ab8ace..c6159cc467c 100644
--- a/server/sonar-web/src/main/js/apps/securityReports/style.css
+++ b/server/sonar-web/src/main/js/apps/securityReports/style.css
@@ -24,3 +24,7 @@
 .security-result-column {
   width: 12%;
 }
+
+.cwe-title-cell {
+  padding-left: 80px !important;
+}
diff --git a/server/sonar-web/src/main/js/helpers/standards.json b/server/sonar-web/src/main/js/helpers/standards.json
index 9a937e7c842..f2d32e1715b 100644
--- a/server/sonar-web/src/main/js/helpers/standards.json
+++ b/server/sonar-web/src/main/js/helpers/standards.json
@@ -73,7 +73,7 @@
   },
   "cwe": {
     "unknown": {
-      "title": "Unknown CWE"
+      "title": "No CWE associated"
     },
     "1004": {
       "title": "Sensitive Cookie Without 'HttpOnly' Flag",
-- 
cgit v1.2.3