From 64c8fa851d3b9e09e02c5429da454a36e71e940e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Fri, 17 Jun 2022 16:36:55 +0200
Subject: [PATCH] Show assigned worker in task details

Show the worker assigned to the task in the task details view, as link
to the worker itself.
---
 internal/manager/persistence/jobs.go        | 1 +
 web/app/src/components/WorkerLink.vue       | 8 ++++++++
 web/app/src/components/jobs/TaskDetails.vue | 7 ++++++-
 3 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 web/app/src/components/WorkerLink.vue

diff --git a/internal/manager/persistence/jobs.go b/internal/manager/persistence/jobs.go
index 3ff44c0b..cb5df2c7 100644
--- a/internal/manager/persistence/jobs.go
+++ b/internal/manager/persistence/jobs.go
@@ -238,6 +238,7 @@ func (db *DB) FetchTask(ctx context.Context, taskUUID string) (*Task, error) {
 	dbTask := Task{}
 	tx := db.gormDB.WithContext(ctx).
 		Joins("Job").
+		Joins("Worker").
 		First(&dbTask, "tasks.uuid = ?", taskUUID)
 	if tx.Error != nil {
 		return nil, taskError(tx.Error, "fetching task")
diff --git a/web/app/src/components/WorkerLink.vue b/web/app/src/components/WorkerLink.vue
new file mode 100644
index 00000000..2bac4253
--- /dev/null
+++ b/web/app/src/components/WorkerLink.vue
@@ -0,0 +1,8 @@
+<template>
+  <router-link :to="{ name: 'workers', params: { workerID: worker.id } }">{{ worker.name }} ({{ worker.address }})</router-link>
+</template>
+
+<script setup>
+// 'worker' should be a Worker or TaskWorker (see schemas defined in `flamenco-openapi.yaml`).
+const props = defineProps(['worker']);
+</script>
diff --git a/web/app/src/components/jobs/TaskDetails.vue b/web/app/src/components/jobs/TaskDetails.vue
index d57665e0..2baa9033 100644
--- a/web/app/src/components/jobs/TaskDetails.vue
+++ b/web/app/src/components/jobs/TaskDetails.vue
@@ -12,6 +12,9 @@
       <dt class="field-status">Status</dt>
       <dd>{{ taskData.status }}</dd>
 
+      <dt class="field-worker">Assigned To</dt>
+      <dd><worker-link :worker="taskData.worker" /></dd>
+
       <dt class="field-activity">Activity</dt>
       <dd>{{ taskData.activity }}</dd>
 
@@ -33,7 +36,7 @@
       <template v-if="taskData.failed_by_workers.length > 0">
       <dt class="field-failed-by-workers">Failed by Workers</dt>
       <dd v-for="worker in taskData.failed_by_workers">
-        <router-link :to="{ name: 'workers', params: { workerID: worker.id } }">{{ worker.name }} ({{ worker.address }})</router-link>
+        <worker-link :worker="worker" />
       </dd>
       </template>
     </dl>
@@ -56,11 +59,13 @@
 import * as datetime from "@/datetime";
 import * as API from '@/manager-api';
 import { apiClient } from '@/stores/api-query-count';
+import WorkerLink from '@/components/WorkerLink.vue';
 
 export default {
   props: [
     "taskData", // Task data to show.
   ],
+  components: {WorkerLink},
   data() {
     return {
       datetime: datetime, // So that the template can access it.