Merge pull request #132 from carlosms/issue-44-errors

Show error messages in main query box

Author: carlosms

frontend/src/App.js

@@ -46,7 +46,7 @@ class App extends Component {
       results: new Map(),
       schema: undefined,
       history: [],
-      lastResultMeta: null,
+      lastResult: null,
 
       // modal
       showModal: false,
@@ -117,9 +117,10 @@ FROM ( SELECT MONTH(committer_when) as month,
     const historyIdx = history.findIndex(i => i.key === key);
     const { response } = result;
 
+    const status =
+      typeof response !== 'undefined' ? STATUS_SUCCESS : STATUS_ERROR;
+
     if (historyIdx >= 0) {
-      const status =
-        typeof response !== 'undefined' ? STATUS_SUCCESS : STATUS_ERROR;
       const newHistory = [
         ...history.slice(0, historyIdx),
         {
@@ -140,11 +141,16 @@ FROM ( SELECT MONTH(committer_when) as month,
     }
 
     const newResults = new Map(this.state.results);
-    newResults.set(key, result);
+
+    if (status === STATUS_SUCCESS) {
+      newResults.set(key, result);
+    } else {
+      newResults.delete(key);
+    }
 
     this.setState({
       results: newResults,
-      lastResultMeta: response ? response.meta : null
+      lastResult: result
     });
   }
 
@@ -166,7 +172,8 @@ FROM ( SELECT MONTH(committer_when) as month,
             status: STATUS_LOADING
           },
           ...history
-        ]
+        ],
+        lastResult: null
       },
       () => this.handleSetActiveResult(key)
     );
@@ -360,7 +367,7 @@ FROM ( SELECT MONTH(committer_when) as month,
               <QueryBox
                 sql={this.state.sql}
                 schema={this.state.schema}
-                resultMeta={this.state.lastResultMeta}
+                result={this.state.lastResult}
                 handleTextChange={this.handleTextChange}
                 handleSubmit={this.handleSubmit}
                 exportUrl={api.queryExport(this.state.sql)}

frontend/src/components/QueryBox.js

@@ -13,6 +13,36 @@ import 'codemirror/addon/hint/sql-hint';
 
 import './QueryBox.less';
 import SuccessIcon from '../icons/success-query.svg';
+import ErrorIcon from '../icons/error-query.svg';
+
+function ResultInfo({ result }) {
+  if (!result) {
+    return null;
+  }
+
+  if (result.response && result.response.meta) {
+    return (
+      <span className="meta meta-success">
+        <SuccessIcon className="big-icon" />Showing rows (query took{' '}
+        {result.response.meta.elapsedTime / 1000} seconds)
+      </span>
+    );
+  }
+
+  if (result.errorMsg) {
+    return (
+      <span className="meta meta-error">
+        <ErrorIcon className="big-icon" />Query Failed - {result.errorMsg}
+      </span>
+    );
+  }
+
+  return null;
+}
+
+ResultInfo.propTypes = {
+  result: PropTypes.object
+};
 
 class QueryBox extends Component {
   constructor(props) {
@@ -50,7 +80,7 @@ class QueryBox extends Component {
   }
 
   render() {
-    const { resultMeta } = this.props;
+    const { result } = this.props;
     const { codeMirrorTables } = this.state;
 
     const options = {
@@ -69,16 +99,6 @@ class QueryBox extends Component {
       }
     };
 
-    let meta = '';
-    if (resultMeta) {
-      meta = (
-        <span className="meta">
-          <SuccessIcon className="big-icon" />Showing rows (query took{' '}
-          {resultMeta.elapsedTime / 1000} seconds)
-        </span>
-      );
-    }
-
     return (
       <div className="query-box-padding full-height full-width">
         <div className="query-box full-height full-width">
@@ -95,7 +115,7 @@ class QueryBox extends Component {
           </Row>
           <Row className="button-row">
             <Col xs={7} className="meta-wrapper no-spacing">
-              {meta}
+              <ResultInfo result={result} />
             </Col>
             <Col xs={5} className="buttons-wrapper no-spacing">
               <Button
@@ -135,7 +155,7 @@ QueryBox.propTypes = {
       ).isRequired
     })
   ),
-  resultMeta: PropTypes.object,
+  result: PropTypes.object,
   enabled: PropTypes.bool,
   handleTextChange: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,

frontend/src/components/QueryBox.less

@@ -34,15 +34,26 @@
             .meta {
                 .big-icon {
                     margin-right: 15px;
-                    path {
-                        fill: @success;
-                    }
                 }
 
                 display: table-cell;
                 vertical-align: middle;
 
                 font-size: 14px;
+
+                &.meta-success {
+                    svg path {
+                        fill: @success;
+                    }
+                }
+
+                &.meta-error {
+                    color: @error-text;
+
+                    svg path {
+                        fill: @error-text;
+                    }
+                }
             }
         }