SONAR-9608 Fix some issues with Applications and Portfolios on measures page

4 files changed, 26 insertions, 5 deletions

diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/App.js b/server/sonar-web/src/main/js/apps/component-measures/components/App.js
index a71b9e69b73..91c55657df4 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/App.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/App.js
@@ -179,6 +179,7 @@ export default class App extends React.PureComponent {
             domain={query.metric}
             leakPeriod={leakPeriod}
             metrics={metrics}
+            router={this.props.router}
             selected={query.selected}
             updateQuery={this.updateQuery}
           />}
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverviewContainer.js b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverviewContainer.js
index b674dbc9e8a..517b34ad07f 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverviewContainer.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverviewContainer.js
@@ -21,7 +21,9 @@
 import React from 'react';
 import MeasureOverview from './MeasureOverview';
 import { getComponentShow } from '../../../api/components';
+import { getComponentUrl } from '../../../helpers/urls';
 import type { Component, Period, Query } from '../types';
+import type { RawQuery } from '../../../helpers/query';
 import type { Metric } from '../../../store/metrics/actions';
 
 type Props = {|
@@ -31,6 +33,9 @@ type Props = {|
   domain: string,
   leakPeriod: Period,
   metrics: { [string]: Metric },
+  router: {
+    push: ({ pathname: string, query?: RawQuery }) => void
+  },
   selected: ?string,
   updateQuery: Query => void
 |};
@@ -98,10 +103,15 @@ export default class MeasureOverviewContainer extends React.PureComponent {
     }
   };
 
-  updateSelected = (component: string) =>
-    this.props.updateQuery({
-      selected: component !== this.props.rootComponent.key ? component : null
-    });
+  updateSelected = (component: string) => {
+    if (this.state.component && ['VW', 'SVW', 'APP'].includes(this.state.component.qualifier)) {
+      this.props.router.push(getComponentUrl(component));
+    } else {
+      this.props.updateQuery({
+        selected: component !== this.props.rootComponent.key ? component : null
+      });
+    }
+  };
 
   render() {
     if (!this.state.component) {
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 897918ed170..35bef4f20d4 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
@@ -83,7 +83,8 @@ export default class BubbleChart extends React.PureComponent {
     return `<div class="text-left">${inner.join('<br/>')}</div>`;
   }
 
-  handleBubbleClick = (component: ComponentEnhanced) => this.props.updateSelected(component.key);
+  handleBubbleClick = (component: ComponentEnhanced) =>
+    this.props.updateSelected(component.refKey || component.key);
 
   renderBubbleChart(
     xMetric: Metric,
diff --git a/server/sonar-web/src/main/js/apps/component-measures/style.css b/server/sonar-web/src/main/js/apps/component-measures/style.css
index 699bd21b96e..7990cc163ae 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/style.css
+++ b/server/sonar-web/src/main/js/apps/component-measures/style.css
@@ -80,6 +80,15 @@
   font-size: 12px;
 }
 
+.domain-measures-value .level {
+  height: 18px;
+  line-height: 18px;
+  border-radius: 18px;
+  margin-top: -2px;
+  margin-bottom: -2px;
+  margin-right: -4px;
+}
+
 .measure-details-treemap-legend {
   margin-right: -4px;
 }