# charlesterrenal/orbit-dashboard architecture

> Architecture diagram of the GitHub repository charlesterrenal/orbit-dashboard, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/charlesterrenal/orbit-dashboard
- Repository: https://github.com/charlesterrenal/orbit-dashboard

## Overview

Orbit is a homelab dashboard whose main workflow loads a service directory, polls monitoring and host/update data, normalizes those responses, and renders directory and health views. The browser’s API layer requests same-origin endpoints served through the documented nginx allowlist. The graph includes the documented Proxmox, Uptime Kuma, and update-status integrations; unsampled deployment wiring is represented only where the README documents it.

Main entry points: [`src/App.jsx`](https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/App.jsx) (App and poll orchestration), [`nginx.conf.template`](https://github.com/charlesterrenal/orbit-dashboard/blob/main/nginx.conf.template) (Nginx API gateway), [`src/lib/status.js`](https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/lib/status.js) (Status parsing and summaries), [`src/lib/api.js`](https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/lib/api.js) (HTTP API client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Dashboard UI"]
  node_app["App and poll orchestration<br/>[App.jsx]"]
  node_directory["Service directory<br/>[Directory.jsx]"]
  node_monitoring["Monitoring view<br/>[Monitoring.jsx]"]
  node_strip["Health rail<br/>[Strip.jsx]"]
  node_service_row["Service row<br/>[ServiceRow.jsx]"]
  node_beats["Check history bars<br/>[Beats.jsx]"]
  node_footer["Directory footer<br/>[Footer.jsx]"]
end

subgraph group_data["Data and polling"]
  node_api["HTTP API client<br/>[api.js]"]
  node_config_parser["Service config parser<br/>[config.js]"]
  node_status["Status parsing and summaries<br/>[status.js]"]
  node_poll_hook["Polling state hook<br/>[usePoll.js]"]
  node_poller["Poll scheduler<br/>[poller.js]"]
end

subgraph group_gateway["Gateway and config"]
  node_gateway["Nginx API gateway"]
end

node_visitor(("Dashboard visitor"))
node_services_json["Services configuration"]
node_kuma["Uptime Kuma"]
node_proxmox["Proxmox"]
node_updates["Update status source"]

node_visitor -->|"opens dashboard"| node_app
node_app -->|"loads and polls"| node_api
node_app -->|"renders directory"| node_directory
node_app -->|"renders monitoring"| node_monitoring
node_app -->|"renders health rail"| node_strip
node_app -->|"renders footer"| node_footer
node_app -->|"starts polls"| node_poll_hook
node_poll_hook -->|"creates scheduler"| node_poller
node_api -->|"parses services"| node_config_parser
node_api -->|"parses responses"| node_status
node_api -->|"requests same-origin paths"| node_gateway
node_gateway -->|"proxies allowlisted paths"| node_kuma
node_gateway -->|"proxies allowlisted paths"| node_proxmox
node_gateway -->|"serves update status"| node_updates
node_gateway -->|"serves static config"| node_services_json
node_directory -->|"matches monitor status"| node_status
node_directory -->|"renders rows"| node_service_row
node_monitoring -->|"summarizes live data"| node_status
node_monitoring -->|"renders monitor rows"| node_service_row
node_strip -->|"summarizes health"| node_status
node_service_row -->|"renders check history"| node_beats
node_footer -->|"formats status data"| node_status

click node_app "https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/App.jsx"
click node_directory "https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/components/Directory.jsx"
click node_monitoring "https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/components/Monitoring.jsx"
click node_strip "https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/components/Strip.jsx"
click node_service_row "https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/components/ServiceRow.jsx"
click node_beats "https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/components/Beats.jsx"
click node_footer "https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/components/Footer.jsx"
click node_api "https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/lib/api.js"
click node_config_parser "https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/lib/config.js"
click node_status "https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/lib/status.js"
click node_poll_hook "https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/lib/usePoll.js"
click node_poller "https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/lib/poller.js"
click node_gateway "https://github.com/charlesterrenal/orbit-dashboard/blob/main/nginx.conf.template"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_directory,node_monitoring,node_strip,node_service_row,node_beats,node_footer toneBlue
class node_api,node_config_parser,node_status,node_poll_hook,node_poller toneAmber
class node_gateway toneMint
class node_visitor,node_services_json,node_kuma,node_proxmox,node_updates toneIndigo
```

## Components

### Dashboard UI

- [App and poll orchestration](https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/App.jsx): `src/App.jsx`
- [Service directory](https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/components/Directory.jsx): `src/components/Directory.jsx`
- [Monitoring view](https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/components/Monitoring.jsx): `src/components/Monitoring.jsx`
- [Health rail](https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/components/Strip.jsx): `src/components/Strip.jsx`
- [Service row](https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/components/ServiceRow.jsx): `src/components/ServiceRow.jsx`
- [Check history bars](https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/components/Beats.jsx): `src/components/Beats.jsx`
- [Directory footer](https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`

### Data and polling

- [HTTP API client](https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/lib/api.js): `src/lib/api.js`
- [Service config parser](https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/lib/config.js): `src/lib/config.js`
- [Status parsing and summaries](https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/lib/status.js): `src/lib/status.js`
- [Polling state hook](https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/lib/usePoll.js): `src/lib/usePoll.js`
- [Poll scheduler](https://github.com/charlesterrenal/orbit-dashboard/blob/main/src/lib/poller.js): `src/lib/poller.js`

### Gateway and config

- [Nginx API gateway](https://github.com/charlesterrenal/orbit-dashboard/blob/main/nginx.conf.template): `nginx.conf.template`

### Other components

- **Dashboard visitor**
- **Services configuration**
- **Uptime Kuma**
- **Proxmox**
- **Update status source**

## Connections

- Dashboard visitor → App and poll orchestration: opens dashboard (evidence: `README.md`)
- App and poll orchestration → HTTP API client: loads and polls (evidence: `src/App.jsx`)
- App and poll orchestration → Service directory: renders directory (evidence: `src/App.jsx`)
- App and poll orchestration → Monitoring view: renders monitoring (evidence: `src/App.jsx`)
- App and poll orchestration → Health rail: renders health rail (evidence: `src/App.jsx`)
- App and poll orchestration → Directory footer: renders footer (evidence: `src/App.jsx`)
- App and poll orchestration → Polling state hook: starts polls (evidence: `src/App.jsx`)
- Polling state hook → Poll scheduler: creates scheduler (evidence: `src/lib/usePoll.js`)
- HTTP API client → Service config parser: parses services (evidence: `src/lib/api.js`)
- HTTP API client → Status parsing and summaries: parses responses (evidence: `src/lib/api.js`)
- HTTP API client → Nginx API gateway: requests same-origin paths (evidence: `src/lib/api.js`)
- Nginx API gateway → Uptime Kuma: proxies allowlisted paths (evidence: `README.md`)
- Nginx API gateway → Proxmox: proxies allowlisted paths (evidence: `README.md`)
- Nginx API gateway → Update status source: serves update status (evidence: `README.md`)
- Nginx API gateway → Services configuration: serves static config (evidence: `README.md`)
- Service directory → Status parsing and summaries: matches monitor status (evidence: `src/components/Directory.jsx`)
- Service directory → Service row: renders rows (evidence: `src/components/Directory.jsx`)
- Monitoring view → Status parsing and summaries: summarizes live data (evidence: `src/components/Monitoring.jsx`)
- Monitoring view → Service row: renders monitor rows (evidence: `src/components/Monitoring.jsx`)
- Health rail → Status parsing and summaries: summarizes health (evidence: `src/components/Strip.jsx`)
- Service row → Check history bars: renders check history (evidence: `src/components/ServiceRow.jsx`)
- Directory footer → Status parsing and summaries: formats status data (evidence: `src/components/Footer.jsx`)