{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "cloud-backup-schedule", "title": "Cloud Backup Schedule", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/cloud-backup-schedule/cloud-backup-schedule.component.ts", "content": "// Automated cloud snapshot scheduler: an automation tile with a toggle, a storage quota\n// gauge, and a recent-snapshot ledger. \"Backup Now\" simulates a 1.2s snapshot and prepends it.\nimport { Component, DestroyRef, Input, OnInit, inject, signal, ChangeDetectionStrategy } from '@angular/core'\nimport {\n AlertCircle,\n ArrowUpRight,\n Calendar,\n CheckCircle2,\n Clock,\n Cloud,\n Database,\n HardDrive,\n LucideAngularModule,\n Play,\n RotateCw,\n ShieldCheck,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiBadgeComponent, type BadgeVariant } from '@/ui/badge/badge.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSwitchComponent } from '@/ui/switch/switch.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport interface BackupSnapshot {\n id: string\n label: string\n size: string\n timestamp: string\n status: 'completed' | 'in_progress' | 'failed'\n checksum: string\n}\n\nconst initialSnapshots: BackupSnapshot[] = [\n {\n id: 'snap-9842',\n label: 'Daily Scheduled Snapshot',\n size: '14.2 GB',\n timestamp: 'Today, 02:00 UTC',\n status: 'completed',\n checksum: 'sha256:7f9b...a1c3',\n },\n {\n id: 'snap-9841',\n label: 'Daily Scheduled Snapshot',\n size: '14.1 GB',\n timestamp: 'Yesterday, 02:00 UTC',\n status: 'completed',\n checksum: 'sha256:4d8e...90f2',\n },\n {\n id: 'snap-9840',\n label: 'Manual Pre-migration Checkpoint',\n size: '13.9 GB',\n timestamp: 'Sep 15, 14:22 UTC',\n status: 'completed',\n checksum: 'sha256:1a2b...3c4d',\n },\n {\n id: 'snap-9839',\n label: 'Automated Snapshot',\n size: '13.8 GB',\n timestamp: 'Sep 14, 02:00 UTC',\n status: 'failed',\n checksum: 'sha256:9e8f...5d2a',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-cloud-backup-schedule, [ui-cloud-backup-schedule]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiCardComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiCardDescriptionComponent,\n UiCardContentComponent,\n UiCardFooterComponent,\n UiButtonComponent,\n UiBadgeComponent,\n UiProgressComponent,\n UiSwitchComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n \n
\n
\n
\n
\n
\n \n
\n

\n Cloud Backup & Recovery\n

\n \n \n AES-256\n \n
\n

\n Automated cluster snapshot schedules, retention policies, and disaster recovery replication.\n

\n
\n\n
\n \n @if (isBackingUp()) {\n \n } @else {\n \n }\n {{ isBackingUp() ? 'Snapshotting...' : 'Backup Now' }}\n \n
\n
\n\n
\n\n
\n \n
\n
\n
\n \n Daily Automation\n
\n \n
\n\n
\n
\n Window:\n {{ frequency }}\n
\n
\n Retention:\n {{ retentionDays }} days (rolling)\n
\n
\n Target:\n AWS S3 (us-east-1)\n
\n
\n
\n\n \n
\n
\n
\n \n Vault Storage\n
\n {{ usagePercentage }}% used\n
\n\n
\n\n
\n {{ storageUsedGb }} GB used\n {{ storageTotalGb }} GB total\n
\n
\n
\n\n
\n\n \n
\n
\n
\n \n

Recent Snapshots

\n
\n Last verified: {{ lastBackupSuccess() }}\n
\n\n
\n @for (snap of snapshots(); track snap.id) {\n \n
\n @if (snap.status === 'completed') {\n \n } @else if (snap.status === 'failed') {\n \n } @else {\n \n }\n
\n
\n {{ snap.label }}\n ({{ snap.id }})\n
\n
\n {{ snap.checksum }}\n •\n {{ snap.size }}\n
\n
\n
\n\n
\n {{ snap.timestamp }}\n {{ statusLabel(snap.status) }}\n
\n
\n }\n
\n
\n\n \n
\n \n Next scheduled backup: Tonight at 02:00 UTC\n
\n Disaster recovery runbook\n
\n
\n \n `,\n})\nexport class UiCloudBackupScheduleComponent implements OnInit {\n @Input() initialAutoBackup = true\n @Input() frequency = 'Everyday at 02:00 UTC'\n @Input() retentionDays = 30\n @Input() storageUsedGb = 68.4\n @Input() storageTotalGb = 100\n @Input('class') className?: string\n\n readonly autoBackupEnabled = signal(true)\n readonly isBackingUp = signal(false)\n readonly lastBackupSuccess = signal('12 minutes ago')\n readonly snapshots = signal(initialSnapshots.map((s) => ({ ...s })))\n\n protected readonly AlertCircle = AlertCircle\n protected readonly ArrowUpRight = ArrowUpRight\n protected readonly Calendar = Calendar\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly Cloud = Cloud\n protected readonly Database = Database\n protected readonly HardDrive = HardDrive\n protected readonly Play = Play\n protected readonly RotateCw = RotateCw\n protected readonly ShieldCheck = ShieldCheck\n\n private timer: ReturnType | undefined\n\n constructor() {\n inject(DestroyRef).onDestroy(() => clearTimeout(this.timer))\n }\n\n // React seeds useState from the prop once; inputs are only bound by ngOnInit.\n ngOnInit(): void {\n this.autoBackupEnabled.set(this.initialAutoBackup)\n }\n\n get rootClass(): string {\n return cn('@container w-full max-w-4xl space-y-6', this.className)\n }\n\n get usagePercentage(): number {\n return Math.round((this.storageUsedGb / this.storageTotalGb) * 100)\n }\n\n statusVariant(status: BackupSnapshot['status']): BadgeVariant {\n return status === 'completed' ? 'secondary' : status === 'failed' ? 'destructive' : 'outline'\n }\n\n statusLabel(status: BackupSnapshot['status']): string {\n return status.replace('_', ' ')\n }\n\n handleTriggerBackup(): void {\n if (this.isBackingUp()) return\n this.isBackingUp.set(true)\n\n this.timer = setTimeout(() => {\n this.isBackingUp.set(false)\n this.lastBackupSuccess.set('Just now')\n this.snapshots.update((prev) => [\n {\n id: `snap-${Math.floor(1000 + Math.random() * 9000)}`,\n label: 'Manual On-demand Snapshot',\n size: '14.3 GB',\n timestamp: 'Just now',\n status: 'completed',\n checksum: `sha256:${Math.random().toString(36).substring(2, 6)}...${Math.random().toString(36).substring(2, 6)}`,\n },\n ...prev,\n ])\n }, 1200)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/cloud-backup-schedule/cloud-backup-schedule.component.ts" }, { "path": "packages/registry-angular/blocks/cloud-backup-schedule/index.ts", "content": "export { UiCloudBackupScheduleComponent, type BackupSnapshot } from './cloud-backup-schedule.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/cloud-backup-schedule/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/switch.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Automated cloud snapshot scheduler with storage quota metering, encryption status, and recent snapshot timeline.", "categories": [ "dashboard", "devops", "data" ] }