serve.zone/onebox
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(backup): Add backup scheduling system with GFS retention, API and UI integration

Browse Source
This commit is contained in:
Jürgen Kunz
2025-11-27 21:42:07 +00:00
parent c5d239ab28
commit 6ba7e655e3
17 changed files with 2319 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
ui/src/app/core/services/api.service.ts
View File

@@ -29,6 +29,9 @@ import {
IRestoreOptions,
IRestoreResult,
IBackupPasswordStatus,
IBackupSchedule,
IBackupScheduleCreate,
IBackupScheduleUpdate,
} from '../types/api.types';
@Injectable({ providedIn: 'root' })
@@ -260,4 +263,33 @@ export class ApiService {
this.http.get<IApiResponse<IBackupPasswordStatus>>('/api/settings/backup-password')
);
}
// Backup Schedules
async getBackupSchedules(): Promise<IApiResponse<IBackupSchedule[]>> {
return firstValueFrom(this.http.get<IApiResponse<IBackupSchedule[]>>('/api/backup-schedules'));
}
async getBackupSchedule(scheduleId: number): Promise<IApiResponse<IBackupSchedule>> {
return firstValueFrom(this.http.get<IApiResponse<IBackupSchedule>>(`/api/backup-schedules/${scheduleId}`));
}
async createBackupSchedule(data: IBackupScheduleCreate): Promise<IApiResponse<IBackupSchedule>> {
return firstValueFrom(this.http.post<IApiResponse<IBackupSchedule>>('/api/backup-schedules', data));
}
async updateBackupSchedule(scheduleId: number, data: IBackupScheduleUpdate): Promise<IApiResponse<IBackupSchedule>> {
return firstValueFrom(this.http.put<IApiResponse<IBackupSchedule>>(`/api/backup-schedules/${scheduleId}`, data));
}
async deleteBackupSchedule(scheduleId: number): Promise<IApiResponse<void>> {
return firstValueFrom(this.http.delete<IApiResponse<void>>(`/api/backup-schedules/${scheduleId}`));
}
async triggerBackupSchedule(scheduleId: number): Promise<IApiResponse<void>> {
return firstValueFrom(this.http.post<IApiResponse<void>>(`/api/backup-schedules/${scheduleId}/trigger`, {}));
}
async getServiceBackupSchedules(serviceName: string): Promise<IApiResponse<IBackupSchedule[]>> {
return firstValueFrom(this.http.get<IApiResponse<IBackupSchedule[]>>(`/api/services/${serviceName}/backup-schedules`));
}
}

58
ui/src/app/core/types/api.types.ts
View File

@@ -376,3 +376,61 @@ export interface IRestoreResult {
export interface IBackupPasswordStatus {
isConfigured: boolean;
}
// Backup Schedule Types
export type TBackupScheduleScope = 'all' | 'pattern' | 'service';
// Retention policy for GFS (Grandfather-Father-Son) time-window based retention
export interface IRetentionPolicy {
hourly: number; // 0 = disabled, else keep up to N backups from last 24h
daily: number; // Keep 1 backup per day for last N days
weekly: number; // Keep 1 backup per week for last N weeks
monthly: number; // Keep 1 backup per month for last N months
}
// Default retention presets
export const RETENTION_PRESETS = {
standard: { hourly: 0, daily: 7, weekly: 4, monthly: 12 },
frequent: { hourly: 24, daily: 7, weekly: 4, monthly: 12 },
minimal: { hourly: 0, daily: 3, weekly: 2, monthly: 6 },
longterm: { hourly: 0, daily: 14, weekly: 8, monthly: 24 },
} as const;
export type TRetentionPreset = keyof typeof RETENTION_PRESETS | 'custom';
export interface IBackupSchedule {
id?: number;
scopeType: TBackupScheduleScope;
scopePattern?: string; // Glob pattern for 'pattern' scope type
serviceId?: number; // Only for 'service' scope type
serviceName?: string; // Only for 'service' scope type
cronExpression: string;
retention: IRetentionPolicy; // Per-tier retention counts
enabled: boolean;
lastRunAt: number | null;
nextRunAt: number | null;
lastStatus: 'success' | 'failed' | null;
lastError: string | null;
createdAt: number;
updatedAt: number;
}
export interface IBackupScheduleCreate {
scopeType: TBackupScheduleScope;
scopePattern?: string; // Required for 'pattern' scope type
serviceName?: string; // Required for 'service' scope type
cronExpression: string;
retention: IRetentionPolicy;
enabled?: boolean;
}
export interface IBackupScheduleUpdate {
cronExpression?: string;
retention?: IRetentionPolicy;
enabled?: boolean;
}
// Updated IBackup with schedule fields
export interface IBackupWithSchedule extends IBackup {
scheduleId?: number;
}

2
ui/src/app/features/login/login.component.ts
View File

@@ -56,7 +56,7 @@ import { AlertComponent, AlertDescriptionComponent } from '../../ui/alert/alert.
<ui-card class="w-full max-w-md">
<ui-card-header class="text-center">
<div class="mx-auto mb-4">
<div class="flex justify-center mb-4">
<svg class="h-12 w-12 text-primary" viewBox="0 0 24 24" fill="currentColor">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
</svg>

816
ui/src/app/features/services/backups-tab.component.ts Normal file
View File

@@ -0,0 +1,816 @@
import { Component, inject, signal, computed, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ApiService } from '../../core/services/api.service';
import { ToastService } from '../../core/services/toast.service';
import {
IService,
IBackup,
IBackupSchedule,
IBackupScheduleCreate,
IRetentionPolicy,
TRetentionPreset,
RETENTION_PRESETS,
} from '../../core/types/api.types';
import {
CardComponent,
CardHeaderComponent,
CardTitleComponent,
CardDescriptionComponent,
CardContentComponent,
} from '../../ui/card/card.component';
import { ButtonComponent } from '../../ui/button/button.component';
import { BadgeComponent } from '../../ui/badge/badge.component';
import {
TableComponent,
TableHeaderComponent,
TableBodyComponent,
TableRowComponent,
TableHeadComponent,
TableCellComponent,
} from '../../ui/table/table.component';
import { SkeletonComponent } from '../../ui/skeleton/skeleton.component';
import {
DialogComponent,
DialogHeaderComponent,
DialogTitleComponent,
DialogDescriptionComponent,
DialogFooterComponent,
} from '../../ui/dialog/dialog.component';
import { InputComponent } from '../../ui/input/input.component';
import { LabelComponent } from '../../ui/label/label.component';
import { SelectComponent, SelectOption } from '../../ui/select/select.component';
@Component({
selector: 'app-backups-tab',
standalone: true,
host: { class: 'block' },
imports: [
CommonModule,
FormsModule,
CardComponent,
CardHeaderComponent,
CardTitleComponent,
CardDescriptionComponent,
CardContentComponent,
ButtonComponent,
BadgeComponent,
TableComponent,
TableHeaderComponent,
TableBodyComponent,
TableRowComponent,
TableHeadComponent,
TableCellComponent,
SkeletonComponent,
DialogComponent,
DialogHeaderComponent,
DialogTitleComponent,
DialogDescriptionComponent,
DialogFooterComponent,
InputComponent,
LabelComponent,
SelectComponent,
],
template: `
<div class="space-y-6">
<!-- Backup Schedules Card -->
<ui-card>
<ui-card-header>
<div class="flex items-center justify-between">
<div>
<ui-card-title>Backup Schedules</ui-card-title>
<ui-card-description>Configure automated backup schedules for your services</ui-card-description>
</div>
<button uiButton (click)="openCreateScheduleDialog()">
<svg class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
</svg>
Create Schedule
</button>
</div>
</ui-card-header>
<ui-card-content class="p-0">
@if (schedulesLoading() && schedules().length === 0) {
<div class="p-6 space-y-4">
@for (_ of [1,2,3]; track $index) {
<ui-skeleton class="h-12 w-full" />
}
</div>
} @else if (schedules().length === 0) {
<div class="p-12 text-center">
<svg class="mx-auto h-12 w-12 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<h3 class="mt-4 text-lg font-semibold">No backup schedules</h3>
<p class="mt-2 text-sm text-muted-foreground">Create a schedule to automatically backup your services.</p>
</div>
} @else {
<ui-table>
<ui-table-header>
<ui-table-row>
<ui-table-head>Scope</ui-table-head>
<ui-table-head>Retention</ui-table-head>
<ui-table-head>Schedule</ui-table-head>
<ui-table-head>Last Run</ui-table-head>
<ui-table-head>Next Run</ui-table-head>
<ui-table-head>Status</ui-table-head>
<ui-table-head class="text-right">Actions</ui-table-head>
</ui-table-row>
</ui-table-header>
<ui-table-body>
@for (schedule of schedules(); track schedule.id) {
<ui-table-row>
<ui-table-cell class="font-medium">{{ getScopeDisplay(schedule) }}</ui-table-cell>
<ui-table-cell class="font-mono text-xs" [title]="getRetentionTooltip(schedule.retention)">
{{ getRetentionDisplay(schedule.retention) }}
</ui-table-cell>
<ui-table-cell class="text-muted-foreground font-mono text-xs">
{{ schedule.cronExpression }}
</ui-table-cell>
<ui-table-cell class="text-muted-foreground">
{{ schedule.lastRunAt ? formatDate(schedule.lastRunAt) : 'Never' }}
</ui-table-cell>
<ui-table-cell class="text-muted-foreground">
{{ schedule.nextRunAt ? formatDate(schedule.nextRunAt) : '-' }}
</ui-table-cell>
<ui-table-cell>
@if (!schedule.enabled) {
<ui-badge variant="secondary">Disabled</ui-badge>
} @else if (schedule.lastStatus === 'success') {
<ui-badge variant="success">Success</ui-badge>
} @else if (schedule.lastStatus === 'failed') {
<ui-badge variant="destructive" [title]="schedule.lastError || ''">Failed</ui-badge>
} @else {
<ui-badge variant="outline">Pending</ui-badge>
}
</ui-table-cell>
<ui-table-cell class="text-right">
<div class="flex items-center justify-end gap-2">
<button
uiButton
variant="outline"
size="sm"
(click)="triggerBackup(schedule)"
[disabled]="scheduleActionLoading() === schedule.id"
title="Run backup now"
>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
<button
uiButton
variant="outline"
size="sm"
(click)="toggleSchedule(schedule)"
[disabled]="scheduleActionLoading() === schedule.id"
[title]="schedule.enabled ? 'Disable' : 'Enable'"
>
@if (schedule.enabled) {
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
} @else {
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
}
</button>
<button
uiButton
variant="destructive"
size="sm"
(click)="confirmDeleteSchedule(schedule)"
[disabled]="scheduleActionLoading() === schedule.id"
>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</ui-table-cell>
</ui-table-row>
}
</ui-table-body>
</ui-table>
}
</ui-card-content>
</ui-card>
<!-- All Backups Card -->
<ui-card>
<ui-card-header>
<ui-card-title>All Backups</ui-card-title>
<ui-card-description>Browse and manage all backups across services</ui-card-description>
</ui-card-header>
<ui-card-content class="p-0">
@if (backupsLoading() && backups().length === 0) {
<div class="p-6 space-y-4">
@for (_ of [1,2,3]; track $index) {
<ui-skeleton class="h-12 w-full" />
}
</div>
} @else if (backups().length === 0) {
<div class="p-12 text-center">
<svg class="mx-auto h-12 w-12 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
</svg>
<h3 class="mt-4 text-lg font-semibold">No backups</h3>
<p class="mt-2 text-sm text-muted-foreground">Backups will appear here once created.</p>
</div>
} @else {
<ui-table>
<ui-table-header>
<ui-table-row>
<ui-table-head>Service</ui-table-head>
<ui-table-head>Created</ui-table-head>
<ui-table-head>Size</ui-table-head>
<ui-table-head>Includes</ui-table-head>
<ui-table-head class="text-right">Actions</ui-table-head>
</ui-table-row>
</ui-table-header>
<ui-table-body>
@for (backup of backups(); track backup.id) {
<ui-table-row>
<ui-table-cell class="font-medium">{{ backup.serviceName }}</ui-table-cell>
<ui-table-cell class="text-muted-foreground">{{ formatDate(backup.createdAt) }}</ui-table-cell>
<ui-table-cell class="text-muted-foreground">{{ formatSize(backup.sizeBytes) }}</ui-table-cell>
<ui-table-cell>
<div class="flex gap-1 flex-wrap">
@if (backup.includesImage) {
<ui-badge variant="outline">Image</ui-badge>
}
@for (resource of backup.platformResources; track resource) {
<ui-badge variant="secondary">{{ resource }}</ui-badge>
}
@if (!backup.includesImage && backup.platformResources.length === 0) {
<span class="text-muted-foreground text-sm">Config only</span>
}
</div>
</ui-table-cell>
<ui-table-cell class="text-right">
<div class="flex items-center justify-end gap-2">
<a
[href]="getBackupDownloadUrl(backup.id!)"
download
class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-8 px-3"
>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
</a>
<button
uiButton
variant="destructive"
size="sm"
(click)="confirmDeleteBackup(backup)"
[disabled]="backupActionLoading() === backup.id"
>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</ui-table-cell>
</ui-table-row>
}
</ui-table-body>
</ui-table>
}
</ui-card-content>
</ui-card>
</div>
<!-- Create Schedule Dialog -->
<ui-dialog [open]="createScheduleDialogOpen()" (openChange)="createScheduleDialogOpen.set($event)">
<ui-dialog-header>
<ui-dialog-title>Create Backup Schedule</ui-dialog-title>
<ui-dialog-description>
Set up an automated backup schedule.
</ui-dialog-description>
</ui-dialog-header>
<div class="space-y-4 py-4">
<!-- Scope Type Selection -->
<div class="space-y-2">
<label uiLabel>Scope</label>
<div class="flex flex-col gap-2">
<label class="flex items-center gap-2 cursor-pointer">
<input
type="radio"
name="scopeType"
value="all"
[checked]="newSchedule().scopeType === 'all'"
(change)="updateNewSchedule('scopeType', 'all')"
class="h-4 w-4"
/>
<span class="text-sm">All Services (global)</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input
type="radio"
name="scopeType"
value="pattern"
[checked]="newSchedule().scopeType === 'pattern'"
(change)="updateNewSchedule('scopeType', 'pattern')"
class="h-4 w-4"
/>
<span class="text-sm">Pattern (glob)</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input
type="radio"
name="scopeType"
value="service"
[checked]="newSchedule().scopeType === 'service'"
(change)="updateNewSchedule('scopeType', 'service')"
class="h-4 w-4"
/>
<span class="text-sm">Specific Service</span>
</label>
</div>
</div>
<!-- Pattern input (shown for pattern scope) -->
@if (newSchedule().scopeType === 'pattern') {
<div class="space-y-2">
<label uiLabel>Pattern</label>
<input
uiInput
[value]="newSchedule().scopePattern || ''"
(input)="updateNewSchedule('scopePattern', $any($event.target).value)"
placeholder="test-*, prod-*, *-service"
/>
<p class="text-sm text-muted-foreground">
Use * to match any characters (e.g., test-* matches test-api, test-web)
</p>
</div>
}
<!-- Service select (shown for service scope) -->
@if (newSchedule().scopeType === 'service') {
<div class="space-y-2">
<label uiLabel>Service</label>
<ui-select
[options]="serviceOptions()"
[value]="newSchedule().serviceName || ''"
(valueChange)="updateNewSchedule('serviceName', $event)"
placeholder="Select a service..."
/>
</div>
}
<div class="space-y-2">
<label uiLabel>Cron Expression</label>
<input
uiInput
[value]="newSchedule().cronExpression || '0 2 * * *'"
(input)="updateNewSchedule('cronExpression', $any($event.target).value)"
placeholder="0 2 * * *"
/>
<p class="text-sm text-muted-foreground">
e.g., "0 2 * * *" = daily at 2am, "0 2 * * 0" = weekly Sunday at 2am
</p>
</div>
<div class="space-y-2">
<label uiLabel>Retention Preset</label>
<ui-select
[options]="presetOptions"
[value]="selectedPreset()"
(valueChange)="selectPreset($event)"
placeholder="Select preset..."
/>
</div>
<div class="space-y-3 p-3 border rounded-md bg-muted/30">
<p class="text-sm font-medium">Custom Retention (0 = disabled)</p>
<div class="grid grid-cols-2 gap-3">
<div class="space-y-1">
<label uiLabel class="text-xs">Hourly</label>
<input
uiInput
type="number"
min="0"
[value]="newScheduleRetention().hourly"
(input)="updateRetention('hourly', +$any($event.target).value)"
/>
</div>
<div class="space-y-1">
<label uiLabel class="text-xs">Daily</label>
<input
uiInput
type="number"
min="0"
[value]="newScheduleRetention().daily"
(input)="updateRetention('daily', +$any($event.target).value)"
/>
</div>
<div class="space-y-1">
<label uiLabel class="text-xs">Weekly</label>
<input
uiInput
type="number"
min="0"
[value]="newScheduleRetention().weekly"
(input)="updateRetention('weekly', +$any($event.target).value)"
/>
</div>
<div class="space-y-1">
<label uiLabel class="text-xs">Monthly</label>
<input
uiInput
type="number"
min="0"
[value]="newScheduleRetention().monthly"
(input)="updateRetention('monthly', +$any($event.target).value)"
/>
</div>
</div>
</div>
</div>
<ui-dialog-footer>
<button uiButton variant="outline" (click)="createScheduleDialogOpen.set(false)">Cancel</button>
<button
uiButton
(click)="createSchedule()"
[disabled]="!isCreateScheduleValid() || scheduleActionLoading() !== null"
>
Create Schedule
</button>
</ui-dialog-footer>
</ui-dialog>
<!-- Delete Schedule Confirmation Dialog -->
<ui-dialog [open]="deleteScheduleDialogOpen()" (openChange)="deleteScheduleDialogOpen.set($event)">
<ui-dialog-header>
<ui-dialog-title>Delete Schedule</ui-dialog-title>
<ui-dialog-description>
Are you sure you want to delete this backup schedule for {{ scheduleToDelete() ? getScopeDisplay(scheduleToDelete()!) : '' }}?
This will not delete existing backups.
</ui-dialog-description>
</ui-dialog-header>
<ui-dialog-footer>
<button uiButton variant="outline" (click)="deleteScheduleDialogOpen.set(false)">Cancel</button>
<button uiButton variant="destructive" (click)="deleteSchedule()" [disabled]="scheduleActionLoading() !== null">
Delete
</button>
</ui-dialog-footer>
</ui-dialog>
<!-- Delete Backup Confirmation Dialog -->
<ui-dialog [open]="deleteBackupDialogOpen()" (openChange)="deleteBackupDialogOpen.set($event)">
<ui-dialog-header>
<ui-dialog-title>Delete Backup</ui-dialog-title>
<ui-dialog-description>
Are you sure you want to delete this backup for "{{ backupToDelete()?.serviceName }}"?
This action cannot be undone.
</ui-dialog-description>
</ui-dialog-header>
<ui-dialog-footer>
<button uiButton variant="outline" (click)="deleteBackupDialogOpen.set(false)">Cancel</button>
<button uiButton variant="destructive" (click)="deleteBackup()" [disabled]="backupActionLoading() !== null">
Delete
</button>
</ui-dialog-footer>
</ui-dialog>
`,
})
export class BackupsTabComponent implements OnInit {
private api = inject(ApiService);
private toast = inject(ToastService);
// Data
services = signal<IService[]>([]);
schedules = signal<IBackupSchedule[]>([]);
backups = signal<IBackup[]>([]);
// Loading states
schedulesLoading = signal(false);
backupsLoading = signal(false);
scheduleActionLoading = signal<number | null>(null);
backupActionLoading = signal<number | null>(null);
// Dialog states
createScheduleDialogOpen = signal(false);
deleteScheduleDialogOpen = signal(false);
deleteBackupDialogOpen = signal(false);
// Dialog data
newSchedule = signal<Partial<IBackupScheduleCreate>>({
scopeType: 'service',
cronExpression: '0 2 * * *',
retention: { ...RETENTION_PRESETS.standard },
});
newScheduleRetention = signal<IRetentionPolicy>({ ...RETENTION_PRESETS.standard });
selectedPreset = signal<TRetentionPreset>('standard');
scheduleToDelete = signal<IBackupSchedule | null>(null);
backupToDelete = signal<IBackup | null>(null);
// Computed options for selects
serviceOptions = computed(() =>
this.services().map((s) => ({ label: s.name, value: s.name }))
);
presetOptions: SelectOption[] = [
{ label: 'Standard (H:0, D:7, W:4, M:12)', value: 'standard' },
{ label: 'Frequent (H:24, D:7, W:4, M:12)', value: 'frequent' },
{ label: 'Minimal (H:0, D:3, W:2, M:6)', value: 'minimal' },
{ label: 'Long-term (H:0, D:14, W:8, M:24)', value: 'longterm' },
{ label: 'Custom', value: 'custom' },
];
ngOnInit(): void {
this.loadServices();
this.loadSchedules();
this.loadBackups();
}
async loadServices(): Promise<void> {
try {
const response = await this.api.getServices();
if (response.success && response.data) {
this.services.set(response.data);
}
} catch {
// Silently fail - services needed for schedule creation
}
}
async loadSchedules(): Promise<void> {
this.schedulesLoading.set(true);
try {
const response = await this.api.getBackupSchedules();
if (response.success && response.data) {
this.schedules.set(response.data);
}
} catch {
this.toast.error('Failed to load backup schedules');
} finally {
this.schedulesLoading.set(false);
}
}
async loadBackups(): Promise<void> {
this.backupsLoading.set(true);
try {
const response = await this.api.getBackups();
if (response.success && response.data) {
this.backups.set(response.data);
}
} catch {
this.toast.error('Failed to load backups');
} finally {
this.backupsLoading.set(false);
}
}
// Schedule actions
openCreateScheduleDialog(): void {
this.newSchedule.set({
scopeType: 'service',
cronExpression: '0 2 * * *',
retention: { ...RETENTION_PRESETS.standard },
});
this.newScheduleRetention.set({ ...RETENTION_PRESETS.standard });
this.selectedPreset.set('standard');
this.createScheduleDialogOpen.set(true);
}
updateNewSchedule(field: keyof IBackupScheduleCreate, value: string): void {
this.newSchedule.update((s) => ({ ...s, [field]: value }));
}
selectPreset(preset: string): void {
this.selectedPreset.set(preset as TRetentionPreset);
if (preset !== 'custom' && preset in RETENTION_PRESETS) {
const retention = { ...RETENTION_PRESETS[preset as keyof typeof RETENTION_PRESETS] };
this.newScheduleRetention.set(retention);
this.newSchedule.update((s) => ({ ...s, retention }));
}
}
updateRetention(field: keyof IRetentionPolicy, value: number): void {
this.selectedPreset.set('custom');
this.newScheduleRetention.update((r) => ({ ...r, [field]: value }));
this.newSchedule.update((s) => ({
...s,
retention: { ...this.newScheduleRetention() },
}));
}
async createSchedule(): Promise<void> {
const schedule = this.newSchedule();
if (!this.isCreateScheduleValid()) {
this.toast.error('Please fill in all required fields');
return;
}
// Ensure retention is set
const createRequest: IBackupScheduleCreate = {
scopeType: schedule.scopeType!,
scopePattern: schedule.scopePattern,
serviceName: schedule.serviceName,
cronExpression: schedule.cronExpression || '0 2 * * *',
retention: this.newScheduleRetention(),
enabled: schedule.enabled,
};
this.scheduleActionLoading.set(-1); // Use -1 for create action
try {
const response = await this.api.createBackupSchedule(createRequest);
if (response.success) {
const scopeDesc = this.getScheduleCreateScopeDisplay(schedule);
this.toast.success(`Backup schedule created for ${scopeDesc}`);
this.createScheduleDialogOpen.set(false);
this.loadSchedules();
} else {
this.toast.error(response.error || 'Failed to create schedule');
}
} catch {
this.toast.error('Failed to create schedule');
} finally {
this.scheduleActionLoading.set(null);
}
}
async triggerBackup(schedule: IBackupSchedule): Promise<void> {
this.scheduleActionLoading.set(schedule.id!);
try {
const response = await this.api.triggerBackupSchedule(schedule.id!);
if (response.success) {
this.toast.success(`Backup triggered for ${this.getScopeDisplay(schedule)}`);
// Reload after a short delay to show the new backup
setTimeout(() => {
this.loadSchedules();
this.loadBackups();
}, 2000);
} else {
this.toast.error(response.error || 'Failed to trigger backup');
}
} catch {
this.toast.error('Failed to trigger backup');
} finally {
this.scheduleActionLoading.set(null);
}
}
async toggleSchedule(schedule: IBackupSchedule): Promise<void> {
this.scheduleActionLoading.set(schedule.id!);
try {
const response = await this.api.updateBackupSchedule(schedule.id!, {
enabled: !schedule.enabled,
});
if (response.success) {
this.toast.success(`Schedule ${schedule.enabled ? 'disabled' : 'enabled'}`);
this.loadSchedules();
} else {
this.toast.error(response.error || 'Failed to update schedule');
}
} catch {
this.toast.error('Failed to update schedule');
} finally {
this.scheduleActionLoading.set(null);
}
}
confirmDeleteSchedule(schedule: IBackupSchedule): void {
this.scheduleToDelete.set(schedule);
this.deleteScheduleDialogOpen.set(true);
}
async deleteSchedule(): Promise<void> {
const schedule = this.scheduleToDelete();
if (!schedule) return;
this.scheduleActionLoading.set(schedule.id!);
try {
const response = await this.api.deleteBackupSchedule(schedule.id!);
if (response.success) {
this.toast.success('Backup schedule deleted');
this.deleteScheduleDialogOpen.set(false);
this.loadSchedules();
} else {
this.toast.error(response.error || 'Failed to delete schedule');
}
} catch {
this.toast.error('Failed to delete schedule');
} finally {
this.scheduleActionLoading.set(null);
this.scheduleToDelete.set(null);
}
}
// Backup actions
getBackupDownloadUrl(backupId: number): string {
return this.api.getBackupDownloadUrl(backupId);
}
confirmDeleteBackup(backup: IBackup): void {
this.backupToDelete.set(backup);
this.deleteBackupDialogOpen.set(true);
}
async deleteBackup(): Promise<void> {
const backup = this.backupToDelete();
if (!backup) return;
this.backupActionLoading.set(backup.id!);
try {
const response = await this.api.deleteBackup(backup.id!);
if (response.success) {
this.toast.success('Backup deleted');
this.deleteBackupDialogOpen.set(false);
this.loadBackups();
} else {
this.toast.error(response.error || 'Failed to delete backup');
}
} catch {
this.toast.error('Failed to delete backup');
} finally {
this.backupActionLoading.set(null);
this.backupToDelete.set(null);
}
}
// Helpers
formatDate(timestamp: number): string {
return new Date(timestamp).toLocaleString();
}
formatSize(bytes: number): string {
if (bytes < 1024) return `${bytes} B`;
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
}
// Scope helpers
getScopeDisplay(schedule: IBackupSchedule): string {
switch (schedule.scopeType) {
case 'all':
return 'All Services';
case 'pattern':
return `Pattern: ${schedule.scopePattern || ''}`;
case 'service':
return schedule.serviceName || 'Unknown Service';
default:
return schedule.serviceName || 'Unknown';
}
}
getScheduleCreateScopeDisplay(schedule: Partial<IBackupScheduleCreate>): string {
switch (schedule.scopeType) {
case 'all':
return 'all services';
case 'pattern':
return `pattern "${schedule.scopePattern || ''}"`;
case 'service':
return `"${schedule.serviceName || ''}"`;
default:
return 'unknown scope';
}
}
isCreateScheduleValid(): boolean {
const schedule = this.newSchedule();
const retention = this.newScheduleRetention();
// Check retention is valid (at least one tier has count > 0)
const hasRetention = retention.hourly > 0 || retention.daily > 0 ||
retention.weekly > 0 || retention.monthly > 0;
if (!hasRetention) return false;
if (!schedule.scopeType) return false;
switch (schedule.scopeType) {
case 'all':
return true;
case 'pattern':
return !!schedule.scopePattern && schedule.scopePattern.trim().length > 0;
case 'service':
return !!schedule.serviceName && schedule.serviceName.trim().length > 0;
default:
return false;
}
}
// Retention display helpers
getRetentionDisplay(retention: IRetentionPolicy): string {
const parts: string[] = [];
if (retention.hourly > 0) parts.push(`H:${retention.hourly}`);
if (retention.daily > 0) parts.push(`D:${retention.daily}`);
if (retention.weekly > 0) parts.push(`W:${retention.weekly}`);
if (retention.monthly > 0) parts.push(`M:${retention.monthly}`);
return parts.length > 0 ? parts.join(', ') : 'None';
}
getRetentionTooltip(retention: IRetentionPolicy): string {
const parts: string[] = [];
if (retention.hourly > 0) parts.push(`${retention.hourly} hourly`);
if (retention.daily > 0) parts.push(`${retention.daily} daily`);
if (retention.weekly > 0) parts.push(`${retention.weekly} weekly`);
if (retention.monthly > 0) parts.push(`${retention.monthly} monthly`);
return parts.length > 0 ? `Keep: ${parts.join(', ')}` : 'No retention configured';
}
}

10
ui/src/app/features/services/services-list.component.ts
View File

@@ -31,8 +31,9 @@ import {
DialogFooterComponent,
} from '../../ui/dialog/dialog.component';
import { TabsComponent, TabComponent } from '../../ui/tabs/tabs.component';
import { BackupsTabComponent } from './backups-tab.component';
type TServicesTab = 'user' | 'system';
type TServicesTab = 'user' | 'system' | 'backups';
@Component({
selector: 'app-services-list',
@@ -60,6 +61,7 @@ type TServicesTab = 'user' | 'system';
DialogFooterComponent,
TabsComponent,
TabComponent,
BackupsTabComponent,
],
template: `
<div class="space-y-6">
@@ -85,6 +87,7 @@ type TServicesTab = 'user' | 'system';
<ui-tabs class="block">
<ui-tab [active]="activeTab() === 'user'" (tabClick)="setTab('user')">User Services</ui-tab>
<ui-tab [active]="activeTab() === 'system'" (tabClick)="setTab('system')">System Services</ui-tab>
<ui-tab [active]="activeTab() === 'backups'" (tabClick)="setTab('backups')">Backups</ui-tab>
</ui-tabs>
<!-- Tab Content -->
@@ -280,6 +283,9 @@ type TServicesTab = 'user' | 'system';
</ui-card-content>
</ui-card>
}
@case ('backups') {
<app-backups-tab />
}
}
</div>
@@ -338,7 +344,7 @@ export class ServicesListComponent implements OnInit, OnDestroy {
// Subscribe to route params to sync tab state with URL
this.routeSub = this.route.paramMap.subscribe((params) => {
const tab = params.get('tab') as TServicesTab;
if (tab && ['user', 'system'].includes(tab)) {
if (tab && ['user', 'system', 'backups'].includes(tab)) {
this.activeTab.set(tab);
}
});

3
ui/src/app/ui/card/card.component.ts
View File

@@ -30,7 +30,7 @@ export class CardComponent {
export class CardHeaderComponent {
@Input() class = '';
private baseClasses = 'p-6';
private baseClasses = 'block p-6';
get computedClasses(): string {
return `${this.baseClasses} ${this.class}`.trim();
@@ -44,6 +44,7 @@ export class CardHeaderComponent {
host: {
'[class]': 'computedClasses',
},
styles: [':host { display: block; }'],
})
export class CardTitleComponent {
@Input() class = '';