blender/flamenco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Vivian Leung 2025-05-09 11:31:29 +02:00 committed by Sybren A. Stüvel
parent dc152d6c9a
commit 22d43ee068
3 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/app/src/components/StatusFilterBar.vue
View File

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

40
web/app/src/components/jobs/Blocklist.vue
View File

@ -4,25 +4,27 @@
</div> </div>
<template v-else> <template v-else>
<table class="blocklist" v-if="blocklist.length"> <table class="blocklist" v-if="blocklist.length">
<tr> <tbody>
<th>Worker</th> <tr>
<th>Task Type</th> <th>Worker</th>
<th></th> <th>Task Type</th>
</tr> <th></th>
<tr v-for="entry in blocklist"> </tr>
<td> <tr v-for="entry in blocklist" :key="entry.worker_id">
<link-worker :worker="{ id: entry.worker_id, name: entry.worker_name }" /> <td>
</td> <link-worker :worker="{ id: entry.worker_id, name: entry.worker_name }" />
<td>{{ entry.task_type }}</td> </td>
<td> <td>{{ entry.task_type }}</td>
<button <td>
class="btn in-table-row" <button
@click="removeBlocklistEntry(entry)" class="btn in-table-row"
title="Allow this worker to execute these task types"> @click="removeBlocklistEntry(entry)"
❌ title="Allow this worker to execute these task types">
</button> ❌
</td> </button>
</tr> </td>
</tr>
</tbody>
</table> </table>
<div v-else class="dl-no-data"> <div v-else class="dl-no-data">
<span>This job has no blocked workers.</span> <span>This job has no blocked workers.</span>

4
web/app/src/components/jobs/TaskDetails.vue
View File

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