From bda2140e273104f0b4e512c0e75293646388d16c Mon Sep 17 00:00:00 2001
From: Dan Sosedoff <dan.sosedoff@gmail.com>
Date: Wed, 18 Jan 2023 13:29:04 -0600
Subject: [PATCH] Show error message when API calls fail (#636)

---
 static/css/app.css | 13 +++++++++++++
 static/index.html  |  1 +
 static/js/app.js   | 22 ++++++++++++++++++++--
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/static/css/app.css b/static/css/app.css
index f095c8f46..d4b565ccb 100644
--- a/static/css/app.css
+++ b/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 {
diff --git a/static/index.html b/static/index.html
index 59a6fcf6a..92fcebda0 100644
--- a/static/index.html
+++ b/static/index.html
@@ -328,5 +328,6 @@ <h3 class="text-center">SSH Connection</h3>
       <li><a href="#" data-action="filter_by_value">Filter Rows By Value</a></li>
     </ul>
   </div>
+  <div id="error_banner"></div>
 </body>
 </html>
diff --git a/static/js/app.js b/static/js/app.js
index 691a34a7b..57ca6f717 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -75,8 +75,14 @@ function apiCall(method, path, params, cb) {
     },
     success: cb,
     error: function(xhr, status, data) {
-      if (status == "timeout") {
-        return cb({ error: "Query timeout after " + timeout + "s" });
+      switch(status) {
+        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 = "";