Merge pull request #1590 from Graylog2/issue-1589

Improve error handling on dashboard widgets
graylog-labs · Sep 2, 2015 · 6eab898 · 6eab898
2 parents 07c8c27 + 0b2553d
commit 6eab898
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 7 deletions.
diff --git a/app/assets/stylesheets/graylog2.less b/app/assets/stylesheets/graylog2.less
@@ -1270,7 +1270,7 @@ dl.metric-histogram dd {
 }
 
 .dashboard .widget .number .value {
-  line-height: 90px;
+  line-height: 100px;
   text-align: center;
   font-size: 70px;
   position: relative;
@@ -1331,10 +1331,21 @@ dl.metric-histogram dd {
   padding: 0 5px 0 5px;
 }
 
-.dashboard .widget .loading {
+.dashboard .widget .not-available {
+  font-size: 70px;
+}
+
+.dashboard .widget .loading,
+.dashboard .widget .not-available {
+  line-height: 100px;
   text-align: center;
 }
 
+.dashboard .widget .loading .spinner,
+.dashboard .widget .not-available .spinner {
+  vertical-align: middle;
+}
+
 /* End new widgets */
 
 .configuration-field-optional {

diff --git a/app/controllers/api/DashboardsApiController.java b/app/controllers/api/DashboardsApiController.java
@@ -17,12 +17,14 @@
 
 package controllers.api;
 
+import com.fasterxml.jackson.databind.ObjectMapper;
 import com.google.common.collect.ImmutableList;
 import com.google.common.collect.ImmutableMap;
 import com.google.common.collect.Lists;
 import com.google.common.collect.Maps;
 import com.google.common.net.MediaType;
 import controllers.AuthenticatedController;
+import lib.ApiErrorMessage;
 import lib.json.Json;
 import lib.security.RestPermissions;
 import org.graylog2.rest.models.dashboards.requests.AddWidgetRequest;
@@ -69,10 +71,12 @@
 
 public class DashboardsApiController extends AuthenticatedController {
     private final DashboardService dashboardService;
+    private final ObjectMapper mapper;
 
     @Inject
-    public DashboardsApiController(DashboardService dashboardService) {
+    public DashboardsApiController(DashboardService dashboardService, ObjectMapper mapper) {
         this.dashboardService = dashboardService;
+        this.mapper = mapper;
     }
 
     public Result index() {
@@ -253,10 +257,14 @@ public Result widgetValue(String dashboardId, String widgetId, int resolution) {
 
             return ok(Json.toJsonString(result)).as(MediaType.JSON_UTF_8.toString());
         } catch (APIException e) {
-            String message = "Could not get dashboard. We expected HTTP 200, but got a HTTP " + e.getHttpCode() + ".";
-            return status(504, views.html.errors.error.render(message, e, request()));
+            try {
+                final ApiErrorMessage apiErrorMessage = mapper.readValue(e.getResponseBody(), ApiErrorMessage.class);
+                return status(e.getHttpCode(), apiErrorMessage.message);
+            } catch (IOException e1) {
+                return status(504, e.getMessage());
+            }
         } catch (IOException e) {
-            return status(504, views.html.errors.error.render(ApiClient.ERROR_MSG_IO, e, request()));
+            return status(504, e.getMessage());
         }
     }
 

diff --git a/javascript/src/components/widgets/Widget.jsx b/javascript/src/components/widgets/Widget.jsx
@@ -121,9 +121,12 @@ var Widget = React.createClass({
 
         var dataPromise = WidgetsStore.loadValue(this.props.dashboardId, this.props.widgetId, width);
         dataPromise.fail((jqXHR, textStatus, errorThrown) => {
+            var error = jqXHR.responseText === "" || jqXHR.responseText === "\"\"" ? errorThrown : jqXHR.responseText;
+            var newResult = this.state.result === undefined ? "N/A" : this.state.result;
             this.setState({
+                result: newResult,
                 error: true,
-                errorMessage: "Error loading widget value: " + errorThrown
+                errorMessage: "Error loading widget value: " + error
             });
         });
         dataPromise.done((value) => {
@@ -160,6 +163,10 @@ var Widget = React.createClass({
             </div>;
         }
 
+        if (this.state.result === "N/A") {
+            return <div className="not-available">{this.state.result}</div>;
+        }
+
         var visualization;
 
         switch (this.state.type) {