Allow Parameters on Public Dashboards

client/app/pages/dashboards/ShareDashboardDialog.jsx

@@ -16,7 +16,7 @@ const API_SHARE_URL = 'api/dashboards/{id}/share';
 class ShareDashboardDialog extends React.Component {
   static propTypes = {
     dashboard: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-    hasQueryParams: PropTypes.bool.isRequired,
+    hasOnlySafeQueries: PropTypes.bool.isRequired,
     dialog: DialogPropType.isRequired,
   };
 
@@ -35,7 +35,7 @@ class ShareDashboardDialog extends React.Component {
     };
 
     this.apiUrl = replace(API_SHARE_URL, '{id}', dashboard.id);
-    this.disabled = this.props.hasQueryParams && !dashboard.publicAccessEnabled;
+    this.enabled = this.props.hasOnlySafeQueries || dashboard.publicAccessEnabled;
   }
 
   static get headerContent() {
@@ -104,10 +104,10 @@ class ShareDashboardDialog extends React.Component {
         footer={null}
       >
         <Form layout="horizontal">
-          {this.props.hasQueryParams && (
+          {!this.props.hasOnlySafeQueries && (
             <Form.Item>
               <Alert
-                message="Sharing is currently not supported for dashboards containing queries with parameters."
+                message="For your security, sharing is currently not supported for dashboards containing queries with text parameters. Consider changing the text parameters in your query to a different type."
                 type="error"
               />
             </Form.Item>
@@ -117,12 +117,13 @@ class ShareDashboardDialog extends React.Component {
               checked={dashboard.publicAccessEnabled}
               onChange={this.onChange}
               loading={this.state.saving}
-              disabled={this.disabled}
+              disabled={!this.enabled}
+              data-test="PublicAccessEnabled"
             />
           </Form.Item>
           {dashboard.public_url && (
             <Form.Item label="Secret address" {...this.formItemProps}>
-              <InputWithCopy value={dashboard.public_url} />
+              <InputWithCopy value={dashboard.public_url} data-test="SecretAddress" />
             </Form.Item>
           )}
         </Form>

client/app/pages/dashboards/dashboard.html

@@ -67,7 +67,7 @@ <h3>
           <button type="button" class="btn btn-sm hidden-xs" ng-class="{'btn-default': !$ctrl.isFullscreen, 'btn-primary': $ctrl.isFullscreen}" tooltip="Enable/Disable Fullscreen display" ng-click="$ctrl.toggleFullscreen()" ng-if="!$ctrl.dashboard.is_draft && !$ctrl.layoutEditing">
             <span class="zmdi zmdi-fullscreen"></span>
           </button>
-          <button type="button" class="btn btn-sm hidden-xs" ng-class="{'btn-default': !$ctrl.dashboard.publicAccessEnabled, 'btn-primary': $ctrl.dashboard.publicAccessEnabled}" tooltip="Enable/Disable Share URL" ng-click="$ctrl.openShareForm()" ng-if="($ctrl.dashboard.canEdit() || $ctrl.dashboard.publicAccessEnabled) && !$ctrl.dashboard.is_draft && !$ctrl.layoutEditing">
+          <button type="button" class="btn btn-sm hidden-xs" ng-class="{'btn-default': !$ctrl.dashboard.publicAccessEnabled, 'btn-primary': $ctrl.dashboard.publicAccessEnabled}" tooltip="Enable/Disable Share URL" ng-click="$ctrl.openShareForm()" ng-if="($ctrl.dashboard.canEdit() || $ctrl.dashboard.publicAccessEnabled) && !$ctrl.dashboard.is_draft && !$ctrl.layoutEditing" data-test="OpenShareForm">
             <span class="zmdi zmdi-share"></span>
           </button>
       </span>

client/app/pages/dashboards/dashboard.js

@@ -381,15 +381,14 @@ function DashboardCtrl(
   }
 
   this.openShareForm = () => {
-    // check if any of the wigets have query parameters
-    const hasQueryParams = _.some(
+    const hasOnlySafeQueries = _.every(
       this.dashboard.widgets,
-      w => !_.isEmpty(w.getQuery() && w.getQuery().getParametersDefs()),
+      w => (w.getQuery() ? w.getQuery().is_safe : true),
     );
 
     ShareDashboardDialog.showModal({
       dashboard: this.dashboard,
-      hasQueryParams,
+      hasOnlySafeQueries,
     });
   };
 }

client/app/pages/dashboards/public-dashboard-page.html

@@ -1,6 +1,10 @@
-<div class="container p-t-10 p-b-20">
+<div class="container p-t-10 p-b-20" ng-if="$ctrl.dashboard">
   <page-header title="$ctrl.dashboard.name"></page-header>
 
+  <div class="m-b-10 p-15 bg-white tiled" ng-if="$ctrl.globalParameters.length > 0">
+    <parameters parameters="$ctrl.globalParameters" on-values-change="$ctrl.refreshDashboard"></parameters>
+  </div>
+
   <div class="m-b-5">
     <filters filters="$ctrl.filters" on-change="$ctrl.filtersOnChange"></filters>
   </div>

client/app/pages/dashboards/public-dashboard-page.js

@@ -25,41 +25,47 @@ const PublicDashboardPage = {
 
     this.logoUrl = logoUrl;
     this.public = true;
-    this.dashboard.widgets = Dashboard.prepareDashboardWidgets(this.dashboard.widgets);
+    this.globalParameters = [];
+
+    this.extractGlobalParameters = () => {
+      this.globalParameters = this.dashboard.getParametersDefs();
+    };
 
     const refreshRate = Math.max(30, parseFloat($location.search().refresh));
 
-    if (refreshRate) {
-      const refresh = () => {
-        loadDashboard($http, $route).then((data) => {
-          this.dashboard = data;
-          this.dashboard.widgets = Dashboard.prepareDashboardWidgets(this.dashboard.widgets);
-          this.dashboard.widgets.forEach(widget => widget.load());
+    this.refreshDashboard = () => {
+      loadDashboard($http, $route).then((data) => {
+        this.dashboard = new Dashboard(data);
+        this.dashboard.widgets = Dashboard.prepareDashboardWidgets(this.dashboard.widgets);
+        this.dashboard.widgets.forEach((widget) => {
+          widget.load(!!refreshRate).catch((error) => {
+            const isSafe = widget.getQuery() ? widget.getQuery().is_safe : true;
+            if (!isSafe) {
+              error.errorMessage = 'This query contains potentially unsafe parameters and cannot be executed on a publicly shared dashboard.';
+            }
+          });
+        });
+        this.filters = []; // TODO: implement (@/services/dashboard.js:collectDashboardFilters)
+        this.filtersOnChange = (allFilters) => {
+          this.filters = allFilters;
+          $scope.$applyAsync();
+        };
 
-          this.filters = []; // TODO: implement (@/services/dashboard.js:collectDashboardFilters)
-          this.filtersOnChange = (allFilters) => {
-            this.filters = allFilters;
-            $scope.$applyAsync();
-          };
+        this.extractGlobalParameters();
+      });
 
-          $timeout(refresh, refreshRate * 1000.0);
-        });
-      };
+      if (refreshRate) {
+        $timeout(this.refreshDashboard, refreshRate * 1000.0);
+      }
+    };
 
-      $timeout(refresh, refreshRate * 1000.0);
-    }
+    this.refreshDashboard();
   },
 };
 
 export default function init(ngModule) {
   ngModule.component('publicDashboardPage', PublicDashboardPage);
 
-  function loadPublicDashboard($http, $route) {
-    'ngInject';
-
-    return loadDashboard($http, $route);
-  }
-
   function session($http, $route, Auth) {
     const token = $route.current.params.token;
     Auth.setApiKey(token);
@@ -68,10 +74,9 @@ export default function init(ngModule) {
 
   ngModule.config(($routeProvider) => {
     $routeProvider.when('/public/dashboards/:token', {
-      template: '<public-dashboard-page dashboard="$resolve.dashboard"></public-dashboard-page>',
+      template: '<public-dashboard-page></public-dashboard-page>',
       reloadOnSearch: false,
       resolve: {
-        dashboard: loadPublicDashboard,
         session,
       },
     });

client/app/services/dashboard.js

@@ -183,7 +183,6 @@ function DashboardService($resource, $http, $location, currentUser) {
 
   resource.prepareDashboardWidgets = prepareDashboardWidgets;
   resource.prepareWidgetsForDashboard = prepareWidgetsForDashboard;
-
   resource.prototype.getParametersDefs = function getParametersDefs() {
     const globalParams = {};
     const queryParams = $location.search();
@@ -192,7 +191,7 @@ function DashboardService($resource, $http, $location, currentUser) {
         const mappings = widget.getParameterMappings();
         widget
           .getQuery()
-          .getParametersDefs()
+          .getParametersDefs(false)
           .forEach((param) => {
             const mapping = mappings[param.name];
             if (mapping.type === Widget.MappingType.DashboardLevel) {

client/app/services/query.js

@@ -219,25 +219,32 @@ class Parameters {
   }
 
   parseQuery() {
+    const fallback = () => map(this.query.options.parameters, i => i.name);
+
     let parameters = [];
-    try {
-      const parts = Mustache.parse(this.query.query);
-      parameters = uniq(collectParams(parts));
-    } catch (e) {
-      logger('Failed parsing parameters: ', e);
-      // Return current parameters so we don't reset the list
-      parameters = map(this.query.options.parameters, i => i.name);
+    if (this.query.query) {
+      try {
+        const parts = Mustache.parse(this.query.query);
+        parameters = uniq(collectParams(parts));
+      } catch (e) {
+        logger('Failed parsing parameters: ', e);
+        // Return current parameters so we don't reset the list
+        parameters = fallback();
+      }
+    } else {
+      parameters = fallback();
     }
+
     return parameters;
   }
 
-  updateParameters() {
-    if (this.query.query === this.cachedQueryText) {
+  updateParameters(update) {
+    if (this.query.query && this.query.query === this.cachedQueryText) {
       return;
     }
 
     this.cachedQueryText = this.query.query;
-    const parameterNames = this.parseQuery();
+    const parameterNames = update ? this.parseQuery() : map(this.query.options.parameters, p => p.name);
 
     this.query.options.parameters = this.query.options.parameters || [];
 
@@ -269,8 +276,8 @@ class Parameters {
     });
   }
 
-  get() {
-    this.updateParameters();
+  get(update = true) {
+    this.updateParameters(update);
     return this.query.options.parameters;
   }
 
@@ -478,10 +485,6 @@ function QueryResource(
   };
 
   QueryService.prototype.prepareQueryResultExecution = function prepareQueryResultExecution(execute, maxAge) {
-    if (!this.query) {
-      return new QueryResultError("Can't execute empty query.");
-    }
-
     const parameters = this.getParameters();
     const missingParams = parameters.getMissing();
 
@@ -517,10 +520,8 @@ function QueryResource(
       if (!this.queryResult) {
         this.queryResult = QueryResult.getById(this.id, this.latest_query_data_id);
       }
-    } else if (this.data_source_id) {
-      this.queryResult = execute();
     } else {
-      return new QueryResultError('Please select data source to run this query.');
+      this.queryResult = execute();
     }
 
     return this.queryResult;
@@ -533,6 +534,10 @@ function QueryResource(
 
   QueryService.prototype.getQueryResultByText = function getQueryResultByText(maxAge, selectedQueryText) {
     const queryText = selectedQueryText || this.query;
+    if (!queryText) {
+      return new QueryResultError("Can't execute empty query.");
+    }
+
     const parameters = this.getParameters().getValues();
     const execute = () => QueryResult.get(this.data_source_id, queryText, parameters, maxAge, this.id);
     return this.prepareQueryResultExecution(execute, maxAge);
@@ -576,8 +581,8 @@ function QueryResource(
     return this.$parameters;
   };
 
-  QueryService.prototype.getParametersDefs = function getParametersDefs() {
-    return this.getParameters().get();
+  QueryService.prototype.getParametersDefs = function getParametersDefs(update = true) {
+    return this.getParameters().get(update);
   };
 
   return QueryService;

client/app/services/widget.js

@@ -212,7 +212,7 @@ function WidgetFactory($http, $location, Query) {
 
       const existingParams = {};
       // textboxes does not have query
-      const params = this.getQuery() ? this.getQuery().getParametersDefs() : [];
+      const params = this.getQuery() ? this.getQuery().getParametersDefs(false) : [];
       each(params, (param) => {
         existingParams[param.name] = true;
         if (!isObject(this.options.parameterMappings[param.name])) {