From: Pascal Mugnier <pascal.mugnier@sonarsource.com>
Date: Wed, 11 Apr 2018 07:27:52 +0000 (+0200)
Subject: Feature/pm/hardening 5 6 04 (#119)
X-Git-Tag: 7.5~1374
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=c978976137ae9e4cc7197a75ae24708e1c027d80;p=sonarqube.git

Feature/pm/hardening 5 6 04 (#119)
---

diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChart.js b/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChart.js
index 4c6ae9e9b4e..082dad7f72d 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChart.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChart.js
@@ -22,6 +22,8 @@ import React from 'react';
 import EmptyResult from './EmptyResult';
 import OriginalBubbleChart from '../../../components/charts/BubbleChart';
 import ColorRatingsLegend from '../../../components/charts/ColorRatingsLegend';
+import Tooltip from '../../../components/controls/Tooltip';
+import HelpIcon from '../../../components/icons-components/HelpIcon';
 import { formatMeasure, isDiffMetric } from '../../../helpers/measures';
 import {
   getLocalizedMetricDomain,
@@ -99,6 +101,15 @@ export default class BubbleChart extends React.PureComponent {
   handleBubbleClick = (component /*: ComponentEnhanced */) =>
     this.props.updateSelected(component.refKey || component.key);
 
+  getDescription(domain /*: string */) {
+    const description = `component_measures.overview.${domain}.description`;
+    const translatedDescription = translate(description);
+    if (description === translatedDescription) {
+      return null;
+    }
+    return translatedDescription;
+  }
+
   renderBubbleChart(
     metrics /*: {
       x: Metric ,
@@ -158,7 +169,14 @@ export default class BubbleChart extends React.PureComponent {
         );
     return (
       <div className="measure-overview-bubble-chart-header">
-        <span className="measure-overview-bubble-chart-title">{title}</span>
+        <span className="measure-overview-bubble-chart-title">
+          {title}
+          <Tooltip overlay={this.getDescription(domain)}>
+            <span className="spacer-left text-info">
+              <HelpIcon />
+            </span>
+          </Tooltip>
+        </span>
         <span className="measure-overview-bubble-chart-legend">
           <span className="note">
             {colorsMetric && (
@@ -185,15 +203,6 @@ export default class BubbleChart extends React.PureComponent {
     );
   }
 
-  renderChartFooter(domain /*: string */) {
-    const description = `component_measures.overview.${domain}.description`;
-    const translatedDescription = translate(description);
-    if (description === translatedDescription) {
-      return null;
-    }
-    return <div className="measure-overview-bubble-chart-footer">{translatedDescription}</div>;
-  }
-
   render() {
     if (this.props.components.length <= 0) {
       return <EmptyResult />;
@@ -213,7 +222,6 @@ export default class BubbleChart extends React.PureComponent {
         <div className="measure-overview-bubble-chart-axis y">
           {getLocalizedMetricName(metrics.y)}
         </div>
-        {this.renderChartFooter(domain)}
       </div>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/projects/styles.css b/server/sonar-web/src/main/js/apps/projects/styles.css
index 8b6ada0cea8..9b741654e9c 100644
--- a/server/sonar-web/src/main/js/apps/projects/styles.css
+++ b/server/sonar-web/src/main/js/apps/projects/styles.css
@@ -268,6 +268,11 @@
   font-style: italic;
 }
 
+.measure-details-bubble-chart-title {
+  position: absolute;
+  left: 20px;
+}
+
 .measure-details-bubble-chart-axis {
   position: absolute;
   color: var(--secondFontColor);
@@ -276,7 +281,7 @@
 
 .measure-details-bubble-chart-axis.x {
   left: 50%;
-  bottom: 10px;
+  bottom: 16px;
   width: 500px;
   margin-left: -250px;
   text-align: center;
@@ -289,11 +294,11 @@
 }
 
 .measure-details-bubble-chart-axis.size {
-  left: 50%;
-  top: 10px;
-  width: 500px;
-  margin-left: -250px;
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  top: 16px;
+  width: 100%;
 }
 
 .projects-empty-list {
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/Coverage.tsx b/server/sonar-web/src/main/js/apps/projects/visualizations/Coverage.tsx
index 1a19f142217..344ac208b51 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/Coverage.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/Coverage.tsx
@@ -20,9 +20,11 @@
 import * as React from 'react';
 import SimpleBubbleChart from './SimpleBubbleChart';
 import { Project } from '../types';
+import { translate } from '../../../helpers/l10n';
 
 interface Props {
   displayOrganizations: boolean;
+  helpText: string;
   projects: Project[];
 }
 
@@ -30,10 +32,11 @@ export default function Coverage(props: Props) {
   return (
     <SimpleBubbleChart
       {...props}
+      sizeMetric={{ key: 'uncovered_lines', type: 'SHORT_INT' }}
+      title={translate('projects.visualization', 'coverage')}
       xMetric={{ key: 'complexity', type: 'SHORT_INT' }}
-      yMetric={{ key: 'coverage', type: 'PERCENT' }}
       yDomain={[100, 0]}
-      sizeMetric={{ key: 'uncovered_lines', type: 'SHORT_INT' }}
+      yMetric={{ key: 'coverage', type: 'PERCENT' }}
     />
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/Duplications.tsx b/server/sonar-web/src/main/js/apps/projects/visualizations/Duplications.tsx
index 97430228946..666823d3447 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/Duplications.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/Duplications.tsx
@@ -20,9 +20,11 @@
 import * as React from 'react';
 import SimpleBubbleChart from './SimpleBubbleChart';
 import { Project } from '../types';
+import { translate } from '../../../helpers/l10n';
 
 interface Props {
   displayOrganizations: boolean;
+  helpText: string;
   projects: Project[];
 }
 
@@ -30,9 +32,10 @@ export default function Duplications(props: Props) {
   return (
     <SimpleBubbleChart
       {...props}
+      sizeMetric={{ key: 'duplicated_blocks', type: 'SHORT_INT' }}
+      title={translate('projects.visualization', 'duplications')}
       xMetric={{ key: 'ncloc', type: 'SHORT_INT' }}
       yMetric={{ key: 'duplicated_lines_density', type: 'PERCENT' }}
-      sizeMetric={{ key: 'duplicated_blocks', type: 'SHORT_INT' }}
     />
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/Maintainability.tsx b/server/sonar-web/src/main/js/apps/projects/visualizations/Maintainability.tsx
index 73224f37723..7c61aa51c45 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/Maintainability.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/Maintainability.tsx
@@ -20,9 +20,11 @@
 import * as React from 'react';
 import SimpleBubbleChart from './SimpleBubbleChart';
 import { Project } from '../types';
+import { translate } from '../../../helpers/l10n';
 
 interface Props {
   displayOrganizations: boolean;
+  helpText: string;
   projects: Project[];
 }
 
@@ -30,10 +32,11 @@ export default function Maintainability(props: Props) {
   return (
     <SimpleBubbleChart
       {...props}
+      colorMetric="sqale_rating"
+      sizeMetric={{ key: 'code_smells', type: 'SHORT_INT' }}
+      title={translate('projects.visualization', 'maintainability')}
       xMetric={{ key: 'ncloc', type: 'SHORT_INT' }}
       yMetric={{ key: 'sqale_index', type: 'SHORT_WORK_DUR' }}
-      sizeMetric={{ key: 'code_smells', type: 'SHORT_INT' }}
-      colorMetric="sqale_rating"
     />
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/Reliability.tsx b/server/sonar-web/src/main/js/apps/projects/visualizations/Reliability.tsx
index 96aa91b4df5..20e5c12bea2 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/Reliability.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/Reliability.tsx
@@ -20,9 +20,11 @@
 import * as React from 'react';
 import SimpleBubbleChart from './SimpleBubbleChart';
 import { Project } from '../types';
+import { translate } from '../../../helpers/l10n';
 
 interface Props {
   displayOrganizations: boolean;
+  helpText: string;
   projects: Project[];
 }
 
@@ -30,10 +32,11 @@ export default function Reliability(props: Props) {
   return (
     <SimpleBubbleChart
       {...props}
+      colorMetric="reliability_rating"
+      sizeMetric={{ key: 'bugs', type: 'SHORT_INT' }}
+      title={translate('projects.visualization', 'reliability')}
       xMetric={{ key: 'ncloc', type: 'SHORT_INT' }}
       yMetric={{ key: 'reliability_remediation_effort', type: 'SHORT_WORK_DUR' }}
-      sizeMetric={{ key: 'bugs', type: 'SHORT_INT' }}
-      colorMetric="reliability_rating"
     />
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/Risk.tsx b/server/sonar-web/src/main/js/apps/projects/visualizations/Risk.tsx
index d7c004af86c..a82b86d69fd 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/Risk.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/Risk.tsx
@@ -25,6 +25,8 @@ import { formatMeasure } from '../../../helpers/measures';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { RATING_COLORS } from '../../../helpers/constants';
 import { getProjectUrl } from '../../../helpers/urls';
+import Tooltip from '../../../components/controls/Tooltip';
+import HelpIcon from '../../../components/icons-components/HelpIcon';
 
 const X_METRIC = 'sqale_index';
 const X_METRIC_TYPE = 'SHORT_WORK_DUR';
@@ -38,6 +40,7 @@ const COLOR_METRIC_TYPE = 'RATING';
 
 interface Props {
   displayOrganizations: boolean;
+  helpText: string;
   projects: Project[];
 }
 
@@ -126,6 +129,7 @@ export default class Risk extends React.PureComponent<Props> {
           padding={[80, 20, 60, 100]}
           yDomain={[100, 0]}
         />
+
         <div className="measure-details-bubble-chart-axis x">
           {translate('metric', X_METRIC, 'name')}
         </div>
@@ -133,17 +137,27 @@ export default class Risk extends React.PureComponent<Props> {
           {translate('metric', Y_METRIC, 'name')}
         </div>
         <div className="measure-details-bubble-chart-axis size">
-          <span className="spacer-right">
+          <span className="measure-details-bubble-chart-title">
+            {translate('projects.visualization.risk')}
+            <Tooltip overlay={this.props.helpText}>
+              <span className="spacer-left text-info">
+                <HelpIcon />
+              </span>
+            </Tooltip>
+          </span>
+          <div>
+            <span className="spacer-right">
+              {translateWithParameters(
+                'component_measures.legend.color_x',
+                translate('projects.worse_of_reliablity_and_security')
+              )}
+            </span>
             {translateWithParameters(
-              'component_measures.legend.color_x',
-              translate('projects.worse_of_reliablity_and_security')
+              'component_measures.legend.size_x',
+              translate('metric', SIZE_METRIC, 'name')
             )}
-          </span>
-          {translateWithParameters(
-            'component_measures.legend.size_x',
-            translate('metric', SIZE_METRIC, 'name')
-          )}
-          <ColorRatingsLegend className="big-spacer-top" />
+            <ColorRatingsLegend className="big-spacer-top" />
+          </div>
         </div>
       </div>
     );
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/Security.tsx b/server/sonar-web/src/main/js/apps/projects/visualizations/Security.tsx
index 1972b302e56..aecb4d68b3b 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/Security.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/Security.tsx
@@ -20,9 +20,11 @@
 import * as React from 'react';
 import SimpleBubbleChart from './SimpleBubbleChart';
 import { Project } from '../types';
+import { translate } from '../../../helpers/l10n';
 
 interface Props {
   displayOrganizations: boolean;
+  helpText: string;
   projects: Project[];
 }
 
@@ -30,10 +32,11 @@ export default function Security(props: Props) {
   return (
     <SimpleBubbleChart
       {...props}
+      colorMetric="security_rating"
+      sizeMetric={{ key: 'vulnerabilities', type: 'SHORT_INT' }}
+      title={translate('projects.visualization', 'security')}
       xMetric={{ key: 'ncloc', type: 'SHORT_INT' }}
       yMetric={{ key: 'security_remediation_effort', type: 'SHORT_WORK_DUR' }}
-      sizeMetric={{ key: 'vulnerabilities', type: 'SHORT_INT' }}
-      colorMetric="security_rating"
     />
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/SimpleBubbleChart.tsx b/server/sonar-web/src/main/js/apps/projects/visualizations/SimpleBubbleChart.tsx
index 9b9d8af06aa..10c1291f61f 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/SimpleBubbleChart.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/SimpleBubbleChart.tsx
@@ -25,6 +25,8 @@ import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { RATING_COLORS } from '../../../helpers/constants';
 import { getProjectUrl } from '../../../helpers/urls';
 import { Project } from '../types';
+import Tooltip from '../../../components/controls/Tooltip';
+import HelpIcon from '../../../components/icons-components/HelpIcon';
 
 export interface Metric {
   key: string;
@@ -34,8 +36,10 @@ export interface Metric {
 interface Props {
   colorMetric?: string;
   displayOrganizations: boolean;
+  helpText: string;
   projects: Project[];
   sizeMetric: Metric;
+  title?: string;
   xMetric: Metric;
   yDomain?: [number, number];
   yMetric: Metric;
@@ -124,19 +128,29 @@ export default class SimpleBubbleChart extends React.PureComponent<Props> {
           {translate('metric', yMetric.key, 'name')}
         </div>
         <div className="measure-details-bubble-chart-axis size">
-          {colorMetric != null && (
-            <span className="spacer-right">
-              {translateWithParameters(
-                'component_measures.legend.color_x',
-                translate('metric', colorMetric, 'name')
-              )}
-            </span>
-          )}
-          {translateWithParameters(
-            'component_measures.legend.size_x',
-            translate('metric', sizeMetric.key, 'name')
-          )}
-          {colorMetric != null && <ColorRatingsLegend className="big-spacer-top" />}
+          <span className="measure-details-bubble-chart-title">
+            {this.props.title}
+            <Tooltip overlay={this.props.helpText}>
+              <span className="spacer-left text-info">
+                <HelpIcon className="text-bottom" />
+              </span>
+            </Tooltip>
+          </span>
+          <div>
+            {colorMetric != null && (
+              <span className="spacer-right">
+                {translateWithParameters(
+                  'component_measures.legend.color_x',
+                  translate('metric', colorMetric, 'name')
+                )}
+              </span>
+            )}
+            {translateWithParameters(
+              'component_measures.legend.size_x',
+              translate('metric', sizeMetric.key, 'name')
+            )}
+            {colorMetric != null && <ColorRatingsLegend className="big-spacer-top" />}
+          </div>
         </div>
       </div>
     );
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/Visualizations.tsx b/server/sonar-web/src/main/js/apps/projects/visualizations/Visualizations.tsx
index 6c93acd4d9e..947b58fddde 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/Visualizations.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/Visualizations.tsx
@@ -49,7 +49,11 @@ export default class Visualizations extends React.PureComponent<Props> {
     const Component = visualizationToComponent[this.props.visualization];
 
     return Component ? (
-      <Component displayOrganizations={this.props.displayOrganizations} projects={projects} />
+      <Component
+        displayOrganizations={this.props.displayOrganizations}
+        helpText={translate('projects.visualization', this.props.visualization, 'description')}
+        projects={projects}
+      />
     ) : null;
   }
 
@@ -58,20 +62,17 @@ export default class Visualizations extends React.PureComponent<Props> {
 
     const limitReached = projects != null && total != null && projects.length < total;
 
-    return (
+    return limitReached ? (
       <footer className="projects-visualizations-footer">
-        <p>{translate('projects.visualization', this.props.visualization, 'description')}</p>
-        {limitReached && (
-          <p className="note spacer-top">
-            {translateWithParameters(
-              'projects.limited_set_of_projects',
-              projects!.length,
-              localizeSorting(sort)
-            )}
-          </p>
-        )}
+        <p className="note spacer-top">
+          {translateWithParameters(
+            'projects.limited_set_of_projects',
+            projects!.length,
+            localizeSorting(sort)
+          )}
+        </p>
       </footer>
-    );
+    ) : null;
   }
 
   render() {
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Coverage-test.tsx b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Coverage-test.tsx
index 4138d3d9858..aa6e78c656a 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Coverage-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Coverage-test.tsx
@@ -22,5 +22,7 @@ import { shallow } from 'enzyme';
 import Coverage from '../Coverage';
 
 it('renders', () => {
-  expect(shallow(<Coverage displayOrganizations={false} projects={[]} />)).toMatchSnapshot();
+  expect(
+    shallow(<Coverage displayOrganizations={false} helpText="foobar" projects={[]} />)
+  ).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Duplications-test.tsx b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Duplications-test.tsx
index b7c8ecf236e..a08e2476e04 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Duplications-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Duplications-test.tsx
@@ -22,5 +22,7 @@ import { shallow } from 'enzyme';
 import Duplications from '../Duplications';
 
 it('renders', () => {
-  expect(shallow(<Duplications displayOrganizations={false} projects={[]} />)).toMatchSnapshot();
+  expect(
+    shallow(<Duplications displayOrganizations={false} helpText="foobar" projects={[]} />)
+  ).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Maintainability-test.tsx b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Maintainability-test.tsx
index 7b0bdee6e23..194ed1ff3f1 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Maintainability-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Maintainability-test.tsx
@@ -22,5 +22,7 @@ import { shallow } from 'enzyme';
 import Maintainability from '../Maintainability';
 
 it('renders', () => {
-  expect(shallow(<Maintainability displayOrganizations={false} projects={[]} />)).toMatchSnapshot();
+  expect(
+    shallow(<Maintainability displayOrganizations={false} helpText="foobar" projects={[]} />)
+  ).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Reliability-test.tsx b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Reliability-test.tsx
index f26a17fd5dc..bdf50bd8d79 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Reliability-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Reliability-test.tsx
@@ -22,5 +22,7 @@ import { shallow } from 'enzyme';
 import Reliability from '../Reliability';
 
 it('renders', () => {
-  expect(shallow(<Reliability displayOrganizations={false} projects={[]} />)).toMatchSnapshot();
+  expect(
+    shallow(<Reliability displayOrganizations={false} helpText="foobar" projects={[]} />)
+  ).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Risk-test.tsx b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Risk-test.tsx
index d10e432091f..688230948db 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Risk-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Risk-test.tsx
@@ -29,5 +29,7 @@ it('renders', () => {
     tags: [],
     visibility: 'public'
   };
-  expect(shallow(<Risk displayOrganizations={false} projects={[project1]} />)).toMatchSnapshot();
+  expect(
+    shallow(<Risk displayOrganizations={false} helpText="foobar" projects={[project1]} />)
+  ).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Security-test.tsx b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Security-test.tsx
index 3ef218698e6..0101947a375 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Security-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Security-test.tsx
@@ -22,5 +22,7 @@ import { shallow } from 'enzyme';
 import Security from '../Security';
 
 it('renders', () => {
-  expect(shallow(<Security displayOrganizations={false} projects={[]} />)).toMatchSnapshot();
+  expect(
+    shallow(<Security displayOrganizations={false} helpText="foobar" projects={[]} />)
+  ).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/SimpleBubbleChart-test.tsx b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/SimpleBubbleChart-test.tsx
index e76c73076f0..4224630f25d 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/SimpleBubbleChart-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/SimpleBubbleChart-test.tsx
@@ -35,6 +35,7 @@ it('renders', () => {
       <SimpleBubbleChart
         colorMetric="security_rating"
         displayOrganizations={false}
+        helpText="foobar"
         projects={[project1]}
         sizeMetric={{ key: 'ncloc', type: 'INT' }}
         xMetric={{ key: 'complexity', type: 'INT' }}
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Coverage-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Coverage-test.tsx.snap
index e1207dff93f..01107b14c10 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Coverage-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Coverage-test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`renders 1`] = `
 <SimpleBubbleChart
   displayOrganizations={false}
+  helpText="foobar"
   projects={Array []}
   sizeMetric={
     Object {
@@ -10,6 +11,7 @@ exports[`renders 1`] = `
       "type": "SHORT_INT",
     }
   }
+  title="projects.visualization.coverage"
   xMetric={
     Object {
       "key": "complexity",
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Duplications-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Duplications-test.tsx.snap
index c3920375a20..7ec3fbb1ac5 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Duplications-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Duplications-test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`renders 1`] = `
 <SimpleBubbleChart
   displayOrganizations={false}
+  helpText="foobar"
   projects={Array []}
   sizeMetric={
     Object {
@@ -10,6 +11,7 @@ exports[`renders 1`] = `
       "type": "SHORT_INT",
     }
   }
+  title="projects.visualization.duplications"
   xMetric={
     Object {
       "key": "ncloc",
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Maintainability-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Maintainability-test.tsx.snap
index aa9eb694998..14f2cea5c44 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Maintainability-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Maintainability-test.tsx.snap
@@ -4,6 +4,7 @@ exports[`renders 1`] = `
 <SimpleBubbleChart
   colorMetric="sqale_rating"
   displayOrganizations={false}
+  helpText="foobar"
   projects={Array []}
   sizeMetric={
     Object {
@@ -11,6 +12,7 @@ exports[`renders 1`] = `
       "type": "SHORT_INT",
     }
   }
+  title="projects.visualization.maintainability"
   xMetric={
     Object {
       "key": "ncloc",
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Reliability-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Reliability-test.tsx.snap
index 74b8820dcd8..b8a733b6b54 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Reliability-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Reliability-test.tsx.snap
@@ -4,6 +4,7 @@ exports[`renders 1`] = `
 <SimpleBubbleChart
   colorMetric="reliability_rating"
   displayOrganizations={false}
+  helpText="foobar"
   projects={Array []}
   sizeMetric={
     Object {
@@ -11,6 +12,7 @@ exports[`renders 1`] = `
       "type": "SHORT_INT",
     }
   }
+  title="projects.visualization.reliability"
   xMetric={
     Object {
       "key": "ncloc",
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Risk-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Risk-test.tsx.snap
index ecc8cc1fede..ec17ac106b4 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Risk-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Risk-test.tsx.snap
@@ -98,14 +98,30 @@ exports[`renders 1`] = `
     className="measure-details-bubble-chart-axis size"
   >
     <span
-      className="spacer-right"
+      className="measure-details-bubble-chart-title"
     >
-      component_measures.legend.color_x.projects.worse_of_reliablity_and_security
+      projects.visualization.risk
+      <Tooltip
+        overlay="foobar"
+      >
+        <span
+          className="spacer-left text-info"
+        >
+          <HelpIcon />
+        </span>
+      </Tooltip>
     </span>
-    component_measures.legend.size_x.metric.ncloc.name
-    <ColorRatingsLegend
-      className="big-spacer-top"
-    />
+    <div>
+      <span
+        className="spacer-right"
+      >
+        component_measures.legend.color_x.projects.worse_of_reliablity_and_security
+      </span>
+      component_measures.legend.size_x.metric.ncloc.name
+      <ColorRatingsLegend
+        className="big-spacer-top"
+      />
+    </div>
   </div>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Security-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Security-test.tsx.snap
index 1ff6a7d08a7..8ab18b4f256 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Security-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Security-test.tsx.snap
@@ -4,6 +4,7 @@ exports[`renders 1`] = `
 <SimpleBubbleChart
   colorMetric="security_rating"
   displayOrganizations={false}
+  helpText="foobar"
   projects={Array []}
   sizeMetric={
     Object {
@@ -11,6 +12,7 @@ exports[`renders 1`] = `
       "type": "SHORT_INT",
     }
   }
+  title="projects.visualization.security"
   xMetric={
     Object {
       "key": "ncloc",
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/SimpleBubbleChart-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/SimpleBubbleChart-test.tsx.snap
index 1c661eb1690..020df683ca2 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/SimpleBubbleChart-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/SimpleBubbleChart-test.tsx.snap
@@ -87,14 +87,31 @@ exports[`renders 1`] = `
     className="measure-details-bubble-chart-axis size"
   >
     <span
-      className="spacer-right"
+      className="measure-details-bubble-chart-title"
     >
-      component_measures.legend.color_x.metric.security_rating.name
+      <Tooltip
+        overlay="foobar"
+      >
+        <span
+          className="spacer-left text-info"
+        >
+          <HelpIcon
+            className="text-bottom"
+          />
+        </span>
+      </Tooltip>
     </span>
-    component_measures.legend.size_x.metric.ncloc.name
-    <ColorRatingsLegend
-      className="big-spacer-top"
-    />
+    <div>
+      <span
+        className="spacer-right"
+      >
+        component_measures.legend.color_x.metric.security_rating.name
+      </span>
+      component_measures.legend.size_x.metric.ncloc.name
+      <ColorRatingsLegend
+        className="big-spacer-top"
+      />
+    </div>
   </div>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Visualizations-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Visualizations-test.tsx.snap
index 6a28f9d5baa..ecbdf1bc0e4 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Visualizations-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Visualizations-test.tsx.snap
@@ -9,16 +9,10 @@ exports[`renders 1`] = `
   >
     <Coverage
       displayOrganizations={false}
+      helpText="projects.visualization.coverage.description"
       projects={Array []}
     />
   </div>
-  <footer
-    className="projects-visualizations-footer"
-  >
-    <p>
-      projects.visualization.coverage.description
-    </p>
-  </footer>
 </div>
 `;
 
@@ -31,15 +25,13 @@ exports[`renders when limit is reached 1`] = `
   >
     <Coverage
       displayOrganizations={false}
+      helpText="projects.visualization.coverage.description"
       projects={Array []}
     />
   </div>
   <footer
     className="projects-visualizations-footer"
   >
-    <p>
-      projects.visualization.coverage.description
-    </p>
     <p
       className="note spacer-top"
     >