SONAR-7346 Display the distribution of rules according by type on Quality Profiles page

2 files changed, 29 insertions, 32 deletions

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/profile.js b/server/sonar-web/src/main/js/apps/quality-profiles/profile.js
index 9508cd7c00d..ab0770edea6 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/profile.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/profile.js
@@ -46,19 +46,20 @@ export default Backbone.Model.extend({
     const key = this.id;
     const options = {
       ps: 1,
-      facets: 'active_severities',
+      facets: 'types',
       qprofile: key,
       activation: 'true'
     };
     return $.get(url, options).done(function (r) {
-      const severityFacet = _.findWhere(r.facets, { property: 'active_severities' });
-      if (severityFacet != null) {
-        const severities = severityFacet.values;
-        const severityComparator = function (s) {
-          return window.severityColumnsComparator(s.val);
+      const typesFacet = _.findWhere(r.facets, { property: 'types' });
+      if (typesFacet != null) {
+        const order = ['BUG', 'VULNERABILITY', 'CODE_SMELL'];
+        const types = typesFacet.values;
+        const typesComparator = function (t) {
+          return order.indexOf(t.val);
         };
-        const sortedSeverities = _.sortBy(severities, severityComparator);
-        _.extend(that.fetchChanged, { rulesSeverities: sortedSeverities });
+        const sortedTypes = _.sortBy(types, typesComparator);
+        _.extend(that.fetchChanged, { rulesTypes: sortedTypes });
       }
     });
   },
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/templates/quality-profiles-profile-details.hbs b/server/sonar-web/src/main/js/apps/quality-profiles/templates/quality-profiles-profile-details.hbs
index 2e221c27c31..f6f6a50f1cf 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/templates/quality-profiles-profile-details.hbs
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/templates/quality-profiles-profile-details.hbs
@@ -4,32 +4,28 @@
       <header class="page-header">
         <h3 class="page-title">{{t 'coding_rules'}}</h3>
       </header>
-      <p>
-        <a class="big" href="{{link rulesSearchUrl}}">{{formatMeasure activeRuleCount 'INT'}}</a>
-        {{tp 'quality_profile.x_active_rules' ''}}
-      </p>
-      {{#notEmpty rulesSeverities}}
+
+      <div>
+        <div class="display-inline-block text-right little-spacer-right" style="width: 40px">
+          <strong>
+            <a href="{{link rulesSearchUrl}}">{{formatMeasure activeRuleCount 'INT'}}</a>
+          </strong>
+        </div>
+        <strong>
+          {{tp 'quality_profile.x_active_rules' ''}}
+        </strong>
+      </div>
+
+      {{#notEmpty rulesTypes}}
         <div class="abs-width-400 spacer-top">
-          <div class="columns">
-            <div class="column-half">
-              {{#eachEven rulesSeverities}}
-                <p class="spacer-top">
-                  {{severityIcon val}}
-                  <a href="{{link ../rulesSearchUrl '|active_severities=' val}}">{{formatMeasure count 'INT'}}</a>
-                  <span class="text-lowercase">{{t 'severity' val}}</span>
-                </p>
-              {{/eachEven}}
-            </div>
-            <div class="column-half">
-              {{#eachOdd rulesSeverities}}
-                <p class="spacer-top">
-                  {{severityIcon val}}
-                  <a href="{{link ../rulesSearchUrl '|active_severities=' val}}">{{formatMeasure count 'INT'}}</a>
-                  <span class="text-lowercase">{{t 'severity' val}}</span>
-                </p>
-              {{/eachOdd}}
+          {{#each rulesTypes}}
+            <div class="spacer-top">
+              <div class="display-inline-block text-right little-spacer-right" style="width: 40px">
+                <a href="{{link ../rulesSearchUrl '|types=' val}}">{{formatMeasure count 'INT'}}</a>
+              </div>
+              {{issueType val}}
             </div>
-          </div>
+          {{/each}}
         </div>
       {{/notEmpty}}
     </div>