[dashboard]Add timeout message on Dashboard view (#2910)

Same as explore view, if query takes > 45 seconds not returned, we will show Query timeout warning message. Otherwise user will see 504 Gateway timeout error.
This commit is contained in:
Grace Guo 2017-06-06 12:05:05 -07:00 committed by GitHub
parent 65f25a1e5a
commit c9e5fbb09b
2 changed files with 24 additions and 16 deletions

View File

@ -4,6 +4,7 @@ import Mustache from 'mustache';
import vizMap from '../../visualizations/main'; import vizMap from '../../visualizations/main';
import { getExploreUrl } from '../explore/exploreUtils'; import { getExploreUrl } from '../explore/exploreUtils';
import { applyDefaultFormData } from '../explore/stores/store'; import { applyDefaultFormData } from '../explore/stores/store';
import { QUERY_TIMEOUT_THRESHOLD } from '../constants';
const utils = require('./utils'); const utils = require('./utils');
@ -123,9 +124,6 @@ const px = function () {
controller.done(this); controller.done(this);
}, },
getErrorMsg(xhr) { getErrorMsg(xhr) {
if (xhr.statusText === 'timeout') {
return 'The request timed out';
}
let msg = ''; let msg = '';
if (!xhr.responseText) { if (!xhr.responseText) {
const status = xhr.status; const status = xhr.status;
@ -158,11 +156,16 @@ const px = function () {
errHtml += `<div class="alert alert-danger">${errorMsg}</div>`; errHtml += `<div class="alert alert-danger">${errorMsg}</div>`;
} }
if (xhr) { if (xhr) {
if (xhr.statusText === 'timeout') {
errHtml += '<div class="alert alert-warning">' +
`Query timeout - visualization query are set to time out at ${QUERY_TIMEOUT_THRESHOLD / 1000} seconds.</div>`;
} else {
const extendedMsg = this.getErrorMsg(xhr); const extendedMsg = this.getErrorMsg(xhr);
if (extendedMsg) { if (extendedMsg) {
errHtml += `<div class="alert alert-danger">${extendedMsg}</div>`; errHtml += `<div class="alert alert-danger">${extendedMsg}</div>`;
} }
} }
}
container.html(errHtml); container.html(errHtml);
container.show(); container.show();
$('span.query').removeClass('disabled'); $('span.query').removeClass('disabled');
@ -205,15 +208,20 @@ const px = function () {
token.find('img.loading').show(); token.find('img.loading').show();
container.fadeTo(0.5, 0.25); container.fadeTo(0.5, 0.25);
container.css('height', this.height()); container.css('height', this.height());
$.getJSON(this.jsonEndpoint(), (queryResponse) => { $.ajax({
url: this.jsonEndpoint(),
timeout: QUERY_TIMEOUT_THRESHOLD,
success: (queryResponse) => {
try { try {
vizMap[formData.viz_type](this, queryResponse); vizMap[formData.viz_type](this, queryResponse);
this.done(queryResponse); this.done(queryResponse);
} catch (e) { } catch (e) {
this.error('An error occurred while rendering the visualization: ' + e); this.error('An error occurred while rendering the visualization: ' + e);
} }
}).fail((err) => { },
error: (err) => {
this.error(err.responseText, err); this.error(err.responseText, err);
},
}); });
}, },
resize() { resize() {

View File

@ -3,7 +3,7 @@
border: 1px superset black; border: 1px superset black;
} }
.dashboard .filter_box .slice_container > div { .dashboard .filter_box .slice_container > div:not(.alert) {
padding-top: 0; padding-top: 0;
} }