SONAR-6336 show WS errors

2 files changed, 98 insertions, 61 deletions

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/Condition.js b/server/sonar-web/src/main/js/apps/quality-gates/components/Condition.js
index ad60d332bd2..0e91e67d440 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/Condition.js
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/Condition.js
@@ -60,7 +60,7 @@ export default class Condition extends Component {
   }
 
   handleSaveClick (e) {
-    const { qualityGate, condition, onSaveCondition } = this.props;
+    const { qualityGate, condition, onSaveCondition, onError, onResetError } = this.props;
     const period = this.state.period;
     const data = {
       metric: condition.metric,
@@ -81,11 +81,12 @@ export default class Condition extends Component {
     createCondition(qualityGate.id, data).then(newCondition => {
       this.setState({ changed: false });
       onSaveCondition(condition, newCondition);
-    });
+      onResetError();
+    }).catch(error => onError(error));
   }
 
   handleUpdateClick (e) {
-    const { condition, onSaveCondition } = this.props;
+    const { condition, onSaveCondition, onError, onResetError } = this.props;
     const period = this.state.period;
     const data = {
       id: condition.id,
@@ -103,7 +104,8 @@ export default class Condition extends Component {
     updateCondition(data).then(newCondition => {
       this.setState({ changed: false });
       onSaveCondition(condition, newCondition);
-    });
+      onResetError();
+    }).catch(error => onError(error));
   }
 
   handleDeleteClick (e) {
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.js b/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.js
index 2a23c6d3429..8281bf0541b 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.js
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.js
@@ -30,8 +30,34 @@ function getKey (condition, index) {
   return condition.id ? condition.id : `new-${index}`;
 }
 
-export default function Conditions (
-    {
+export default class Conditions extends React.Component {
+  state = {
+    error: null
+  };
+
+  componentWillUpdate (nextProps) {
+    if (nextProps.qualityGate !== this.props.qualityGate) {
+      this.setState({ error: null });
+    }
+  }
+
+  handleError (error) {
+    try {
+      error.response.json().then(r => {
+        const message = r.errors.map(e => e.msg).join('. ');
+        this.setState({ error: message });
+      });
+    } catch (ex) {
+      this.setState({ error: translate('default_error_message') });
+    }
+  }
+
+  handleResetError () {
+    this.setState({ error: null });
+  }
+
+  render () {
+    const {
         qualityGate,
         conditions,
         metrics,
@@ -40,50 +66,56 @@ export default function Conditions (
         onAddCondition,
         onSaveCondition,
         onDeleteCondition
-    }
-) {
-  const sortedConditions = _.sortBy(conditions, condition => {
-    return metrics.find(metric => metric.key === condition.metric).name;
-  });
-
-  const duplicates = [];
-  conditions.forEach(condition => {
-    const sameCount = conditions
-        .filter(sample => sample.metric === condition.metric && sample.period === condition.period)
-        .length;
-    if (sameCount > 1) {
-      duplicates.push(condition);
-    }
-  });
+    } = this.props;
 
-  const uniqDuplicates = uniqBy(duplicates, d => d.metric)
-      .map(condition => {
-        const metric = metrics.find(metric => metric.key === condition.metric);
-        return { ...condition, metric };
-      });
+    const sortedConditions = _.sortBy(conditions, condition => {
+      return metrics.find(metric => metric.key === condition.metric).name;
+    });
 
-  return (
-      <div id="quality-gate-conditions" className="quality-gate-section">
-        <h3 className="spacer-bottom">
-          {translate('quality_gates.conditions')}
-        </h3>
+    const duplicates = [];
+    conditions.forEach(condition => {
+      const sameCount = conditions
+          .filter(sample => sample.metric === condition.metric && sample.period === condition.period)
+          .length;
+      if (sameCount > 1) {
+        duplicates.push(condition);
+      }
+    });
 
-        <ConditionsAlert/>
+    const uniqDuplicates = uniqBy(duplicates, d => d.metric)
+        .map(condition => {
+          const metric = metrics.find(metric => metric.key === condition.metric);
+          return { ...condition, metric };
+        });
 
-        {uniqDuplicates.length > 0 && (
-            <div className="alert alert-warning">
-              <p>{translate('quality_gates.duplicated_conditions')}</p>
-              <ul className="list-styled spacer-top">
-                {uniqDuplicates.map(d => (
-                    <li>{d.metric.name}</li>
-                ))}
-              </ul>
-            </div>
-        )}
+    return (
+        <div id="quality-gate-conditions" className="quality-gate-section">
+          <h3 className="spacer-bottom">
+            {translate('quality_gates.conditions')}
+          </h3>
+
+          <ConditionsAlert/>
 
-        {sortedConditions.length ? (
-            <table id="quality-gate-conditions" className="data zebra zebra-hover">
-              <thead>
+          {this.state.error && (
+              <div className="alert alert-danger">
+                {this.state.error}
+              </div>
+          )}
+
+          {uniqDuplicates.length > 0 && (
+              <div className="alert alert-warning">
+                <p>{translate('quality_gates.duplicated_conditions')}</p>
+                <ul className="list-styled spacer-top">
+                  {uniqDuplicates.map(d => (
+                      <li>{d.metric.name}</li>
+                  ))}
+                </ul>
+              </div>
+          )}
+
+          {sortedConditions.length ? (
+              <table id="quality-gate-conditions" className="data zebra zebra-hover">
+                <thead>
                 <tr>
                   <th className="nowrap">
                     {translate('quality_gates.conditions.metric')}
@@ -102,8 +134,8 @@ export default function Conditions (
                   </th>
                   {edit && <th></th>}
                 </tr>
-              </thead>
-              <tbody>
+                </thead>
+                <tbody>
                 {sortedConditions.map((condition, index) => (
                     <Condition
                         key={getKey(condition, index)}
@@ -113,19 +145,22 @@ export default function Conditions (
                         periods={periods}
                         edit={edit}
                         onSaveCondition={onSaveCondition}
-                        onDeleteCondition={onDeleteCondition}/>
+                        onDeleteCondition={onDeleteCondition}
+                        onError={this.handleError.bind(this)}
+                        onResetError={this.handleResetError.bind(this)}/>
                 ))}
-              </tbody>
-            </table>
-        ) : (
-            <div className="big-spacer-top">
-              {translate('quality_gates.no_conditions')}
-            </div>
-        )}
-
-        {edit && (
-            <AddConditionForm metrics={metrics} onSelect={onAddCondition}/>
-        )}
-      </div>
-  );
+                </tbody>
+              </table>
+          ) : (
+              <div className="big-spacer-top">
+                {translate('quality_gates.no_conditions')}
+              </div>
+          )}
+
+          {edit && (
+              <AddConditionForm metrics={metrics} onSelect={onAddCondition}/>
+          )}
+        </div>
+    );
+  }
 }