# open5gcube/open5gcube architecture

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

- Interactive diagram: https://gitdiagram.com/open5gcube/open5gcube
- Repository: https://github.com/open5gcube/open5gcube

## Overview

open5Gcube is a mobile-network lab framework; the sampled runtime here is its WebUI for browsing and managing stack deployments and containers, plus monitoring and SIM-card tools. Users navigate to stack, service, or SIM-writer views; frontend stores fetch and update data through the Flask API, which also exposes stack controls and SIM operations. The README documents broader 2G/4G/5G stacks, remote-host orchestration, VoLTE, and SIM provisioning, but their implementations are outside this tree. Some frontend-to-backend links are therefore shown as unverified.

Main entry points: [`modules/base/docker/o5gc/webui/backend/src/api.py`](https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/backend/src/api.py) (Flask API), [`modules/base/docker/o5gc/webui/frontend/src/stores/services.ts`](https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/stores/services.ts) (Service state), [`modules/base/docker/o5gc/webui/frontend/src/router/routes.ts`](https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/router/routes.ts) (Page routing), [`modules/base/docker/o5gc/webui/frontend/src/stores/stacks.ts`](https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/stores/stacks.ts) (Stack state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Web interface"]
  node_routes["Page routing<br/>[routes.ts]"]
  node_stackview["Stack overview<br/>[StackOverview.vue]"]
  node_serviceview["Service views"]
  node_detailview["Service detail<br/>[ServiceDetail.vue]"]
  node_simview["SIM writer view<br/>[SimWriter.vue]"]
  node_servicecomponents["Service panels"]
  node_servicelog["Container logs"]
  node_servicebar["Service status"]
end

subgraph group_state["Frontend state"]
  node_stacksstate["Stack state<br/>[stacks.ts]"]
  node_servicesstate["Service state<br/>[services.ts]"]
  node_hoststate["Host state<br/>[host.ts]"]
  node_eventstate["Event log state<br/>[event-log.ts]"]
  node_settingsstate["User settings<br/>[settings.ts]"]
  node_simstate["SIM writer state<br/>[simWriter.ts]"]
end

subgraph group_server["Web API"]
  node_api["Flask API<br/>[api.py]"]
  node_app["App setup<br/>[app.py]"]
  node_status["Container status<br/>[status.py]"]
end

subgraph group_runtime["Deployment runtime"]
  node_docker["Docker services"]
  node_stackfiles["Stack definitions"]
end

node_user(("Operator"))
node_simhardware["SIM card hardware"]
node_make["Stack command runner"]

node_user -->|"navigates"| node_routes
node_routes -->|"routes to"| node_stackview
node_routes -->|"routes to"| node_serviceview
node_routes -->|"routes to"| node_detailview
node_routes -->|"routes to"| node_simview
node_stackview -.->|"uses"| node_stacksstate
node_serviceview -.->|"uses"| node_servicesstate
node_detailview -.->|"renders"| node_servicecomponents
node_servicecomponents -->|"loads status"| node_servicesstate
node_servicecomponents -->|"renders"| node_servicebar
node_servicelog -->|"loads logs"| node_servicesstate
node_servicelog -->|"renders"| node_servicebar
node_simview -.->|"uses"| node_simstate
node_stacksstate -->|"reads settings"| node_servicesstate
node_stacksstate -->|"records events"| node_eventstate
node_servicesstate -->|"reads settings"| node_settingsstate
node_user -.->|"opens UI"| node_app
node_app -->|"registers"| node_api
node_servicesstate -.->|"requests data"| node_api
node_stacksstate -.->|"requests controls"| node_api
node_simstate -.->|"requests SIM tasks"| node_api
node_hoststate -.->|"requests host data"| node_api
node_api -.->|"queries containers"| node_docker
node_api -.->|"loads status"| node_status
node_api -->|"discovers stacks"| node_stackfiles
node_api -->|"runs stack command"| node_make
node_make -.->|"manages deployment"| node_docker
node_api -.->|"runs SIM tasks"| node_simhardware

click node_routes "https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/router/routes.ts"
click node_stackview "https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/pages/StackOverview.vue"
click node_serviceview "https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/pages/ServiceOverview.vue"
click node_detailview "https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/pages/ServiceDetail.vue"
click node_simview "https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/pages/SimWriter.vue"
click node_servicecomponents "https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/components/ServiceOverviewComponent.vue"
click node_servicelog "https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/components/ServiceLogComponent.vue"
click node_servicebar "https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/components/ServiceTitleBarComponent.vue"
click node_stacksstate "https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/stores/stacks.ts"
click node_servicesstate "https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/stores/services.ts"
click node_hoststate "https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/stores/host.ts"
click node_eventstate "https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/stores/event-log.ts"
click node_settingsstate "https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/stores/settings.ts"
click node_simstate "https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/stores/simWriter.ts"
click node_api "https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/backend/src/api.py"
click node_app "https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/backend/src/app.py"
click node_status "https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/backend/src/status.py"

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_routes,node_stackview,node_serviceview,node_detailview,node_simview,node_servicecomponents,node_servicelog,node_servicebar toneBlue
class node_stacksstate,node_servicesstate,node_hoststate,node_eventstate,node_settingsstate,node_simstate toneAmber
class node_api,node_app,node_status toneMint
class node_docker,node_stackfiles toneRose
class node_user,node_simhardware,node_make toneIndigo
```

## Components

### Web interface

- [Page routing](https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/router/routes.ts): `modules/base/docker/o5gc/webui/frontend/src/router/routes.ts`
- [Stack overview](https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/pages/StackOverview.vue): `modules/base/docker/o5gc/webui/frontend/src/pages/StackOverview.vue`
- [Service views](https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/pages/ServiceOverview.vue): `modules/base/docker/o5gc/webui/frontend/src/pages/ServiceOverview.vue`
- [Service detail](https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/pages/ServiceDetail.vue): `modules/base/docker/o5gc/webui/frontend/src/pages/ServiceDetail.vue`
- [SIM writer view](https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/pages/SimWriter.vue): `modules/base/docker/o5gc/webui/frontend/src/pages/SimWriter.vue`
- [Service panels](https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/components/ServiceOverviewComponent.vue): `modules/base/docker/o5gc/webui/frontend/src/components/ServiceOverviewComponent.vue`
- [Container logs](https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/components/ServiceLogComponent.vue): `modules/base/docker/o5gc/webui/frontend/src/components/ServiceLogComponent.vue`
- [Service status](https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/components/ServiceTitleBarComponent.vue): `modules/base/docker/o5gc/webui/frontend/src/components/ServiceTitleBarComponent.vue`

### Frontend state

- [Stack state](https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/stores/stacks.ts): `modules/base/docker/o5gc/webui/frontend/src/stores/stacks.ts`
- [Service state](https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/stores/services.ts): `modules/base/docker/o5gc/webui/frontend/src/stores/services.ts`
- [Host state](https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/stores/host.ts): `modules/base/docker/o5gc/webui/frontend/src/stores/host.ts`
- [Event log state](https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/stores/event-log.ts): `modules/base/docker/o5gc/webui/frontend/src/stores/event-log.ts`
- [User settings](https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/stores/settings.ts): `modules/base/docker/o5gc/webui/frontend/src/stores/settings.ts`
- [SIM writer state](https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/frontend/src/stores/simWriter.ts): `modules/base/docker/o5gc/webui/frontend/src/stores/simWriter.ts`

### Web API

- [Flask API](https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/backend/src/api.py): `modules/base/docker/o5gc/webui/backend/src/api.py`
- [App setup](https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/backend/src/app.py): `modules/base/docker/o5gc/webui/backend/src/app.py`
- [Container status](https://github.com/open5gcube/open5gcube/blob/main/modules/base/docker/o5gc/webui/backend/src/status.py): `modules/base/docker/o5gc/webui/backend/src/status.py`

### Deployment runtime

- **Docker services**
- **Stack definitions**

### Other components

- **Operator**
- **SIM card hardware**
- **Stack command runner**

## Connections

- Operator → Page routing: navigates (evidence: `modules/base/docker/o5gc/webui/frontend/src/router/routes.ts`)
- Page routing → Stack overview: routes to (evidence: `modules/base/docker/o5gc/webui/frontend/src/router/routes.ts`)
- Page routing → Service views: routes to (evidence: `modules/base/docker/o5gc/webui/frontend/src/router/routes.ts`)
- Page routing → Service detail: routes to (evidence: `modules/base/docker/o5gc/webui/frontend/src/router/routes.ts`)
- Page routing → SIM writer view: routes to (evidence: `modules/base/docker/o5gc/webui/frontend/src/router/routes.ts`)
- Stack overview → Stack state: uses
- Service views → Service state: uses
- Service detail → Service panels: renders
- Service panels → Service state: loads status (evidence: `modules/base/docker/o5gc/webui/frontend/src/components/ServiceOverviewComponent.vue`)
- Service panels → Service status: renders (evidence: `modules/base/docker/o5gc/webui/frontend/src/components/ServiceOverviewComponent.vue`)
- Container logs → Service state: loads logs (evidence: `modules/base/docker/o5gc/webui/frontend/src/components/ServiceLogComponent.vue`)
- Container logs → Service status: renders (evidence: `modules/base/docker/o5gc/webui/frontend/src/components/ServiceLogComponent.vue`)
- SIM writer view → SIM writer state: uses
- Stack state → Service state: reads settings (evidence: `modules/base/docker/o5gc/webui/frontend/src/stores/stacks.ts`)
- Stack state → Event log state: records events (evidence: `modules/base/docker/o5gc/webui/frontend/src/stores/stacks.ts`)
- Service state → User settings: reads settings (evidence: `modules/base/docker/o5gc/webui/frontend/src/stores/services.ts`)
- Operator → App setup: opens UI
- App setup → Flask API: registers (evidence: `modules/base/docker/o5gc/webui/backend/src/app.py`)
- Service state → Flask API: requests data
- Stack state → Flask API: requests controls
- SIM writer state → Flask API: requests SIM tasks
- Host state → Flask API: requests host data
- Flask API → Docker services: queries containers
- Flask API → Container status: loads status
- Flask API → Stack definitions: discovers stacks (evidence: `modules/base/docker/o5gc/webui/backend/src/api.py`)
- Flask API → Stack command runner: runs stack command (evidence: `modules/base/docker/o5gc/webui/backend/src/api.py`)
- Stack command runner → Docker services: manages deployment
- Flask API → SIM card hardware: runs SIM tasks