Blocklist: Wrap table rows in table body, add key directive (#104383)

Fix a potential hydration issue warning from vite, by adding the `key`
attribute to each table row.

Reviewed-on: https://projects.blender.org/studio/flamenco/pulls/104383

web/app/src/components/StatusFilterBar.vue

@@ -21,6 +21,7 @@ const visibleStatuses = computed(() => {
   <ul class="status-filter-bar" :class="{ 'is-filtered': activeStatuses.length > 0 }">
     <li
       v-for="status in visibleStatuses"
+      :key="status.value"
       class="status-filter-indicator"
       :data-status="status"
       :class="{ active: activeStatuses.indexOf(status) >= 0 }"

web/app/src/components/jobs/Blocklist.vue

@@ -4,12 +4,13 @@
   </div>
   <template v-else>
     <table class="blocklist" v-if="blocklist.length">
+      <tbody>
         <tr>
           <th>Worker</th>
           <th>Task Type</th>
           <th></th>
         </tr>
-      <tr v-for="entry in blocklist">
+        <tr v-for="entry in blocklist" :key="entry.worker_id">
           <td>
             <link-worker :worker="{ id: entry.worker_id, name: entry.worker_name }" />
           </td>
@@ -23,6 +24,7 @@
             </button>
           </td>
         </tr>
+      </tbody>
     </table>
     <div v-else class="dl-no-data">
       <span>This job has no blocked workers.</span>

web/app/src/components/jobs/TaskDetails.vue

@@ -23,7 +23,7 @@
       <template v-if="taskData.failed_by_workers.length > 0">
         <dt class="field-failed-by-workers" title="Failed by Workers">Failed by Workers</dt>
         <dd>
-          <div v-for="worker in taskData.failed_by_workers">
+          <div :key="worker.id" v-for="worker in taskData.failed_by_workers">
             <link-worker :worker="worker" />
           </div>
         </dd>
@@ -50,7 +50,7 @@
 
     <h3 class="sub-title">Commands</h3>
     <dl>
-      <template v-for="cmd in taskData.commands">
+      <template :key="cmd.name" v-for="cmd in taskData.commands">
         <dt :class="`field-${cmd.name}`" :title="cmd.name">{{ cmd.name }}</dt>
         <dd>{{ cmd.parameters }}</dd>
       </template>