apply feedback for measures page (#905)

* display leak period legend on details page
* hide quality gate status measure for projects

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 (file)
index 0000000..ae760d3
--- /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 (
+      <TooltipsContainer>
+        <div className="measures-domains-leak-header">
+          <div title={tooltip} data-toggle="tooltip">
+            {translateWithParameters('overview.leak_period_x', label)}
+          </div>
+        </div>
+      </TooltipsContainer>
+  );
+};
+
+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 d91eb5d2fbb6c852dfbb1f33dd4f018aa97b319d..dcdeb04892126ba308e9df45efedbbd276f7ea58 100644 (file)
--- 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 && (
               <MeasureDrilldown

diff --git a/server/sonar-web/src/main/js/apps/component-measures/details/MeasureDetailsHeader.js b/server/sonar-web/src/main/js/apps/component-measures/details/MeasureDetailsHeader.js
index 6cd66b88a81e5356700350c8b00d3fe3d532374d..bc0d5a5f31bcf870baddd15b94bff8c07634f7ce 100644 (file)
--- a/server/sonar-web/src/main/js/apps/component-measures/details/MeasureDetailsHeader.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/details/MeasureDetailsHeader.js
@@ -21,28 +21,29 @@ import React from 'react';
 
 import Measure from './../components/Measure';
 import LanguageDistribution from './../components/LanguageDistribution';
+import LeakPeriodLegend from '../components/LeakPeriodLegend';
 import { ComplexityDistribution } from '../../overview/components/complexity-distribution';
 import { isDiffMetric, formatLeak } from '../utils';
-import { translateWithParameters } from '../../../helpers/l10n';
 import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
 
-export default function MeasureDetailsHeader ({ measure, metric, secondaryMeasure, leakPeriodLabel }) {
-  const leakPeriodTooltip = translateWithParameters('overview.leak_period_x', leakPeriodLabel);
-
+export default function MeasureDetailsHeader ({ measure, metric, secondaryMeasure, leakPeriod }) {
   return (
       <header className="measure-details-header">
         <h2 className="measure-details-metric">
           {metric.name}
         </h2>
 
+        {isDiffMetric(metric) && (
+            <div className="pull-right">
+              <LeakPeriodLegend period={leakPeriod}/>
+            </div>
+        )}
+
         <TooltipsContainer options={{ html: false }}>
           <div className="measure-details-value">
 
             {isDiffMetric(metric) ? (
-                <div
-                    className="measure-details-value-leak"
-                    title={leakPeriodTooltip}
-                    data-toggle="tooltip">
+                <div className="measure-details-value-leak">
                   {formatLeak(measure.leak, metric)}
                 </div>
             ) : (

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 084d75fc0c9851067860b3ea09ba9243d52c22f8..a68619568c11403e8c256115ae95cd044f6f6e6f 100644 (file)
--- 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 (
         <section id="component-measures-home" className="page page-container page-limited">
@@ -67,10 +68,8 @@ export default class Home extends React.Component {
               </ul>
             </nav>
 
-            {leakPeriodLabel != null && (
-                <div className="measures-domains-leak-header">
-                  {translateWithParameters('overview.leak_period_x', leakPeriodLabel)}
-                </div>
+            {leakPeriod != null && (
+                <LeakPeriodLegend period={leakPeriod}/>
             )}
           </header>
 

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 542e2207cb46fb627049dea6ae743a3782de0805..31a9309c900ad179d89829f8ab4f6222aaea5740 100644 (file)
--- 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 b0adf4f3527bc260260cbabe33b10bc2708a0469..092f62a8fba372b0863ed4f66cda2885adbcfc22 100644 (file)
--- 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;
 }