From 85ed7bc23399eed6c9b355ac2d2161330adaff7a Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Tue, 19 Apr 2016 15:24:42 +0200 Subject: [PATCH] apply feedback for measures page (#905) * display leak period legend on details page * hide quality gate status measure for projects --- .../components/LeakPeriodLegend.js | 44 +++++++++++++++++++ .../details/MeasureDetails.js | 5 +-- .../details/MeasureDetailsHeader.js | 17 +++---- .../js/apps/component-measures/home/Home.js | 13 +++--- .../apps/component-measures/home/actions.js | 9 +++- .../js/apps/component-measures/styles.css | 1 + 6 files changed, 70 insertions(+), 19 deletions(-) create mode 100644 server/sonar-web/src/main/js/apps/component-measures/components/LeakPeriodLegend.js diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/LeakPeriodLegend.js b/server/sonar-web/src/main/js/apps/component-measures/components/LeakPeriodLegend.js new file mode 100644 index 00000000000..ae760d3a0a5 --- /dev/null +++ b/server/sonar-web/src/main/js/apps/component-measures/components/LeakPeriodLegend.js @@ -0,0 +1,44 @@ +/* + * SonarQube + * Copyright (C) 2009-2016 SonarSource SA + * mailto:contact AT sonarsource DOT com + * + * This program 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. + * + * This program 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. + */ +import React from 'react'; +import moment from 'moment'; + +import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin'; +import { getPeriodLabel, getPeriodDate } from '../../../helpers/periods'; +import { translateWithParameters } from '../../../helpers/l10n'; + +const LeakPeriodLegend = ({ period }) => { + const date = getPeriodDate(period); + const label = getPeriodLabel(period); + const fromNow = moment(date).fromNow(); + const tooltip = fromNow + ', ' + moment(date).format('LL'); + + return ( + +
+
+ {translateWithParameters('overview.leak_period_x', label)} +
+
+ + ); +}; + +export default LeakPeriodLegend; diff --git a/server/sonar-web/src/main/js/apps/component-measures/details/MeasureDetails.js b/server/sonar-web/src/main/js/apps/component-measures/details/MeasureDetails.js index d91eb5d2fbb..dcdeb048921 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/details/MeasureDetails.js +++ b/server/sonar-web/src/main/js/apps/component-measures/details/MeasureDetails.js @@ -23,7 +23,7 @@ import { Link, IndexLink } from 'react-router'; import Spinner from './../components/Spinner'; import MeasureDetailsHeader from './MeasureDetailsHeader'; import MeasureDrilldown from './drilldown/MeasureDrilldown'; -import { getPeriod, getPeriodDate, getPeriodLabel } from '../../../helpers/periods'; +import { getPeriod, getPeriodDate } from '../../../helpers/periods'; import { translate, translateWithParameters } from '../../../helpers/l10n'; export default class MeasureDetails extends React.Component { @@ -65,7 +65,6 @@ export default class MeasureDetails extends React.Component { const { tab } = this.props.params; const periodIndex = this.props.location.query.period || 1; const period = getPeriod(periods, Number(periodIndex)); - const periodLabel = getPeriodLabel(period); const periodDate = getPeriodDate(period); return ( @@ -89,7 +88,7 @@ export default class MeasureDetails extends React.Component { measure={measure} metric={metric} secondaryMeasure={secondaryMeasure} - leakPeriodLabel={periodLabel}/> + leakPeriod={period}/> {measure && (

{metric.name}

+ {isDiffMetric(metric) && ( +
+ +
+ )} +
{isDiffMetric(metric) ? ( -
+
{formatLeak(measure.leak, metric)}
) : ( diff --git a/server/sonar-web/src/main/js/apps/component-measures/home/Home.js b/server/sonar-web/src/main/js/apps/component-measures/home/Home.js index 084d75fc0c9..a68619568c1 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/home/Home.js +++ b/server/sonar-web/src/main/js/apps/component-measures/home/Home.js @@ -20,8 +20,9 @@ import React from 'react'; import { Link, IndexLink } from 'react-router'; -import { getLeakPeriodLabel } from '../../../helpers/periods'; -import { translate, translateWithParameters } from '../../../helpers/l10n'; +import LeakPeriodLegend from '../components/LeakPeriodLegend'; +import { getLeakPeriod } from '../../../helpers/periods'; +import { translate } from '../../../helpers/l10n'; export default class Home extends React.Component { componentDidMount () { @@ -41,7 +42,7 @@ export default class Home extends React.Component { return null; } - const leakPeriodLabel = getLeakPeriodLabel(periods); + const leakPeriod = getLeakPeriod(periods); return (
@@ -67,10 +68,8 @@ export default class Home extends React.Component { - {leakPeriodLabel != null && ( -
- {translateWithParameters('overview.leak_period_x', leakPeriodLabel)} -
+ {leakPeriod != null && ( + )} diff --git a/server/sonar-web/src/main/js/apps/component-measures/home/actions.js b/server/sonar-web/src/main/js/apps/component-measures/home/actions.js index 542e2207cb4..31a9309c900 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/home/actions.js +++ b/server/sonar-web/src/main/js/apps/component-measures/home/actions.js @@ -28,6 +28,13 @@ export function receiveMeasures (measures, periods) { return { type: RECEIVE_MEASURES, measures, periods }; } +function banQualityGate (component, measures) { + if (['VW', 'SVW'].includes(component.qualifier)) { + return measures; + } + return measures.filter(measure => measure.metric !== 'alert_status'); +} + export function fetchMeasures () { return (dispatch, getState) => { dispatch(startFetching()); @@ -40,7 +47,7 @@ export function fetchMeasures () { getMeasuresAndMeta(component.key, metricKeys, { additionalFields: 'periods' }).then(r => { const leakPeriod = getLeakPeriod(r.periods); - const measures = r.component.measures + const measures = banQualityGate(component, r.component.measures) .map(measure => { const metric = metrics.find(metric => metric.key === measure.metric); const leak = getLeakValue(measure); diff --git a/server/sonar-web/src/main/js/apps/component-measures/styles.css b/server/sonar-web/src/main/js/apps/component-measures/styles.css index b0adf4f3527..092f62a8fba 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/styles.css +++ b/server/sonar-web/src/main/js/apps/component-measures/styles.css @@ -131,6 +131,7 @@ } .measure-details-metric { + display: inline-block; margin-bottom: 10px; } -- 2.39.5