From 94532b34aa649733d0a38d3aabe6e23ee7cfceaf Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Wed, 8 Apr 2015 14:13:10 +0200 Subject: [PATCH] SONAR-6331 apply feedback --- .../hbs/overview/_overview-gate-condition.hbs | 15 ++ .../main/hbs/overview/overview-coverage.hbs | 25 ++- .../src/main/hbs/overview/overview-debt.hbs | 21 +++ .../hbs/overview/overview-duplications.hbs | 17 +- .../src/main/hbs/overview/overview-gate.hbs | 44 ++--- .../src/main/hbs/overview/overview-issues.hbs | 25 ++- .../hbs/overview/overview-main-layout.hbs | 14 +- .../src/main/hbs/overview/overview-size.hbs | 18 +- server/sonar-web/src/main/js/application.js | 26 ++- .../main/js/common/handlebars-extensions.js | 11 +- .../src/main/js/graphics/sparkline.js | 85 +++++---- server/sonar-web/src/main/js/overview/app.js | 1 + .../src/main/js/overview/controller.js | 3 + .../main/js/overview/main/coverage-view.js | 14 +- .../src/main/js/overview/main/debt-view.js | 50 ++++++ .../js/overview/main/duplications-view.js | 14 +- .../src/main/js/overview/main/issues-view.js | 14 +- .../src/main/js/overview/main/layout.js | 3 +- .../src/main/js/overview/main/size-view.js | 14 +- .../src/main/js/overview/models/state.js | 16 +- .../src/main/js/overview/trend-view.js | 163 ++++++++++++++++++ .../src/main/less/components/columns.less | 9 +- .../src/main/less/pages/overview.less | 48 +++--- server/sonar-web/src/test/js/overview.js | 16 +- .../src/test/json/overview/measures.json | 4 +- .../src/test/json/overview/timemachine.json | 2 +- server/sonar-web/src/test/views/overview.jade | 1 - .../resources/org/sonar/l10n/core.properties | 12 +- 28 files changed, 523 insertions(+), 162 deletions(-) create mode 100644 server/sonar-web/src/main/hbs/overview/_overview-gate-condition.hbs create mode 100644 server/sonar-web/src/main/hbs/overview/overview-debt.hbs create mode 100644 server/sonar-web/src/main/js/overview/main/debt-view.js create mode 100644 server/sonar-web/src/main/js/overview/trend-view.js diff --git a/server/sonar-web/src/main/hbs/overview/_overview-gate-condition.hbs b/server/sonar-web/src/main/hbs/overview/_overview-gate-condition.hbs new file mode 100644 index 00000000000..c3c278b9fd9 --- /dev/null +++ b/server/sonar-web/src/main/hbs/overview/_overview-gate-condition.hbs @@ -0,0 +1,15 @@ +
  • + + {{#canHaveDrilldownUrl metric period}} + {{formatMeasure actual type}} + {{else}} + {{formatMeasure actual type}} + {{/canHaveDrilldownUrl}} + {{t 'metric' metric 'name'}} + {{default periodName period}} +
    • diff --git a/server/sonar-web/src/main/hbs/overview/overview-coverage.hbs b/server/sonar-web/src/main/hbs/overview/overview-coverage.hbs index bdca7c4d95b..ce3d7a41109 100644 --- a/server/sonar-web/src/main/hbs/overview/overview-coverage.hbs +++ b/server/sonar-web/src/main/hbs/overview/overview-coverage.hbs @@ -1,26 +1,25 @@ +
    +

    {{t 'overview.testing'}}

    +
    +
    -
    {{t 'overview.coverage'}}
    +
    {{t 'metric.coverage.name'}}
    {{#notNull coverage}} - {{formatMeasure coverage 'PERCENT'}} + {{formatMeasure coverage 'PERCENT'}} {{else}} – {{/notNull}}
    - {{#notNull coverage3}} -
    - {{formatMeasureVariation coverage3 'PERCENT'}} - {{period3Name}} -
    - {{/notNull}} {{#notNull newCoverage3}} -
    - {{formatMeasure newCoverage3 'PERCENT'}} - on new code -
    +
    {{period3Name}}
    + {{formatMeasure newCoverage3 'PERCENT'}} + {{t 'overview.on_new_code'}} {{/notNull}}
    -
    +
    diff --git a/server/sonar-web/src/main/hbs/overview/overview-debt.hbs b/server/sonar-web/src/main/hbs/overview/overview-debt.hbs new file mode 100644 index 00000000000..6c4e6445de6 --- /dev/null +++ b/server/sonar-web/src/main/hbs/overview/overview-debt.hbs @@ -0,0 +1,21 @@ +
    +

    {{t 'overview.debt'}}

    +
    + +
    +
    {{t 'metric.sqale_index.name'}}
    +
    + {{formatMeasure debt 'WORK_DUR'}} +
    + {{#notNull issues3}} +
    {{period3Name}}
    + {{formatMeasure newDebt 'WORK_DUR'}} + {{t 'overview.new'}} + {{/notNull}} +
    + +
    +
    +
    diff --git a/server/sonar-web/src/main/hbs/overview/overview-duplications.hbs b/server/sonar-web/src/main/hbs/overview/overview-duplications.hbs index 68b7ecf1748..6c675595748 100644 --- a/server/sonar-web/src/main/hbs/overview/overview-duplications.hbs +++ b/server/sonar-web/src/main/hbs/overview/overview-duplications.hbs @@ -1,19 +1,22 @@ +
    +

    {{t 'overview.duplications'}}

    +
    +
    -
    {{t 'overview.duplications'}}
    +
    {{t 'metric.duplicated_lines_density.short_name'}}
    {{formatMeasure duplications 'PERCENT'}}
    {{#notNull duplications3}} -
    - {{formatMeasureVariation duplications3 'PERCENT'}} - {{period3Name}} -
    +
    {{period3Name}}
    + {{formatMeasureVariation duplications3 'PERCENT'}} {{/notNull}}
    -
    +
    diff --git a/server/sonar-web/src/main/hbs/overview/overview-gate.hbs b/server/sonar-web/src/main/hbs/overview/overview-gate.hbs index a43f972baac..a354e431b1e 100644 --- a/server/sonar-web/src/main/hbs/overview/overview-gate.hbs +++ b/server/sonar-web/src/main/hbs/overview/overview-gate.hbs @@ -1,22 +1,22 @@ -
    - {{#notEmpty gateConditions}} - - {{/notEmpty}} -
    +
    +

    {{t 'overview.gate'}}

    +
    + +{{#notEmpty gateConditions}} +
    +
    +
      + {{#eachEven gateConditions}} + {{> '_overview-gate-condition'}} + {{/eachEven}} +
    +
    +
    +
      + {{#eachOdd gateConditions}} + {{> '_overview-gate-condition'}} + {{/eachOdd}} +
    +
    +
    +{{/notEmpty}} diff --git a/server/sonar-web/src/main/hbs/overview/overview-issues.hbs b/server/sonar-web/src/main/hbs/overview/overview-issues.hbs index ddc1ebdc350..09940d8cc95 100644 --- a/server/sonar-web/src/main/hbs/overview/overview-issues.hbs +++ b/server/sonar-web/src/main/hbs/overview/overview-issues.hbs @@ -1,24 +1,21 @@ +
    +

    {{t 'overview.issues'}}

    +
    +
    {{t 'overview.issues'}}
    - {{formatMeasure issues 'INT'}} -
    -
    - {{#notNull sqaleRating}} - {{formatMeasure sqaleRating 'RATING'}} - {{/notNull}} -    - {{formatMeasure debt 'WORK_DUR'}} + {{formatMeasure issues 'SHORT_INT'}}
    {{#notNull issues3}} -
    - {{formatMeasureVariation issues3 'INT'}} - new {{period3Name}} -
    +
    {{period3Name}}
    + {{formatMeasure issues3 'INT'}} + {{t 'overview.new'}} {{/notNull}}
    -
    +
    diff --git a/server/sonar-web/src/main/hbs/overview/overview-main-layout.hbs b/server/sonar-web/src/main/hbs/overview/overview-main-layout.hbs index 8ce2a7d4e4f..827246359f9 100644 --- a/server/sonar-web/src/main/hbs/overview/overview-main-layout.hbs +++ b/server/sonar-web/src/main/hbs/overview/overview-main-layout.hbs @@ -1,18 +1,12 @@ -
    - -
    -
    -
    -
    +
    +
    +
    -
    -
    +
    -
    -
    diff --git a/server/sonar-web/src/main/hbs/overview/overview-size.hbs b/server/sonar-web/src/main/hbs/overview/overview-size.hbs index b06b14ed706..907e4727c9f 100644 --- a/server/sonar-web/src/main/hbs/overview/overview-size.hbs +++ b/server/sonar-web/src/main/hbs/overview/overview-size.hbs @@ -1,16 +1,24 @@ +
    +

    {{t 'overview.size'}}

    +
    +
    -
    {{t 'overview.lines_of_code'}}
    +
    {{t 'metric.ncloc.name'}}
    - {{formatMeasure ncloc 'INT'}} + {{formatMeasure ncloc 'SHORT_INT'}}
    + {{#notNull ncloc3}}
    - {{formatMeasureVariation ncloc3 'INT'}} - {{period3Name}} +
    {{period3Name}}
    + {{formatMeasureVariation ncloc3 'SHORT_INT'}}
    {{/notNull}}
    -
    +
    + + diff --git a/server/sonar-web/src/main/js/application.js b/server/sonar-web/src/main/js/application.js index 530f2eba504..592c1265493 100644 --- a/server/sonar-web/src/main/js/application.js +++ b/server/sonar-web/src/main/js/application.js @@ -288,6 +288,28 @@ function closeModalWindow () { (function () { + function shortIntFormatter (value) { + var format = '0,0'; + if (value >= 1000) { + format = '0.[0]a'; + } + if (value >= 10000) { + format = '0a'; + } + return numeral(value).format(format); + } + + function shortIntVariationFormatter (value) { + var format = '+0,0'; + if (value >= 1000) { + format = '+0.[0]a'; + } + if (value >= 10000) { + format = '+0a'; + } + return numeral(value).format(format); + } + /** * Check if days should be displayed for a work duration * @param {number} days @@ -324,7 +346,7 @@ function closeModalWindow () { * @returns {string} */ function addSpaceIfNeeded (value) { - return value.length > 0 ? value : value + ' '; + return value.length > 0 ? value + ' ' : value; } /** @@ -402,6 +424,7 @@ function closeModalWindow () { 'INT': function (value) { return numeral(value).format('0,0'); }, + 'SHORT_INT': shortIntFormatter, 'FLOAT': function (value) { return numeral(value).format('0,0.0'); }, @@ -429,6 +452,7 @@ function closeModalWindow () { 'INT': function (value) { return value === 0 ? '0' : numeral(value).format('+0,0'); }, + 'SHORT_INT': shortIntVariationFormatter, 'FLOAT': function (value) { return value === 0 ? '0' : numeral(value).format('+0,0.0'); }, diff --git a/server/sonar-web/src/main/js/common/handlebars-extensions.js b/server/sonar-web/src/main/js/common/handlebars-extensions.js index 86b4286efb4..1a8fb87bef3 100644 --- a/server/sonar-web/src/main/js/common/handlebars-extensions.js +++ b/server/sonar-web/src/main/js/common/handlebars-extensions.js @@ -370,11 +370,14 @@ }); Handlebars.registerHelper('numberShort', function (number) { - if (number > 9999) { - return numeral(number).format('0.[0]a'); - } else { - return numeral(number).format('0,0'); + var format = '0,0'; + if (number >= 10000) { + format = '0.[0]a'; + } + if (number >= 100000) { + format = '0a'; } + return numeral(number).format(format); }); Handlebars.registerHelper('pluginActions', function (actions, options) { diff --git a/server/sonar-web/src/main/js/graphics/sparkline.js b/server/sonar-web/src/main/js/graphics/sparkline.js index 986011c0e58..6d2397f7210 100644 --- a/server/sonar-web/src/main/js/graphics/sparkline.js +++ b/server/sonar-web/src/main/js/graphics/sparkline.js @@ -26,7 +26,7 @@ var defaults = { height: 30, color: '#1f77b4', - interpolate: 'bundle', + interpolate: 'linear', tension: 1, type: 'INT' }; @@ -57,15 +57,17 @@ xScale = d3.time.scale() .domain(d3.extent(data, function (d) { return moment(d.val).toDate(); - })), + })) + .nice(), yScale = d3.scale.linear() .domain(d3.extent(data, function (d) { return d.count; - })), + })) + .nice(), - minValue = yScale.domain()[0], - maxValue = yScale.domain()[1], + xTicks = xScale.ticks(5), + yTicks = yScale.ticks(3), line = d3.svg.line() .x(function (d) { @@ -75,31 +77,13 @@ return yScale(d.count); }) .interpolate(options.interpolate) - .tension(options.tension), - - minLabel = plot.append('text') - .text(window.formatMeasure(minValue, options.type)) - .attr('dy', '3px') - .style('text-anchor', 'end') - .style('font-size', '10px') - .style('font-weight', '300') - .style('fill', '#aaa'), - - maxLabel = plot.append('text') - .text(window.formatMeasure(maxValue, options.type)) - .attr('dy', '5px') - .style('text-anchor', 'end') - .style('font-size', '10px') - .style('font-weight', '300') - .style('fill', '#aaa'), - - maxLabelWidth = Math.max(minLabel.node().getBBox().width, maxLabel.node().getBBox().width) + 3; + .tension(options.tension); _.extend(options, { - marginLeft: 1, - marginRight: 1 + maxLabelWidth, - marginTop: 6, - marginBottom: 6 + marginLeft: 20, + marginRight: 50, + marginTop: 0, + marginBottom: 25 }); _.extend(options, { @@ -111,18 +95,49 @@ xScale.range([0, options.availableWidth]); yScale.range([options.availableHeight, 0]); + xTicks.forEach(function (tick) { + plot.append('text') + .text(xScale.tickFormat()(tick)) + .attr('x', xScale(tick)) + .attr('y', options.availableHeight + 20) + .attr('dy', '0') + .style('text-anchor', 'middle') + .style('font-size', '10px') + .style('font-weight', '300') + .style('fill', '#aaa'); + plot.append('line') + .attr('x1', xScale(tick)) + .attr('x2', xScale(tick)) + .attr('y1', 0) + .attr('y2', options.availableHeight) + .style('stroke', '#eee') + .style('shape-rendering', 'crispedges'); + }); + + yTicks.forEach(function (tick) { + plot.append('text') + .text(window.formatMeasure(tick, options.type)) + .attr('x', options.availableWidth + 50) + .attr('y', yScale(tick)) + .attr('dy', '5px') + .style('text-anchor', 'end') + .style('font-size', '10px') + .style('font-weight', '300') + .style('fill', '#aaa'); + plot.append('line') + .attr('x1', 0) + .attr('x2', options.availableWidth) + .attr('y1', yScale(tick)) + .attr('y2', yScale(tick)) + .style('stroke', '#eee') + .style('shape-rendering', 'crispedges'); + }); + plot.append('path') .datum(data) .attr('d', line) .classed('line', true) .style('stroke', options.color); - - minLabel - .attr('x', options.availableWidth + maxLabelWidth) - .attr('y', yScale(minValue)); - maxLabel - .attr('x', options.availableWidth + maxLabelWidth) - .attr('y', yScale(maxValue)); } ); }; diff --git a/server/sonar-web/src/main/js/overview/app.js b/server/sonar-web/src/main/js/overview/app.js index 4bf5db63969..04f885f2683 100644 --- a/server/sonar-web/src/main/js/overview/app.js +++ b/server/sonar-web/src/main/js/overview/app.js @@ -35,6 +35,7 @@ requirejs([ // add state model this.state = new State(window.overviewConf); + this.state.set('period3Name', 'During Leak Period'); // create and render layout this.layout = new Layout({ diff --git a/server/sonar-web/src/main/js/overview/controller.js b/server/sonar-web/src/main/js/overview/controller.js index f72b99cefdf..69f50d885bd 100644 --- a/server/sonar-web/src/main/js/overview/controller.js +++ b/server/sonar-web/src/main/js/overview/controller.js @@ -22,12 +22,14 @@ define([ 'overview/main/gate-view', 'overview/main/size-view', 'overview/main/issues-view', + 'overview/main/debt-view', 'overview/main/coverage-view', 'overview/main/duplications-view' ], function (MainLayout, GateView, SizeView, IssuesView, + DebtView, CoverageView, DuplicationsView) { @@ -45,6 +47,7 @@ define([ mainLayout.gateRegion.show(new GateView(options)); mainLayout.sizeRegion.show(new SizeView(options)); mainLayout.issuesRegion.show(new IssuesView(options)); + mainLayout.debtRegion.show(new DebtView(options)); mainLayout.coverageRegion.show(new CoverageView(options)); mainLayout.duplicationsRegion.show(new DuplicationsView(options)); this.state.fetch(); diff --git a/server/sonar-web/src/main/js/overview/main/coverage-view.js b/server/sonar-web/src/main/js/overview/main/coverage-view.js index 8b807e4d6ed..28bb1e5c7a0 100644 --- a/server/sonar-web/src/main/js/overview/main/coverage-view.js +++ b/server/sonar-web/src/main/js/overview/main/coverage-view.js @@ -18,8 +18,9 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ define([ + 'overview/trend-view', 'templates/overview' -], function () { +], function (TrendView) { return Marionette.Layout.extend({ template: Templates['overview-coverage'], @@ -32,7 +33,16 @@ define([ var trend = this.model.get('coverageTrend'), hasCoverage = this.model.get('coverage') != null; if (_.size(trend) > 1 && hasCoverage) { - this.$('#overview-coverage-trend').sparkline(this.model.get('coverageTrend')); + this.trendView = new TrendView({ data: trend, type: 'PERCENT' }); + this.trendView.render() + .$el.appendTo(this.$('#overview-coverage-trend')); + this.trendView.update(); + } + }, + + onClose: function () { + if (this.trendView != null) { + this.trendView.detachEvents().remove(); } } }); diff --git a/server/sonar-web/src/main/js/overview/main/debt-view.js b/server/sonar-web/src/main/js/overview/main/debt-view.js new file mode 100644 index 00000000000..80861a82152 --- /dev/null +++ b/server/sonar-web/src/main/js/overview/main/debt-view.js @@ -0,0 +1,50 @@ +/* + * SonarQube, open source software quality management tool. + * Copyright (C) 2008-2014 SonarSource + * mailto:contact AT sonarsource DOT com + * + * SonarQube is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * SonarQube is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +define([ + 'overview/trend-view', + 'templates/overview' +], function (TrendView) { + + return Marionette.Layout.extend({ + template: Templates['overview-debt'], + + modelEvents: { + 'change': 'render' + }, + + onRender: function () { + var trend = this.model.get('debtTrend'), + hasDebt = this.model.get('debt') != null; + if (_.size(trend) > 1 && hasDebt) { + this.trendView = new TrendView({ data: trend, type: 'WORK_DUR' }); + this.trendView.render() + .$el.appendTo(this.$('#overview-debt-trend')); + this.trendView.update(); + } + }, + + onClose: function () { + if (this.trendView != null) { + this.trendView.detachEvents().remove(); + } + } + }); + +}); diff --git a/server/sonar-web/src/main/js/overview/main/duplications-view.js b/server/sonar-web/src/main/js/overview/main/duplications-view.js index 18e69af549b..a1310587288 100644 --- a/server/sonar-web/src/main/js/overview/main/duplications-view.js +++ b/server/sonar-web/src/main/js/overview/main/duplications-view.js @@ -18,8 +18,9 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ define([ + 'overview/trend-view', 'templates/overview' -], function () { +], function (TrendView) { return Marionette.Layout.extend({ template: Templates['overview-duplications'], @@ -32,7 +33,16 @@ define([ var trend = this.model.get('duplicationsTrend'), hasDuplications = this.model.get('duplications') != null; if (_.size(trend) > 1 && hasDuplications) { - this.$('#overview-duplications-trend').sparkline(this.model.get('duplicationsTrend')); + this.trendView = new TrendView({ data: trend, type: 'PERCENT' }); + this.trendView.render() + .$el.appendTo(this.$('#overview-duplications-trend')); + this.trendView.update(); + } + }, + + onClose: function () { + if (this.trendView != null) { + this.trendView.detachEvents().remove(); } } }); diff --git a/server/sonar-web/src/main/js/overview/main/issues-view.js b/server/sonar-web/src/main/js/overview/main/issues-view.js index a17a1d9547a..bfda55b2578 100644 --- a/server/sonar-web/src/main/js/overview/main/issues-view.js +++ b/server/sonar-web/src/main/js/overview/main/issues-view.js @@ -18,8 +18,9 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ define([ + 'overview/trend-view', 'templates/overview' -], function () { +], function (TrendView) { return Marionette.Layout.extend({ template: Templates['overview-issues'], @@ -32,7 +33,16 @@ define([ var trend = this.model.get('issuesTrend'), hasIssues = this.model.get('issues') != null; if (_.size(trend) > 1 && hasIssues) { - this.$('#overview-issues-trend').sparkline(this.model.get('issuesTrend')); + this.trendView = new TrendView({ data: trend, type: 'SHORT_INT' }); + this.trendView.render() + .$el.appendTo(this.$('#overview-issues-trend')); + this.trendView.update(); + } + }, + + onClose: function () { + if (this.trendView != null) { + this.trendView.detachEvents().remove(); } } }); diff --git a/server/sonar-web/src/main/js/overview/main/layout.js b/server/sonar-web/src/main/js/overview/main/layout.js index 8db7c1e088d..c0e46deffd5 100644 --- a/server/sonar-web/src/main/js/overview/main/layout.js +++ b/server/sonar-web/src/main/js/overview/main/layout.js @@ -28,6 +28,7 @@ define([ gateRegion: '#overview-gate', sizeRegion: '#overview-size', issuesRegion: '#overview-issues', + debtRegion: '#overview-debt', coverageRegion: '#overview-coverage', duplicationsRegion: '#overview-duplications' }, @@ -39,7 +40,7 @@ define([ toggleRegions: function () { var conditions = this.model.get('gateConditions'), hasGate = _.isArray(conditions) && conditions.length > 0; - this.$(this.gateRegion.el).toggle(hasGate); + this.$(this.gateRegion.el).toggleClass('hidden', !hasGate); } }); diff --git a/server/sonar-web/src/main/js/overview/main/size-view.js b/server/sonar-web/src/main/js/overview/main/size-view.js index db1ab7e41a8..07917e89c52 100644 --- a/server/sonar-web/src/main/js/overview/main/size-view.js +++ b/server/sonar-web/src/main/js/overview/main/size-view.js @@ -18,8 +18,9 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ define([ + 'overview/trend-view', 'templates/overview' -], function () { +], function (TrendView) { return Marionette.Layout.extend({ template: Templates['overview-size'], @@ -32,7 +33,16 @@ define([ var trend = this.model.get('sizeTrend'), hasSize = this.model.get('ncloc') != null; if (_.size(trend) > 1 && hasSize) { - this.$('#overview-size-trend').sparkline(this.model.get('sizeTrend')); + this.trendView = new TrendView({ data: trend, type: 'SHORT_INT' }); + this.trendView.render() + .$el.appendTo(this.$('#overview-size-trend')); + this.trendView.update(); + } + }, + + onClose: function () { + if (this.trendView != null) { + this.trendView.detachEvents().remove(); } } }); diff --git a/server/sonar-web/src/main/js/overview/models/state.js b/server/sonar-web/src/main/js/overview/models/state.js index 6b19a415287..d3be4446ee1 100644 --- a/server/sonar-web/src/main/js/overview/models/state.js +++ b/server/sonar-web/src/main/js/overview/models/state.js @@ -24,9 +24,10 @@ define(function () { SIZE_METRIC = 'ncloc', ISSUES_METRIC = 'violations', DEBT_METRIC = 'sqale_index', + NEW_DEBT_METRIC = 'new_technical_debt', SQALE_RATING_METRIC = 'sqale_rating', - COVERAGE_METRIC = 'overall_coverage', - NEW_COVERAGE_METRIC = 'new_overall_coverage', + COVERAGE_METRIC = 'coverage', + NEW_COVERAGE_METRIC = 'new_coverage', DUPLICATIONS_METRIC = 'duplicated_lines_density'; return Backbone.Model.extend({ @@ -68,6 +69,7 @@ define(function () { GATE_METRIC, SIZE_METRIC, DEBT_METRIC, + NEW_DEBT_METRIC, SQALE_RATING_METRIC, COVERAGE_METRIC, NEW_COVERAGE_METRIC, @@ -148,10 +150,14 @@ define(function () { parseDebt: function (msr) { var debtMeasure = _.findWhere(msr, { key: DEBT_METRIC }), + newDebtMeasure = _.findWhere(msr, { key: NEW_DEBT_METRIC }), sqaleRatingMeasure = _.findWhere(msr, { key: SQALE_RATING_METRIC }); if (debtMeasure != null) { this.set({ debt: debtMeasure.val }); } + if (newDebtMeasure != null) { + this.set({ newDebt: newDebtMeasure.var3 }); + } if (sqaleRatingMeasure != null) { this.set({ sqaleRating: sqaleRatingMeasure.val }); } @@ -191,6 +197,7 @@ define(function () { metrics: [ SIZE_METRIC, ISSUES_METRIC, + DEBT_METRIC, COVERAGE_METRIC, DUPLICATIONS_METRIC ].join(',') @@ -199,6 +206,7 @@ define(function () { if (_.isArray(r)) { that.parseSizeTrend(r[0]); that.parseIssuesTrend(r[0]); + that.parseDebtTrend(r[0]); that.parseCoverageTrend(r[0]); that.parseDuplicationsTrend(r[0]); } @@ -224,6 +232,10 @@ define(function () { this.parseTrend(r, 'issuesTrend', ISSUES_METRIC); }, + parseDebtTrend: function (r) { + this.parseTrend(r, 'debtTrend', DEBT_METRIC); + }, + parseCoverageTrend: function (r) { this.parseTrend(r, 'coverageTrend', COVERAGE_METRIC); }, diff --git a/server/sonar-web/src/main/js/overview/trend-view.js b/server/sonar-web/src/main/js/overview/trend-view.js new file mode 100644 index 00000000000..aeaac5ad697 --- /dev/null +++ b/server/sonar-web/src/main/js/overview/trend-view.js @@ -0,0 +1,163 @@ +define(function () { + + function trans (left, top) { + return 'translate(' + left + ', ' + top + ')'; + } + + var $ = jQuery; + + + return Backbone.View.extend({ + + initialize: function (options) { + this.data = options.data; + this.type = options.type || 'INT'; + this.width = 0; + this.height = 0; + }, + + attachEvents: function () { + this.detachEvents(); + var event = 'resize.trend-' + this.cid, + update = _.throttle(_.bind(this.update, this), 50); + $(window).on(event, update); + }, + + detachEvents: function () { + var event = 'resize.trend-' + this.cid; + $(window).off(event); + return this; + }, + + render: function () { + var that = this, + data = this.data; + this.container = d3.select(this.el); + this.svg = this.container.append('svg') + .classed('sonar-d3', true); + this.plot = this.svg.append('g') + .classed('plot', true); + + this.xScale = d3.time.scale() + .domain(d3.extent(data, function (d) { + return moment(d.val).toDate(); + })) + .nice(); + this.yScale = d3.scale.linear() + .domain(d3.extent(data, function (d) { + return d.count; + })) + .nice(); + + this.line = d3.svg.line() + .x(function (d) { + return that.xScale(moment(d.val).toDate()); + }) + .y(function (d) { + return that.yScale(d.count); + }) + .interpolate('linear'); + + this.xScaleTicks = this.xScale.ticks(5); + this.yScaleTicks = this.yScale.ticks(3); + + this.xTicks = this.xScaleTicks.map(function (tick) { + return that.plot.append('text') + .datum(tick) + .text(that.xScale.tickFormat()(tick)) + .attr('dy', '0') + .style('text-anchor', 'middle') + .style('font-size', '10px') + .style('font-weight', '300') + .style('fill', '#aaa'); + }); + this.yTicks = this.yScaleTicks.map(function (tick) { + return that.plot.append('text') + .datum(tick) + .text(window.formatMeasure(tick, that.type)) + .attr('dy', '5px') + .style('text-anchor', 'end') + .style('font-size', '10px') + .style('font-weight', '300') + .style('fill', '#aaa'); + }); + + this.xTickLines = this.xScaleTicks.map(function (tick) { + return that.plot.append('line') + .datum(tick) + .style('stroke', '#eee') + .style('shape-rendering', 'crispedges'); + }); + this.yTickLines = this.yScaleTicks.map(function (tick) { + return that.plot.append('line') + .datum(tick) + .style('stroke', '#eee') + .style('shape-rendering', 'crispedges'); + }); + + this.path = this.plot.append('path') + .datum(data) + .classed('line', true) + .style('stroke', 'rgb(31, 119, 180)'); + + this.attachEvents(); + + return this; + }, + + update: function () { + var that = this, + width = this.$el.closest('.overview-trend').width(), + height = 150, + marginLeft = 20, + marginRight = 50, + marginTop = 5, + marginBottom = 25, + availableWidth = width - marginLeft - marginRight, + availableHeight = height - marginTop - marginBottom; + + this.svg + .attr('width', width) + .attr('height', height); + + this.plot.attr('transform', trans(marginLeft, marginTop)); + this.xScale.range([0, availableWidth]); + this.yScale.range([availableHeight, 0]); + + this.path + .attr('d', this.line); + + this.xTicks.forEach(function (tick) { + tick + .attr('x', that.xScale(tick.datum())) + .attr('y', availableHeight + 20); + }); + + this.yTicks.forEach(function (tick) { + tick + .attr('x', availableWidth + 50) + .attr('y', that.yScale(tick.datum())); + }); + + this.xTickLines.forEach(function (tick) { + tick + .attr('x1', that.xScale(tick.datum())) + .attr('x2', that.xScale(tick.datum())) + .attr('y1', 0) + .attr('y2', availableHeight); + }); + + this.yTickLines.forEach(function (tick) { + tick + .attr('x1', 0) + .attr('x2', availableWidth) + .attr('y1', that.yScale(tick.datum())) + .attr('y2', that.yScale(tick.datum())); + }); + + return this; + } + + }); + +}); diff --git a/server/sonar-web/src/main/less/components/columns.less b/server/sonar-web/src/main/less/components/columns.less index 0e4b489e74b..699573084ee 100644 --- a/server/sonar-web/src/main/less/components/columns.less +++ b/server/sonar-web/src/main/less/components/columns.less @@ -37,7 +37,14 @@ .column-third { float: left; - width: 33%; + width: 33.3333333333%; + padding: 0 10px; + .box-sizing(border-box); +} + +.column-two-thirds { + float: left; + width: 66.6666666667%; padding: 0 10px; .box-sizing(border-box); } diff --git a/server/sonar-web/src/main/less/pages/overview.less b/server/sonar-web/src/main/less/pages/overview.less index 311e5bb6bc4..4582868d23e 100644 --- a/server/sonar-web/src/main/less/pages/overview.less +++ b/server/sonar-web/src/main/less/pages/overview.less @@ -28,13 +28,14 @@ } .overview-card { - padding-top: 5px; - background: @white; + .clearfix; + padding: 20px; border: 1px solid @barBorderColor; + background: @white; } -.overview-gate { - padding: 10px; +.overview-card:not(.hidden) + .overview-card { + margin-top: 20px; } .overview-gate-ok { border: 2px solid @green; } @@ -43,13 +44,17 @@ .overview-gate-error { border: 2px solid @red; } +.overview-gate-condition { + padding-left: 1px; +} + .overview-container { margin-top: 20px; - text-align: center; } .overview-card-header { - padding-bottom: 5px; + margin-bottom: 20px; + padding-bottom: 20px; border-bottom: 1px solid @barBorderColor; } @@ -57,7 +62,6 @@ margin: 0; padding: 0 6px; color: #fff !important; - font-size: 24px; font-weight: 300; a& { @@ -74,31 +78,29 @@ .overview-status-ERROR { background-color: @red; } .overview-highlight { - height: 145px; -} - -.overview-main-measure { - line-height: 1.3; - font-size: 36px; - font-weight: 300; + float: left; + width: 160px; + padding-right: 20px; + .box-sizing(border-box); } .overview-trend { - height: 50px; - margin-top: 15px; - padding: 5px 10px; - border-top: 1px solid @barBorderColor; - background-color: #fdfdfd; + padding-left: 160px; .note { font-size: 10px; } } -.overview-sparkline { - display: inline-block; - vertical-align: middle; +.overview-main-measure { + line-height: 1.3; + margin-bottom: 20px; + font-size: 36px; + font-weight: 300; + + .rating { font-size: 30px; } } .overview-measure { - font-size: 16px; + line-height: 1.5; + font-size: 20px; font-weight: 300; } diff --git a/server/sonar-web/src/test/js/overview.js b/server/sonar-web/src/test/js/overview.js index 0a1cb43e0f1..78c2dcbb23a 100644 --- a/server/sonar-web/src/test/js/overview.js +++ b/server/sonar-web/src/test/js/overview.js @@ -26,7 +26,7 @@ lib.changeWorkingDirectory('overview'); lib.configureCasper(); -casper.test.begin(testName(), 23, function (test) { +casper.test.begin(testName(), 22, function (test) { casper .start(lib.buildUrl('overview'), function () { lib.setDefaultViewport(); @@ -44,7 +44,7 @@ casper.test.begin(testName(), 23, function (test) { }) .then(function () { - casper.waitForText('165,077'); + casper.waitForText('165k'); }) .then(function () { @@ -58,17 +58,17 @@ casper.test.begin(testName(), 23, function (test) { test.assertElementCount('#overview-gate .overview-status-WARN', 1); test.assertElementCount('#overview-gate .overview-status-OK', 5); - test.assertSelectorContains('#overview-size', '165,077'); - test.assertSelectorContains('#overview-size', '+3,916'); + test.assertSelectorContains('#overview-size', '165k'); + test.assertSelectorContains('#overview-size', '+3.9k'); test.assertExists('#overview-size-trend path'); - test.assertSelectorContains('#overview-issues', '1,605'); - test.assertSelectorContains('#overview-issues', 'A'); - test.assertSelectorContains('#overview-issues', '66'); + test.assertSelectorContains('#overview-issues', '1.6k'); test.assertExists('#overview-issues-trend path'); + test.assertSelectorContains('#overview-debt', '66'); + test.assertExists('#overview-debt-trend path'); + test.assertSelectorContains('#overview-coverage', '83.9%'); - test.assertSelectorContains('#overview-coverage', '+0.6%'); test.assertSelectorContains('#overview-coverage', '90.0%'); test.assertExists('#overview-coverage-trend path'); diff --git a/server/sonar-web/src/test/json/overview/measures.json b/server/sonar-web/src/test/json/overview/measures.json index 33c235ca575..826a1ab308d 100644 --- a/server/sonar-web/src/test/json/overview/measures.json +++ b/server/sonar-web/src/test/json/overview/measures.json @@ -74,7 +74,7 @@ "fvar3": "0" }, { - "key": "overall_coverage", + "key": "coverage", "val": 83.9, "frmt_val": "83.9%", "trend": 0, @@ -85,7 +85,7 @@ "fvar3": "0.6%" }, { - "key": "new_overall_coverage", + "key": "new_coverage", "var1": 88.2352941176471, "fvar1": "88.2%", "var2": 87.9254132585941, diff --git a/server/sonar-web/src/test/json/overview/timemachine.json b/server/sonar-web/src/test/json/overview/timemachine.json index a2d4391d1e7..1ac438fc2bb 100644 --- a/server/sonar-web/src/test/json/overview/timemachine.json +++ b/server/sonar-web/src/test/json/overview/timemachine.json @@ -11,7 +11,7 @@ "metric": "sqale_index" }, { - "metric": "overall_coverage" + "metric": "coverage" }, { "metric": "duplicated_lines_density" diff --git a/server/sonar-web/src/test/views/overview.jade b/server/sonar-web/src/test/views/overview.jade index 7f50024c955..4e381f1ce6d 100644 --- a/server/sonar-web/src/test/views/overview.jade +++ b/server/sonar-web/src/test/views/overview.jade @@ -14,4 +14,3 @@ block body componentKey: 'org.codehaus.sonar:sonar', componentUuid: '69e57151-be0d-4157-adff-c06741d88879' }; - require(['overview/app']); diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties index 16d538afaff..0b1657038ba 100644 --- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties +++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties @@ -2259,7 +2259,7 @@ metric.generated_ncloc.abbreviation=Gen. LOC metric.lines.name=Lines metric.lines.description=Lines -metric.ncloc.name=Lines of code +metric.ncloc.name=Lines of Code metric.ncloc.description=Non Commenting Lines of Code metric.ncloc.abbreviation=LOC @@ -2533,6 +2533,7 @@ metric.duplicated_files.description=Duplicated files metric.duplicated_files.abbreviation=Dup. files metric.duplicated_lines_density.name=Duplicated lines (%) +metric.duplicated_lines_density.short_name=Duplications metric.duplicated_lines_density.description=Duplicated lines balanced by statements metric.duplicated_lines_density.abbreviation=Dup. lines(%) @@ -2993,8 +2994,11 @@ workspace.close=Remove from the list of pinned files # OVERVIEW # #------------------------------------------------------------------------------ -overview.lines_of_code=Lines of Code +overview.size=Size +overview.gate=Quality Gate overview.issues=Issues -overview.debt=Debt -overview.coverage=Coverage +overview.debt=Technical Debt +overview.testing=Testing overview.duplications=Duplications +overview.new=new +overview.on_new_code=on new code -- 2.39.5