{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "deployment-pipeline", "title": "Deployment Pipeline", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/deployment-pipeline/deployment-pipeline.component.ts", "content": "import { ChangeDetectionStrategy, Component, DestroyRef, Input, OnInit, computed, inject, signal } from '@angular/core'\nimport {\n Check,\n CheckCircle2,\n ChevronDown,\n ChevronUp,\n Clock,\n Copy,\n ExternalLink,\n GitBranch,\n GitCommit,\n Layers,\n Loader2,\n LucideAngularModule,\n MoreHorizontal,\n Play,\n RotateCcw,\n RotateCw,\n Terminal,\n Undo2,\n XCircle,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport {\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n} from '@/ui/dropdown-menu/dropdown-menu.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\nimport { UiTabsComponent, UiTabsListComponent, UiTabsTriggerComponent } from '@/ui/tabs/tabs.component'\n\nexport type DeploymentEnvironment = 'all' | 'production' | 'preview' | 'staging'\nexport type DeploymentStatus = 'ready' | 'building' | 'failed' | 'rolled-back'\nexport type DeploymentTrigger = 'push' | 'manual' | 'rollback'\n\nexport interface DeploymentRecord {\n id: string\n commitMessage: string\n commitHash: string\n branch: string\n environment: 'production' | 'preview' | 'staging'\n status: DeploymentStatus\n duration: string\n deployer: {\n name: string\n initials: string\n }\n trigger: DeploymentTrigger\n deployedAt: string\n url: string\n}\n\nexport interface PipelineStep {\n id: string\n name: string\n duration: string\n description: string\n status: 'completed' | 'in-progress' | 'pending'\n}\n\nexport type TerminalLogType = 'info' | 'cmd' | 'stdout' | 'success'\n\nexport interface TerminalLogLine {\n time: string\n type: TerminalLogType\n prefix: string\n text: string\n}\n\nconst branches = ['main', 'staging', 'preview/safari-tabs', 'preview/e2e-tests']\n\nconst pipelineSteps: PipelineStep[] = [\n { id: 'step-1', name: 'Queued', duration: '0.2s', description: 'Worker allocated', status: 'completed' },\n { id: 'step-2', name: 'Build & Bundle', duration: '42s', description: 'Vite & TS compilation', status: 'completed' },\n {\n id: 'step-3',\n name: 'Static Generation',\n duration: '18s',\n description: '42 SSG pages rendered',\n status: 'completed',\n },\n { id: 'step-4', name: 'Edge Propagation', duration: '3s', description: 'Synced to 310 PoPs', status: 'completed' },\n { id: 'step-5', name: 'Ready', duration: 'Instant', description: 'Verified & live', status: 'completed' },\n]\n\nconst terminalLogs: TerminalLogLine[] = [\n {\n time: '00:00:00.120',\n type: 'info',\n prefix: '❯ [worker]',\n text: 'Initializing deployment worker in region iad-1 (runner-edge-iad-4)...',\n },\n {\n time: '00:00:00.340',\n type: 'info',\n prefix: '❯ [git]',\n text: 'Cloning repository uipkge/core-registry at commit a3f89b1 (branch: main)...',\n },\n {\n time: '00:00:01.050',\n type: 'info',\n prefix: '❯ [cache]',\n text: 'Restoring pnpm store cache (v9.15.0)... (1,482 packages restored, 98.4% cache hit)',\n },\n { time: '00:00:02.410', type: 'cmd', prefix: '$', text: 'pnpm run build:registry && pnpm run build' },\n { time: '00:00:04.180', type: 'stdout', prefix: ' [vite]', text: 'Transformed 482 modules in 312ms' },\n {\n time: '00:00:15.920',\n type: 'stdout',\n prefix: ' [astro]',\n text: 'Building static entrypoints for production (Vue 3.5 + React 19 islands)...',\n },\n { time: '00:00:32.400', type: 'stdout', prefix: ' [astro]', text: '✓ 42 static pages rendered in 16.48s' },\n {\n time: '00:00:44.210',\n type: 'stdout',\n prefix: ' [registry]',\n text: 'Generated 120 manifests into public/r/vue/*.json and public/r/react/*.json',\n },\n {\n time: '00:00:58.800',\n type: 'info',\n prefix: '❯ [edge]',\n text: 'Optimizing edge assets with Brotli compression (saved 4.8 MB)...',\n },\n {\n time: '00:01:01.320',\n type: 'info',\n prefix: '❯ [edge]',\n text: 'Propagating edge routes to Cloudflare global network across 310 PoPs...',\n },\n {\n time: '00:01:03.200',\n type: 'success',\n prefix: '✓ [ready]',\n text: 'Deployment successfully verified and healthy at https://uipkge.dev',\n },\n {\n time: '00:01:03.210',\n type: 'success',\n prefix: '✓ [exit]',\n text: 'Process completed with exit code 0 (success in 1m 03.2s)',\n },\n]\n\nconst deployments: DeploymentRecord[] = [\n {\n id: 'd-1042',\n commitMessage: 'feat(blocks): add ecommerce suite (#412)',\n commitHash: 'a3f89b1',\n branch: 'main',\n environment: 'production',\n status: 'ready',\n duration: '1m 03s',\n deployer: { name: 'Jordan Diaz', initials: 'JD' },\n trigger: 'push',\n deployedAt: '12m ago',\n url: 'https://uipkge.dev',\n },\n {\n id: 'd-1041',\n commitMessage: 'fix(tabs): resolve indicator jitter in safari (#411)',\n commitHash: 'f79b20e',\n branch: 'preview/safari-tabs',\n environment: 'preview',\n status: 'ready',\n duration: '48s',\n deployer: { name: 'Amara Osei', initials: 'AO' },\n trigger: 'push',\n deployedAt: '2h ago',\n url: 'https://uipkge-pr-411.uipkge.dev',\n },\n {\n id: 'd-1040',\n commitMessage: 'refactor(avatar): extract avatar-group primitive (#410)',\n commitHash: '91bc8d3',\n branch: 'staging',\n environment: 'staging',\n status: 'ready',\n duration: '54s',\n deployer: { name: 'Jonas Weber', initials: 'JW' },\n trigger: 'manual',\n deployedAt: '5h ago',\n url: 'https://staging.uipkge.dev',\n },\n {\n id: 'd-1039',\n commitMessage: 'test(e2e): add playwright visual regression suite (#409)',\n commitHash: '62e08a4',\n branch: 'preview/e2e-tests',\n environment: 'preview',\n status: 'building',\n duration: '1m 12s',\n deployer: { name: 'Priya Nair', initials: 'PN' },\n trigger: 'push',\n deployedAt: 'Just now',\n url: 'https://uipkge-pr-409.uipkge.dev',\n },\n {\n id: 'd-1038',\n commitMessage: 'perf(theme): eliminate css custom property recalculation (#408)',\n commitHash: '3d12fa9',\n branch: 'staging',\n environment: 'staging',\n status: 'failed',\n duration: '24s',\n deployer: { name: 'Marcus Lee', initials: 'ML' },\n trigger: 'push',\n deployedAt: 'Yesterday',\n url: 'https://staging-failed.uipkge.dev',\n },\n {\n id: 'd-1037',\n commitMessage: 'chore(deps): update reka-ui to v1.1.0 (#407)',\n commitHash: '180eac2',\n branch: 'main',\n environment: 'production',\n status: 'rolled-back',\n duration: '1m 20s',\n deployer: { name: 'Jordan Diaz', initials: 'JD' },\n trigger: 'rollback',\n deployedAt: '2 days ago',\n url: 'https://uipkge-v2-rollback.uipkge.dev',\n },\n]\n\n/**\n * CI/CD deployments dashboard: environment tabs, latest-deployment hero with the\n * execution stepper and a collapsible build-log terminal, and a filterable history\n * table with per-row actions. Edit the data consts above to wire it to real data.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-deployment-pipeline, [ui-deployment-pipeline]',\n standalone: true,\n // React renders the root
itself: keep this wrapper out of the layout.\n host: { class: 'contents' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n UiSeparatorComponent,\n UiTableComponent,\n UiTableHeaderComponent,\n UiTableBodyComponent,\n UiTableRowComponent,\n UiTableHeadComponent,\n UiTableCellComponent,\n UiTabsComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n ],\n template: `\n
\n \n
\n
\n
\n \n
\n
\n

Deployments

\n
\n uipkge\n /\n core-registry\n
\n
\n
\n\n
\n \n \n \n Select branch\n \n @for (branch of branches; track branch) {\n \n \n {{ branch }}\n \n }\n \n \n\n \n
\n
\n\n \n \n
\n \n All\n Production\n Preview\n Staging\n \n \n Showing {{ filteredDeployments().length }} of {{ deployments.length }} deployments\n \n
\n \n\n \n \n \n
\n
\n
\n Latest Deployment\n \n \n \n \n \n Live · Production\n
\n
\n \n \n https://uipkge.dev\n \n \n \n
\n\n
\n \n \n \n
\n
\n\n \n
\n
\n \n JD\n \n Jordan Diaz\n
\n \n feat(blocks): add ecommerce suite (#412)\n \n
\n \n a3f89b1\n
\n \n
\n \n main\n
\n \n
\n \n Deployed 12m ago\n
\n
\n \n\n \n \n
\n
\n \n Pipeline Execution\n \n 5 of 5 steps completed · 1m 03s\n
\n\n
\n @for (step of pipelineSteps; track step.id; let index = $index) {\n \n
\n \n \n \n {{ step.duration }}\n
\n
\n

{{ index + 1 }}. {{ step.name }}

\n

{{ step.description }}

\n
\n
\n }\n
\n
\n\n \n @if (showLogs()) {\n
\n
\n
\n
\n \n \n \n
\n build-stdout — node v22.12.0 — runner-edge-iad-4 \n
\n
\n \n \n @if (copiedLogs()) {\n \n } @else {\n \n }\n {{ copiedLogs() ? 'Copied' : 'Copy logs' }}\n \n
\n
\n\n
\n @for (line of terminalLogs; track $index) {\n
\n [{{ line.time }}]\n {{ line.prefix }}\n {{ line.text }}\n
\n }\n
\n\n \n
\n \n Exit code: 0\n \n Clean build\n
\n Memory: 412 MB / 2048 MB\n
\n \n }\n \n \n\n \n \n \n Deployment History\n \n Past deployments across production, preview, and staging environments.\n \n \n \n
\n
\n \n \n \n Status\n \n Commit & Message\n Environment\n Duration\n Deployer\n Trigger\n Deployed\n \n Actions\n \n \n \n \n @for (deployment of filteredDeployments(); track deployment.id) {\n \n \n @switch (deployment.status) {\n @case ('ready') {\n \n \n \n }\n @case ('building') {\n \n \n \n }\n @case ('failed') {\n \n \n \n }\n @case ('rolled-back') {\n \n \n \n }\n }\n \n \n
\n

\n {{ deployment.commitMessage }}\n

\n
\n \n \n {{ deployment.branch }}\n \n ·\n \n \n {{ deployment.commitHash }}\n \n
\n
\n \n \n \n {{ deployment.environment }}\n \n \n \n {{ deployment.duration }}\n \n \n
\n \n \n {{ deployment.deployer.initials }}\n \n \n {{ deployment.deployer.name }}\n
\n \n \n
\n @switch (deployment.trigger) {\n @case ('push') {\n \n }\n @case ('manual') {\n \n }\n @case ('rollback') {\n \n }\n }\n {{ deployment.trigger }}\n
\n \n \n {{ deployment.deployedAt }}\n \n \n \n \n \n Open actions for {{ deployment.id }}\n \n \n Actions\n \n \n \n Rollback to this deploy\n \n \n @if (copiedUrlId() === deployment.id) {\n \n } @else {\n \n }\n {{ copiedUrlId() === deployment.id ? 'Copied URL' : 'Copy deployment URL' }}\n \n \n \n Inspect build logs\n \n \n \n View live preview\n \n \n \n \n \n }\n @if (filteredDeployments().length === 0) {\n \n \n No deployments match the selected environment filter.\n \n \n }\n \n
\n
\n \n \n \n `,\n})\nexport class UiDeploymentPipelineComponent implements OnInit {\n @Input() initialEnv: DeploymentEnvironment = 'all'\n @Input() initialLogsOpen = true\n @Input('class') className?: string\n\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly ChevronDown = ChevronDown\n protected readonly ChevronUp = ChevronUp\n protected readonly Clock = Clock\n protected readonly Copy = Copy\n protected readonly ExternalLink = ExternalLink\n protected readonly GitBranch = GitBranch\n protected readonly GitCommit = GitCommit\n protected readonly Layers = Layers\n protected readonly Loader2 = Loader2\n protected readonly MoreHorizontal = MoreHorizontal\n protected readonly Play = Play\n protected readonly RotateCcw = RotateCcw\n protected readonly RotateCw = RotateCw\n protected readonly Terminal = Terminal\n protected readonly Undo2 = Undo2\n protected readonly XCircle = XCircle\n\n protected readonly branches = branches\n protected readonly pipelineSteps = pipelineSteps\n protected readonly terminalLogs = terminalLogs\n protected readonly deployments = deployments\n\n readonly selectedEnv = signal('all')\n readonly selectedBranch = signal('main')\n readonly showLogs = signal(true)\n readonly copiedLogs = signal(false)\n readonly copiedUrlId = signal(null)\n readonly isDeploying = signal(false)\n\n readonly filteredDeployments = computed(() => {\n const env = this.selectedEnv()\n return env === 'all' ? deployments : deployments.filter((d) => d.environment === env)\n })\n\n private readonly timers = new Set>()\n\n constructor() {\n inject(DestroyRef).onDestroy(() => this.timers.forEach((t) => clearTimeout(t)))\n }\n\n ngOnInit(): void {\n this.selectedEnv.set(this.initialEnv)\n this.showLogs.set(this.initialLogsOpen)\n }\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n setEnv(value: string): void {\n this.selectedEnv.set(value as DeploymentEnvironment)\n }\n\n envBadgeVariant(deployment: DeploymentRecord): 'default' | 'secondary' | 'outline' {\n return deployment.environment === 'production'\n ? 'default'\n : deployment.environment === 'preview'\n ? 'secondary'\n : 'outline'\n }\n\n prefixClass(type: TerminalLogType): string {\n return cn(\n 'font-medium select-none',\n type === 'success' && 'text-success',\n type === 'info' && 'text-info',\n type === 'cmd' && 'text-warning',\n type === 'stdout' && 'text-muted-foreground',\n )\n }\n\n textClass(type: TerminalLogType): string {\n return cn(\n type === 'success' && 'text-success font-medium',\n type === 'cmd' && 'font-semibold text-zinc-100',\n type === 'info' && 'text-zinc-300',\n type === 'stdout' && 'text-zinc-300',\n )\n }\n\n triggerDeployment(): void {\n this.isDeploying.set(true)\n this.later(() => this.isDeploying.set(false), 1200)\n }\n\n copyLogs(): void {\n const text = terminalLogs.map((l) => `[${l.time}] ${l.prefix} ${l.text}`).join('\\n')\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n void navigator.clipboard.writeText(text)\n this.copiedLogs.set(true)\n this.later(() => this.copiedLogs.set(false), 2000)\n }\n }\n\n copyUrl(url: string, id: string): void {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n void navigator.clipboard.writeText(url)\n this.copiedUrlId.set(id)\n this.later(() => this.copiedUrlId.set(null), 2000)\n }\n }\n\n private later(fn: () => void, ms: number): void {\n const t = setTimeout(() => {\n this.timers.delete(t)\n fn()\n }, ms)\n this.timers.add(t)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/deployment-pipeline/deployment-pipeline.component.ts" }, { "path": "packages/registry-angular/blocks/deployment-pipeline/index.ts", "content": "export {\n UiDeploymentPipelineComponent,\n type DeploymentEnvironment,\n type DeploymentStatus,\n type DeploymentTrigger,\n type DeploymentRecord,\n type PipelineStep,\n type TerminalLogType,\n type TerminalLogLine,\n} from './deployment-pipeline.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/deployment-pipeline/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/dropdown-menu.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/table.json", "https://uipkge.dev/r/angular/tabs.json" ], "description": "CI/CD deployment history, active environment status, execution stepper, collapsible build log terminal with stdout timestamps, and filterable deployments table.", "categories": [ "devops", "app" ] }