SONAR-5209 Redesign headers

diff --git a/sonar-server/src/main/coffee/component-viewer/main.coffee b/sonar-server/src/main/coffee/component-viewer/main.coffee
index ea1dac32e4e9da493ada636cbcb98e394920b735..19f0aa67deebe98977f84541164cdb85aacea58f 100644 (file)
--- a/sonar-server/src/main/coffee/component-viewer/main.coffee
+++ b/sonar-server/src/main/coffee/component-viewer/main.coffee
@@ -23,7 +23,7 @@ define [
   COVERAGE_METRIC_LIST = 'coverage,line_coverage,branch_coverage,' +
                          'coverage_line_hits_data,covered_conditions_by_line,conditions_by_line'
 
-  ISSUES_METRIC_LIST = 'blocker_violations,critical_violations,major_violations,minor_violations,info_violations'
+  ISSUES_METRIC_LIST = 'violations,sqale_index,blocker_violations,critical_violations,major_violations,minor_violations,info_violations'
 
   DUPLICATIONS_METRIC_LIST = 'duplicated_lines_density,duplicated_blocks,duplicated_files,duplicated_lines'
 
@@ -71,26 +71,16 @@ define [
       @sourceRegion.show @sourceView
 
 
-    requestComponent: (key, metrics) ->
-      $.get API_RESOURCES, resource: key, metrics: metrics, (data) =>
+    requestComponent: (key) ->
+      metricList = [SOURCE_METRIC_LIST, COVERAGE_METRIC_LIST, ISSUES_METRIC_LIST, DUPLICATIONS_METRIC_LIST].join ','
+      $.get API_RESOURCES, resource: key, metrics: metricList, (data) =>
         @component.set data[0]
-
-
-    requestComponentCoverage: (key) ->
-      $.get API_RESOURCES, resource: key, metrics: COVERAGE_METRIC_LIST
-
-
-    requestComponentIssues: (key) ->
-      $.get API_RESOURCES, resource: key, metrics: ISSUES_METRIC_LIST
-
-
-    requestComponentDuplications: (key) ->
-      $.get API_RESOURCES, resource: key, metrics: DUPLICATIONS_METRIC_LIST
+        @component.set 'measures', _.indexBy(data[0].msr, 'key')
 
 
     requestSource: (key) ->
       $.get API_SOURCES, key: key, (data) =>
-        @source.set source: data.source
+        @source.set source: data.sources
 
 
     extractCoverage: (data) ->
@@ -154,7 +144,7 @@ define [
     showCoverage: ->
       @settings.set 'coverage', true
       unless @source.has 'coverage'
-        @requestComponentCoverage(@key).done (data) =>
+        @requestComponent(@key).done (data) =>
           @extractCoverage data
           @sourceView.render()
       else
@@ -180,7 +170,7 @@ define [
       @settings.set 'issues', true
 
       unless @source.has 'issues'
-        @requestComponentIssues(@key).done (data) =>
+        @requestComponent(@key).done (data) =>
           @extractIssues data
           @sourceView.render()
 
@@ -197,7 +187,7 @@ define [
     showDuplications: ->
       @settings.set 'duplications', true
       unless @source.has 'duplications'
-        @requestComponentDuplications(@key).done (data) =>
+        @requestComponent(@key).done (data) =>
           @extractDuplications data
           @sourceView.render()
       else

diff --git a/sonar-server/src/main/coffee/component-viewer/source.coffee b/sonar-server/src/main/coffee/component-viewer/source.coffee
index f4716811c7943f895a0895131d236fedde44dc14..9cbfcea481831198a65481e5ef1dfc5bc9c9ddac 100644 (file)
--- a/sonar-server/src/main/coffee/component-viewer/source.coffee
+++ b/sonar-server/src/main/coffee/component-viewer/source.coffee
@@ -240,8 +240,9 @@ define [
 
     prepareSource: ->
       source = @model.get 'source'
-      _.map source, (code, line) =>
-        base = lineNumber: line, code: code
+      _.map source, (item) =>
+        line = item[0]
+        base = lineNumber: line, code: item[1]
         if @options.main.settings.get('coverage')
           _.extend base, @getLineCoverage(line), @getLineCoverageConditions(line)
         if @options.main.settings.get('duplications')

diff --git a/sonar-server/src/main/hbs/component-viewer/header/_basic-header.hbs b/sonar-server/src/main/hbs/component-viewer/header/_basic-header.hbs
new file mode 100644 (file)
index 0000000..7b9ab70
--- /dev/null
+++ b/sonar-server/src/main/hbs/component-viewer/header/_basic-header.hbs
@@ -0,0 +1,41 @@
+<tr class="component-viewer-header">
+  {{#if settings.coverage}}
+    <th class="stat"></th>
+    <th class="stat"></th>
+  {{/if}}
+  {{#if settings.duplications}}
+    <th class="stat"></th>
+  {{/if}}
+  <th>
+    <button class="button-clean button-full-size"><i class="icon-list"></i></button>
+  </th>
+  <th class="component-viewer-header-main">
+    <div class="component-viewer-header-measure component-viewer-header-measure-main">
+      <span class="component-viewer-header-measure-value">{{component.measures.ncloc.frmt_val}}</span>
+      <span class="component-viewer-header-measure-label">{{t 'metric.ncloc.name'}}</span>
+    </div>
+    <div class="component-viewer-header-measure">
+      <span class="component-viewer-header-measure-value">{{component.measures.lines.frmt_val}}</span>
+      <span class="component-viewer-header-measure-label">{{t 'metric.lines.name'}}</span>
+    </div>
+    <div class="component-viewer-header-measure">
+      <span class="component-viewer-header-measure-value">{{component.measures.functions.frmt_val}}</span>
+      <span class="component-viewer-header-measure-label">{{t 'metric.functions.name'}}</span>
+    </div>
+    <div class="component-viewer-header-measure">
+      <span class="component-viewer-header-measure-value">{{component.measures.accessors.frmt_val}}</span>
+      <span class="component-viewer-header-measure-label">{{t 'metric.accessors.name'}}</span>
+    </div>
+    <div class="component-viewer-header-measure">
+      <span class="component-viewer-header-measure-value">{{component.measures.classes.frmt_val}}</span>
+      <span class="component-viewer-header-measure-label">{{t 'metric.classes.name'}}</span>
+    </div>
+    <div class="component-viewer-header-filter">
+      <button class="button-clean">
+        <i class="icon-period"></i>
+        <i class="icon-dropdown"></i>
+      </button>
+      <span class="component-viewer-header-measure-label">Time changes</span>
+    </div>
+  </th>
+</tr>
\ No newline at end of file

diff --git a/sonar-server/src/main/hbs/component-viewer/header/_coverage-header.hbs b/sonar-server/src/main/hbs/component-viewer/header/_coverage-header.hbs
new file mode 100644 (file)
index 0000000..fd776cf
--- /dev/null
+++ b/sonar-server/src/main/hbs/component-viewer/header/_coverage-header.hbs
@@ -0,0 +1,34 @@
+<tr class="component-viewer-header">
+  {{#if settings.coverage}}
+    <th class="stat"></th>
+    <th class="stat"></th>
+  {{/if}}
+  {{#if settings.duplications}}
+    <th class="stat"></th>
+  {{/if}}
+  <th>
+    <button class="button-clean button-full-size"><i class="icon-list"></i></button>
+  </th>
+  <th class="component-viewer-header-main">
+    <div class="component-viewer-header-measure component-viewer-header-measure-main">
+      <span class="component-viewer-header-measure-value">{{component.measures.coverage.frmt_val}}</span>
+      <span class="component-viewer-header-measure-label">{{t 'metric.coverage.name'}}</span>
+    </div>
+    <div class="component-viewer-header-measure">
+      <span class="component-viewer-header-measure-value">{{component.measures.line_coverage.frmt_val}}</span>
+      <span class="component-viewer-header-measure-label">{{t 'metric.line_coverage.name'}}</span>
+    </div>
+    <div class="component-viewer-header-measure">
+      <span class="component-viewer-header-measure-value">{{component.measures.branch_coverage.frmt_val}}</span>
+      <span class="component-viewer-header-measure-label">{{t 'metric.branch_coverage.name'}}</span>
+    </div>
+
+    <div class="component-viewer-header-filter">
+      <button class="button-clean">
+        <i class="icon-period"></i>
+        <i class="icon-dropdown"></i>
+      </button>
+      <span class="component-viewer-header-measure-label">Time changes</span>
+    </div>
+  </th>
+</tr>
\ No newline at end of file

diff --git a/sonar-server/src/main/hbs/component-viewer/header/_issues-header.hbs b/sonar-server/src/main/hbs/component-viewer/header/_issues-header.hbs
new file mode 100644 (file)
index 0000000..cb12904
--- /dev/null
+++ b/sonar-server/src/main/hbs/component-viewer/header/_issues-header.hbs
@@ -0,0 +1,84 @@
+<tr class="component-viewer-header">
+  {{#if settings.coverage}}
+    <th class="stat"></th>
+    <th class="stat"></th>
+  {{/if}}
+  {{#if settings.duplications}}
+    <th class="stat"></th>
+  {{/if}}
+  <th>
+    <button class="button-clean button-full-size"><i class="icon-list"></i></button>
+  </th>
+  <th class="component-viewer-header-main">
+    <div class="component-viewer-header-measure component-viewer-header-measure-main">
+      <span class="component-viewer-header-measure-value">{{component.measures.violations.frmt_val}}</span>
+      <span class="component-viewer-header-measure-label">{{t 'metric.violations.name'}}</span>
+    </div>
+    <div class="component-viewer-header-measure component-viewer-header-measure-main">
+      <span class="component-viewer-header-measure-value">{{component.measures.sqale_index.frmt_val}}</span>
+      <span class="component-viewer-header-measure-label">{{t 'metric.sqale_index.name'}}</span>
+    </div>
+    {{#if component.measures.blocker_violations.frmt_val}}
+      <div class="component-viewer-header-measure">
+            <span class="component-viewer-header-measure-value">
+              <i class="icon-severity-blocker"></i>
+              {{component.measures.blocker_violations.frmt_val}}
+            </span>
+        <span class="component-viewer-header-measure-label">{{t 'severity.BLOCKER'}}</span>
+      </div>
+    {{/if}}
+    {{#if component.measures.critical_violations.frmt_val}}
+      <div class="component-viewer-header-measure">
+            <span class="component-viewer-header-measure-value">
+              <i class="icon-severity-critical"></i>
+              {{component.measures.critical_violations.frmt_val}}
+            </span>
+        <span class="component-viewer-header-measure-label">{{t 'severity.CRITICAL'}}</span>
+      </div>
+    {{/if}}
+    {{#if component.measures.major_violations.frmt_val}}
+      <div class="component-viewer-header-measure">
+            <span class="component-viewer-header-measure-value">
+              <i class="icon-severity-major"></i>
+              {{component.measures.major_violations.frmt_val}}
+            </span>
+        <span class="component-viewer-header-measure-label">{{t 'severity.MAJOR'}}</span>
+      </div>
+    {{/if}}
+    {{#if component.measures.minor_violations.frmt_val}}
+      <div class="component-viewer-header-measure">
+            <span class="component-viewer-header-measure-value">
+              <i class="icon-severity-minor"></i>
+              {{component.measures.minor_violations.frmt_val}}
+            </span>
+        <span class="component-viewer-header-measure-label">{{t 'severity.MINOR'}}</span>
+      </div>
+    {{/if}}
+    {{#if component.measures.info_violations.frmt_val}}
+      <div class="component-viewer-header-measure">
+            <span class="component-viewer-header-measure-value">
+              <i class="icon-severity-info"></i>
+              {{component.measures.info_violations.frmt_val}}
+            </span>
+        <span class="component-viewer-header-measure-label">{{t 'severity.INFO'}}</span>
+      </div>
+    {{/if}}
+
+    <div class="component-viewer-header-filter">
+      <button class="button-clean">
+        <i class="icon-period"></i>
+        <i class="icon-dropdown"></i>
+      </button>
+      <span class="component-viewer-header-measure-label">Time changes</span>
+    </div>
+
+    <div class="component-viewer-header-filter">
+      <button class="button-clean">
+        <i class="icon-filter"></i>
+        <i class="icon-dropdown"></i>
+      </button>
+      <span class="component-viewer-header-measure-label">All issues</span>
+    </div>
+
+  </th>
+</tr>
\ No newline at end of file

diff --git a/sonar-server/src/main/hbs/component-viewer/source.hbs b/sonar-server/src/main/hbs/component-viewer/source.hbs
index 16c6a6a022e33f10fa3dfef7f6ea2f4f6570308b..00a3d3c73624d85a1090af1d58c44ba53eabefe0 100644 (file)
--- a/sonar-server/src/main/hbs/component-viewer/source.hbs
+++ b/sonar-server/src/main/hbs/component-viewer/source.hbs
@@ -37,90 +37,22 @@
         </li>
       </ul>
 
-      {{qualifierIcon component.qualifier}} <span class="component-viewer-title">{{component.lname}}</span>
       {{#if component.projectLongName}}
-        <span class="component-viewer-title-separator">—</span>
         {{qualifierIcon 'TRK'}} <span class="component-viewer-title">{{component.projectLongName}}</span>
+        <span class="component-viewer-title-separator">—</span>
       {{/if}}
+      {{qualifierIcon component.qualifier}} <span class="component-viewer-title">{{component.lname}}</span>
 
       <a class="icon-not-favorite" href="#" onclick="toggleFav({{component.id}}, this); return false;"
          title="Click to add to favourites"></a>
     </th>
   </tr>
-  <tr>
-    {{#if settings.coverage}}
-      <th class="stat"></th>
-      <th class="stat"></th>
-    {{/if}}
-    {{#if settings.duplications}}
-      <th class="stat"></th>
-    {{/if}}
-    <th class="stat settings-toggle">
-      <button class="button-clean js-toggle-measures"><i class="icon-list"></i></button>
-    </th>
-    <th class="measures">
-      <ul class="component-viewer-measures">
-        <li class="component-viewer-measures-section brief">
-          <dl>
-            {{#each component.msr}}
-              <dt>{{t 'metric' key 'name'}}</dt><dd>{{frmt_val}}</dd>
-            {{/each}}
-          </dl>
-        </li>
-        {{#if settings.issues}}
-          <li class="component-viewer-measures-section brief">
-            {{#if component.issuesMeasures}}
-              {{#with component.issuesMeasures}}
-                <dl>
-                  <dt>Issues</dt>
-                  <dd>
-                    {{#if blocker_violations}}
-                      <i class="icon-severity-blocker"></i>{{blocker_violations}}&nbsp;
-                    {{/if}}
-                    {{#if critical_violations}}
-                      <i class="icon-severity-critical"></i>{{critical_violations}}&nbsp;
-                    {{/if}}
-                    {{#if major_violations}}
-                      <i class="icon-severity-major"></i>{{major_violations}}&nbsp;
-                    {{/if}}
-                    {{#if minor_violations}}
-                      <i class="icon-severity-minor"></i>{{minor_violations}}&nbsp;
-                    {{/if}}
-                    {{#if info_violations}}
-                      <i class="icon-severity-info"></i>{{info_violations}}&nbsp;
-                    {{/if}}
-                  </dd>
-                </dl>
-              {{/with}}
-            {{/if}}
-          </li>
-        {{/if}}
-        {{#if settings.coverage}}
-          <li class="component-viewer-measures-section brief">
-            {{#if component.coverageMeasures}}
-              <dl>
-                {{#each component.coverageMeasures}}
-                  <dt>{{t 'metric' key 'name'}}</dt><dd>{{frmt_val}}</dd>
-                {{/each}}
-              </dl>
-            {{/if}}
-          </li>
-        {{/if}}
-        {{#if settings.duplications}}
-          <li class="component-viewer-measures-section brief">
-            {{component.duplicationsMeasures}}
-            {{#if component.duplicationsMeasures}}
-              <dl>
-                {{#each component.duplicationsMeasures}}
-                  <dt>{{t 'metric' key 'name'}}</dt><dd>{{frmt_val}}</dd>
-                {{/each}}
-              </dl>
-            {{/if}}
-          </li>
-        {{/if}}
-      </ul>
-    </th>
-  </tr>
+
+  {{! headers }}
+  {{> '_basic-header'}}
+  {{#if settings.issues}}{{> '_issues-header'}}{{/if}}
+  {{#if settings.coverage}}{{> '_coverage-header'}}{{/if}}
+
   </thead>
   <tbody>
     <tr class="row row-hidden" data-line-number="0">

diff --git a/sonar-server/src/main/less/component-viewer.less b/sonar-server/src/main/less/component-viewer.less
index 01fff2e58211ca90c6eee64990da4b55a6c2f927..e847f609f781148899664b7404b5aded4a9954a1 100644 (file)
--- a/sonar-server/src/main/less/component-viewer.less
+++ b/sonar-server/src/main/less/component-viewer.less
@@ -82,6 +82,7 @@
   .code th {
     height: 30px;
     .box-sizing(border-box);
+    background-color: @barBackgroundColor;
 
     &.stat {
       padding-top: 4px;
@@ -232,42 +233,66 @@
 }
 
 
-.component-viewer-measures {
+.component-viewer-header {
+
+  & > th {
+    background-color: @barBackgroundColor;
+    border-top: 1px solid @barBorderColor;
+    border-bottom: 1px solid @barBorderColor;
+  }
+
+  .button-full-size {
+    .size(100%, 100%);
+    margin: 0;
+  }
+}
+
+.component-viewer-header-main {
   font-size: 0;
+  padding: 4px 0 4px 5px;
 }
 
-.component-viewer-measures-section {
+.component-viewer-header-measure {
   display: inline-block;
-  vertical-align: top;
-  width: 25%;
-  max-width: 260px;
-  padding-right: 40px;
-  .box-sizing(border-box);
+  vertical-align: bottom;
+  margin-right: 20px;
   font-size: @baseFontSize;
+}
 
-  &.brief {
-    dt { display: none; }
-    dt:first-of-type { display: block; }
-    dd { display: none; }
-    dd:first-of-type { display: block; }
-  }
+.component-viewer-header-measure-label {
+  display: block;
+  margin-top: 2px;
+  color: #777;
+  font-size: @smallFontSize;
 
-  &:not(.brief) {
-    padding-top: 3px;
-    padding-bottom: 3px;
-  }
+  &:after { content: ""; }
+}
 
-  dt {
-    float: left;
-    clear: left;
-  }
+.component-viewer-header-measure-value {
+  display: block;
+  color: @baseFontColor;
+  font-size: 14px;
+}
 
-  dd {
-    float: right;
-    font-weight: bold;
+.component-viewer-header-measure-main {
+
+  .component-viewer-header-measure-value {
+    font-size: 24px;
   }
 }
 
+.component-viewer-header-filter {
+  display: inline-block;
+  vertical-align: bottom;
+  margin-right: 20px;
+  padding-left: 20px;
+  border-left: 1px solid @barBorderColor;
+  font-size: @baseFontSize;
+  color: @darkBlue;
+
+  .button-clean { height: auto; }
+}
+
 
 
 @popupArrowSize: 8px;

diff --git a/sonar-server/src/main/less/icons.less b/sonar-server/src/main/less/icons.less
index 23aea4b29745d6d7de3b0998eb692357045a3020..403dbdcad65b1c4b24cdb77ed880b7cd50209b84 100644 (file)
--- a/sonar-server/src/main/less/icons.less
+++ b/sonar-server/src/main/less/icons.less
@@ -415,6 +415,14 @@ a[class^="icon-"], a[class*=" icon-"] {
   content: "\e60b";
   font-size: @iconFontSize;
 }
+.icon-period:before {
+  content: "\f018";
+  font-size: @iconFontSize;
+}
+.icon-filter:before {
+  content: "\f03a";
+  font-size: @iconFontSize;
+}
 
 
 /*

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/search.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/search.html.erb
index 758be6eae54045ebbc138abfc3607b5738991664..1ed04d23299e1f0905ed15319ac2264b363acd9a 100644 (file)
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/search.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/search.html.erb
@@ -242,6 +242,13 @@
     'metric.duplicated_blocks.name': '<%= escape_javascript message('metric.duplicated_blocks.name') -%>',
     'metric.duplicated_files.name': '<%= escape_javascript message('metric.duplicated_files.name') -%>',
     'metric.duplicated_lines.name': '<%= escape_javascript message('metric.duplicated_lines.name') -%>',
-    'metric.duplicated_lines_density.name': '<%= escape_javascript message('metric.duplicated_lines_density.name') -%>'
+    'metric.duplicated_lines_density.name': '<%= escape_javascript message('metric.duplicated_lines_density.name') -%>',
+    'metric.violations.name': '<%= escape_javascript message('metric.violations.name') -%>',
+    'metric.sqale_index.name': '<%= escape_javascript message('metric.sqale_index.name') -%>',
+    'metric.blocker_violations.name': '<%= escape_javascript message('metric.blocker_violations.name') -%>',
+    'metric.critical_violations.name': '<%= escape_javascript message('metric.critical_violations.name') -%>',
+    'metric.major_violations.name': '<%= escape_javascript message('metric.major_violations.name') -%>',
+    'metric.minor_violations.name': '<%= escape_javascript message('metric.minor_violations.name') -%>',
+    'metric.info_violations.name': '<%= escape_javascript message('metric.info_violations.name') -%>'
   };
 </script>

diff --git a/sonar-server/src/main/webapp/fonts/sonar.woff b/sonar-server/src/main/webapp/fonts/sonar.woff
index b8a67891a7a52222149fc8360b43e8d211866cbd..357bfb572dadcc88a56d99eb00d29a1ec66a6b0d 100755 (executable)
Binary files a/sonar-server/src/main/webapp/fonts/sonar.woff and b/sonar-server/src/main/webapp/fonts/sonar.woff differ