Move window.alert() calls to bootstrap modals. Also log errors to console.

* Move window.alert() calls to bootstrap modals. Also log errors that occur to console.

* move misc modal to basic template so it's available on all pages.

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],

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) {

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);
       }
     });
   });

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
 };

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();
 

caravel/templates/caravel/basic.html

@@ -30,6 +30,24 @@
       </div>
     {% endblock %}
 
+    <!-- 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>
     {% block tail_js %}
     {% endblock %}
   </body>

caravel/templates/caravel/dashboard.html

@@ -68,6 +68,7 @@
       </div>
     </div>
 </div>
+
 <div class="gridster content_fluid" style="visibility: hidden;">
     <ul>
         {% for slice in dashboard.slices %}