SONAR-5884 Add an ability to see issue boxes

diff --git a/server/sonar-web/src/main/coffee/issues/component-viewer/main.coffee b/server/sonar-web/src/main/coffee/issues/component-viewer/main.coffee
index fcee1bb911a96d20615f3c060c66d3b442d9e4d0..c5cb1ab53beb6cf6ac028664d90f0fda65b94563 100644 (file)
--- a/server/sonar-web/src/main/coffee/issues/component-viewer/main.coffee
+++ b/server/sonar-web/src/main/coffee/issues/component-viewer/main.coffee
@@ -165,6 +165,7 @@ define [
 
     renderIssues: ->
       @issues.forEach @renderIssue, @
+      @$('.source-line-issues').addClass('hidden');
 
 
     renderIssue: (issue) ->

diff --git a/server/sonar-web/src/main/hbs/source-viewer/source-viewer.hbs b/server/sonar-web/src/main/hbs/source-viewer/source-viewer.hbs
index c47a2a3749c2c58610d558260b59d8213e3f90ea..f30f2b62168a14fce7e8ed7f3db6cf61ad5075cc 100644 (file)
--- a/server/sonar-web/src/main/hbs/source-viewer/source-viewer.hbs
+++ b/server/sonar-web/src/main/hbs/source-viewer/source-viewer.hbs
@@ -34,6 +34,13 @@
           </td>
         {{/each}}
 
+        <td class="source-meta source-line-issues {{#notEmpty issues}}source-line-with-issues{{/notEmpty}}"
+            data-line-number="{{line}}">
+          {{#withFirst issues}}
+            {{severityIcon severity}}
+          {{/withFirst}}
+        </td>
+
         <td class="source-line-code code {{#notEmpty issues}}has-issues{{/notEmpty}}" data-line-number="{{line}}">
           {{#notNull code}}
             <pre>{{#if code}}{{{code}}}{{else}}&nbsp;{{/if}}</pre>

diff --git a/server/sonar-web/src/main/js/source-viewer/viewer.js b/server/sonar-web/src/main/js/source-viewer/viewer.js
index 2f596ef7c5104bc4d9f6a281b6936eb90c186c11..bbe7996969b8f20994f82aa9df8652916a5ce003 100644 (file)
--- a/server/sonar-web/src/main/js/source-viewer/viewer.js
+++ b/server/sonar-web/src/main/js/source-viewer/viewer.js
@@ -55,6 +55,7 @@ define([
             'click .source-line-uncovered': 'showCoveragePopup',
             'click .source-line-duplications': 'showDuplications',
             'click .source-line-duplications-extra': 'showDuplicationPopup',
+            'click .source-line-with-issues': 'onLineIssuesClick',
             'click .source-line-number[data-line-number]': 'onLineNumberClick'
           };
         },
@@ -235,7 +236,8 @@ define([
                   extra_fields: 'actions,transitions,assigneeName,actionPlanName',
                   resolved: false,
                   s: 'FILE_LINE',
-                  asc: true
+                  asc: true,
+                  ps: 999999
                 }
               };
           return this.issues.fetch(options).done(function () {
@@ -270,14 +272,37 @@ define([
           this.$('.issue-list').addClass('hidden');
         },
 
-        renderIssue: function () {
-          // do nothing
+        renderIssue: function (issue) {
+          var issueView = new IssueView({
+            el: '#issue-' + issue.get('key'),
+            model: issue
+          });
+          this.issueViews.push(issueView);
+          issueView.render();
         },
 
         addIssue: function (issue) {
           var line = issue.get('line') || 0,
-              code = this.$('.source-line-code[data-line-number=' + line + ']');
+              code = this.$('.source-line-code[data-line-number=' + line + ']'),
+              issueBox = '<div class="issue" id="issue-' + issue.get('key') + '" data-key="' + issue.get('key') + '">';
           code.addClass('has-issues');
+          var issueList = code.find('.issue-list');
+          if (issueList.length === 0) {
+            code.append('<div class="issue-list"></div>');
+            issueList = code.find('.issue-list');
+          }
+          issueList
+              .append(issueBox)
+              .removeClass('hidden');
+          this.renderIssue(issue);
+        },
+
+        showIssuesForLine: function (line) {
+          this.$('.source-line-code[data-line-number="' + line + '"]').find('.issue-list').removeClass('hidden');
+          var issues = this.issues.filter(function (issue) {
+            return (issue.get('line') === line) || (!issue.get('line') && !line);
+          });
+          issues.forEach(this.renderIssue, this);
         },
 
         highlightUsages: function (e) {
@@ -350,6 +375,11 @@ define([
           popup.render();
         },
 
+        onLineIssuesClick: function (e) {
+          var line = $(e.currentTarget).data('line-number');
+          this.showIssuesForLine(line);
+        },
+
         showLineActionsPopup: function (e) {
           e.stopPropagation();
           $('body').click();

diff --git a/server/sonar-web/src/main/less/components/issues.less b/server/sonar-web/src/main/less/components/issues.less
index f779aba971f38a9b8ea16070165b054d512b76b2..64a4d6acb6ac563cfbe6e7db105c838479da9c2e 100644 (file)
--- a/server/sonar-web/src/main/less/components/issues.less
+++ b/server/sonar-web/src/main/less/components/issues.less
@@ -10,7 +10,6 @@
 
 .issue-list {
   margin: 10px 0;
-  background-color: #ffeaea;
 }
 
 .issue {
@@ -24,7 +23,7 @@
 
 .issue-list,
 .issue {
-  max-width: 900px;
+  max-width: 920px;
 }
 
 .issue.selected {

diff --git a/server/sonar-web/src/main/less/components/source.less b/server/sonar-web/src/main/less/components/source.less
index 44a8ae0040543d6dd78c855e65f6832b591edbb4..e0d230a55b1f11df43e55d9775d8ad1609619c6b 100644 (file)
--- a/server/sonar-web/src/main/less/components/source.less
+++ b/server/sonar-web/src/main/less/components/source.less
@@ -22,6 +22,7 @@
 
 .source-line:hover {
   .source-line-number,
+  .source-line-issues,
   .source-line-coverage,
   .source-line-duplications,
   .source-line-duplications-extra,
@@ -38,6 +39,7 @@
 .source-line-highlighted,
 .source-line-highlighted:hover {
   .source-line-number,
+  .source-line-issues,
   .source-line-coverage,
   .source-line-duplications,
   .source-line-duplications-extra,
@@ -85,6 +87,11 @@
     background-size: 4px;
     background-position: bottom;
   }
+
+  .issue-list {
+    margin-left: -10px;
+    margin-right: -10px;
+  }
 }
 
 .source-meta {
@@ -113,6 +120,11 @@
   }
 }
 
+.source-line-issues {
+  padding: 0 2px;
+  background-color: @barBackgroundColor;
+}
+
 .source-line-coverage {
   background-color: @barBackgroundColor;
 }
@@ -161,6 +173,10 @@
   height: @lineHeight;
 }
 
+.source-line-with-issues {
+  cursor: pointer;
+}
+
 .source-line-covered {
   background-color: @green !important;
   cursor: pointer;