Add error message to visualization directive. Closes #92

src/kibana/apps/dashboard/directives/panel.js

@@ -25,6 +25,9 @@ define(function (require) {
             // .destroy() called by the visualize directive
           })
           .catch(function (e) {
+            $scope.vis = {
+              error: e
+            };
             console.log(e);
           });
         });

src/kibana/apps/dashboard/styles/main.css

@@ -95,10 +95,8 @@ dashboard-grid {
   display: block;
   height: 100%;
   background: #ffffff;
-  color: #589cbc;
+  color: #46525d;
   padding: 0;
-  font-weight: bold;
-  font-size: 20px;
   overflow: hidden;
   position: relative;
 }

src/kibana/apps/dashboard/styles/main.less

@@ -34,10 +34,8 @@ dashboard-grid {
     display: block;
     height: 100%;
     background: @panel-bg;
-    color: @dashboard-background;
+    color: @text-color;
     padding: 0;
-    font-weight: bold;
-    font-size: 20px;
     overflow: hidden;
     position: relative;
 

src/kibana/apps/visualize/directives/visualize.js

@@ -19,6 +19,12 @@ define(function (require) {
         var chart; // set in "vis" watcher
 
         $scope.$watch('vis', function (vis, prevVis) {
+          if (!!vis.error) {
+            console.log('yep error');
+            $el.html('<div class="visualize-error"><i class="fa fa-exclamation-triangle"></i><br>' + vis.error + '</div>');
+            return;
+          }
+
           var typeDefinition = typeDefs.byName[vis.typeName];
 
           if (prevVis && prevVis.destroy) prevVis.destroy();

src/kibana/apps/visualize/styles/visualization.css

@@ -1,6 +1,86 @@
+@import url("//fonts.googleapis.com/css?family=Lato:400,700,400italic");
+.thumbnail > img,
+.thumbnail a > img,
+.carousel-inner > .item > img,
+.carousel-inner > .item > a > img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+.btn-group-lg > .btn {
+  padding: 18px 27px;
+  font-size: 19px;
+  line-height: 1.33;
+  border-radius: 6px;
+}
+.btn-group-sm > .btn {
+  padding: 6px 9px;
+  font-size: 13px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+.btn-group-xs > .btn {
+  padding: 1px 5px;
+  font-size: 13px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+.container:before,
+.container:after,
+.container-fluid:before,
+.container-fluid:after,
+.row:before,
+.row:after,
+.form-horizontal .form-group:before,
+.form-horizontal .form-group:after,
+.btn-toolbar:before,
+.btn-toolbar:after,
+.btn-group-vertical > .btn-group:before,
+.btn-group-vertical > .btn-group:after,
+.nav:before,
+.nav:after,
+.navbar:before,
+.navbar:after,
+.navbar-header:before,
+.navbar-header:after,
+.navbar-collapse:before,
+.navbar-collapse:after,
+.pager:before,
+.pager:after,
+.panel-body:before,
+.panel-body:after,
+.modal-footer:before,
+.modal-footer:after {
+  content: " ";
+  display: table;
+}
+.container:after,
+.container-fluid:after,
+.row:after,
+.form-horizontal .form-group:after,
+.btn-toolbar:after,
+.btn-group-vertical > .btn-group:after,
+.nav:after,
+.navbar:after,
+.navbar-header:after,
+.navbar-collapse:after,
+.pager:after,
+.panel-body:after,
+.modal-footer:after {
+  clear: both;
+}
 visualize {
   display: block;
   height: 100%;
   width: 100%;
   overflow: auto;
 }
+visualize .visualize-error {
+  margin-top: 20px;
+  text-align: center;
+  font-size: 1em;
+}
+visualize .visualize-error .fa-exclamation-triangle {
+  font-size: 2em;
+  color: #e74c3c;
+}

src/kibana/apps/visualize/styles/visualization.less

@@ -1,6 +1,21 @@
+@import (reference) "../../../styles/_bootstrap.less";
+@import (reference) "../../../styles/theme/_theme.less";
+@import (reference) "../../../styles/_variables.less";
+
 visualize {
   display: block;
   height: 100%;
   width: 100%;
   overflow: auto;
+}
+
+visualize .visualize-error {
+  margin-top: 20px;
+  text-align: center;
+  font-size: 1em;
+
+  .fa-exclamation-triangle {
+    font-size: 2em;
+    color: @btn-danger-bg;
+  }
 }