Merge pull request #2115 from iminoso/layout

New repo-view page

static/js/directives/components/pages/repo-page/body.tsx

@@ -1,8 +1,40 @@
 import * as React from "react";
 
-class body extends React.Component<{}, {}> {
+interface IBody {
+  description: string
+}
+
+/**
+ * The Component for the main body of the repo page
+ * @param {string} description - The description of the repository
+ */
+class body extends React.Component<IBody, {}> {
+  static propTypes = {
+    description: React.PropTypes.string.isRequired,
+  }
   render () {
-    return <div> The component for the main content</div>;
+    let description: string = this.props.description;
+    if (description === "") {
+      description = "No Description";
+    }
+    return(
+      <div>
+        <ul className="nav nav-tabs rp-tabs">
+          <li className="active"><a href="#tab1" data-toggle="tab">Description</a></li>
+          <li><a href="#tab2" data-toggle="tab">Automated Builds</a></li>
+        </ul>
+          <div className="panel-body rp-panelBody">
+              <div className="tab-content">
+                  <div className="tab-pane in active" id="tab1">
+                    <div className="rp-description">{description}</div>
+                  </div>
+                  <div className="tab-pane" id="tab2">
+                    TODO (IAN): Convert the build directives to angular components
+                  </div>
+              </div>
+          </div>
+      </div>
+    );
   }
 }
 

static/js/directives/components/pages/repo-page/header.tsx

@@ -1,8 +1,41 @@
 import * as React from "react";
 
-class repoHeader extends React.Component<{}, {}> {
+interface IHeader {
+  name: string,
+  namespace: string
+}
+
+/**
+ * The Component for the header of the repo page
+ * @param {string} name - The name of the repository
+ * @param {string} namespace - The namespace of the repository 
+ */
+class repoHeader extends React.Component<IHeader, {}> {
+  static propTypes = {
+    name: React.PropTypes.string.isRequired,
+    namespace: React.PropTypes.string.isRequired
+  }
   render () {
-    return <div> The component for the header</div>;
+    return(
+      <div className="row rp-header__row">
+        <div className="rp-title">{this.props.namespace}/{this.props.name}</div>
+        <div className="rp-button">
+          <div className="dropdown">
+            <button className="btn rp-button__dropdown dropdown-toggle" type="button" data-toggle="dropdown">
+              <span className="rp-button__text">
+                Run with <span className="rp-button__text--bold">Docker</span>
+              </span>
+              <span className="caret"></span>
+            </button>
+            <ul className="dropdown-menu">
+              <li><a href="#">Squashed Docker Image</a></li>
+              <li><a href="#">Rocket Fetch</a></li>
+              <li><a href="#">Basic Docker Pull</a></li>
+            </ul>
+          </div>
+        </div>        
+      </div>      
+    );
   }
 }
 

static/js/directives/components/pages/repo-page/sidebar.tsx

@@ -1,8 +1,92 @@
 import * as React from "react";
+import * as moment from "moment";
 
-class repoSidebar extends React.Component<{}, {}> {
+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 () {
-    return <div> The component for the sidebar</div>;
+    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 a.lastModified - b.lastModified;
+    });
+
+    sortedTags.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>
+    );    
   }
 }