5 files changed, 29 insertions, 15 deletions
diff --git a/server/sonar-web/src/main/js/apps/code/actions/index.js b/server/sonar-web/src/main/js/apps/code/actions/index.js
index 6bca96a7b02..6f08f352e86 100644
--- a/server/sonar-web/src/main/js/apps/code/actions/index.js
+++ b/server/sonar-web/src/main/js/apps/code/actions/index.js
@@ -27,8 +27,9 @@ import { getComponentUrl } from '../../../helpers/urls';
 
 const METRICS = [
   'ncloc',
-  'sqale_index',
-  'violations',
+  'code_smells',
+  'bugs',
+  'vulnerabilities',
   'duplicated_lines_density',
   'alert_status'
 ];
diff --git a/server/sonar-web/src/main/js/apps/code/components/Component.js b/server/sonar-web/src/main/js/apps/code/components/Component.js
index 5b87868019c..1f025708713 100644
--- a/server/sonar-web/src/main/js/apps/code/components/Component.js
+++ b/server/sonar-web/src/main/js/apps/code/components/Component.js
@@ -108,15 +108,23 @@ class Component extends React.Component {
             <div className="code-components-cell">
               <ComponentMeasure
                   component={component}
-                  metricKey="sqale_index"
-                  metricType="SHORT_WORK_DUR"/>
+                  metricKey="code_smells"
+                  metricType="SHORT_INT"/>
+            </div>
+          </td>
+          <td className="thin nowrap text-right">
+            <div className="code-components-cell">
+              <ComponentMeasure
+                  component={component}
+                  metricKey="bugs"
+                  metricType="SHORT_INT"/>
             </div>
           </td>
           <td className="thin nowrap text-right">
             <div className="code-components-cell">
               <ComponentMeasure
                   component={component}
-                  metricKey="violations"
+                  metricKey="vulnerabilities"
                   metricType="SHORT_INT"/>
             </div>
           </td>
diff --git a/server/sonar-web/src/main/js/apps/code/components/ComponentsHeader.js b/server/sonar-web/src/main/js/apps/code/components/ComponentsHeader.js
index 98c8a82b91a..97d489214f0 100644
--- a/server/sonar-web/src/main/js/apps/code/components/ComponentsHeader.js
+++ b/server/sonar-web/src/main/js/apps/code/components/ComponentsHeader.js
@@ -27,19 +27,22 @@ const ComponentsHeader = ({ baseComponent }) => (
       <tr>
         <th className="thin nowrap">&nbsp;</th>
         <th>&nbsp;</th>
-        <th className="thin nowrap text-right">
+        <th className="thin nowrap text-right code-components-cell">
           {baseComponent && translate('metric.ncloc.name')}
         </th>
-        <th className="thin nowrap text-right">
-          {baseComponent && translate('metric.sqale_index.short_name')}
+        <th className="thin nowrap text-right code-components-cell">
+          {baseComponent && translate('metric.code_smells.name')}
         </th>
-        <th className="thin nowrap text-right">
-          {baseComponent && translate('metric.violations.name')
-          }</th>
-        <th className="thin nowrap text-right">
+        <th className="thin nowrap text-right code-components-cell">
+          {baseComponent && translate('metric.bugs.name')}
+        </th>
+        <th className="thin nowrap text-right code-components-cell">
+          {baseComponent && translate('metric.vulnerabilities.name')}
+        </th>
+        <th className="thin nowrap text-right code-components-cell">
           {baseComponent && translate('metric.coverage.name')}
         </th>
-        <th className="thin nowrap text-right">
+        <th className="thin nowrap text-right code-components-cell">
           {baseComponent && translate('metric.duplicated_lines_density.short_name')}
         </th>
       </tr>
diff --git a/server/sonar-web/src/main/js/apps/code/styles/code.css b/server/sonar-web/src/main/js/apps/code/styles/code.css
index f5ffda5a8e0..90fe862a144 100644
--- a/server/sonar-web/src/main/js/apps/code/styles/code.css
+++ b/server/sonar-web/src/main/js/apps/code/styles/code.css
@@ -25,7 +25,9 @@
 }
 
 .code-components-cell {
-  width: 100px;
+  min-width: 80px;
+  padding-left: 30px !important;
+  box-sizing: border-box;
 }
 
 .code-truncated {
diff --git a/server/sonar-web/src/main/less/init/tables.less b/server/sonar-web/src/main/less/init/tables.less
index 884f3ee0342..d2ace99a05b 100644
--- a/server/sonar-web/src/main/less/init/tables.less
+++ b/server/sonar-web/src/main/less/init/tables.less
@@ -42,7 +42,7 @@ table {
 table.data > thead > tr > th {
   vertical-align: top;
   font-size: 93%;
-  padding: 4px 7px 4px 3px;
+  padding: 5px;
   line-height: 1.4;
   text-transform: uppercase;