{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "data-contract-governance", "title": "Data Contract Governance", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/data-contract-governance/data-contract-governance.component.ts", "content": "import { Component, DestroyRef, Input, computed, inject, signal, ChangeDetectionStrategy } from '@angular/core'\nimport {\n Activity,\n AlertCircle,\n AlertTriangle,\n Check,\n CheckCircle2,\n Code2,\n Copy,\n Download,\n FileCode,\n FileCode2,\n FileJson,\n HardDrive,\n Key,\n Link2,\n Loader2,\n Lock,\n LucideAngularModule,\n Play,\n Radio,\n RefreshCw,\n Search,\n Server,\n ShieldCheck,\n Table2,\n Tag,\n Terminal,\n Users,\n WrapText,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent } from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.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 {\n UiTabsComponent,\n UiTabsContentComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n} from '@/ui/tabs/tabs.component'\n\nexport interface SchemaField {\n name: string\n dataType: string\n format?: string\n nullable: boolean\n isPrimaryKey?: boolean\n isForeignKey?: boolean\n foreignKeyRef?: string\n isPii?: boolean\n maskingStrategy?: string\n constraints?: string\n description: string\n}\n\nexport interface LintTestRule {\n id: string\n name: string\n category: 'breaking' | 'compatibility' | 'compliance'\n categoryLabel: string\n status: 'pass' | 'warn' | 'fail'\n ruleDefinition: string\n assertionPath: string\n executionDuration: string\n evaluatedAt: string\n}\n\nexport interface ConsumerService {\n id: string\n name: string\n team: string\n versionSubscribed: string\n versionStatus: 'current' | 'minor-lag' | 'major-lag'\n status: 'compliant' | 'warning' | 'deprecated'\n throughput: string\n latencyP99: string\n slaStatus: string\n compatibility: string\n lastEventReceived: string\n contact: string\n}\n\nconst rawYamlContract = `apiVersion: datacontract.com/v3.0.1\nkind: DataContract\nid: urn:datacontract:checkout:orders_placed\ninfo:\n title: orders_placed\n version: 3.2.0\n status: enforced\n owner: Checkout Core Engineering Squad\n contact: #checkout-eng-alerts\n description: Canonical production data contract for completed checkout orders across global storefronts.\n\nservers:\n production:\n type: kafka\n topic: events.orders.placed\n format: json_schema\n cluster: prd-us-east-kafka.internal:9092\n lakehouse:\n type: iceberg\n location: s3://lakehouse-analytics/tables/checkout/orders_placed_v3\n format: parquet\n\nservicelevels:\n availability:\n percentage: 99.99%\n description: 30-day rolling cluster uptime\n latency:\n threshold: 100ms\n percentile: p99\n freshness:\n maxDelay: 5s\n source: cdc_debezium_postgres\n retention:\n period: 365d\n tier: hot_kafka_7d_warm_iceberg_365d\n\nschema:\n type: object\n required:\n - order_id\n - customer_id\n - order_timestamp\n - total_amount_cents\n - currency_code\n - payment_method\n - customer_email_encrypted\n - shipping_country\n - line_items_count\n properties:\n order_id:\n type: string\n format: uuid\n nullable: false\n description: Unique primary transaction order UUID.\n customer_id:\n type: string\n format: uuid\n nullable: false\n description: Master verified customer identity reference.\n order_timestamp:\n type: string\n format: date-time\n pattern: \"^[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}:[0-9]{2}Z$\"\n nullable: false\n description: Event generation timestamp in UTC RFC-3339.\n total_amount_cents:\n type: integer\n minimum: 0\n maximum: 5000000\n nullable: false\n description: Gross order value denominated in lowest currency unit.\n currency_code:\n type: string\n enum: [\"USD\", \"EUR\", \"GBP\", \"JPY\", \"CAD\"]\n nullable: false\n description: ISO 4217 three-letter currency code.\n payment_method:\n type: string\n enum: [\"credit_card\", \"apple_pay\", \"google_pay\", \"sepa_debit\"]\n nullable: false\n description: Authorized payment gateway instrument type.\n customer_email_encrypted:\n type: string\n nullable: false\n pii: true\n masking: deterministic_sha256\n classification: restricted\n description: AES-GCM-256 encrypted customer email for fraud detection.\n shipping_country:\n type: string\n pattern: \"^[A-Z]{2}$\"\n nullable: false\n description: ISO 3166-1 alpha-2 destination country code.\n line_items_count:\n type: integer\n minimum: 1\n maximum: 100\n nullable: false\n description: Number of line items purchased in order.`\n\nconst schemaFields: SchemaField[] = [\n {\n name: 'order_id',\n dataType: 'string',\n format: 'uuid',\n nullable: false,\n isPrimaryKey: true,\n constraints: 'format: uuid (RFC-4122)',\n description: 'Unique primary transaction order identifier.',\n },\n {\n name: 'customer_id',\n dataType: 'string',\n format: 'uuid',\n nullable: false,\n isForeignKey: true,\n foreignKeyRef: 'customers.customer_id',\n constraints: 'format: uuid, not null',\n description: 'Master verified customer identity reference.',\n },\n {\n name: 'order_timestamp',\n dataType: 'string',\n format: 'date-time',\n nullable: false,\n constraints: 'pattern: RFC-3339 UTC',\n description: 'Event generation timestamp in strict ISO-8601 / RFC-3339 UTC.',\n },\n {\n name: 'total_amount_cents',\n dataType: 'integer',\n format: 'int64',\n nullable: false,\n constraints: '0 ≤ value ≤ 5,000,000',\n description: 'Gross order value denominated in lowest currency unit (cents).',\n },\n {\n name: 'currency_code',\n dataType: 'string',\n nullable: false,\n constraints: 'enum: [USD, EUR, GBP, JPY, CAD]',\n description: 'ISO-4217 three-letter currency code in which the charge occurred.',\n },\n {\n name: 'payment_method',\n dataType: 'string',\n nullable: false,\n constraints: 'enum: [credit_card, apple_pay, google_pay, sepa_debit]',\n description: 'Authorized payment gateway instrument method.',\n },\n {\n name: 'customer_email_encrypted',\n dataType: 'string',\n nullable: false,\n isPii: true,\n maskingStrategy: 'SHA-256 / AES-256-GCM',\n constraints: 'pii: true, restricted',\n description: 'Cryptographically enveloped customer email address.',\n },\n {\n name: 'shipping_country',\n dataType: 'string',\n nullable: false,\n constraints: 'pattern: ^[A-Z]{2}$ (ISO 3166-1)',\n description: 'Two-letter alpha-2 shipping destination country code.',\n },\n {\n name: 'line_items_count',\n dataType: 'integer',\n format: 'int32',\n nullable: false,\n constraints: '1 ≤ value ≤ 100',\n description: 'Total count of individual catalog items inside the basket.',\n },\n]\n\nconst lintRules: LintTestRule[] = [\n {\n id: 'lint-1',\n name: \"Field 'customer_id' remains required\",\n category: 'breaking',\n categoryLabel: 'Requiredness Invariant',\n status: 'pass',\n ruleDefinition:\n 'Required string UUID field cannot be made optional or omitted without a major semantic version bump (v4.0.0).',\n assertionPath: 'schema.properties.customer_id.nullable == false',\n executionDuration: '14ms',\n evaluatedAt: 'Just now',\n },\n {\n id: 'lint-2',\n name: \"Field 'currency_code' enum compatibility\",\n category: 'compatibility',\n categoryLabel: 'Enum Evolution',\n status: 'pass',\n ruleDefinition:\n 'Allowed currency enum set [USD, EUR, GBP, JPY, CAD] is a strict superset of v3.1; no historical enum values were pruned.',\n assertionPath: 'schema.properties.currency_code.enum (5 items)',\n executionDuration: '22ms',\n evaluatedAt: 'Just now',\n },\n {\n id: 'lint-3',\n name: 'Timestamp ISO-8601 format compliance',\n category: 'compliance',\n categoryLabel: 'Format Strictness',\n status: 'pass',\n ruleDefinition:\n \"Field 'order_timestamp' adheres to strict RFC 3339 / ISO-8601 UTC regex pattern with mandatory 'Z' zone identifier.\",\n assertionPath: 'format: date-time (RFC-3339 UTC)',\n executionDuration: '18ms',\n evaluatedAt: 'Just now',\n },\n {\n id: 'lint-4',\n name: 'Backward compatibility for existing consumer v3.1',\n category: 'compatibility',\n categoryLabel: 'Consumer Simulation',\n status: 'pass',\n ruleDefinition:\n 'Simulated payload deserialization passed across all 8 active consumer test vectors without JSON schema deserializer exceptions.',\n assertionPath: '8/8 consumer test vectors pass',\n executionDuration: '145ms',\n evaluatedAt: 'Just now',\n },\n {\n id: 'lint-5',\n name: \"Field 'customer_email_encrypted' PII Masking Rule\",\n category: 'compliance',\n categoryLabel: 'Security & PII',\n status: 'pass',\n ruleDefinition:\n 'Customer email field enforces cryptographic ciphertext masking (AES-GCM-256 / SHA-256) prior to publishing onto Kafka broker.',\n assertionPath: 'pii: true · masking: deterministic_sha256',\n executionDuration: '31ms',\n evaluatedAt: 'Just now',\n },\n {\n id: 'lint-6',\n name: 'Schema type narrowing safety',\n category: 'breaking',\n categoryLabel: 'Type Evolution',\n status: 'pass',\n ruleDefinition:\n 'No existing schema properties had primitive data types narrowed or widened in a breaking manner (e.g. integer to short).',\n assertionPath: '0 type narrowing violations detected',\n executionDuration: '19ms',\n evaluatedAt: 'Just now',\n },\n]\n\nconst consumerServices: ConsumerService[] = [\n {\n id: 'svc-1',\n name: 'Fraud Detection Service',\n team: 'Security & Risk Squad',\n versionSubscribed: 'v3.2.0',\n versionStatus: 'current',\n status: 'compliant',\n throughput: '4,200 msg/s',\n latencyP99: '38ms',\n slaStatus: 'SLA Compliant (p99 < 100ms)',\n compatibility: '100% Compatible',\n lastEventReceived: '1.2s ago',\n contact: '#fraud-eng',\n },\n {\n id: 'svc-2',\n name: 'Financial Ledger Mart',\n team: 'Finance Analytics Squad',\n versionSubscribed: 'v3.1.0',\n versionStatus: 'minor-lag',\n status: 'compliant',\n throughput: '1,850 msg/s',\n latencyP99: '52ms',\n slaStatus: 'SLA Compliant (p99 < 100ms)',\n compatibility: 'Backward Compat Verified',\n lastEventReceived: '3.4s ago',\n contact: '#fin-ledger-team',\n },\n {\n id: 'svc-3',\n name: 'Email Notification Dispatcher',\n team: 'Customer Comms Team',\n versionSubscribed: 'v3.2.0',\n versionStatus: 'current',\n status: 'compliant',\n throughput: '850 msg/s',\n latencyP99: '24ms',\n slaStatus: 'SLA Compliant (p99 < 100ms)',\n compatibility: '100% Compatible',\n lastEventReceived: '0.8s ago',\n contact: '#comms-alerts',\n },\n {\n id: 'svc-4',\n name: 'Inventory Fulfillment Pipeline',\n team: 'Supply Chain Engineering',\n versionSubscribed: 'v3.2.0',\n versionStatus: 'current',\n status: 'compliant',\n throughput: '2,100 msg/s',\n latencyP99: '34ms',\n slaStatus: 'SLA Compliant (p99 < 100ms)',\n compatibility: '100% Compatible',\n lastEventReceived: '1.5s ago',\n contact: '#supply-chain-dev',\n },\n {\n id: 'svc-5',\n name: 'Customer Data Platform (CDP)',\n team: 'Growth & Marketing Tech',\n versionSubscribed: 'v3.0.4',\n versionStatus: 'minor-lag',\n status: 'compliant',\n throughput: '3,400 msg/s',\n latencyP99: '48ms',\n slaStatus: 'SLA Compliant (p99 < 100ms)',\n compatibility: 'v3.0 Compat Mode',\n lastEventReceived: '2.1s ago',\n contact: '#growth-infra',\n },\n {\n id: 'svc-6',\n name: 'Realtime Order Tracking Gateway',\n team: 'Mobile & Web Edge Platform',\n versionSubscribed: 'v3.2.0',\n versionStatus: 'current',\n status: 'compliant',\n throughput: '5,600 msg/s',\n latencyP99: '19ms',\n slaStatus: 'SLA Compliant (p99 < 100ms)',\n compatibility: '100% Compatible',\n lastEventReceived: '0.4s ago',\n contact: '#edge-team',\n },\n {\n id: 'svc-7',\n name: 'Audit Log & Compliance Vault',\n team: 'Infosec & Legal Systems',\n versionSubscribed: 'v3.2.0',\n versionStatus: 'current',\n status: 'compliant',\n throughput: '1,200 msg/s',\n latencyP99: '28ms',\n slaStatus: 'SLA Compliant (p99 < 100ms)',\n compatibility: '100% Compatible',\n lastEventReceived: '4.2s ago',\n contact: '#infosec-ops',\n },\n {\n id: 'svc-8',\n name: 'Search & Recommendation Indexer',\n team: 'Discovery & ML Platform',\n versionSubscribed: 'v3.1.2',\n versionStatus: 'minor-lag',\n status: 'compliant',\n throughput: '980 msg/s',\n latencyP99: '31ms',\n slaStatus: 'SLA Compliant (p99 < 100ms)',\n compatibility: 'Backward Compat Verified',\n lastEventReceived: '1.9s ago',\n contact: '#discovery-ml',\n },\n]\n\nexport type DataContractInspectorTab = 'yaml' | 'schema' | 'sla'\nexport type DataContractLinterFilter = 'all' | 'breaking' | 'compatibility' | 'compliance'\n\nexport interface YamlLine {\n text: string\n className: string\n}\n\n/** Colour one YAML line the way the React viewer does (keywords, sections, PII, comments). */\nexport function yamlLineClass(line: string): string {\n const isKeyword = line.startsWith('apiVersion:') || line.startsWith('kind:') || line.startsWith('id:')\n const isSection =\n line.startsWith('info:') ||\n line.startsWith('servers:') ||\n line.startsWith('servicelevels:') ||\n line.startsWith('schema:')\n const isPii = line.includes('pii: true') || line.includes('masking:')\n const isComment = line.trim().startsWith('#')\n\n if (isKeyword) return 'text-info font-semibold'\n if (isSection) return 'text-chart-1 font-semibold'\n if (isPii) return 'text-success font-semibold'\n if (isComment) return 'text-muted-foreground/80 italic'\n return 'text-foreground/90'\n}\n\nconst yamlLines: YamlLine[] = rawYamlContract.split('\\n').map((text) => ({ text, className: yamlLineClass(text) }))\n\nconst filterButtonBase = 'h-7 px-2.5 text-xs font-medium'\nconst filterButtonActive = 'bg-background text-foreground shadow-xs'\nconst filterButtonIdle = 'text-muted-foreground hover:text-foreground'\n\n/**\n * DataContractGovernance -- the React block, 1:1: an OpenDataContract style contract page with\n * a header (title, semver + enforced badges, ownership strip, Export JSON Schema and Validate\n * actions with a live feedback strip), four governance KPI cards, a left inspector with YAML /\n * schema fields / SLA tabs, and a right column with the breaking change linter (filterable,\n * re-runnable) and the searchable registered consumers table. Edit the data consts above.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-data-contract-governance, [ui-data-contract-governance]',\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 UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiInputComponent,\n UiSeparatorComponent,\n UiTableComponent,\n UiTableHeaderComponent,\n UiTableBodyComponent,\n UiTableRowComponent,\n UiTableHeadComponent,\n UiTableCellComponent,\n UiTabsComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n UiTabsContentComponent,\n ],\n template: `\n
\n \n
\n
\n \n
\n
\n \n \n
\n
\n
\n

{{ contractTitle }}

\n \n \n {{ version }} · Semantic Versioned\n \n \n \n \n Contract Enforced & Passing\n \n
\n
\n
\n\n \n
\n
\n \n Owner:\n {{ ownerTeam }}\n
\n
\n \n Producer:\n {{ producerService }}\n
\n
\n \n Topic:\n {{ destinationTopic }}\n
\n
\n \n Classification:\n PII Sensitive · Encrypted\n
\n
\n
\n\n \n
\n \n \n Export Schema (JSON Schema)\n \n\n \n @if (isValidatingYaml()) {\n \n } @else {\n \n }\n {{ isValidatingYaml() ? 'Validating Contract...' : 'Validate Contract YAML' }}\n \n
\n
\n\n \n @if (validationToast()) {\n \n
\n \n {{ validationToast() }}\n
\n {{ lastValidatedTimestamp() }}\n
\n }\n \n\n \n
\n \n
\n
\n \n Registered Consumers\n \n
\n \n
\n
\n
8 Services
\n
\n \n 8 Downstream Consumer Services\n \n across 3 domains\n
\n
\n\n \n
\n
\n Breaking Changes\n \n \n
\n
\n
0 Breaking
\n
\n \n 0 Breaking Changes\n \n 100% backward compat\n
\n
\n\n \n
\n
\n Freshness SLA\n \n \n
\n
\n
99.9% CDC
\n
\n \n SLA: 99.9% · Real-time CDC\n \n p99 < 85ms\n
\n \n\n \n
\n
\n Quality Assertions \n \n \n
\n
\n
14 Active
\n
\n \n 14 Schema Constraints Active\n \n 14/14 passing\n
\n \n \n\n \n
\n \n
\n \n
\n
\n
\n \n

Contract Specification & SLA

\n
\n

\n OpenDataContract v3.0 schema definitions and producer guarantees\n

\n
\n
\n\n \n \n
\n
\n \n \n \n
\n\n \n
\n @if (activeInspectorTab() === 'yaml') {\n \n \n \n\n \n }\n\n @if (activeInspectorTab() === 'schema') {\n \n @if (copiedSchema()) {\n \n } @else {\n \n }\n {{ copiedSchema() ? 'Copied JSON' : 'Copy JSON' }}\n \n }\n
\n
\n\n \n \n \n \n \n
\n \n orders_placed_v3.contract.yaml\n
\n
\n UTF-8\n YAML 1.2\n
\n
\n\n \n
\n @for (line of yamlLines; track $index) {\n
\n {{ $index + 1 }}{{ line.text }}\n
\n }\n
\n \n\n \n \n
\n
\n Kafka Cluster\n
prd-us-east-kafka.internal
\n
\n
\n Lakehouse Sync\n
Apache Iceberg (Parquet)
\n
\n
\n \n \n\n \n \n
\n
\n \n \n \n Field Name\n \n Type\n \n Nullability\n \n \n Tags / Constraints\n \n \n \n \n @for (field of schemaFields; track field.name) {\n \n \n
\n @if (field.isPrimaryKey) {\n \n } @else if (field.isForeignKey) {\n \n } @else if (field.isPii) {\n \n }\n {{ field.name }}\n
\n \n \n {{ field.dataType }}{{ field.format ? ' (' + field.format + ')' : '' }}\n \n \n {{\n field.nullable ? 'nullable' : 'required'\n }}\n \n \n
\n @if (field.isPii) {\n PII: {{ field.maskingStrategy }}\n }\n {{ field.constraints }}\n
\n \n \n }\n \n
\n
\n \n\n \n \n
\n \n \n
\n
\n
\n \n Event Latency (p99)\n
\n

\n End-to-end event publication latency from checkout commit to Kafka broker.\n

\n
\n \n Target < 100ms\n \n
\n \n Observed 30-Day p99:\n 42ms (Passing)\n
\n \n\n \n \n
\n
\n
\n \n Producer Availability\n
\n

\n Uptime commitment for producer event emission without message drops.\n

\n
\n \n 99.99% Guaranteed\n \n
\n \n Actual Rolling Uptime:\n 99.995%\n \n \n\n \n \n
\n
\n
\n \n Data Retention & Tiering\n
\n

\n Hot retention on Apache Kafka broker topic with cold Iceberg archival.\n

\n
\n 365 Days\n
\n \n Storage Tiers:\n Kafka 7d · Iceberg 365d\n \n \n\n \n \n
\n
\n \n On-Call SLA Escalation\n
\n

\n Tier 1 Mission Critical Producer Squad: MTTA < 5 mins, MTTR < 15 mins.\n

\n
\n \n Slack & PagerDuty:\n #checkout-eng-alerts\n \n \n \n \n \n \n\n \n
\n \n
\n
\n
\n \n

Breaking Change Linter & Validation Engine

\n
\n

\n Automated schema drift detection and backward compatibility verification\n

\n
\n\n \n
\n \n \n {{ isRunningLinter() ? 'Linting...' : 'Re-run Linter' }}\n \n
\n
\n\n \n \n
\n \n All Rules ({{ lintRules.length }})\n \n \n Breaking Invariants (2)\n \n \n Compatibility (2)\n \n \n Compliance & PII (2)\n \n
\n\n \n {{ passingRulesCount }}/{{ lintRules.length }} Passing (100%)\n \n \n\n \n
\n @for (rule of filteredLintRules(); track rule.id) {\n
\n
\n
\n
\n @if (rule.status === 'pass') {\n \n } @else if (rule.status === 'warn') {\n \n } @else {\n \n }\n
\n
\n
\n {{ rule.name }}\n \n {{ rule.categoryLabel }}\n \n
\n

{{ rule.ruleDefinition }}

\n \n \n {{ rule.assertionPath }}\n
\n
\n
\n\n
\n \n PASS\n \n {{ rule.executionDuration }}\n
\n
\n
\n }\n \n\n \n\n \n
\n
\n
\n

\n Registered Downstream Consumers ({{ consumerServices.length }})\n

\n

\n Active consumer services subscribing to topic\n {{ destinationTopic }}\n

\n
\n\n \n
\n \n \n \n
\n
\n\n \n
\n
\n \n \n \n Consumer Service\n \n \n Subscribed Ver\n \n \n Throughput & SLA\n \n \n Compatibility\n \n \n \n \n @for (consumer of filteredConsumers(); track consumer.id) {\n \n \n
\n
{{ consumer.name }}
\n
{{ consumer.team }} · {{ consumer.contact }}
\n
\n \n \n \n {{ consumer.versionSubscribed }}\n \n \n \n
\n
{{ consumer.throughput }}
\n
p99: {{ consumer.latencyP99 }} (OK)
\n
\n \n \n \n \n {{ consumer.compatibility }}\n \n \n \n }\n \n
\n
\n
\n
\n \n \n `,\n})\nexport class UiDataContractGovernanceComponent {\n @Input() contractTitle = 'orders_placed_v3.contract.yaml'\n @Input() version = 'v3.2.0'\n @Input() ownerTeam = 'Checkout Core Engineering Squad'\n @Input() producerService = 'checkout-service-prod'\n @Input() destinationTopic = 'events.orders.placed'\n @Input() lakehouseTarget = 's3://lakehouse-analytics/tables/checkout/orders_placed_v3'\n @Input('class') className?: string\n\n protected readonly FileCode2 = FileCode2\n protected readonly Tag = Tag\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Users = Users\n protected readonly Server = Server\n protected readonly Radio = Radio\n protected readonly Lock = Lock\n protected readonly Download = Download\n protected readonly Loader2 = Loader2\n protected readonly Play = Play\n protected readonly Activity = Activity\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Code2 = Code2\n protected readonly FileCode = FileCode\n protected readonly Table2 = Table2\n protected readonly WrapText = WrapText\n protected readonly Check = Check\n protected readonly Copy = Copy\n protected readonly FileJson = FileJson\n protected readonly Key = Key\n protected readonly Link2 = Link2\n protected readonly Zap = Zap\n protected readonly HardDrive = HardDrive\n protected readonly RefreshCw = RefreshCw\n protected readonly AlertTriangle = AlertTriangle\n protected readonly AlertCircle = AlertCircle\n protected readonly Terminal = Terminal\n protected readonly Search = Search\n\n protected readonly schemaFields = schemaFields\n protected readonly lintRules = lintRules\n protected readonly consumerServices = consumerServices\n protected readonly yamlLines = yamlLines\n protected readonly passingRulesCount = lintRules.filter((r) => r.status === 'pass').length\n\n readonly activeInspectorTab = signal('yaml')\n readonly selectedLinterFilter = signal('all')\n readonly isValidatingYaml = signal(false)\n readonly validationToast = signal(null)\n readonly isRunningLinter = signal(false)\n readonly copiedYaml = signal(false)\n readonly copiedSchema = signal(false)\n readonly wrapYamlLines = signal(false)\n readonly consumerSearch = signal('')\n readonly lastValidatedTimestamp = signal('Just now')\n\n readonly filteredLintRules = computed(() => {\n const f = this.selectedLinterFilter()\n if (f === 'all') return lintRules\n return lintRules.filter((r) => r.category === f)\n })\n\n readonly filteredConsumers = computed(() => {\n const q = this.consumerSearch().trim().toLowerCase()\n if (!q) return consumerServices\n return consumerServices.filter(\n (c) =>\n c.name.toLowerCase().includes(q) ||\n c.team.toLowerCase().includes(q) ||\n c.versionSubscribed.toLowerCase().includes(q) ||\n c.compatibility.toLowerCase().includes(q),\n )\n })\n\n private readonly timers = new Set>()\n\n constructor() {\n inject(DestroyRef).onDestroy(() => this.timers.forEach((t) => clearTimeout(t)))\n }\n\n protected get rootClass(): string {\n return cn(\n 'border-border bg-card text-foreground flex w-full flex-col overflow-hidden rounded-xl border shadow-xs',\n this.className,\n )\n }\n\n protected yamlViewerClass(): string {\n return cn('max-h-[540px] overflow-auto p-3', this.wrapYamlLines() ? 'whitespace-pre-wrap' : 'whitespace-pre')\n }\n\n protected linterIconClass(): string {\n return cn('size-3', this.isRunningLinter() && 'animate-spin')\n }\n\n protected filterButtonClass(filter: DataContractLinterFilter): string {\n return cn(filterButtonBase, this.selectedLinterFilter() === filter ? filterButtonActive : filterButtonIdle)\n }\n\n setInspectorTab(value: string): void {\n this.activeInspectorTab.set(value as DataContractInspectorTab)\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 handleValidateContract(): void {\n if (this.isValidatingYaml()) return\n this.isValidatingYaml.set(true)\n this.validationToast.set('Validating 6 linter invariants & 8 consumer vectors...')\n\n this.later(() => {\n this.isValidatingYaml.set(false)\n this.lastValidatedTimestamp.set('Just now')\n this.validationToast.set('Contract Validated · 0 Breaking Changes · 100% Compatible')\n this.later(() => this.validationToast.set(null), 3500)\n }, 750)\n }\n\n handleRunLinter(): void {\n if (this.isRunningLinter()) return\n this.isRunningLinter.set(true)\n this.later(() => this.isRunningLinter.set(false), 600)\n }\n\n handleCopyYaml(): void {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n void navigator.clipboard.writeText(rawYamlContract)\n this.copiedYaml.set(true)\n this.later(() => this.copiedYaml.set(false), 2000)\n }\n }\n\n handleCopyJsonSchema(): void {\n const jsonSchemaObj = {\n $schema: 'http://json-schema.org/draft-07/schema#',\n title: 'orders_placed',\n description: 'Canonical production data contract for completed checkout orders across global storefronts.',\n type: 'object',\n required: schemaFields.filter((f) => !f.nullable).map((f) => f.name),\n properties: Object.fromEntries(\n schemaFields.map((f) => [\n f.name,\n {\n type: f.dataType,\n ...(f.format ? { format: f.format } : {}),\n description: f.description,\n ...(f.isPii ? { 'x-pii': true, 'x-masking': f.maskingStrategy } : {}),\n },\n ]),\n ),\n }\n\n const jsonStr = JSON.stringify(jsonSchemaObj, null, 2)\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n void navigator.clipboard.writeText(jsonStr)\n this.copiedSchema.set(true)\n this.later(() => this.copiedSchema.set(false), 2000)\n }\n }\n\n handleExportSchema(): void {\n const jsonSchemaObj = {\n $schema: 'http://json-schema.org/draft-07/schema#',\n id: 'urn:datacontract:checkout:orders_placed',\n version: this.version,\n title: 'orders_placed',\n owner: this.ownerTeam,\n producer: this.producerService,\n topic: this.destinationTopic,\n exportedAt: new Date().toISOString(),\n servicelevels: {\n availability: '99.99%',\n latencyP99: '< 100ms',\n freshness: '< 5s CDC',\n retention: '365d',\n },\n schema: {\n type: 'object',\n required: schemaFields.filter((f) => !f.nullable).map((f) => f.name),\n properties: Object.fromEntries(\n schemaFields.map((f) => [\n f.name,\n {\n type: f.dataType,\n ...(f.format ? { format: f.format } : {}),\n description: f.description,\n constraints: f.constraints,\n ...(f.isPii ? { 'x-pii': true, 'x-masking': f.maskingStrategy } : {}),\n },\n ]),\n ),\n },\n }\n\n const blobData = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(jsonSchemaObj, null, 2))\n if (typeof document !== 'undefined') {\n const link = document.createElement('a')\n link.setAttribute('href', blobData)\n link.setAttribute('download', `${this.contractTitle.replace('.yaml', '')}.json`)\n document.body.appendChild(link)\n link.click()\n link.remove()\n }\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/data-contract-governance/data-contract-governance.component.ts" }, { "path": "packages/registry-angular/blocks/data-contract-governance/index.ts", "content": "export {\n UiDataContractGovernanceComponent,\n yamlLineClass,\n type ConsumerService,\n type DataContractInspectorTab,\n type DataContractLinterFilter,\n type LintTestRule,\n type SchemaField,\n type YamlLine,\n} from './data-contract-governance.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/data-contract-governance/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "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/input.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/table.json", "https://uipkge.dev/r/angular/tabs.json" ], "description": "PayPal and OpenDataContract style Data Contracts specification editor, breaking change validator, and producer/consumer SLA agreements dashboard with YAML inspector, schema field explorer, live breaking change linter, and registered consumer status.", "categories": [ "devops", "dashboard", "app", "data" ] }