Refreshing datasources async

apache · Jan 27, 2017 · 3a4377e · 3a4377e
1 parent e0a8ca9
commit 3a4377e
Show file tree

Hide file tree

Showing 11 changed files with 178 additions and 132 deletions.
diff --git a/superset/assets/javascripts/explorev2/actions/exploreActions.js b/superset/assets/javascripts/explorev2/actions/exploreActions.js
@@ -13,24 +13,44 @@ export function setDatasource(datasource) {
   return { type: SET_DATASOURCE, datasource };
 }
 
-export const FETCH_STARTED = 'FETCH_STARTED';
-export function fetchStarted() {
-  return { type: FETCH_STARTED };
+export const SET_DATASOURCES = 'SET_DATASOURCES';
+export function setDatasources(datasources) {
+  return { type: SET_DATASOURCES, datasources };
 }
 
-export const FETCH_SUCCEEDED = 'FETCH_SUCCEEDED';
-export function fetchSucceeded() {
-  return { type: FETCH_SUCCEEDED };
+export const FETCH_DATASOURCE_STARTED = 'FETCH_DATASOURCE_STARTED';
+export function fetchDatasourceStarted() {
+  return { type: FETCH_DATASOURCE_STARTED };
 }
 
-export const FETCH_FAILED = 'FETCH_FAILED';
-export function fetchFailed(error) {
-  return { type: FETCH_FAILED, error };
+export const FETCH_DATASOURCE_SUCCEEDED = 'FETCH_DATASOURCE_SUCCEEDED';
+export function fetchDatasourceSucceeded() {
+  return { type: FETCH_DATASOURCE_SUCCEEDED };
+}
+
+export const FETCH_DATASOURCE_FAILED = 'FETCH_DATASOURCE_FAILED';
+export function fetchDatasourceFailed(error) {
+  return { type: FETCH_DATASOURCE_FAILED, error };
+}
+
+export const FETCH_DATASOURCES_STARTED = 'FETCH_DATASOURCES_STARTED';
+export function fetchDatasourcesStarted() {
+  return { type: FETCH_DATASOURCES_STARTED };
+}
+
+export const FETCH_DATASOURCES_SUCCEEDED = 'FETCH_DATASOURCES_SUCCEEDED';
+export function fetchDatasourcesSucceeded() {
+  return { type: FETCH_DATASOURCES_SUCCEEDED };
+}
+
+export const FETCH_DATASOURCES_FAILED = 'FETCH_DATASOURCES_FAILED';
+export function fetchDatasourcesFailed(error) {
+  return { type: FETCH_DATASOURCES_FAILED, error };
 }
 
 export function fetchDatasourceMetadata(datasourceId, datasourceType) {
   return function (dispatch) {
-    dispatch(fetchStarted());
+    dispatch(fetchDatasourceStarted());
 
     if (datasourceId) {
       const params = [`datasource_id=${datasourceId}`, `datasource_type=${datasourceType}`];
@@ -40,18 +60,36 @@ export function fetchDatasourceMetadata(datasourceId, datasourceType) {
         url,
         success: (data) => {
           dispatch(setDatasource(data));
-          dispatch(fetchSucceeded());
+          dispatch(fetchDatasourceSucceeded());
         },
         error(error) {
-          dispatch(fetchFailed(error.responseJSON.error));
+          dispatch(fetchDatasourceFailed(error.responseJSON.error));
         },
       });
     } else {
-      dispatch(fetchFailed('Please select a datasource'));
+      dispatch(fetchDatasourceFailed('Please select a datasource'));
     }
   };
 }
 
+export function fetchDatasources() {
+  return function (dispatch) {
+    dispatch(fetchDatasourcesStarted());
+    const url = '/superset/datasources/';
+    $.ajax({
+      type: 'GET',
+      url,
+      success: (data) => {
+        dispatch(setDatasources(data));
+        dispatch(fetchDatasourcesSucceeded());
+      },
+      error(error) {
+        dispatch(fetchDatasourcesFailed(error.responseJSON.error));
+      },
+    });
+  };
+}
+
 export const TOGGLE_FAVE_STAR = 'TOGGLE_FAVE_STAR';
 export function toggleFaveStar(isStarred) {
   return { type: TOGGLE_FAVE_STAR, isStarred };
@@ -126,7 +164,7 @@ export function fetchDashboardsSucceeded(choices) {
 
 export const FETCH_DASHBOARDS_FAILED = 'FETCH_DASHBOARDS_FAILED';
 export function fetchDashboardsFailed(userId) {
-  return { type: FETCH_FAILED, userId };
+  return { type: FETCH_DASHBOARDS_FAILED, userId };
 }
 
 export function fetchDashboards(userId) {

diff --git a/superset/assets/javascripts/explorev2/components/ChartContainer.jsx b/superset/assets/javascripts/explorev2/components/ChartContainer.jsx
@@ -43,11 +43,11 @@ class ChartContainer extends React.PureComponent {
   }
 
   renderViz() {
-    console.log('rendering viz');
     const mockSlice = this.getMockedSliceObject();
     this.setState({ mockSlice });
+    visMap[this.props.viz_type](mockSlice, this.props.queryResponse);
     try {
-      visMap[this.props.viz_type](mockSlice, this.props.queryResponse);
+      //visMap[this.props.viz_type](mockSlice, this.props.queryResponse);
     } catch (e) {
       this.props.actions.chartRenderingFailed(e);
     }
@@ -239,20 +239,20 @@ ChartContainer.propTypes = propTypes;
 
 function mapStateToProps(state) {
   return {
-    containerId: `slice-container-${state.viz.form_data.slice_id}`,
-    slice_id: state.viz.form_data.slice_id,
-    slice_name: state.viz.form_data.slice_name,
-    viz_type: state.viz.form_data.viz_type,
-    form_data: state.viz.form_data,
+    containerId: `slice-container-${state.form_data.slice_id}`,
+    slice_id: state.form_data.slice_id,
+    slice_name: state.form_data.slice_name,
+    viz_type: state.form_data.viz_type,
+    form_data: state.form_data,
     can_download: state.can_download,
     chartUpdateStartTime: state.chartUpdateStartTime,
     chartUpdateEndTime: state.chartUpdateEndTime,
-    query: state.viz.query,
-    column_formats: state.viz.column_formats,
+    query: state.query,
+    column_formats: state.datasource ? state.datasource.column_formats : null,
     chartStatus: state.chartStatus,
     isStarred: state.isStarred,
     alert: state.chartAlert,
-    table_name: state.viz.form_data.datasource_name,
+    table_name: state.form_data.datasource_name,
     queryResponse: state.queryResponse,
     datasource_type: state.datasource_type,
   };

diff --git a/superset/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx b/superset/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx
@@ -27,13 +27,6 @@ class ControlPanelsContainer extends React.Component {
     this.getFieldData = this.getFieldData.bind(this);
     this.removeAlert = this.removeAlert.bind(this);
   }
-  componentWillMount() {
-    const datasource_id = this.props.form_data.datasource;
-    const datasource_type = this.props.datasource_type;
-    if (datasource_id) {
-      this.props.actions.fetchDatasourceMetadata(datasource_id, datasource_type);
-    }
-  }
   componentWillReceiveProps(nextProps) {
     if (nextProps.form_data.datasource !== this.props.form_data.datasource) {
       if (nextProps.form_data.datasource) {

diff --git a/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx b/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx
@@ -31,6 +31,13 @@ class ExploreViewContainer extends React.Component {
   componentDidMount() {
     window.addEventListener('resize', this.handleResize.bind(this));
     this.runQuery();
+
+    const datasource_id = this.props.form_data.datasource_id;
+    const datasource_type = this.props.datasource_type;
+    if (datasource_id) {
+      this.props.actions.fetchDatasourceMetadata(datasource_id, datasource_type);
+    }
+    this.props.actions.fetchDatasources();
   }
 
   componentWillReceiveProps(nextProps) {
@@ -156,7 +163,7 @@ function mapStateToProps(state) {
     chartStatus: state.chartStatus,
     datasource_type: state.datasource_type,
     fields: state.fields,
-    form_data: state.viz.form_data,
+    form_data: state.form_data,
   };
 }
 

diff --git a/superset/assets/javascripts/explorev2/components/SelectField.jsx b/superset/assets/javascripts/explorev2/components/SelectField.jsx
@@ -25,13 +25,18 @@ const defaultProps = {
   onChange: () => {},
 };
 
-export default class SelectField extends React.Component {
+export default class SelectField extends React.PureComponent {
   constructor(props) {
     super(props);
-    this.state = { options: this.getOptions() };
+    this.state = { options: this.getOptions(props) };
     this.onChange = this.onChange.bind(this);
     this.renderOption = this.renderOption.bind(this);
   }
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.choices !== this.props.choices) {
+      this.setState({ options: this.getOptions(nextProps) });
+    }
+  }
   onChange(opt) {
     let optionValue = opt ? opt.value : null;
     // if multi, return options values as an array
@@ -40,8 +45,8 @@ export default class SelectField extends React.Component {
     }
     this.props.onChange(optionValue);
   }
-  getOptions() {
-    const options = this.props.choices.map((c) => {
+  getOptions(props) {
+    const options = props.choices.map((c) => {
       const label = c.length > 1 ? c[1] : c[0];
       const newOptions = {
         value: c[0],
@@ -50,19 +55,19 @@ export default class SelectField extends React.Component {
       if (c[2]) newOptions.imgSrc = c[2];
       return newOptions;
     });
-    if (this.props.freeForm) {
+    if (props.freeForm) {
       // For FreeFormSelect, insert value into options if not exist
-      const values = this.props.choices.map((c) => c[0]);
-      if (this.props.value) {
-        if (typeof this.props.value === 'object') {
-          this.props.value.forEach((v) => {
+      const values = props.choices.map((c) => c[0]);
+      if (props.value) {
+        if (typeof props.value === 'object') {
+          props.value.forEach((v) => {
             if (values.indexOf(v) === -1) {
               options.push({ value: v, label: v });
             }
           });
         } else {
-          if (values.indexOf(this.props.value) === -1) {
-            options.push({ value: this.props.value, label: this.props.value });
+          if (values.indexOf(props.value) === -1) {
+            options.push({ value: props.value, label: props.value });
           }
         }
       }
@@ -82,6 +87,10 @@ export default class SelectField extends React.Component {
   }
   render() {
     //  Tab, comma or Enter will trigger a new option created for FreeFormSelect
+    if (this.props.name === 'datasource') {
+      console.log(this.props.name, this.props.choices);
+      console.log(this.props.name, this.state.options);
+    }
     const selectProps = {
       multi: this.props.multi,
       name: `select-${this.props.name}`,

diff --git a/superset/assets/javascripts/explorev2/index.jsx b/superset/assets/javascripts/explorev2/index.jsx
@@ -7,6 +7,7 @@ import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
 import { now } from '../modules/dates';
 import { initEnhancer } from '../reduxUtils';
+import { applyDefaultFormData } from './stores/store';
 
 // jquery and bootstrap required to make bootstrap dropdown menu's work
 const $ = window.$ = require('jquery'); // eslint-disable-line
@@ -15,24 +16,25 @@ require('bootstrap');
 require('./main.css');
 
 import { initialState } from './stores/store';
+import { fields } from './stores/fields';
 
 const exploreViewContainer = document.getElementById('js-explore-view-container');
 const bootstrapData = JSON.parse(exploreViewContainer.getAttribute('data-bootstrap'));
 
 import { exploreReducer } from './reducers/exploreReducer';
-//const bootstrapData.viz.form_data = applyDefaultFormData(bootstrapData.viz.form_data);
+const form_data = applyDefaultFormData(bootstrapData.form_data);
 
 const bootstrappedState = Object.assign(
-  initialState(bootstrapData.viz.form_data.viz_type, bootstrapData.datasource_type), {
-    can_edit: bootstrapData.can_edit,
-    can_download: bootstrapData.can_download,
-    datasources: bootstrapData.datasources,
-    datasource_type: bootstrapData.datasource_type,
-    viz: bootstrapData.viz,
-    user_id: bootstrapData.user_id,
-    chartUpdateStartTime: now(),
-    chartUpdateEndTime: null,
+  bootstrapData, {
     chartStatus: 'loading',
+    chartUpdateEndTime: null,
+    chartUpdateStartTime: now(),
+    dashboards: [],
+    fields,
+    filterColumnOpts: [],
+    form_data,
+    isDatasourceMetaLoading: false,
+    isStarred: false,
     queryResponse: null,
   }
 );
@@ -63,8 +65,7 @@ function getFilters(form_data, datasource_type) {
   return parseFilters(form_data).concat(parseFilters(form_data, 'having'));
 }
 
-bootstrappedState.viz.form_data.filters =
-  getFilters(bootstrappedState.viz.form_data, bootstrapData.datasource_type);
+bootstrappedState.form_data.filters = getFilters(form_data, bootstrapData.datasource_type);
 
 const store = createStore(exploreReducer, bootstrappedState,
   compose(applyMiddleware(thunk), initEnhancer(false))

diff --git a/superset/assets/javascripts/explorev2/reducers/exploreReducer.js b/superset/assets/javascripts/explorev2/reducers/exploreReducer.js
@@ -9,22 +9,44 @@ export const exploreReducer = function (state, action) {
       return Object.assign({}, state, { isStarred: action.isStarred });
     },
 
-    [actions.FETCH_STARTED]() {
+    [actions.FETCH_DATASOURCE_STARTED]() {
       return Object.assign({}, state, { isDatasourceMetaLoading: true });
     },
 
-    [actions.FETCH_SUCCEEDED]() {
+    [actions.FETCH_DATASOURCE_SUCCEEDED]() {
       return Object.assign({}, state, { isDatasourceMetaLoading: false });
     },
 
-    [actions.FETCH_FAILED]() {
+    [actions.FETCH_DATASOURCE_FAILED]() {
       // todo(alanna) handle failure/error state
       return Object.assign({}, state,
         {
           isDatasourceMetaLoading: false,
           controlPanelAlert: action.error,
         });
     },
+    [actions.SET_DATASOURCE]() {
+      return Object.assign({}, state, { datasource: action.datasource });
+    },
+    [actions.FETCH_DATASOURCES_STARTED]() {
+      return Object.assign({}, state, { isDatasourcesLoading: true });
+    },
+
+    [actions.FETCH_DATASOURCES_SUCCEEDED]() {
+      return Object.assign({}, state, { isDatasourcesLoading: false });
+    },
+
+    [actions.FETCH_DATASOURCES_FAILED]() {
+      // todo(alanna) handle failure/error state
+      return Object.assign({}, state,
+        {
+          isDatasourcesLoading: false,
+          controlPanelAlert: action.error,
+        });
+    },
+    [actions.SET_DATASOURCES]() {
+      return Object.assign({}, state, { datasources: action.datasources });
+    },
     [actions.REMOVE_CONTROL_PANEL_ALERT]() {
       return Object.assign({}, state, { controlPanelAlert: null });
     },
@@ -36,17 +58,14 @@ export const exploreReducer = function (state, action) {
       return Object.assign({}, state,
         { saveModalAlert: `fetching dashboards failed for ${action.userId}` });
     },
-    [actions.SET_DATASOURCE]() {
-      return Object.assign({}, state, { datasource: action.datasource });
-    },
     [actions.SET_FIELD_VALUE]() {
-      let newFormData = Object.assign({}, state.viz.form_data);
+      let newFormData = Object.assign({}, state.form_data);
       if (action.fieldName === 'datasource') {
-        newFormData = defaultFormData(state.viz.form_data.viz_type, action.datasource_type);
+        newFormData = defaultFormData(state.form_data.viz_type, action.datasource_type);
         newFormData.datasource_name = action.label;
-        newFormData.slice_id = state.viz.form_data.slice_id;
-        newFormData.slice_name = state.viz.form_data.slice_name;
-        newFormData.viz_type = state.viz.form_data.viz_type;
+        newFormData.slice_id = state.form_data.slice_id;
+        newFormData.slice_name = state.form_data.slice_name;
+        newFormData.viz_type = state.form_data.viz_type;
       }
       newFormData[action.fieldName] = action.value;
 

diff --git a/superset/assets/javascripts/explorev2/stores/store.js b/superset/assets/javascripts/explorev2/stores/store.js
@@ -21,19 +21,6 @@ export function applyDefaultFormData(
   return Object.assign(data, form_data);
 }
 
-// Control Panel fields that re-render chart without need for 'Query button'
-export function initialState(vizType = 'table', datasourceType = 'table') {
-  return {
-    dashboards: [],
-    isDatasourceMetaLoading: false,
-    datasources: null,
-    datasource_type: null,
-    filterColumnOpts: [],
-    fields,
-    isStarred: false,
-  };
-}
-
 export const autoQueryFields = [
   'datasource',
   'viz_type',