Add search filter to job graphs on the homepage

This commit adds the search filter to the job graphs on the homepage.
With this patch, users can know the specified jobs such as the
integrated tests like this filter[1].

[1] openstack-dev/devstack|openstack-infra/devstack-gate|openstack/(cinder|glance|keystone|nova|requirements|tempest)$

Change-Id: Ia8b8d0432048b912f67c35886a3284d6a4a92ac6
Partial-Bug: #1552700

app/js/controllers/home.js

@@ -32,8 +32,8 @@ function HomeController(
     vm.hold -= 1;
   };
 
-  var processData = function(data) {
+  var processData = function(data, projectRe) {
-    var projects = projectService.createProjects(data.runs);
+    var projects = projectService.createProjects(data.runs, projectRe);
     var blanks = projectService.findBlanks(data.runs);
     var dateStats = projectService.getStatsByDate(projects);
     var entries = getChartEntries(dateStats, blanks);
@@ -115,11 +115,12 @@ function HomeController(
       stop_date: viewService.periodEnd(),
       datetime_resolution: viewService.resolution().key
     }).then(function(response) {
-      processData(response.data);
+      processData(response.data, vm.searchProject);
       vm.loaded = true;
     });
     healthService.getRecentFailedTests().then(function(response) {
       vm.recentTests = response.data;
+      vm.recentRuns = {};
       angular.forEach(vm.recentTests, function(test) {
         if (!vm.recentRuns[test.link]) {
           vm.recentRuns[test.link] = [];
@@ -161,6 +162,7 @@ function HomeController(
 
   vm.onSearchChange = function() {
     $location.search('searchProject', $scope.home.searchProject).replace();
+    loadData();
   };
 }
 controllersModule.controller('HomeController', HomeController);

app/js/services/health-api.js

@@ -76,6 +76,7 @@ function HealthService($http, config) {
   service.getRunsGroupedByMetadataPerDatetime = function(key, options) {
     return config.get().then(function(config) {
       return $http.jsonp(config.apiRoot + '/runs/group_by/' + key, {
+        cache: true,
         params: angular.extend(options, { callback: 'JSON_CALLBACK' })
       });
     });
@@ -144,6 +145,7 @@ function HealthService($http, config) {
 
     return config.get().then(function(config) {
       return $http.jsonp(config.apiRoot + '/runs/key/' + runMetadataKey + '/' + value + '/recent', {
+        cache: true,
         params: angular.extend(options, { callback: 'JSON_CALLBACK' })
       });
     });
@@ -154,6 +156,7 @@ function HealthService($http, config) {
 
     return config.get().then(function(config) {
       return $http.jsonp(config.apiRoot + '/tests/recent/fail', {
+        cache: true,
         params: angular.extend(options, { callback: 'JSON_CALLBACK' })
       });
     });

app/js/services/projects.js

@@ -36,14 +36,21 @@ var projectService = function(projectFactory, metricsService) {
     return blanks;
   };
 
-  service.createProjects = function(runsJson) {
+  service.createProjects = function(runsJson, projectRe) {
     var projects = [];
     var index = {};
-
+    var pattern = null;
+    try {
+      pattern = new RegExp(projectRe);
+    } catch (e) {
+      pattern = '';
+    }
     angular.forEach(runsJson, function(projectsJson, dateString) {
       angular.forEach(projectsJson, function(runEntries, name) {
-        var project = findOrCreate(index, projects, name, projectFactory.create);
+        if (pattern.test(name)) {
-        project.addRuns(dateString, runEntries);
+          var project = findOrCreate(index, projects, name, projectFactory.create);
+          project.addRuns(dateString, runEntries);
+        }
       });
     });
 

app/views/home.html

@@ -22,8 +22,16 @@
     <div class="row">
         <div class="col-lg-12">
             <div class="panel panel-default">
-                <div class="panel-heading">
+                <div class="panel-heading panel-controls">
                     <h3 class="panel-title">Total Jobs</h3>
+                    <div class="input-group">
+                        <div class="input-group-addon"><i class="fa fa-search"></i></div>
+                        <input type="text" class="form-control"
+                               placeholder="Search for {{ home.groupKey }}"
+                               ng-model="home.searchProject"
+                               ng-model-options="{debounce: 250}"
+                               ng-change="home.onSearchChange()">
+                    </div>
                 </div>
                 <div class="panel-body">
                     <chart-line data="home.chartData" width="100%" height="250"
@@ -31,8 +39,16 @@
                 </div>
             </div>
             <div class="panel panel-default">
-                <div class="panel-heading">
+                <div class="panel-heading panel-controls">
                     <h3 class="panel-title">Job Failure Rate</h3>
+                    <div class="input-group">
+                        <div class="input-group-addon"><i class="fa fa-search"></i></div>
+                        <input type="text" class="form-control"
+                               placeholder="Search for {{ home.groupKey }}"
+                               ng-model="home.searchProject"
+                               ng-model-options="{debounce: 250}"
+                               ng-change="home.onSearchChange()">
+                    </div>
                 </div>
                 <div class="panel-body">
                     <chart-line data="home.chartDataRate" width="100%" height="250"