Feature/query based parameter (#1)

* Feature: Query based parameter (drop-down) * Restrict to string column for query parameter * Fix lint errors
getredash · Aug 15, 2017 · d18220c · d18220c
1 parent a7bed64
commit d18220c
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 2 deletions.
diff --git a/client/app/components/parameter-settings.html b/client/app/components/parameter-settings.html
@@ -14,6 +14,7 @@ <h4 class="modal-title">{{$ctrl.parameter.name}}</h4>
           <option value="text">Text</option>
           <option value="number">Number</option>
           <option value="enum">Dropdown List</option>
+          <option value="query">Query based dropdown List</option>
           <option value="date">Date</option>
           <option value="datetime-local">Date and Time</option>
           <option value="datetime-with-seconds">Date and Time (with seconds)</option>
@@ -27,5 +28,16 @@ <h4 class="modal-title">{{$ctrl.parameter.name}}</h4>
         <label>Dropdown List Values (newline delimited)</label>
         <textarea class="form-control" rows="3" ng-model="$ctrl.parameter.enumOptions"></textarea>
       </div>
+      <div class="form-group" ng-if="$ctrl.parameter.type === 'query'">
+        <label>Saved query (single column output)</label>
+        <ui-select ng-model="$ctrl.parameter.query" theme="bootstrap" reset-search-input="false" on-select="$ctrl.onQuerySelect($item)">
+            <ui-select-match placeholder="Search a query by name">{{$select.selected.name}}</ui-select-match>
+            <ui-select-choices repeat="q in $ctrl.queries"
+                               refresh="$ctrl.searchQueries($select.search)"
+                               refresh-delay="0">
+            <div class="form-group" ng-bind-html="$ctrl.trustAsHtml(q.name | highlight: $select.search)"></div>
+            </ui-select-choices>
+        </ui-select>
+      </div>
     </div>
 </div>
diff --git a/client/app/components/parameters.html b/client/app/components/parameters.html
@@ -19,7 +19,11 @@
           <option ng-repeat="option in extractEnumOptions(param.enumOptions)" value="{{option}}">{{option}}</option>
         </select>
       </span>
+      <span ng-switch-when="query" ng-controller="QueryBasedParameterController">
+        <select ng-model="param.value" class="form-control" ng-options="queryResult for queryResult in queryResults">
+        </select>
+      </span>
       <input ng-switch-default type="{{param.type}}" class="form-control" ng-model="param.ngModel">
     </span>
-  </div>
+  </
 </div>
diff --git a/client/app/components/parameters.js b/client/app/components/parameters.js
@@ -8,13 +8,45 @@ const ParameterSettingsComponent = {
     close: '&',
     dismiss: '&',
   },
-  controller() {
+  controller($sce, Query) {
     'ngInject';
 
+    this.trustAsHtml = html => $sce.trustAsHtml(html);
     this.parameter = this.resolve.parameter;
+    this.onQuerySelect = (query) => {
+      this.parameter.query = query;
+    };
+    this.searchQueries = (term) => {
+      if (!term || term.length < 3) {
+        return;
+      }
+
+      Query.search({ q: term }, (results) => {
+        this.queries = results;
+      });
+    };
   },
 };
 
+function QueryBasedParameterController($scope, Query) {
+  $scope.queryResults = [];
+  $scope.$watch('param', () => {
+    const param = $scope.param;
+    if (param.query !== null) {
+      Query.resultById(
+        { id: param.query.id },
+        (result) => {
+          const queryResult = result.query_result;
+          const columns = queryResult.data.columns;
+          const numColumns = columns.length;
+          if (numColumns > 0 && columns[0].type === 'string') {
+            $scope.queryResults = queryResult.data.rows.map(row => row[columns[0].name]);
+          }
+        });
+    }
+  }, true);
+}
+
 function ParametersDirective($location, $uibModal) {
   return {
     restrict: 'E',
@@ -40,6 +72,7 @@ function ParametersDirective($location, $uibModal) {
           });
         }, true);
       }
+
       // These are input as newline delimited values,
       // so we split them here.
       scope.extractEnumOptions = (enumOptions) => {
@@ -62,5 +95,6 @@ function ParametersDirective($location, $uibModal) {
 
 export default function (ngModule) {
   ngModule.directive('parameters', ParametersDirective);
+  ngModule.controller('QueryBasedParameterController', QueryBasedParameterController);
   ngModule.component('parameterSettings', ParameterSettingsComponent);
 }
diff --git a/client/app/services/query.js b/client/app/services/query.js
@@ -51,6 +51,7 @@ class Parameter {
     this.value = parameter.value;
     this.global = parameter.global;
     this.enumOptions = parameter.enumOptions;
+    this.query = parameter.query;
   }
 
   get ngModel() {
@@ -181,6 +182,11 @@ function QueryResource($resource, $http, $q, $location, currentUser, QueryResult
         url: 'api/queries/:id/fork',
         params: { id: '@id' },
       },
+      resultById: {
+        method: 'get',
+        isArray: false,
+        url: 'api/queries/:id/results.json',
+      },
     });
 
   Query.newQuery = function newQuery() {