Show error message when API calls fail (#636)

static/css/app.css

@@ -678,6 +678,19 @@
   box-shadow: #eee 0 0 5px;
 }
 
+#error_banner {
+  line-height: 30px;
+  text-align: center;
+  background-color: #be2740;
+  color: #fff;
+  display: none;
+  position: fixed;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  height: 30px;
+}
+
 /* -------------------------------------------------------------------------- */
 
 #custom_query {

static/index.html

@@ -328,5 +328,6 @@
       <li><a href="#" data-action="filter_by_value">Filter Rows By Value</a></li>
     </ul>
   </div>
+  <div id="error_banner"></div>
 </body>
 </html>

static/js/app.js

@@ -75,8 +75,14 @@ function apiCall(method, path, params, cb) {
     },
     success: cb,
     error: function(xhr, status, data) {
-      if (status == "timeout") {
+      switch(status) {
-        return cb({ error: "Query timeout after " + timeout + "s" });
+        case "error":
+          if (xhr.readyState == 0) { // 0 = UNSENT
+            showErrorBanner("Sorry, something went wrong with your request. Refresh the page and try again!");
+          }
+          break;
+        case "timeout":
+          return cb({ error: "Query timeout after " + timeout + "s" });
       }
 
       cb(jQuery.parseJSON(xhr.responseText));
@@ -105,6 +111,18 @@ function encodeQuery(query) {
   return Base64.encode(query).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, ".");
 }
 
+function showErrorBanner(text) {
+  if (window.errBannerTimeout != null) {
+    clearTimeout(window.errBannerTimeout);
+  }
+
+  window.errBannerTimeout = setTimeout(function() {
+    $("#error_banner").fadeOut("fast").text("");
+  }, 3000);
+
+  $("#error_banner").text(text).show();
+}
+
 function buildSchemaSection(name, objects) {
   var section = "";