Dashboard: when updating parameters, run only relevant queries (#3804)

* refresh only affected queries in dashboard when parameters are changed * rename pendingParameters to updatedParameters * select which widgets to update according to their mapping as a dashboard-level parameter * use lodash's include
getredash · Oct 27, 2019 · 61a80ad · 61a80ad
1 parent cbfd994
commit 61a80ad
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 6 deletions.
diff --git a/client/app/components/Parameters.jsx b/client/app/components/Parameters.jsx
@@ -111,8 +111,9 @@ export class Parameters extends React.Component {
   applyChanges = () => {
     const { onValuesChange, disableUrlUpdate } = this.props;
     this.setState(({ parameters }) => {
+      const parametersWithPendingValues = parameters.filter(p => p.hasPendingValue);
       forEach(parameters, p => p.applyPendingValue());
-      onValuesChange();
+      onValuesChange(parametersWithPendingValues);
       if (!disableUrlUpdate) {
         updateUrl(parameters);
       }

diff --git a/client/app/components/dashboards/widget.html b/client/app/components/dashboards/widget.html
@@ -44,7 +44,7 @@
         </div>
       </div>
       <div class="m-b-10" ng-if="$ctrl.localParametersDefs().length > 0">
-        <parameters parameters="$ctrl.localParametersDefs()" on-values-change="$ctrl.refresh"></parameters>
+        <parameters parameters="$ctrl.localParametersDefs()" on-values-change="$ctrl.forceRefresh"></parameters>
       </div>
     </div>
 

diff --git a/client/app/components/dashboards/widget.js b/client/app/components/dashboards/widget.js
@@ -92,6 +92,8 @@ function DashboardWidgetCtrl($scope, $location, $uibModal, $window, $rootScope,
     return this.widget.load(refresh, maxAge);
   };
 
+  this.forceRefresh = () => this.load(true);
+
   this.refresh = (buttonId) => {
     this.refreshClickButtonId = buttonId;
     this.load(true).finally(() => {

diff --git a/client/app/pages/dashboards/dashboard.js b/client/app/pages/dashboards/dashboard.js
@@ -137,8 +137,16 @@ function DashboardCtrl(
     this.extractGlobalParameters();
   });
 
-  const collectFilters = (dashboard, forceRefresh) => {
-    const queryResultPromises = _.compact(this.dashboard.widgets.map((widget) => {
+  const collectFilters = (dashboard, forceRefresh, updatedParameters = []) => {
+    const affectedWidgets = updatedParameters.length > 0 ? this.dashboard.widgets.filter(
+      widget => Object.values(widget.getParameterMappings()).filter(
+        ({ type }) => type === 'dashboard-level',
+      ).some(
+        ({ mapTo }) => _.includes(updatedParameters.map(p => p.name), mapTo),
+      ),
+    ) : this.dashboard.widgets;
+
+    const queryResultPromises = _.compact(affectedWidgets.map((widget) => {
       widget.getParametersDefs(); // Force widget to read parameters values from URL
       return widget.load(forceRefresh);
     }));
@@ -202,9 +210,9 @@ function DashboardCtrl(
 
   this.loadDashboard();
 
-  this.refreshDashboard = () => {
+  this.refreshDashboard = (parameters) => {
     this.refreshInProgress = true;
-    collectFilters(this.dashboard, true).finally(() => {
+    collectFilters(this.dashboard, true, parameters).finally(() => {
       this.refreshInProgress = false;
     });
   };