Make package lists of origin/name/version work

* Set the `depotUrl` in habitat.conf.js to "http://52.37.151.35:9632"
* Go to http://localhost:3000/#/pkgs/chef/discourse
* A list of discourse packages in the chef origin should show up
* Clicking on the breadcrumbs should work as expected

web/app/AppComponent.ts

@@ -84,6 +84,16 @@ import {removeNotification, routeChange} from "./actions/index";
         name: "PackagesForOrigin",
         component: PackagesPageComponent
     },
+    {
+        path: "/pkgs/:origin/:name",
+        name: "PackagesForOriginAndName",
+        component: PackagesPageComponent,
+    },
+    {
+        path: "/pkgs/:origin/:name/:version",
+        name: "PackagesForOriginAndNameAndVersion",
+        component: PackagesPageComponent,
+    },
     {
         path: "/pkgs/:origin/:name/:version/:release",
         name: "Package",

web/app/PackageBreadcrumbsComponent.ts

@@ -0,0 +1,49 @@
+import {Component} from "angular2/core";
+import {RouterLink} from "angular2/router";
+
+@Component({
+    directives: [RouterLink],
+    inputs: ["ident", "params"],
+    selector: "package-breadcrumbs",
+    template: `
+    <span class="hab-package-breadcrumbs">
+        <span *ngIf="showAll">All Packages</span>
+        <span *ngIf="params.filter === 'mine'">My Packages</span>
+        <a *ngIf="!ident.origin && !params.filter && !showAll" [routerLink]="['Packages']">*</a>
+        <a [routerLink]="['PackagesForOrigin',
+            { origin: ident.origin }]">
+            {{ident.origin}}
+        </a>
+        <span *ngIf="ident.name">/</span>
+        <a [routerLink]="['PackagesForOriginAndName',
+            { origin: ident.origin,
+                name: ident.name }]">
+            {{ident.name}}
+        </a>
+        <span *ngIf="ident.version">/</span>
+        <a [routerLink]="['PackagesForOriginAndNameAndVersion',
+            { origin: ident.origin, name: ident.name,
+                version: ident.version }]">
+            {{ident.version}}
+        </a>
+        <span *ngIf="ident.release">/</span>
+        <a [routerLink]="['Package',
+            { origin: ident.origin, name: ident.name,
+                version: ident.version, release: ident.release }]">
+            {{ident.release}}
+        </a>
+    </span>`
+})
+
+export class PackageBreadcrumbsComponent {
+    private ident;
+    private params;
+
+    constructor() {
+        this.params = this.params || {};
+    }
+
+    get showAll() {
+        return Object.keys(this.ident).length === 0;
+    }
+}

web/app/package-page/PackagePageComponent.ts

@@ -7,13 +7,14 @@
 import {AppStore} from "../AppStore";
 import {Component, OnInit} from "angular2/core";
 import {Package} from "../records/Package";
+import {PackageBreadcrumbsComponent} from "../PackageBreadcrumbsComponent";
 import {PackageListComponent} from "./PackageListComponent";
 import {RouteParams, RouterLink} from "angular2/router";
 import {isPackage, packageString} from "../util";
 import {fetchPackage} from "../actions/index";
 
 @Component({
-    directives: [PackageListComponent, RouterLink],
+    directives: [PackageBreadcrumbsComponent, PackageListComponent, RouterLink],
     template: `
     <div>
         <div *ngIf="!package" class="hab-package">
@@ -23,15 +24,8 @@ import {fetchPackage} from "../actions/index";
         </div>
         <div *ngIf="package" class="hab-package">
             <h2>
-                <a [routerLink]="['PackagesForOrigin', { origin: package.ident.origin }]">
-                    {{package.ident.origin}}
-                </a>
-                /
-                {{package.ident.name}}
-                /
-                {{package.ident.version}}
-                /
-                {{package.ident.release}}
+                <package-breadcrumbs [ident]="package.ident">
+                </package-breadcrumbs>
             </h2>
             <div class="hab-package-info">
                 <dl>

web/app/packages-page/PackagesPageComponent.ts

@@ -4,24 +4,20 @@
 // this file ("Licensee") apply to Licensee's use of the Software until such time that the Software
 // is made available under an open source license such as the Apache 2.0 License.
 
-import {AppStore} from "../AppStore";
 import {Component, OnInit} from "angular2/core";
 import {RouteParams, RouterLink} from "angular2/router";
+import {AppStore} from "../AppStore";
+import {PackageBreadcrumbsComponent} from "../PackageBreadcrumbsComponent";
 import {filterPackagesBy, requestRoute} from "../actions/index";
 
 @Component({
-    directives: [RouterLink],
+    directives: [PackageBreadcrumbsComponent, RouterLink],
     template: `
     <div class="hab-packages">
         <h2>
-            <span *ngIf="filter === 'mine'">My Packages</span>
-            <span *ngIf="showAll">All Packages</span>
-            <span *ngIf="origin">{{origin}}</span>
-            <span *ngIf="name">
-                <a [routerLink]="['Packages']">*</a>
-                /
-                {{name}}
-            </span>
+            <package-breadcrumbs [ident]="routeParams.params"
+                [params]="routeParams.params">
+            </package-breadcrumbs>
         </h2>
         <hr>
         <ul class="hab-packages-plan-list">
@@ -51,26 +47,10 @@ import {filterPackagesBy, requestRoute} from "../actions/index";
 export class PackagesPageComponent implements OnInit {
     constructor(private store: AppStore, private routeParams: RouteParams) { }
 
-    get origin() {
-        return this.routeParams.params["origin"];
-    }
-
-    get filter() {
-        return this.routeParams.params["filter"];
-    }
-
-    get name() {
-        return this.routeParams.params["name"];
-    }
-
     get packages() {
         return this.store.getState().packages.visible;
     }
 
-    get showAll() {
-        return Object.keys(this.routeParams.params).length === 0;
-    }
-
     ngOnInit() {
         if (!this.store.getState().user.isSignedIn) {
             this.store.dispatch(requestRoute(["Home"]));