From 52fd4cab985dadda080eaf06b1bbb06a3ce1c132 Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Fri, 28 Oct 2016 11:11:17 +0200 Subject: [PATCH] SONAR-8119 improve rendering of quality gate conditions on project dashboard * use leak period background * use tooltip for the required condition * remove unnecessary period label for differential measures * display "over leak period" for non-differential measures defined on leak period --- .../main/js/apps/component-measures/utils.js | 5 +- .../qualityGate/QualityGateCondition.js | 75 ++++++++++--------- .../src/main/js/apps/overview/styles.css | 44 +++++------ 3 files changed, 61 insertions(+), 63 deletions(-) diff --git a/server/sonar-web/src/main/js/apps/component-measures/utils.js b/server/sonar-web/src/main/js/apps/component-measures/utils.js index 076053498ab..208f13c8c90 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/utils.js +++ b/server/sonar-web/src/main/js/apps/component-measures/utils.js @@ -119,9 +119,10 @@ export function filterOutEmptyMeasures (components) { } export function getRatingTooltip (metricKey, value) { + const finalMetricKey = metricKey.indexOf('new_') === 0 ? metricKey.substr(4) : metricKey; const KNOWN_RATINGS = ['sqale_rating', 'reliability_rating', 'security_rating']; - if (KNOWN_RATINGS.includes(metricKey)) { - return nextGetRatingTooltip(metricKey, value); + if (KNOWN_RATINGS.includes(finalMetricKey)) { + return nextGetRatingTooltip(finalMetricKey, value); } return null; } diff --git a/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGateCondition.js b/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGateCondition.js index 687e31dd63d..811e6fc61a8 100644 --- a/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGateCondition.js +++ b/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGateCondition.js @@ -18,17 +18,22 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import React from 'react'; +import classNames from 'classnames'; import { ComponentType, PeriodsListType, EnhancedConditionType } from '../propTypes'; import { DrilldownLink } from '../../../components/shared/drilldown-link'; import Measure from '../../component-measures/components/Measure'; -import { getPeriodValue } from '../../../helpers/measures'; +import { getPeriodValue, isDiffMetric, formatMeasure } from '../../../helpers/measures'; import { translate } from '../../../helpers/l10n'; -import { getPeriod, getPeriodLabel, getPeriodDate } from '../../../helpers/periods'; +import { getPeriod, getPeriodDate } from '../../../helpers/periods'; +import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin'; const QualityGateCondition = ({ component, periods, condition }) => { const { measure } = condition; const { metric } = measure; + const isRating = metric.type === 'RATING'; + const isDiff = isDiffMetric(metric.key); + const threshold = condition.level === 'ERROR' ? condition.error : condition.warning; @@ -36,49 +41,49 @@ const QualityGateCondition = ({ component, periods, condition }) => { const actual = condition.period ? getPeriodValue(measure, condition.period) : measure.value; - const period = getPeriod(periods, condition.period); - const periodLabel = getPeriodLabel(period); - const periodDate = getPeriodDate(period); - const operator = metric.type === 'RATING' ? + const periodDate = getPeriodDate(period); + const operator = isRating ? translate('quality_gates.operator', condition.op, 'rating') : translate('quality_gates.operator', condition.op, 'short'); - const className = 'overview-quality-gate-condition overview-quality-gate-condition-' + condition.level.toLowerCase(); + const className = classNames( + 'overview-quality-gate-condition', + 'overview-quality-gate-condition-' + condition.level.toLowerCase(), + { 'overview-quality-gate-condition-leak': period != null } + ); return ( -
  • -
    -
    - - - -
    - -
    -
    - {metric.name} + +
  • +
    +
    + + +
    - {period != null && ( -
    - {periodLabel} -
    - )} -
    - {operator} - {' '} - + +
    +
    + {metric.name} +
    + {!isDiff && period != null && ( +
    + {translate('quality_gates.conditions.leak')} +
    + )}
    - -
    -
    -
    • + + ); }; diff --git a/server/sonar-web/src/main/js/apps/overview/styles.css b/server/sonar-web/src/main/js/apps/overview/styles.css index 5dc04da6d71..06a39e2023b 100644 --- a/server/sonar-web/src/main/js/apps/overview/styles.css +++ b/server/sonar-web/src/main/js/apps/overview/styles.css @@ -54,62 +54,54 @@ background-color: #fff; } -.overview-quality-gate-condition-metric { - max-width: 120px; +.overview-quality-gate-condition-leak { + background-color: #fbf3d5; } .overview-quality-gate-condition-metric, .overview-quality-gate-condition-period { - margin-bottom: 2px; + max-width: 120px; + line-height: 16px; + font-size: 12px; +} + +.overview-quality-gate-condition-period { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .overview-quality-gate-condition-container { float: left; display: flex; align-items: center; - padding-left: 20px; + padding: 10px 10px 10px 20px; } .overview-quality-gate-condition-value { line-height: 1; - margin-right: 12px; - font-size: 32px; - font-weight: 300; + margin-right: 20px; + font-size: 24px; + font-weight: normal; } -.overview-quality-gate-condition-threshold { +.overview-quality-gate-condition-value span { + display: inline-block; + vertical-align: top; } .overview-quality-gate-warning { margin: 15px 0 0; } -.overview-quality-gate-level { - display: flex; - justify-content: center; - align-items: center; - width: 4px; - height: 80px; - margin-left: 20px; - content: ""; -} - .overview-quality-gate-condition-error { border-color: #d4333f; } -.overview-quality-gate-condition-error .overview-quality-gate-level { - background-color: #d4333f; -} - .overview-quality-gate-condition-warn { border-color: #f90; } -.overview-quality-gate-condition-warn .overview-quality-gate-level { - background-color: #f90; -} - /* * Domain -- 2.39.5