From 403f063ae95f673f83ee449a027872cfff773eb1 Mon Sep 17 00:00:00 2001
From: Grace Guo <grace.guo@airbnb.com>
Date: Fri, 10 Nov 2017 16:11:50 -0800
Subject: [PATCH] [Dashboard bug] Fix Cache status and dttm information display
 for each slice

---
 .../dashboard/components/GridCell.jsx         |  9 ++-
 .../dashboard/components/GridLayout.jsx       | 73 ++++++++++---------
 .../dashboard/components/SliceHeader.jsx      |  6 +-
 3 files changed, 51 insertions(+), 37 deletions(-)

diff --git a/superset/assets/javascripts/dashboard/components/GridCell.jsx b/superset/assets/javascripts/dashboard/components/GridCell.jsx
index 1a59a92dd69d6..26d8eeb6eadc4 100644
--- a/superset/assets/javascripts/dashboard/components/GridCell.jsx
+++ b/superset/assets/javascripts/dashboard/components/GridCell.jsx
@@ -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}
diff --git a/superset/assets/javascripts/dashboard/components/GridLayout.jsx b/superset/assets/javascripts/dashboard/components/GridLayout.jsx
index 22d4b59c44140..002d59b1bdabd 100644
--- a/superset/assets/javascripts/dashboard/components/GridLayout.jsx
+++ b/superset/assets/javascripts/dashboard/components/GridLayout.jsx
@@ -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>
     );
   }
diff --git a/superset/assets/javascripts/dashboard/components/SliceHeader.jsx b/superset/assets/javascripts/dashboard/components/SliceHeader.jsx
index d1a2d9ec94274..8360017d44fa2 100644
--- a/superset/assets/javascripts/dashboard/components/SliceHeader.jsx
+++ b/superset/assets/javascripts/dashboard/components/SliceHeader.jsx
@@ -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');