Move window.alert() calls to bootstrap modals. Also log errors that o…

…ccur to console.
apache · Apr 4, 2016 · 67c38bb · 67c38bb
1 parent ca44432
commit 67c38bb
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 9 deletions.
diff --git a/caravel/assets/.eslintrc b/caravel/assets/.eslintrc
@@ -63,7 +63,7 @@
     "newline-after-var": [0],
     "no-bitwise": [0],
     "no-cond-assign": [2],
-    "no-console": [2],
+    "no-console": [1, { allow: ["warn", "error"] }],
     "no-const-assign": [2],
     "no-constant-condition": [2],
     "no-control-regex": [2],

diff --git a/caravel/assets/javascripts/dashboard.js b/caravel/assets/javascripts/dashboard.js
@@ -2,6 +2,7 @@ var $ = window.$ = require('jquery');
 var jQuery = window.jQuery = $;
 var px = require('./modules/caravel.js');
 var d3 = require('d3');
+var showModal = require('./modules/utils.js').showModal;
 require('bootstrap');
 
 var ace = require('brace');
@@ -147,10 +148,17 @@ var Dashboard = function (dashboardData) {
             data: JSON.stringify(data)
           },
           success: function () {
-            alert("Saved!");
+            showModal({
+              title: "Success",
+              body: "This dashboard was saved successfully."
+            });
           },
-          error: function () {
-            alert("Error :(");
+          error: function (error) {
+            showModal({
+              title: "Error",
+              body: "Sorry, there was an error saving this dashboard:<br />" + error
+            });
+            console.warn("Save dashboard error", error);
           }
         });
       });
@@ -178,7 +186,10 @@ var Dashboard = function (dashboardData) {
 
       });
       $('#filters').click(function () {
-        alert(dashboard.readFilters());
+        showModal({
+          title: "<span class='fa fa-info-circle'></span> Current Global Filters",
+          body: "The following global filters are currently applied:<br/>" + dashboard.readFilters()
+        });
       });
       $('#refresh_dash').click(function () {
         dashboard.slices.forEach(function (slice) {

diff --git a/caravel/assets/javascripts/explore.js b/caravel/assets/javascripts/explore.js
@@ -6,6 +6,7 @@
 var $ = window.$ = require('jquery');
 var jQuery = window.jQuery = $;
 var px = require('./modules/caravel.js');
+var showModal = require('./modules/utils.js').showModal;
 
 require('jquery-ui');
 $.widget.bridge('uitooltip', $.ui.tooltip); // Shutting down jq-ui tooltips
@@ -181,8 +182,12 @@ function initExploreView() {
           $shortner.popover('destroy');
         }
       },
-      error: function () {
-        alert("Error :(");
+      error: function (error) {
+        showModal({
+          title: "Error",
+          body: "Sorry, an error occurred during this operation:<br/>" + error
+        });
+        console.warn("Short URL error", error);
       }
     });
   });

diff --git a/caravel/assets/javascripts/modules/utils.js b/caravel/assets/javascripts/modules/utils.js
@@ -1,3 +1,4 @@
+var $ = require('jquery');
 var d3 = require('d3');
 
 /*
@@ -50,6 +51,30 @@ function wrapSvgText(text, width, adjustedY) {
   });
 }
 
+/**
+ * Sets the body and title content of a modal, and shows it. Assumes HTML for modal exists and that
+ * it handles closing (i.e., works with bootstrap)
+ *
+ * @param {object} options object of the form
+ *  {
+ *    title: {string},
+ *    body: {string},
+ *    modalSelector: {string, default: '.misc-modal' },
+ *    titleSelector: {string, default: '.misc-modal .modal-title' },
+ *    bodySelector:  {string, default: '.misc-modal .modal-body' },
+ *   }
+ */
+function showModal(options) {
+  options.modalSelector = options.modalSelector || ".misc-modal";
+  options.titleSelector = options.titleSelector || ".misc-modal .modal-title";
+  options.bodySelector = options.bodySelector || ".misc-modal .modal-body";
+
+  $(options.titleSelector).html(options.title || "");
+  $(options.bodySelector).html(options.body || "");
+  $(options.modalSelector).modal("show");
+}
+
 module.exports = {
-  wrapSvgText: wrapSvgText
+  wrapSvgText: wrapSvgText,
+  showModal: showModal
 };
diff --git a/caravel/assets/javascripts/sql.js b/caravel/assets/javascripts/sql.js
@@ -1,5 +1,7 @@
 var $ = window.$ = require('jquery');
 var jQuery = window.jQuery = $;
+var showModal = require('./modules/utils.js').showModal;
+
 require('select2');
 require('datatables');
 require('bootstrap');
@@ -41,7 +43,10 @@ $(document).ready(function () {
     $("#dbtable").on("change", showTableMetadata);
     showTableMetadata();
     $("#create_view").click(function () {
-      alert("Not implemented");
+      showModal({
+        title: "Error",
+        body: "Sorry, this feature is not yet implemented"
+      });
     });
     $(".sqlcontent").show();
 

diff --git a/caravel/templates/caravel/dashboard.html b/caravel/templates/caravel/dashboard.html
@@ -38,6 +38,25 @@ <h6><strong>Styling applies to this dashboard only</strong></h6>
   </div>
 </div>
 
+<!-- Modal for misc messages / alerts  -->
+<div class="misc-modal modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h4 class="modal-title"></h4>
+      </div>
+      <div class="modal-body">
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="title">
     <div class="row">
       <div class="col-md-3"></div>
@@ -68,6 +87,7 @@ <h2>
       </div>
     </div>
 </div>
+
 <div class="gridster content_fluid" style="visibility: hidden;">
     <ul>
         {% for slice in dashboard.slices %}

diff --git a/caravel/templates/caravel/explore.html b/caravel/templates/caravel/explore.html
@@ -217,6 +217,24 @@ <h4 class="modal-title">Datasource Description</h4>
         </div>
       </div>
     </form>
+    <!-- Modal for misc messages / alerts  -->
+    <div class="misc-modal modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+            <h4 class="modal-title"></h4>
+          </div>
+          <div class="modal-body">
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 {% endblock %}