Merge pull request #195 from carlosms/keep-error-tabs

Keep tabs open on error

Author: carlosms

frontend/src/App.js

@@ -201,11 +201,7 @@ AND refs.ref_name = 'HEAD'`
 
     const newResults = new Map(this.state.results);
 
-    if (status === STATUS_SUCCESS) {
-      newResults.set(key, result);
-    } else {
-      newResults.delete(key);
-    }
+    newResults.set(key, result);
 
     this.setState({
       results: newResults,

frontend/src/components/TabbedResults.js

@@ -2,7 +2,6 @@ import React, { Component, Fragment } from 'react';
 import {
   Row,
   Col,
-  Alert,
   Tab,
   Button,
   OverlayTrigger,
@@ -19,6 +18,7 @@ import CloseIcon from '../icons/close-query-tab.svg';
 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';
 
 class TabTitle extends Component {
   constructor(props) {
@@ -209,11 +209,22 @@ class TabbedResults extends Component {
                 );
               } else if (query.errorMsg) {
                 content = (
-                  <Row className="errors-row">
-                    <Col xs={12}>
-                      <Alert bsStyle="danger">{query.errorMsg}</Alert>
-                    </Col>
-                  </Row>
+                  <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" />
+                      </Col>
+                    </Row>
+                    <Row>
+                      <Col
+                        className="text-center message-col last-message-col"
+                        xs={12}
+                      >
+                        QUERY FAILED
+                      </Col>
+                    </Row>
+                  </Fragment>
                 );
               } else if (query.response) {
                 content = (

frontend/src/components/TabbedResults.less

@@ -30,8 +30,16 @@
             }
         }
 
+        span.result-error-msg {
+            font-size: 14px;
+            color: @error-text;
+        }
+
         .animation-col {
             margin-top: 3em;
+            img {
+                max-height: 240px;
+            }
         }
 
         .message-col {
@@ -56,6 +64,7 @@
 
         .query-text {
             flex: 0 1 auto;
+            height: 100%;
             white-space: pre;
             font-family: @monospace-font;
             color: @secondary-tint-2;