SONAR-9612 Add bubble chart buttons on the project overview page

server/sonar-web/src/main/js/apps/overview/main/BugsAndVulnerabilities.js

@@ -20,34 +20,37 @@
 import React from 'react';
 import { Link } from 'react-router';
 import enhance from './enhance';
-import LeakPeriodLegend from '../components/LeakPeriodLegend';
 import ApplicationLeakPeriodLegend from '../components/ApplicationLeakPeriodLegend';
-import { getMetricName } from '../helpers/metrics';
-import { translate } from '../../../helpers/l10n';
+import BubblesIcon from '../../../components/icons-components/BubblesIcon';
 import BugIcon from '../../../components/icons-components/BugIcon';
+import LeakPeriodLegend from '../components/LeakPeriodLegend';
 import VulnerabilityIcon from '../../../components/icons-components/VulnerabilityIcon';
+import { getMetricName } from '../helpers/metrics';
+import { getComponentDrilldownUrl } from '../../../helpers/urls';
+import { translate } from '../../../helpers/l10n';
 
 class BugsAndVulnerabilities extends React.PureComponent {
   renderHeader() {
     const { component } = this.props;
-    const bugsDomainUrl = {
-      pathname: '/component_measures_old/domain/Reliability',
-      query: { id: component.key }
-    };
-    const vulnerabilitiesDomainUrl = {
-      pathname: '/component_measures_old/domain/Security',
-      query: { id: component.key }
-    };
 
     return (
       <div className="overview-card-header">
         <div className="overview-title">
-          <Link to={bugsDomainUrl}>
+          <span>
             {translate('metric.bugs.name')}
+          </span>
+          <Link
+            className="button button-small button-compact spacer-left text-text-bottom"
+            to={getComponentDrilldownUrl(component.key, 'Reliability')}>
+            <BubblesIcon size={14} />
           </Link>
-          {' & '}
-          <Link to={vulnerabilitiesDomainUrl}>
+          <span className="big-spacer-left">
             {translate('metric.vulnerabilities.name')}
+          </span>
+          <Link
+            className="button button-small button-compact spacer-left text-text-bottom"
+            to={getComponentDrilldownUrl(component.key, 'Security')}>
+            <BubblesIcon size={14} />
           </Link>
         </div>
       </div>

server/sonar-web/src/main/js/apps/overview/main/enhance.js

@@ -21,6 +21,7 @@ import React from 'react';
 import { Link } from 'react-router';
 import moment from 'moment';
 import { DrilldownLink } from '../../../components/shared/drilldown-link';
+import BubblesIcon from '../../../components/icons-components/BubblesIcon';
 import HistoryIcon from '../../../components/icons-components/HistoryIcon';
 import Rating from './../../../components/ui/Rating';
 import Timeline from '../components/Timeline';
@@ -35,7 +36,11 @@ import {
 } from '../../../helpers/measures';
 import { translateWithParameters } from '../../../helpers/l10n';
 import { getPeriodDate } from '../../../helpers/periods';
-import { getComponentIssuesUrl, getComponentMeasureHistory } from '../../../helpers/urls';
+import {
+  getComponentDrilldownUrl,
+  getComponentIssuesUrl,
+  getComponentMeasureHistory
+} from '../../../helpers/urls';
 
 export default function enhance(ComposedComponent) {
   return class extends React.PureComponent {
@@ -55,16 +60,16 @@ export default function enhance(ComposedComponent) {
 
     renderHeader = (domain, label) => {
       const { component } = this.props;
-      const domainUrl = {
-        pathname: `/component_measures_old/domain/${domain}`,
-        query: { id: component.key }
-      };
-
       return (
         <div className="overview-card-header">
           <div className="overview-title">
-            <Link to={domainUrl}>
+            <span>
               {label}
+            </span>
+            <Link
+              className="button button-small button-compact spacer-left text-text-bottom"
+              to={getComponentDrilldownUrl(component.key, domain)}>
+              <BubblesIcon size={14} />
             </Link>
           </div>
         </div>

server/sonar-web/src/main/js/apps/overview/styles.css

@@ -21,17 +21,6 @@
   margin-left: 15px;
 }
 
-.overview-title > a {
-  border-bottom-color: #d0d0d0;
-  color: #444;
-}
-
-.overview-title > a:hover,
-.overview-title > a:focus {
-  border-bottom-color: #cae3f2;
-  color: #4b9fd5;
-}
-
 /*
  * Quality Gate
  */

server/sonar-web/src/main/js/components/icons-components/BubblesIcon.js

@@ -30,17 +30,9 @@ export default function BubblesIcon({ className, size = 16 }: Props) {
       height={size}
       width={size}
       viewBox="0 0 16 16">
-      <circle
-        cx="4"
-        cy="12"
-        r="3.5"
-        style={{ fill: 'none', stroke: 'currentColor', strokeMiterlimit: 10 }}
-      />
-      <circle
-        cx="10.4"
-        cy="5.6"
-        r="5.1"
-        style={{ fill: 'none', stroke: 'currentColor', strokeMiterlimit: 10 }}
+      <path
+        fill="currentColor"
+        d="M4.1 10.2c1 0 1.9.8 1.9 1.9S5.1 14 4.1 14s-1.9-.8-1.9-1.9.8-1.9 1.9-1.9m0-2C2 8.2.2 9.9.2 12.1S1.9 16 4.1 16 8 14.3 8 12.1 6.2 8.2 4.1 8.2zM10.3 2c2 0 3.7 1.7 3.7 3.7s-1.7 3.7-3.7 3.7-3.8-1.6-3.8-3.7S8.2 2 10.3 2m0-2C7.1 0 4.5 2.6 4.5 5.7s2.6 5.7 5.7 5.7S16 8.9 16 5.7 13.4 0 10.3 0z"
       />
     </svg>
   );