SONAR-8119 improve display of rating conditions on project dashboard

3 files changed, 60 insertions, 22 deletions

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 84de099c7e8..687e31dd63d 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,10 +18,10 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-
 import { ComponentType, PeriodsListType, EnhancedConditionType } from '../propTypes';
 import { DrilldownLink } from '../../../components/shared/drilldown-link';
-import { formatMeasure, getPeriodValue } from '../../../helpers/measures';
+import Measure from '../../component-measures/components/Measure';
+import { getPeriodValue } from '../../../helpers/measures';
 import { translate } from '../../../helpers/l10n';
 import { getPeriod, getPeriodLabel, getPeriodDate } from '../../../helpers/periods';
 
@@ -45,12 +45,10 @@ const QualityGateCondition = ({ component, periods, condition }) => {
       translate('quality_gates.operator', condition.op, 'rating') :
       translate('quality_gates.operator', condition.op, 'short');
 
-  return (
-      <li className="overview-quality-gate-condition">
-        <div className="overview-quality-gate-condition-period">
-          {periodLabel}
-        </div>
+  const className = 'overview-quality-gate-condition overview-quality-gate-condition-' + condition.level.toLowerCase();
 
+  return (
+      <li className={className}>
         <div className="overview-quality-gate-condition-container">
           <div className="overview-quality-gate-condition-value">
             <DrilldownLink
@@ -58,9 +56,7 @@ const QualityGateCondition = ({ component, periods, condition }) => {
                 metric={metric.key}
                 period={condition.period}
                 periodDate={periodDate}>
-              <span className={'alert_' + condition.level.toUpperCase()}>
-                {formatMeasure(actual, metric.type)}
-              </span>
+              <Measure measure={{ value: actual, leak: actual }} metric={metric}/>
             </DrilldownLink>
           </div>
 
@@ -68,12 +64,19 @@ const QualityGateCondition = ({ component, periods, condition }) => {
             <div className="overview-quality-gate-condition-metric">
               {metric.name}
             </div>
+            {period != null && (
+                <div className="overview-quality-gate-condition-period">
+                  {periodLabel}
+                </div>
+            )}
             <div className="overview-quality-gate-condition-threshold">
               {operator}
               {' '}
-              {formatMeasure(threshold, metric.type)}
+              <Measure measure={{ value: threshold, leak: threshold }} metric={metric}/>
             </div>
           </div>
+
+          <div className="overview-quality-gate-level"/>
         </div>
       </li>
   );
diff --git a/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGateConditions.js b/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGateConditions.js
index b3ed4fac498..fab13539419 100644
--- a/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGateConditions.js
+++ b/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGateConditions.js
@@ -104,7 +104,7 @@ export default class QualityGateConditions extends React.Component {
 
     return (
         <ul
-            className="overview-quality-gate-conditions-list"
+            className="overview-quality-gate-conditions-list clearfix"
             id="overview-quality-gate-conditions-list">
           {sortedConditions.map(condition => (
               <QualityGateCondition
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 8400857a470..38381fac6d5 100644
--- a/server/sonar-web/src/main/js/apps/overview/styles.css
+++ b/server/sonar-web/src/main/js/apps/overview/styles.css
@@ -47,33 +47,41 @@
 }
 
 .overview-quality-gate-conditions-list {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
+
 }
 
 .overview-quality-gate-condition {
-  padding: 10px 40px 10px 0;
+  float: left;
+  margin-top: 15px;
+  margin-right: 30px;
+  border: 1px solid #e6e6e6;
+  border-radius: 2px;
+  background-color: #fff;
+}
+
+.overview-quality-gate-condition-metric {
+  max-width: 120px;
 }
 
+.overview-quality-gate-condition-metric,
 .overview-quality-gate-condition-period {
-  margin-bottom: 4px;
+  margin-bottom: 2px;
 }
 
 .overview-quality-gate-condition-container {
+  float: left;
   display: flex;
   align-items: center;
+  padding-left: 20px;
 }
 
 .overview-quality-gate-condition-value {
-  margin-right: 8px;
-  font-size: 24px;
+  line-height: 1;
+  margin-right: 12px;
+  font-size: 32px;
   font-weight: 300;
 }
 
-.overview-quality-gate-condition-metric {
-}
-
 .overview-quality-gate-condition-threshold {
 }
 
@@ -81,6 +89,33 @@
   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
  */