Merge pull request #692 from mesosphere/feature/3360-expose-server-er…

…rors-to-json Feature/3360 expose server errors to JSON mode
mesosphere · Mar 11, 2016 · 6a80968 · 6a80968
2 parents 526521c + 546d414
commit 6a80968
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 6 deletions.
diff --git a/src/css/components/app-modal.less b/src/css/components/app-modal.less
@@ -3,6 +3,7 @@
     .app-error-block {
       padding: @base-spacing-unit @base-spacing-unit*2.5;
       background: fadeout(@text-color-danger-light, 75%);
+      color: @text-color-danger-dark;
       &+.modal-body {
         height: calc(~"80vh" - (@modal-header-height+@modal-footer-height+@modal-error-height));
       }

diff --git a/src/css/components/icons.less b/src/css/components/icons.less
@@ -59,6 +59,13 @@
     background-size: contain;
   }
 
+  &.warning-danger {
+    background-image: url("img/icons/icon-warning-red.svg");
+    background-size: contain;
+    margin-top: @base-spacing-unit*-0.5;
+    margin-right: @base-spacing-unit*0.5;
+  }
+
   &.dots {
     background-image: url("img/icons/icon-mini-ellipse-white.svg");
     background-size: contain;

diff --git a/src/css/variables.less b/src/css/variables.less
@@ -36,6 +36,7 @@
 @link-color: @white;
 @text-color-muted: @oslo-gray;
 @text-color-danger-light: @wild-watermelon;
+@text-color-danger-dark: @alizarin-crimson;
 
 @dropdown-bg-color: @white;
 @dropdown-separator-color: @alto;

diff --git a/src/img/icons/icon-warning-red.svg b/src/img/icons/icon-warning-red.svg
diff --git a/src/js/components/AppConfigJSONEditorComponent.jsx b/src/js/components/AppConfigJSONEditorComponent.jsx
@@ -34,7 +34,7 @@ var AppConfigJSONEditorComponent = React.createClass({
       jsonWasValid = true;
     }
     catch (e) {
-      this.props.onError("Invalid JSON");
+      this.props.onError({"JSON": "Invalid JSON"});
     }
 
     if (jsonWasValid) {

diff --git a/src/js/components/modals/AppModalComponent.jsx b/src/js/components/modals/AppModalComponent.jsx
@@ -94,7 +94,7 @@ var AppModalComponent = React.createClass({
       });
     } else {
       this.setState({
-        error: AppFormStore.responseErrors["general"]
+        error: AppFormStore.responseErrors
       });
     }
   },
@@ -119,13 +119,33 @@ var AppModalComponent = React.createClass({
   getGeneralErrorBlock: function () {
     var error = this.state.error;
 
+    if (this.state.jsonMode && error != null) {
+      error = Object.keys(error).map(key => {
+        return `${key}: ${error[key]}`;
+      });
+    } else if (error != null) {
+      error = error["general"];
+    }
+
     if (error == null) {
       return null;
     }
 
+    if (Util.isArray(error)) {
+      error = error.map((message, index) =>
+        <li key={index}><AutolinkComponent text={message} /></li>
+      );
+    } else {
+      error = <li><AutolinkComponent text={error} /></li>;
+    }
+
     return (
       <div className="text-danger app-error-block">
-        <AutolinkComponent text={error} />
+        <i className="icon icon-mini warning-danger" />
+        There was a problem with your configuration
+        <ul>
+          {error}
+        </ul>
       </div>
     );
   },

diff --git a/src/js/constants/AppFormErrorMessages.js b/src/js/constants/AppFormErrorMessages.js
@@ -67,7 +67,9 @@ const generalErrors = Util.deepFreeze({
 
 const serverResponseMappings = Util.deepFreeze({
   "error.path.missing": "Specify a path",
-  "error.minLength": "Command may not be blank"
+  "error.minLength": "Command may not be blank",
+  "error.expected.jsnumber": "A number is expected",
+  "error.expected.jsstring": "A string is expect"
 });
 
 const AppFormErrorMessages = {

diff --git a/src/test/scenarios/createApplication.test.js b/src/test/scenarios/createApplication.test.js
@@ -136,7 +136,7 @@ describe("Create Application", function () {
         AppsStore.once(AppsEvents.CREATE_APP_ERROR, function () {
           expectAsync(function () {
             expect(AppFormStore.responseErrors.instances)
-              .to.equal("error.expected.jsnumber");
+              .to.equal("A number is expected");
           }, done);
         });
 
@@ -1100,7 +1100,7 @@ describe("Create Application", function () {
           AppsStore.once(AppsEvents.CREATE_APP_ERROR, function () {
             expectAsync(function () {
               expect(AppFormStore.responseErrors.instances)
-                .to.equal("error.expected.jsnumber");
+                .to.equal("A number is expected");
             }, done);
           });