Skip to content

Commit af17c07

Browse files
ArmanpreetGhotraXhulia Jasimi
andauthored
add documentation(#101)
* add team members roles * Update client README.md * remove docker stuff from client readme * add genai documentation * update backlog and problem statement * add readme observability * docu * docu * docu * add ec2 readme file * fix bullet * tiny chnage * update docu --------- Co-authored-by: Xhulia Jasimi <xhulia.jasimi@siemens.com>
1 parent 319faa4 commit af17c07

File tree

13 files changed

+622
-60
lines changed

13 files changed

+622
-60
lines changed

ObservabilityDocu/README.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# Whiteboard Monitoring Setup Guide
2+
3+
## 📊 Overview
4+
5+
This guide covers the monitoring setup for the Whiteboard application, including Grafana, Prometheus, and Alertmanager.
6+
7+
### 🎯 Quick Access Points
8+
9+
- **Grafana**: `http://localhost:3001`
10+
- **Prometheus**: `http://localhost:9090`
11+
- **Alertmanager**: `http://localhost:9093`
12+
13+
## 📈 Dashboard Management
14+
15+
### Current Dashboards
16+
This setup includes three pre-configured dashboards that provide insights into request rates, response times, and error rates:
17+
- **Genai Dashboard**
18+
- **Realtime Dashboard**
19+
- **Server Dashboard**
20+
21+
22+
23+
### Dashboard Provisioning
24+
Grafana automatically loads dashboards from the `/whiteboard-observability/files/grafana/dashboards/` directory on startup.
25+
26+
## 🔧 Configuration Files
27+
28+
- **`prometheus.yml`**:
29+
- Purpose: Defines metrics scraping configuration
30+
- Key settings: Scrape intervals, target endpoints
31+
32+
- **`alertmanager.yml`**:
33+
- Purpose: Alert routing and notification config
34+
- Features: alert notifications
35+
36+
## 🚨 Alert Rules
37+
38+
Currently configured alerts:
39+
- Service Down (instance offline >1m)
40+
41+
### Alert Notifications
42+
- channel: Mailhog

README-workflows.md

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
# CI/CD Workflow
2+
3+
This directory contains all GitHub Actions workflow files for automated continuous integration, deployment, and quality assurance of the project.
4+
5+
## Directory Structure
6+
7+
```
8+
.github/workflows
9+
├── README.md # This documentation file
10+
├── client-linters.yml # Linting and formatting checks for client code (JavaScript/TypeScript)
11+
├── deploy-to-ec2.yml # Deploys the application stack to an AWS EC2 VM using Docker Compose
12+
├── deploy-to-k8s.yml # Full Kubernetes deployment workflow with automatic Docker build & push
13+
├── genai-linters.yml # Linting & formatting for the GenAI Python service
14+
├── genai-tests.yml # Runs unit and integration tests for the GenAI service
15+
├── realtime-tests.yml # Runs Go tests for the Realtime service
16+
├── server-linters.yml # Linting and formatting for the backend server (Java/Spring)
17+
└── server-tests.yml # Runs tests for the backend server
18+
```
19+
20+
## Workflow Files Description
21+
22+
- **client-linters.yml**
23+
Runs various linting, formatting, and type-checking tools (`ESLint`, `Prettier`, and `TypeScript`) for the `client/` (frontend) codebase on relevant pull requests and workflow_dispatch.
24+
25+
- **deploy-to-ec2.yml**
26+
Manually triggered action that deploys the application to an AWS EC2 virtual machine. Uses SCP and SSH actions to upload Docker Compose files and execute deployment on the VM.
27+
28+
- **deploy-to-k8s.yml**
29+
Complete pipeline for CI and automated deployment on Kubernetes.
30+
- **Triggers:** Push to `main`/`develop`, or pull request to `develop`
31+
- **Actions:**
32+
- Checks out code
33+
- Builds and pushes Docker images (client, server, genai, realtime) to GitHub Container Registry
34+
- Deploys the new images using Helm with environment-specific values
35+
- Outputs deployment URLs and posts them as PR comments.
36+
37+
- **genai-linters.yml**
38+
Python-specific code linting and formatting for the `genai/` service using `ruff` (with both check and auto-fix capabilities).
39+
40+
- **genai-tests.yml**
41+
Runs automated tests for the `genai/` (Python) service on PRs and manual triggers, using `pytest`.
42+
43+
- **realtime-tests.yml**
44+
Executes Go tests for the `realtime/` go service when changes are made or when manually triggered.
45+
46+
- **server-linters.yml**
47+
Linting and formatting checks for the backend server using `gradle spotlessCheck`, ensuring code quality before merging.
48+
49+
- **server-tests.yml**
50+
Runs backend (Java/Spring Boot) tests automatically for all changes to the `server/` codebase.
51+
52+
53+
## `deploy-to-k8s.yml` — Kubernetes Deployment Pipeline
54+
55+
This workflow handles **automated CI/CD deployment** to Kubernetes for every push to `main`, `develop`, and for PRs to `develop`. It is the main workflow ensuring that all core services are always built, published, and deployed in a uniform, automated way.
56+
57+
#### Workflow Steps Overview
58+
59+
The pipeline consists of the following core stages:
60+
61+
1. **Setup**
62+
Determines the branch and deployment environment, sets up variables (e.g., image tags, URLs), and, for PRs, ensures the PR branch is up-to-date with the base branch.
63+
64+
2. **Parallel Build Jobs**
65+
- **build-client:** Build and push the client (frontend) Docker image.
66+
- **build-server:** Build and push the backend server Docker image.
67+
- **build-genai:** Build and push the GenAI (Python) Docker image.
68+
- **build-realtime:** Build and push the Realtime (Go) Docker image.
69+
70+
71+
These four jobs run **in parallel** for maximum speed, as visualized below:
72+
73+
![deploy-to-k8s](docs/deploy-to-k8s.png)
74+
![github_comment](docs/github_comment.png)
75+
76+
*(These screenshots are from one of our PRs)*
77+
78+
3. **Deploy**
79+
Once all build jobs succeed, the deployment job takes over. It:
80+
- Determines the appropriate Kubernetes namespace, release name, and Helm values file (production, staging, or PR-specific).
81+
- Authenticates using secrets.
82+
- Runs a Helm upgrade/install so that the newly built images are rolled out to the right environment cluster using K8s best practices.
83+
84+
4. **Comment PR**
85+
For PRs, the workflow posts a comment on the pull request with all relevant deployment URLs (client, server swagger, real-time swagger, GenAI docs, Auth/Keycloak), making it easy for reviewers to access and verify deployments directly.
86+
87+
#### Key Features
88+
89+
- **Multi-service:** Handles building and pushing all main services in parallel (client, server, genai, realtime).
90+
- **Dynamic Environments:** Deploys to `production`, `staging`, or per-PR namespaces based on branch.
91+
- **Branch Safety:** PRs get their own unique namespace and resource set, keeping environments isolated.
92+
- **Secrets Handling:** Leverages GitHub Secrets for Kubernetes credentials, API keys, and sensitive data.
93+
- **Automated PR Feedback:** Deploys post directly to the PR for instant reviewer access to live endpoints.
94+
95+
96+
97+
## Additional Information
98+
99+
- Use `workflow_dispatch` to manually trigger deployments when needed.
100+
- Deployment URLs are posted automatically on PRs for fast access and testing.
101+
- Sensitive information is managed securely through [GitHub Actions Secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets).
102+
103+
104+
---
105+
106+
**For more information or customizations, please refer to the individual `.yml` files in this folder.**

README.md

Lines changed: 153 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# ✏️ AI-Powered Whiteboard - Problem Statement
2-
1+
# ✏️ AI-Powered Whiteboard
32

3+
# Problem Statement
44
## 🧩 Main Functionality
55

66
An AI enhanced digital whiteboard web-application that helps users visualize, organize, and share their ideas.
@@ -10,12 +10,12 @@ It addresses the need for a flexible, collaborative space where users can visual
1010

1111
## 🚀 Main Features
1212

13-
- **Visual Whiteboard**: Add and arrange text, shapes, and colors to visualise ideas.
14-
- **Real-Time Collaboration**: Share boards with others and edit together in real-time.
13+
- **Visual Whiteboard**: Add and arrange text, shapes, and colors to visualise ideas.
14+
- **Real-Time Collaboration**: Share boards with others in real time.
1515
- **Generative AI Integration**:
1616
- **Text Autocompletion**: AI text-autocompletion.
17-
- **Text-to-Image Generation**: Select text and generate relevant images.
18-
- **Text Enhancement**: Summarize and rewrite paragraphs with the help of AI.
17+
- **Text Summarization**: Summarize the text of the User.
18+
- **Text Enhancement**: Rewrite paragraphs with the help of AI.
1919
---
2020

2121
## 👥 Intended Users
@@ -31,25 +31,167 @@ It addresses the need for a flexible, collaborative space where users can visual
3131
- A student builds a study guide with concept branches and uses AI to autocomplete summaries or visualize key ideas.
3232
- A product team drafts a user flow, enhanced with images generated from task descriptions.
3333
- An educator prepares a digital lesson board with the help of AI-generated visuals.
34+
- An educator can collaborate with students, allowing them to view the whiteboard in real time while the educator shares it.
3435

3536
---
3637

3738
## Initial Product Backlog Item
3839

3940
1. As a user, I want to sketch my ideas on the whiteboard, so that I can quickly capture and explore concepts visually.
4041
2. As a user, I want to add shapes and apply colors, so that I can organize information visually and enhance clarity.
41-
3. As a user, I want to collaborate with others in real time, so that we can brainstorm and edit ideas together efficiently.
42+
3. As a user, I want to collaborate with others in real time, so that we can brainstorm ideas together efficiently.
4243
4. As a user, I want to add and edit text on the whiteboard, so that I can capture thoughts and annotations clearly.
4344
5. As a user, I want the app to autocomplete my text as I type, so that I can write faster and stay focused on my ideas.
44-
6. As a user, I want to select a piece of text and generate a relevant image, so that I can visually enhance my whiteboard content.
45-
7. As a user, I want to summarize long paragraphs using AI, so that I can condense information and understand key points quickly.
46-
8. As a user, I want to rewrite selected text with AI assistance, so that I can improve clarity, tone, or grammar effortlessly.
45+
6. As a user, I want to summarize long paragraphs using AI, so that I can condense information and understand key points quickly.
46+
7. As a user, I want to rewrite selected text with AI assistance, so that I can improve clarity, tone, or grammar effortlessly.
4747

4848
---
49-
## UML Models
49+
## Architecture and Modelling
50+
51+
### Subsystem Decomposition Diagram
52+
![Subsystem Decomposition Diagram](docs/SSD.png)
53+
5054
### UML Use Case Diagram
5155

5256
![UML Use Case Diagram](docs/UMLUseCaseDiagram.png)
5357

5458
### Analysis Object Model
5559
![AOM](docs/AOM.png)
60+
61+
---
62+
63+
## Team Members & Responsibilities
64+
65+
## 👥 Team Contributions
66+
67+
68+
**Armanpreet Ghotra**
69+
Arman took the lead on creating and integrating the GenAI service, making sure all AI-powered features worked smoothly within our application. She was also responsible for setting up observability tooling to ensure our services were monitorable and reliable. In addition, she was hands-on with EC2 deployment. Additionally, she played an important role on the client side by implementing UI features and more. She also contributed to our documentation and system modeling.
70+
71+
**Leon Liang**
72+
Leon focused primarily on building the end-to-end real-time collaboration features using Go, Redis PubSub and WebSockets. Het was responsible for setting up authentication for our platform, using Keycloak. He made sure real-time interactions in the app were robust and smooth. Leon also took ownership of deploying observability tools and was instrumental in setting up our deployment processes, especially for managing PR environments on Kubernetes and EC2.
73+
74+
**Xhulia Jasimi**
75+
Xhulia was the main force behind our Spring Boot server—developing most of the backend logic, endpoints, and database integrations. She contributed on the client side, implementing UI features and bridging the client and spring boot server. Additionally, she was involved in creating Grafana dashboard for Observability. Xhulia contributed on Kubernetes deployments, documentation, and system modelling diagrams.
76+
77+
78+
---
79+
Throughout the project, all team members collaborated closely—setting up the initial project structure, designing the CI/CD pipeline, performing code reviews, and helping each other across different parts of the stack. Everyone jumped in where needed, ensuring a smooth and successful delivery.
80+
81+
82+
# Running the Application
83+
84+
Each service includes its own `Dockerfile` in the respective folder. The entire stack is orchestrated via `compose.yml`, which also configures and fetches required external services. You are welcome to explore these files to better understand the system architecture.
85+
86+
## Prerequisites
87+
88+
- Docker Desktop installed locally with permission to run scripts
89+
- Stable internet connection
90+
91+
## Setup
92+
93+
1. **Create Environment File**
94+
Before running the application, create a `.env` file in the root directory using `.env.example` as a reference.
95+
Make sure to add your API key for OpenWeb UI.
96+
97+
2. **Navigate to Project Root**
98+
In your terminal, go to the root directory of the project (where this README is located).
99+
100+
3. **Build and Start the Containers**
101+
```bash
102+
docker compose build
103+
docker compose up
104+
```
105+
_Note: Spring Boot may take some time to start up._
106+
107+
## Troubleshooting: PostgreSQL Database Not Created
108+
109+
If the PostgreSQL database is not created, it may be due to Docker lacking permission to execute `.sh` files. To fix this:
110+
111+
1. Enter the Exec shell of the running `db` container on Docker Desktop:
112+
2. Navigate to the init script directory:
113+
```bash
114+
cd docker-entrypoint-initdb.d
115+
```
116+
3. Ensure the script is executable and run it:
117+
```bash
118+
chmod +x db_init.sh
119+
./db_init.sh
120+
```
121+
122+
## Additional Information
123+
124+
Enjoy our application! Every service has its own README file which you can read for further information on how to run tests and other commands.
125+
126+
---
127+
### Client
128+
129+
- [http://localhost:3000](http://localhost:3000)
130+
131+
### Server
132+
133+
- **Swagger UI:**
134+
[http://localhost:9091/swagger-ui/index.html](http://localhost:9091/swagger-ui/index.html)
135+
_To try out endpoints, you need to authorize (see compose.yml):_
136+
- Username: `webclient`
137+
- Password: KEYCLOAK_CLIENT_SECRET
138+
- **OpenAPI (JSON):**
139+
[http://localhost:9091/v3/api-docs](http://localhost:9091/v3/api-docs)
140+
- **Metrics endpoint:**
141+
[http://localhost:9091/actuator/prometheus](http://localhost:9091/actuator/prometheus)
142+
143+
---
144+
145+
### GenAI
146+
147+
- **Swagger UI:**
148+
[http://localhost:8000/docs](http://localhost:8000/docs)
149+
- **OpenAPI (JSON):**
150+
[http://localhost:8000/v3/api-docs](http://localhost:8000/v3/api-docs)
151+
- **Metrics endpoint:**
152+
[http://localhost:8000/metrics](http://localhost:8000/metrics)
153+
154+
---
155+
156+
### Realtime Service
157+
158+
- **Swagger UI:**
159+
[http://localhost:9090/swagger/index.html](http://localhost:9090/swagger/index.html)
160+
- **Metrics endpoint:**
161+
[http://localhost:9090/metrics](http://localhost:9090/metrics)
162+
---
163+
164+
### Grafana - Monitoring
165+
166+
- [http://localhost:3001](http://localhost:3001)
167+
Default credentials:
168+
- User: `admin`
169+
- Password: `admin`
170+
171+
---
172+
173+
### Prometheus - Metrics
174+
175+
- [http://localhost:9092](http://localhost:9092)
176+
177+
---
178+
179+
## Overview of README Files
180+
181+
- `./README.md`
182+
Main project documentation (you're reading it!)
183+
184+
- `./README-workflows.md`
185+
Documentation for CI/CD setup and Kubernetes deployment pipeline
186+
187+
- `./client/README.md`
188+
Documentation for the Next.js client service
189+
190+
- `./server/README.md`
191+
Documentation for the Spring Boot server
192+
193+
- `./genai/README.md`
194+
Documentation for the GenAI (Python) service
195+
196+
- `./realtime/README.md`
197+
Documentation for the realtime (Go) service

0 commit comments

Comments
 (0)