bvandeusen
311fe0ee9c
Goal (operator 2026-06-18): the overview of a Settings tab fits one unscrolled viewport; expanding a tile to read into it is the only reason to scroll. - Every Maintenance card converted to the collapsible MaintenanceTile (collapsed by default = icon + short title + one-line blurb). Task cards (ML backfill, centroids, thumbnails, archive re-extract, missing-file repair, DB maintenance) sit in a responsive grid; running tasks auto-expand. Tagging config (suggestion thresholds, allowlist, aliases) grouped in one Tagging section as collapsible tiles; Backup is its own collapsible tile. - Three labeled sections mirror the Cleanup tab: Backfills and reprocessing / Tagging / Storage. - Center the whole Settings surface: SettingsView is now a centered, width-capped (1140px) column so the tab strip and every panel sit in a tidy centered measure (was full-width). CleanupView drops its own left-aligned max-width to fill it. All card logic unchanged - only the chrome. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
102 lines
3.0 KiB
Vue
102 lines
3.0 KiB
Vue
<template>
|
|
<div class="fc-maint">
|
|
<p class="fc-muted text-body-2 mb-5">
|
|
One-off backfills, tagging config and storage tools. The ML backfill and
|
|
centroid recompute also run nightly; the allowlist auto-applies accepted
|
|
tags. Click a tile to open it.
|
|
</p>
|
|
|
|
<section class="fc-section">
|
|
<h3 class="fc-section__title">Backfills & reprocessing</h3>
|
|
<p class="fc-section__hint">Re-run tagging, thumbnails, extraction and DB upkeep.</p>
|
|
<div class="fc-tile-grid">
|
|
<MLBackfillCard />
|
|
<CentroidRecomputeCard />
|
|
<ThumbnailBackfillCard />
|
|
<ArchiveReextractCard />
|
|
<MissingFileRepairCard />
|
|
<DbMaintenanceCard />
|
|
</div>
|
|
</section>
|
|
|
|
<section class="fc-section">
|
|
<h3 class="fc-section__title">Tagging</h3>
|
|
<p class="fc-section__hint">
|
|
Suggestion thresholds, the auto-apply allowlist and tag aliases.
|
|
</p>
|
|
<div class="fc-tile-stack">
|
|
<MLThresholdSliders />
|
|
<AllowlistTable />
|
|
<AliasTable />
|
|
</div>
|
|
</section>
|
|
|
|
<section class="fc-section">
|
|
<h3 class="fc-section__title">Storage</h3>
|
|
<p class="fc-section__hint">Database + image backups and restore.</p>
|
|
<div class="fc-tile-stack">
|
|
<BackupCard />
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, onUnmounted } from 'vue'
|
|
|
|
import MLBackfillCard from './MLBackfillCard.vue'
|
|
import CentroidRecomputeCard from './CentroidRecomputeCard.vue'
|
|
import ThumbnailBackfillCard from './ThumbnailBackfillCard.vue'
|
|
import ArchiveReextractCard from './ArchiveReextractCard.vue'
|
|
import MissingFileRepairCard from './MissingFileRepairCard.vue'
|
|
import DbMaintenanceCard from './DbMaintenanceCard.vue'
|
|
import MLThresholdSliders from './MLThresholdSliders.vue'
|
|
import AllowlistTable from './AllowlistTable.vue'
|
|
import AliasTable from './AliasTable.vue'
|
|
import BackupCard from './BackupCard.vue'
|
|
import { useSystemActivityStore } from '../../stores/systemActivity.js'
|
|
|
|
// Poll queue depths so each task tile's QueueStatusBar shows live pending
|
|
// counts — the operator can see a backfill is already queued/running before
|
|
// re-triggering it.
|
|
const activity = useSystemActivityStore()
|
|
let qTimer = null
|
|
onMounted(() => {
|
|
activity.loadQueues()
|
|
qTimer = setInterval(() => {
|
|
if (!document.hidden) activity.loadQueues()
|
|
}, 4000)
|
|
})
|
|
onUnmounted(() => {
|
|
if (qTimer) { clearInterval(qTimer); qTimer = null }
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fc-section { margin-bottom: 24px; }
|
|
.fc-section__title {
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: rgb(var(--v-theme-accent));
|
|
margin-bottom: 2px;
|
|
}
|
|
.fc-section__hint {
|
|
font-size: 0.8rem;
|
|
color: rgb(var(--v-theme-on-surface-variant));
|
|
margin-bottom: 12px;
|
|
}
|
|
.fc-tile-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 14px;
|
|
align-items: start;
|
|
}
|
|
.fc-tile-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
</style>
|