Query result error message design

The current query result error message:

It takes lots of focus in dashboards but perhaps it doesn’t have to - it’s obvious a widget’s visualization didn’t load correctly cause it’s not there. So perhaps we can tone it down a little.

Here are some visual suggestions to get discussion rolling:

Option 1 - Clean

Option 2 - Clear

Clear indication in top right icon, clear error with bg color - for cases when widget is tall and obscured.

Option 3 - Readable

Stack traces or db errors may contain lots of info so monospace and left alignment.

Lmk what you think.

1 Like

I prefer option 2. I’d like to see more options that display info from query runners. Not just for errors, either.

@susodapop gimme the more options.

For the JSON data source: Show the response headers.
For Postgres/Redshift/mySQL: Show the query result messages (like a query plan)

I’m envisioning a panel that can show pre-formatted text supplied by the query runner.

Working on parameter validation, I went ahead and did a minor redesign so transitioning between the different query result statuses is easy on the eyes.

1st - Loads results
2nd - Validation error
3rd - Cancelation

And erroneous widgets now look less threatening.


Perhaps show descriptive text while attempting cancel:

In general, don’t really like the look&feel of this colored text on grey background. :thinking:

“Validating query” might confuse people to think we’re validating the SQL, which we aren’t.
Ideally we wouldn’t need to show anything, if it’s fast enough. But because network hop is in place, it might take time. I wonder if having a different type of progress indicator (instead of this big bar) might provide more options.

Widget: aside from the colors (red on grey), the widget error does look nicer than today, but I wonder if we can take it a step further and make the error not block the content (in case there is one from previous execution)?

1 Like

Very good points. I got an idea cookin.

Here’s a different concept. A progress bar with the 4 stages - init, wait, process, retrieve.
Note this is a concept and not a final design at all.

Here’s the breakdown.

All stages

Imagine a neat animation.



The “more info” would open a dialog with a key-value list of any additional information, easily copy-pasteable to support forum.

1 Like