Without system cron: warning and a backup that moves on while the page is open (#13); progress of the database phase; Bin tab

- The admin page and backup:status warn when background jobs do not run on a
  system cron, or the cron stopped, with a link to how to set one up.
- Without a working system cron, the open admin page moves a running backup
  forward through /api/tick, a short step per poll.
- The database phase shows the tables dumped ("db: 47/183 tables"); a backup
  that has not moved for 15 minutes says it is waiting for background jobs.
- The trash of restore points is on a tab of its own, Bin.
- New screenshots; changelog and plan for 1.0.2.

src/AdminSettings.vue

@@ -12,11 +12,22 @@
 			</p>
 			<NcLoadingIcon v-if="!status" :size="32" />
 			<NcNoteCard v-if="error" type="error">{{ error }}</NcNoteCard>
+			<NcNoteCard v-if="status && !status.cron.ok" type="warning">
+				<p>
+					{{ status.cron.stopped
+						? t('ng_backup', 'Background jobs are set to system cron, but cron has not run since {time}.', { time: lastCron })
+						: t('ng_backup', 'Background jobs do not run on a system cron (they are set to "{mode}").', { mode: status.cron.mode === 'webcron' ? 'Webcron' : 'AJAX' }) }}
+					{{ t('ng_backup', 'Backups need a system cron that runs every 5 minutes, also the scheduled ones.') }}
+					<a :href="status.cron.docs" target="_blank" rel="noopener noreferrer">{{ t('ng_backup', 'How to set up cron ↗') }}</a>
+				</p>
+				<p>{{ t('ng_backup', 'Until then, a backup started with "Back up now" only moves on while this page is open.') }}</p>
+			</NcNoteCard>
 		</NcSettingsSection>
 
 		<template v-if="status">
 			<div class="ngb-tabs">
 				<NcButton :variant="tab === 'backup' ? 'primary' : 'secondary'" @click="tab = 'backup'">{{ t('ng_backup', 'Backup and restore') }}</NcButton>
+				<NcButton v-if="status.key.everConfirmed && status.targets.length" :variant="tab === 'bin' ? 'primary' : 'secondary'" @click="tab = 'bin'">{{ t('ng_backup', 'Bin') }}</NcButton>
 				<NcButton :variant="tab === 'settings' ? 'primary' : 'secondary'" @click="tab = 'settings'">{{ t('ng_backup', 'Settings') }}</NcButton>
 				<NcButton :variant="tab === 'docs' ? 'primary' : 'secondary'" @click="tab = 'docs'">{{ t('ng_backup', 'Docs') }}</NcButton>
 			</div>
@@ -29,6 +40,7 @@
 					</li>
 				</ul>
 			</NcSettingsSection>
+			<Bin v-else-if="tab === 'bin' && status.key.everConfirmed && status.targets.length" :status="status" @changed="refresh" />
 			<template v-else-if="tab === 'settings'">
 				<KeySetup :status="status" @changed="refresh" />
 				<Locations v-if="status.key.everConfirmed" :status="status" @changed="refresh" />
@@ -46,7 +58,7 @@
 </template>
 
 <script setup>
-import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { t } from '@nextcloud/l10n'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
@@ -54,6 +66,7 @@ import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
 import api from './api.js'
 import Backups from './components/Backups.vue'
+import Bin from './components/Bin.vue'
 import KeySetup from './components/KeySetup.vue'
 import Locations from './components/Locations.vue'
 import RestoreBrowser from './components/RestoreBrowser.vue'
@@ -105,13 +118,27 @@ async function refresh() {
 	} catch (e) {
 		error.value = e.message
 	}
-	// Poll while something runs, so progress shows up without reloading.
+	// Poll while something runs, so progress shows up without reloading. Without a working
+	// system cron, each poll also lets a running backup take a short step (see tick()).
 	clearTimeout(timer)
 	if (status.value?.runs.some(r => r.status === 'running')) {
-		timer = setTimeout(refresh, 4000)
+		timer = setTimeout(tickAndRefresh, 4000)
 	}
 }
 
+async function tickAndRefresh() {
+	if (status.value && !status.value.cron.ok && status.value.runs.some(r => r.status === 'running' && r.kind === 'full')) {
+		try {
+			await api.tick()
+		} catch (e) {
+			// The next poll tries again; the error of a failed step shows on its run.
+		}
+	}
+	await refresh()
+}
+
+const lastCron = computed(() => status.value?.cron.lastRun ? new Date(status.value.cron.lastRun * 1000).toLocaleString() : '')
+
 onMounted(refresh)
 onBeforeUnmount(() => clearTimeout(timer))
 </script>

src/api.js

@@ -33,6 +33,7 @@ export default {
 	testTarget: (id) => call('post', `/targets/${id}/test`),
 	setTargetLimit: (id, maxGb) => call('put', `/targets/${id}/limit`, { maxGb }),
 	startBackup: (targetId, label) => call('post', '/backups', { targetId, label }),
+	tick: () => call('post', '/tick'),
 	setSchedule: (time, timezone) => call('put', '/schedule', { time, timezone }),
 	snapshots: (targetId) => call('get', `/targets/${targetId}/snapshots`),
 	browse: (targetId, snapshotId, path) => call('get', `/targets/${targetId}/snapshots/${snapshotId}/browse`, { path }),

src/components/Backups.vue

@@ -18,34 +18,6 @@
 		</div>
 		<NcNoteCard v-if="error" type="error">{{ error }}</NcNoteCard>
 
-		<template v-for="target in status.targets" :key="'trash' + target.id">
-			<div v-if="trash[target.id]?.length" class="ngb-trash">
-				<h3>{{ t('ng_backup', 'Trash of {name}', { name: target.name }) }}</h3>
-				<p class="ngb-muted">{{ t('ng_backup', 'Removed restore points can be brought back until they are deleted permanently.') }}</p>
-				<ul>
-					<li v-for="item in trash[target.id]" :key="item.id">
-						{{ item.time ? formatDateTime(item.time) : item.id }}{{ item.label ? ' – ' + item.label : '' }}
-						<span class="ngb-muted">{{ t('ng_backup', 'removed by {by}, deleted after {date}', { by: item.by, date: formatDate(item.deleteAfter) }) }}</span>
-						<button v-if="item.by === RETENTION"
-							class="ngb-info"
-							:aria-expanded="retentionInfo ? 'true' : 'false'"
-							:aria-label="t('ng_backup', 'What does this mean?')"
-							:title="t('ng_backup', 'What does this mean?')"
-							@click="retentionInfo = !retentionInfo">
-							ⓘ
-						</button>
-						<NcButton variant="tertiary" @click="untrash(target, item)">{{ t('ng_backup', 'Restore') }}</NcButton>
-					</li>
-				</ul>
-				<NcNoteCard v-if="retentionInfo && trash[target.id].some(item => item.by === RETENTION)" type="info">
-					{{ n('ng_backup',
-						'The retention policy keeps the newest restore points, and for older days, weeks and months only the last restore point of each. It moves the others to this trash, where they stay for %n day before they are deleted permanently. Until then you can bring one back with "Restore". Nothing was lost by accident.',
-						'The retention policy keeps the newest restore points, and for older days, weeks and months only the last restore point of each. It moves the others to this trash, where they stay for %n days before they are deleted permanently. Until then you can bring one back with "Restore". Nothing was lost by accident.',
-						status.key.deleteDelayDays) }}
-				</NcNoteCard>
-			</div>
-		</template>
-
 		<div v-if="status.runs.length" class="ngb-table-wrap">
 			<table class="ngb-table">
 				<thead>
@@ -66,7 +38,7 @@
 						<td>{{ targetName(run.targetId) }}</td>
 						<td>{{ run.kind }}</td>
 						<td>{{ run.snapshot ? formatDateTime(run.snapshot.createdAt) + (run.snapshot.label ? ' – ' + run.snapshot.label : '') : '' }}</td>
-						<td :class="'ngb-' + run.status">{{ run.status }}{{ run.status === 'running' ? ' (' + run.phase + percent(run) + ')' : '' }}{{ run.error ? ': ' + run.error : '' }}</td>
+						<td :class="'ngb-' + run.status">{{ runStatus(run) }}{{ run.error ? ': ' + run.error : '' }}</td>
 						<td>{{ run.stats?.files?.files ?? run.stats?.restored ?? '' }}</td>
 						<td>{{ run.stats?.files ? formatSize(run.stats.files.bytes) : '' }}</td>
 						<td>{{ run.stats?.files ? formatSize(run.stats.files.uploaded) : '' }}</td>
@@ -95,9 +67,7 @@ import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
 import api from '../api.js'
-import { formatDateTime, formatDate, formatSize, toZone } from '../format.js'
-import { confirmPassword } from '@nextcloud/password-confirmation'
-import { reactive } from 'vue'
+import { formatDateTime, formatSize, toZone } from '../format.js'
 
 const props = defineProps({ status: { type: Object, required: true }, allRuns: { type: Boolean, default: false } })
 const emit = defineEmits(['changed', 'show-all-runs'])
@@ -110,35 +80,29 @@ const error = ref('')
 watch(() => [props.status.schedule, props.status.scheduleTimezone], ([s]) => { schedule.value = shown(s) })
 
 const label = ref('')
-// "by" of a restore point the weekly cleanup removed (PruneService)
-const RETENTION = 'retention policy'
-const retentionInfo = ref(false)
-const trash = reactive({})
-async function loadTrash() {
-	for (const target of props.status.targets) {
-		try {
-			trash[target.id] = await api.trash(target.id)
-		} catch (e) {
-			trash[target.id] = []
-		}
-	}
-}
-watch(() => props.status.targets.map(tg => tg.id).join(','), loadTrash, { immediate: true })
 
-async function untrash(target, item) {
-	error.value = ''
-	try {
-		await confirmPassword()
-		await api.untrash(target.id, item.id)
-		await loadTrash()
-		emit('changed')
-	} catch (e) {
-		error.value = e?.message || ''
+// ": 47/183 tables" in the database phase; " 68%", or " ~68%" when the total is estimated from
+// Nextcloud's file cache (first backup)
+const percent = (run) => {
+	if (!run.progress) {
+		return ''
 	}
+	if (run.progress.totalTables) {
+		return ': ' + t('ng_backup', '{done}/{total} tables', { done: run.progress.tables, total: run.progress.totalTables })
+	}
+	return ' ' + (run.progress.approximate ? '~' : '') + Math.floor(run.progress.fraction * 100) + '%'
+}
+// "running (db: 47/183 tables)", or "waiting for background jobs (…, last step 12 min ago)"
+const runStatus = (run) => {
+	if (run.status !== 'running') {
+		return run.status
+	}
+	const detail = run.phase + percent(run)
+	if (run.waitingFor) {
+		return t('ng_backup', 'waiting for background jobs ({detail}, last step {minutes} min ago)', { detail, minutes: Math.floor(run.waitingFor / 60) })
+	}
+	return run.status + ' (' + detail + ')'
 }
-
-// " 68%", or " ~68%" when the total is estimated from Nextcloud's file cache (first backup)
-const percent = (run) => run.progress ? ' ' + (run.progress.approximate ? '~' : '') + Math.floor(run.progress.fraction * 100) + '%' : ''
 const isRunning = (targetId) => props.status.runs.some(r => r.targetId === targetId && r.kind === 'full' && r.status === 'running')
 const targetName = (id) => props.status.targets.find(tg => tg.id === id)?.name ?? '#' + id
 
@@ -168,13 +132,10 @@ async function saveSchedule() {
 .ngb-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
 .ngb-time { max-width: 260px; }
 .ngb-label { max-width: 360px; }
-.ngb-info { background: none; border: none; padding: 0 4px; min-height: auto; cursor: pointer; color: var(--color-primary-element); }
 .ngb-table-wrap { overflow-x: auto; }
 .ngb-table { width: 100%; border-collapse: collapse; }
 .ngb-table th, .ngb-table td { text-align: start; padding: 4px 8px; border-bottom: 1px solid var(--color-border); }
 .ngb-failed { color: var(--color-error-text); }
 .ngb-muted { color: var(--color-text-maxcontrast); }
-.ngb-trash { margin: 12px 0; }
-.ngb-trash h3 { font-weight: bold; }
 .ngb-done { color: var(--color-success-text); }
 </style>

src/components/Bin.vue

@@ -0,0 +1,93 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Dillard Blom
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcSettingsSection :name="t('ng_backup', 'Bin')"
+		:description="t('ng_backup', 'Restore points that were removed, most of them by the retention policy. They can be brought back until they are deleted permanently.')">
+		<NcNoteCard v-if="error" type="error">{{ error }}</NcNoteCard>
+		<NcLoadingIcon v-if="loading" :size="32" />
+		<NcNoteCard v-else-if="empty" type="info">{{ t('ng_backup', 'The bin is empty.') }}</NcNoteCard>
+
+		<template v-for="target in status.targets" :key="'trash' + target.id">
+			<div v-if="trash[target.id]?.length" class="ngb-trash">
+				<h3>{{ status.targets.length > 1 ? target.name : t('ng_backup', 'Removed restore points') }}</h3>
+				<ul>
+					<li v-for="item in trash[target.id]" :key="item.id">
+						{{ item.time ? formatDateTime(item.time) : item.id }}{{ item.label ? ' – ' + item.label : '' }}
+						<span class="ngb-muted">{{ t('ng_backup', 'removed by {by}, deleted after {date}', { by: item.by, date: formatDate(item.deleteAfter) }) }}</span>
+						<button v-if="item.by === RETENTION"
+							class="ngb-info"
+							:aria-expanded="retentionInfo ? 'true' : 'false'"
+							:aria-label="t('ng_backup', 'What does this mean?')"
+							:title="t('ng_backup', 'What does this mean?')"
+							@click="retentionInfo = !retentionInfo">
+							ⓘ
+						</button>
+						<NcButton variant="tertiary" @click="untrash(target, item)">{{ t('ng_backup', 'Restore') }}</NcButton>
+					</li>
+				</ul>
+				<NcNoteCard v-if="retentionInfo && trash[target.id].some(item => item.by === RETENTION)" type="info">
+					{{ n('ng_backup',
+						'The retention policy keeps the newest restore points, and for older days, weeks and months only the last restore point of each. It moves the others to this bin, where they stay for %n day before they are deleted permanently. Until then you can bring one back with "Restore". Nothing was lost by accident.',
+						'The retention policy keeps the newest restore points, and for older days, weeks and months only the last restore point of each. It moves the others to this bin, where they stay for %n days before they are deleted permanently. Until then you can bring one back with "Restore". Nothing was lost by accident.',
+						status.key.deleteDelayDays) }}
+				</NcNoteCard>
+			</div>
+		</template>
+	</NcSettingsSection>
+</template>
+
+<script setup>
+import { computed, reactive, ref, watch } from 'vue'
+import { n, t } from '@nextcloud/l10n'
+import { confirmPassword } from '@nextcloud/password-confirmation'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
+import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
+import api from '../api.js'
+import { formatDate, formatDateTime } from '../format.js'
+
+const props = defineProps({ status: { type: Object, required: true } })
+const emit = defineEmits(['changed'])
+
+// "by" of a restore point the weekly cleanup removed (PruneService)
+const RETENTION = 'retention policy'
+const retentionInfo = ref(false)
+const trash = reactive({})
+const loading = ref(true)
+const error = ref('')
+const empty = computed(() => props.status.targets.every(target => !trash[target.id]?.length))
+
+async function loadTrash() {
+	for (const target of props.status.targets) {
+		try {
+			trash[target.id] = await api.trash(target.id)
+		} catch (e) {
+			trash[target.id] = []
+		}
+	}
+	loading.value = false
+}
+watch(() => props.status.targets.map(tg => tg.id).join(','), loadTrash, { immediate: true })
+
+async function untrash(target, item) {
+	error.value = ''
+	try {
+		await confirmPassword()
+		await api.untrash(target.id, item.id)
+		await loadTrash()
+		emit('changed')
+	} catch (e) {
+		error.value = e?.message || ''
+	}
+}
+</script>
+
+<style scoped>
+.ngb-info { background: none; border: none; padding: 0 4px; min-height: auto; cursor: pointer; color: var(--color-primary-element); }
+.ngb-muted { color: var(--color-text-maxcontrast); }
+.ngb-trash { margin: 12px 0; }
+.ngb-trash h3 { font-weight: bold; }
+</style>

src/components/KeySetup.vue

@@ -12,7 +12,7 @@
 			<NcPasswordField v-model="pass2" :label="t('ng_backup', 'Repeat passphrase')" autocomplete="new-password"
 				:error="pass2 !== '' && pass1 !== pass2" :helper-text="pass2 !== '' && pass1 !== pass2 ? t('ng_backup', 'The passphrases do not match') : ''" />
 			<NcTextField v-model="delay" type="number" min="1" max="365"
-				:label="t('ng_backup', 'Days a removed backup stays in the trash before it is really deleted')"
+				:label="t('ng_backup', 'Days a removed backup stays in the Bin before it is really deleted')"
 				:helper-text="t('ng_backup', 'Protects against a malicious or mistaken cleanup. Cannot be changed later.')" />
 			<NcButton type="submit" variant="primary" :disabled="busy || pass1.length < 16 || pass1 !== pass2 || !(delay >= 1 && delay <= 365)">
 				{{ t('ng_backup', 'Create backup key') }}
@@ -22,7 +22,7 @@
 		<template v-else>
 			<p>
 				{{ t('ng_backup', 'Key fingerprint: {fingerprint}', { fingerprint: status.key.fingerprint }) }} ·
-				{{ t('ng_backup', 'Removed backups are kept in the trash for {days} days', { days: status.key.deleteDelayDays }) }}
+				{{ t('ng_backup', 'Removed backups are kept in the Bin for {days} days', { days: status.key.deleteDelayDays }) }}
 			</p>
 
 			<!-- Passphrase slots -->