Create the UI for previous tasks visited in task-inspector and task-g…

…raph-inspector

lib/ui/previoustasks.jsx

@@ -0,0 +1,96 @@
+var React           = require('react');
+var bs              = require('react-bootstrap');
+var utils           = require('../../lib/utils');
+
+var PreviousTasks = React.createClass({
+
+  mixins: [
+    // Calls load() initially and on reload()
+    utils.createTaskClusterMixin({
+      // Reload when props.status.taskId changes, ignore credential changes
+      reloadOnProps:          ['objectId', 'objectType'],
+      reloadOnLogin:          false
+    })
+  ],
+
+  getPreviousObjectIds(type, newId) {
+    var ids = [];
+    var itemKey = 'inspector-items-' + type;
+    try {
+      var itemValue = JSON.parse(localStorage.getItem(itemKey));
+      if (itemValue) {
+        ids = itemValue;
+      }
+    } catch(e) {
+      console.error(e);
+      localStorage.setItem(itemKey, JSON.stringify(ids));
+    }
+    if (newId) {
+      var prevIndex = ids.indexOf(newId);
+      if (prevIndex != -1) {
+        ids.splice(prevIndex, 1);
+      }
+      ids.push(newId);
+
+      while (ids.length > 5) {
+        ids.shift();
+      }
+      // only save when there is a new taskId
+      localStorage.setItem(itemKey, JSON.stringify(ids));
+    }
+    return ids;
+  },
+
+  load() {
+    return {
+      previousObjectIds: this.getPreviousObjectIds(this.props.objectType, this.props.objectId),
+      objectId: this.props.objectId,
+      objectType: this.props.objectType
+    };
+  },
+
+  getInitialState() {
+    return {
+      previousObjectIds: [],
+      objectId: '',
+      objectType: ''
+    };
+  },
+
+  render() {
+    var objectIds = this.state.previousObjectIds || [];
+    var rows = objectIds.map(objectId => {
+      var link = "#" + objectId;
+      return (<li key={objectId}><a href={link}>{objectId}</a></li>);
+    });
+    rows.reverse(); // show most recent first
+
+    if (rows.length === 0) {
+      switch(this.state.objectType) {
+        case "taskGraphId":
+          return (
+            <span>
+              <p>Find tasks at <a href="/index">index</a>, then click their TaskGroupId link to see task graphs</p>
+            </span>
+          );
+        case "taskId":
+          return (
+            <span>
+              <p>Find tasks at <a href="/index">index</a></p>
+            </span>
+          );
+      }
+    };
+
+    return (
+      <span>
+        <strong>Previous Tasks</strong>
+        <ul>
+          {rows}
+        </ul>
+      </span>
+    );
+  }
+});
+
+module.exports = PreviousTasks;

task-graph-inspector/taskgraphinspector.jsx

@@ -5,6 +5,7 @@ var taskcluster     = require('taskcluster-client');
 var _               = require('lodash');
 var TaskView        = require('../lib/ui/taskview');
 var format          = require('../lib/format');
+var PreviousTasks   = require('../lib/ui/previoustasks');
 
 /** Renders task-graph-inspector with a control to enter `taskGraphId` into */
 var TaskGraphInspector = React.createClass({
@@ -243,23 +244,33 @@ var TaskGraphInspector = React.createClass({
         This tool lets you inspect a task-graph given the <code>taskGraphId</code>
       </p>
       <form className="form-horizontal" onSubmit={this.handleSubmit}>
-        <bs.Input
-          type="text"
-          ref="taskGraphId"
-          placeholder="taskGraphId"
-          value={this.state.taskGraphIdInput}
-          label={<span>Enter <code>TaskGraphId</code></span>}
-          bsStyle={invalidInput ? 'error' : null}
-          onChange={this.handleTaskGraphIdInputChange}
-          hasFeedback
-          labelClassName="col-sm-3"
-          wrapperClassName="col-sm-9"/>
-        <div className="form-group">
-          <div className="col-sm-offset-3 col-sm-9">
-            <input type="submit"
-                   className="btn btn-primary"
-                   disabled={!this.state.taskGraphLoaded || invalidInput}
-                   value="Inspect task-graph"/>
+        <div className="list">
+          <div className="col-sm-9">
+            <bs.Input
+              type="text"
+              ref="taskGraphId"
+              placeholder="taskGraphId"
+              value={this.state.taskGraphIdInput}
+              label={<span>Enter <code>TaskGraphId</code></span>}
+              bsStyle={invalidInput ? 'error' : null}
+              onChange={this.handleTaskGraphIdInputChange}
+              hasFeedback
+              labelClassName="col-sm-3"
+              wrapperClassName="col-sm-9"/>
+
+            <div className="col-sm-offset-3 col-sm-9">
+              <input type="submit"
+                className="btn btn-primary"
+                disabled={!this.state.taskGraphLoaded || invalidInput}
+                value="Inspect task-graph"/>
+            </div>
+          </div>
+
+          <div className="col-sm-3">
+            <PreviousTasks objectId={this.state.taskGraphId} objectType="taskGraphId"/>
+          </div>
+
+          <div className="form-group">
           </div>
         </div>
       </form>

task-inspector/taskinspector.jsx

@@ -4,6 +4,7 @@ var utils           = require('../lib/utils');
 var taskcluster     = require('taskcluster-client');
 var _               = require('lodash');
 var TaskView        = require('../lib/ui/taskview');
+var PreviousTasks   = require('../lib/ui/previoustasks');
 
 
 /** Renders the task-inspector with a control to enter `taskId` into */
@@ -115,23 +116,32 @@ var TaskInspector = React.createClass({
       <h1>Task Inspector</h1>
       <p>This tool lets you inspect a task given the <code>taskId</code></p>
       <form className="form-horizontal" onSubmit={this.handleSubmit}>
-        <bs.Input
-          type="text"
-          ref="taskId"
-          placeholder="taskId"
-          value={this.state.taskIdInput}
-          label={<span>Enter <code>TaskId</code></span>}
-          bsStyle={invalidInput ? 'error' : null}
-          onChange={this.handleTaskIdInputChange}
-          hasFeedback
-          labelClassName="col-sm-2"
-          wrapperClassName="col-sm-10"/>
-        <div className="form-group">
-          <div className="col-sm-offset-2 col-sm-10">
-            <input type="submit"
-                   className="btn btn-primary"
-                   disabled={!this.state.statusLoaded || invalidInput}
-                   value="Inspect task"/>
+        <div className="row">
+          <div className="col-sm-8">
+            <bs.Input
+              type="text"
+              ref="taskId"
+              placeholder="taskId"
+              value={this.state.taskIdInput}
+              label={<span>Enter <code>TaskId</code></span>}
+              bsStyle={invalidInput ? 'error' : null}
+              onChange={this.handleTaskIdInputChange}
+              hasFeedback
+              labelClassName="col-sm-2"
+              wrapperClassName="col-sm-10"/>
+
+            <div className="form-group">
+              <div className="col-sm-offset-2 col-sm-10">
+                <input type="submit"
+                    className="btn btn-primary"
+                    disabled={!this.state.statusLoaded || invalidInput}
+                    value="Inspect task"/>
+              </div>
+            </div>
+          </div>
+
+          <div className="col-sm-4">
+            <PreviousTasks objectId={this.state.taskId} objectType="taskId"/>
           </div>
         </div>
       </form>