# zsvirt/zsvirt-ui architecture

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

- Interactive diagram: https://gitdiagram.com/zsvirt/zsvirt-ui
- Repository: https://github.com/zsvirt/zsvirt-ui

## Overview

ZSvirt UI is a web management workspace: users work in a unified shell, enter domain-focused applications to manage infrastructure or platform operations, and the frontend communicates with a NestJS BFF backed by ZSvirt management services. The README documents broad product capabilities and the BFF’s GraphQL role; sampled query services show resource-specific backend logic, but do not establish resolver-level wiring. The tree does not expose the shell’s source files, so its node has no path.

Main entry points: [`zsphere/bff`](https://github.com/zsvirt/zsvirt-ui/tree/main/zsphere/bff) (GraphQL BFF), [`zsphere/apps`](https://github.com/zsvirt/zsvirt-ui/tree/main/zsphere/apps) (Domain applications), [`zsphere/apps/administration/src/bootstrap.tsx`](https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/apps/administration/src/bootstrap.tsx) (Administration app), [`zsphere/apps/resource/src/pages/primary-storage/create/hooks/usePrimaryStorageState.ts`](https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/apps/resource/src/pages/primary-storage/create/hooks/usePrimaryStorageState.ts) (Storage workflows)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Workspace UI"]
  node_shell["Unified shell"]
  node_domain_apps["Domain applications"]
  node_admin_app["Administration app<br/>[bootstrap.tsx]"]
end

subgraph group_infra["Infrastructure"]
  node_resource_ui["Storage workflows"]
  node_compute["Compute inventory"]
  node_hosts["Host inventory"]
  node_storage["Storage inventory"]
  node_network["Network inventory<br/>[query.service.ts]"]
  node_images["Image management"]
  node_tree["Resource trees"]
end

subgraph group_protection["Reliability &amp; Protection"]
  node_migration["Migration workflows"]
  node_reliability["Reliability workflows"]
  node_backup["Backup &amp; recovery"]
end

subgraph group_admin["Operations &amp; Administration"]
  node_dashboard["Operations dashboard"]
  node_capacity["Capacity analysis"]
  node_access["Identity &amp; access<br/>[index.tsx]"]
  node_access_rules["Access control<br/>[index.tsx]"]
end

subgraph group_backend["Backend"]
  node_bff["GraphQL BFF"]
end

node_user(("Signed-in user"))
node_management{{"ZSvirt management services"}}

node_user -->|"uses"| node_shell
node_shell -->|"hosts"| node_domain_apps
node_domain_apps -->|"includes"| node_admin_app
node_domain_apps -->|"includes"| node_resource_ui
node_domain_apps -->|"provides"| node_dashboard
node_domain_apps -->|"provides"| node_migration
node_domain_apps -->|"provides"| node_reliability
node_admin_app -->|"supports"| node_access
node_admin_app -->|"supports"| node_access_rules
node_resource_ui -->|"queries"| node_bff
node_admin_app -->|"queries"| node_bff
node_bff -->|"calls"| node_management
node_bff -->|"queries"| node_compute
node_bff -->|"queries"| node_hosts
node_bff -->|"queries"| node_storage
node_bff -->|"queries"| node_network
node_bff -->|"queries"| node_images
node_bff -->|"queries"| node_tree
node_bff -->|"queries"| node_backup
node_bff -->|"queries"| node_capacity

click node_domain_apps "https://github.com/zsvirt/zsvirt-ui/tree/main/zsphere/apps"
click node_admin_app "https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/apps/administration/src/bootstrap.tsx"
click node_resource_ui "https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/apps/resource/src/pages/primary-storage/create/hooks/usePrimaryStorageState.ts"
click node_compute "https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/bff/src/zsphere-resource/vm-instance/vm-instance-query/vm-instance-query.service.ts"
click node_hosts "https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/bff/src/hardware-resource/host/query/host-query.service.ts"
click node_storage "https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/bff/src/hardware-resource/primary-storage/primary-storage-query/primary-storage-query.service.ts"
click node_network "https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/bff/src/network-resource/l3-network/query/query.service.ts"
click node_images "https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/bff/src/zsphere-resource/image/image-query/image-query.service.ts"
click node_tree "https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/bff/src/zsphere-resource/special-tree/query/query-special-tree.service.ts"
click node_backup "https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/bff/src/zsphere-data-protection/backup-data/backup-data-query/backup-data-query.service.ts"
click node_capacity "https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/bff/src/maintenance/capacity-calculation/query/capacity-calculation-query.service.ts"
click node_access "https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/apps/administration/src/pages/account-information/index.tsx"
click node_access_rules "https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/apps/administration/src/pages/access-control-rule/index.tsx"
click node_bff "https://github.com/zsvirt/zsvirt-ui/tree/main/zsphere/bff"

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_shell,node_domain_apps,node_admin_app,node_user toneBlue
class node_resource_ui,node_compute,node_hosts,node_storage,node_network,node_images,node_tree toneAmber
class node_migration,node_reliability,node_backup toneMint
class node_dashboard,node_capacity,node_access,node_access_rules toneRose
class node_bff,node_management toneIndigo
```

## Components

### Workspace UI

- **Unified shell**
- [Domain applications](https://github.com/zsvirt/zsvirt-ui/tree/main/zsphere/apps): `zsphere/apps`
- [Administration app](https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/apps/administration/src/bootstrap.tsx): `zsphere/apps/administration/src/bootstrap.tsx`

### Infrastructure

- [Storage workflows](https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/apps/resource/src/pages/primary-storage/create/hooks/usePrimaryStorageState.ts): `zsphere/apps/resource/src/pages/primary-storage/create/hooks/usePrimaryStorageState.ts`
- [Compute inventory](https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/bff/src/zsphere-resource/vm-instance/vm-instance-query/vm-instance-query.service.ts): `zsphere/bff/src/zsphere-resource/vm-instance/vm-instance-query/vm-instance-query.service.ts`
- [Host inventory](https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/bff/src/hardware-resource/host/query/host-query.service.ts): `zsphere/bff/src/hardware-resource/host/query/host-query.service.ts`
- [Storage inventory](https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/bff/src/hardware-resource/primary-storage/primary-storage-query/primary-storage-query.service.ts): `zsphere/bff/src/hardware-resource/primary-storage/primary-storage-query/primary-storage-query.service.ts`
- [Network inventory](https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/bff/src/network-resource/l3-network/query/query.service.ts): `zsphere/bff/src/network-resource/l3-network/query/query.service.ts`
- [Image management](https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/bff/src/zsphere-resource/image/image-query/image-query.service.ts): `zsphere/bff/src/zsphere-resource/image/image-query/image-query.service.ts`
- [Resource trees](https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/bff/src/zsphere-resource/special-tree/query/query-special-tree.service.ts): `zsphere/bff/src/zsphere-resource/special-tree/query/query-special-tree.service.ts`

### Reliability & Protection

- **Migration workflows**
- **Reliability workflows**
- [Backup & recovery](https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/bff/src/zsphere-data-protection/backup-data/backup-data-query/backup-data-query.service.ts): `zsphere/bff/src/zsphere-data-protection/backup-data/backup-data-query/backup-data-query.service.ts`

### Operations & Administration

- **Operations dashboard**
- [Capacity analysis](https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/bff/src/maintenance/capacity-calculation/query/capacity-calculation-query.service.ts): `zsphere/bff/src/maintenance/capacity-calculation/query/capacity-calculation-query.service.ts`
- [Identity & access](https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/apps/administration/src/pages/account-information/index.tsx): `zsphere/apps/administration/src/pages/account-information/index.tsx`
- [Access control](https://github.com/zsvirt/zsvirt-ui/blob/main/zsphere/apps/administration/src/pages/access-control-rule/index.tsx): `zsphere/apps/administration/src/pages/access-control-rule/index.tsx`

### Backend

- [GraphQL BFF](https://github.com/zsvirt/zsvirt-ui/tree/main/zsphere/bff): `zsphere/bff`

### Other components

- **Signed-in user**
- **ZSvirt management services**

## Connections

- Signed-in user → Unified shell: uses
- Unified shell → Domain applications: hosts
- Domain applications → Administration app: includes
- Domain applications → Storage workflows: includes
- Domain applications → Operations dashboard: provides
- Domain applications → Migration workflows: provides
- Domain applications → Reliability workflows: provides
- Administration app → Identity & access: supports
- Administration app → Access control: supports
- Storage workflows → GraphQL BFF: queries
- Administration app → GraphQL BFF: queries
- GraphQL BFF → ZSvirt management services: calls
- GraphQL BFF → Compute inventory: queries
- GraphQL BFF → Host inventory: queries
- GraphQL BFF → Storage inventory: queries
- GraphQL BFF → Network inventory: queries
- GraphQL BFF → Image management: queries
- GraphQL BFF → Resource trees: queries
- GraphQL BFF → Backup & recovery: queries
- GraphQL BFF → Capacity analysis: queries