Consistent errors

app/assets/stylesheets/blazer/application.css

@@ -192,3 +192,7 @@ input.search:focus {
 .chart-container h4 a {
   color: inherit;
 }
+
+.query-error {
+  color: red;
+}

app/views/blazer/dashboards/show.html.erb

@@ -41,7 +41,7 @@
       $("#chart-<%= i %>").html(data)
       $("#chart-<%= i %> table").stupidtable()
     }, function (message) {
-      $("#chart-<%= i %>").css("color", "red").html(message)
+      $("#chart-<%= i %>").addClass("query-error").html(message)
     });
   </script>
 <% end %>

app/views/blazer/queries/_form.html.erb

@@ -60,7 +60,7 @@
 
   <div id="results">
     <p class="text-muted" v-if="running">Loading...</p>
-    <div id="results-html" v-if="!running"></div>
+    <div id="results-html" v-if="!running" :class="{ 'query-error': error }"></div>
   </div>
 </div>
 
@@ -73,6 +73,7 @@
     data: {
       running: false,
       results: "",
+      error: false,
       dataSource: "",
       selectize: null,
       editorHeight: "180px"
@@ -86,6 +87,7 @@
       run: function(e) {
         this.running = true
         this.results = ""
+        this.error = false
         cancelAllQueries()
 
         var data = $.extend({}, params, {statement: this.getSQL(), data_source: $("#query_data_source").val()})
@@ -105,6 +107,7 @@
           }
         }, function (data) {
           _this.running = false
+          _this.error = true
           _this.showResults(data)
         })
       },

app/views/blazer/queries/show.html.erb

@@ -53,7 +53,7 @@
     }
 
     function showError(message) {
-      $("#results").css("color", "red").html(message);
+      $("#results").addClass("query-error").html(message);
     }
 
     <%= blazer_js_var "data", variable_params.merge(statement: @statement, query_id: @query.id) %>