refreshHistory: function(){
stores.ImageRequestStore.fetchFirstPageWhere({
new_machine_owner__username: stores.ProfileStore.get().id
});
stores.ImageRequestStore.lastUpdated = Date.now();
this.forceUpdate();
},
var displayRequests = requests.map(function(request){
// set the color of the row based on the status of the request
var trClass, endDateText = "N/A";
switch(request.get('status').name){
case "approved":
trClass = "success";
break;
case "rejected":
trClass = "warning"
break;
default:
trClass = "active"
break;
}
if(stores.ProfileStore.get().get('is_staff')){
machineStateData = (<td>{request.get('old_status')}</td>);
}
if (request.get('end_date')) {
endDateText = moment(request.get('end_date')).format("MMM D, YYYY h:mm:ss a");
}
var newMachineId = !!request.get('new_machine') ? request.get('new_machine').id : "N/A";
return <tr className={trClass}>
<td>{moment(request.get('start_date')).format("MMM D, YYYY h:mm:ss a")}</td>
<td>{endDateText}</td>
<td>#{request.get('instance').id} - {request.get('instance').name}</td>
<td>{request.get('status').name}</td>
{machineStateData}
<td>{newMachineId}</td>
</tr>
}.bind(this));
getInitialState: function(){
// start fetching the relevant models before the component is rendered
stores.ImageRequestStore.fetchFirstPageWhere({
new_machine_owner__username: stores.ProfileStore.get().id
});
return {};
},
render: function () {
var imageId = this.props.imageId,
username = stores.ProfileStore.get().get('username'),
images = stores.ImageStore.fetchWhere({
created_by__username: username
}),
options;
if(!images) return <div className="loading"/>;
options = images.map(this.renderImage);
return (
<div className="form-group">
<h4 htmlFor="Image" className="control-label">Change Image</h4>
<div className="alert alert-danger">
<strong>Warning: </strong>
Changing this value will move this version to a different image you own.
</div>
<div className="help-block">
Select the Image that best describes this image.
</div>
<select value={imageId} name="Image" className="form-control" onChange={this.handleChange}>
{options}
</select>
</div>
);
}
getInitialState: function() {
var profile = stores.ProfileStore.get();
if (!context.profile && profile) {
context.profile = profile;
}
return this.getState();
},
render: function () {
var volume = this.props.volume,
volumeHash = CryptoJS.MD5((volume.id || volume.cid).toString()).toString(),
type = stores.ProfileStore.get().get('icon_set'),
iconSize = 18;
return (
<SelectableRow
isActive={this.props.isPreviewed}
isSelected={this.props.isChecked}
onResourceSelected={this.props.onResourceSelected}
onResourceDeselected={this.props.onResourceDeselected}
onPreviewResource={this.props.onPreviewResource}
resource={volume}
>
<td className="image-preview sm-cell" data-label="Name">
<Gravatar
hash={volumeHash}
size={iconSize}
type={type}
/>
<Name volume={volume}/>
</td>
<td className="sm-cell" data-label="Status">
<Status volume={volume}/>
</td>
<td className="sm-cell" data-label="Size">
<Size volume={volume}/>
</td>
<td className="sm-cell" data-label="Provider">
<Provider volume={volume}/>
</td>
</SelectableRow>
);
}
getInitialState: function() {
var user = stores.ProfileStore.get();
return{
userEmail: user.get('email'),
badges: "",
myBadges: ""
};
},
renderBody: function () {
var identities = stores.IdentityStore.getAll(),
instances = stores.InstanceStore.getAll(),
username = stores.ProfileStore.get().get('username'),
requests = stores.ResourceRequestStore.findWhere({"created_by.username": username});
if(username == null || requests == null){
return <div className="loading"></div>;
}
if (!identities || !instances) return <div className="loading"/>;
return (
<div role='form'>
<div className='form-group'>
<label htmlFor='project-identity'>{"What cloud would you like resources for?"}</label>
<select className="form-group" onChange={this.handleIdentityChange}>
{identities.map(this.renderIdentity)}
</select>
</div>
<div className='form-group'>
<label htmlFor='project-name'>{"What resources would you like to request?"}</label>
<textarea type='text'
className='form-control'
rows="7"
placeholder="E.g 4 CPUs and 8GB memory, running 4 cores for 1 week, an additional 500 AU, etc."
value={this.state.resources}
onChange={this.handleResourcesChange}
/>
</div>
<AUCalculator identity={this.state.identity}/>
<div className='form-group'>
<label htmlFor='project-description'>{"How will you use the additional resources?"}</label>
<textarea type='text'
className='form-control'
rows="7"
placeholder="E.g. To run a program or analysis, store larger output, etc."
value={this.state.reason}
onChange={this.handleReasonChange}
/>
</div>
<strong>Note: Allocation allowances are set back to a default of 168 AU on the first of every month.</strong>
</div>
);
},
render: function() {
// only attempt to get bookmarks if there is a profile that might have them ...
let userLoggedIn = context.hasLoggedInUser();
let images = stores.ImageStore.getAll();
let routes;
if (!userLoggedIn) {
routes = [
this.renderRoute('Search', 'search', 'search', false),
this.renderRoute('Tags', 'tags', 'tags', false)
];
} else {
let profile = stores.ProfileStore.get();
let favoritedImages = stores.ImageBookmarkStore.getBookmarkedImages();
let userImages = stores.ImageStore.fetchWhere({
created_by__username: profile.get('username')
});
if (!userImages || !favoritedImages) {
return <div className="loading"></div>
}
let myImagesText = `My Images (${userImages.length})`;
let myFavoritedImagesText = `Favorites (${favoritedImages.length})`;
routes = [
this.renderRoute('Search', 'search', 'search', false),
this.renderRoute(myFavoritedImagesText, 'favorites', 'bookmark', true),
this.renderRoute(myImagesText, 'authored', 'user', true),
this.renderRoute('My Image Requests', 'my-image-requests', 'export', true),
this.renderRoute('Tags', 'tags', 'tags', false),
];
}
return (
<div>
<div className="secondary-nav">
<div className="container">
<ul className="secondary-nav-links">
{ routes }
</ul>
</div>
</div>
</div>
);
}
render: function () {
// get around undefined email when calling from MyBadgeStore
var email = stores.ProfileStore.get().get('email');
if(!email){
return(
<div>
<h1>Loading</h1>
</div>
)
}
var badges = stores.BadgeStore.getAll();
var myBadges = stores.MyBadgeStore.getAll();
var instanceHistory = stores.InstanceHistoryStore.getAll();
var myBadgeIds = {};
if(!badges || !myBadges || !instanceHistory){
return(
<div className="loading" />
)
}
myBadges.map(function (badge) {
myBadgeIds[badge.id] = 1;
});
var badgeDisplay = badges.map(function(badge) {
var badgeId = badge.id;
if (!myBadgeIds[badgeId]) {
return (
<Badge badge={badge} />
)
}
});
return (
<div className="to-earn">
<ul id="all-badges-list">
{badgeDisplay}
</ul>
</div>
);
}
render: function () {
var instance = this.props.instance,
instanceHash = CryptoJS.MD5((instance.id || instance.cid).toString()).toString(),
type = stores.ProfileStore.get().get('icon_set'),
iconSize = 113,
nameContent;
if (this.state.isEditing) {
nameContent = (
<EditableInputField
text={this.state.name}
onDoneEditing={this.onDoneEditing}
/>
);
} else {
nameContent = (
<h4 onClick={this.onEnterEditMode}>
{this.state.name}
<i className="glyphicon glyphicon-pencil"></i>
</h4>
);
}
return (
<div className="resource-info-section section clearfix">
<div className="resource-image">
<Gravatar hash={instanceHash} size={iconSize} type={type}/>
</div>
<div className="resource-info">
<div className="resource-name editable">
{nameContent}
</div>
<div className="resource-launch-date">Launched on <Time date={instance.get('start_date')}/></div>
</div>
</div>
);
}
grant: function(params) {
try {
var badge = params.badge,
email = stores.ProfileStore.get().get("email"),
system = globals.BADGE_SYSTEM,
secret = globals.BADGE_SECRET,
csrftoken = this.getCookie("csrftoken"),
badgeSlug = badge.get("slug");
} catch (err) {
return;
}
$.ajax({
url: globals.BADGE_HOST,
type: "POST",
dataType: "json",
contentType: "application/json",
headers: {
"X-CSRFToken": csrftoken
},
data: JSON.stringify({
email: email,
system: system,
badgeSlug: badgeSlug,
secret: secret
}),
success: function() {
NotificationController.info("You have earned a badge!");
Utils.dispatch(BadgeConstants.GRANT_BADGE, {
badge: badge
})
},
error: function(response) {
/* eslint-disable no-console */
console.log("failed", response);
/* eslint-enable no-console */
}
});
}
render: function () {
var external_link = this.props.external_link,
linkHash = CryptoJS.MD5((external_link.id || external_link.cid).toString()).toString(),
type = stores.ProfileStore.get().get('icon_set'),
iconSize = 18;
return (
<SelectableRow
isActive={this.props.isPreviewed}
isSelected={this.props.isChecked}
onResourceSelected={this.props.onResourceSelected}
onResourceDeselected={this.props.onResourceDeselected}
onPreviewResource={this.props.onPreviewResource}
resource={external_link}
>
<td className="image-preview sm-cell" data-label="Name">
<Name external_link={external_link}/>
</td>
<td className="image-preview sm-cell" data-label="Link">
<Link external_link={external_link}/>
</td>
</SelectableRow>
);
}
render: function() {
var username = stores.ProfileStore.get().id,
helpLinks = stores.HelpLinkStore.getAll(),
imagingDocsLink,
requests;
if(!username || !helpLinks){
return <div className = "loading"></div>
}
imagingDocsLink = stores.HelpLinkStore.get("request-image");
requests = stores.ImageRequestStore.getAll();
var machineStateColumn, machineStateData;
if(stores.ProfileStore.get().get('is_staff')){
machineStateColumn = (
<th>
<h3>Machine State</h3>
</th>
);
}
if(!requests){
return <div className = "loading"></div>;
}
if(!requests.models[0]){
return (
<div className="container">
<p style={{marginBottom: "16px"}}>
{"Looking for more information about the imaging process? Check out the "}
<a href={imagingDocsLink.get('href')} target="_blank">documentation on imaging</a>.
</p>
<p>You have not made any imaging requests.</p>
</div>
);
}
var displayRequests = requests.map(function(request){
// set the color of the row based on the status of the request
var trClass, endDateText = "N/A";
switch(request.get('status').name){
case "approved":
trClass = "success";
break;
case "rejected":
trClass = "warning"
break;
default:
trClass = "active"
break;
}
if(stores.ProfileStore.get().get('is_staff')){
machineStateData = (<td>{request.get('old_status')}</td>);
}
if (request.get('end_date')) {
endDateText = moment(request.get('end_date')).format("MMM D, YYYY h:mm:ss a");
}
var newMachineId = !!request.get('new_machine') ? request.get('new_machine').id : "N/A";
return <tr className={trClass}>
<td>{moment(request.get('start_date')).format("MMM D, YYYY h:mm:ss a")}</td>
<td>{endDateText}</td>
<td>#{request.get('instance').id} - {request.get('instance').name}</td>
<td>{request.get('status').name}</td>
{machineStateData}
<td>{newMachineId}</td>
</tr>
}.bind(this));
return (
<div className="container">
<p style={{marginBottom: "16px"}}>
{"Looking for more information about the imaging process? Check out the "}
<a href={imagingDocsLink.get('href')} target="_blank">documentation on imaging</a>.
</p>
{this.renderRefreshButton()}
<table className = "table table-condensed image-requests">
<tbody>
<tr>
<th>
<h3>Date requested</h3>
</th>
<th>
<h3>Date completed</h3>
</th>
<th>
<h3>Base instance</h3>
</th>
<th>
<h3>Status</h3>
</th>
{machineStateColumn}
<th>
<h3>New Machine ID</h3>
</th>
</tr>
{displayRequests}
</tbody>
</table>
</div>
);
}
instanceHistoryItems = instanceHistories.map(function(instance) {
var providerId = null,
name = instance.get('instance').name,
image = instance.get('image'),
provider = instance.get('provider'),
instanceId = instance.get('instance').id;
var startDate = instance.get('instance').start_date,
endDate = instance.get('instance').end_date,
formattedStartDate = moment(startDate).format("MMM DD, YYYY hh:mm a"),
formattedEndDate = moment(endDate).format("MMM DD, YYYY hh:mm a"),
now = moment(),
timeSpan = now.diff(startDate, "days"),
instanceHistoryHash = CryptoJS.MD5((instance.id || instance.cid).toString()).toString(),
iconSize = 63,
type = stores.ProfileStore.get().get('icon_set'),
imageName = image ? image.name : "[image no longer exists]",
imageLink;
if(!moment(endDate).isValid()) formattedEndDate = "Present";
if(image){
imageLink = (
<Router.Link to="image-details" params={{imageId: image.id}}>
{imageName}
</Router.Link>
)
}else{
imageLink = (
<strong>{imageName}</strong>
)
}
if(!provider){
provider = {name: '[no provider name]'};
}
return (
<div key={instance.cid}>
<div className="instance-history">
<ul>
<li>
<div>
<Gravatar hash={instanceHistoryHash} size={iconSize} type={type}/>
<div className="instance-history-details">
<Router.Link to={"new-instance-detail"} params={{id: instance.get('instance').id}}>
<strong className="name">{name}</strong>
</Router.Link>
<div>Launched from {imageLink}</div>
<div>{"Ran: " + formattedStartDate + " - " + formattedEndDate}</div>
</div>
<span className="launch-info">
<strong>{timeSpan + " days ago"}</strong>
{" on " + provider.name}
</span>
</div>
</li>
</ul>
</div>
</div>
);
}.bind(this));
render: function() {
var username = stores.ProfileStore.get().id,
statusTypes = stores.StatusStore.getAll();
if(username == null || !statusTypes){
return <div className="loading"></div>
}
var requests = stores.ResourceRequestStore.findWhere({"created_by.username": username});
if(requests == null){
return <div className="loading"></div>;
}
if(!requests.models[0]){
return (
<div className="container">
<p>You have not made any resource requests.</p>
</div>
);
}
var displayRequests = requests.map(function(request){
// Handler to allow close buton to call React class closeRequest with the proper argument
var close = function(){
this.closeRequest(request)
}.bind(this);
var closeButton;
var text = request.get('status').name;
// set the color of the row based on the status of the request
var trClass = "active";
if(text === 'approved'){
trClass = "success";
}
else if (text === "rejected"){
trClass = "rejected";
}
else if(text === "pending"){
closeButton = <button type="button" className="btn btn-warning pull-right" onClick={close}>Close</button>;
}
return (
<tr key={request.id} className={trClass}>
<td className="col-md-5">{request.get('request')}</td>
<td className="col-md-5">{request.get('description')}</td>
<td className="col-md-2">{request.get('status').name} {closeButton}</td>
</tr>
);
}.bind(this));
return (
<div className="container">
<table className = "table table-condensed image-requests">
<tbody>
<tr>
<th>
<h3>Request</h3>
</th>
<th>
<h3>Reason</h3>
</th>
<th>
<h3>Status</h3>
</th>
</tr>
{displayRequests}
</tbody>
</table>
</div>
);
}
render: function () {
var link = this.props.link,
profile = stores.ProfileStore.get(),
type = profile.get('icon_set'),
instanceHash = CryptoJS.MD5((link.id || link.cid).toString()).toString(),
iconSize = 113,
nameContent, descriptionContent, linkContent;
if (this.state.isEditingDescription) {
descriptionContent = (
<EditableTextAreaField text={this.state.description} onDoneEditing={this.onDoneEditingDescription}/>
);
} else {
descriptionContent = (
<h4 onClick={this.onEnterEditDescription}>
{this.state.description}
<i className="glyphicon glyphicon-pencil"></i>
</h4>
);
}
if (this.state.isEditingLink) {
linkContent = (
<EditableInputField text={this.state.link} onDoneEditing={this.onDoneEditingLink}/>
);
} else {
linkContent = (
<h4 onClick={this.onEnterEditLink}>
{this.state.link}
<i className="glyphicon glyphicon-pencil"></i>
</h4>
);
}
if (this.state.isEditingName) {
nameContent = (
<EditableInputField text={this.state.name} onDoneEditing={this.onDoneEditingName}/>
);
} else {
nameContent = (
<h4 onClick={this.onEnterEditName}>
{this.state.name}
<i className="glyphicon glyphicon-pencil"></i>
</h4>
);
}
return (
<div className="resource-info-section section clearfix">
<div className="resource-info">
<h2>Name</h2>
<div className="resource-name editable">
{nameContent}
</div>
<h2>Description</h2>
<div className="resource-name editable">
{descriptionContent}
</div>
<h2>Link</h2>
<div className="resource-name editable">
{linkContent}
</div>
</div>
</div>
);
}
function getState() {
return {
profile: stores.ProfileStore.get()
};
}
componentDidMount: function () {
stores.ProfileStore.addChangeListener(this.updateState);
},
componentWillUnmount: function () {
stores.ProfileStore.removeChangeListener(this.updateState);
},