Fixing the CACHING (#2203)

Caching wasn't working after deprecate_v1, this addresses it. Also surfacing
whether the data is served from cache in explore view and a way to force
run the query bypassing the cache.

superset/assets/javascripts/explorev2/actions/exploreActions.js

@@ -229,9 +229,9 @@ export function updateChartStatus(status) {
 }
 
 export const RUN_QUERY = 'RUN_QUERY';
-export function runQuery(formData, datasourceType) {
+export function runQuery(formData, force = false) {
   return function (dispatch) {
-    const url = getExploreUrl(formData, datasourceType, 'json');
+    const url = getExploreUrl(formData, 'json', force);
     const queryRequest = $.getJSON(url, function (queryResponse) {
       dispatch(chartUpdateSucceeded(queryResponse));
     }).fail(function (err) {

superset/assets/javascripts/explorev2/components/ChartContainer.jsx

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
-import { Panel, Alert, Collapse } from 'react-bootstrap';
+import { Alert, Collapse, Label, Panel } from 'react-bootstrap';
 import visMap from '../../../visualizations/main';
 import { d3format } from '../../modules/utils';
 import ExploreActionButtons from './ExploreActionButtons';
@@ -125,10 +125,10 @@ class ChartContainer extends React.PureComponent {
       },
 
       data: {
-        csv_endpoint: getExploreUrl(this.props.formData, this.props.datasource_type, 'csv'),
-        json_endpoint: getExploreUrl(this.props.formData, this.props.datasource_type, 'json'),
+        csv_endpoint: getExploreUrl(this.props.formData, 'csv'),
+        json_endpoint: getExploreUrl(this.props.formData, 'json'),
         standalone_endpoint: getExploreUrl(
-          this.props.formData, this.props.datasource_type, 'standalone'),
+          this.props.formData, 'standalone'),
       },
 
     };
@@ -202,6 +202,9 @@ class ChartContainer extends React.PureComponent {
       </div>
     );
   }
+  runQuery() {
+    this.props.actions.runQuery(this.props.formData, true);
+  }
 
   render() {
     if (this.props.standalone) {
@@ -241,6 +244,21 @@ class ChartContainer extends React.PureComponent {
               }
 
               <div className="pull-right">
+                {this.props.chartStatus === 'success' &&
+                 this.props.queryResponse &&
+                 this.props.queryResponse.is_cached &&
+                  <TooltipWrapper
+                    tooltip="Loaded from cache. Click to force refresh"
+                    label="cache-desc"
+                  >
+                    <Label
+                      style={{ fontSize: '10px', marginRight: '5px', cursor: 'pointer' }}
+                      onClick={this.runQuery.bind(this)}
+                    >
+                      cached
+                    </Label>
+                  </TooltipWrapper>
+                }
                 <Timer
                   startTime={this.props.chartUpdateStartTime}
                   endTime={this.props.chartUpdateEndTime}
@@ -251,8 +269,7 @@ class ChartContainer extends React.PureComponent {
                 <ExploreActionButtons
                   slice={this.state.mockSlice}
                   canDownload={this.props.can_download}
-                  queryEndpoint={getExploreUrl(
-                    this.props.latestQueryFormData, this.props.datasource_type, 'query')}
+                  queryEndpoint={getExploreUrl(this.props.latestQueryFormData, 'query')}
                 />
               </div>
             </div>
@@ -286,6 +303,7 @@ function mapStateToProps(state) {
     table_name: formData.datasource_name,
     viz_type: formData.viz_type,
     triggerRender: state.triggerRender,
+    datasourceType: state.datasource ? state.datasource.type : null,
   };
 }
 

superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx

@@ -82,7 +82,7 @@ class ExploreViewContainer extends React.Component {
 
 
   runQuery() {
-    this.props.actions.runQuery(this.props.form_data, this.props.datasource_type);
+    this.props.actions.runQuery(this.props.form_data);
   }
 
   handleResize() {

superset/assets/javascripts/explorev2/exploreUtils.js

@@ -1,8 +1,14 @@
 /* eslint camelcase: 0 */
-export function getExploreUrl(form_data, dummy, endpoint = 'base') {
+export function getExploreUrl(form_data, endpoint = 'base', force = false) {
+  if (!form_data.datasource) {
+    return null;
+  }
   const [datasource_id, datasource_type] = form_data.datasource.split('__');
   let params = `${datasource_type}/${datasource_id}/`;
   params += '?form_data=' + encodeURIComponent(JSON.stringify(form_data));
+  if (force) {
+    params += '&force=true';
+  }
   switch (endpoint) {
     case 'base':
       return `/superset/explore/${params}`;

superset/assets/javascripts/modules/superset.js

@@ -63,7 +63,7 @@ const px = function () {
     const container = $(selector);
     const sliceId = data.slice_id;
     const formData = applyDefaultFormData(data.form_data);
-    const jsonEndpoint = getExploreUrl(formData, 'table', 'json');
+    const jsonEndpoint = getExploreUrl(formData, 'json');
     const origJsonEndpoint = jsonEndpoint;
     let dttm = 0;
     const stopwatch = function () {