From b6d8882b8ea751f86db4dce0fbe14ff08f2b7f36 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:24:01 +0200
Subject: [PATCH] Web: show job blocklist

The blocklist is now shown in the job details, in its own tab. The list
is only fetched when the tab is visible, and doesn't get dynamically
updated yet.
---
 web/app/src/components/LinkWorker.vue      | 10 ++-
 web/app/src/components/TabItem.vue         |  6 +-
 web/app/src/components/jobs/Blocklist.vue  | 91 ++++++++++++++++++++++
 web/app/src/components/jobs/JobDetails.vue |  5 ++
 4 files changed, 109 insertions(+), 3 deletions(-)
 create mode 100644 web/app/src/components/jobs/Blocklist.vue

diff --git a/web/app/src/components/LinkWorker.vue b/web/app/src/components/LinkWorker.vue
index 2bac4253..643cf0c1 100644
--- a/web/app/src/components/LinkWorker.vue
+++ b/web/app/src/components/LinkWorker.vue
@@ -1,8 +1,16 @@
 <template>
-  <router-link :to="{ name: 'workers', params: { workerID: worker.id } }">{{ worker.name }} ({{ worker.address }})</router-link>
+  <router-link :to="{ name: 'workers', params: { workerID: worker.id } }">
+    {{ worker.name }}{{ workerAddress }}
+  </router-link>
 </template>
 
 <script setup>
+import { computed } from 'vue'
+
 // 'worker' should be a Worker or TaskWorker (see schemas defined in `flamenco-openapi.yaml`).
 const props = defineProps(['worker']);
+const workerAddress = computed(() => {
+  if (props.worker.address) return `(${props.worker.address})`;
+  return "";
+});
 </script>
diff --git a/web/app/src/components/TabItem.vue b/web/app/src/components/TabItem.vue
index 1cddade0..72b9b197 100644
--- a/web/app/src/components/TabItem.vue
+++ b/web/app/src/components/TabItem.vue
@@ -1,13 +1,15 @@
 <script setup>
-import { inject } from "vue";
+import { inject, computed, provide } from "vue";
 const props = defineProps({
   title: String,
 });
 const selectedTitle = inject("selectedTitle");
+const isVisible = computed(() => selectedTitle.value === props.title)
+provide("isVisible", isVisible);
 </script>
 
 <template>
-  <div v-show="selectedTitle === title">
+  <div v-show="isVisible">
     <slot />
   </div>
 </template>
diff --git a/web/app/src/components/jobs/Blocklist.vue b/web/app/src/components/jobs/Blocklist.vue
new file mode 100644
index 00000000..1f672879
--- /dev/null
+++ b/web/app/src/components/jobs/Blocklist.vue
@@ -0,0 +1,91 @@
+<template>
+  <div v-if="isFetching" class="dl-no-data">
+    <span>Fetching blocklist...</span>
+  </div>
+  <template v-else>
+    <table class="blocklist" v-if="blocklist.length">
+      <tr>
+        <th>Worker</th>
+        <th>Task Type</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>
+      </tr>
+    </table>
+    <div v-else class="dl-no-data">
+      <span>This job has no blocked workers.</span>
+    </div>
+  </template>
+  <p v-if="errorMsg" class="error">Error fetching blocklist: {{ errorMsg }}</p>
+</template>
+
+<script setup>
+import { apiClient } from '@/stores/api-query-count';
+import { JobsApi } from '@/manager-api';
+import LinkWorker from '@/components/LinkWorker.vue';
+import { watch, onMounted, inject, ref } from 'vue'
+
+// jobID should be the job UUID string.
+const props = defineProps(['jobID']);
+const jobsApi = new JobsApi(apiClient);
+const isVisible = inject("isVisible");
+const isFetching = ref(false);
+const errorMsg = ref("");
+const blocklist = ref([]);
+
+function refreshBlocklist() {
+  if (!isVisible.value) {
+    return;
+  }
+
+  isFetching.value = true;
+  jobsApi.fetchJobBlocklist(props.jobID)
+    .then((newBlocklist) => {
+      console.log(`received blocklist for job ${props.jobID}`, newBlocklist);
+      blocklist.value = newBlocklist;
+      // TODO: remit 'reshuffled' & handle in parent.
+    })
+    .catch((error) => {
+      errorMsg.value = error.message;
+    })
+    .finally(() => {
+      isFetching.value = false;
+    })
+}
+
+watch(() => props.jobID, refreshBlocklist);
+watch(isVisible, refreshBlocklist);
+onMounted(refreshBlocklist);
+</script>
+
+<style scoped>
+table.blocklist {
+  width: 100%;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-base);
+  border-collapse: collapse;
+}
+
+table.blocklist td,
+table.blocklist th {
+  text-align: left;
+  padding: calc(var(--spacer-sm)/2) var(--spacer-sm);
+}
+
+table.blocklist th {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  font-weight: normal;
+}
+
+table.blocklist tr {
+  background-color: var(--table-color-background-row);
+}
+
+table.blocklist tr:nth-child(odd) {
+  background-color: var(--table-color-background-row-odd);
+}
+</style>
diff --git a/web/app/src/components/jobs/JobDetails.vue b/web/app/src/components/jobs/JobDetails.vue
index 995d885c..319696c9 100644
--- a/web/app/src/components/jobs/JobDetails.vue
+++ b/web/app/src/components/jobs/JobDetails.vue
@@ -54,6 +54,9 @@
           <dd>{{ jobData.activity }}</dd>
         </dl>
       </TabItem>
+      <TabItem title="Blocklist">
+        <blocklist :jobID="jobData.id" />
+      </TabItem>
     </TabsWrapper>
   </template>
 
@@ -67,6 +70,7 @@ import * as datetime from "@/datetime";
 import * as API from '@/manager-api';
 import { apiClient } from '@/stores/api-query-count';
 import LastRenderedImage from '@/components/jobs/LastRenderedImage.vue'
+import Blocklist from './Blocklist.vue'
 import TabItem from '@/components/TabItem.vue'
 import TabsWrapper from '@/components/TabsWrapper.vue'
 
@@ -81,6 +85,7 @@ export default {
     LastRenderedImage,
     TabItem,
     TabsWrapper,
+    Blocklist,
   },
   data() {
     return {