From 560598eaade87748bc1f73eaed5a9fa07c4ddbf5 Mon Sep 17 00:00:00 2001
From: Arik Fraimovich <arik@arikfr.com>
Date: Tue, 30 Sep 2014 08:39:13 +0300
Subject: [PATCH] Search UI.

---
 rd_ui/app/index.html                         |  6 ++
 rd_ui/app/scripts/app.js                     |  5 ++
 rd_ui/app/scripts/controllers/controllers.js | 67 ++++++++++++++++++--
 rd_ui/app/scripts/directives/directives.js   | 13 ++++
 rd_ui/app/scripts/services/resources.js      |  2 +-
 rd_ui/app/views/queries_search_results.html  | 19 ++++++
 6 files changed, 106 insertions(+), 6 deletions(-)
 create mode 100644 rd_ui/app/views/queries_search_results.html

diff --git a/rd_ui/app/index.html b/rd_ui/app/index.html
index 0c8bdb823..a03928663 100644
--- a/rd_ui/app/index.html
+++ b/rd_ui/app/index.html
@@ -65,6 +65,12 @@
                 </ul>
             </li>
         </ul>
+        <form class="navbar-form navbar-left" role="search" ng-submit="searchQueries()">
+            <div class="form-group">
+                <input type="text" ng-model="term" class="form-control" placeholder="Search queries...">
+            </div>
+            <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
+        </form>
         <ul class="nav navbar-nav navbar-right">
             <p class="navbar-text avatar" ng-show="currentUser.id" ng-cloak>
                 <img ng-src="{{currentUser.gravatar_url}}" class="img-circle" alt="{{currentUser.name}}"/>
diff --git a/rd_ui/app/scripts/app.js b/rd_ui/app/scripts/app.js
index c3ede18f0..8d9fbbe86 100644
--- a/rd_ui/app/scripts/app.js
+++ b/rd_ui/app/scripts/app.js
@@ -55,6 +55,11 @@ angular.module('redash', [
           }]
         }
       });
+      $routeProvider.when('/queries/search', {
+        templateUrl: '/views/queries_search_results.html',
+        controller: 'QuerySearchCtrl',
+        reloadOnSearch: true,
+      });
       $routeProvider.when('/queries/:queryId', {
         templateUrl: '/views/query.html',
         controller: 'QueryViewCtrl',
diff --git a/rd_ui/app/scripts/controllers/controllers.js b/rd_ui/app/scripts/controllers/controllers.js
index 8647d6995..e3bdca531 100644
--- a/rd_ui/app/scripts/controllers/controllers.js
+++ b/rd_ui/app/scripts/controllers/controllers.js
@@ -1,12 +1,63 @@
 (function () {
+  var QuerySearchCtrl = function($scope, $location, Query) {
+    $scope.$parent.pageTitle = "Queries Search";
+
+    $scope.gridConfig = {
+      isPaginationEnabled: true,
+      itemsByPage: 50,
+      maxSize: 8,
+    };
+
+    var dateFormatter = function (value) {
+      if (!value) return "-";
+      return value.format("DD/MM/YY HH:mm");
+    }
+
+    $scope.gridColumns = [
+      {
+        "label": "Name",
+        "map": "name",
+        "cellTemplateUrl": "/views/queries_query_name_cell.html"
+      },
+      {
+        'label': 'Created By',
+        'map': 'user.name'
+      },
+      {
+        'label': 'Created At',
+        'map': 'created_at',
+        'formatFunction': dateFormatter
+      }
+    ];
+
+    $scope.queries = [];
+    $scope.$parent.term = $location.search().q;
+
+    Query.search({q: $scope.term }, function(results) {
+      console.log(results);
+      $scope.queries = _.map(results, function(query) {
+        query.created_at = moment(query.created_at);
+        return query;
+      });
+    });
+
+    $scope.search = function() {
+      if (!angular.isString($scope.term) || $scope.term.trim() == "") {
+        $scope.queries = [];
+        return;
+      }
+
+      $location.search({q: $scope.term});
+    };
+  };
+
   var QueriesCtrl = function ($scope, $http, $location, $filter, Query) {
     $scope.$parent.pageTitle = "All Queries";
     $scope.gridConfig = {
       isPaginationEnabled: true,
       itemsByPage: 50,
       maxSize: 8,
-      isGlobalSearchActivated: true
-    }
+      isGlobalSearchActivated: true};
 
     $scope.allQueries = [];
     $scope.queries = [];
@@ -110,7 +161,7 @@
     });
   }
 
-  var MainCtrl = function ($scope, Dashboard, notifications) {
+  var MainCtrl = function ($scope, $location, Dashboard, notifications) {
     if (featureFlags.clientSideMetrics) {
       $scope.$on('$locationChangeSuccess', function(event, newLocation, oldLocation) {
         // This will be called once per actual page load.
@@ -133,7 +184,12 @@
         $scope.otherDashboards = $scope.allDashboards['Other'] || [];
         $scope.groupedDashboards = _.omit($scope.allDashboards, 'Other');
       });
-    }
+    };
+
+    $scope.searchQueries = function() {
+      console.log("search");
+      $location.path('/queries/search').search({q: $scope.term});
+    };
 
     $scope.reloadDashboards();
 
@@ -165,5 +221,6 @@
   angular.module('redash.controllers', [])
     .controller('QueriesCtrl', ['$scope', '$http', '$location', '$filter', 'Query', QueriesCtrl])
     .controller('IndexCtrl', ['$scope', 'Events', 'Dashboard', IndexCtrl])
-    .controller('MainCtrl', ['$scope', 'Dashboard', 'notifications', MainCtrl]);
+    .controller('MainCtrl', ['$scope', '$location', 'Dashboard', 'notifications', MainCtrl])
+    .controller('QuerySearchCtrl', ['$scope', '$location', 'Query', QuerySearchCtrl]);
 })();
diff --git a/rd_ui/app/scripts/directives/directives.js b/rd_ui/app/scripts/directives/directives.js
index 7755374c4..53b82e092 100644
--- a/rd_ui/app/scripts/directives/directives.js
+++ b/rd_ui/app/scripts/directives/directives.js
@@ -234,4 +234,17 @@
         '</span>'
     }
   });
+
+  // Used instead of autofocus attribute, which doesn't work in Angular as there is no real page load.
+  directives.directive('autofocus',
+    ['$timeout', function ($timeout) {
+      return {
+        link: function (scope, element) {
+          $timeout(function () {
+            element[0].focus();
+          });
+        }
+      };
+    }]
+  );
 })();
diff --git a/rd_ui/app/scripts/services/resources.js b/rd_ui/app/scripts/services/resources.js
index da9adc281..fb5d7603c 100644
--- a/rd_ui/app/scripts/services/resources.js
+++ b/rd_ui/app/scripts/services/resources.js
@@ -375,7 +375,7 @@
   };
 
   var Query = function ($resource, QueryResult, DataSource) {
-    var Query = $resource('/api/queries/:id', {id: '@id'});
+    var Query = $resource('/api/queries/:id', {id: '@id'}, {search: {method: 'get', isArray: true, url: "/api/queries/search"}});
 
     Query.newQuery = function () {
       return new Query({
diff --git a/rd_ui/app/views/queries_search_results.html b/rd_ui/app/views/queries_search_results.html
new file mode 100644
index 000000000..e23d2046a
--- /dev/null
+++ b/rd_ui/app/views/queries_search_results.html
@@ -0,0 +1,19 @@
+<div class="container">
+    <div class="row">
+        <p>
+            <form class="form-inline" role="form" ng-submit="search()">
+                <div class="form-group">
+                    <input class="form-control" placeholder="Search..." ng-model="term" autofocus>
+                </div>
+                <button type="submit" class="btn btn-primary">
+                    <span class="glyphicon glyphicon-search"></span>
+                </button>
+            </form>
+        </p>
+
+        <smart-table rows="queries" columns="gridColumns"
+                 config="gridConfig"
+                 class="table table-condensed table-hover"></smart-table>
+    </div>
+
+</div>