project: show last branches, tags, PRs runs

src/components/runs.vue

@@ -63,6 +63,7 @@
 
 <script>
 import { apiurl, fetch } from "@/util/auth";
+import { fetchRuns } from "@/util/data.js";
 import { userLocalRunLink, projectRunLink } from "@/util/link.js";
 
 export default {
@@ -72,7 +73,8 @@ export default {
     ownertype: String,
     ownername: String,
     username: String,
-    projectname: String
+    projectname: String,
+    query: String
   },
   data() {
     return {
@@ -82,6 +84,11 @@ export default {
       user: null
     };
   },
+  watch: {
+    $route: function(route) {
+      this.update();
+    }
+  },
   methods: {
     projectRunLink: projectRunLink,
     userLocalRunLink: userLocalRunLink,
@@ -99,7 +106,20 @@ export default {
       if (run.result == "stopped") return "failed";
       return "unknown";
     },
-    fetchProjectRuns() {
+    update() {
+      clearInterval(this.polling);
+      console.log("username", this.username);
+      console.log("projectname", this.projectname);
+      if (this.projectname !== undefined) {
+        this.fetchProject();
+      } else if (this.username !== undefined) {
+        this.fetchUser();
+      } else {
+        this.fetchRuns();
+      }
+      this.pollData();
+    },
+    fetchProject() {
       let path =
         "/projects/" +
         encodeURIComponent(
@@ -115,7 +135,7 @@ export default {
           this.fetchRuns();
         });
     },
-    fetchUserRuns() {
+    fetchUser() {
       fetch(apiurl("/users/" + this.username))
         .then(res => res.json())
         .then(res => {
@@ -126,44 +146,37 @@ export default {
           this.fetchRuns();
         });
     },
-    fetchRuns() {
+    async fetchRuns() {
-      let u = apiurl("/runs");
+      let group;
-      //console.log("this.project.id", this.project.id);
+      let lastrun = false;
-      console.log("u", u);
       if (this.project !== null) {
-        u.searchParams.append("group", this.project.id);
+        if (this.query == "branches") {
+          group = "project/" + this.project.id + "/branch";
+          lastrun = true;
+        } else if (this.query == "tags") {
+          group = "project/" + this.project.id + "/tag";
+          lastrun = true;
+        } else if (this.query == "pullrequests") {
+          group = "project/" + this.project.id + "/pr";
+          lastrun = true;
+        } else {
+          group = "project/" + this.project.id;
+        }
       } else if (this.user !== null) {
-        u.searchParams.append("group", this.user.id);
+        group = "user/" + this.user.id;
       }
 
-      fetch(u)
+      this.runs = await fetchRuns(group, lastrun);
-        .then(res => res.json())
-        .then(res => {
-          console.log(res);
-          let runs = res.map(function(run) {
-            return run;
-          });
-          this.runs = runs;
-          console.log("runs", this.runs);
-        });
     },
     pollData() {
+      clearInterval(this.polling);
       this.polling = setInterval(() => {
         this.fetchRuns();
       }, 2000);
     }
   },
   created: function() {
-    console.log("username", this.username);
+    this.update();
-    console.log("projectname", this.projectname);
-    if (this.projectname !== undefined) {
-      this.fetchProjectRuns();
-    } else if (this.username !== undefined) {
-      this.fetchUserRuns();
-    } else {
-      this.fetchRuns();
-    }
-    this.pollData();
   },
   beforeDestroy() {
     clearInterval(this.polling);

src/router.js

@@ -93,6 +93,24 @@ export default new VueRouter({
           component: runs,
           props: (route) => ({ ownertype: "user", ownername: route.params.username, projectname: route.params.projectname })
         },
+        {
+          path: "branches",
+          name: "user project branches runs",
+          component: runs,
+          props: (route) => ({ ownertype: "user", ownername: route.params.username, projectname: route.params.projectname, 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" })
+        },
+        {
+          path: "pullrequests",
+          name: "user project pull requests runs",
+          component: runs,
+          props: (route) => ({ ownertype: "user", ownername: route.params.username, projectname: route.params.projectname, query: "pullrequests" })
+        },
         {
           path: "runs/:runid",
           name: "user project run",
@@ -137,6 +155,24 @@ export default new VueRouter({
           component: runs,
           props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectname: route.params.projectname })
         },
+        {
+          path: "branches",
+          name: "org project branches runs",
+          component: runs,
+          props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectname: route.params.projectname, 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" })
+        },
+        {
+          path: "pullrequests",
+          name: "org project pull requests runs",
+          component: runs,
+          props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectname: route.params.projectname, query: "pullrequests" })
+        },
         {
           path: "runs/:runid",
           name: "org project run",

src/util/data.js

@@ -1,5 +1,17 @@
 import { apiurl, fetch } from "@/util/auth";
 
+export async function fetchRuns(group, lastrun) {
+    let u = apiurl("/runs");
+    if (group) {
+        u.searchParams.append("group", group)
+    }
+    if (lastrun) {
+        u.searchParams.append("lastrun", true)
+    }
+    let res = await fetch(u)
+    return res.json();
+}
+
 export async function fetchRun(runid) {
     let res = await fetch(apiurl("/run/" + runid));
     return res.json();

src/util/link.js

@@ -31,6 +31,18 @@ export function projectRunsLink(ownertype, ownername, projectname) {
     return { name: ownertype + " project runs", params: { orgname: ownername, projectname: projectname } }
 }
 
+export function projectBranchesRunsLink(ownertype, ownername, projectname) {
+    return { name: ownertype + " project branches runs", params: { orgname: ownername, projectname: projectname } }
+}
+
+export function projectTagsRunsLink(ownertype, ownername, projectname) {
+    return { name: ownertype + " project tags runs", params: { orgname: ownername, projectname: projectname } }
+}
+
+export function projectPRsRunsLink(ownertype, ownername, projectname) {
+    return { name: ownertype + " project pull requests runs", params: { orgname: ownername, projectname: projectname } }
+}
+
 export function projectRunLink(ownertype, ownername, projectname, runid) {
     return { name: ownertype + " project run", params: { orgname: ownername, projectname: projectname, runid: runid } }
 }

src/views/Project.vue

@@ -4,9 +4,18 @@
     <div class="tabs">
       <ul>
         <li
-          :class="[{ 'is-active': $route.name.endsWith('project runs') || $route.name.endsWith('project') }]"
+          :class="[{ 'is-active': $route.name.match('project runs') || $route.name.endsWith('project') }]"
         >
-          <router-link :to="projectRunsLink(ownertype, ownername, projectname)">Runs</router-link>
+          <router-link :to="projectRunsLink(ownertype, ownername, projectname)">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>
+        </li>
+        <li :class="[{ 'is-active': $route.name.match('project tags runs') }]">
+          <router-link :to="projectTagsRunsLink(ownertype, ownername, projectname)">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>
         </li>
         <li
           v-if="$route.name.endsWith('project run') || $route.name.endsWith('project run task')"
@@ -20,7 +29,12 @@
         >
           <router-link
             :to="projectRunLink(ownertype, ownername, $route.params.projectname, $route.params.runid)"
-          >Run {{$route.params.runid}}</router-link>
+          >
+            <p v-if="run">
+              Run
+              <strong>#{{run.counter}}</strong>
+            </p>
+          </router-link>
         </li>
         <li
           v-if="$route.name.endsWith('project run task')"
@@ -31,7 +45,12 @@
         <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)"
-          >Task {{$route.params.taskid}}</router-link>
+          >
+            <p v-if="run">
+              Task
+              <strong>{{run.tasks[$route.params.taskid].name}}</strong>
+            </p>
+          </router-link>
         </li>
       </ul>
       <ul class="is-right">
@@ -49,11 +68,16 @@
 import {
   projectLink,
   projectRunsLink,
+  projectBranchesRunsLink,
+  projectTagsRunsLink,
+  projectPRsRunsLink,
   projectRunLink,
   projectRunTaskLink,
   projectSettingsLink
 } from "@/util/link.js";
 
+import { fetchRun } from "@/util/data.js";
+
 import projbreadcrumbs from "@/components/projbreadcrumbs.vue";
 import runs from "@/components/runs.vue";
 import tabarrow from "@/components/tabarrow.vue";
@@ -66,12 +90,32 @@ export default {
     ownername: String,
     projectname: String
   },
+  data() {
+    return {
+      run: null
+    };
+  },
+  watch: {
+    $route: async function(route) {
+      if (route.params.runid) {
+        this.run = await fetchRun(route.params.runid);
+      }
+    }
+  },
   methods: {
     projectLink: projectLink,
     projectRunsLink: projectRunsLink,
+    projectBranchesRunsLink: projectBranchesRunsLink,
+    projectTagsRunsLink: projectTagsRunsLink,
+    projectPRsRunsLink: projectPRsRunsLink,
     projectRunLink: projectRunLink,
     projectRunTaskLink: projectRunTaskLink,
     projectSettingsLink: projectSettingsLink
+  },
+  created: async function() {
+    if (this.$route.params.runid) {
+      this.run = await fetchRun(this.$route.params.runid);
+    }
   }
 };
 </script>