94 lines
2.6 KiB
TypeScript
94 lines
2.6 KiB
TypeScript
import * as React from "react";
|
|
import * as moment from "moment";
|
|
|
|
interface tag {
|
|
image_id: string;
|
|
last_modified: string;
|
|
name: string;
|
|
size: number;
|
|
}
|
|
|
|
interface ISidebar {
|
|
isPublic: string,
|
|
tags: Array<tag>,
|
|
repository: Object
|
|
}
|
|
|
|
/**
|
|
* The Component for the sidebar of the repo page
|
|
* @param {string} isPublic - A string that states whether the repository is private or public
|
|
* @param {tag} tags - The list of tags for the repository
|
|
* @param {object} repository - The list of properties for the repository
|
|
*/
|
|
class repoSidebar extends React.Component<ISidebar, {}> {
|
|
static propTypes = {
|
|
isPublic: React.PropTypes.string.isRequired,
|
|
tags: React.PropTypes.array.isRequired,
|
|
repository: React.PropTypes.object.isRequired
|
|
}
|
|
render () {
|
|
let isPublic: string = (this.props.isPublic) ? "Public" : "Private";
|
|
let sortedTags: Array<any> = [];
|
|
let tagRows: Array<any> = [];
|
|
let badgeIcon: string = (this.props.isPublic) ? "rp-badge__icon--public" : "rp-badge__icon--private";
|
|
let repository: any = this.props.repository;
|
|
let sharing: string = repository.company || repository.namespace;
|
|
|
|
for (let tagObject in this.props.tags) {
|
|
sortedTags.push({
|
|
name: this.props.tags[tagObject].name,
|
|
lastModified: Date.parse(this.props.tags[tagObject].last_modified)
|
|
});
|
|
}
|
|
|
|
sortedTags = sortedTags.sort(function(a, b) {
|
|
return b.lastModified - a.lastModified;
|
|
});
|
|
|
|
sortedTags.slice(0,5).forEach(function(el, i){
|
|
tagRows.push(
|
|
<tr>
|
|
<td>
|
|
<i className="fa fa-tag rp-imagesTable__tagIcon" aria-hidden="true"></i>
|
|
{el.name}
|
|
</td>
|
|
<td>
|
|
{moment(el.lastModified).fromNow()}
|
|
</td>
|
|
</tr>
|
|
);
|
|
});
|
|
|
|
return(
|
|
<div>
|
|
<div className="rp-badge">
|
|
<div className={badgeIcon}>
|
|
{isPublic}
|
|
</div>
|
|
</div>
|
|
<div className="rp-sharing">
|
|
{sharing} is sharing this container {this.props.isPublic ? "publically" : "privately"}
|
|
</div>
|
|
<div className="rp-imagesHeader">
|
|
Latest Images
|
|
</div>
|
|
<div>
|
|
<table className="co-table co-fixed-table rp-imagesTable">
|
|
<thead>
|
|
<tr>
|
|
<th className="rp-imagesTable__headerCell">NAME</th>
|
|
<th className="rp-imagesTable__headerCell">LAST MODIFIED</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{tagRows}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default repoSidebar;
|
|
|