SONAR-6766 show issue execution flow

8 files changed, 51 insertions, 17 deletions

diff --git a/server/sonar-web/src/main/js/components/issue/issue-view.js b/server/sonar-web/src/main/js/components/issue/issue-view.js
index aad34a2d04c..3a48d4e3dd2 100644
--- a/server/sonar-web/src/main/js/components/issue/issue-view.js
+++ b/server/sonar-web/src/main/js/components/issue/issue-view.js
@@ -225,7 +225,8 @@ define([
     serializeData: function () {
       var issueKey = encodeURIComponent(this.model.get('key'));
       return _.extend(Marionette.ItemView.prototype.serializeData.apply(this, arguments), {
-        permalink: baseUrl + '/issues/search#issues=' + issueKey
+        permalink: baseUrl + '/issues/search#issues=' + issueKey,
+        hasSecondaryLocations: this.model.get('secondaryLocations').length || this.model.get('executionFlows').length
       });
     }
   });
diff --git a/server/sonar-web/src/main/js/components/issue/models/issue.js b/server/sonar-web/src/main/js/components/issue/models/issue.js
index 4eaf340f12d..c5b1eacc70d 100644
--- a/server/sonar-web/src/main/js/components/issue/models/issue.js
+++ b/server/sonar-web/src/main/js/components/issue/models/issue.js
@@ -3,6 +3,13 @@ define(function () {
   return Backbone.Model.extend({
     idAttribute: 'key',
 
+    defaults: function () {
+      return {
+        secondaryLocations: [],
+        executionFlows: []
+      }
+    },
+
     url: function () {
       return baseUrl + '/api/issues/show?key=' + this.get('key');
     },
diff --git a/server/sonar-web/src/main/js/components/issue/templates/issue.hbs b/server/sonar-web/src/main/js/components/issue/templates/issue.hbs
index 06e878f7b8f..7b12f2db96e 100644
--- a/server/sonar-web/src/main/js/components/issue/templates/issue.hbs
+++ b/server/sonar-web/src/main/js/components/issue/templates/issue.hbs
@@ -23,13 +23,13 @@
             </li>
           {{/if}}
 
-          {{#notEmpty secondaryLocations}}
+          {{#if hasSecondaryLocations}}
             <li class="issue-meta issue-meta-locations">
               <button class="button-link issue-action js-issue-locations">
                 <i class="icon-issue-flow"></i>
               </button>
             </li>
-          {{/notEmpty}}
+          {{/if}}
 
           <li class="issue-meta">
             <a class="js-issue-permalink icon-link" href="{{permalink}}" target="_blank"></a>
diff --git a/server/sonar-web/src/main/js/components/source-viewer/main.js b/server/sonar-web/src/main/js/components/source-viewer/main.js
index a73b56a315f..62129a4e376 100644
--- a/server/sonar-web/src/main/js/components/source-viewer/main.js
+++ b/server/sonar-web/src/main/js/components/source-viewer/main.js
@@ -48,7 +48,7 @@ define([
       return Marionette.LayoutView.extend({
         className: 'source-viewer',
         template: Templates['source-viewer'],
-        flowLocationTemplate: Templates['source-viewer-flow-location'],
+        issueLocationTemplate: Templates['source-viewer-issue-location'],
 
         ISSUES_LIMIT: 3000,
         LINES_LIMIT: 1000,
@@ -752,7 +752,11 @@ define([
                 msg: issue.get('message'),
                 textRange: issue.get('textRange')
               },
-              _locations = [primaryLocation].concat(issue.get('secondaryLocations'));
+              secondaryLocations = issue.get('secondaryLocations'),
+              _locations = [primaryLocation].concat(secondaryLocations);
+          issue.get('executionFlows').forEach(function (flow) {
+            _locations = [].concat(_locations, flow.locations);
+          });
           _locations.forEach(this.showFlowLocation, this);
         },
 
@@ -761,14 +765,14 @@ define([
             var line = location.textRange.startLine,
                 row = this.$('.source-line-code[data-line-number="' + line + '"]'),
                 renderedFlowLocation = this.renderFlowLocation(location);
-            row.append(renderedFlowLocation);
+            row.find('.source-line-issue-locations').append(renderedFlowLocation);
             this.highlightFlowLocationInCode(location);
           }
         },
 
         renderFlowLocation: function (location) {
           location.msg = location.msg ? location.msg : ' ';
-          return this.flowLocationTemplate(location);
+          return this.issueLocationTemplate(location);
         },
 
         highlightFlowLocationInCode: function (location) {
@@ -789,7 +793,7 @@ define([
 
         hideFlowLocations: function () {
           this.locationsShowFor = null;
-          this.$('.source-viewer-flow-location').remove();
+          this.$('.source-line-issue-locations').empty();
           this.$('.source-line-code-secondary-issue').removeClass('source-line-code-secondary-issue');
         }
       });
diff --git a/server/sonar-web/src/main/js/components/source-viewer/templates/source-viewer-flow-location.hbs b/server/sonar-web/src/main/js/components/source-viewer/templates/source-viewer-flow-location.hbs
deleted file mode 100644
index e11d2200798..00000000000
--- a/server/sonar-web/src/main/js/components/source-viewer/templates/source-viewer-flow-location.hbs
+++ /dev/null
@@ -1 +0,0 @@
-<div class="source-viewer-flow-location" title="{{msg}}">{{limitString msg}} </div>
diff --git a/server/sonar-web/src/main/js/components/source-viewer/templates/source-viewer-issue-location.hbs b/server/sonar-web/src/main/js/components/source-viewer/templates/source-viewer-issue-location.hbs
new file mode 100644
index 00000000000..52ff583e982
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/source-viewer/templates/source-viewer-issue-location.hbs
@@ -0,0 +1 @@
+<div class="source-viewer-issue-location" title="{{msg}}">{{limitString msg}}</div>
diff --git a/server/sonar-web/src/main/js/components/source-viewer/templates/source-viewer.hbs b/server/sonar-web/src/main/js/components/source-viewer/templates/source-viewer.hbs
index 23bed593516..4600706741e 100644
--- a/server/sonar-web/src/main/js/components/source-viewer/templates/source-viewer.hbs
+++ b/server/sonar-web/src/main/js/components/source-viewer/templates/source-viewer.hbs
@@ -60,9 +60,13 @@
         </td>
 
         <td class="source-line-code code {{#notEmpty issues}}has-issues{{/notEmpty}}" data-line-number="{{line}}">
-          {{#notNull code}}
-            <pre>{{{codeWithIssueLocations code issueLocations}}}</pre>
-          {{/notNull}}
+          <div class="source-line-code-inner">
+            {{#notNull code}}
+              <pre>{{{codeWithIssueLocations code issueLocations}}}</pre>
+            {{/notNull}}
+
+            <div class="source-line-issue-locations"></div>
+          </div>
 
           {{#notEmpty issues}}
             <div class="issue-list">
diff --git a/server/sonar-web/src/main/less/components/source.less b/server/sonar-web/src/main/less/components/source.less
index bddf7ae5786..fd9b82435da 100644
--- a/server/sonar-web/src/main/less/components/source.less
+++ b/server/sonar-web/src/main/less/components/source.less
@@ -110,12 +110,20 @@
   position: relative;
   padding: 0 10px;
 
+  pre {
+    float: left;
+  }
+
   .issue-list {
     margin-left: -10px;
     margin-right: -10px;
   }
 }
 
+.source-line-code-inner {
+  .clearfix;
+}
+
 .source-line-code-issue {
   display: inline-block;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAGCAYAAAAPDoR2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1M0M2Rjk4M0M3QUYxMUUzODkzRUREMUM5OTNDMjY4QSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1M0M2Rjk4NEM3QUYxMUUzODkzRUREMUM5OTNDMjY4QSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjUzQzZGOTgxQzdBRjExRTM4OTNFREQxQzk5M0MyNjhBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjUzQzZGOTgyQzdBRjExRTM4OTNFREQxQzk5M0MyNjhBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+bcqJtQAAAEhJREFUeNpi+G+swwDGDAwgbAWlwZiJAQFCgfgwEIfDRaC67ID4NRDnQ2kQnwFZwgFqnANMAQOUYY9sF0wBiCGH5CBkrAgQYACuWi4sSGW8yAAAAABJRU5ErkJggg==);
@@ -452,10 +460,8 @@
   text-align: right;
 }
 
-.source-viewer-flow-location {
-  position: absolute;
-  top: 0;
-  right: 10px;
+.source-viewer-issue-location {
+  float: left;
   height: @source-line-height - 1px;
   line-height: @source-line-height - 1px;
   padding: 0 10px;
@@ -463,9 +469,21 @@
   background-color: @red;
   color: #fff;
   font-size: 12px;
-  z-index: @issue-flow-location-z-index;
+}
+
+.source-viewer-issue-location + .source-viewer-issue-location {
+  margin-left: 10px;
 }
 
 .source-viewer-flow-location + .source-viewer-flow-location {
   z-index: @issue-flow-location-z-index - 1;
 }
+
+.source-line-issue-locations {
+  float: right;
+  padding-bottom: 1px;
+
+  &:empty {
+    display: none;
+  }
+}