SONAR-8713 Add issue type icons to SQ interface

21 files changed, 297 insertions, 19 deletions

diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutIssues.js b/server/sonar-web/src/main/js/apps/about/components/AboutIssues.js
index dd2f0b3584e..8213bf6316c 100644
--- a/server/sonar-web/src/main/js/apps/about/components/AboutIssues.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutIssues.js
@@ -19,23 +19,40 @@
  */
 import React from 'react';
 import { translate } from '../../../helpers/l10n';
+import BugIcon from '../../../components/ui/BugIcon';
+import VulnerabilityIcon from '../../../components/ui/VulnerabilityIcon';
+import CodeSmellIcon from '../../../components/ui/CodeSmellIcon';
 
 export default class AboutIssues extends React.Component {
-
   render () {
     return (
         <div className="boxed-group">
           <h2>{translate('about_page.quality_model')}</h2>
 
           <div className="boxed-group-inner clearfix">
-            <h3 className="spacer-bottom">{translate('issue.type.BUG.plural')}</h3>
-            <p className="about-page-text">{translate('about_page.quality_model.bugs')}</p>
+            <h3 className="spacer-bottom">
+              <span className="little-spacer-right"><BugIcon/></span>
+              {translate('issue.type.BUG.plural')}
+            </h3>
+            <p className="about-page-text">
+              {translate('about_page.quality_model.bugs')}
+            </p>
 
-            <h3 className="big-spacer-top spacer-bottom">{translate('issue.type.VULNERABILITY.plural')}</h3>
-            <p className="about-page-text">{translate('about_page.quality_model.vulnerabilities')}</p>
+            <h3 className="big-spacer-top spacer-bottom">
+              <span className="little-spacer-right"><VulnerabilityIcon/></span>
+              {translate('issue.type.VULNERABILITY.plural')}
+            </h3>
+            <p className="about-page-text">
+              {translate('about_page.quality_model.vulnerabilities')}
+            </p>
 
-            <h3 className="big-spacer-top spacer-bottom">{translate('issue.type.CODE_SMELL.plural')}</h3>
-            <p className="about-page-text">{translate('about_page.quality_model.code_smells')}</p>
+            <h3 className="big-spacer-top spacer-bottom">
+              <span className="little-spacer-right"><CodeSmellIcon/></span>
+              {translate('issue.type.CODE_SMELL.plural')}
+            </h3>
+            <p className="about-page-text">
+              {translate('about_page.quality_model.code_smells')}
+            </p>
           </div>
         </div>
     );
diff --git a/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypes.js b/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypes.js
index 28b3d1ae8bb..d55a975fd69 100644
--- a/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypes.js
+++ b/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypes.js
@@ -22,6 +22,9 @@ import { Link } from 'react-router';
 import { formatMeasure } from '../../../helpers/measures';
 import { translate } from '../../../helpers/l10n';
 import { getIssuesUrl } from '../../../helpers/urls';
+import BugIcon from '../../../components/ui/BugIcon';
+import VulnerabilityIcon from '../../../components/ui/VulnerabilityIcon';
+import CodeSmellIcon from '../../../components/ui/CodeSmellIcon';
 
 export default class EntryIssueTypes extends React.Component {
   static propTypes = {
@@ -43,6 +46,7 @@ export default class EntryIssueTypes extends React.Component {
                   {formatMeasure(bugs, 'SHORT_INT')}
                 </Link>
               </div>
+              <span className="little-spacer-right"><BugIcon/></span>
               {translate('issue.type.BUG.plural')}
             </li>
             <li>
@@ -52,6 +56,7 @@ export default class EntryIssueTypes extends React.Component {
                   {formatMeasure(vulnerabilities, 'SHORT_INT')}
                 </Link>
               </div>
+              <span className="little-spacer-right"><VulnerabilityIcon/></span>
               {translate('issue.type.VULNERABILITY.plural')}
             </li>
             <li>
@@ -61,6 +66,7 @@ export default class EntryIssueTypes extends React.Component {
                   {formatMeasure(codeSmells, 'SHORT_INT')}
                 </Link>
               </div>
+              <span className="little-spacer-right"><CodeSmellIcon/></span>
               {translate('issue.type.CODE_SMELL.plural')}
             </li>
           </ul>
diff --git a/server/sonar-web/src/main/js/apps/about/styles.css b/server/sonar-web/src/main/js/apps/about/styles.css
index a61922f9218..46cd9c9375f 100644
--- a/server/sonar-web/src/main/js/apps/about/styles.css
+++ b/server/sonar-web/src/main/js/apps/about/styles.css
@@ -75,7 +75,7 @@
 .about-page-issue-type-number {
   display: inline-block;
   min-width: 60px;
-  margin-right: 8px;
+  margin-right: 16px;
   text-align: right;
 }
 
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/templates/coding-rules-workspace-list-item.hbs b/server/sonar-web/src/main/js/apps/coding-rules/templates/coding-rules-workspace-list-item.hbs
index e1b7cc0dc81..9bb20b2bd79 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/templates/coding-rules-workspace-list-item.hbs
+++ b/server/sonar-web/src/main/js/apps/coding-rules/templates/coding-rules-workspace-list-item.hbs
@@ -32,7 +32,7 @@
         &nbsp;&nbsp;&nbsp;
         <span class="note" data-toggle="tooltip" data-placement="bottom"
               title="{{t 'coding_rules.type.tooltip' this.type}}">
-          {{issueType this.type}}
+          {{issueTypeIcon this.type}} {{issueType this.type}}
         </span>
         {{#notEmpty tags}}
           &nbsp;&nbsp;&nbsp;
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/templates/facets/coding-rules-type-facet.hbs b/server/sonar-web/src/main/js/apps/coding-rules/templates/facets/coding-rules-type-facet.hbs
index b5c53585993..b985ee45f17 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/templates/facets/coding-rules-type-facet.hbs
+++ b/server/sonar-web/src/main/js/apps/coding-rules/templates/facets/coding-rules-type-facet.hbs
@@ -4,7 +4,7 @@
   {{#each values}}
     <a class="facet search-navigator-facet js-facet"
        data-value="{{val}}">
-      <span class="facet-name">{{t 'issue.type' val}}</span>
+      <span class="facet-name">{{issueTypeIcon val}} {{t 'issue.type' val}}</span>
       <span class="facet-stat">
         {{numberShort count}}
       </span>
diff --git a/server/sonar-web/src/main/js/apps/component-measures/details/MeasureDetailsHeader.js b/server/sonar-web/src/main/js/apps/component-measures/details/MeasureDetailsHeader.js
index c3769f4b5d0..2771c1414bf 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/details/MeasureDetailsHeader.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/details/MeasureDetailsHeader.js
@@ -25,11 +25,13 @@ import { ComplexityDistribution } from '../../../components/shared/complexity-di
 import { isDiffMetric } from '../utils';
 import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
 import { getLocalizedMetricName } from '../../../helpers/l10n';
+import IssueTypeIcon from '../../../components/ui/IssueTypeIcon';
 
 export default function MeasureDetailsHeader ({ measure, metric, secondaryMeasure, leakPeriod }) {
   return (
       <header className="measure-details-header">
         <h2 className="measure-details-metric">
+          <IssueTypeIcon query={metric.key} className="little-spacer-right"/>
           {getLocalizedMetricName(metric)}
         </h2>
 
diff --git a/server/sonar-web/src/main/js/apps/component-measures/home/MeasuresList.js b/server/sonar-web/src/main/js/apps/component-measures/home/MeasuresList.js
index 5186914c1b5..41045cbc4c2 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/home/MeasuresList.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/home/MeasuresList.js
@@ -21,6 +21,7 @@ import React from 'react';
 import { Link } from 'react-router';
 import MeasureListValue from './MeasureListValue';
 import { getLocalizedMetricName } from '../../../helpers/l10n';
+import IssueTypeIcon from '../../../components/ui/IssueTypeIcon';
 
 const MeasuresList = ({ measures, component, className = 'domain-measures' }) => {
   return (
@@ -31,9 +32,10 @@ const MeasuresList = ({ measures, component, className = 'domain-measures' }) =>
                 id={`measure-${measure.metric.key}`}>
               <Link to={{ pathname: `/component_measures/metric/${measure.metric.key}`, query: { id: component.key } }}>
                 <div className="domain-measures-name">
-                    <span id={`measure-${measure.metric.key}-name`}>
-                      {getLocalizedMetricName(measure.metric)}
-                    </span>
+                  <IssueTypeIcon query={measure.metric.key} className="little-spacer-right"/>
+                  <span id={`measure-${measure.metric.key}-name`}>
+                    {getLocalizedMetricName(measure.metric)}
+                  </span>
                 </div>
 
                 <MeasureListValue measure={measure}/>
diff --git a/server/sonar-web/src/main/js/apps/component-measures/styles.css b/server/sonar-web/src/main/js/apps/component-measures/styles.css
index fe0a70df496..5020b9b63ac 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/styles.css
+++ b/server/sonar-web/src/main/js/apps/component-measures/styles.css
@@ -68,7 +68,7 @@
   margin-top: 8px;
 }
 
-.main-domain-measures .domain-measures-name > span {
+.main-domain-measures .domain-measures-name > span:last-child {
   border-bottom: 1px solid #cae3f2;
 }
 
diff --git a/server/sonar-web/src/main/js/apps/issues/templates/facets/issues-type-facet.hbs b/server/sonar-web/src/main/js/apps/issues/templates/facets/issues-type-facet.hbs
index 87ac51ac1a4..f97ada41dca 100644
--- a/server/sonar-web/src/main/js/apps/issues/templates/facets/issues-type-facet.hbs
+++ b/server/sonar-web/src/main/js/apps/issues/templates/facets/issues-type-facet.hbs
@@ -4,7 +4,7 @@
   {{#each values}}
     <a class="facet search-navigator-facet js-facet"
        data-value="{{val}}">
-      <span class="facet-name">{{t 'issue.type' val}}</span>
+      <span class="facet-name">{{issueTypeIcon val}} {{t 'issue.type' val}}</span>
       <span class="facet-stat">
         {{#eq ../state.facetMode 'count'}}{{numberShort count}}{{else}}{{formatMeasure count 'SHORT_WORK_DUR'}}{{/eq}}
       </span>
diff --git a/server/sonar-web/src/main/js/apps/overview/main/BugsAndVulnerabilities.js b/server/sonar-web/src/main/js/apps/overview/main/BugsAndVulnerabilities.js
index 7270fb22500..953cffb8188 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/BugsAndVulnerabilities.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/BugsAndVulnerabilities.js
@@ -23,6 +23,8 @@ import enhance from './enhance';
 import LeakPeriodLegend from '../components/LeakPeriodLegend';
 import { getMetricName } from '../helpers/metrics';
 import { translate } from '../../../helpers/l10n';
+import BugIcon from '../../../components/ui/BugIcon';
+import VulnerabilityIcon from '../../../components/ui/VulnerabilityIcon';
 
 class BugsAndVulnerabilities extends React.Component {
   renderHeader () {
@@ -64,6 +66,7 @@ class BugsAndVulnerabilities extends React.Component {
                 {this.props.renderIssues('new_bugs', 'BUG')}
               </div>
               <div className="overview-domain-measure-label">
+                <span className="little-spacer-right"><BugIcon/></span>
                 {getMetricName('new_bugs')}
               </div>
             </div>
@@ -73,6 +76,7 @@ class BugsAndVulnerabilities extends React.Component {
                 {this.props.renderIssues('new_vulnerabilities', 'VULNERABILITY')}
               </div>
               <div className="overview-domain-measure-label">
+                <span className="little-spacer-right"><VulnerabilityIcon/></span>
                 {getMetricName('new_vulnerabilities')}
               </div>
             </div>
@@ -93,6 +97,7 @@ class BugsAndVulnerabilities extends React.Component {
                   {this.props.renderRating('reliability_rating')}
                 </div>
                 <div className="overview-domain-measure-label">
+                  <span className="little-spacer-right"><BugIcon/></span>
                   {getMetricName('bugs')}
                 </div>
               </div>
@@ -105,6 +110,7 @@ class BugsAndVulnerabilities extends React.Component {
                   {this.props.renderRating('security_rating')}
                 </div>
                 <div className="overview-domain-measure-label">
+                  <span className="little-spacer-right"><VulnerabilityIcon/></span>
                   {getMetricName('vulnerabilities')}
                 </div>
               </div>
diff --git a/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js b/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js
index 9abf8e0826e..7994903186a 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js
@@ -25,6 +25,7 @@ import { getMetricName } from '../helpers/metrics';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { formatMeasure, isDiffMetric } from '../../../helpers/measures';
 import { getComponentIssuesUrl } from '../../../helpers/urls';
+import CodeSmellIcon from '../../../components/ui/CodeSmellIcon';
 
 class CodeSmells extends React.Component {
   renderHeader () {
@@ -97,6 +98,7 @@ class CodeSmells extends React.Component {
                 {this.props.renderIssues('new_code_smells', 'CODE_SMELL')}
               </div>
               <div className="overview-domain-measure-label">
+                <span className="little-spacer-right"><CodeSmellIcon/></span>
                 {getMetricName('new_code_smells')}
               </div>
             </div>
@@ -131,6 +133,7 @@ class CodeSmells extends React.Component {
                   {this.props.renderIssues('code_smells', 'CODE_SMELL')}
                 </div>
                 <div className="overview-domain-measure-label">
+                  <span className="little-spacer-right"><CodeSmellIcon/></span>
                   {getMetricName('code_smells')}
                 </div>
               </div>
diff --git a/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGateCondition.js b/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGateCondition.js
index 8ec463a3380..e490522146a 100644
--- a/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGateCondition.js
+++ b/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGateCondition.js
@@ -27,6 +27,7 @@ import { getPeriodValue, isDiffMetric, formatMeasure } from '../../../helpers/me
 import { translate } from '../../../helpers/l10n';
 import { getPeriod, getPeriodDate } from '../../../helpers/periods';
 import { getComponentIssuesUrl } from '../../../helpers/urls';
+import IssueTypeIcon from '../../../components/ui/IssueTypeIcon';
 
 export default class QualityGateCondition extends React.Component {
   props: {
@@ -161,6 +162,7 @@ export default class QualityGateCondition extends React.Component {
 
           <div>
             <div className="overview-quality-gate-condition-metric">
+              <IssueTypeIcon query={metric.key} className="spacer-right"/>
               {metric.name}
             </div>
             {!isDiff && period != null && (
diff --git a/server/sonar-web/src/main/js/apps/overview/qualityGate/__tests__/__snapshots__/QualityGateCondition-test.js.snap b/server/sonar-web/src/main/js/apps/overview/qualityGate/__tests__/__snapshots__/QualityGateCondition-test.js.snap
index 25bcdd01357..9b579e3b99d 100644
--- a/server/sonar-web/src/main/js/apps/overview/qualityGate/__tests__/__snapshots__/QualityGateCondition-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/overview/qualityGate/__tests__/__snapshots__/QualityGateCondition-test.js.snap
@@ -26,6 +26,9 @@ exports[`test new_open_issues 1`] = `
     <div>
       <div
         className="overview-quality-gate-condition-metric">
+        <IssueTypeIcon
+          className="spacer-right"
+          query="new_open_issues" />
         new_open_issues
       </div>
       <div
@@ -67,6 +70,9 @@ exports[`test new_reliability_rating 1`] = `
     <div>
       <div
         className="overview-quality-gate-condition-metric">
+        <IssueTypeIcon
+          className="spacer-right"
+          query="new_reliability_rating" />
         new_reliability_rating
       </div>
       <div
@@ -108,6 +114,9 @@ exports[`test new_security_rating 1`] = `
     <div>
       <div
         className="overview-quality-gate-condition-metric">
+        <IssueTypeIcon
+          className="spacer-right"
+          query="new_security_rating" />
         new_security_rating
       </div>
       <div
@@ -149,6 +158,9 @@ exports[`test new_sqale_rating 1`] = `
     <div>
       <div
         className="overview-quality-gate-condition-metric">
+        <IssueTypeIcon
+          className="spacer-right"
+          query="new_sqale_rating" />
         new_sqale_rating
       </div>
       <div
@@ -190,6 +202,9 @@ exports[`test open_issues 1`] = `
     <div>
       <div
         className="overview-quality-gate-condition-metric">
+        <IssueTypeIcon
+          className="spacer-right"
+          query="open_issues" />
         Open open_issues
       </div>
       <div
@@ -231,6 +246,9 @@ exports[`test reliability_rating 1`] = `
     <div>
       <div
         className="overview-quality-gate-condition-metric">
+        <IssueTypeIcon
+          className="spacer-right"
+          query="reliability_rating" />
         reliability_rating
       </div>
       <div
@@ -272,6 +290,9 @@ exports[`test security_rating 1`] = `
     <div>
       <div
         className="overview-quality-gate-condition-metric">
+        <IssueTypeIcon
+          className="spacer-right"
+          query="security_rating" />
         security_rating
       </div>
       <div
@@ -313,6 +334,9 @@ exports[`test sqale_rating 1`] = `
     <div>
       <div
         className="overview-quality-gate-condition-metric">
+        <IssueTypeIcon
+          className="spacer-right"
+          query="sqale_rating" />
         sqale_rating
       </div>
       <div
diff --git a/server/sonar-web/src/main/js/apps/overview/styles.css b/server/sonar-web/src/main/js/apps/overview/styles.css
index a209df9cd3e..a924adb27c1 100644
--- a/server/sonar-web/src/main/js/apps/overview/styles.css
+++ b/server/sonar-web/src/main/js/apps/overview/styles.css
@@ -75,7 +75,7 @@
 
 .overview-quality-gate-condition-metric,
 .overview-quality-gate-condition-period {
-  max-width: 120px;
+  max-width: 125px;
   line-height: 16px;
   font-size: 12px;
 }
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRules.js b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRules.js
index 3284ed59aad..bc909ff326e 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRules.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRules.js
@@ -26,6 +26,7 @@ import { searchRules, takeFacet } from '../../../api/rules';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { formatMeasure } from '../../../helpers/measures';
 import { getRulesUrl, getDeprecatedActiveRulesUrl } from '../../../helpers/urls';
+import IssueTypeIcon from '../../../components/ui/IssueTypeIcon';
 
 const TYPES = ['BUG', 'VULNERABILITY', 'CODE_SMELL'];
 
@@ -162,7 +163,12 @@ export default class ProfileRules extends React.Component {
   }
 
   renderTitleForType (type) {
-    return <span>{translate('issue.type', type, 'plural')}</span>;
+    return (
+        <span>
+          <IssueTypeIcon query={type} className="little-spacer-right"/>
+          {translate('issue.type', type, 'plural')}
+        </span>
+    );
   }
 
   renderCountForType (type) {
diff --git a/server/sonar-web/src/main/js/components/issue/templates/issue.hbs b/server/sonar-web/src/main/js/components/issue/templates/issue.hbs
index eb469e40c5f..3f4975d1f27 100644
--- a/server/sonar-web/src/main/js/components/issue/templates/issue.hbs
+++ b/server/sonar-web/src/main/js/components/issue/templates/issue.hbs
@@ -46,10 +46,10 @@
           <li class="issue-meta">
             {{#inArray actions "set_severity"}}
               <button class="button-link issue-action issue-action-with-options js-issue-set-type">
-                {{issueType this.type}}&nbsp;<i class="icon-dropdown"></i>
+                {{issueTypeIcon this.type}} {{issueType this.type}}&nbsp;<i class="icon-dropdown"></i>
               </button>
             {{else}}
-              {{issueType this.type}}
+              {{issueTypeIcon this.type}} {{issueType this.type}}
             {{/inArray}}
           </li>
 
diff --git a/server/sonar-web/src/main/js/components/ui/BugIcon.js b/server/sonar-web/src/main/js/components/ui/BugIcon.js
new file mode 100644
index 00000000000..06653a101f9
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/ui/BugIcon.js
@@ -0,0 +1,32 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+// @flow
+import React from 'react';
+
+export default class BugIcon extends React.Component {
+  render () {
+    /* eslint-disable max-len */
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" style={{ position: 'relative', top: -1, verticalAlign: 'middle' }}>
+          <path style={{ fill: 'currentColor' }} d="M10.3 8l1.4 1.2.7-.8L10.7 7H9v-.3l2-2.3V2h-1v2L9 5.1V4h-.2c-.1-.8-.6-1.5-1.3-1.8L8.9.8 8.1.1 6.5 1.7 4.9.1l-.7.7 1.4 1.4c-.8.3-1.3 1-1.4 1.8H4v1.1L3 4V2H2v2.3l2 2.3V7H2.3L.7 8.4l.7.8L2.7 8H4v.3l-2 1.9V13h1v-2.4l1-1C4 11 5.1 12 6.4 12h.8c.7 0 1.4-.3 1.8-.9.3-.4.3-.9.2-1.4l.9.9V13h1v-2.8L9 8.3V8h1.3zM6 10V4.3h1V10H6z"/>
+        </svg>
+    );
+  }
+}
diff --git a/server/sonar-web/src/main/js/components/ui/CodeSmellIcon.js b/server/sonar-web/src/main/js/components/ui/CodeSmellIcon.js
new file mode 100644
index 00000000000..29bc8792d66
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/ui/CodeSmellIcon.js
@@ -0,0 +1,32 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+// @flow
+import React from 'react';
+
+export default class CodeSmellIcon extends React.Component {
+  render () {
+    /* eslint-disable max-len */
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" style={{ position: 'relative', top: -1, verticalAlign: 'middle' }}>
+          <path style={{ fill: 'currentColor' }} d="M6.5 0C2.9 0 0 2.9 0 6.5S2.9 13 6.5 13 13 10.1 13 6.5 10.1 0 6.5 0zM6 6h1v1H6V6zm-4.1.2c-.1 0-.2-.1-.2-.2 0-.4.2-1.3.7-2.1.5-1 1.3-1.5 1.6-1.7.1-.1.2 0 .3.1l1.4 2.5c0 .1 0 .2-.1.3-.2.1-.3.3-.4.4-.1.2-.2.4-.2.6 0 .1-.1.2-.2.2l-2.9-.1zm6.7 4.7c-.3.2-1.2.5-2.2.5-1 0-1.8-.4-2.2-.5-.1-.1-.1-.2-.1-.3l1.4-2.5c.1-.1.2-.1.3-.1.2.1.4.1.6.1.2 0 .4 0 .6-.1.1 0 .2 0 .3.1l1.4 2.5c0 .1 0 .2-.1.3zm2.6-4.5l-2.8.1c-.1 0-.2-.1-.2-.2 0-.2-.1-.4-.2-.6l-.4-.4c-.1 0-.2-.2-.1-.2l1.4-2.5c.1-.1.2-.1.3-.1.3.2 1 .7 1.6 1.6.5.9.6 1.8.7 2.1-.1.1-.1.2-.3.2z"/>
+        </svg>
+    );
+  }
+}
diff --git a/server/sonar-web/src/main/js/components/ui/IssueTypeIcon.js b/server/sonar-web/src/main/js/components/ui/IssueTypeIcon.js
new file mode 100644
index 00000000000..5abb046379b
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/ui/IssueTypeIcon.js
@@ -0,0 +1,62 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+// @flow
+import React from 'react';
+import BugIcon from './BugIcon';
+import VulnerabilityIcon from './VulnerabilityIcon';
+import CodeSmellIcon from './CodeSmellIcon';
+
+export default class IssueTypeIcon extends React.Component {
+  props: {
+    className?: string,
+    query: string
+  };
+
+  renderIcon () {
+    switch (this.props.query.toLowerCase()) {
+      case 'bug':
+      case 'bugs':
+      case 'new_bugs':
+        return <BugIcon/>;
+      case 'vulnerability':
+      case 'vulnerabilities':
+      case 'new_vulnerabilities':
+        return <VulnerabilityIcon/>;
+      case 'code_smell':
+      case 'code_smells':
+      case 'new_code_smells':
+        return <CodeSmellIcon/>;
+      default:
+        return null;
+    }
+  }
+
+  render () {
+    const icon = this.renderIcon();
+
+    if (!icon) {
+      return null;
+    }
+
+    return this.props.className ?
+        <span className={this.props.className}>{icon}</span> :
+        icon;
+  }
+}
diff --git a/server/sonar-web/src/main/js/components/ui/VulnerabilityIcon.js b/server/sonar-web/src/main/js/components/ui/VulnerabilityIcon.js
new file mode 100644
index 00000000000..01ce56348fb
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/ui/VulnerabilityIcon.js
@@ -0,0 +1,33 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+// @flow
+import React from 'react';
+
+export default class VulnerabilityIcon extends React.Component {
+  render () {
+    /* eslint-disable max-len */
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 1 12 15" width="14" height="14" style={{ position: 'relative', top: -1, verticalAlign: 'middle' }}>
+          <path style={{ fill: 'currentColor' }} d="M7.5 6H3V3.6c0-1 .8-1.9 1.9-1.9s1.9.8 1.9 1.9c0 .3.2.5.5.5s.5-.2.5-.5C7.8 2 6.5.7 4.9.7S2 2.1 2 3.6V6h-.5C.7 6 0 6.7 0 7.5v5c0 .8.7 1.5 1.5 1.5h6c.8 0 1.5-.7 1.5-1.5v-5C9 6.7 8.3 6 7.5 6zM3 9.5C3 8.7 3.7 8 4.5 8S6 8.7 6 9.5c0 .7-.4 1.2-1 1.4V12H4v-1.1c-.6-.2-1-.7-1-1.4zM10.9 2.9L9.5 3c.1 0 .2 0 .3-.1l1-1c.2-.2.2-.5 0-.7s-.5-.2-.7 0l-1 1c-.1.1-.1.5 0 .7.1 0 .3.1.4.1-.3 0-.5.3-.5.5 0 .3.2.5.5.5l1.4-.1c.3 0 .5-.3.5-.5 0-.3-.3-.5-.5-.5z"/>
+          <path style={{ fill: 'currentColor' }} d="M9.8 4.1c-.2-.2-.5-.1-.7.1-.2.2-.1.5.1.7l1.1.9c.1.1.2.1.3.1.1 0 .3-.1.4-.2.2-.2.1-.5-.1-.7l-1.1-.9z"/>
+        </svg>
+    );
+  }
+}
diff --git a/server/sonar-web/src/main/js/helpers/handlebars/issueTypeIcon.js b/server/sonar-web/src/main/js/helpers/handlebars/issueTypeIcon.js
new file mode 100644
index 00000000000..d6a331bed68
--- /dev/null
+++ b/server/sonar-web/src/main/js/helpers/handlebars/issueTypeIcon.js
@@ -0,0 +1,51 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import Handlebars from 'handlebars/runtime';
+
+/* eslint-disable max-len */
+const bug = new Handlebars.default.SafeString(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" style="position: relative; top: -1px; vertical-align: middle">
+      <path style="fill: currentColor" d="M10.3 8l1.4 1.2.7-.8L10.7 7H9v-.3l2-2.3V2h-1v2L9 5.1V4h-.2c-.1-.8-.6-1.5-1.3-1.8L8.9.8 8.1.1 6.5 1.7 4.9.1l-.7.7 1.4 1.4c-.8.3-1.3 1-1.4 1.8H4v1.1L3 4V2H2v2.3l2 2.3V7H2.3L.7 8.4l.7.8L2.7 8H4v.3l-2 1.9V13h1v-2.4l1-1C4 11 5.1 12 6.4 12h.8c.7 0 1.4-.3 1.8-.9.3-.4.3-.9.2-1.4l.9.9V13h1v-2.8L9 8.3V8h1.3zM6 10V4.3h1V10H6z"/>
+    </svg>`
+);
+const vulnerability = new Handlebars.default.SafeString(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" style="position: relative; top: -1px; vertical-align: middle">
+      <path style="fill: currentColor" d="M7.5 6H3V3.6c0-1 .8-1.9 1.9-1.9s1.9.8 1.9 1.9c0 .3.2.5.5.5s.5-.2.5-.5C7.8 2 6.5.7 4.9.7S2 2.1 2 3.6V6h-.5C.7 6 0 6.7 0 7.5v5c0 .8.7 1.5 1.5 1.5h6c.8 0 1.5-.7 1.5-1.5v-5C9 6.7 8.3 6 7.5 6zM3 9.5C3 8.7 3.7 8 4.5 8S6 8.7 6 9.5c0 .7-.4 1.2-1 1.4V12H4v-1.1c-.6-.2-1-.7-1-1.4zM10.9 2.9L9.5 3c.1 0 .2 0 .3-.1l1-1c.2-.2.2-.5 0-.7s-.5-.2-.7 0l-1 1c-.1.1-.1.5 0 .7.1 0 .3.1.4.1-.3 0-.5.3-.5.5 0 .3.2.5.5.5l1.4-.1c.3 0 .5-.3.5-.5 0-.3-.3-.5-.5-.5z"/>
+      <path style="fill: currentColor" d="M9.8 4.1c-.2-.2-.5-.1-.7.1-.2.2-.1.5.1.7l1.1.9c.1.1.2.1.3.1.1 0 .3-.1.4-.2.2-.2.1-.5-.1-.7l-1.1-.9z"/>
+    </svg>`
+);
+const codeSmell = new Handlebars.default.SafeString(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" style="position: relative; top: -1px; vertical-align: middle">
+      <path style="fill: currentColor" d="M6.5 0C2.9 0 0 2.9 0 6.5S2.9 13 6.5 13 13 10.1 13 6.5 10.1 0 6.5 0zM6 6h1v1H6V6zm-4.1.2c-.1 0-.2-.1-.2-.2 0-.4.2-1.3.7-2.1.5-1 1.3-1.5 1.6-1.7.1-.1.2 0 .3.1l1.4 2.5c0 .1 0 .2-.1.3-.2.1-.3.3-.4.4-.1.2-.2.4-.2.6 0 .1-.1.2-.2.2l-2.9-.1zm6.7 4.7c-.3.2-1.2.5-2.2.5-1 0-1.8-.4-2.2-.5-.1-.1-.1-.2-.1-.3l1.4-2.5c.1-.1.2-.1.3-.1.2.1.4.1.6.1.2 0 .4 0 .6-.1.1 0 .2 0 .3.1l1.4 2.5c0 .1 0 .2-.1.3zm2.6-4.5l-2.8.1c-.1 0-.2-.1-.2-.2 0-.2-.1-.4-.2-.6l-.4-.4c-.1 0-.2-.2-.1-.2l1.4-2.5c.1-.1.2-.1.3-.1.3.2 1 .7 1.6 1.6.5.9.6 1.8.7 2.1-.1.1-.1.2-.3.2z"/>
+    </svg>`
+);
+
+module.exports = function (type) {
+  switch (type) {
+    case 'BUG':
+      return bug;
+    case 'VULNERABILITY':
+      return vulnerability;
+    case 'CODE_SMELL':
+      return codeSmell;
+    default:
+      return '';
+  }
+};