Permalink
Browse files

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

…raph-inspector
  • Loading branch information...
kristelteng committed Mar 21, 2016
1 parent 00dd43f commit d0c6baf1fb073ee5d50e11ede7cd6afebae66300
Showing with 151 additions and 34 deletions.
  1. +96 −0 lib/ui/previoustasks.jsx
  2. +28 −17 task-graph-inspector/taskgraphinspector.jsx
  3. +27 −17 task-inspector/taskinspector.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;
@@ -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>
@@ -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>

0 comments on commit d0c6baf

Please sign in to comment.