Integrations — Connector Status

Installation

Variants

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface Connector {
  mark: string
  name: string
  auth: string
  cadence: string
  lastRun: string
  healthy: boolean
}

Files installed (2)

• src/app/components/blocks/integrations-connector-status/integrations-connector-status.component.ts6.6 kB

  Copy

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

• src/app/components/blocks/integrations-connector-status/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/integrations-connector-status.json