From 32473107eb566930e09a02e4f817da9280541ba6 Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Thu, 26 Nov 2015 09:21:27 +0100 Subject: [PATCH] SONAR-7066 Improve display of leak period on the overview page --- .../js/apps/overview/components/legend.js | 7 ++-- .../apps/overview/domains/coverage-domain.js | 4 +-- .../js/apps/overview/domains/debt-domain.js | 4 +-- .../overview/domains/duplications-domain.js | 4 +-- .../js/apps/overview/domains/size-domain.js | 4 +-- .../main/js/apps/overview/main/components.js | 33 +++++++++++++++---- .../src/main/js/apps/overview/main/issues.js | 8 +++-- .../src/main/js/apps/overview/main/main.js | 3 +- .../src/main/less/pages/overview.less | 32 ++++++++++-------- .../resources/org/sonar/l10n/core.properties | 3 +- 10 files changed, 65 insertions(+), 37 deletions(-) diff --git a/server/sonar-web/src/main/js/apps/overview/components/legend.js b/server/sonar-web/src/main/js/apps/overview/components/legend.js index 1c38b7d17b1..4e4de8f5882 100644 --- a/server/sonar-web/src/main/js/apps/overview/components/legend.js +++ b/server/sonar-web/src/main/js/apps/overview/components/legend.js @@ -1,15 +1,12 @@ import React from 'react'; +import moment from 'moment'; import { DomainLeakTitle } from '../main/components'; export const Legend = React.createClass({ render() { - if (!this.props.leakPeriodDate) { - return null; - } - return
- + return
; } diff --git a/server/sonar-web/src/main/js/apps/overview/domains/coverage-domain.js b/server/sonar-web/src/main/js/apps/overview/domains/coverage-domain.js index 79a45f63408..6b0cbc391bc 100644 --- a/server/sonar-web/src/main/js/apps/overview/domains/coverage-domain.js +++ b/server/sonar-web/src/main/js/apps/overview/domains/coverage-domain.js @@ -9,7 +9,7 @@ import { CoverageSelectionMixin } from '../components/coverage-selection-mixin'; import { getPeriodLabel, getPeriodDate } from './../helpers/periods'; import { TooltipsMixin } from '../../../components/mixins/tooltips-mixin'; import { filterMetrics, filterMetricsForDomains } from '../helpers/metrics'; -import { Legend } from '../components/legend'; +import { DomainLeakTitle } from '../main/components'; import { CHART_COLORS_RANGE_PERCENT } from '../../../helpers/constants'; import { CoverageMeasuresList } from '../components/coverage-measures-list'; @@ -74,7 +74,7 @@ export const CoverageMain = React.createClass({ }, renderLegend () { - return ; + return }, render () { diff --git a/server/sonar-web/src/main/js/apps/overview/domains/debt-domain.js b/server/sonar-web/src/main/js/apps/overview/domains/debt-domain.js index bf521c4b69c..f3a28a07ef4 100644 --- a/server/sonar-web/src/main/js/apps/overview/domains/debt-domain.js +++ b/server/sonar-web/src/main/js/apps/overview/domains/debt-domain.js @@ -10,7 +10,6 @@ import { DomainBubbleChart } from '../components/domain-bubble-chart'; import { getPeriodLabel, getPeriodDate } from './../helpers/periods'; import { TooltipsMixin } from '../../../components/mixins/tooltips-mixin'; import { filterMetrics, filterMetricsForDomains } from '../helpers/metrics'; -import { Legend } from '../components/legend'; import { CHART_COLORS_RANGE_PERCENT } from '../../../helpers/constants'; import { AddedRemovedMeasure, AddedRemovedDebt, OnNewCodeMeasure, SeverityMeasure } from './../components/issue-measure'; import { IssuesTags } from './../components/issues-tags'; @@ -19,6 +18,7 @@ import { getFacet, extractAssignees } from '../../../api/issues'; import StatusHelper from '../../../components/shared/status-helper'; import { Rating } from '../../../components/shared/rating'; import { DrilldownLink } from '../../../components/shared/drilldown-link'; +import { DomainLeakTitle } from '../main/components'; const KNOWN_METRICS = ['violations', 'sqale_index', 'sqale_rating', 'sqale_debt_ratio', 'blocker_violations', @@ -102,7 +102,7 @@ export const IssuesMain = React.createClass({ }, renderLegend () { - return ; + return }, renderOtherMeasures() { diff --git a/server/sonar-web/src/main/js/apps/overview/domains/duplications-domain.js b/server/sonar-web/src/main/js/apps/overview/domains/duplications-domain.js index 48067d57a17..946b6f1663b 100644 --- a/server/sonar-web/src/main/js/apps/overview/domains/duplications-domain.js +++ b/server/sonar-web/src/main/js/apps/overview/domains/duplications-domain.js @@ -9,7 +9,7 @@ import { DomainBubbleChart } from '../components/domain-bubble-chart'; import { getPeriodLabel, getPeriodDate } from './../helpers/periods'; import { TooltipsMixin } from '../../../components/mixins/tooltips-mixin'; import { filterMetrics, filterMetricsForDomains } from '../helpers/metrics'; -import { Legend } from '../components/legend'; +import { DomainLeakTitle } from '../main/components'; import { CHART_COLORS_RANGE_PERCENT } from '../../../helpers/constants'; @@ -65,7 +65,7 @@ export const DuplicationsMain = React.createClass({ }, renderLegend () { - return ; + return }, renderMeasures() { diff --git a/server/sonar-web/src/main/js/apps/overview/domains/size-domain.js b/server/sonar-web/src/main/js/apps/overview/domains/size-domain.js index 45b4728d73e..ed309e8d7f4 100644 --- a/server/sonar-web/src/main/js/apps/overview/domains/size-domain.js +++ b/server/sonar-web/src/main/js/apps/overview/domains/size-domain.js @@ -9,7 +9,7 @@ import { DomainTreemap } from '../components/domain-treemap'; import { getPeriodLabel, getPeriodDate } from './../helpers/periods'; import { TooltipsMixin } from '../../../components/mixins/tooltips-mixin'; import { filterMetrics, filterMetricsForDomains } from '../helpers/metrics'; -import { Legend } from '../components/legend'; +import { DomainLeakTitle } from '../main/components'; export const SizeMain = React.createClass({ @@ -64,7 +64,7 @@ export const SizeMain = React.createClass({ }, renderLegend () { - return ; + return }, renderOtherMeasures(domain, hiddenMetrics) { diff --git a/server/sonar-web/src/main/js/apps/overview/main/components.js b/server/sonar-web/src/main/js/apps/overview/main/components.js index 87b920f7ea0..33f802d61a4 100644 --- a/server/sonar-web/src/main/js/apps/overview/main/components.js +++ b/server/sonar-web/src/main/js/apps/overview/main/components.js @@ -2,7 +2,6 @@ import moment from 'moment'; import React from 'react'; import { Timeline } from './timeline'; -import { Legend } from '../components/legend'; export const Domain = React.createClass({ @@ -21,7 +20,9 @@ export const DomainTitle = React.createClass({
{this.props.children} - More + {window.t('more')}  + +
; } else { @@ -32,14 +33,28 @@ export const DomainTitle = React.createClass({ export const DomainLeakTitle = React.createClass({ + renderInline (tooltip, fromNow) { + return + {window.tp('overview.leak_period_x', this.props.label)} + {window.tp('overview.started_x', fromNow)} + ; + }, + render() { if (!this.props.label || !this.props.date) { return null; } let momentDate = moment(this.props.date); let fromNow = momentDate.fromNow(); - let tooltip = 'Started ' + fromNow + ', ' + momentDate.format('LL'); - return Water Leak: {this.props.label}; + let tooltip = 'Started on ' + momentDate.format('LL'); + if (this.props.inline) { + return this.renderInline(tooltip, fromNow); + } + return + {window.tp('overview.leak_period_x', this.props.label)} +
+ {window.tp('overview.started_x', fromNow)} + ; } }); @@ -48,7 +63,6 @@ export const DomainHeader = React.createClass({ render () { return
{this.props.title} -
; } }); @@ -122,7 +136,13 @@ export const Measure = React.createClass({ export const DomainMixin = { - renderTimeline(range) { + renderTimelineStartDate() { + let momentDate = moment(this.props.historyStartDate), + fromNow = momentDate.fromNow(); + return {window.tp('overview.started_x', fromNow)}; + }, + + renderTimeline(range, displayDate) { if (!this.props.history) { return null; } @@ -130,6 +150,7 @@ export const DomainMixin = { props[range] = this.props.leakPeriodDate; return
+ {displayDate ? this.renderTimelineStartDate(range) : null}
; }, diff --git a/server/sonar-web/src/main/js/apps/overview/main/issues.js b/server/sonar-web/src/main/js/apps/overview/main/issues.js index b291d8243eb..e0772a63100 100644 --- a/server/sonar-web/src/main/js/apps/overview/main/issues.js +++ b/server/sonar-web/src/main/js/apps/overview/main/issues.js @@ -7,6 +7,7 @@ import { IssuesLink } from '../../../components/shared/issues-link'; import { DrilldownLink } from '../../../components/shared/drilldown-link'; import SeverityIcon from '../../../components/shared/severity-icon'; import { TooltipsMixin } from '../../../components/mixins/tooltips-mixin'; +import { Legend } from '../components/legend'; import { getMetricName } from '../helpers/metrics'; import { formatMeasure } from '../../../helpers/measures'; @@ -27,6 +28,8 @@ export const GeneralIssues = React.createClass({ let createdAfter = moment(this.props.leakPeriodDate).format('YYYY-MM-DDTHH:mm:ssZZ'); return + + - + @@ -69,7 +71,7 @@ export const GeneralIssues = React.createClass({ - {this.renderTimeline('before')} + {this.renderTimeline('before', true)} {this.renderLeak()} diff --git a/server/sonar-web/src/main/js/apps/overview/main/main.js b/server/sonar-web/src/main/js/apps/overview/main/main.js index 7d4037a9150..71c45428052 100644 --- a/server/sonar-web/src/main/js/apps/overview/main/main.js +++ b/server/sonar-web/src/main/js/apps/overview/main/main.js @@ -132,7 +132,8 @@ export default React.createClass({ return { date, value }; }); }); - this.setState({ history }); + let historyStartDate = history[HISTORY_METRICS_LIST[0]][0].date; + this.setState({ history, historyStartDate }); }); }, diff --git a/server/sonar-web/src/main/less/pages/overview.less b/server/sonar-web/src/main/less/pages/overview.less index 972b04cbee0..3f616043e1f 100644 --- a/server/sonar-web/src/main/less/pages/overview.less +++ b/server/sonar-web/src/main/less/pages/overview.less @@ -120,7 +120,7 @@ } .overview-card { - margin: 30px 20px; + margin: 15px 20px; } .overview-card-fixed-width { @@ -144,7 +144,6 @@ margin-top: 10px; border: 1px solid @barBorderColor; background-color: #fff; - overflow: hidden; .overview-bar-chart { padding: 0; @@ -155,7 +154,7 @@ .overview-domain-leak { position: relative; display: flex; - padding: 30px 10px; + padding: 15px 10px; } .overview-domain-nutshell { @@ -226,6 +225,14 @@ } } +.overview-domain-timeline-date { + position: absolute; + bottom: 2px; + left: 5px; + color: fade(@secondFontColor, 60%); + font-size: 11px; +} + /* * Detailed Pages */ @@ -347,17 +354,16 @@ padding: 0 10px; } -.overview-legend-leak { - display: inline-block; - vertical-align: middle; - width: 16px; - height: 16px; - margin-top: -2px; - margin-left: 16px; - margin-right: 8px; +.overview-legend { + position: absolute; + bottom: 100%; + left: 0; + right: -1px; + padding: 5px 0 2px; border: 1px solid @barBorderColor; - box-sizing: border-box; - background-color: #fffae7; + border-bottom: none; + font-size: 14px; + text-align: center; } /* 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 aa4069ea989..cd8c9af424a 100644 --- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties +++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties @@ -3108,7 +3108,8 @@ system.log_level.warning=Current level has performance impacts, please make sure #------------------------------------------------------------------------------ overview.quality_gate=Quality Gate overview.quality_profiles=Quality Profiles -overview.water_leak=Water Leak +overview.leak_period_x=Leak Period {0} +overview.started_x=started {0} overview.project_in_a_nutshell=Project In a Nutshell overview.unmanaged_issues=Unmanaged Issues -- 2.39.5