# canonical/juju-dashboard architecture

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

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

## Overview

Juju Dashboard is a web console for viewing and managing Juju/JAAS controllers, models, and deployments. A user enters through the routed application, authenticates, then inspects controller/model status or performs management tasks such as adding models, changing access, configuring applications, running actions, and upgrading models. The UI’s Juju-facing layers manage controller connections and API operations; deployment charms provide VM and Kubernetes hosting. The README documents these capabilities, while the sampled source directly confirms routing, controller summaries, connection handling, and upgrade dispatch; unsampled feature wiring is therefore shown only at subsystem level.

Main entry points: [`src/components/Routes/Routes.tsx`](https://github.com/canonical/juju-dashboard/blob/main/src/components/Routes/Routes.tsx) (Application routes), [`src/store/middleware/connection/connection-manager.ts`](https://github.com/canonical/juju-dashboard/blob/main/src/store/middleware/connection/connection-manager.ts) (Connection manager), [`src/pages/ControllersIndex/ControllersIndex.tsx`](https://github.com/canonical/juju-dashboard/blob/main/src/pages/ControllersIndex/ControllersIndex.tsx) (Controller overview), [`src/pages/ModelsIndex/ModelsIndex.tsx`](https://github.com/canonical/juju-dashboard/blob/main/src/pages/ModelsIndex/ModelsIndex.tsx) (Models index)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Dashboard UI"]
  node_routes["Application routes<br/>[Routes.tsx]"]
  node_controllers["Controller overview"]
  node_models["Models index<br/>[ModelsIndex.tsx]"]
  node_logs["Audit and action logs<br/>[Logs.tsx]"]
  node_search["Advanced search<br/>[AdvancedSearch.tsx]"]
end

subgraph group_identity["Identity and Connections"]
  node_login["Login UI<br/>[LogIn.tsx]"]
  node_auth["Authentication<br/>[index.ts]"]
  node_connections["Connection manager"]
  node_jujuapi["Juju API<br/>[api.ts]"]
  node_jimm["JIMM APIs<br/>[api.ts]"]
end

subgraph group_management["Model Management"]
  node_details["Model details<br/>[Model.tsx]"]
  node_addmodel["Add model<br/>[AddModel.tsx]"]
  node_permissions["Access management<br/>[Permissions.tsx]"]
  node_config["Application config<br/>[ConfigPanel.tsx]"]
  node_actions["Run actions<br/>[ActionsPanel.tsx]"]
  node_upgrade["Upgrade model"]
end

subgraph group_hosting["Dashboard Hosting"]
  node_vmcharm["VM charm<br/>[charm.py]"]
  node_k8scharm["Kubernetes charm<br/>[charm.py]"]
end

node_operator(("Juju operator"))
node_juju[("Juju controllers")]
node_jaas[("JAAS service")]

node_operator -->|"opens dashboard"| node_routes
node_routes -->|"routes unauthenticated"| node_login
node_routes -->|"routes authenticated"| node_controllers
node_routes -->|"routes authenticated"| node_models
node_routes -->|"routes model detail"| node_details
node_routes -->|"routes add model"| node_addmodel
node_routes -->|"routes JAAS access"| node_permissions
node_routes -->|"routes JAAS logs"| node_logs
node_routes -->|"routes JAAS search"| node_search
node_login -->|"authenticates"| node_auth
node_auth -->|"provides credentials"| node_connections
node_connections -->|"controller login"| node_jujuapi
node_connections -.->|"connects JIMM"| node_jimm
node_jujuapi -->|"calls controller API"| node_juju
node_jimm -.->|"calls service API"| node_jaas
node_controllers -->|"displays status"| node_juju
node_models -->|"lists models"| node_juju
node_details -->|"reads deployment"| node_juju
node_addmodel -->|"creates model"| node_juju
node_permissions -.->|"manages access"| node_jaas
node_config -->|"updates config"| node_juju
node_actions -->|"runs actions"| node_juju
node_upgrade -->|"dispatches upgrade"| node_juju
node_logs -->|"reads logs"| node_juju
node_search -.->|"searches environment"| node_jaas
node_operator -->|"deploys dashboard"| node_vmcharm
node_operator -->|"deploys dashboard"| node_k8scharm

click node_routes "https://github.com/canonical/juju-dashboard/blob/main/src/components/Routes/Routes.tsx"
click node_login "https://github.com/canonical/juju-dashboard/blob/main/src/components/LogIn/LogIn.tsx"
click node_auth "https://github.com/canonical/juju-dashboard/blob/main/src/auth/index.ts"
click node_connections "https://github.com/canonical/juju-dashboard/blob/main/src/store/middleware/connection/connection-manager.ts"
click node_jujuapi "https://github.com/canonical/juju-dashboard/blob/main/src/juju/api.ts"
click node_jimm "https://github.com/canonical/juju-dashboard/blob/main/src/juju/jimm/api.ts"
click node_controllers "https://github.com/canonical/juju-dashboard/blob/main/src/pages/ControllersIndex/ControllersIndex.tsx"
click node_models "https://github.com/canonical/juju-dashboard/blob/main/src/pages/ModelsIndex/ModelsIndex.tsx"
click node_details "https://github.com/canonical/juju-dashboard/blob/main/src/pages/EntityDetails/Model/Model.tsx"
click node_addmodel "https://github.com/canonical/juju-dashboard/blob/main/src/pages/AddModel/AddModel.tsx"
click node_permissions "https://github.com/canonical/juju-dashboard/blob/main/src/pages/Permissions/Permissions.tsx"
click node_config "https://github.com/canonical/juju-dashboard/blob/main/src/panels/ConfigPanel/ConfigPanel.tsx"
click node_actions "https://github.com/canonical/juju-dashboard/blob/main/src/panels/ActionsPanel/ActionsPanel.tsx"
click node_upgrade "https://github.com/canonical/juju-dashboard/blob/main/src/panels/UpgradeModelPanel/UpgradeModelController/UpgradeModelController.tsx"
click node_logs "https://github.com/canonical/juju-dashboard/blob/main/src/pages/Logs/Logs.tsx"
click node_search "https://github.com/canonical/juju-dashboard/blob/main/src/pages/AdvancedSearch/AdvancedSearch.tsx"
click node_vmcharm "https://github.com/canonical/juju-dashboard/blob/main/charms/machine-charm/src/charm.py"
click node_k8scharm "https://github.com/canonical/juju-dashboard/blob/main/charms/k8s-charm/src/charm.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_controllers,node_models,node_logs,node_search toneBlue
class node_login,node_auth,node_connections,node_jujuapi,node_jimm,node_juju,node_jaas toneAmber
class node_details,node_addmodel,node_permissions,node_config,node_actions,node_upgrade toneMint
class node_vmcharm,node_k8scharm toneRose
class node_operator toneIndigo
```

## Components

### Dashboard UI

- [Application routes](https://github.com/canonical/juju-dashboard/blob/main/src/components/Routes/Routes.tsx): `src/components/Routes/Routes.tsx`
- [Controller overview](https://github.com/canonical/juju-dashboard/blob/main/src/pages/ControllersIndex/ControllersIndex.tsx): `src/pages/ControllersIndex/ControllersIndex.tsx`
- [Models index](https://github.com/canonical/juju-dashboard/blob/main/src/pages/ModelsIndex/ModelsIndex.tsx): `src/pages/ModelsIndex/ModelsIndex.tsx`
- [Audit and action logs](https://github.com/canonical/juju-dashboard/blob/main/src/pages/Logs/Logs.tsx): `src/pages/Logs/Logs.tsx`
- [Advanced search](https://github.com/canonical/juju-dashboard/blob/main/src/pages/AdvancedSearch/AdvancedSearch.tsx): `src/pages/AdvancedSearch/AdvancedSearch.tsx`

### Identity and Connections

- [Login UI](https://github.com/canonical/juju-dashboard/blob/main/src/components/LogIn/LogIn.tsx): `src/components/LogIn/LogIn.tsx`
- [Authentication](https://github.com/canonical/juju-dashboard/blob/main/src/auth/index.ts): `src/auth/index.ts`
- [Connection manager](https://github.com/canonical/juju-dashboard/blob/main/src/store/middleware/connection/connection-manager.ts): `src/store/middleware/connection/connection-manager.ts`
- [Juju API](https://github.com/canonical/juju-dashboard/blob/main/src/juju/api.ts): `src/juju/api.ts`
- [JIMM APIs](https://github.com/canonical/juju-dashboard/blob/main/src/juju/jimm/api.ts): `src/juju/jimm/api.ts`

### Model Management

- [Model details](https://github.com/canonical/juju-dashboard/blob/main/src/pages/EntityDetails/Model/Model.tsx): `src/pages/EntityDetails/Model/Model.tsx`
- [Add model](https://github.com/canonical/juju-dashboard/blob/main/src/pages/AddModel/AddModel.tsx): `src/pages/AddModel/AddModel.tsx`
- [Access management](https://github.com/canonical/juju-dashboard/blob/main/src/pages/Permissions/Permissions.tsx): `src/pages/Permissions/Permissions.tsx`
- [Application config](https://github.com/canonical/juju-dashboard/blob/main/src/panels/ConfigPanel/ConfigPanel.tsx): `src/panels/ConfigPanel/ConfigPanel.tsx`
- [Run actions](https://github.com/canonical/juju-dashboard/blob/main/src/panels/ActionsPanel/ActionsPanel.tsx): `src/panels/ActionsPanel/ActionsPanel.tsx`
- [Upgrade model](https://github.com/canonical/juju-dashboard/blob/main/src/panels/UpgradeModelPanel/UpgradeModelController/UpgradeModelController.tsx): `src/panels/UpgradeModelPanel/UpgradeModelController/UpgradeModelController.tsx`

### Dashboard Hosting

- [VM charm](https://github.com/canonical/juju-dashboard/blob/main/charms/machine-charm/src/charm.py): `charms/machine-charm/src/charm.py`
- [Kubernetes charm](https://github.com/canonical/juju-dashboard/blob/main/charms/k8s-charm/src/charm.py): `charms/k8s-charm/src/charm.py`

### Other components

- **Juju operator**
- **Juju controllers**
- **JAAS service**

## Connections

- Juju operator → Application routes: opens dashboard
- Application routes → Login UI: routes unauthenticated
- Application routes → Controller overview: routes authenticated
- Application routes → Models index: routes authenticated
- Application routes → Model details: routes model detail
- Application routes → Add model: routes add model
- Application routes → Access management: routes JAAS access
- Application routes → Audit and action logs: routes JAAS logs
- Application routes → Advanced search: routes JAAS search
- Login UI → Authentication: authenticates
- Authentication → Connection manager: provides credentials
- Connection manager → Juju API: controller login
- Connection manager → JIMM APIs: connects JIMM
- Juju API → Juju controllers: calls controller API
- JIMM APIs → JAAS service: calls service API
- Controller overview → Juju controllers: displays status
- Models index → Juju controllers: lists models
- Model details → Juju controllers: reads deployment
- Add model → Juju controllers: creates model
- Access management → JAAS service: manages access
- Application config → Juju controllers: updates config
- Run actions → Juju controllers: runs actions
- Upgrade model → Juju controllers: dispatches upgrade
- Audit and action logs → Juju controllers: reads logs
- Advanced search → JAAS service: searches environment
- Juju operator → VM charm: deploys dashboard
- Juju operator → Kubernetes charm: deploys dashboard