# gardener/dashboard architecture

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

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

## Overview

#### Purpose and topology
Gardener Dashboard is a Kubernetes/Gardener management dashboard: a browser SPA backed by a Node.js API that reads and mutates Gardener resources. It is a Yarn monorepo with deployable frontend/backend, shared Kubernetes and operational packages, and Helm charts. Primary runtime entry points are `frontend/src/main.js`, `backend/server.js`, and `backend/lib/server.js`.

#### Browser application
The Vue/Vuetify SPA owns login, project selection, cluster (“Shoot”) and Seed administration, credentials, terminals, quotas, and member workflows. Routes render views; composables and stores encapsulate UI state and API operations.
- `frontend/src/main.js`
- `frontend/src/router/index.js`
- `frontend/src/store/index.js`

UI-to-server traffic is centralized through the API composable; WebSocket/socket state supports live backend-dispatched resource updates.
- `frontend/src/composables/useApi/index.js`
- `frontend/src/composables/useSocketEventHandler.js`
- `frontend/src/store/socket/index.js`

#### Backend HTTP, authentication, and API boundary
The backend is a Node.js server/application with middleware, authentication/authorization, OpenAPI exposure, health checks, REST route registration, and Socket.IO-style IO dispatch. It is the trust boundary between browser sessions and Kubernetes/Gardener APIs.
- `backend/lib/app.js`
- `backend/lib/server.js`
- `backend/lib/routes/index.js`

Routes map dashboard resources—projects, shoots, seeds, credentials, terminals, tickets—to service-layer operations, rather than exposing Kubernetes access directly to the frontend.
- `backend/lib/routes/shoots.js`
- `backend/lib/routes/projects.js`
- `backend/lib/routes/terminals.js`

#### Gardener/Kubernetes resource services
Backend services implement domain operations and transform/authorize access to Gardener custom resources and Kubernetes resources. They cover Shoots, Seeds, projects/members, quotas, cloud profiles and credentials, managed seeds, and terminals.
- `backend/lib/services/shoots.js`
- `backend/lib/services/projects.js`
- `backend/lib/services/cloudProviderCredentials.js`

The shared Kubernetes client provides HTTP access, resource-group definitions, errors, pagination, and informer primitives. Kubeconfig/client configuration determines the Kubernetes API connection and authentication behavior.
- `packages/kube-client/lib/Client.js`
- `packages/kube-client/lib/resources/GardenerCore.js`
- `packages/kube-config/lib/ClientConfig.js`

#### Live state, cache, and event propagation
The backend watches selected Kubernetes resources, maintains caches, and propagates changes to connected UI clients. This separates expensive API watches/listing from browser requests and supplies real-time project, shoot, seed, and managed-seed updates.
- `backend/lib/watches/index.js`
- `backend/lib/cache/index.js`
- `backend/lib/io/dispatcher.js`

Underlying cache/informer machinery supports list/watch reflection, local stores, and backoff behavior.
- `packages/kube-client/lib/cache/Informer.js`
- `packages/kube-client/lib/cache/Reflector.js`

#### External integrations and operations
The backend integrates with OIDC/JWT security, Kubernetes API servers, GitHub (ticket synchronization and verified webhooks), and Prometheus-compatible metrics. Request/session pooling and logging are shared package concerns.
- `backend/lib/security/jose.js`
- `backend/lib/github/SyncManager.js`
- `packages/monitor/lib/metrics.js`

#### Deployment model
Docker packages the application; Helm deploys dashboard runtime resources (Deployment, Service, Ingress, config/assets, OIDC/GitHub/kubeconfig/session secrets) and application RBAC. A separate identity chart deploys supporting identity infrastructure.
- `Dockerfile`
- `charts/gardener-dashboard/charts/runtime/templates/dashboard/deployment.yaml`
- `charts/gardener-dashboard/charts/application/templates/dashboard/clusterrole.yaml`

Main entry points: [`backend/lib/app.js`](https://github.com/gardener/dashboard/blob/master/backend/lib/app.js) (HTTP application), [`frontend/src/main.js`](https://github.com/gardener/dashboard/blob/master/frontend/src/main.js) (Vue dashboard), [`packages/kube-client/lib/Client.js`](https://github.com/gardener/dashboard/blob/master/packages/kube-client/lib/Client.js) (Kubernetes client), [`backend/lib/watches/index.js`](https://github.com/gardener/dashboard/blob/master/backend/lib/watches/index.js) (Watch cache)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browser["Browser SPA"]
  node_spa["Vue dashboard<br/>SPA entry<br/>[main.js]"]
  node_router["Routes and views<br/>Vue router<br/>[index.js]"]
  node_ui_store["UI state<br/>Vue store<br/>[index.js]"]
  node_api_composable["API client<br/>composable<br/>[index.js]"]
  node_socket_state["Live socket state<br/>socket handler"]
end

subgraph group_backend["Backend API"]
  node_app["HTTP application<br/>Node application<br/>[app.js]"]
  node_routes["REST routes<br/>route registry<br/>[index.js]"]
  node_services["Gardener services<br/>domain services<br/>[shoots.js]"]
  node_watch_cache[("Watch cache<br/>resource watches<br/>[index.js]")]
  node_io_dispatcher["Event dispatcher<br/>socket dispatch<br/>[dispatcher.js]"]
  node_server["Server runtime<br/>Node server<br/>[server.js]"]
end

subgraph group_kubernetes["Gardener / Kubernetes"]
  node_kube_config["Kubernetes client config<br/>client configuration<br/>[ClientConfig.js]"]
  node_kube_client["Kubernetes client<br/>shared client<br/>[Client.js]"]
  node_informer["Informer / reflector<br/>watch machinery<br/>[Informer.js]"]
  node_gardener_api[("Gardener Kubernetes APIs<br/>external API<br/>[GardenerCore.js]")]
end

subgraph group_integrations["External integrations"]
  node_oidc["OIDC / JWT<br/>identity integration<br/>[jose.js]"]
  node_github["GitHub tickets<br/>GitHub integration<br/>[SyncManager.js]"]
  node_metrics["Prometheus metrics<br/>monitoring<br/>[metrics.js]"]
end

subgraph group_deployment["Deployment"]
  node_container["Container image<br/>Docker build"]
  node_runtime_chart{{"Runtime Helm chart<br/>Helm deployment<br/>[deployment.yaml]"}}
  node_rbac["Application RBAC<br/>Helm RBAC<br/>[clusterrole.yaml]"]
end

node_spa -->|"renders"| node_router
node_spa -->|"uses"| node_ui_store
node_spa -->|"calls"| node_api_composable
node_api_composable -->|"HTTPS API"| node_app
node_spa -->|"receives live state"| node_socket_state
node_socket_state -->|"socket events"| node_io_dispatcher
node_server -->|"hosts"| node_app
node_app -->|"authenticates with"| node_oidc
node_app -->|"registers"| node_routes
node_routes -->|"invokes"| node_services
node_services -->|"reads and mutates"| node_kube_client
node_kube_config -->|"configures"| node_kube_client
node_kube_client -->|"Kubernetes API"| node_gardener_api
node_watch_cache -->|"uses"| node_informer
node_informer -->|"list / watch"| node_kube_client
node_watch_cache -->|"resource changes"| node_io_dispatcher
node_app -->|"ticket sync / webhooks"| node_github
node_app -->|"emits"| node_metrics
node_container -->|"packages"| node_server
node_runtime_chart -->|"deploys"| node_container
node_rbac -.->|"authorizes access"| node_gardener_api

click node_spa "https://github.com/gardener/dashboard/blob/master/frontend/src/main.js"
click node_router "https://github.com/gardener/dashboard/blob/master/frontend/src/router/index.js"
click node_ui_store "https://github.com/gardener/dashboard/blob/master/frontend/src/store/index.js"
click node_api_composable "https://github.com/gardener/dashboard/blob/master/frontend/src/composables/useApi/index.js"
click node_socket_state "https://github.com/gardener/dashboard/blob/master/frontend/src/composables/useSocketEventHandler.js"
click node_app "https://github.com/gardener/dashboard/blob/master/backend/lib/app.js"
click node_routes "https://github.com/gardener/dashboard/blob/master/backend/lib/routes/index.js"
click node_services "https://github.com/gardener/dashboard/blob/master/backend/lib/services/shoots.js"
click node_watch_cache "https://github.com/gardener/dashboard/blob/master/backend/lib/watches/index.js"
click node_io_dispatcher "https://github.com/gardener/dashboard/blob/master/backend/lib/io/dispatcher.js"
click node_server "https://github.com/gardener/dashboard/blob/master/backend/lib/server.js"
click node_kube_config "https://github.com/gardener/dashboard/blob/master/packages/kube-config/lib/ClientConfig.js"
click node_kube_client "https://github.com/gardener/dashboard/blob/master/packages/kube-client/lib/Client.js"
click node_informer "https://github.com/gardener/dashboard/blob/master/packages/kube-client/lib/cache/Informer.js"
click node_gardener_api "https://github.com/gardener/dashboard/blob/master/packages/kube-client/lib/resources/GardenerCore.js"
click node_oidc "https://github.com/gardener/dashboard/blob/master/backend/lib/security/jose.js"
click node_github "https://github.com/gardener/dashboard/blob/master/backend/lib/github/SyncManager.js"
click node_metrics "https://github.com/gardener/dashboard/blob/master/packages/monitor/lib/metrics.js"
click node_container "https://github.com/gardener/dashboard/blob/master/Dockerfile"
click node_runtime_chart "https://github.com/gardener/dashboard/blob/master/charts/gardener-dashboard/charts/runtime/templates/dashboard/deployment.yaml"
click node_rbac "https://github.com/gardener/dashboard/blob/master/charts/gardener-dashboard/charts/application/templates/dashboard/clusterrole.yaml"

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_spa,node_router,node_ui_store,node_api_composable,node_socket_state toneBlue
class node_app,node_routes,node_services,node_watch_cache,node_io_dispatcher,node_server toneAmber
class node_kube_config,node_kube_client,node_informer,node_gardener_api toneMint
class node_oidc,node_github,node_metrics toneRose
class node_container,node_runtime_chart,node_rbac toneIndigo
```

## Components

### Browser SPA

- [Vue dashboard](https://github.com/gardener/dashboard/blob/master/frontend/src/main.js): SPA entry · Management UI for Gardener resources. · `frontend/src/main.js`
- [Routes and views](https://github.com/gardener/dashboard/blob/master/frontend/src/router/index.js): Vue router · `frontend/src/router/index.js`
- [UI state](https://github.com/gardener/dashboard/blob/master/frontend/src/store/index.js): Vue store · `frontend/src/store/index.js`
- [API client](https://github.com/gardener/dashboard/blob/master/frontend/src/composables/useApi/index.js): composable · Centralizes browser API calls. · `frontend/src/composables/useApi/index.js`
- [Live socket state](https://github.com/gardener/dashboard/blob/master/frontend/src/composables/useSocketEventHandler.js): socket handler · `frontend/src/composables/useSocketEventHandler.js`

### Backend API

- [HTTP application](https://github.com/gardener/dashboard/blob/master/backend/lib/app.js): Node application · Middleware, authentication, OpenAPI, health, and IO boundary. · `backend/lib/app.js`
- [REST routes](https://github.com/gardener/dashboard/blob/master/backend/lib/routes/index.js): route registry · Maps dashboard resources to domain services. · `backend/lib/routes/index.js`
- [Gardener services](https://github.com/gardener/dashboard/blob/master/backend/lib/services/shoots.js): domain services · Authorizes and operates on shoots, projects, and credentials. · `backend/lib/services/shoots.js`
- [Watch cache](https://github.com/gardener/dashboard/blob/master/backend/lib/watches/index.js): resource watches · Maintains cached Gardener resource state. · `backend/lib/watches/index.js`
- [Event dispatcher](https://github.com/gardener/dashboard/blob/master/backend/lib/io/dispatcher.js): socket dispatch · Publishes resource changes to connected clients. · `backend/lib/io/dispatcher.js`
- [Server runtime](https://github.com/gardener/dashboard/blob/master/backend/lib/server.js): Node server · `backend/lib/server.js`

### Gardener / Kubernetes

- [Kubernetes client config](https://github.com/gardener/dashboard/blob/master/packages/kube-config/lib/ClientConfig.js): client configuration · Controls API endpoint and authentication. · `packages/kube-config/lib/ClientConfig.js`
- [Kubernetes client](https://github.com/gardener/dashboard/blob/master/packages/kube-client/lib/Client.js): shared client · HTTP access and Gardener resource definitions. · `packages/kube-client/lib/Client.js`
- [Informer / reflector](https://github.com/gardener/dashboard/blob/master/packages/kube-client/lib/cache/Informer.js): watch machinery · List-watch reflection, local stores, and backoff. · `packages/kube-client/lib/cache/Informer.js`
- [Gardener Kubernetes APIs](https://github.com/gardener/dashboard/blob/master/packages/kube-client/lib/resources/GardenerCore.js): external API · Gardener custom resources and Kubernetes resources. · `packages/kube-client/lib/resources/GardenerCore.js`

### External integrations

- [OIDC / JWT](https://github.com/gardener/dashboard/blob/master/backend/lib/security/jose.js): identity integration · `backend/lib/security/jose.js`
- [GitHub tickets](https://github.com/gardener/dashboard/blob/master/backend/lib/github/SyncManager.js): GitHub integration · Synchronizes tickets and verifies webhooks. · `backend/lib/github/SyncManager.js`
- [Prometheus metrics](https://github.com/gardener/dashboard/blob/master/packages/monitor/lib/metrics.js): monitoring · `packages/monitor/lib/metrics.js`

### Deployment

- [Container image](https://github.com/gardener/dashboard/blob/master/Dockerfile): Docker build · `Dockerfile`
- [Runtime Helm chart](https://github.com/gardener/dashboard/blob/master/charts/gardener-dashboard/charts/runtime/templates/dashboard/deployment.yaml): Helm deployment · Deploys dashboard runtime, secrets, and ingress resources. · `charts/gardener-dashboard/charts/runtime/templates/dashboard/deployment.yaml`
- [Application RBAC](https://github.com/gardener/dashboard/blob/master/charts/gardener-dashboard/charts/application/templates/dashboard/clusterrole.yaml): Helm RBAC · Grants dashboard Kubernetes permissions. · `charts/gardener-dashboard/charts/application/templates/dashboard/clusterrole.yaml`

## Connections

- Vue dashboard → Routes and views: renders
- Vue dashboard → UI state: uses
- Vue dashboard → API client: calls
- API client → HTTP application: HTTPS API
- Vue dashboard → Live socket state: receives live state
- Live socket state → Event dispatcher: socket events
- Server runtime → HTTP application: hosts
- HTTP application → OIDC / JWT: authenticates with
- HTTP application → REST routes: registers
- REST routes → Gardener services: invokes
- Gardener services → Kubernetes client: reads and mutates
- Kubernetes client config → Kubernetes client: configures
- Kubernetes client → Gardener Kubernetes APIs: Kubernetes API
- Watch cache → Informer / reflector: uses
- Informer / reflector → Kubernetes client: list / watch
- Watch cache → Event dispatcher: resource changes
- HTTP application → GitHub tickets: ticket sync / webhooks
- HTTP application → Prometheus metrics: emits
- Container image → Server runtime: packages
- Runtime Helm chart → Container image: deploys
- Application RBAC → Gardener Kubernetes APIs: authorizes access