implement task approval notifications and action

src/components/run.vue

@@ -17,6 +17,9 @@
             <router-link class="column is-10" tag="a" :to="runTaskLink(task)">
               <span class="name">{{task.name}}</span>
             </router-link>
+            <div class="column">
+              <span class="tag" v-if="run.tasks_waiting_approval.includes(task.id)">Waiting approval</span>
+            </div>
             <div class="parents column">
               <span v-if="parents(task).length > 0">depends on: &nbsp;</span>
               <span class="parent" v-for="dep in parents(task)" v-bind:key="dep">{{dep}}</span>

src/components/runs.vue

@@ -20,6 +20,8 @@
             <span>{{run.name}}</span>
           </router-link>
           <div class="commitmessage">{{run.annotations.message}}</div>
+          <span v-if="waitingApproval(run)" class="waitingapproval tag">Waiting Approval</span>
+          <span v-if="!waitingApproval(run)" class="waitingapproval"></span>
           <span v-if="stillRunning(run)" class="stillrunning tag">Still running</span>
           <span v-if="!stillRunning(run)" class="stillrunning"></span>
           <div class="source-info">
@@ -95,6 +97,9 @@ export default {
     stillRunning(run) {
       return run.result != "unknown" && run.phase == "running";
     },
+    waitingApproval(run) {
+      return run.tasks_waiting_approval.length > 0;
+    },
     runResultClass(run) {
       if (run.result == "unknown") {
         if (run.phase == "queued") return "unknown";
@@ -227,6 +232,10 @@ export default {
     flex: 0 0 10%;
   }
 
+  .waitingapproval {
+    flex: 0 0 10%;
+  }
+
   .source-info {
     flex: 0 0 10%;
     overflow: hidden;

src/components/task.vue

@@ -2,9 +2,18 @@
   <div>
     <RunDetail :run="run"/>
     <div v-if="task != null">
-      <div class="task-title">
+      <div class="columns">
-        <span class="task-name" v-html="task.name"/>
+        <div class="task-title column is-10">
-        <span class="tag" :class="taskClass(task)">{{ task.status | capitalize }}</span>
+          <span class="task-name" v-html="task.name"/>
+          <span class="tag" :class="taskClass(task)">{{ task.status | capitalize }}</span>
+        </div>
+        <div class="task-actions column is-2 is-pulled-right">
+          <button
+            class="button is-primary"
+            v-if="task.waiting_approval"
+            @click="approveTask(run.id, task.id)"
+          >Approve</button>
+        </div>
       </div>
       <Collapse
         v-bind:runid="runid"
@@ -25,7 +34,7 @@
 </template>
 
 <script>
-import { fetchRun, fetchTask } from "@/util/data.js";
+import { fetchRun, fetchTask, approveTask } from "@/util/data.js";
 
 import Collapse from "@/components/collapse.vue";
 import RunDetail from "@/components/rundetail.vue";
@@ -64,7 +73,8 @@ export default {
         this.fetchTask();
         this.fetchRun();
       }, 2000);
-    }
+    },
+    approveTask: approveTask
   },
   created: function() {
     this.fetchRun();
@@ -90,4 +100,8 @@ export default {
     padding-right: 1rem;
   }
 }
+
+.task-actions {
+  text-align: right;
+}
 </style>

src/util/data.js

@@ -70,4 +70,16 @@ export async function deleteUserToken(username, tokenname) {
     }
     let res = await fetch(apiurl(path), init)
     return res.text();
+}
+
+export async function approveTask(runid, taskid) {
+    let path = "/runs/" + runid + "/tasks/" + taskid + "/actions"
+    let init = {
+        method: "PUT",
+        body: JSON.stringify({
+            action_type: "approve"
+        })
+    }
+    let res = await fetch(apiurl(path), init)
+    return res.json();
 }