Improvements to queries page: (#6)

1. Search (client side). 2. Stats about queries. 3. Pagination.
hailocab · Dec 8, 2013 · 0bf6e39 · 0bf6e39
1 parent 0d6613b
commit 0bf6e39
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 57 deletions.
diff --git a/rd_ui/app/scripts/controllers.js b/rd_ui/app/scripts/controllers.js
@@ -167,31 +167,109 @@
 
     }
 
-    var QueriesCtrl = function($scope, $http, $location, Query) {
+    var QueriesCtrl = function($scope, $http, $location, $filter, Query) {
         $scope.$parent.pageTitle = "All Queries";
 
-        $scope.queries = Query.query();
+        var dateFormatter = function (value) {
+            if (!value) return "-";
+            return value.format("DD/MM/YY HH:mm");
+        }
+
+        var filterQueries = function() {
+            $scope.queries = _.filter($scope.allQueries, function(query) {
+                if (!$scope.selectedTab) {
+                    return false;
+                }
+
+                if ($scope.selectedTab.key == 'my') {
+                    return query.user == currentUser.name && query.name != 'New Query';
+                } else if ($scope.selectedTab.key == 'drafts') {
+                    return query.user == currentUser.name && query.name == 'New Query';
+                }
+
+                return query.name != 'New Query';
+            });
+        }
+
+        $scope.gridConfig = {
+            isPaginationEnabled: true,
+            itemsByPage: 50,
+            maxSize: 8,
+            isGlobalSearchActivated: true
+        }
+
+        $scope.allQueries = [];
+        $scope.queries = [];
+        Query.query(function(queries) {
+            $scope.allQueries = _.map(queries, function(query) {
+                query.created_at = moment(query.created_at);
+                query.last_retrieved_at = moment(query.last_retrieved_at);
+                return query;
+            });
+
+            filterQueries();
+        });
+
+        $scope.gridColumns = [
+            {
+                "label": "Name",
+                "map": "name",
+                "cellTemplateUrl": "/views/queries_query_name_cell.html"
+            },
+            {
+                'label': 'Created By',
+                'map': 'user'
+            },
+            {
+                'label': 'Created At',
+                'map': 'created_at',
+                'formatFunction': dateFormatter
+            },
+            {
+                'label': 'Runtime (avg)',
+                'map': 'avg_runtime',
+                'formatFunction': 'number',
+                'formatParameter': 2
+            },
+            {
+                'label': 'Runtime (min)',
+                'map': 'min_runtime',
+                'formatFunction': 'number',
+                'formatParameter': 2
+            },
+            {
+                'label': 'Runtime (max)',
+                'map': 'max_runtime',
+                'formatFunction': 'number',
+                'formatParameter': 2
+            },
+            {
+                'label': 'Last Executed At',
+                'map': 'last_retrieved_at',
+                'formatFunction': dateFormatter
+            },
+            {
+                'label': 'Times Executed',
+                'map': 'times_retrieved'
+            },
+            {
+                'label': 'Update Schedule',
+                'map': 'ttl',
+                'formatFunction': function(value) {
+                    return $filter('refreshRateHumanize')(value);
+                }
+            }
+//            id: 672,
+        ]
         $scope.tabs = [{"name": "My Queries", "key": "my"}, {"key": "all", "name": "All Queries"}, {"key": "drafts", "name": "Drafts"}];
 
         $scope.$watch('selectedTab', function(tab) {
             if (tab) {
                 $scope.$parent.pageTitle =  tab.name;
             }
-        })
-
-        $scope.filterQueries = function(query) {
-            if (!$scope.selectedTab) {
-                return false;
-            }
-
-            if ($scope.selectedTab.key == 'my') {
-                return query.user == currentUser.name && query.name != 'New Query';
-            } else if ($scope.selectedTab.key == 'drafts') {
-                return query.user == currentUser.name && query.name == 'New Query';
-            }
 
-            return query.name != 'New Query';
-        }
+            filterQueries();
+        })
     }
 
     var MainCtrl = function ($scope, Dashboard, notifications) {
@@ -238,7 +316,7 @@
     angular.module('redash.controllers', [])
         .controller('DashboardCtrl', ['$scope', '$routeParams', '$http', 'Dashboard', DashboardCtrl])
         .controller('WidgetCtrl', ['$scope', '$http', 'Query', WidgetCtrl])
-        .controller('QueriesCtrl', ['$scope', '$http', '$location', 'Query', QueriesCtrl])
+        .controller('QueriesCtrl', ['$scope', '$http', '$location', '$filter', 'Query', QueriesCtrl])
         .controller('QueryFiddleCtrl', ['$scope', '$routeParams', '$http', '$location', 'growl', 'notifications', 'Query', QueryFiddleCtrl])
         .controller('IndexCtrl', ['$scope', 'Dashboard', IndexCtrl])
         .controller('MainCtrl', ['$scope', 'Dashboard', 'notifications', MainCtrl]);

diff --git a/rd_ui/app/scripts/filters.js b/rd_ui/app/scripts/filters.js
@@ -1,19 +1,31 @@
+var durationHumanize = function (duration) {
+    var humanized = "";
+    if (duration == undefined) {
+        humanized = "-";
+    } else if (duration < 60) {
+        humanized = Math.round(duration) + "s";
+    } else if (duration >= 3600) {
+        var hours = Math.round(parseFloat(duration) / 60.0 / 60.0)
+        humanized = hours + "h";
+    } else {
+        var minutes = Math.round(parseFloat(duration) / 60.0);
+        humanized = minutes + "m";
+    }
+    return humanized;
+}
+
 angular.module('redash.filters', []).
     filter('durationHumanize', function () {
-        return function (duration) {
-            var humanized = "";
-            if (duration == undefined) {
-                humanized = "-";
-            } else if (duration < 60) {
-                humanized = Math.round(duration) + "s";
-            } else if (duration >= 3600) {
-                var hours = Math.round(parseFloat(duration) / 60.0 / 60.0)
-                humanized = hours + "h";
+        return durationHumanize;
+    })
+
+    .filter('refreshRateHumanize', function () {
+        return function (ttl) {
+            if (ttl==-1) {
+                return "Never";
             } else {
-                var minutes = Math.round(parseFloat(duration) / 60.0);
-                humanized = minutes + "m";
+                return "Every " + durationHumanize(ttl);
             }
-            return humanized;
         }
     })
 

diff --git a/rd_ui/app/views/queries.html b/rd_ui/app/views/queries.html
@@ -1,31 +1,6 @@
 <div class="container">
     <rd-tabs tabs-collection='tabs' selected-tab='selectedTab'></rd-tabs>
-    <table class="table table-bordered table-hover table-responsive">
-        <thead>
-            <tr>
-                <th>Name</th>
-                <th>Runtime</th>
-                <th>Created at</th>
-                <th>Update Schedule</th>
-                <th>Created By</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr ng-repeat="query in queries | filter:filterQueries">
-                <td><a ng-href="/queries/{{query.id}}">{{query.name}}</a></td>
-                <td>{{query.runtime | durationHumanize}}</td>
-                <td>
-                    <span am-time-ago="query.created_at" ng-show="query.created_at > 0"></span>
-                    <span ng-show="query.created_at == undefined">Never</span>
-                </td>
-                <td>
-                    <span ng-show="query.ttl > -1">Every {{query.ttl | durationHumanize}}</span>
-                    <span ng-show="query.ttl == -1">Manual</span>
-                </td>
-                <td>{{query.user}}</td>
-            </tr>
-        </tbody>
-
-    </table>
-
+    <smart-table rows="queries" columns="gridColumns"
+                 config="gridConfig"
+                 class="table table-condensed table-hover"></smart-table>
 </div>
diff --git a/rd_ui/app/views/queries_query_name_cell.html b/rd_ui/app/views/queries_query_name_cell.html
@@ -0,0 +1 @@
+<a ng-href="/queries/{{dataRow.id}}">{{dataRow.name}}</a>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<a ng-href="/queries/{{dataRow.id}}">{{dataRow.name}}</a>