Demo UI#8
Merged
Merged
Conversation
Add a complete interactive examples/demo for Spring Web Captor. Introduces a Spring Boot backend (controllers, DemoItem model, CapturedEventStore listener, CORS config, application.yml, pom.xml) instrumented with web-captor, plus Dockerfile for optimized runtime. Adds a React + Vite frontend (components, API client, ESLint and Vite configs, Dockerfile) and docker-compose to run both services together. Includes README files describing setup and features showcased (endpoints, multipart uploads, query/path params, error handling, duration/IP/user-agent tracking).
Large frontend refactor of the example demo UI and event inspection flow. - Removed legacy ApiPlayground and ConfigViewer components. - Renamed PreBuiltDemos -> DemoScenarios and polished scenarios (titles, descriptions, tags, timings, and new run callback). - Updated App layout to show demo scenarios on the left and a single captured-events area on the right; added selection state and clear behavior. - Reworked CapturedEventsPanel to accept external selection, show an improved empty state, and render EventDetailView when an event is selected. - Redesigned EventDetailView: fixed duration parsing, new visual/raw switch, reorganized sections (headers, params, path, body, files), styling tweaks, and better data presentation. These changes simplify the demo experience and improve event inspection UX. (Package lock updated by install; not described in detail.)
Rework the frontend example to a guided single-scenario flow. App.tsx now manages demo selection and a phase state (previewing → sending → captured), uses api client calls (fetchCapturedEvents, clearCapturedEvents) and displays a RequestPreview, CaptureAnimation, and CapturedResult. Added new components: DemoSelector, RequestPreview, CaptureAnimation, CapturedResult, and demoData; removed the older multi-event UI components and hook (CapturedEventsPanel, DemoScenarios, EventCard, EventDetailView, KeyValueEditor, useCapturedEvents). Minor layout and style adjustments in the header/container to fit the new UX.
Introduce a StringValue component that truncates long strings (truncateAt = 200) and provides "...show more" / "show less" buttons to expand or collapse the full value. Refactor JsonValue to delegate string rendering to StringValue to avoid rendering very large inline strings and improve readability in the JSON viewer.
Set "jakarta.servlet.error.status_code" on the request before calling ErrorAttributes so DefaultErrorAttributes reports the real HTTP status (otherwise it can default to 999). Add unit tests asserting that errorDetail.status matches the actual response status for 500, 404 and 418 responses. Also add missing assertEquals import in the test.
Introduce a new "Built-in Extensions" area that surfaces duration, client IP, and user agent as extensions. The duration card was moved out of the summary cards (now using lg:grid-cols-3 instead of 4) and now shows optional start/end times when available. Also import the Puzzle icon for the header and apply violet-themed styling/badges to the extension cards.
Update CapturedResult.tsx to add a collapsible ExtensionInfoPanel that explains how to create custom IHttpEventExtension implementations. Also import the Info icon from lucide-react and render the panel under the Extensions section. The panel includes a Java example Spring component showing how to enrich events' additionalData map and a list of suggested extension ideas (tenant ID, roles, correlation ID, feature flags, etc.) to help developers add contextual audit data. Changes are purely UI/documentation-focused to help users implement extensions.
Adjust responsive spacing, sizing and overflow handling across the example frontend. Changes reduce paddings/margins and font sizes on small screens, tweak header/demo selector/main paddings, shrink animation/badge sizes, truncate long request URLs, add overflow-x for tables, and refine grid/card layouts and button/text styles to prevent wrapping and improve mobile readability.
Replace npm ci with npm install in examples/frontend/Dockerfile to install dependencies during the build. Remove the unused `demo` prop from the CapturedResult component's parameter list to clean up props usage; no other behavior changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces a complete interactive demo for Spring Web Captor, including both backend and frontend applications, along with Docker and documentation for easy setup and demonstration. The backend is a Spring Boot application that captures and exposes HTTP request/response events, while the frontend is a React app for interacting with and visualizing these events. The changes also include Dockerfiles and a Docker Compose configuration for running the entire demo stack with a single command.
Backend Application:
examples/backend) with endpoints for CRUD operations, file uploads, form handling, error simulation, and event capturing, leveraging the Spring Web Captor library. [1] [2] [3] [4]pom.xml) for building the backend and a multi-stage Dockerfile for optimized containerization. [1] [2]Frontend Application:
examples/frontend) with a minimal setup, ESLint recommendations, and a static site Dockerfile for deployment. [1] [2] [3]Demo Setup & Documentation:
examples/README.md) describing features, prerequisites, setup steps, and Docker usage for running the demo.Most important changes:
Backend Implementation:
DemoController,DemoItem, event listener, etc.). [1] [2] [3] [4]CapturedEventsController,ConfigViewController). [1] [2]pom.xmlfor dependencies/build and a multi-stage Dockerfile for optimized backend containerization. [1] [2]Frontend & Dev Environment:
.gitignorefor development. [1] [2] [3]Demo Orchestration & Documentation: