update danube UI dashboard pictures

Author: danrusei

README.md

@@ -1,67 +1,97 @@
 # Danube Admin UI
 
-This repository contains the source code for the Danube Admin UI, a modern web interface for managing and monitoring a Danube messaging cluster. 
+The **Danube Admin UI** is a modern, responsive web dashboard designed for cluster operators and developers. It provides full visibility into cluster state, namespace topology, topic metrics, schema registry configurations, and security policies.
 
-The UI is built with React, TypeScript, and MUI, and it communicates with the `danube-admin-gateway` backend service.
+## How It Works
 
-## Danube Admin UI Screenshots
+The Admin UI is a single-page web application (built with React and Material UI) that runs entirely in your browser.
 
-**Cluster Listing**:
+It communicates over REST/HTTP with the **Danube Admin Server**, a lightweight Rust backend (referred to as the BFF, or Backend-for-Frontend) that acts as a gateway between the UI and your cluster. The Admin Server translates HTTP requests into gRPC calls directed at the active cluster leader broker, and also queries Prometheus for real-time throughput metrics.
 
-Overview of the cluster, shows all the brokers from the cluster.
+## Guided Tour
 
-Actions: 
-* Unload broker, moves all topics to another available broker
-* Activate a drained broker, in order to resume accepting new topics
-* Click a broker row to open its details.
+Here is a walkthrough of the main pages in the Danube Admin UI.
 
-![Cluster Listing](public/cluster_web.png)
+### Cluster Dashboard
+The landing page is your operational command center. It is organized into three main areas:
 
+**Cluster Info Panels**: Three summary cards at the top give you an instant snapshot of the cluster:
+* **Load Manager Info**: Active broker count and total topic count across the cluster.
+* **Traffic & Connectivity**: Aggregate RPC totals and the number of active client connections.
+* **Raft Consensus Health**: The current election term and last applied log index, confirming that the consensus layer is healthy and converging.
 
-**Broker Details**:
+**Cluster Nodes**: Each broker is displayed as a card showing its Raft role, status, and live stats. Operational actions like Activate, Unload, Promote, and Remove are available directly from each card.
 
-Overview of the broker and the topics table associated with the broker.
+![Cluster Dashboard — Info panels and node cards](public/danube_cluster_top.png)
 
-Actions: 
-* Create topic, creates a topic in the cluster 
-* Move topic to another available broker, cluster leader selects the target broker
-* Delete topic, removes the topic from the cluster
-* Click a topic row to open its details.
+**Load Balancing & Traffic Distribution**: Shows the cluster's balance health score, per-broker load distribution, and lets you trigger a cluster rebalance with an optional dry-run preview.
 
-![Broker Topics](public/broker_web.png)
+![Cluster Dashboard — Load balancing and traffic distribution](public/danube_cluster_bottom.png)
 
+### Broker Details
+Clicking on a broker card takes you to the broker detail page. Here you can see the full list of topics currently assigned to that broker, along with per-topic stats such as subscription counts and producer/consumer activity.
 
-**Topics**:
+![Broker detail page](public/broker_details.png)
 
-Overview of the topics in the cluster. The NonReliable and Reliable topic is a dispatch / persistence mode, see the [Danube dispatch strategy](https://danube-docs.dev-state.com/architecture/dispatch_strategy/) for more details.
+### Topics
+The Topics page lists all topics across the cluster with key metadata at a glance: delivery type, active producer, subscriptions and consumers.
 
-Actions: 
-* Create topic, creates a topic in the cluster 
-* Move topic to another available broker, cluster leader selects the target broker
-* Delete topic, removes the topic from the cluster
-* Click a topic row to open its details.
+![Topics dashboard](public/topics_dashboard.png)
 
-![Topics](public/topics_web.png)
+Clicking on a topic opens its detail page, where you can inspect traffic metrics, active producers and consumers, subscriptions, and the schema associated with the topic.
 
+![Topic detail page](public/topic_details.png)
 
-## Running with Docker (Recommended)
+### Schema Registry
+The Schema Registry page provides a browsable view of all registered schemas. You can inspect individual schema definitions, see which topics reference them, and review schema versions.
 
-Run the UI in a container with minimal steps. Host port matches docker-compose (5173).
+![Schema Registry](public/schema_registry.png)
 
-```bash
-docker build -t danube-admin-ui .
-docker run -d --name danube-admin-ui -p 5173:80 danube-admin-ui
-```
+### Namespaces
+The Namespaces page lists all active namespaces in the cluster. You can create new namespaces or inspect administrative properties, allowing you to segment your messaging resources by environment, team, or application.
 
-Open: http://localhost:5173
+### Security & RBAC
+Manage access control policies for your messaging resources. You can configure custom roles with fine-grained permissions (e.g., `Produce`, `Consume`, `Lookup`) and bind them to users or service accounts at cluster, namespace, or topic scopes.
 
-Note: The UI expects the gateway at http://localhost:8080 by default.
+---
 
-To stop/remove:
+## Try It Out with Docker Compose
 
-```bash
-docker stop danube-admin-ui && docker rm danube-admin-ui
-```
+The easiest way to spin up Danube with the Admin Server and Web UI is using Docker Compose. The setup launches **3 Brokers (Raft Consensus)**, a **CLI tool container**, a **Prometheus instance**, the **Admin BFF Server**, and the **Web UI**.
+
+1. **Create a local directory** for the configuration:
+   ```bash
+   mkdir danube-ui-demo && cd danube-ui-demo
+   ```
+
+2. **Download the required files** from the official GitHub repository:
+   ```bash
+   # Download Docker Compose setup
+   wget https://raw.githubusercontent.com/danube-messaging/danube/main/docker/with-ui/docker-compose.yml
+
+   # Download Broker configuration
+   wget https://raw.githubusercontent.com/danube-messaging/danube/main/docker/danube_broker.yml
+
+   # Download Prometheus configuration
+   wget https://raw.githubusercontent.com/danube-messaging/danube/main/docker/prometheus.yml
+   ```
+
+3. **Start the services**:
+   ```bash
+   docker compose up -d
+   ```
+
+4. **Access the Dashboard**:
+   Once the containers are running, open your browser:
+   * **Admin UI**: [http://localhost:8081](http://localhost:8081)
+   * **Prometheus UI**: [http://localhost:9090](http://localhost:9090)
+
+5. **Stop and Clean Up**:
+   ```bash
+   docker compose down -v
+   ```
+
+---
 
 ## Development
 
@@ -105,7 +135,7 @@ If you are developing features across the entire stack, run the backend locally
 Running the development environment with Docker Compose spins up the complete prepackaged Danube backend stack (3 brokers, admin server, and Prometheus) from official images, while building and running your local `danube-admin-ui` source code inside a Node development container with hot-reloading.
 
 1. **Prepare and run the development environment:**
-   Navigate to the `docker/` directory, follow the steps in [docker/README.md](file:///home/danr/danube_stream/danube-admin-ui/docker/README.md) to download the config files, and start the services:
+   Navigate to the `docker/` directory, follow the steps in [docker/README.md](docker/README.md) to download the config files, and start the services:
    ```bash
    cd docker
    docker-compose up --build
@@ -118,7 +148,4 @@ Running the development environment with Docker Compose spins up the complete pr
    docker-compose down -v
    ```
 
-The application will be available at **<http://localhost:5173>** and will automatically reload when you make changes to your local files.
-
-
-
+The application will be available at **http://localhost:5173** and will automatically reload when you make changes to your local files.