# pala46/azure-inventory-dashboard architecture

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

- Interactive diagram: https://gitdiagram.com/pala46/azure-inventory-dashboard
- Repository: https://github.com/pala46/azure-inventory-dashboard

## Overview

#### Purpose and Runtime
Azure Inventory Dashboard is a live, read-only Azure subscription inventory system. A React/Vite browser client calls a FastAPI REST API; the backend authenticates users with Microsoft Entra ID and queries Azure Resource Graph rather than maintaining an inventory database. Development runs Vite on :5173 and uvicorn on :8000; production FastAPI can serve the built frontend.
Paths: `backend/app.py`, `frontend/src/main.jsx`, `frontend/vite.config.js`

#### Application Composition and Entry Points
`backend.app:app` is the server entry point: it assembles API routes, error handling, health behavior, and optional static frontend hosting. The React entry mounts the application, while the top-level app owns routing, shared layout, and page selection. Convenience launchers provision and start both runtimes.
Paths: `backend/app.py`, `frontend/src/App.jsx`, `run.sh`

#### Authentication Boundary
The frontend is gated by auth state and never accesses Azure directly. Auth endpoints expose status, initiate interactive browser login, and clear the in-memory session. Backend authentication encapsulates `InteractiveBrowserCredential`, persisted OS token caching, MFA-capable browser flow, token-claim user extraction, and thread-pool handling for its synchronous credential calls. Failed Azure authentication is translated to a client-facing 401.
Paths: `backend/auth.py`, `backend/routes/auth.py`, `frontend/src/context/AuthContext.jsx`

#### Azure Query Layer
Azure access is centralized behind a reusable Resource Graph client and Kusto-query definitions. Request handlers invoke this layer on demand against the configured subscription; there is no database, scheduled scan, or backend inventory persistence. This isolation is the intended insertion boundary for caching, persistence, alternate credentials, or multi-subscription support.
Paths: `backend/azure_client.py`, `backend/resource_graph.py`, `backend/config.py`

#### API Domain Stages
The API is organized by inventory domain. Dashboard routes compose summary metrics, charts, and curated lists; resource routes implement paginated listing, filtered global search, full resource detail, and relationship discovery. Category routes issue targeted Resource Graph queries for compute, storage, database, network, containers, security, monitoring, resource groups, and tags.
Paths: `backend/routes/dashboard.py`, `backend/routes/resources.py`, `backend/routes/compute.py`

#### Frontend Data and Presentation Flow
Pages fetch REST data through the shared Axios client and data-fetch hook, rendering reusable tables, charts, loading/error states, and export controls. Auth and refresh contexts coordinate session gating and reload behavior across routes. Detail and search pages consume the generic resource APIs; category pages consume their corresponding domain endpoints.
Paths: `frontend/src/api/client.js`, `frontend/src/hooks/useApi.js`, `frontend/src/pages/ResourceDetail.jsx`

#### External Services and Deployment Boundaries
Microsoft Entra ID supplies interactive authentication; Azure Resource Graph supplies all inventory data and requires subscription Reader-level query access. The client uses Bootstrap-oriented UI components and Chart.js visualizations. In development, Vite proxies `/api` to FastAPI; in deployment, a reverse proxy such as nginx/Caddy provides TLS ahead of uvicorn, while FastAPI may host `frontend/dist`.
Paths: `frontend/package.json`, `frontend/vite.config.js`, `backend/.env.example`

Main entry points: [`backend/app.py`](https://github.com/pala46/azure-inventory-dashboard/blob/main/backend/app.py) (FastAPI application), [`backend/resource_graph.py`](https://github.com/pala46/azure-inventory-dashboard/blob/main/backend/resource_graph.py) (Resource Graph query layer), [`frontend/src/App.jsx`](https://github.com/pala46/azure-inventory-dashboard/blob/main/frontend/src/App.jsx) (App shell & routes), [`run.sh`](https://github.com/pala46/azure-inventory-dashboard/blob/main/run.sh) (Development launcher)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Browser Client"]
  node_react_entry["React entry<br/>React bootstrap<br/>[main.jsx]"]
  node_frontend_app["App shell &amp; routes<br/>React application<br/>[App.jsx]"]
  node_auth_context["Auth context<br/>session state<br/>[AuthContext.jsx]"]
  node_api_client["API client<br/>Axios client<br/>[client.js]"]
  node_data_hook["Data fetch hook<br/>React hook<br/>[useApi.js]"]
  node_resource_detail["Resource detail page<br/>React page<br/>[ResourceDetail.jsx]"]
end

subgraph group_backend["FastAPI Backend"]
  node_fastapi_app["FastAPI application<br/>server entry point<br/>[app.py]"]
  node_auth_routes["Auth endpoints<br/>API routes<br/>[auth.py]"]
  node_auth_service{{"Entra auth service<br/>credential boundary<br/>[auth.py]"}}
  node_dashboard_routes["Dashboard endpoints<br/>API routes<br/>[dashboard.py]"]
  node_resource_routes["Resource endpoints<br/>API routes<br/>[resources.py]"]
  node_category_routes["Category endpoints<br/>API routes<br/>[compute.py]"]
  node_resource_graph_layer["Resource Graph query layer<br/>Azure query abstraction<br/>[resource_graph.py]"]
  node_azure_client["Azure client<br/>Resource Graph client<br/>[azure_client.py]"]
end

subgraph group_azure["Azure Services"]
  node_entra_id{{"Microsoft Entra ID<br/>identity provider"}}
  node_resource_graph[("Azure Resource Graph<br/>inventory query service")]
end

subgraph group_deployment["Runtime &amp; Deployment"]
  node_vite_dev["Vite development server<br/>frontend runtime<br/>[vite.config.js]"]
  node_launcher["Development launcher<br/>runtime launcher<br/>[run.sh]"]
  node_production_proxy["TLS reverse proxy<br/>production edge"]
end

node_react_entry -->|"mounts"| node_frontend_app
node_frontend_app -->|"gates pages with"| node_auth_context
node_frontend_app -->|"selects route"| node_resource_detail
node_resource_detail -->|"loads via"| node_data_hook
node_data_hook -->|"uses"| node_api_client
node_api_client -->|"REST /api"| node_fastapi_app
node_fastapi_app -->|"mounts"| node_auth_routes
node_fastapi_app -->|"mounts"| node_dashboard_routes
node_fastapi_app -->|"mounts"| node_resource_routes
node_fastapi_app -->|"mounts"| node_category_routes
node_auth_routes -->|"delegates login"| node_auth_service
node_auth_service -->|"interactive credential"| node_entra_id
node_dashboard_routes -->|"queries"| node_resource_graph_layer
node_resource_routes -->|"queries"| node_resource_graph_layer
node_category_routes -->|"queries"| node_resource_graph_layer
node_resource_graph_layer -->|"uses"| node_azure_client
node_azure_client -->|"executes Kusto queries"| node_resource_graph
node_launcher -->|"starts"| node_vite_dev
node_launcher -->|"starts uvicorn"| node_fastapi_app
node_vite_dev -.->|"proxies /api"| node_fastapi_app
node_production_proxy -->|"forwards TLS traffic"| node_fastapi_app

click node_react_entry "https://github.com/pala46/azure-inventory-dashboard/blob/main/frontend/src/main.jsx"
click node_frontend_app "https://github.com/pala46/azure-inventory-dashboard/blob/main/frontend/src/App.jsx"
click node_auth_context "https://github.com/pala46/azure-inventory-dashboard/blob/main/frontend/src/context/AuthContext.jsx"
click node_api_client "https://github.com/pala46/azure-inventory-dashboard/blob/main/frontend/src/api/client.js"
click node_data_hook "https://github.com/pala46/azure-inventory-dashboard/blob/main/frontend/src/hooks/useApi.js"
click node_resource_detail "https://github.com/pala46/azure-inventory-dashboard/blob/main/frontend/src/pages/ResourceDetail.jsx"
click node_fastapi_app "https://github.com/pala46/azure-inventory-dashboard/blob/main/backend/app.py"
click node_auth_routes "https://github.com/pala46/azure-inventory-dashboard/blob/main/backend/routes/auth.py"
click node_auth_service "https://github.com/pala46/azure-inventory-dashboard/blob/main/backend/auth.py"
click node_dashboard_routes "https://github.com/pala46/azure-inventory-dashboard/blob/main/backend/routes/dashboard.py"
click node_resource_routes "https://github.com/pala46/azure-inventory-dashboard/blob/main/backend/routes/resources.py"
click node_category_routes "https://github.com/pala46/azure-inventory-dashboard/blob/main/backend/routes/compute.py"
click node_resource_graph_layer "https://github.com/pala46/azure-inventory-dashboard/blob/main/backend/resource_graph.py"
click node_azure_client "https://github.com/pala46/azure-inventory-dashboard/blob/main/backend/azure_client.py"
click node_vite_dev "https://github.com/pala46/azure-inventory-dashboard/blob/main/frontend/vite.config.js"
click node_launcher "https://github.com/pala46/azure-inventory-dashboard/blob/main/run.sh"

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_react_entry,node_frontend_app,node_auth_context,node_api_client,node_data_hook,node_resource_detail toneBlue
class node_fastapi_app,node_auth_routes,node_auth_service,node_dashboard_routes,node_resource_routes,node_category_routes,node_resource_graph_layer,node_azure_client toneAmber
class node_entra_id,node_resource_graph toneMint
class node_vite_dev,node_launcher,node_production_proxy toneRose
```

## Components

### Browser Client

- [React entry](https://github.com/pala46/azure-inventory-dashboard/blob/main/frontend/src/main.jsx): React bootstrap · `frontend/src/main.jsx`
- [App shell & routes](https://github.com/pala46/azure-inventory-dashboard/blob/main/frontend/src/App.jsx): React application · Owns shared layout, page selection, and route-level auth gating. · `frontend/src/App.jsx`
- [Auth context](https://github.com/pala46/azure-inventory-dashboard/blob/main/frontend/src/context/AuthContext.jsx): session state · Coordinates frontend authentication state. · `frontend/src/context/AuthContext.jsx`
- [API client](https://github.com/pala46/azure-inventory-dashboard/blob/main/frontend/src/api/client.js): Axios client · `frontend/src/api/client.js`
- [Data fetch hook](https://github.com/pala46/azure-inventory-dashboard/blob/main/frontend/src/hooks/useApi.js): React hook · Provides shared loading, error, and refresh behavior. · `frontend/src/hooks/useApi.js`
- [Resource detail page](https://github.com/pala46/azure-inventory-dashboard/blob/main/frontend/src/pages/ResourceDetail.jsx): React page · Consumes generic resource detail and relationship APIs. · `frontend/src/pages/ResourceDetail.jsx`

### FastAPI Backend

- [FastAPI application](https://github.com/pala46/azure-inventory-dashboard/blob/main/backend/app.py): server entry point · Assembles routes, health/error behavior, and optional static frontend hosting. · `backend/app.py`
- [Auth endpoints](https://github.com/pala46/azure-inventory-dashboard/blob/main/backend/routes/auth.py): API routes · Exposes status, interactive login, and session clearing. · `backend/routes/auth.py`
- [Entra auth service](https://github.com/pala46/azure-inventory-dashboard/blob/main/backend/auth.py): credential boundary · Uses browser credential, OS token cache, MFA flow, and claim extraction. · `backend/auth.py`
- [Dashboard endpoints](https://github.com/pala46/azure-inventory-dashboard/blob/main/backend/routes/dashboard.py): API routes · Composes inventory metrics, charts, and curated lists. · `backend/routes/dashboard.py`
- [Resource endpoints](https://github.com/pala46/azure-inventory-dashboard/blob/main/backend/routes/resources.py): API routes · Provides paginated listing, search, detail, and relationships. · `backend/routes/resources.py`
- [Category endpoints](https://github.com/pala46/azure-inventory-dashboard/blob/main/backend/routes/compute.py): API routes · Serves targeted compute and other inventory-domain queries. · `backend/routes/compute.py`
- [Resource Graph query layer](https://github.com/pala46/azure-inventory-dashboard/blob/main/backend/resource_graph.py): Azure query abstraction · Centralizes reusable client access and Kusto query definitions. · `backend/resource_graph.py`
- [Azure client](https://github.com/pala46/azure-inventory-dashboard/blob/main/backend/azure_client.py): Resource Graph client · `backend/azure_client.py`

### Azure Services

- **Microsoft Entra ID**: identity provider · Interactive MFA-capable user authentication.
- **Azure Resource Graph**: inventory query service · Live subscription inventory source; no inventory database is maintained.

### Runtime & Deployment

- [Vite development server](https://github.com/pala46/azure-inventory-dashboard/blob/main/frontend/vite.config.js): frontend runtime · Serves the browser client and proxies /api to FastAPI. · `frontend/vite.config.js`
- [Development launcher](https://github.com/pala46/azure-inventory-dashboard/blob/main/run.sh): runtime launcher · Starts the frontend and backend development runtimes. · `run.sh`
- **TLS reverse proxy**: production edge · nginx or Caddy can terminate TLS ahead of uvicorn.

## Connections

- React entry → App shell & routes: mounts
- App shell & routes → Auth context: gates pages with
- App shell & routes → Resource detail page: selects route
- Resource detail page → Data fetch hook: loads via
- Data fetch hook → API client: uses
- API client → FastAPI application: REST /api
- FastAPI application → Auth endpoints: mounts
- FastAPI application → Dashboard endpoints: mounts
- FastAPI application → Resource endpoints: mounts
- FastAPI application → Category endpoints: mounts
- Auth endpoints → Entra auth service: delegates login
- Entra auth service → Microsoft Entra ID: interactive credential
- Dashboard endpoints → Resource Graph query layer: queries
- Resource endpoints → Resource Graph query layer: queries
- Category endpoints → Resource Graph query layer: queries
- Resource Graph query layer → Azure client: uses
- Azure client → Azure Resource Graph: executes Kusto queries
- Development launcher → Vite development server: starts
- Development launcher → FastAPI application: starts uvicorn
- Vite development server → FastAPI application: proxies /api
- TLS reverse proxy → FastAPI application: forwards TLS traffic