Add docs for the new WebConsole project

Karakatiza666 · Karakatiza666 · commit 29b15ef83e2a · 2024-07-11T11:19:31.000+03:00
Signed-off-by: George &lt;bulakh.96@gmail.com&gt;
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -25,14 +25,15 @@ Our known dependencies are:
   - a Java Virtual Machine (at least Java 19)
     - maven
   - graphviz
-- Cloud and UI
+- Cloud
   - Python 3
-  - typescript
   - Redpanda or Kafka
   - Earthly (https://earthly.dev/get-earthly)
+- Web Console
+  - Bun
 
 Additional dependencies are automatically installed by the Rust,
-maven, Python, and typescript build tools.
+maven, Python, and TypeScript build tools.
 
 ## Contribution Flow
 
diff --git a/docs/contributors/dev-flow.md b/docs/contributors/dev-flow.md
@@ -32,7 +32,7 @@ You should now be able to access the Web Console at http://localhost:8080/, conn
 You can also open Web Console in dev mode to be able to see your changes to it live:
 
 ```bash
-cd web-console && yarn install && yarn dev
+cd web-console-sveltekit && bun install && bun run dev
 ```
 
 The Web Console in dev mode is available at http://localhost:3000/
diff --git a/web-console-sveltekit/README.md b/web-console-sveltekit/README.md
@@ -1,38 +1,84 @@
-# create-svelte
+# Feldera Web Console
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+This is the GUI for managing the Feldera deployment.
 
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
+## Setup
 
 ```bash
-# create a new project in the current directory
-npm create svelte@latest
+# Install Node on Ubuntu (optional)
+sudo apt-get update
+sudo apt-get install -y ca-certificates curl gnupg
+sudo mkdir -p /etc/apt/keyrings
+curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg
+NODE_MAJOR=20
+echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list
+sudo apt-get update
+sudo apt-get install nodejs -y
+# If you don't run Ubuntu: [other binary distributions for node.js](https://github.com/nodesource/distributions)
+
+# Install Bun
+sudo apt-get update
+sudo apt-get install -y ca-certificates curl gnupg unzip
+sudo curl -fsSL https://bun.sh/install | bash
 
-# create a new project in my-app
-npm create svelte@latest my-app
+# Install OpenAPI typings generator
+sudo bun install --global @hey-api/openapi-ts
+
+# Clone the repo for the UI
+git clone https://github.com/feldera/feldera.git
+cd dbsp/web-console-sveltekit
 ```
 
-## Developing
+## Development
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+Install dependencies (needs to be done whenever package.json depencies change):
 
 ```bash
-npm run dev
+bun install
+```
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+Start the development server:
+
+```bash
+bun run dev
 ```
 
-## Building
+Build & export static website:
+
+```bash
+bun build
+```
+
+Format the code & linting:
+
+```bash
+bun run format
+bun run lint
+bun run check
+```
+
+## OpenAPI bindings
+
+The bindings for OpenAPI (under $lib/services/manager) are generated using
+[openapi typescript codegen](https://www.npmjs.com/package/@hey-api/openapi-ts).
 
-To create a production version of your app:
+If you change the API, execute the following steps to update the bindings:
 
 ```bash
-npm run build
+bun run build-openapi # If you need to generate a new openapi.json
+bun run generate-openapi
 ```
 
-You can preview the production build with `npm run preview`.
+## File Organization
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+- `src/assets/`: Static assets referenced in UI components, but not served as-is
+- `src/hooks.server.ts`: Point of injection of HTTP request and page load middleware
+- `src/lib/`: Imported modules
+- `src/lib/components/`: Reusable Svelte components
+- `src/lib/compositions/`: Stateful functions that app state management
+- `src/lib/functions/`: Pure functions, or functions that perform side effects through dependency injection
+- `src/lib/functions/common`: Utility functions that are not specific to this project
+- `src/lib/services/`: Functions that describe side effects (persistent storage, networking etc.)
+- `src/lib/types/`: Types used throughout the app
+- `src/routes/`: Web app pages used in file-based routing
+- `static/`: Static assets served as-is
diff --git a/web-console/README.md b/web-console/README.md
@@ -1,11 +1,12 @@
-# DBSP Web UI
+# Feldera Web Console
 
-This is the web UI for the DBSP project.
+This is the GUI for managing the Feldera deployment.
 
 ## Setup
 
 ```bash
-# Install nodejs
+# Install nodejs on Ubuntu
+
 sudo apt-get update
 sudo apt-get install -y ca-certificates curl gnupg
 sudo mkdir -p /etc/apt/keyrings
@@ -14,6 +15,7 @@ NODE_MAJOR=20
 echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list
 sudo apt-get update
 sudo apt-get install nodejs -y
+# If you don't run Ubuntu: [other binary distributions for node.js](https://github.com/nodesource/distributions)
 
 # Install yarn/openapi generator
 sudo npm install --global yarn
@@ -24,8 +26,6 @@ git clone https://github.com/feldera/feldera.git
 cd dbsp/web-console
 ```
 
-If you don't run ubuntu: [other binary distributions for node.js](https://github.com/nodesource/distributions)
-
 ## Development
 
 Install dependencies (needs to be done whenever package.json depencies change):
@@ -87,4 +87,4 @@ regenerating the API bindings.
 - `lib/functions/common`: Utility functions that are not specific to this project
 - `lib/services/`: Functions that describe side effects (persistent storage, networking etc.)
 - `lib/types/`: Types used throughout the app, OpenAPI generated types.
-- `pages/`: Webapp pages used by file-based routing
+- `pages/`: Webapp pages used in file-based routing
