open file in the workspace when click on the bubble

3 files changed, 16 insertions, 7 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/components/domain-bubble-chart.js b/server/sonar-web/src/main/js/apps/overview/components/domain-bubble-chart.js
index 7020ef962bb..ececaebf1f9 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/domain-bubble-chart.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/domain-bubble-chart.js
@@ -5,6 +5,7 @@ import { BubbleChart } from '../../../components/charts/bubble-chart';
 import { getComponentUrl } from '../../../helpers/urls';
 import { getFiles } from '../../../api/components';
 import { formatMeasure } from '../../../helpers/measures';
+import Workspace from '../../../components/workspace/main';
 
 
 const HEIGHT = 360;
@@ -83,6 +84,10 @@ export class DomainBubbleChart extends React.Component {
     return `<div class="text-left">${inner}</div>`;
   }
 
+  handleBubbleClick (uuid) {
+    Workspace.openComponent({ uuid });
+  }
+
   renderLoading () {
     return <div className="overview-chart-placeholder" style={{ height: HEIGHT }}>
       <i className="spinner"/>
@@ -99,7 +104,7 @@ export class DomainBubbleChart extends React.Component {
         x: getMeasure(component, this.props.xMetric),
         y: getMeasure(component, this.props.yMetric),
         size: this.getSizeMetricsValue(component),
-        link: getComponentUrl(component.key),
+        link: component.uuid,
         tooltip: this.getTooltip(component)
       };
     });
@@ -109,7 +114,8 @@ export class DomainBubbleChart extends React.Component {
                         height={HEIGHT}
                         padding={[25, 60, 50, 60]}
                         formatXTick={formatXTick}
-                        formatYTick={formatYTick}/>;
+                        formatYTick={formatYTick}
+                        onBubbleClick={this.handleBubbleClick}/>;
   }
 
   render () {
diff --git a/server/sonar-web/src/main/js/components/charts/bubble-chart.js b/server/sonar-web/src/main/js/components/charts/bubble-chart.js
index 9df80a47cf6..5f456292fe6 100644
--- a/server/sonar-web/src/main/js/components/charts/bubble-chart.js
+++ b/server/sonar-web/src/main/js/components/charts/bubble-chart.js
@@ -19,8 +19,8 @@ export const Bubble = React.createClass({
   },
 
   handleClick () {
-    if (this.props.link) {
-      window.location = this.props.link;
+    if (this.props.onClick) {
+      this.props.onClick(this.props.link);
     }
   },
 
@@ -50,7 +50,8 @@ export const BubbleChart = React.createClass({
     height: React.PropTypes.number,
     padding: React.PropTypes.arrayOf(React.PropTypes.number),
     formatXTick: React.PropTypes.func,
-    formatYTick: React.PropTypes.func
+    formatYTick: React.PropTypes.func,
+    onBubbleClick: React.PropTypes.func
   },
 
   mixins: [ResizeMixin, TooltipsMixin],
@@ -203,9 +204,10 @@ export const BubbleChart = React.createClass({
     let bubbles = _.sortBy(this.props.items, (a, b) => b.size - a.size)
         .map((item, index) => {
           return <Bubble key={index}
-                         tooltip={item.tooltip}
                          link={item.link}
-                         x={xScale(item.x)} y={yScale(item.y)} r={sizeScale(item.size)}/>;
+                         tooltip={item.tooltip}
+                         x={xScale(item.x)} y={yScale(item.y)} r={sizeScale(item.size)}
+                         onClick={this.props.onBubbleClick}/>;
         });
 
     let xTicks = this.getTicks(xScale, this.props.formatXTick);
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/controllers/api/resources_controller.rb b/server/sonar-web/src/main/webapp/WEB-INF/app/controllers/api/resources_controller.rb
index 35918a606ab..fdad62039c1 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/controllers/api/resources_controller.rb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/controllers/api/resources_controller.rb
@@ -367,6 +367,7 @@ class Api::ResourcesController < Api::ApiController
     json = {
       'id' => resource.id,
       'key' => resource.key,
+      'uuid' => resource.uuid,
       'name' => resource.name,
       'scope' => resource.scope,
       'qualifier' => resource.qualifier,