Parameter feedback - #3 Added in Widgets

client/app/components/ParameterValueInput.jsx

@@ -5,7 +5,7 @@ import Input from 'antd/lib/input';
 import InputNumber from 'antd/lib/input-number';
 import DateParameter from '@/components/dynamic-parameters/DateParameter';
 import DateRangeParameter from '@/components/dynamic-parameters/DateRangeParameter';
-import { isEqual } from 'lodash';
+import { isEqual, trim } from 'lodash';
 import { QueryBasedParameterInput } from './QueryBasedParameterInput';
 
 import './ParameterValueInput.less';
@@ -59,7 +59,7 @@ class ParameterValueInput extends React.Component {
   }
 
   onSelect = (value) => {
-    const isDirty = !isEqual(value, this.props.value);
+    const isDirty = !isEqual(trim(value), trim(this.props.value));
     this.setState({ value, isDirty });
     this.props.onSelect(value, isDirty);
   }
@@ -140,13 +140,11 @@ class ParameterValueInput extends React.Component {
     const { className } = this.props;
     const { value } = this.state;
 
-    const normalize = val => (isNaN(val) ? undefined : val);
-
     return (
       <InputNumber
         className={className}
-        value={normalize(value)}
-        onChange={val => this.onSelect(normalize(val))}
+        value={value}
+        onChange={val => this.onSelect(val)}
       />
     );
   }

client/app/components/Parameters.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { size, filter, forEach, extend, get } from 'lodash';
+import { size, filter, forEach, extend, get, includes } from 'lodash';
 import { react2angular } from 'react2angular';
 import { SortableContainer, SortableElement, DragHandle } from '@/components/sortable';
 import { $location } from '@/services/ng';
@@ -34,6 +34,7 @@ export class Parameters extends React.Component {
     queryResultErrorData: PropTypes.shape({
       parameters: PropTypes.objectOf(PropTypes.string),
     }),
+    unsavedParameters: PropTypes.arrayOf(PropTypes.string),
   };
 
   static defaultProps = {
@@ -44,6 +45,7 @@ export class Parameters extends React.Component {
     onPendingValuesChange: () => {},
     onParametersEdit: () => {},
     queryResultErrorData: {},
+    unsavedParameters: null,
   };
 
   constructor(props) {
@@ -140,7 +142,22 @@ export class Parameters extends React.Component {
     const { queryResultErrorData } = this.props;
     const error = get(queryResultErrorData, ['parameters', param.name], false);
     if (error) {
-      return [error, 'error'];
+      const feedback = <Tooltip title={error}>{error}</Tooltip>;
+      return [feedback, 'error'];
+    }
+
+    // unsaved
+    const { unsavedParameters } = this.props;
+    if (includes(unsavedParameters, param.name)) {
+      const feedback = (
+        <>
+          Unsaved{' '}
+          <Tooltip title='Click the "Save" button to preserve this parameter.'>
+            <i className="fa fa-question-circle" />
+          </Tooltip>
+        </>
+      );
+      return [feedback, 'warning'];
     }
 
     return [];
@@ -172,7 +189,7 @@ export class Parameters extends React.Component {
         </div>
         <Form.Item
           validateStatus={touched ? '' : status}
-          help={feedback ? <Tooltip title={feedback}>{feedback}</Tooltip> : null}
+          help={feedback || null}
         >
           <ParameterValueInput
             type={param.type}

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

@@ -75,6 +75,8 @@ RefreshIndicator.defaultProps = { refreshStartedAt: null };
 
 function VisualizationWidgetHeader({ widget, refreshStartedAt, parameters, onParametersUpdate }) {
   const canViewQuery = currentUser.hasPermission('view_query');
+  const queryResult = widget.getQueryResult();
+  const errorData = queryResult && queryResult.getErrorData();
 
   return (
     <>
@@ -90,8 +92,8 @@ function VisualizationWidgetHeader({ widget, refreshStartedAt, parameters, onPar
         </div>
       </div>
       {!isEmpty(parameters) && (
-        <div className="m-b-10">
-          <Parameters parameters={parameters} onValuesChange={onParametersUpdate} />
+        <div className="m-b-5">
+          <Parameters parameters={parameters} queryResultErrorData={errorData} onValuesChange={onParametersUpdate} />
         </div>
       )}
     </>

client/app/components/queries/visualization-embed.html

@@ -13,7 +13,7 @@ <h3>
 
   <div class="col-md-12 query__vis">
     <div class="p-t-15 p-b-10" ng-if="$ctrl.query.hasParameters() && !$ctrl.hideParametersUI">
-      <parameters parameters="$ctrl.query.getParametersDefs()" on-values-change="$ctrl.refreshQueryResults"></parameters>
+      <parameters parameters="$ctrl.query.getParametersDefs()" query-result-error-data="$ctrl.errorData" on-values-change="$ctrl.refreshQueryResults"></parameters>
     </div>
 
     <div ng-if="$ctrl.error">

client/app/components/queries/visualization-embed.js

@@ -14,6 +14,7 @@ const VisualizationEmbed = {
     this.refreshQueryResults = () => {
       this.loading = true;
       this.error = null;
+      this.errorData = {};
       this.refreshStartedAt = moment();
       this.query
         .getQueryResultPromise()
@@ -24,6 +25,7 @@ const VisualizationEmbed = {
         .catch((error) => {
           this.loading = false;
           this.error = error.getError();
+          this.errorData = error.getErrorData();
         });
     };
 

client/app/pages/dashboards/dashboard.html

@@ -93,8 +93,8 @@ <h3>
     </label>
   </div>
 
-  <div class="m-b-10 p-15 bg-white tiled" ng-if="$ctrl.globalParameters.length > 0" data-test="DashboardParameters">
-    <parameters parameters="$ctrl.globalParameters" on-values-change="$ctrl.refreshDashboard"></parameters>
+  <div class="m-b-10 p-t-15 p-l-15 p-r-15 p-b-5 bg-white tiled" ng-if="$ctrl.globalParameters.length > 0" data-test="DashboardParameters">
+    <parameters parameters="$ctrl.globalParameters" query-result-error-data="$ctrl.dashboard.getQueryResultsErrorData()" on-values-change="$ctrl.refreshDashboard"></parameters>
   </div>
 
   <div class="m-b-10 p-15 bg-white tiled" ng-if="$ctrl.filters | notEmpty">

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

@@ -1,8 +1,8 @@
 <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 class="m-b-10 p-t-15 p-l-15 p-r-15 p-b-5 bg-white tiled" ng-if="$ctrl.globalParameters.length > 0">
+    <parameters parameters="$ctrl.globalParameters" query-result-error-data="$ctrl.dashboard.getQueryResultsErrorData()" on-values-change="$ctrl.refreshDashboard"></parameters>
   </div>
 
   <div class="m-b-5">

client/app/pages/queries/query.html

@@ -200,7 +200,7 @@ <h3>
             <div class="d-flex flex-column p-b-15 p-absolute static-position__mobile" style="left: 0; top: 0; right: 0; bottom: 0;">
               <div class="p-t-15 p-b-5" ng-if="query.hasParameters()">
                 <parameters parameters="query.getParametersDefs()" query-result-error-data="queryResult.getErrorData()" editable="sourceMode && canEdit" disable-url-update="query.isNew()"
-                  on-values-change="executeQuery" on-pending-values-change="applyParametersChanges" on-parameters-edit="onParametersUpdated"></parameters>
+                  on-values-change="executeQuery" on-pending-values-change="applyParametersChanges" on-parameters-edit="onParametersUpdated" unsaved-parameters="getUnsavedParameters()"></parameters>
               </div>
               <!-- Query Execution Status -->
 

client/app/pages/queries/source-view.js

@@ -1,4 +1,4 @@
-import { map, debounce } from 'lodash';
+import { map, debounce, isEmpty, isEqual } from 'lodash';
 import template from './query.html';
 import EditParameterSettingsDialog from '@/components/EditParameterSettingsDialog';
 
@@ -109,6 +109,22 @@ function QuerySourceCtrl(
   $scope.$watch('query.query', (newQueryText) => {
     $scope.isDirty = newQueryText !== queryText;
   });
+
+  $scope.unsavedParameters = null;
+  $scope.getUnsavedParameters = () => {
+    if (!$scope.isDirty || !queryText) {
+      return null;
+    }
+    const unsavedParameters = $scope.query.$parameters.getUnsavedParameters(queryText);
+    if (isEmpty(unsavedParameters)) {
+      return null;
+    }
+    // avoiding Angular infdig (ANGULAR_REMOVE_ME)
+    if (!isEqual(unsavedParameters, $scope.unsavedParameters)) {
+      $scope.unsavedParameters = unsavedParameters;
+    }
+    return $scope.unsavedParameters;
+  };
 }
 
 export default function init(ngModule) {

client/app/services/dashboard.js

@@ -249,6 +249,39 @@ function DashboardService($resource, $http, $location, currentUser) {
     });
   };
 
+  let currentQueryResultsErrorData; // swap for useMemo ANGULAR_REMOVE_ME
+  resource.prototype.getQueryResultsErrorData = function getQueryResultsErrorData() {
+    const dashboardErrors = _.map(this.widgets, (widget) => {
+      // get result
+      const result = widget.getQueryResult();
+      if (!result) {
+        return null;
+      }
+
+      // get error data
+      const errorData = result.getErrorData();
+      if (_.isEmpty(errorData)) {
+        return null;
+      }
+
+      // dashboard params only
+      const localParamNames = _.map(widget.getLocalParameters(), p => p.name);
+      const filtered = _.omit(errorData.parameters, localParamNames);
+
+      return filtered;
+    });
+
+    const merged = _.assign({}, ...dashboardErrors);
+    const errorData = _.isEmpty(merged) ? null : { parameters: merged };
+
+    // avoiding Angular infdig (ANGULAR_REMOVE_ME)
+    if (!_.isEqual(currentQueryResultsErrorData, errorData)) {
+      currentQueryResultsErrorData = errorData;
+    }
+
+    return currentQueryResultsErrorData;
+  };
+
   return resource;
 }
 

client/app/services/parameters/NumberParameter.js

@@ -1,4 +1,4 @@
-import { toNumber, isNull } from 'lodash';
+import { toNumber, trim } from 'lodash';
 import { Parameter } from '.';
 
 class NumberParameter extends Parameter {
@@ -9,11 +9,11 @@ class NumberParameter extends Parameter {
 
   // eslint-disable-next-line class-methods-use-this
   normalizeValue(value) {
-    if (isNull(value)) {
+    if (!trim(value)) {
       return null;
     }
     const normalizedValue = toNumber(value);
-    return !isNaN(normalizedValue) ? normalizedValue : null;
+    return !isNaN(normalizedValue) ? normalizedValue : value;
   }
 }
 

client/app/services/parameters/TextParameter.js

@@ -1,4 +1,4 @@
-import { toString, isEmpty } from 'lodash';
+import { toString, isEmpty, trim } from 'lodash';
 import { Parameter } from '.';
 
 class TextParameter extends Parameter {
@@ -15,6 +15,13 @@ class TextParameter extends Parameter {
     }
     return normalizedValue;
   }
+
+  getExecutionValue() {
+    if (!trim(this.value)) {
+      return null;
+    }
+    return this.value;
+  }
 }
 
 export default TextParameter;

client/app/services/parameters/tests/NumberParameter.test.js

@@ -17,10 +17,5 @@ describe('NumberParameter', () => {
       const normalizedValue = param.normalizeValue(42);
       expect(normalizedValue).toBe(42);
     });
-
-    test('returns null when not possible to convert to number', () => {
-      const normalizedValue = param.normalizeValue('notanumber');
-      expect(normalizedValue).toBeNull();
-    });
   });
 });

client/app/services/query.js

@@ -2,8 +2,8 @@ import moment from 'moment';
 import debug from 'debug';
 import Mustache from 'mustache';
 import {
-  zipObject, isEmpty, map, includes, union,
-  uniq, has, identity, extend, each, some,
+  zipObject, isEmpty, map, includes, union, isNil,
+  uniq, has, identity, extend, each, some, reject,
 } from 'lodash';
 
 import { Parameter } from './parameters';
@@ -35,13 +35,13 @@ class Parameters {
     this.initFromQueryString(queryString);
   }
 
-  parseQuery() {
+  parseQuery(queryText = this.query.query) {
     const fallback = () => map(this.query.options.parameters, i => i.name);
 
     let parameters = [];
-    if (this.query.query !== undefined) {
+    if (!isNil(queryText)) {
       try {
-        const parts = Mustache.parse(this.query.query);
+        const parts = Mustache.parse(queryText);
         parameters = uniq(collectParams(parts));
       } catch (e) {
         logger('Failed parsing parameters: ', e);
@@ -124,6 +124,11 @@ class Parameters {
     each(this.get(), p => p.applyPendingValue());
   }
 
+  getUnsavedParameters(queryText) {
+    const savedParameters = this.parseQuery(queryText);
+    return reject(this.get(), p => includes(savedParameters, p.name)).map(p => p.name);
+  }
+
   toUrlParams() {
     if (this.get().length === 0) {
       return '';