Merge pull request #251 from carlosms/move-results-msg

Move results message inside each tab

Author: carlosms

frontend/src/App.js

@@ -449,7 +449,6 @@ AND refs.ref_name = 'HEAD'`
               <QueryBox
                 sql={this.state.sql}
                 schema={this.state.schema}
-                result={this.state.lastResult}
                 handleTextChange={this.handleTextChange}
                 handleSubmit={this.handleSubmit}
                 exportUrl={api.queryExport(this.state.sql)}

frontend/src/components/QueryBox.js

@@ -12,39 +12,8 @@ import 'codemirror/addon/hint/show-hint';
 import 'codemirror/addon/hint/sql-hint';
 
 import './QueryBox.less';
-import SuccessIcon from '../icons/success-query.svg';
-import ErrorIcon from '../icons/error-query.svg';
 import HelpIcon from '../icons/help.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) {
     super(props);
@@ -95,7 +64,6 @@ class QueryBox extends Component {
   }
 
   render() {
-    const { result } = this.props;
     const { codeMirrorTables } = this.state;
 
     const options = {
@@ -138,9 +106,7 @@ class QueryBox extends Component {
             </Col>
           </Row>
           <Row className="button-row">
-            <Col xs={7} className="meta-wrapper no-spacing">
-              <ResultInfo result={result} />
-            </Col>
+            <Col xs={7} />
             <Col xs={5} className="buttons-wrapper no-spacing">
               <Button
                 bsStyle="gbpl-secondary-tint-2-link"
@@ -179,7 +145,6 @@ QueryBox.propTypes = {
       ).isRequired
     })
   ),
-  result: PropTypes.object,
   enabled: PropTypes.bool,
   handleTextChange: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,

frontend/src/components/QueryBox.less

@@ -28,36 +28,6 @@
         padding: @big-spacing;
         margin: 0;
 
-        .meta-wrapper {
-            display: table;
-            height: 100%;
-
-            .meta {
-                .big-icon {
-                    margin-right: 15px;
-                }
-
-                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;
-                    }
-                }
-            }
-        }
-
         .buttons-wrapper {
             text-align: right;
         }

frontend/src/components/ResultsTable.less

@@ -4,6 +4,7 @@
     flex-grow: 1;
     flex-basis: 150px;
     min-height: 150px;
+    margin-top: 2em;
 
     border: unset;
 

frontend/src/components/TabbedResults.js

@@ -19,6 +19,8 @@ import TimerIcon from '../icons/history-tab.svg';
 import LoadingImg from '../icons/alex-loading-results.gif';
 import SuspendedImg from '../icons/alex-suspended-tab.gif';
 import ErrorImg from '../icons/broken-alex.gif';
+import SuccessIcon from '../icons/success-query.svg';
+import ErrorIcon from '../icons/error-query.svg';
 
 class TabTitle extends Component {
   constructor(props) {
@@ -118,6 +120,36 @@ TabTitle.propTypes = {
   handleRemoveResult: PropTypes.func.isRequired
 };
 
+function ResultInfo({ result }) {
+  if (!result) {
+    return null;
+  }
+
+  if (result.response && result.response.meta) {
+    return (
+      <span className="meta meta-success">
+        <SuccessIcon className="big-icon" />
+        {`Returned ${result.response.data.length} rows
+        (${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 TabbedResults extends Component {
   constructor(props) {
     super(props);
@@ -221,7 +253,6 @@ class TabbedResults extends Component {
               } else if (query.errorMsg) {
                 content = (
                   <Fragment>
-                    <span className="result-error-msg">{query.errorMsg}</span>
                     <Row>
                       <Col className="text-center animation-col" xs={12}>
                         <img src={`${ErrorImg}?${key}`} alt="error animation" />
@@ -302,6 +333,9 @@ class TabbedResults extends Component {
                     </Button>
                   </div>
                 </div>
+                <div className="meta-row">
+                  <ResultInfo result={query} />
+                </div>
                 {content}
               </Tab>
             );

frontend/src/components/TabbedResults.less

@@ -54,8 +54,9 @@
     }
 
     .query-row {
+        flex: 0 0 auto;
+
         display: flex;
-        margin-bottom: 2em;
 
         .query-text,
         .edit-query {
@@ -86,6 +87,36 @@
         }
     }
 
+    .meta-row {
+        flex: 0 0 auto;
+        margin-top: 0.5em;
+
+        .meta {
+            .big-icon {
+                margin-right: 15px;
+            }
+
+            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;
+                }
+            }
+        }
+    }
+
     button.animation-action {
         padding-left: 50px;
         padding-right: 50px;