Add: global parameters for dashboards

client/app/components/parameter-settings.html

@@ -18,5 +18,9 @@ <h4 class="modal-title">{{$ctrl.parameter.name}}</h4>
           <option value="datetime-with-seconds">Date and Time (with seconds)</option>
         </select>
       </div>
+      <div class="form-group">
+        <label>Global</label>
+        <input type="checkbox" class="form-inline" ng-model="$ctrl.parameter.global">
+      </div>
     </div>
 </div>

client/app/components/parameters.js

@@ -23,12 +23,16 @@ function ParametersDirective($location, $uibModal) {
       parameters: '=',
       syncValues: '=?',
       editable: '=?',
+      changed: '&onChange',
     },
     template,
     link(scope) {
       // is this the correct location for this logic?
       if (scope.syncValues !== false) {
         scope.$watch('parameters', () => {
+          if (scope.changed) {
+            scope.changed({});
+          }
           scope.parameters.forEach((param) => {
             if (param.value !== null || param.value !== '') {
               $location.search(`p_${param.name}`, param.value);

client/app/pages/dashboards/dashboard.html

@@ -54,11 +54,15 @@ <h3>
     This dashboard is archived and won't appear in the dashboards list or search results.
   </div>
 
+  <div class="m-b-5">
+    <parameters parameters="$ctrl.globalParameters" on-change="$ctrl.onGlobalParametersChange()"></parameters>
+  </div>
+
   <div class="m-b-5">
     <filters ng-if="$ctrl.dashboard.dashboard_filters_enabled" filters="$ctrl.filters" on-change="$ctrl.filtersOnChange(filter, $modal)"></filters>
   </div>
 
   <div ng-repeat="row in $ctrl.dashboard.widgets" class="row">
-    <dashboard-widget ng-repeat="widget in row" widget="widget" dashboard="$ctrl.dashboard"></dashboard-widget>
+    <dashboard-widget ng-repeat="widget in row" widget="widget" dashboard="$ctrl.dashboard" on-delete="$ctrl.extractGlobalParameters()"></dashboard-widget>
   </div>
 </div>

client/app/pages/dashboards/dashboard.js

@@ -8,6 +8,7 @@ function DashboardCtrl($rootScope, $routeParams, $location, $timeout, $q, $uibMo
   this.refreshRate = null;
   this.showPermissionsControl = clientConfig.showPermissionsControl;
   this.currentUser = currentUser;
+  this.globalParameters = [];
   this.refreshRates = [
     { name: '10 seconds', rate: 10 },
     { name: '30 seconds', rate: 30 },
@@ -26,6 +27,30 @@ function DashboardCtrl($rootScope, $routeParams, $location, $timeout, $q, $uibMo
     }
   };
 
+  this.extractGlobalParameters = () => {
+    let globalParams = {};
+    this.dashboard.widgets.forEach(row =>
+      row.forEach((widget) => {
+        widget.getQuery().getParametersDefs().filter(p => p.global).forEach((param) => {
+          const defaults = {};
+          defaults[param.name] = _.clone(param);
+          defaults[param.name].locals = [];
+          globalParams = _.defaults(globalParams, defaults);
+          globalParams[param.name].locals.push(param);
+        });
+      })
+    );
+    this.globalParameters = _.values(globalParams);
+  };
+
+  this.onGlobalParametersChange = () => {
+    this.globalParameters.forEach((global) => {
+      global.locals.forEach((local) => {
+        local.value = global.value;
+      });
+    });
+  };
+
   const renderDashboard = (dashboard, force) => {
     Title.set(dashboard.name);
     const promises = [];
@@ -42,6 +67,8 @@ function DashboardCtrl($rootScope, $routeParams, $location, $timeout, $q, $uibMo
        })
     );
 
+    this.extractGlobalParameters();
+
     $q.all(promises).then((queryResults) => {
       const filters = {};
       queryResults.forEach((queryResult) => {
@@ -139,7 +166,7 @@ function DashboardCtrl($rootScope, $routeParams, $location, $timeout, $q, $uibMo
       resolve: {
         dashboard: () => this.dashboard,
       },
-    });
+    }).result.then(() => this.extractGlobalParameters());
   };
 
   this.toggleFullscreen = () => {

client/app/pages/dashboards/widget.html

@@ -25,7 +25,7 @@
           </div>
         </div>
 
-        <parameters parameters="$ctrl.widget.query.getParametersDefs()"></parameters>
+        <parameters parameters="$ctrl.localParametersDefs()"></parameters>
 
         <div ng-switch="$ctrl.queryResult.getStatus()">
           <div ng-switch-when="failed">

client/app/pages/dashboards/widget.js

@@ -36,6 +36,13 @@ function DashboardWidgetCtrl($location, $uibModal, $window, Events, currentUser)
     });
   };
 
+  this.localParametersDefs = () => {
+    if (!this.localParameters) {
+      this.localParameters = this.widget.query.getParametersDefs().filter(p => !p.global);
+    }
+    return this.localParameters;
+  };
+
   this.deleteWidget = () => {
     if (!$window.confirm(`Are you sure you want to remove "${this.widget.getName()}" from the dashboard?`)) {
       return;
@@ -51,6 +58,10 @@ function DashboardWidgetCtrl($location, $uibModal, $window, Events, currentUser)
 
       this.dashboard.layout = response.layout;
       this.dashboard.version = response.version;
+
+      if (this.deleted) {
+        this.deleted({});
+      }
     });
   };
 
@@ -88,6 +99,7 @@ export default function (ngModule) {
       widget: '<',
       public: '<',
       dashboard: '<',
+      deleted: '&onDelete',
     },
   });
 }

client/app/services/query.js

@@ -78,6 +78,7 @@ class Parameters {
           name: param,
           type: 'text',
           value: null,
+          global: false,
         });
       }
     });