diff --git a/README.md b/README.md index 8e2805f7..0bbbfb3d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,9 @@ # APISIX Dashboard (Next-Gen) -A decoupled, 100% client-side visual control plane for Apache APISIX. This project is a modern, lightweight, and type-safe rebuild of the official dashboard, eliminating the need for a custom Go backend and providing direct, browser-to-gateway administration. +A static React admin console for operating Apache APISIX through the APISIX +Admin API. The dashboard focuses on practical resource management: visual forms, +schema-guided JSON editors, topology inspection, import/export, and a direct +Admin API console without a separate dashboard backend. [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](LICENSE) [![React](https://img.shields.io/badge/React-19-blue?logo=react)](package.json) @@ -14,7 +17,9 @@ A decoupled, 100% client-side visual control plane for Apache APISIX. This proje > [!IMPORTANT] > **Zero Dashboard Backend** -> This dashboard runs entirely in the client's browser and communicates directly with the APISIX Admin API. It completely bypasses the legacy Go backend (`manager-api`) and its etcd synchronization layer, eliminating synchronization latency, deployment overhead, and security/CVE audit risks. +> This dashboard runs in the browser and communicates with APISIX through the +> Admin API. It does not run `manager-api`, keep a dashboard database, or sync +> APISIX state through a separate service. --- @@ -24,67 +29,79 @@ A decoupled, 100% client-side visual control plane for Apache APISIX. This proje This is not a mockup. The dashboard above is a static React SPA connected directly to an APISIX Admin API, rendering live Routes, Services, Upstreams, -plugin usage, health checks, and recent configuration changes without a custom +plugin usage, operational status, and recent configuration changes without a custom backend. What usually surprises people: * No `manager-api`: the browser talks to APISIX through the Admin API. * No dashboard database: state lives in APISIX and local browser settings. -* Visual forms, topology, and raw JSON editing are available in one UI. +* Visual forms, topology, Payload JSON, Admin API JSON, and a direct API + console are available in one UI. Start with the [Getting Started guide](docs/en/getting-started.md) for a guided walkthrough of connection setup, route management, topology, and the API console. -| Interactive topology | Route configuration | Direct Admin API console | -| :---: | :---: | :---: | -| ![Topology map](docs/en/assets/screenshots/topology-map-16x9.png) | ![Route detail](docs/en/assets/screenshots/route-detail-overview-16x9.png) | ![API console](docs/en/assets/screenshots/raw-api-console-16x9.png) | +| Route list | Route detail | +| :---: | :---: | +| ![Routes list](docs/en/assets/screenshots/routes-list-16x9.png) | ![Route detail](docs/en/assets/screenshots/route-detail-overview-16x9.png) | + +| Interactive topology | Direct Admin API console | +| :---: | :---: | +| ![Topology map](docs/en/assets/screenshots/topology-map-16x9.png) | ![API console](docs/en/assets/screenshots/raw-api-console-16x9.png) | --- -## Architecture Overview +## Architecture -The official dashboard requires a middleman server to proxy commands to etcd. The next-generation decoupled dashboard establishes a direct path, reducing infrastructure footprint and complexity. +The dashboard is deployed as static files. At runtime, the browser sends Admin +API requests through the same-origin `/apisix/admin` path, usually served by +APISIX itself or by a reverse proxy in front of the Admin API. -### Legacy Workflow (Official) ``` -[ Browser ] --REST--> [ Go Backend (manager-api) ] --Sync--> [ etcd ] --> [ APISIX Gateway ] +[ Browser (Static SPA) ] --/apisix/admin--> [ APISIX Admin API ] --> [ etcd ] ``` -* **Drawbacks**: Heavy resource consumption, synchronization lag, additional security exposure, and complex multi-container setup. -### Next-Gen Workflow (Decoupled) -``` -[ Browser (Static SPA) ] --Direct Admin API--> [ APISIX Gateway ] --> [ etcd ] -``` -* **Benefits**: Serverless deployment compatibility, instant configuration updates, and zero database dependencies. - ---- +The UI does not write dashboard-only resource shapes. Resource forms, tables, +JSON editors, import/export, and topology views are built around APISIX Admin +API payloads. -## Comparison Matrix +## Project Shape -| Capability | Official Dashboard | Next-Gen Dashboard (This Repo) | -| :--- | :--- | :--- | -| **Architecture** | Go Backend + etcd Syncer + React SPA | **100% Client-Side React SPA** (Direct Admin API) | -| **Hosting** | Requires Go binary or Docker container | **Static Hosting** (Vercel, Netlify, Nginx, S3, etc.) | -| **Frontend Stack** | React 17 / Webpack | **React 19 / Vite** (Fast HMR, optimized bundle sizing) | -| **State & Sync** | React Router 5 / Redux | **TanStack Router (Type-Safe)** + **TanStack Query (Cached)** | -| **State Storage** | Server-side database / etcd | **Local Browser Storage** (Zod-validated Jotai atoms) | -| **Visual Topology** | Not supported | **Interactive Topology Map** (`@xyflow/react` + `dagre`) | -| **AI Gateway support** | Not supported | **Dedicated AI plugin templates** (OpenAI, AWS Bedrock, etc.) | -| **Editor System** | Rigid multi-step wizard / basic text inputs | **Side-by-Side Pro Forms & Monaco Editor** (Simultaneous visual & raw JSON co-editing) | +| Area | Current implementation | +| :--- | :--- | +| **Runtime** | Static React SPA served from `/ui/` | +| **Admin API access** | Same-origin `/apisix/admin` requests with `X-API-KEY` | +| **Frontend stack** | React 19, Vite 8, TypeScript, Ant Design 6 | +| **Routing and data** | TanStack Router and TanStack Query | +| **Forms and validation** | React Hook Form and Zod schemas | +| **JSON editing** | Monaco-based Payload JSON, Admin API JSON, Plugin JSON, and Request/Response JSON | +| **Topology** | `@xyflow/react` and `dagre` | +| **Testing** | Playwright E2E coverage | --- ## Key Features -* **Modern Enterprise UI**: Designed with Ant Design 6, Inter-based UI typography, and IBM Plex Mono for code, IDs, and JSON. Supports responsive layout grids and dynamic dark mode customization. -* **Interactive Topology Map**: Built using `@xyflow/react` and `dagre` graph layouts. Instantly renders the logical relationship: `Route -> Service -> Upstream -> Backend Targets`. -* **AI Gateway Presets**: Dedicated forms and validation schemas for APISIX AI plugins (e.g., `ai-proxy` and `ai-proxy-multi`) covering OpenAI, AWS Bedrock, and OpenAI-compatible models. -* **Visual & RAW JSON Co-Editing**: Bypasses the slow, multi-step wizards of the official dashboard. You can configure resources visually using forms, or write/paste raw JSON directly in a side-by-side Monaco Editor. Real-time Zod schema validation and autocomplete prevent syntax errors before saving. -* **Direct API Integration**: Safely authenticate directly to your gateway. Admin API keys are stored locally inside the browser's sandbox, while API traffic uses the same-origin `/apisix/admin` path. -* **Backup & Migration Engine**: Export and import gateway routing rules, services, upstreams, and SSL certificates in a unified JSON format in a single click. -* **Direct Admin API Console**: Build, send, and inspect APISIX Admin API requests from the dashboard UI without leaving the control plane. +* **Resource-first UI**: Manage Routes, Stream Routes, Services, Upstreams, + Consumers, Consumer Groups, SSLs, Global Rules, Plugin Configs, Plugin + Metadata, Secrets, and Protos from one static console. +* **Interactive Topology Map**: Built with `@xyflow/react` and `dagre` to show + the live relationship between Routes, Services, Upstreams, and backend + targets. +* **Schema-guided JSON Editing**: Use Payload JSON while creating resources, + Admin API JSON while patching saved resources, Plugin JSON inside plugin + drawers, and Request/Response JSON in the API Console. +* **Plugin Configuration Help**: Plugin forms and JSON templates prefill + required fields from APISIX schemas, with extra guidance for AI Gateway + plugins such as `ai-proxy` and `ai-proxy-multi`. +* **Direct API Integration**: Admin API keys are stored in local browser + storage, and API traffic uses the same-origin `/apisix/admin` path. +* **Backup & Migration Engine**: Export and import gateway resources in a + unified JSON format. +* **Direct Admin API Console**: Build, send, save, and inspect APISIX Admin API + requests without leaving the dashboard. --- diff --git a/docs/en/assets/screenshots/dashboard-overview-16x9.png b/docs/en/assets/screenshots/dashboard-overview-16x9.png index 1e98e293..ec4e967b 100644 Binary files a/docs/en/assets/screenshots/dashboard-overview-16x9.png and b/docs/en/assets/screenshots/dashboard-overview-16x9.png differ diff --git a/docs/en/assets/screenshots/raw-api-console-16x9.png b/docs/en/assets/screenshots/raw-api-console-16x9.png index b196d24d..3c78ab76 100644 Binary files a/docs/en/assets/screenshots/raw-api-console-16x9.png and b/docs/en/assets/screenshots/raw-api-console-16x9.png differ diff --git a/docs/en/assets/screenshots/route-detail-overview-16x9.png b/docs/en/assets/screenshots/route-detail-overview-16x9.png index 3d1a9959..cb7db2dd 100644 Binary files a/docs/en/assets/screenshots/route-detail-overview-16x9.png and b/docs/en/assets/screenshots/route-detail-overview-16x9.png differ diff --git a/docs/en/assets/screenshots/routes-list-16x9.png b/docs/en/assets/screenshots/routes-list-16x9.png index e8cc004b..c544ef61 100644 Binary files a/docs/en/assets/screenshots/routes-list-16x9.png and b/docs/en/assets/screenshots/routes-list-16x9.png differ diff --git a/docs/en/assets/screenshots/topology-map-16x9.png b/docs/en/assets/screenshots/topology-map-16x9.png index 081ce874..d0e3fd89 100644 Binary files a/docs/en/assets/screenshots/topology-map-16x9.png and b/docs/en/assets/screenshots/topology-map-16x9.png differ diff --git a/src/routes/raw_api/index.tsx b/src/routes/raw_api/index.tsx index 0514f1cb..ba7e7b23 100644 --- a/src/routes/raw_api/index.tsx +++ b/src/routes/raw_api/index.tsx @@ -816,7 +816,7 @@ function RawApiPage() {
Direct Admin API access - Requests are sent exactly as configured. Use resource RAW editors + Requests are sent exactly as configured. Use Admin API JSON editors when you want guided validation and safer payload handling.