Skip to content

Commit c22eac8

Browse files
danruseidanrusei
authored
Merge pull request #8 from danube-messaging/frontend_improved
Frontend improved
2 parents 10cd46c + ae98e8a commit c22eac8

26 files changed

Lines changed: 5867 additions & 338 deletions

‎README.md‎

Lines changed: 45 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -65,29 +65,60 @@ docker stop danube-admin-ui && docker rm danube-admin-ui
6565

6666
## Development
6767

68-
If you want to contribute to the development of the UI, you can set up a local development environment using docker-compose.
68+
If you want to contribute to the development of the UI, you can set up a local development environment.
6969

7070
### Prerequisites
7171

72-
- [Docker](https://www.docker.com/get-started) must be installed and running on your system.
73-
- [Docker Compose](https://docs.docker.com/compose/install/)
72+
- [Docker](https://www.docker.com/get-started) & [Docker Compose](https://docs.docker.com/compose/install/) (if using the Docker setup)
73+
- [Rust](https://www.rust-lang.org/tools/install) (if running the backend locally via `make`)
74+
- [Node.js](https://nodejs.org/) (for local UI host development)
75+
76+
### Local Setup with Make (Host Development)
77+
78+
If you are developing features across the entire stack, run the backend locally on your host machine via `make` targets.
79+
80+
1. **Start the backend services:**
81+
In the `danube` repository root:
82+
```bash
83+
make brokers # Compiles and starts 3 broker instances
84+
make prom # Starts the Prometheus container on port 9090 (collects metrics)
85+
make admin # Starts the HTTP admin server on port 8080
86+
```
87+
88+
2. **Run the UI development server:**
89+
In the `danube-admin-ui` repository root:
90+
```bash
91+
npm install # Install dependencies
92+
npm run dev # Starts the Vite dev server on http://localhost:5173
93+
```
94+
95+
3. **Stop and clean up:**
96+
In the `danube` repository root:
97+
```bash
98+
make admin-clean
99+
make brokers-clean
100+
make prom-clean
101+
```
74102

75103
### Local Setup with Docker Compose
76104

77-
1.**Run the development environment:**
78-
This command will start the application and all the required services. The `--build` flag will build the images if they don't exist.
105+
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.
79106

80-
```bash
81-
docker-compose up --build
82-
```
107+
1. **Prepare and run the development environment:**
108+
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:
109+
```bash
110+
cd docker
111+
docker-compose up --build
112+
```
83113

84-
2.**Stopping the development environment:**
85-
To stop the application and remove the containers, use the following command:
114+
2. **Stop the development environment:**
115+
To stop the services and clean up containers and volumes:
116+
```bash
117+
cd docker
118+
docker-compose down -v
119+
```
86120

87-
```bash
88-
docker-compose down
89-
```
121+
The application will be available at **<http://localhost:5173>** and will automatically reload when you make changes to your local files.
90122

91-
The application will be available at **<http://localhost:5173>** and will automatically reload when you make changes to the code.
92123

93124

‎docker-compose.yml‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎docker/README.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# Local Development with Docker Compose
2+
3+
This directory allows you to spin up the complete prepackaged Danube backend cluster (3 brokers, admin server, and Prometheus) from official images, while building and running your local `danube-admin-ui` source code inside a Node container with hot-reloading.
4+
5+
## Prerequisites
6+
7+
Before starting the containers, you need to download the required cluster and metrics configuration files into this directory.
8+
9+
Run the following commands inside this `docker/` folder to fetch them:
10+
11+
```bash
12+
# Download the default Danube broker configuration
13+
curl -o danube_broker.yml https://raw.githubusercontent.com/danube-messaging/danube/main/docker/danube_broker.yml
14+
15+
# Download the default Prometheus scrape configuration
16+
curl -o prometheus.yml https://raw.githubusercontent.com/danube-messaging/danube/main/docker/prometheus.yml
17+
```
18+
19+
## Running the Stack
20+
21+
Once the configuration files are present in this directory, you can build and start the entire stack:
22+
23+
```bash
24+
docker-compose up --build
25+
```
26+
27+
The application will be available at **http://localhost:5173** and will automatically reload when you make changes to your local files.
28+
29+
## Stopping the Stack
30+
31+
To stop the services and clean up containers and volumes:
32+
33+
```bash
34+
docker-compose down -v
35+
```

‎docker/docker-compose.yml‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
# Danube Admin UI local development environment
2+
# Spins up the complete Danube stack using official pre-built images,
3+
# while mounting the local admin-ui source code for live development and hot-reloading.
4+
5+
services:
6+
# Danube Broker 1
7+
broker1:
8+
container_name: "danube-broker1"
9+
image: ghcr.io/danube-messaging/danube-broker:latest
10+
restart: on-failure
11+
environment:
12+
- RUST_LOG=danube_broker=info,danube_core=info,openraft=warn
13+
volumes:
14+
- ./danube_broker.yml:/etc/danube_broker.yml:ro
15+
- broker1_data:/danube-data
16+
networks:
17+
- danube_net
18+
ports:
19+
- "6650:6650" # Broker gRPC
20+
- "50051:50051" # Admin API
21+
- "9040:9040" # Prometheus metrics
22+
command:
23+
[
24+
"--config-file",
25+
"/etc/danube_broker.yml",
26+
"--broker-addr",
27+
"0.0.0.0:6650",
28+
"--admin-addr",
29+
"0.0.0.0:50051",
30+
"--raft-addr",
31+
"0.0.0.0:7650",
32+
"--prom-exporter",
33+
"0.0.0.0:9040",
34+
"--advertised-addr",
35+
"broker1:6650",
36+
]
37+
healthcheck:
38+
test: ["CMD-SHELL", "curl -f http://localhost:9040/metrics || exit 1"]
39+
interval: 30s
40+
timeout: 10s
41+
retries: 3
42+
start_period: 30s
43+
44+
# Danube Broker 2
45+
broker2:
46+
container_name: "danube-broker2"
47+
image: ghcr.io/danube-messaging/danube-broker:latest
48+
restart: on-failure
49+
environment:
50+
- RUST_LOG=danube_broker=info,danube_core=info,openraft=warn
51+
volumes:
52+
- ./danube_broker.yml:/etc/danube_broker.yml:ro
53+
- broker2_data:/danube-data
54+
networks:
55+
- danube_net
56+
ports:
57+
- "6651:6650" # Broker gRPC
58+
- "50052:50051" # Admin API
59+
- "9041:9040" # Prometheus metrics
60+
command:
61+
[
62+
"--config-file",
63+
"/etc/danube_broker.yml",
64+
"--broker-addr",
65+
"0.0.0.0:6650",
66+
"--admin-addr",
67+
"0.0.0.0:50051",
68+
"--raft-addr",
69+
"0.0.0.0:7650",
70+
"--prom-exporter",
71+
"0.0.0.0:9040",
72+
"--advertised-addr",
73+
"broker2:6650",
74+
]
75+
healthcheck:
76+
test: ["CMD-SHELL", "curl -f http://localhost:9040/metrics || exit 1"]
77+
interval: 30s
78+
timeout: 10s
79+
retries: 3
80+
start_period: 30s
81+
82+
# Danube Broker 3
83+
broker3:
84+
container_name: "danube-broker3"
85+
image: ghcr.io/danube-messaging/danube-broker:latest
86+
restart: on-failure
87+
environment:
88+
- RUST_LOG=danube_broker=info,danube_core=info,openraft=warn
89+
volumes:
90+
- ./danube_broker.yml:/etc/danube_broker.yml:ro
91+
- broker3_data:/danube-data
92+
networks:
93+
- danube_net
94+
ports:
95+
- "6652:6650" # Broker gRPC
96+
- "50053:50051" # Admin API
97+
- "9042:9040" # Prometheus metrics
98+
command:
99+
[
100+
"--config-file",
101+
"/etc/danube_broker.yml",
102+
"--broker-addr",
103+
"0.0.0.0:6650",
104+
"--admin-addr",
105+
"0.0.0.0:50051",
106+
"--raft-addr",
107+
"0.0.0.0:7650",
108+
"--prom-exporter",
109+
"0.0.0.0:9040",
110+
"--advertised-addr",
111+
"broker3:6650",
112+
]
113+
healthcheck:
114+
test: ["CMD-SHELL", "curl -f http://localhost:9040/metrics || exit 1"]
115+
interval: 30s
116+
timeout: 10s
117+
retries: 3
118+
start_period: 30s
119+
120+
# Prometheus for metrics collection
121+
prometheus:
122+
container_name: "danube-prometheus"
123+
image: prom/prometheus:latest
124+
depends_on:
125+
broker1:
126+
condition: service_started
127+
broker2:
128+
condition: service_started
129+
broker3:
130+
condition: service_started
131+
networks:
132+
- danube_net
133+
ports:
134+
- "9090:9090"
135+
volumes:
136+
- ./prometheus.yml:/etc/prometheus/prometheus.yml:ro
137+
138+
# Danube Admin Server (HTTP API for the UI)
139+
danube-admin:
140+
container_name: "danube-admin"
141+
image: ghcr.io/danube-messaging/danube-admin:latest
142+
depends_on:
143+
broker1:
144+
condition: service_started
145+
prometheus:
146+
condition: service_started
147+
networks:
148+
- danube_net
149+
ports:
150+
- "8080:8080"
151+
command:
152+
[
153+
"serve",
154+
"--mode",
155+
"ui",
156+
"--broker-endpoint",
157+
"broker1:50051",
158+
"--listen-addr",
159+
"0.0.0.0:8080",
160+
"--request-timeout-ms",
161+
"5000",
162+
"--cache-ttl-ms",
163+
"3000",
164+
"--prometheus-url",
165+
"http://prometheus:9090",
166+
"--cors-allow-origin",
167+
"http://localhost:5173",
168+
]
169+
170+
# Local Admin UI Development Container
171+
admin-ui:
172+
container_name: "danube-admin-ui"
173+
build:
174+
context: ../
175+
dockerfile: Dockerfile.dev
176+
depends_on:
177+
danube-admin:
178+
condition: service_started
179+
ports:
180+
- "5173:5173"
181+
volumes:
182+
- ../:/app
183+
- /app/node_modules # prevent overwriting node_modules
184+
environment:
185+
- CHOKIDAR_USEPOLLING=true # helps with file watching in Docker
186+
- VITE_GATEWAY_BASE_URL=http://localhost:8080
187+
command: pnpm dev --host 0.0.0.0
188+
networks:
189+
- danube_net
190+
191+
networks:
192+
danube_net:
193+
name: danube_net
194+
driver: bridge
195+
196+
volumes:
197+
broker1_data:
198+
name: danube_broker1_data
199+
broker2_data:
200+
name: danube_broker2_data
201+
broker3_data:
202+
name: danube_broker3_data

0 commit comments

Comments
 (0)