Endpoints List

PreviousNext

The customer's endpoints with status, DLQ badges, and row actions.

  • https://api.acme.dev/webhooks/repostenabled

    Production receiver · *

  • https://hooks.acme.dev/ingestpaused3 dead-lettered

    Staging · user.*, invoice.paid

"use client";

import { useState } from "react";

Installation

pnpm dlx shadcn@latest add @repost/endpoints-list

Installs this item, every component it depends on, and the npm packages listed below.

Usage

This component is presentational: it renders what you pass it and calls back on interaction. In a live dashboard the data comes from useEndpoints() + useDlqCountByEndpoint() (@repost/portal-react), but any data of the same shape works.

components/endpoints-list-demo.tsx
"use client";

import { useState } from "react";
import { EndpointsList, type EndpointListItem } from "@/components/endpoints-list";

const INITIAL: EndpointListItem[] = [
  {
    id: "ep_1",
    url: "https://api.acme.dev/webhooks/repost",
    description: "Production receiver",
    subscriptions: ["*"],
    status: "ENABLED",
    dlqCount: 0,
  },
  {
    id: "ep_2",
    url: "https://hooks.acme.dev/ingest",
    description: "Staging",
    subscriptions: ["user.*", "invoice.paid"],
    status: "PAUSED",
    dlqCount: 3,
  },
];

export function EndpointsListDemo() {
  const [endpoints, setEndpoints] = useState(INITIAL);

  const setStatus = (id: string, status: EndpointListItem["status"]) =>
    setEndpoints((current) => current.map((endpoint) => (endpoint.id === id ? { ...endpoint, status } : endpoint)));

  return (
    <EndpointsList
      endpoints={endpoints}
      onPause={(endpoint) => setStatus(endpoint.id, "PAUSED")}
      onResume={(endpoint) => setStatus(endpoint.id, "ENABLED")}
      onEdit={() => undefined}
      onRevealSecret={() => undefined}
    />
  );
}

Props

PropTypeDescription
endpointsEndpointListItem[]Endpoints to render.
onEdit / onPause / onResume / onDelete / onRevealSecret(endpoint) => voidRow actions; omit one to hide its button.
busyEndpointId`stringnull`