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

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 (
-      <li className={className}>
-        <div className="overview-quality-gate-condition-container">
-          <div className="overview-quality-gate-condition-value">
-            <DrilldownLink
-                component={component.key}
-                metric={metric.key}
-                period={condition.period}
-                periodDate={periodDate}>
-              <Measure measure={{ value: actual, leak: actual }} metric={metric}/>
-            </DrilldownLink>
-          </div>
-
-          <div>
-            <div className="overview-quality-gate-condition-metric">
-              {metric.name}
+      <TooltipsContainer>
+        <li className={className}>
+          <div className="overview-quality-gate-condition-container"
+               title={`${operator} ${formatMeasure(threshold, metric.type)}`}
+               data-toggle="tooltip">
+            <div className="overview-quality-gate-condition-value">
+              <DrilldownLink
+                  className={isRating ? 'link-no-underline' : null}
+                  component={component.key}
+                  metric={metric.key}
+                  period={condition.period}
+                  periodDate={periodDate}>
+                <Measure measure={{ value: actual, leak: actual }} metric={metric}/>
+              </DrilldownLink>
             </div>
-            {period != null && (
-                <div className="overview-quality-gate-condition-period">
-                  {periodLabel}
-                </div>
-            )}
-            <div className="overview-quality-gate-condition-threshold">
-              {operator}
-              {' '}
-              <Measure measure={{ value: threshold, leak: threshold }} metric={metric}/>
+
+            <div>
+              <div className="overview-quality-gate-condition-metric">
+                {metric.name}
+              </div>
+              {!isDiff && period != null && (
+                  <div className="overview-quality-gate-condition-period">
+                    {translate('quality_gates.conditions.leak')}
+                  </div>
+              )}
             </div>
           </div>
-
-          <div className="overview-quality-gate-level"/>
-        </div>
-      </li>
+        </li>
+      </TooltipsContainer>
   );
 };
 
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