From 19fdb1d08fe1351aa2041496297129381b189397 Mon Sep 17 00:00:00 2001
From: Simone Gotti <simone.gotti@gmail.com>
Date: Tue, 2 Apr 2019 18:08:03 +0200
Subject: [PATCH] initial implementation of projectgroups

and related tree based navigation
---
 src/components/projbreadcrumbs.vue      | 38 ++++++++--
 src/components/projectgroupsettings.vue | 44 +++++++++++
 src/components/projects.vue             | 71 +++++++++++++-----
 src/components/projectsettings.vue      | 14 ++--
 src/components/run.vue                  |  8 +-
 src/components/rundetail.vue            | 17 ++---
 src/components/runs.vue                 | 26 ++-----
 src/router.js                           | 97 ++++++++++++++++++++-----
 src/util/data.js                        | 19 ++++-
 src/util/link.js                        | 61 ++++++++++++----
 src/views/Login.vue                     |  2 -
 src/views/Oauth2.vue                    |  3 +-
 src/views/Org.vue                       | 15 ++--
 src/views/Project.vue                   | 23 +++---
 src/views/ProjectGroup.vue              | 86 ++++++++++++++++++++++
 src/views/Register.vue                  |  3 -
 src/views/User.vue                      | 15 ++--
 17 files changed, 408 insertions(+), 134 deletions(-)
 create mode 100644 src/components/projectgroupsettings.vue
 create mode 100644 src/views/ProjectGroup.vue

diff --git a/src/components/projbreadcrumbs.vue b/src/components/projbreadcrumbs.vue
index 8571f74..944343b 100644
--- a/src/components/projbreadcrumbs.vue
+++ b/src/components/projbreadcrumbs.vue
@@ -1,11 +1,27 @@
 <template>
   <nav class="breadcrumb is-large" aria-label="breadcrumbs">
     <ul>
+      <li>
+        <a>{{ownertype}}</a>
+      </li>
       <li>
         <router-link :to="ownerLink(ownertype, ownername)">{{ownername}}</router-link>
       </li>
-      <li v-if="projectname">
-        <router-link :to="projectLink(ownertype, ownername, projectname)">{{projectname}}</router-link>
+      <li v-for="(ref, i) in projectref" v-bind:key="i">
+        <router-link
+          v-if="i+1 < projectref.length"
+          :to="projectGroupLink(ownertype, ownername, projectref.slice(0, i+1))"
+        >{{ref}}</router-link>
+        <router-link
+          v-else
+          :to="projectLink(ownertype, ownername, projectref.slice(0, i+1))"
+        >{{ref}}</router-link>
+      </li>
+
+      <li v-for="(ref, i) in projectgroupref" v-bind:key="i">
+        <router-link
+          :to="projectGroupLink(ownertype, ownername, projectgroupref.slice(0, i+1))"
+        >{{ref}}</router-link>
       </li>
     </ul>
   </nav>
@@ -13,7 +29,7 @@
 
 
 <script>
-import { ownerLink, projectLink } from "@/util/link.js";
+import { ownerLink, projectLink, projectGroupLink } from "@/util/link.js";
 
 export default {
   name: "projbreadcrumbs",
@@ -21,11 +37,23 @@ export default {
   props: {
     ownertype: String,
     ownername: String,
-    projectname: String
+    projectref: Array,
+    projectgroupref: Array
   },
   methods: {
     ownerLink: ownerLink,
-    projectLink: projectLink
+    projectLink: projectLink,
+    projectGroupLink: projectGroupLink
+  },
+  computed: {
+    // a computed getter
+    projectRef: function() {
+      // `this` points to the vm instance
+      return this.message
+        .split("")
+        .reverse()
+        .join("");
+    }
   }
 };
 </script>
diff --git a/src/components/projectgroupsettings.vue b/src/components/projectgroupsettings.vue
new file mode 100644
index 0000000..29688e2
--- /dev/null
+++ b/src/components/projectgroupsettings.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <projectvars :variables="variables" :allvariables="allvariables"/>
+  </div>
+</template>
+
+<script>
+import { fetchVariables } from "@/util/data.js";
+
+import projectvars from "@/components/projectvars";
+
+export default {
+  components: { projectvars },
+  name: "projectgroupsettings",
+  props: {
+    ownertype: String,
+    ownername: String,
+    projectgroupref: Array
+  },
+  data() {
+    return {
+      variables: [],
+      allvariables: []
+    };
+  },
+  created: async function() {
+    this.variables = await fetchVariables(
+      "projectgroup",
+      [this.ownertype, this.ownername, ...this.projectgroupref].join("/"),
+      false
+    );
+    this.allvariables = await fetchVariables(
+      "projectgroup",
+      [this.ownertype, this.ownername, ...this.projectgroupref].join("/"),
+      true
+    );
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "@/css/_variables.scss";
+</style>
+
diff --git a/src/components/projects.vue b/src/components/projects.vue
index aa2c679..45ba1fb 100644
--- a/src/components/projects.vue
+++ b/src/components/projects.vue
@@ -1,55 +1,90 @@
 <template>
   <div>
+    <h4 class="title is-4">Projects</h4>
     <div class="item-list" v-for="project in projects" v-bind:key="project.id">
-      <router-link tag="div" class="item" :to="projectURL(project)">
+      <router-link
+        tag="div"
+        class="item"
+        :to="projectLink(ownertype, ownername, ref(project.name))"
+      >
         <span class="name">{{project.name}}</span>
       </router-link>
     </div>
+
+    <hr>
+    <h4 class="title is-4">Project Groups</h4>
+    <div class="item-list" v-for="projectgroup in projectgroups" v-bind:key="projectgroup.id">
+      <router-link
+        tag="div"
+        class="item"
+        :to="projectGroupLink(ownertype, ownername, ref(projectgroup.name))"
+      >
+        <span class="name">{{projectgroup.name}}</span>
+      </router-link>
+    </div>
   </div>
 </template>
 
 <script>
 import { apiurl, fetch } from "@/util/auth";
+import { projectLink, projectGroupLink } from "@/util/link.js";
 
 export default {
   components: {},
   name: "Projects",
   props: {
     ownertype: String,
-    ownername: String
+    ownername: String,
+    projectgroupref: Array
   },
   data() {
     return {
       projects: [],
+      projectgroups: [],
       polling: null
     };
   },
+  watch: {
+    $route: async function() {
+      this.fetchProjects(this.ownertype, this.ownername);
+      this.fetchProjectGroups(this.ownertype, this.ownername);
+    }
+  },
   methods: {
-    projectURL(project) {
-      if (this.ownertype == "user") {
-        return {
-          name: "user project",
-          params: { username: this.ownername, projectname: project.name }
-        };
-      } else if (this.ownertype == "org") {
-        return {
-          name: "org project",
-          params: { orgname: this.ownername, projectname: project.name }
-        };
+    ref(name) {
+      let ref = [];
+      if (this.projectgroupref) {
+        ref = this.projectgroupref.slice(0);
       }
+      ref.push(name);
+      return ref;
     },
     async fetchProjects(ownertype, ownername) {
-      let path =
-        "/projectgroups/" + encodeURIComponent(ownertype + "/" + ownername);
+      let ref = [ownertype, ownername];
+      if (this.projectgroupref) {
+        ref.push(...this.projectgroupref);
+      }
+      let path = "/projectgroups/" + encodeURIComponent(ref.join("/"));
       path += "/projects";
       let res = await (await fetch(apiurl(path))).json();
-      console.log(res);
       this.projects = res;
-      console.log("projects", this.projects);
-    }
+    },
+    async fetchProjectGroups(ownertype, ownername) {
+      let ref = [ownertype, ownername];
+      if (this.projectgroupref) {
+        ref.push(...this.projectgroupref);
+      }
+      let path = "/projectgroups/" + encodeURIComponent(ref.join("/"));
+      path += "/subgroups";
+      let res = await (await fetch(apiurl(path))).json();
+      this.projectgroups = res;
+    },
+    projectLink: projectLink,
+    projectGroupLink: projectGroupLink
   },
   created: function() {
     this.fetchProjects(this.ownertype, this.ownername);
+    this.fetchProjectGroups(this.ownertype, this.ownername);
   }
 };
 </script>
diff --git a/src/components/projectsettings.vue b/src/components/projectsettings.vue
index 76cae92..28fcb53 100644
--- a/src/components/projectsettings.vue
+++ b/src/components/projectsettings.vue
@@ -15,7 +15,7 @@ export default {
   props: {
     ownertype: String,
     ownername: String,
-    projectname: String
+    projectref: Array
   },
   data() {
     return {
@@ -25,17 +25,15 @@ export default {
   },
   created: async function() {
     this.variables = await fetchVariables(
-      this.ownertype,
-      this.ownername,
-      this.projectname
+      "project",
+      [this.ownertype, this.ownername, ...this.projectref].join("/"),
+      false
     );
     this.allvariables = await fetchVariables(
-      this.ownertype,
-      this.ownername,
-      this.projectname,
+      "project",
+      [this.ownertype, this.ownername, ...this.projectref].join("/"),
       true
     );
-    console.log("variables", this.variables);
   }
 };
 </script>
diff --git a/src/components/run.vue b/src/components/run.vue
index 1563c14..d769ef7 100644
--- a/src/components/run.vue
+++ b/src/components/run.vue
@@ -44,7 +44,7 @@ export default {
   props: {
     ownertype: String,
     ownername: String,
-    projectname: String,
+    projectref: Array,
     runid: String
   },
   data() {
@@ -55,11 +55,11 @@ export default {
   },
   methods: {
     runTaskLink(task) {
-      if (this.projectname) {
+      if (this.projectref) {
         return projectRunTaskLink(
           this.ownertype,
           this.ownername,
-          this.projectname,
+          this.projectref,
           this.runid,
           task.id
         );
@@ -69,7 +69,6 @@ export default {
     },
     parents(task) {
       return task.depends.map(d => {
-        console.log(d.task_id);
         return this.run.tasks[d.task_id].name;
       });
     },
@@ -94,7 +93,6 @@ export default {
         )
         .map(k => this.run.tasks[k]);
       this.run.sortedTasks = sortedTasks;
-      console.log("run: ", this.run);
     },
     pollData() {
       this.polling = setInterval(() => {
diff --git a/src/components/rundetail.vue b/src/components/rundetail.vue
index 9a68e70..a0c4c75 100644
--- a/src/components/rundetail.vue
+++ b/src/components/rundetail.vue
@@ -94,7 +94,6 @@
 
 <script>
 import { apiurl, fetch } from "@/util/auth";
-import { userLocalRunTaskLink, projectRunTaskLink } from "@/util/link.js";
 
 export default {
   name: "RunDetail",
@@ -116,7 +115,7 @@ export default {
       return run.result;
     },
     runResultClass(run) {
-      status = this.runStatus(run);
+      let status = this.runStatus(run);
 
       if (status == "queued") return "unknown";
       if (status == "cancelled") return "failed";
@@ -142,11 +141,10 @@ export default {
           from_start: fromStart
         })
       });
-      console.log("r: " + r);
-      if (r.status == 200) {
-        return r.json();
+      if (res.status == 200) {
+        return res.json();
       }
-      throw Error(r.statusText);
+      throw Error(res.statusText);
     },
     async stopRun(run) {
       let res = fetch(apiurl("/run/" + run.id + "/actions"), {
@@ -155,11 +153,10 @@ export default {
           action_type: "stop"
         })
       });
-      console.log("r: " + r);
-      if (r.status == 200) {
-        return r.json();
+      if (res.status == 200) {
+        return res.json();
       }
-      throw Error(r.statusText);
+      throw Error(res.statusText);
     }
   }
 };
diff --git a/src/components/runs.vue b/src/components/runs.vue
index 6f6c863..48b37dd 100644
--- a/src/components/runs.vue
+++ b/src/components/runs.vue
@@ -15,7 +15,7 @@
             v-else
             tag="div"
             class="name"
-            :to="projectRunLink(ownertype, ownername, projectname, run.id)"
+            :to="projectRunLink(ownertype, ownername, projectref, run.id)"
           >
             <span>{{run.name}}</span>
           </router-link>
@@ -63,7 +63,7 @@
 
 <script>
 import { apiurl, fetch } from "@/util/auth";
-import { fetchRuns } from "@/util/data.js";
+import { fetchProject, fetchRuns } from "@/util/data.js";
 import { userLocalRunLink, projectRunLink } from "@/util/link.js";
 
 export default {
@@ -73,7 +73,7 @@ export default {
     ownertype: String,
     ownername: String,
     username: String,
-    projectname: String,
+    projectref: Array,
     query: String
   },
   data() {
@@ -85,7 +85,7 @@ export default {
     };
   },
   watch: {
-    $route: function(route) {
+    $route: function() {
       this.update();
     }
   },
@@ -108,9 +108,7 @@ export default {
     },
     update() {
       clearInterval(this.polling);
-      console.log("username", this.username);
-      console.log("projectname", this.projectname);
-      if (this.projectname !== undefined) {
+      if (this.projectref !== undefined) {
         this.fetchProject();
       } else if (this.username !== undefined) {
         this.fetchUser();
@@ -120,23 +118,15 @@ export default {
       this.pollData();
     },
     async fetchProject() {
-      let path =
-        "/projects/" +
-        encodeURIComponent(
-          this.ownertype + "/" + this.ownername + "/" + this.projectname
-        );
-      let res = await (await fetch(apiurl(path))).json();
-      console.log(res);
-      this.project = res;
-      console.log("project", this.project);
+      this.project = await fetchProject(
+        [this.ownertype, this.ownername, ...this.projectref].join("/")
+      );
 
       this.fetchRuns();
     },
     async fetchUser() {
       let res = await (await fetch(apiurl("/users/" + this.username))).json();
-      console.log(res);
       this.user = res;
-      console.log("user", this.user);
 
       this.fetchRuns();
     },
diff --git a/src/router.js b/src/router.js
index 1ca0040..4c4889d 100644
--- a/src/router.js
+++ b/src/router.js
@@ -4,9 +4,11 @@ import Home from "./views/Home.vue";
 import User from "./views/User.vue";
 import Org from "./views/Org.vue";
 import Project from "./views/Project.vue";
+import ProjectGroup from "./views/ProjectGroup.vue";
 //import Run from "./views/Run.vue";
 import projects from "./components/projects.vue";
 import projectsettings from "./components/projectsettings.vue";
+import projectgroupsettings from "./components/projectgroupsettings.vue";
 import runs from "./components/runs.vue";
 import run from "./components/run.vue";
 import task from "./components/task.vue";
@@ -15,6 +17,8 @@ import Register from "./views/Register.vue";
 import Login from "./views/Login.vue";
 import Logout from "./views/Logout.vue";
 
+import { parseRef } from "@/util/link.js";
+
 Vue.use(VueRouter);
 
 export default new VueRouter({
@@ -83,60 +87,87 @@ export default new VueRouter({
       ]
     },
     {
-      path: "/user/:username/projects/:projectname",
+      path: "/user/:username/projects/:projectref(.*\\.proj)",
       component: Project,
-      props: (route) => ({ ownertype: "user", ownername: route.params.username, projectname: route.params.projectname }),
+      props: (route) => ({ ownertype: "user", ownername: route.params.username, projectref: parseRef(route.params.projectref) }),
       children: [
         {
           path: "",
           name: "user project",
           component: runs,
-          props: (route) => ({ ownertype: "user", ownername: route.params.username, projectname: route.params.projectname })
+          props: (route) => ({ ownertype: "user", ownername: route.params.username, projectref: parseRef(route.params.projectref) })
         },
         {
           path: "runs",
           name: "user project runs",
           component: runs,
-          props: (route) => ({ ownertype: "user", ownername: route.params.username, projectname: route.params.projectname })
+          props: (route) => ({ ownertype: "user", ownername: route.params.username, projectref: parseRef(route.params.projectref) })
         },
         {
           path: "branches",
           name: "user project branches runs",
           component: runs,
-          props: (route) => ({ ownertype: "user", ownername: route.params.username, projectname: route.params.projectname, query: "branches" })
+          props: (route) => ({ ownertype: "user", ownername: route.params.username, projectref: parseRef(route.params.projectref), query: "branches" })
         },
         {
           path: "tags",
           name: "user project tags runs",
           component: runs,
-          props: (route) => ({ ownertype: "user", ownername: route.params.username, projectname: route.params.projectname, query: "tags" })
+          props: (route) => ({ ownertype: "user", ownername: route.params.username, projectref: parseRef(route.params.projectref), query: "tags" })
         },
         {
           path: "pullrequests",
           name: "user project pull requests runs",
           component: runs,
-          props: (route) => ({ ownertype: "user", ownername: route.params.username, projectname: route.params.projectname, query: "pullrequests" })
+          props: (route) => ({ ownertype: "user", ownername: route.params.username, projectref: parseRef(route.params.projectref), query: "pullrequests" })
         },
         {
           path: "runs/:runid",
           name: "user project run",
           component: run,
-          props: (route) => ({ ownertype: "user", ownername: route.params.username, projectname: route.params.projectname, runid: route.params.runid })
+          props: (route) => ({ ownertype: "user", ownername: route.params.username, projectref: parseRef(route.params.projectref), runid: route.params.runid })
         },
         {
           path: "runs/:runid/tasks/:taskid",
           name: "user project run task",
           component: task,
-          props: (route) => ({ ownertype: "user", ownername: route.params.username, projectname: route.params.projectname, runid: route.params.runid, taskid: route.params.taskid })
+          props: (route) => ({ ownertype: "user", ownername: route.params.username, projectref: parseRef(route.params.projectref), runid: route.params.runid, taskid: route.params.taskid })
         },
         {
           path: "settings",
           name: "user project settings",
           component: projectsettings,
-          props: (route) => ({ ownertype: "user", ownername: route.params.username, projectname: route.params.projectname })
+          props: (route) => ({ ownertype: "user", ownername: route.params.username, projectref: parseRef(route.params.projectref) })
         },
       ]
     },
+
+    {
+      path: "/user/:username/projectgroups/:projectgroupref(.*\\.proj)",
+      component: ProjectGroup,
+      props: (route) => ({ ownertype: "user", ownername: route.params.username, projectgroupref: parseRef(route.params.projectgroupref) }),
+      children: [
+        {
+          path: "",
+          name: "user project group",
+          component: projects,
+          props: (route) => ({ ownertype: "user", ownername: route.params.username, projectgroupref: parseRef(route.params.projectgroupref) }),
+        },
+        {
+          path: "projects",
+          name: "user project group projects",
+          component: projects,
+          props: (route) => ({ ownertype: "user", ownername: route.params.username, projectgroupref: parseRef(route.params.projectgroupref) })
+        },
+        {
+          path: "settings",
+          name: "user project group settings",
+          component: projectgroupsettings,
+          props: (route) => ({ ownertype: "user", ownername: route.params.username, projectgroupref: parseRef(route.params.projectgroupref) })
+        },
+      ]
+    },
+
     {
       path: "/org/:orgname",
       component: Org,
@@ -158,57 +189,83 @@ export default new VueRouter({
     },
 
     {
-      path: "/org/:orgname/projects/:projectname",
+      path: "/org/:orgname/projects/:projectref(.*\\.proj)",
       component: Project,
-      props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectname: route.params.projectname }),
+      props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectref: parseRef(route.params.projectref) }),
       children: [
         {
           path: "",
           name: "org project",
           component: runs,
-          props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectname: route.params.projectname })
+          props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectref: parseRef(route.params.projectref) })
         },
         {
           path: "runs",
           name: "org project runs",
           component: runs,
-          props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectname: route.params.projectname })
+          props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectref: parseRef(route.params.projectref) })
         },
         {
           path: "branches",
           name: "org project branches runs",
           component: runs,
-          props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectname: route.params.projectname, query: "branches" })
+          props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectref: parseRef(route.params.projectref), query: "branches" })
         },
         {
           path: "tags",
           name: "org project tags runs",
           component: runs,
-          props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectname: route.params.projectname, query: "tags" })
+          props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectref: parseRef(route.params.projectref), query: "tags" })
         },
         {
           path: "pullrequests",
           name: "org project pull requests runs",
           component: runs,
-          props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectname: route.params.projectname, query: "pullrequests" })
+          props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectref: parseRef(route.params.projectref), query: "pullrequests" })
         },
         {
           path: "runs/:runid",
           name: "org project run",
           component: run,
-          props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectname: route.params.projectname, runid: route.params.runid })
+          props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectref: parseRef(route.params.projectref), runid: route.params.runid })
         },
         {
           path: "runs/:runid/tasks/:taskid",
           name: "org project run task",
           component: task,
-          props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectname: route.params.projectname, runid: route.params.runid, taskid: route.params.taskid })
+          props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectref: parseRef(route.params.projectref), runid: route.params.runid, taskid: route.params.taskid })
         },
         {
           path: "settings",
           name: "org project settings",
           component: projectsettings,
-          props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectname: route.params.projectname })
+          props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectref: parseRef(route.params.projectref) })
+        },
+      ]
+    },
+
+    {
+      path: "/org/:orgname/projectgroups/:projectgroupref(.*\\.proj)",
+      component: ProjectGroup,
+      props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectgroupref: parseRef(route.params.projectgroupref) }),
+      children: [
+        {
+          path: "",
+          name: "org project group",
+          component: projects,
+          props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectgroupref: parseRef(route.params.projectgroupref) }),
+        },
+        {
+          path: "projects",
+          name: "org project group projects",
+          component: projects,
+          props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectgroupref: parseRef(route.params.projectgroupref) })
+        },
+        {
+          path: "settings",
+          name: "org project group settings",
+          component: projectgroupsettings,
+          props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectgroupref: parseRef(route.params.projectgroupref) })
         },
       ]
     },
diff --git a/src/util/data.js b/src/util/data.js
index 911c549..3162109 100644
--- a/src/util/data.js
+++ b/src/util/data.js
@@ -22,10 +22,21 @@ export async function fetchTask(runid, taskid) {
     return res.json();
 }
 
-export async function fetchVariables(ownertype, ownername, projectname, all) {
-    let path =
-        "/projects/" +
-        encodeURIComponent(ownertype + "/" + ownername + "/" + projectname);
+export async function fetchProject(ref) {
+    let path = "/projects/" + encodeURIComponent(ref)
+
+    let res = await fetch(apiurl(path));
+    return res.json();
+}
+
+export async function fetchVariables(ownertype, ref, all) {
+    let path
+    if (ownertype == "project") {
+        path = "/projects/"
+    } else if (ownertype == "projectgroup") {
+        path = "/projectgroups/"
+    }
+    path += encodeURIComponent(ref);
     path += "/variables";
     if (all) {
         path += "?tree&removeoverridden";
diff --git a/src/util/link.js b/src/util/link.js
index eeaf3eb..a6ae07d 100644
--- a/src/util/link.js
+++ b/src/util/link.js
@@ -1,3 +1,7 @@
+export function parseRef(ref) {
+    ref = ref.replace(/\.proj/, "")
+    return ref.split("/")
+}
 
 export function ownerLink(ownertype, ownername) {
     if (ownertype == "user") {
@@ -11,6 +15,10 @@ export function ownerProjectsLink(ownertype, ownername) {
     return { name: ownertype + " projects", params: { ownername: ownername } }
 }
 
+export function projectGroupProjectsLink(ownertype, ownername) {
+    return { name: ownertype + " project group projects", params: { ownername: ownername } }
+}
+
 export function userLocalRunsLink(username) {
     return { name: "user local runs", params: { username: username } }
 }
@@ -23,34 +31,55 @@ export function userLocalRunTaskLink(username, runid, taskid) {
     return { name: "user local run task", params: { username: username, runid: runid, taskid: taskid } }
 }
 
-export function projectLink(ownertype, ownername, projectname) {
-    return { name: ownertype + " project", params: { username: ownername, projectname: projectname } }
+// Note, when creating a router link containing a project/projectgroup ref (a
+// path), unfortunately, we cannot use route name and params since it will path
+// escape it
+export function projectGroupLink(ownertype, ownername, projectgroupref) {
+    let projectgrouppath = (projectgroupref.join("/") + ".proj")
+    return { path: `/${ownertype}/${ownername}/projectgroups/${projectgrouppath}`, }
 }
 
-export function projectRunsLink(ownertype, ownername, projectname) {
-    return { name: ownertype + " project runs", params: { orgname: ownername, projectname: projectname } }
+export function projectLink(ownertype, ownername, projectref) {
+    let projectpath = (projectref.join("/") + ".proj")
+    return { path: `/${ownertype}/${ownername}/projects/${projectpath}` }
 }
 
-export function projectBranchesRunsLink(ownertype, ownername, projectname) {
-    return { name: ownertype + " project branches runs", params: { orgname: ownername, projectname: projectname } }
+export function projectRunsLink(ownertype, ownername, projectref) {
+    let projectpath = (projectref.join("/") + ".proj")
+    return { path: `/${ownertype}/${ownername}/projects/${projectpath}/runs` }
 }
 
-export function projectTagsRunsLink(ownertype, ownername, projectname) {
-    return { name: ownertype + " project tags runs", params: { orgname: ownername, projectname: projectname } }
+export function projectBranchesRunsLink(ownertype, ownername, projectref) {
+    let projectpath = (projectref.join("/") + ".proj")
+    return { path: `/${ownertype}/${ownername}/projects/${projectpath}/branches`, }
 }
 
-export function projectPRsRunsLink(ownertype, ownername, projectname) {
-    return { name: ownertype + " project pull requests runs", params: { orgname: ownername, projectname: projectname } }
+export function projectTagsRunsLink(ownertype, ownername, projectref) {
+    let projectpath = (projectref.join("/") + ".proj")
+    return { path: `/${ownertype}/${ownername}/projects/${projectpath}/tags`, }
 }
 
-export function projectRunLink(ownertype, ownername, projectname, runid) {
-    return { name: ownertype + " project run", params: { orgname: ownername, projectname: projectname, runid: runid } }
+export function projectPRsRunsLink(ownertype, ownername, projectref) {
+    let projectpath = (projectref.join("/") + ".proj")
+    return { path: `/${ownertype}/${ownername}/projects/${projectpath}/pullrequests`, }
 }
 
-export function projectRunTaskLink(ownertype, ownername, projectname, runid, taskid) {
-    return { name: ownertype + " project run task", params: { orgname: ownername, projectname: projectname, runid: runid, taskid: taskid } }
+export function projectRunLink(ownertype, ownername, projectref, runid) {
+    let projectpath = (projectref.join("/") + ".proj")
+    return { path: `/${ownertype}/${ownername}/projects/${projectpath}/runs/${runid}`, }
 }
 
-export function projectSettingsLink(ownertype, ownername, projectname) {
-    return { name: ownertype + " project settings", params: { username: ownername, projectname: projectname } }
+export function projectRunTaskLink(ownertype, ownername, projectref, runid, taskid) {
+    let projectpath = (projectref.join("/") + ".proj")
+    return { path: `/${ownertype}/${ownername}/projects/${projectpath}/runs/${runid}/tasks/${taskid}`, }
+}
+
+export function projectGroupSettingsLink(ownertype, ownername, projectgroupref) {
+    let projectgrouppath = (projectgroupref.join("/") + ".proj")
+    return { path: `/${ownertype}/${ownername}/projectgroups/${projectgrouppath}/settings`, }
+}
+
+export function projectSettingsLink(ownertype, ownername, projectref) {
+    let projectpath = (projectref.join("/") + ".proj")
+    return { path: `/${ownertype}/${ownername}/projects/${projectpath}/settings`, }
 }
\ No newline at end of file
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 2fdd4f5..17b00cb 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -35,7 +35,6 @@ export default {
   methods: {
     async getRemoteSources() {
       let res = await (await fetch(apiurl("/remotesources"))).json();
-      console.log("remote sources result", res);
       this.remotesources = res;
     },
     async doLogin(rsName, username, password) {
@@ -48,7 +47,6 @@ export default {
           password: password
         })
       })).json();
-      console.log("login result", res);
       if (res.oauth2_redirect) {
         window.location = res.oauth2_redirect;
         return;
diff --git a/src/views/Oauth2.vue b/src/views/Oauth2.vue
index c0f3686..e993693 100644
--- a/src/views/Oauth2.vue
+++ b/src/views/Oauth2.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { apiurl, oauth2callbackurl, login, fetch } from "@/util/auth";
+import { oauth2callbackurl, login, fetch } from "@/util/auth";
 
 export default {
   components: {},
@@ -26,7 +26,6 @@ export default {
       u.searchParams.append("code", this.$route.query.code);
       u.searchParams.append("state", this.$route.query.state);
       let res = await (await fetch(u)).json();
-      console.log("oauth2 result", res);
       if (res.request_type === "loginuser") {
         login(res.response.token, res.response.user);
         this.$router.push("/");
diff --git a/src/views/Org.vue b/src/views/Org.vue
index aae1040..fba7ea5 100644
--- a/src/views/Org.vue
+++ b/src/views/Org.vue
@@ -1,10 +1,15 @@
 <template>
   <div>
-    <div class="org-title">
-      <router-link class="org-name" :to="ownerLink('org', orgname)">
-        <span>{{orgname}}</span>
-      </router-link>
-    </div>
+    <nav class="breadcrumb is-large" aria-label="breadcrumbs">
+      <ul>
+        <li>
+          <a>org</a>
+        </li>
+        <li>
+          <router-link :to="ownerLink('org', orgname)">{{orgname}}</router-link>
+        </li>
+      </ul>
+    </nav>
     <div class="tabs">
       <ul>
         <li :class="[{ 'is-active': $route.name === 'org projects' || $route.name === 'org' }]">
diff --git a/src/views/Project.vue b/src/views/Project.vue
index fc484c4..6fada92 100644
--- a/src/views/Project.vue
+++ b/src/views/Project.vue
@@ -1,21 +1,21 @@
 <template>
   <div>
-    <projbreadcrumbs :ownertype="ownertype" :ownername="ownername" :projectname="projectname"/>
+    <projbreadcrumbs :ownertype="ownertype" :ownername="ownername" :projectref="projectref"/>
     <div class="tabs">
       <ul>
         <li
           :class="[{ 'is-active': $route.name.match('project runs') || $route.name.endsWith('project') }]"
         >
-          <router-link :to="projectRunsLink(ownertype, ownername, projectname)">Runs History</router-link>
+          <router-link :to="projectRunsLink(ownertype, ownername, projectref)">Runs History</router-link>
         </li>
         <li :class="[{ 'is-active': $route.name.match('project branches runs') }]">
-          <router-link :to="projectBranchesRunsLink(ownertype, ownername, projectname)">Branches</router-link>
+          <router-link :to="projectBranchesRunsLink(ownertype, ownername, projectref)">Branches</router-link>
         </li>
         <li :class="[{ 'is-active': $route.name.match('project tags runs') }]">
-          <router-link :to="projectTagsRunsLink(ownertype, ownername, projectname)">Tags</router-link>
+          <router-link :to="projectTagsRunsLink(ownertype, ownername, projectref)">Tags</router-link>
         </li>
         <li :class="[{ 'is-active': $route.name.match('project pull requests runs') }]">
-          <router-link :to="projectPRsRunsLink(ownertype, ownername, projectname)">Pull Requests</router-link>
+          <router-link :to="projectPRsRunsLink(ownertype, ownername, projectref)">Pull Requests</router-link>
         </li>
         <li
           v-if="$route.name.endsWith('project run') || $route.name.endsWith('project run task')"
@@ -27,9 +27,7 @@
           v-if="$route.name.endsWith('project run') || $route.name.endsWith('project run task')"
           :class="[{ 'is-active': $route.name.endsWith('project run') }]"
         >
-          <router-link
-            :to="projectRunLink(ownertype, ownername, $route.params.projectname, $route.params.runid)"
-          >
+          <router-link :to="projectRunLink(ownertype, ownername, projectref, $route.params.runid)">
             <p v-if="run">
               Run
               <strong>#{{run.counter}}</strong>
@@ -44,7 +42,7 @@
         </li>
         <li v-if="$route.name.endsWith('project run task')" class="is-active">
           <router-link
-            :to="projectRunTaskLink(ownertype, ownername, $route.params.projectname, $route.params.runid, $route.params.taskid)"
+            :to="projectRunTaskLink(ownertype, ownername, projectref, $route.params.runid, $route.params.taskid)"
           >
             <p v-if="run">
               Task
@@ -55,7 +53,7 @@
       </ul>
       <ul class="is-right">
         <li :class="[{ 'is-active': $route.name.endsWith('project settings') }]">
-          <router-link :to="projectSettingsLink(ownertype, ownername, projectname)">Project Settings</router-link>
+          <router-link :to="projectSettingsLink(ownertype, ownername, projectref)">Project Settings</router-link>
         </li>
       </ul>
     </div>
@@ -79,16 +77,15 @@ import {
 import { fetchRun } from "@/util/data.js";
 
 import projbreadcrumbs from "@/components/projbreadcrumbs.vue";
-import runs from "@/components/runs.vue";
 import tabarrow from "@/components/tabarrow.vue";
 
 export default {
   name: "Project",
-  components: { projbreadcrumbs, runs, tabarrow },
+  components: { projbreadcrumbs, tabarrow },
   props: {
     ownertype: String,
     ownername: String,
-    projectname: String
+    projectref: Array
   },
   data() {
     return {
diff --git a/src/views/ProjectGroup.vue b/src/views/ProjectGroup.vue
new file mode 100644
index 0000000..21ab565
--- /dev/null
+++ b/src/views/ProjectGroup.vue
@@ -0,0 +1,86 @@
+
+<template>
+  <div>
+    <projbreadcrumbs
+      :ownertype="ownertype"
+      :ownername="ownername"
+      :projectgroupref="projectgroupref"
+    />
+    <div class="tabs">
+      <ul>
+        <li
+          :class="[{ 'is-active': $route.name.match('project group project') || $route.name.endsWith('project group') }]"
+        >
+          <router-link :to="projectGroupProjectsLink(ownertype, ownername)">Projects</router-link>
+        </li>
+      </ul>
+      <ul class="is-right">
+        <li :class="[{ 'is-active': $route.name.endsWith('project group settings') }]">
+          <router-link
+            :to="projectGroupSettingsLink(ownertype, ownername, projectgroupref)"
+          >Project Group Settings</router-link>
+        </li>
+      </ul>
+    </div>
+    <router-view></router-view>
+  </div>
+</template>
+
+
+<script>
+import {
+  projectGroupProjectsLink,
+  projectGroupSettingsLink
+} from "@/util/link.js";
+
+import { fetchRun } from "@/util/data.js";
+
+import projbreadcrumbs from "@/components/projbreadcrumbs.vue";
+
+export default {
+  name: "ProjectGroup",
+  components: { projbreadcrumbs },
+  props: {
+    ownertype: String,
+    ownername: String,
+    projectgroupref: Array
+  },
+  data() {
+    return {
+      run: null
+    };
+  },
+  watch: {
+    $route: async function(route) {
+      if (route.params.runid) {
+        this.run = await fetchRun(route.params.runid);
+      }
+    }
+  },
+  methods: {
+    projectGroupProjectsLink: projectGroupProjectsLink,
+    projectGroupSettingsLink: projectGroupSettingsLink
+  },
+  created: async function() {
+    if (this.$route.params.runid) {
+      this.run = await fetchRun(this.$route.params.runid);
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "@/css/_variables.scss";
+
+.user-title {
+  display: flex;
+  align-items: center;
+  padding-left: 5px;
+  margin-bottom: 25px;
+  .user-name {
+    padding-left: 5px;
+    font-size: 1.5rem;
+    padding-right: 1rem;
+  }
+}
+</style>
diff --git a/src/views/Register.vue b/src/views/Register.vue
index 3c5f3a9..0ca1f84 100644
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -50,7 +50,6 @@ export default {
   methods: {
     async getRemoteSources() {
       let res = await (await fetch(apiurl("/remotesources"))).json();
-      console.log("remote sources result", res);
       this.remotesources = res;
     },
     async doAuthorize(rsName, username, password) {
@@ -64,7 +63,6 @@ export default {
         })
       })).json();
 
-      console.log("login result", res);
       if (res.oauth2_redirect) {
         window.location = res.oauth2_redirect;
         return;
@@ -93,7 +91,6 @@ export default {
         })
       })).json();
 
-      console.log("register result", res);
       if (res.oauth2_redirect) {
         window.location = res.oauth2_redirect;
         return;
diff --git a/src/views/User.vue b/src/views/User.vue
index 6928c5c..32797bd 100644
--- a/src/views/User.vue
+++ b/src/views/User.vue
@@ -1,10 +1,15 @@
 <template>
   <div>
-    <div class="user-title">
-      <router-link class="user-name" :to="ownerLink('user', username)">
-        <span>{{username}}</span>
-      </router-link>
-    </div>
+    <nav class="breadcrumb is-large" aria-label="breadcrumbs">
+      <ul>
+        <li>
+          <a>user</a>
+        </li>
+        <li>
+          <router-link :to="ownerLink('user', username)">{{username}}</router-link>
+        </li>
+      </ul>
+    </nav>
     <div class="tabs">
       <ul>
         <li :class="[{ 'is-active': $route.name === 'user projects' || $route.name === 'user' }]">