Kafbat UI Documentation

Kafbat UI is a web interface for managing Apache Kafka clusters with the following capabilities:

• Topic Management: Create, configure, and view topic details (partitions, replication, settings).
• Message Browser: Explore messages in JSON, plain text, or Avro. Supports live view and CEL message filters.
• Consumer Groups: Analyze offsets and monitor lag (combined and partition-specific).
• Schema Registry: Support for Avro, JSON Schema, and Protobuf.
• Security: Pluggable authentication (OAuth 2.0, LDAP, Basic Auth), Cloud IAM (GCP, Azure, AWS), and Role-Based Access Control (RBAC).
• Managed Services: Support for Azure EventHub, Google Cloud Managed Service for Apache Kafka, and AWS MSK (server-based and serverless).
• Data Privacy: Data masking to obfuscate sensitive information in topic messages.

To set up the Kafbat UI frontend for development, ensure you have docker and nvm (with the Node.js version specified in .nvmrc) installed. Follow these steps:

1. Navigate to the frontend directory:

   cd ./frontend

2. Install pnpm globally:

   npm install -g pnpm

   Note: If you need a specific version, use npm install -g pnpm@<version>.
3. Install project dependencies:

   pnpm install

4. Generate API clients from the OpenAPI document:

   pnpm gen:sources

You can run Kafbat UI and your Kafka clusters using Docker Compose. This command must be executed from the root directory of the repository.

docker-compose -f ./documentation/compose/kafbat-ui.yaml up

Important: Ensure that none of your .env* files contain the DEV_PROXY variable when running via Docker.

To stop the Subject Strategy Demo and remove the associated volumes, run the down command with the -v flag from the documentation/compose/subject-strategy-demo directory.

docker compose down -v

To run the Subject Strategy Demo, you must first build the API with the frontend included, then use Docker Compose to launch the environment.

1. Build the API: From the repository root, run the Gradle build command with the frontend flag enabled.
2. Launch via Docker Compose: Navigate to the demo directory and start the containers in detached mode.
3. Access the UI: Open your browser to http://localhost:8080/ to interact with message production and reproduction.

For a permanent installation, use Docker Compose and mount a configuration file to ensure settings persist across container restarts. The following example uses a volume to map a local config.yml to the container's dynamic configuration path.

services:
  kafbat-ui:
    container_name: kafbat-ui
    image: ghcr.io/kafbat/kafka-ui:latest
    ports:
      - 8080:8080
    environment:
      DYNAMIC_CONFIG_ENABLED: 'true'
      SWAGGER_UI_ENABLED: 'true'
    volumes:
      - ~/kui/config.yml:/etc/kafkaui/dynamic_config.yaml

To quickly try out Kafbat UI without a persistent setup, run the following Docker command. This enables dynamic configuration and the Swagger UI API documentation.

Access the web interface at http://localhost:8080 after the container starts.

docker run -it -p 8080:8080 -e DYNAMIC_CONFIG_ENABLED=true -e SWAGGER_UI_ENABLED=true ghcr.io/kafbat/kafka-ui

To run end-to-end UI tests locally, you need Node.js (>= 18) and a running instance of Kafbat. Follow these steps:

1. Start Kafbat: Use the provided docker compose file to spin up the environment: docker compose -f ./documentation/compose/e2e-tests.yaml up -d
2. Install dependencies: Run npm install.
3. Install Playwright browsers: Run npx playwright install.

The test suite uses Playwright, Cucumber.js, and TypeScript.

# Start Kafbat environment
docker compose -f ./documentation/compose/e2e-tests.yaml up -d

# Install dependencies and browsers
npm install
npx playwright install

Use the following npm scripts to execute the test suite in different modes:

• Normal Test Run: Executes the staged tests.
• Debug Mode: Runs tests with the Playwright Inspector enabled for debugging.
• Rerun Failed Tests: Automatically reruns only the tests that failed in the previous run.

To run the development server with API proxying, you must configure the proxy target in a .env.local file.

1. Create or update .env.local in the frontend directory:

   VITE_DEV_PROXY=https://api.server # replace with your actual API server URL

2. Start the development server:

   pnpm dev