From 404dbc5be8389261f518139b03201ec1df225079 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Mon, 1 Aug 2022 18:55:52 +0200
Subject: [PATCH] Web:  allow removal of blocklist entries

---
 web/app/src/components/jobs/Blocklist.vue  | 21 +++++++++++++++++++++
 web/app/src/components/jobs/JobDetails.vue |  2 +-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/web/app/src/components/jobs/Blocklist.vue b/web/app/src/components/jobs/Blocklist.vue
index c7950806..d9063153 100644
--- a/web/app/src/components/jobs/Blocklist.vue
+++ b/web/app/src/components/jobs/Blocklist.vue
@@ -7,12 +7,15 @@
       <tr>
         <th>Worker</th>
         <th>Task Type</th>
+        <th></th>
       </tr>
       <tr v-for="entry in blocklist">
         <td>
           <link-worker :worker="{ id: entry.worker_id, name: entry.worker_name }" />
         </td>
         <td>{{ entry.task_type }}</td>
+        <td><button class="btn in-table-row" @click="removeBlocklistEntry(entry)"
+            title="Allow this worker to execute these task types">❌</button></td>
       </tr>
     </table>
     <div v-else class="dl-no-data">
@@ -56,6 +59,18 @@ function refreshBlocklist() {
     })
 }
 
+function removeBlocklistEntry(blocklistEntry) {
+  jobsApi.removeJobBlocklist(props.jobID, { jobBlocklistEntry: [blocklistEntry] })
+    .then(() => {
+      blocklist.value = blocklist.value.filter(
+        (entry) => !(entry.worker_id == blocklistEntry.worker_id && entry.task_type == blocklistEntry.task_type));
+    })
+    .catch((error) => {
+      console.log("Error removing entry from blocklist", error);
+      refreshBlocklist();
+    })
+}
+
 watch(() => props.jobID, refreshBlocklist);
 watch(blocklist, () => {
   nextTick(() => { emit("reshuffled") })
@@ -90,4 +105,10 @@ table.blocklist tr {
 table.blocklist tr:nth-child(odd) {
   background-color: var(--table-color-background-row-odd);
 }
+
+button.in-table-row {
+  background-color: unset;
+  border: unset;
+  padding: 0;
+}
 </style>
diff --git a/web/app/src/components/jobs/JobDetails.vue b/web/app/src/components/jobs/JobDetails.vue
index 319696c9..296f1f44 100644
--- a/web/app/src/components/jobs/JobDetails.vue
+++ b/web/app/src/components/jobs/JobDetails.vue
@@ -55,7 +55,7 @@
         </dl>
       </TabItem>
       <TabItem title="Blocklist">
-        <blocklist :jobID="jobData.id" />
+        <blocklist :jobID="jobData.id" @reshuffled="emit_reshuffled_delayed" />
       </TabItem>
     </TabsWrapper>
   </template>