{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "integrations-connector-status",
  "title": "Integrations — Connector Status",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/integrations-connector-status/integrations-connector-status.component.ts",
      "content": "// Connector health table: each integration lists its auth method, sync cadence, last\n// successful run and a status pill, above a summary band of healthy/degraded counts.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { CircleAlert, CircleCheck, LucideAngularModule, RefreshCw } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.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'\n\ninterface Connector {\n  mark: string\n  name: string\n  auth: string\n  cadence: string\n  lastRun: string\n  healthy: boolean\n}\n\nconst connectors: Connector[] = [\n  { mark: 'SF', name: 'Snowflake', auth: 'Key pair', cadence: 'Live query', lastRun: '12 s ago', healthy: true },\n  {\n    mark: 'BQ',\n    name: 'BigQuery',\n    auth: 'Service account',\n    cadence: 'Live query',\n    lastRun: '41 s ago',\n    healthy: true,\n  },\n  { mark: 'OK', name: 'Okta', auth: 'SCIM', cadence: 'Every 15 min', lastRun: '6 min ago', healthy: true },\n  {\n    mark: 'DT',\n    name: 'dbt Cloud',\n    auth: 'API token',\n    cadence: 'On DAG finish',\n    lastRun: '1 h 12 m ago',\n    healthy: true,\n  },\n  { mark: 'SL', name: 'Slack', auth: 'OAuth', cadence: 'On alert', lastRun: 'Token expired', healthy: false },\n  { mark: 'PD', name: 'PagerDuty', auth: 'API key', cadence: 'On alert', lastRun: '3 h ago', healthy: true },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-integrations-connector-status, [ui-integrations-connector-status]',\n  standalone: true,\n  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiSeparatorComponent,\n    UiTableBodyComponent,\n    UiTableCellComponent,\n    UiTableComponent,\n    UiTableHeadComponent,\n    UiTableHeaderComponent,\n    UiTableRowComponent,\n  ],\n  template: `\n    <section data-slot=\"integrations-connector-status\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-5xl px-6 py-20 lg:py-28\">\n        <div class=\"flex flex-wrap items-end justify-between gap-6\">\n          <div class=\"max-w-2xl\">\n            <span ui-badge variant=\"secondary\">Connector health</span>\n            <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">You can see what we see</h2>\n            <p class=\"text-muted-foreground mt-3 text-lg\">\n              Every connection reports its own auth method, cadence, and last successful run. No silent failures.\n            </p>\n          </div>\n          <button ui-button variant=\"outline\" size=\"sm\">\n            <lucide-icon [img]=\"RefreshCw\" class=\"mr-2 size-3.5\" aria-hidden=\"true\" />\n            Re-check all\n          </button>\n        </div>\n\n        <div ui-card class=\"mt-10\">\n          <div ui-card-content class=\"p-0\">\n            <table ui-table>\n              <thead ui-table-header>\n                <tr ui-table-row>\n                  <th ui-table-head>Connector</th>\n                  <th ui-table-head>Auth</th>\n                  <th ui-table-head>Cadence</th>\n                  <th ui-table-head>Last success</th>\n                  <th ui-table-head class=\"text-right\">Status</th>\n                </tr>\n              </thead>\n              <tbody ui-table-body>\n                @for (connector of connectors; track connector.name) {\n                  <tr ui-table-row>\n                    <td ui-table-cell>\n                      <div class=\"flex items-center gap-3\">\n                        <span\n                          class=\"border-border text-muted-foreground flex size-8 items-center justify-center rounded-md border font-mono text-xs font-semibold\"\n                          aria-hidden=\"true\"\n                        >\n                          {{ connector.mark }}\n                        </span>\n                        <span class=\"font-medium\">{{ connector.name }}</span>\n                      </div>\n                    </td>\n                    <td ui-table-cell class=\"text-muted-foreground\">{{ connector.auth }}</td>\n                    <td ui-table-cell class=\"text-muted-foreground\">{{ connector.cadence }}</td>\n                    <td ui-table-cell class=\"text-muted-foreground font-mono text-xs\">{{ connector.lastRun }}</td>\n                    <td ui-table-cell class=\"text-right\">\n                      <span ui-badge [variant]=\"connector.healthy ? 'secondary' : 'outline'\" class=\"gap-1.5\">\n                        @if (connector.healthy) {\n                          <lucide-icon [img]=\"CircleCheck\" class=\"text-success size-3\" aria-hidden=\"true\" />\n                        } @else {\n                          <lucide-icon [img]=\"CircleAlert\" class=\"text-destructive size-3\" aria-hidden=\"true\" />\n                        }\n                        {{ connector.healthy ? 'Healthy' : 'Action needed' }}\n                      </span>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n\n            <ui-separator />\n\n            <div class=\"text-muted-foreground flex flex-wrap items-center gap-x-6 gap-y-2 px-6 py-4 text-sm\">\n              <span class=\"flex items-center gap-2\">\n                <lucide-icon [img]=\"CircleCheck\" class=\"text-success size-3.5\" aria-hidden=\"true\" />\n                {{ healthyCount }} healthy\n              </span>\n              <span class=\"flex items-center gap-2\">\n                <lucide-icon [img]=\"CircleAlert\" class=\"text-destructive size-3.5\" aria-hidden=\"true\" />\n                {{ degradedCount }} needing action\n              </span>\n              <span class=\"ml-auto font-mono text-xs\">Status refreshed every 60 s</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiIntegrationsConnectorStatusComponent {\n  protected readonly CircleAlert = CircleAlert\n  protected readonly CircleCheck = CircleCheck\n  protected readonly RefreshCw = RefreshCw\n\n  protected readonly connectors = connectors\n\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n\n  get healthyCount(): number {\n    return this.connectors.filter((c) => c.healthy).length\n  }\n\n  get degradedCount(): number {\n    return this.connectors.length - this.healthyCount\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/integrations-connector-status/integrations-connector-status.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/integrations-connector-status/index.ts",
      "content": "export { UiIntegrationsConnectorStatusComponent } from './integrations-connector-status.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/integrations-connector-status/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/separator.json",
    "https://uipkge.dev/r/angular/table.json"
  ],
  "description": "Connector health table listing each integration with its auth method, sync cadence, last successful run, and a status pill, plus a summary band counting healthy and degraded connectors.",
  "categories": [
    "marketing"
  ]
}