Migrate Widget component to React

client/app/components/Parameters.jsx

@@ -113,10 +113,10 @@ export class Parameters extends React.Component {
     this.setState(({ parameters }) => {
       const parametersWithPendingValues = parameters.filter(p => p.hasPendingValue);
       forEach(parameters, p => p.applyPendingValue());
-      onValuesChange(parametersWithPendingValues);
       if (!disableUrlUpdate) {
         updateUrl(parameters);
       }
+      onValuesChange(parametersWithPendingValues);
       return { parameters };
     });
   };

client/app/components/dashboards/DashboardGrid.jsx

@@ -41,6 +41,7 @@ class DashboardGrid extends React.Component {
     widgets: PropTypes.arrayOf(WidgetType).isRequired,
     filters: FiltersType,
     onBreakpointChange: PropTypes.func,
+    onRefreshWidget: PropTypes.func,
     onRemoveWidget: PropTypes.func,
     onLayoutChange: PropTypes.func,
     onParameterMappingsChange: PropTypes.func,
@@ -52,6 +53,7 @@ class DashboardGrid extends React.Component {
   static defaultProps = {
     isPublic: false,
     filters: [],
+    onRefreshWidget: () => {},
     onRemoveWidget: () => {},
     onLayoutChange: () => {},
     onBreakpointChange: () => {},
@@ -174,7 +176,8 @@ class DashboardGrid extends React.Component {
 
   render() {
     const className = cx('dashboard-wrapper', this.props.isEditing ? 'editing-mode' : 'preview-mode');
-    const { onRemoveWidget, onParameterMappingsChange, filters, dashboard, isPublic, widgets } = this.props;
+    const { onRefreshWidget, onRemoveWidget, onParameterMappingsChange,
+      filters, dashboard, isPublic, widgets } = this.props;
 
     return (
       <div className={className}>
@@ -212,6 +215,7 @@ class DashboardGrid extends React.Component {
                   <VisualizationWidget
                     {...widgetProps}
                     dashboard={dashboard}
+                    onRefresh={() => onRefreshWidget(widget)}
                     onParameterMappingsChange={onParameterMappingsChange}
                   />
                 )}

client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx

@@ -6,7 +6,6 @@ import cx from 'classnames';
 import Menu from 'antd/lib/menu';
 import { currentUser } from '@/services/auth';
 import recordEvent from '@/services/recordEvent';
-import { $location } from '@/services/ng';
 import { formatDateTime } from '@/filters/datetime';
 import HtmlContent from '@/components/HtmlContent';
 import { Parameters } from '@/components/Parameters';
@@ -155,6 +154,7 @@ class VisualizationWidget extends React.Component {
     filters: FiltersType,
     isPublic: PropTypes.bool,
     canEdit: PropTypes.bool,
+    onRefresh: PropTypes.func,
     onDelete: PropTypes.func,
     onParameterMappingsChange: PropTypes.func,
   };
@@ -163,37 +163,22 @@ class VisualizationWidget extends React.Component {
     filters: [],
     isPublic: false,
     canEdit: false,
+    onRefresh: () => {},
     onDelete: () => {},
     onParameterMappingsChange: () => {},
   };
 
   constructor(props) {
     super(props);
-    const widgetQueryResult = props.widget.getQueryResult();
-    const widgetStatus = widgetQueryResult && widgetQueryResult.getStatus();
-
-    this.state = { widgetStatus, localParameters: props.widget.getLocalParameters() };
+    this.state = { localParameters: props.widget.getLocalParameters() };
   }
 
   componentDidMount() {
     const { widget } = this.props;
     recordEvent('view', 'query', widget.visualization.query.id, { dashboard: true });
     recordEvent('view', 'visualization', widget.visualization.id, { dashboard: true });
-    this.loadWidget();
   }
 
-  loadWidget = (refresh = false) => {
-    const { widget } = this.props;
-    const maxAge = $location.search().maxAge;
-    return widget.load(refresh, maxAge).then(({ status }) => {
-      this.setState({ widgetStatus: status });
-    }).catch(() => {
-      this.setState({ widgetStatus: 'failed' });
-    });
-  };
-
-  refreshWidget = () => this.loadWidget(true);
-
   expandWidget = () => {
     ExpandedWidgetDialog.showModal({ widget: this.props.widget });
   };
@@ -215,8 +200,8 @@ class VisualizationWidget extends React.Component {
 
   renderVisualization() {
     const { widget, filters } = this.props;
-    const { widgetStatus } = this.state;
     const widgetQueryResult = widget.getQueryResult();
+    const widgetStatus = widgetQueryResult && widgetQueryResult.getStatus();
     switch (widgetStatus) {
       case 'failed':
         return (
@@ -250,7 +235,7 @@ class VisualizationWidget extends React.Component {
   }
 
   render() {
-    const { widget, isPublic, canEdit } = this.props;
+    const { widget, isPublic, canEdit, onRefresh } = this.props;
     const { localParameters } = this.state;
     const widgetQueryResult = widget.getQueryResult();
     const isRefreshing = widget.loading && !!(widgetQueryResult && widgetQueryResult.getStatus());
@@ -266,14 +251,14 @@ class VisualizationWidget extends React.Component {
           <VisualizationWidgetHeader
             widget={widget}
             parameters={localParameters}
-            onParametersUpdate={this.refreshWidget}
+            onParametersUpdate={onRefresh}
           />
         )}
         footer={(
           <VisualizationWidgetFooter
             widget={widget}
             isPublic={isPublic}
-            onRefresh={this.refreshWidget}
+            onRefresh={onRefresh}
             onExpand={this.expandWidget}
           />
         )}

client/app/pages/dashboards/dashboard.html

@@ -111,6 +111,7 @@ <h3>
       refreshing-widgets="$ctrl.refreshingWidgets"
       on-layout-change="$ctrl.onLayoutChange"
       on-breakpoint-change="$ctrl.onBreakpointChanged"
+      on-refresh-widget="$ctrl.refreshWidget"
       on-remove-widget="$ctrl.removeWidget"
       on-parameter-mappings-change="$ctrl.extractGlobalParameters"
     />

client/app/pages/dashboards/dashboard.js

@@ -134,6 +134,14 @@ function DashboardCtrl(
     this.globalParameters = this.dashboard.getParametersDefs();
   };
 
+  this.loadWidget = (widget, forceRefresh) => {
+    widget.getParametersDefs(); // Force widget to read parameters values from URL
+    this.refreshingWidgets += 1;
+    return widget.load(forceRefresh).finally(() => { this.refreshingWidgets -= 1; });
+  };
+
+  this.refreshWidget = widget => this.loadWidget(widget, true);
+
   const collectFilters = (dashboard, forceRefresh, updatedParameters = []) => {
     const affectedWidgets = updatedParameters.length > 0 ? this.dashboard.widgets.filter(
       widget => Object.values(widget.getParameterMappings()).filter(
@@ -143,11 +151,7 @@ function DashboardCtrl(
       ),
     ) : this.dashboard.widgets;
 
-    const queryResultPromises = _.compact(affectedWidgets.map((widget) => {
-      widget.getParametersDefs(); // Force widget to read parameters values from URL
-      this.refreshingWidgets += 1;
-      return widget.load(forceRefresh).finally(() => { this.refreshingWidgets -= 1; });
-    }));
+    const queryResultPromises = _.compact(affectedWidgets.map(widget => this.loadWidget(widget, forceRefresh)));
 
     return $q.all(queryResultPromises).then((queryResults) => {
       this.filters = collectDashboardFilters(dashboard, queryResults, $location.search());