SONAR-5319 Display the SQALE Rating in the header bar of the Component Viewer

4 files changed, 25 insertions, 4 deletions

diff --git a/server/sonar-web/src/main/hbs/component-viewer/header.hbs b/server/sonar-web/src/main/hbs/component-viewer/header.hbs
index 5f6619ce5b6..441fdc9215d 100644
--- a/server/sonar-web/src/main/hbs/component-viewer/header.hbs
+++ b/server/sonar-web/src/main/hbs/component-viewer/header.hbs
@@ -59,10 +59,18 @@
 
       <div class="component-viewer-header-measures-scope">
         <a data-scope="issues" class="component-viewer-header-measures-expand js-header-tab-issues">
+          {{#if component.measures.fSqaleRating}}
             <div class="component-viewer-header-measure">
-              <span class="component-viewer-header-measure-value">{{default component.measures.fDebt '0'}}</span>
-              <span class="component-viewer-header-measure-label">{{t 'component_viewer.header.debt'}}</span>
+              <span class="rating rating-{{component.measures.fSqaleRating}}"
+                    {{#if component.measures.fSqaleDebtRatio}}title="{{t 'metric.sqale_debt_ratio.name'}}: {{component.measures.fSqaleDebtRatio}}"{{/if}}>
+                {{component.measures.fSqaleRating}}
+              </span>
             </div>
+          {{/if}}
+          <div class="component-viewer-header-measure">
+            <span class="component-viewer-header-measure-value">{{default component.measures.fDebt '0'}}</span>
+            <span class="component-viewer-header-measure-label">{{t 'component_viewer.header.debt'}}</span>
+          </div>
           {{#if component.measures.fIssues}}
             <div class="component-viewer-header-measure">
               <span class="component-viewer-header-measure-value">{{component.measures.fIssues}}</span>
diff --git a/server/sonar-web/src/main/js/tests/e2e/tests/component-viewer-spec.js b/server/sonar-web/src/main/js/tests/e2e/tests/component-viewer-spec.js
index f0769a9911d..cae8ac13b93 100644
--- a/server/sonar-web/src/main/js/tests/e2e/tests/component-viewer-spec.js
+++ b/server/sonar-web/src/main/js/tests/e2e/tests/component-viewer-spec.js
@@ -63,6 +63,7 @@ casper.test.begin('Component Viewer Base Tests', function suite(test) {
 
     // Check main measures
     test.assertSelectorHasText('.js-header-tab-basic', '379');
+    test.assertSelectorHasText('.js-header-tab-issues', 'A');
     test.assertSelectorHasText('.js-header-tab-issues', '3h 30min');
     test.assertSelectorHasText('.js-header-tab-issues', '6');
     test.assertSelectorHasText('.js-header-tab-coverage', '74.3%');
diff --git a/server/sonar-web/src/main/js/tests/e2e/tests/component-viewer-spec/app.json b/server/sonar-web/src/main/js/tests/e2e/tests/component-viewer-spec/app.json
index be89c5f0795..551719f645f 100644
--- a/server/sonar-web/src/main/js/tests/e2e/tests/component-viewer-spec/app.json
+++ b/server/sonar-web/src/main/js/tests/e2e/tests/component-viewer-spec/app.json
@@ -35,7 +35,8 @@
     "fIssues": "6",
     "fMinorIssues": "1",
     "fMajorIssues": "1",
-    "fInfoIssues": "4"
+    "fInfoIssues": "4",
+    "fSqaleRating": "A"
   },
   "tabs": ["scm", "coverage", "duplications"],
   "manual_rules": [
diff --git a/server/sonar-web/src/main/less/component-viewer.less b/server/sonar-web/src/main/less/component-viewer.less
index cba1948e97f..67e73a6c603 100644
--- a/server/sonar-web/src/main/less/component-viewer.less
+++ b/server/sonar-web/src/main/less/component-viewer.less
@@ -426,6 +426,11 @@
   display: inline-block;
   vertical-align: middle;
   font-size: @baseFontSize;
+
+  .rating {
+    font-size: 18px;
+    font-weight: 300;
+  }
 }
 
 .component-viewer-header-measure + .component-viewer-header-measure {
@@ -452,7 +457,7 @@
 }
 
 .component-viewer-header-measure-issues {
-  width: 60px;
+  width: 45px;
 }
 
 .component-viewer-header-measure-issue {
@@ -583,6 +588,12 @@
   padding: 10px;
 }
 
+.component-viewer-header-sqale-rating {
+  float: left;
+  font-size: 20px;
+}
+
+
 .component-viewer-popup-test {
   position: relative;
   display: block;