[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,9 +156,14 @@ const px = function () {
errHtml += `<div class="alert alert-danger">${errorMsg}</div>`; errHtml += `<div class="alert alert-danger">${errorMsg}</div>`;
} }
if (xhr) { if (xhr) {
const extendedMsg = this.getErrorMsg(xhr); if (xhr.statusText === 'timeout') {
if (extendedMsg) { errHtml += '<div class="alert alert-warning">' +
errHtml += `<div class="alert alert-danger">${extendedMsg}</div>`; `Query timeout - visualization query are set to time out at ${QUERY_TIMEOUT_THRESHOLD / 1000} seconds.</div>`;
} else {
const extendedMsg = this.getErrorMsg(xhr);
if (extendedMsg) {
errHtml += `<div class="alert alert-danger">${extendedMsg}</div>`;
}
} }
} }
container.html(errHtml); container.html(errHtml);
@ -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({
try { url: this.jsonEndpoint(),
vizMap[formData.viz_type](this, queryResponse); timeout: QUERY_TIMEOUT_THRESHOLD,
this.done(queryResponse); success: (queryResponse) => {
} catch (e) { try {
this.error('An error occurred while rendering the visualization: ' + e); vizMap[formData.viz_type](this, queryResponse);
} this.done(queryResponse);
}).fail((err) => { } catch (e) {
this.error(err.responseText, err); this.error('An error occurred while rendering the visualization: ' + e);
}
},
error: (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;
} }