[Dashboard bug] Fix Cache status and dttm information display for each slice (#3833)

This commit is contained in:
Grace Guo 2017-11-11 21:51:25 -08:00 committed by GitHub
parent 8459347bdc
commit b4c9402737
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 51 additions and 37 deletions

View File

@ -11,6 +11,8 @@ const propTypes = {
timeout: PropTypes.number,
datasource: PropTypes.object,
isLoading: PropTypes.bool,
isCached: PropTypes.bool,
cachedDttm: PropTypes.number,
isExpanded: PropTypes.bool,
widgetHeight: PropTypes.number,
widgetWidth: PropTypes.number,
@ -78,8 +80,9 @@ class GridCell extends React.PureComponent {
render() {
const {
exploreChartUrl, exportCSVUrl, isExpanded, isLoading, removeSlice, updateSliceName,
toggleExpandSlice, forceRefresh, chartKey, slice, datasource, formData, timeout,
exploreChartUrl, exportCSVUrl, isExpanded, isLoading, isCached, cachedDttm,
removeSlice, updateSliceName, toggleExpandSlice, forceRefresh,
chartKey, slice, datasource, formData, timeout,
} = this.props;
return (
<div
@ -92,6 +95,8 @@ class GridCell extends React.PureComponent {
exploreChartUrl={exploreChartUrl}
exportCSVUrl={exportCSVUrl}
isExpanded={isExpanded}
isCached={isCached}
cachedDttm={cachedDttm}
removeSlice={removeSlice}
updateSliceName={updateSliceName}
toggleExpandSlice={toggleExpandSlice}

View File

@ -127,6 +127,45 @@ class GridLayout extends React.Component {
}
render() {
const cells = this.props.dashboard.slices.map((slice) => {
const chartKey = `slice_${slice.slice_id}`;
const currentChart = this.props.charts[chartKey];
const queryResponse = currentChart.queryResponse || {};
return (
<div
id={'slice_' + slice.slice_id}
key={slice.slice_id}
data-slice-id={slice.slice_id}
className={`widget ${slice.form_data.viz_type}`}
ref={this.getWidgetId(slice)}
>
<GridCell
slice={slice}
chartKey={chartKey}
datasource={this.props.datasources[slice.form_data.datasource]}
filters={this.props.filters}
formData={this.props.getFormDataExtra(slice)}
timeout={this.props.timeout}
widgetHeight={this.getWidgetHeight(slice)}
widgetWidth={this.getWidgetWidth(slice)}
exploreChartUrl={getExploreUrl(this.props.getFormDataExtra(slice))}
exportCSVUrl={getExploreUrl(this.props.getFormDataExtra(slice), 'csv')}
isExpanded={!!this.isExpanded(slice)}
isLoading={[undefined, 'loading'].indexOf(currentChart.chartStatus) !== -1}
isCached={queryResponse.is_cached}
cachedDttm={queryResponse.cached_dttm}
toggleExpandSlice={this.props.toggleExpandSlice}
forceRefresh={this.forceRefresh}
removeSlice={this.removeSlice}
updateSliceName={this.updateSliceName}
addFilter={this.props.addFilter}
getFilters={this.props.getFilters}
clearFilter={this.props.clearFilter}
removeFilter={this.props.removeFilter}
/>
</div>);
});
return (
<ResponsiveReactGridLayout
className="layout"
@ -140,39 +179,7 @@ class GridLayout extends React.Component {
useCSSTransforms
draggableHandle=".drag"
>
{this.props.dashboard.slices.map(slice => (
<div
id={'slice_' + slice.slice_id}
key={slice.slice_id}
data-slice-id={slice.slice_id}
className={`widget ${slice.form_data.viz_type}`}
ref={this.getWidgetId(slice)}
>
<GridCell
slice={slice}
chartKey={'slice_' + slice.slice_id}
datasource={this.props.datasources[slice.form_data.datasource]}
filters={this.props.filters}
formData={this.props.getFormDataExtra(slice)}
timeout={this.props.timeout}
widgetHeight={this.getWidgetHeight(slice)}
widgetWidth={this.getWidgetWidth(slice)}
exploreChartUrl={getExploreUrl(this.props.getFormDataExtra(slice))}
exportCSVUrl={getExploreUrl(this.props.getFormDataExtra(slice), 'csv')}
isExpanded={!!this.isExpanded(slice)}
isLoading={[undefined, 'loading']
.indexOf(this.props.charts['slice_' + slice.slice_id].chartStatus) !== -1}
toggleExpandSlice={this.props.toggleExpandSlice}
forceRefresh={this.forceRefresh}
removeSlice={this.removeSlice}
updateSliceName={this.updateSliceName}
addFilter={this.props.addFilter}
getFilters={this.props.getFilters}
clearFilter={this.props.clearFilter}
removeFilter={this.props.removeFilter}
/>
</div>
))}
{cells}
</ResponsiveReactGridLayout>
);
}

View File

@ -11,6 +11,8 @@ const propTypes = {
exploreChartUrl: PropTypes.string,
exportCSVUrl: PropTypes.string,
isExpanded: PropTypes.bool,
isCached: PropTypes.bool,
cachedDttm: PropTypes.number,
formDataExtra: PropTypes.object,
removeSlice: PropTypes.func,
updateSliceName: PropTypes.func,
@ -40,9 +42,9 @@ class SliceHeader extends React.PureComponent {
render() {
const slice = this.props.slice;
const isCached = slice.is_cached;
const isCached = this.props.isCached;
const isExpanded = !!this.props.isExpanded;
const cachedWhen = moment.utc(slice.cached_dttm).fromNow();
const cachedWhen = moment.utc(this.props.cachedDttm).fromNow();
const refreshTooltip = isCached ?
t('Served from data cached %s . Click to force refresh.', cachedWhen) :
t('Force refresh data');