SONAR-6957 Add a quick link to filter background tasks for a project

4 files changed, 47 insertions, 11 deletions

diff --git a/server/sonar-web/src/main/js/apps/background-tasks/main.js b/server/sonar-web/src/main/js/apps/background-tasks/main.js
index 6b1de4d9e46..df17e68b430 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/main.js
+++ b/server/sonar-web/src/main/js/apps/background-tasks/main.js
@@ -1,16 +1,19 @@
 import _ from 'underscore';
 import moment from 'moment';
 import React from 'react';
-import {getQueue, getActivity, cancelTask, cancelAllTasks} from '../../api/ce';
-import {STATUSES, CURRENTS, DATE} from './constants';
+
+import { getQueue, getActivity, cancelTask, cancelAllTasks } from '../../api/ce';
+import { STATUSES, CURRENTS, DATE, DEBOUNCE_DELAY } from './constants';
 import Header from './header';
 import Stats from './stats';
 import Search from './search';
 import Tasks from './tasks';
 import ListFooter from '../../components/shared/list-footer';
 
+
 const PAGE_SIZE = 200;
 
+
 export default React.createClass({
   getInitialState() {
     return {
@@ -27,6 +30,7 @@ export default React.createClass({
 
   componentDidMount() {
     this.requestData();
+    this.requestData = _.debounce(this.requestData, DEBOUNCE_DELAY);
   },
 
   getComponentFilter() {
@@ -179,6 +183,10 @@ export default React.createClass({
     cancelAllTasks().then(this.requestData);
   },
 
+  handleFilter(task) {
+    this.onSearch(task.componentKey);
+  },
+
   render() {
     return (
         <div className="page">
@@ -193,7 +201,9 @@ export default React.createClass({
               onDateChange={this.onDateChange}
               onSearch={this.onSearch}/>
 
-          <Tasks tasks={[].concat(this.state.queue, this.state.activity)} onTaskCanceled={this.onTaskCanceled}/>
+          <Tasks tasks={[].concat(this.state.queue, this.state.activity)}
+                 onTaskCanceled={this.onTaskCanceled}
+                 onFilter={this.handleFilter}/>
 
           <ListFooter count={this.state.queue.length + this.state.activity.length}
                       total={this.state.queue.length + this.state.activityTotal}
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/search.js b/server/sonar-web/src/main/js/apps/background-tasks/search.js
index f2d70c15cd7..6a6d96a7916 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/search.js
+++ b/server/sonar-web/src/main/js/apps/background-tasks/search.js
@@ -14,10 +14,6 @@ export default React.createClass({
     this.attachDatePicker();
   },
 
-  componentWillMount() {
-    this.onSearch = _.debounce(this.onSearch, DEBOUNCE_DELAY);
-  },
-
   getCurrentsOptions() {
     return [
       { value: CURRENTS.ALL, label: window.t('background_tasks.currents_filter.ALL') },
@@ -107,8 +103,8 @@ export default React.createClass({
           <button className="search-box-submit button-clean">
             <i className="icon-search"></i>
           </button>
-          <input onChange={this.onSearch} ref="searchInput" className="search-box-input" type="search"
-                 placeholder="Search"/>
+          <input onChange={this.onSearch} value={this.props.searchQuery} ref="searchInput" className="search-box-input"
+                 type="search" placeholder="Search"/>
         </form>
     );
   },
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/tasks.js b/server/sonar-web/src/main/js/apps/background-tasks/tasks.js
index 2d1b6352768..efe7516b711 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/tasks.js
+++ b/server/sonar-web/src/main/js/apps/background-tasks/tasks.js
@@ -1,12 +1,17 @@
 import moment from 'moment';
 import React from 'react';
+
 import { getComponentUrl } from '../../helpers/urls';
 import QualifierIcon from '../../components/shared/qualifier-icon';
 import PendingIcon from '../../components/shared/pending-icon';
-import {STATUSES} from './constants';
-import {formatDuration} from './helpers';
+import { STATUSES } from './constants';
+import { formatDuration } from './helpers';
+import { TooltipsMixin } from '../../components/mixins/tooltips-mixin';
+
 
 export default React.createClass({
+  mixins: [TooltipsMixin],
+
   propTypes: {
     tasks: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
   },
@@ -16,6 +21,11 @@ export default React.createClass({
     this.props.onTaskCanceled(task);
   },
 
+  handleFilter (task, e) {
+    e.preventDefault();
+    this.props.onFilter(task);
+  },
+
   renderTaskStatus(task) {
     let inner;
     switch (task.status) {
@@ -46,12 +56,18 @@ export default React.createClass({
       return <td><span className="note">{task.id}</span></td>;
     }
 
+    let filter = <span className="background-task-filter">
+        <a onClick={this.handleFilter.bind(this, task)} className="icon-filter icon-half-transparent" href="#"
+           title={`Show only "${task.componentName}" tasks`} data-toggle="tooltip"/>
+      </span>;
+
     return (
         <td>
           <span className="little-spacer-right">
             <QualifierIcon qualifier={task.componentQualifier}/>
           </span>
           <a href={getComponentUrl(task.componentKey)}>{task.componentName}</a>
+          {filter}
         </td>
     );
   },
diff --git a/server/sonar-web/src/main/less/pages/background-tasks.less b/server/sonar-web/src/main/less/pages/background-tasks.less
index 014bde58bda..68d106553b1 100644
--- a/server/sonar-web/src/main/less/pages/background-tasks.less
+++ b/server/sonar-web/src/main/less/pages/background-tasks.less
@@ -1 +1,15 @@
 @import (reference) '../variables';
+
+.background-tasks {
+  tr:hover .background-task-filter {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.background-task-filter {
+  margin-left: 10px;
+  opacity: 0;
+  transform: translateX(15px);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}