Fixing explore actions & slice controller interactions

caravel/assets/javascripts/dashboard/Dashboard.jsx

@@ -3,7 +3,7 @@ const jQuery = window.jQuery = require('jquery'); // eslint-disable-line
 const px = require('../modules/caravel.js');
 const d3 = require('d3');
 const urlLib = require('url');
-const showModal = require('../modules/utils.js').showModal;
+const utils = require('../modules/utils.js');
 
 import React from 'react';
 import { render } from 'react-dom';
@@ -41,7 +41,8 @@ function injectCss(className, css) {
 }
 
 function dashboardContainer(dashboardData) {
-  let dashboard = $.extend(dashboardData, {
+  let dashboard = Object.assign({}, utils.controllerInterface, dashboardData, {
+    type: 'dashboard',
     filters: {},
     init() {
       this.initDashboardView();
@@ -82,6 +83,23 @@ function dashboardContainer(dashboardData) {
     setFilter(sliceId, col, vals, refresh) {
       this.addFilter(sliceId, col, vals, false, refresh);
     },
+    done(slice) {
+      const refresh = slice.getWidgetHeader().find('.refresh');
+      const data = slice.data;
+      if (data !== undefined && data.is_cached) {
+        refresh
+        .addClass('danger')
+        .attr('title',
+              'Served from data cached at ' + data.cached_dttm +
+                '. Click to force refresh')
+                .tooltip('fixTitle');
+      } else {
+        refresh
+        .removeClass('danger')
+        .attr('title', 'Click to force refresh')
+        .tooltip('fixTitle');
+      }
+    },
     effectiveExtraFilters(sliceId) {
       // Summarized filter, not defined by sliceId
       // returns k=field, v=array of values
@@ -250,7 +268,7 @@ function dashboardContainer(dashboardData) {
         },
         error(error) {
           const errorMsg = getAjaxErrorMsg(error);
-          showModal({
+          utils.showModal({
             title: 'Error',
             body: 'Sorry, there was an error adding slices to this dashboard: </ br>' + errorMsg,
           });
@@ -279,14 +297,14 @@ function dashboardContainer(dashboardData) {
           data: JSON.stringify(data),
         },
         success() {
-          showModal({
+          utils.showModal({
             title: 'Success',
             body: 'This dashboard was saved successfully.',
           });
         },
         error(error) {
           const errorMsg = this.getAjaxErrorMsg(error);
-          showModal({
+          utils.showModal({
             title: 'Error',
             body: 'Sorry, there was an error saving this dashboard: </ br>' + errorMsg,
           });
@@ -344,7 +362,7 @@ function dashboardContainer(dashboardData) {
         injectCss('dashboard-template', css);
       });
       $('#filters').click(() => {
-        showModal({
+        utils.showModal({
           title: '<span class="fa fa-info-circle"></span> Current Global Filters',
           body: 'The following global filters are currently applied:<br/>' +
                 dashboard.readFilters(),

caravel/assets/javascripts/explore/components/EmbedCodeButton.jsx

@@ -12,7 +12,6 @@ export default class EmbedCodeButton extends React.Component {
     this.state = {
       height: '400',
       width: '600',
-      srcLink: window.location.origin + props.slice.data.standalone_endpoint,
     };
     this.handleInputChange = this.handleInputChange.bind(this);
   }
@@ -26,11 +25,15 @@ export default class EmbedCodeButton extends React.Component {
   }
 
   generateEmbedHTML() {
-    const { width, height, srcLink } = this.state;
+    const srcLink = window.location.origin + this.props.slice.data.standalone_endpoint;
     /* eslint max-len: 0 */
-    const embedHTML =
-      `<iframe src="${srcLink}" width="${width}" height="${height}" seamless frameBorder="0" scrolling="no"></iframe>`;
-    return embedHTML;
+    return `
+      <iframe
+        src="${srcLink}"
+        width="${this.state.width}"
+        height="${this.state.height}"
+        seamless frameBorder="0" scrolling="no">
+      </iframe>`;
   }
 
   renderPopover() {

caravel/assets/javascripts/explore/components/ExploreActionButtons.jsx

@@ -13,7 +13,6 @@ export default function ExploreActionButtons({ canDownload, slice }) {
   const exportToCSVClasses = cx('btn btn-default btn-sm', {
     'disabled disabledButton': !canDownload,
   });
-
   return (
     <div className="btn-group results" role="group">
       <URLShortLinkButton slice={slice} />

caravel/assets/javascripts/explore/components/URLShortLinkButton.jsx

@@ -13,16 +13,14 @@ export default class URLShortLinkButton extends React.Component {
     this.state = {
       shortUrl: '',
     };
-
-    this.getShortUrl();
   }
 
   getShortUrl() {
     $.ajax({
       type: 'POST',
       url: '/r/shortner/',
       data: {
-        data: '/' + window.location.pathname + this.props.slice.querystring(),
+        data: '/' + window.location.pathname + window.location.search,
       },
       success: (data) => {
         this.setState({
@@ -51,16 +49,15 @@ export default class URLShortLinkButton extends React.Component {
   }
 
   render() {
-    const shortUrl = this.state.shortUrl;
-    const isDisabled = shortUrl === '';
     return (
       <OverlayTrigger
         trigger="click"
         rootClose
         placement="left"
+        onEnter={this.getShortUrl.bind(this)}
         overlay={this.renderPopover()}
       >
-        <span className="btn btn-default btn-sm" disabled={isDisabled}>
+        <span className="btn btn-default btn-sm">
           <i className="fa fa-link"></i>&nbsp;
         </span>
       </OverlayTrigger>

caravel/assets/javascripts/explore/explore.jsx

@@ -5,7 +5,7 @@
 // js
 const $ = window.$ = require('jquery');
 const px = require('./../modules/caravel.js');
-const showModal = require('./../modules/utils.js').showModal;
+const utils = require('./../modules/utils.js');
 const jQuery = window.jQuery = require('jquery'); // eslint-disable-line
 
 import React from 'react';
@@ -81,7 +81,7 @@ function saveSlice() {
   if (action === 'saveas') {
     const sliceName = $('input[name=new_slice_name]').val();
     if (sliceName === '') {
-      showModal({
+      utils.showModal({
         title: 'Error',
         body: 'You must pick a name for the new slice',
       });
@@ -91,13 +91,13 @@ function saveSlice() {
   }
   const addToDash = $('input[name=addToDash]:checked').val();
   if (addToDash === 'existing' && $('#save_to_dashboard_id').val() === '') {
-    showModal({
+    utils.showModal({
       title: 'Error',
       body: 'You must pick an existing dashboard',
     });
     return;
   } else if (addToDash === 'new' && $('input[name=new_dashboard_name]').val() === '') {
-    showModal({
+    utils.showModal({
       title: 'Error',
       body: 'Please enter a name for the new dashboard',
     });
@@ -336,6 +336,17 @@ function initExploreView() {
   prepSaveDialog();
 }
 
+function renderExploreActions() {
+  const exploreActionsEl = document.getElementById('js-explore-actions');
+  ReactDOM.render(
+    <ExploreActionButtons
+      canDownload={exploreActionsEl.getAttribute('data-can-download')}
+      slice={slice}
+    />,
+    exploreActionsEl
+  );
+}
+
 function initComponents() {
   const queryAndSaveBtnsEl = document.getElementById('js-query-and-save-btns');
   ReactDOM.render(
@@ -345,25 +356,40 @@ function initComponents() {
     />,
     queryAndSaveBtnsEl
   );
-
-  const exploreActionsEl = document.getElementById('js-explore-actions');
-  ReactDOM.render(
-    <ExploreActionButtons
-      canDownload={exploreActionsEl.getAttribute('data-can-download')}
-      slice={slice}
-    />,
-    exploreActionsEl
-  );
+  renderExploreActions();
 }
 
+let exploreController = {
+  type: 'slice',
+  done: (sliceObj) => {
+    slice = sliceObj;
+    renderExploreActions();
+    const cachedSelector = $('#is_cached');
+    if (slice.data !== undefined && slice.data.is_cached) {
+      cachedSelector
+      .attr(
+        'title',
+        `Served from data cached at ${slice.data.cached_dttm}. Click [Query] to force refresh`)
+      .show()
+      .tooltip('fixTitle');
+    } else {
+      cachedSelector.hide();
+    }
+  },
+  error: (sliceObj) => {
+    slice = sliceObj;
+    renderExploreActions();
+  },
+};
+exploreController = Object.assign({}, utils.controllerInterface, exploreController);
+
+
 $(document).ready(function () {
   const data = $('.slice').data('slice');
 
   initExploreView();
 
-  slice = px.Slice(data);
-
-  $('.slice').data('slice', slice);
+  slice = px.Slice(data, exploreController);
 
   // call vis render method, which issues ajax
   // calls render on the slice for the first time