"Purge workers cache" button on TaskInfo component

lib/auth.js

@@ -113,4 +113,4 @@ var buildLoginURL = function() {
 };
 
 // Export buildLoginURL
-exports.buildLoginURL = buildLoginURL;
+exports.buildLoginURL = buildLoginURL;

lib/ui/confirmaction.jsx

@@ -100,14 +100,18 @@ var ConfirmAction = React.createClass({
   },
 
   closeDialog() {
-    this.setState({showDialog: false});
+    this.setState(this.getInitialState());
   },
 
   /** Execute asynchronous action */
   executeAction() {
     this.loadState({
       executing:    true,
-      result:       this.props.action()
+      result:       async () => {
+        let result = await this.props.action();
+        this.setState({ executing: false });
+        return result;
+      }
     });
   }
 });

lib/ui/purgecache-button.jsx

@@ -0,0 +1,74 @@
+let ConfirmAction     = require('./confirmaction');
+let React           = require('react');
+let _               = require('lodash');
+let taskcluster     = require('taskcluster-client');
+let utils           = require('../utils');
+
+let PurgeCacheButton = React.createClass({
+  mixins: [
+    utils.createTaskClusterMixin({
+      clients: {
+        purgeCache: taskcluster.PurgeCache
+      }
+    })
+  ],
+  propTypes: {
+    provisionerId:  React.PropTypes.string.isRequired,
+    workerType:     React.PropTypes.string.isRequired,
+    caches:         React.PropTypes.array
+  },
+  getInitialState() {
+    return {
+      purged: undefined,
+      selected: this.props.caches || []
+    };
+  },
+  render() {
+    return (
+      <ConfirmAction buttonSize="xsmall"
+                     buttonStyle="danger"
+                     disabled={this.props.caches === undefined}
+                     glyph="trash"
+                     label="Purge worker cache"
+                     action={this.purge}
+                     success="Cache successfully purged!">
+        <div>
+          <p>Are you sure you wish to purge caches used in this task across all
+            workers of this workerType?</p>
+          <p>Select the caches to purge:</p>
+          <ul>
+            {(this.props.caches || []).map(cache => {
+               return (
+                 <li className="checkbox" key={cache}>
+                   <label>
+                     <input name="cache"
+                            type="checkbox"
+                            onChange={this.update}
+                            checked={this.state.selected === undefined ? false : this.state.selected.indexOf(cache) !== -1}
+                            value={cache}/>
+                     {cache}
+                   </label>
+                 </li>);
+              })}
+          </ul>
+        </div>
+      </ConfirmAction>);
+  },
+  update(e) {
+    var caches = _.clone(this.state.selected);
+    if (e.target.checked === true) {
+      caches.push(e.target.value);
+    } else if (e.target.checked === false) {
+      caches = caches.filter(i => i !== e.target.value);
+    }
+    this.setState({ selected: caches });
+  },
+  purge() {
+    return Promise.all(this.state.selected.map(cache => {
+      return this.purgeCache.purgeCache(
+          this.props.provisionerId, this.props.task.workerType, {cache});
+    }));
+  }
+});
+
+module.exports = PurgeCacheButton;

lib/ui/taskinfo.jsx

@@ -1,13 +1,14 @@
-let React           = require('react');
-let bs              = require('react-bootstrap');
-let utils           = require('../utils');
-let format          = require('../format');
-let _               = require('lodash');
-let taskcluster     = require('taskcluster-client');
-let ConfirmAction   = require('./confirmaction');
-let path            = require('path');
-let LoanerButton    = require('./loaner-button');
-let RetriggerButton = require('./retrigger-button');
+let ConfirmAction     = require('./confirmaction');
+let LoanerButton      = require('./loaner-button');
+let PurgeCacheButton  = require('./purgecache-button');
+let React             = require('react');
+let RetriggerButton   = require('./retrigger-button');
+let _                 = require('lodash');
+let bs                = require('react-bootstrap');
+let format            = require('../format');
+let path              = require('path');
+let taskcluster       = require('taskcluster-client');
+let utils             = require('../utils');
 
 /** Displays information about a task in a tab page */
 var TaskInfo = React.createClass({
@@ -16,7 +17,7 @@ var TaskInfo = React.createClass({
     utils.createTaskClusterMixin({
       // Need updated clients for Queue
       clients: {
-        queue:                taskcluster.Queue,
+        queue:                taskcluster.Queue
       },
       // Reload when props.status.taskId changes, ignore credential changes
       reloadOnProps:          ['status.taskId'],
@@ -33,16 +34,16 @@ var TaskInfo = React.createClass({
   getInitialState() {
     return {
       // task definition
-      taskLoaded:   false,
-      taskError:    undefined,
-      task:         undefined
+      taskLoaded:         false,
+      taskError:          undefined,
+      task:               undefined
     };
   },
 
   /** Load task definition */
   load() {
     return {
-      task:         this.queue.task(this.props.status.taskId)
+      task: this.queue.task(this.props.status.taskId)
     };
   },
 
@@ -135,6 +136,9 @@ var TaskInfo = React.createClass({
             schedule a rerun. But all existing runs will be aborted and any
             scheduling process will not be able to schedule the task.
           </ConfirmAction>&nbsp;
+          <PurgeCacheButton caches={_.keys(((task || {}).payload || {}).cache || {})}
+                            provisionerId={task.provisionerId}
+                            workerType={task.workerType}/>&nbsp;
         </dd>
       </dl>
       <dl className="dl-horizontal">