SONAR-6834 show failures count, add pending icon

3 files changed, 41 insertions, 4 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 21b00df5c3c..71a81a66cc4 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
@@ -18,7 +18,6 @@ export default React.createClass({
       activityTotal: 0,
       activityPage: 1,
       pendingCount: 0,
-      failuresCount: 0,
       statusFilter: STATUSES.ALL,
       currentsFilter: CURRENTS.ALL
     };
@@ -42,6 +41,7 @@ export default React.createClass({
   requestData() {
     this.requestQueue();
     this.requestActivity();
+    this.requestFailures();
   },
 
   requestQueue() {
@@ -71,6 +71,13 @@ export default React.createClass({
     });
   },
 
+  requestFailures() {
+    let filters = { ps: 1, onlyCurrents: true, status: STATUSES.FAILED };
+    getActivity(filters).done(failures => {
+      this.setState({ failuresCount: failures.paging.total });
+    });
+  },
+
   countPending(tasks) {
     return _.where(tasks, { status: STATUSES.PENDING }).length;
   },
@@ -98,6 +105,15 @@ export default React.createClass({
     this.setState({ activityPage: this.state.activityPage + 1 }, this.requestActivity);
   },
 
+  showFailures() {
+    this.setState({
+          statusFilter: STATUSES.FAILED,
+          currentsFilter: CURRENTS.ONLY_CURRENTS,
+          activityPage: 1
+        },
+        this.requestActivity);
+  },
+
   onTaskCanceled(task) {
     cancelTask(task.id).done(data => {
       _.extend(task, data.task);
@@ -109,7 +125,7 @@ export default React.createClass({
     return (
         <div className="page">
           <Header/>
-          <Stats {...this.state}/>
+          <Stats {...this.state} showFailures={this.showFailures}/>
           <Search {...this.state} onStatusChange={this.onStatusChange} onCurrentsChange={this.onCurrentsChange}/>
           <Tasks tasks={[].concat(this.state.queue, this.state.activity)} onTaskCanceled={this.onTaskCanceled}/>
           <ListFooter count={this.state.queue.length + this.state.activity.length}
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/stats.js b/server/sonar-web/src/main/js/apps/background-tasks/stats.js
index db8ab91ca26..367dbaea3ad 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/stats.js
+++ b/server/sonar-web/src/main/js/apps/background-tasks/stats.js
@@ -1,6 +1,11 @@
 import React from 'react';
 
 export default React.createClass({
+  onFailuresClick(e) {
+    e.preventDefault();
+    this.props.showFailures();
+  },
+
   renderInProgressDuration() {
     if (!this.props.inProgressDuration) {
       return null;
@@ -13,6 +18,17 @@ export default React.createClass({
     );
   },
 
+  renderFailures() {
+    if (this.props.failuresCount == null) {
+      return null;
+    }
+    if (this.props.failuresCount > 0) {
+      return <span><a onClick={this.onFailuresClick} className="emphasised-measure" href="#">{this.props.failuresCount}</a> failures</span>;
+    } else {
+      return <span><span className="emphasised-measure">{this.props.failuresCount}</span> failures</span>;
+    }
+  },
+
   render() {
     return (
         <section className="big-spacer-top big-spacer-bottom">
@@ -20,7 +36,7 @@ export default React.createClass({
             <span className="emphasised-measure">{this.props.pendingCount}</span> pending
           </span>
           <span className="huge-spacer-left">
-            <span className="emphasised-measure">{this.props.failuresCount}</span> failures
+            {this.renderFailures()}
           </span>
           {this.renderInProgressDuration()}
         </section>
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 7f555a1a321..add7ff59612 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,6 +1,7 @@
 import React from 'react';
 import {getProjectUrl} from '../../helpers/Url';
 import QualifierIcon from '../../components/shared/qualifier-icon';
+import PendingIcon from '../../components/shared/pending-icon';
 import {STATUSES} from './constants';
 
 export default React.createClass({
@@ -16,6 +17,9 @@ export default React.createClass({
   renderTaskStatus(task) {
     let inner;
     switch (task.status) {
+      case STATUSES.PENDING:
+        inner = <PendingIcon/>;
+        break;
       case STATUSES.IN_PROGRESS:
         inner = <i className="spinner"/>;
         break;
@@ -81,7 +85,8 @@ export default React.createClass({
     if (task.status === STATUSES.PENDING) {
       return (
           <td className="thin">
-            <button onClick={this.onTaskCanceled.bind(this, task)}>Cancel</button>
+            <a onClick={this.onTaskCanceled.bind(this, task)} className="icon-delete" title="Cancel Task"
+               data-toggle="tooltip" href="#"></a>
           </td>
       );
     } else {