bvandeusen
35fe420701
Each maintenance button (ML backfill, centroid recompute → ml queue; thumbnail backfill → thumbnail queue) now shows a status bar with the live pending count for its Celery queue, so the operator can see work is already queued/running before re-triggering and piling on. MaintenancePanel polls /api/system/activity/queues every 4s; QueueStatusBar reads the depth and turns warning-colored when the queue is busy. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
70 lines
2.0 KiB
Vue
70 lines
2.0 KiB
Vue
<template>
|
|
<div class="fc-qbar" :class="`fc-qbar--${state}`" :title="hint">
|
|
<v-icon size="14" class="fc-qbar__icon">{{ icon }}</v-icon>
|
|
<span>{{ label }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
import { useSystemActivityStore } from '../../stores/systemActivity.js'
|
|
|
|
const props = defineProps({
|
|
// Celery queue these buttons feed (see celery_app.task_routes).
|
|
queue: { type: String, required: true },
|
|
queueLabel: { type: String, default: '' },
|
|
})
|
|
|
|
const store = useSystemActivityStore()
|
|
|
|
// Redis LLEN per queue from /api/system/activity/queues; null when the
|
|
// broker read failed or hasn't loaded yet.
|
|
const depth = computed(() => {
|
|
const q = store.queues?.queues
|
|
return q ? (q[props.queue] ?? null) : null
|
|
})
|
|
const state = computed(() => {
|
|
if (depth.value == null) return 'unknown'
|
|
return depth.value > 0 ? 'busy' : 'idle'
|
|
})
|
|
const icon = computed(() => ({
|
|
busy: 'mdi-progress-clock',
|
|
idle: 'mdi-check-circle-outline',
|
|
unknown: 'mdi-help-circle-outline',
|
|
}[state.value]))
|
|
const qname = computed(() => props.queueLabel || props.queue)
|
|
const label = computed(() => {
|
|
if (depth.value == null) return `${qname.value} queue · status unavailable`
|
|
if (depth.value === 0) return `${qname.value} queue idle — nothing pending`
|
|
return `${depth.value} pending in the ${qname.value} queue`
|
|
})
|
|
const hint = computed(() =>
|
|
state.value === 'busy'
|
|
? `The ${qname.value} queue already has ${depth.value} task(s) waiting — running again now just adds to that backlog.`
|
|
: '',
|
|
)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fc-qbar {
|
|
display: flex; align-items: center; gap: 6px;
|
|
margin-top: 12px;
|
|
padding: 5px 10px;
|
|
border-radius: 6px;
|
|
font-size: 0.78rem;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.fc-qbar__icon { flex: 0 0 auto; }
|
|
.fc-qbar--idle,
|
|
.fc-qbar--unknown {
|
|
color: rgb(var(--v-theme-on-surface-variant));
|
|
background: rgb(var(--v-theme-on-surface) / 0.04);
|
|
}
|
|
.fc-qbar--busy {
|
|
color: rgb(var(--v-theme-warning));
|
|
background: rgb(var(--v-theme-warning) / 0.12);
|
|
font-weight: 600;
|
|
}
|
|
</style>
|