# styliteag/fio-analyzer architecture

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

- Interactive diagram: https://gitdiagram.com/styliteag/fio-analyzer
- Repository: https://github.com/styliteag/fio-analyzer

## Overview

Storage Performance Visualizer is a full-stack FIO benchmark analysis application. Users upload FIO JSON with infrastructure metadata; the backend extracts metrics and stores test runs, which the web UI presents as histories, host analysis, comparisons, ramps, and saturation results. Authentication and role-protected administration govern access. The graph covers documented product capabilities, but several routes and analytics pages were not sampled; those links are documented at product level rather than inferred from unsampled calls.

Main entry points: [`frontend/src/App.tsx`](https://github.com/styliteag/fio-analyzer/blob/main/frontend/src/App.tsx) (React application), [`backend/main.py`](https://github.com/styliteag/fio-analyzer/blob/main/backend/main.py) (FastAPI service), [`backend/routers/imports.py`](https://github.com/styliteag/fio-analyzer/blob/main/backend/routers/imports.py) (FIO import), [`backend/database/connection.py`](https://github.com/styliteag/fio-analyzer/blob/main/backend/database/connection.py) (SQLite persistence)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web application"]
  node_webapp["React application<br/>[App.tsx]"]
  node_uploadui["Upload page<br/>[Upload.tsx]"]
  node_hostui["Host analysis<br/>[Host.tsx]"]
  node_historyui["History view<br/>[History.tsx]"]
  node_compareui["Comparison view<br/>[Compare.tsx]"]
  node_satui["Saturation view<br/>[Saturation.tsx]"]
  node_rampui["Ramp view<br/>[Ramps.tsx]"]
  node_uploadhook["Upload handler<br/>[useUpload.ts]"]
  node_vuetypes["Vue run types<br/>[testRun.ts]"]
end

subgraph group_api["API and access"]
  node_api["FastAPI service<br/>[main.py]"]
  node_auth["Role authentication<br/>[middleware.py]"]
  node_useradmin["User management<br/>[users.py]"]
end

subgraph group_ingest["Import and persistence"]
  node_import["FIO import<br/>[imports.py]"]
  node_fio["FIO metric extraction<br/>[fio_metrics.py]"]
  node_clientmode["Client-mode parsing<br/>[fio_client_mode.py]"]
  node_storageinfo["Storage metadata<br/>[storage_info.py]"]
  node_database[("SQLite persistence<br/>[connection.py]")]
  node_models["Run and metric models<br/>[models.py]"]
end

subgraph group_analysis["Performance analysis"]
  node_timeseries["Time-series queries<br/>[time_series.py]"]
  node_compare["Comparison queries<br/>[compare.py]"]
  node_dashboard["Dashboard summaries<br/>[dashboard.py]"]
  node_saturation["Saturation analysis<br/>[saturation.py]"]
  node_ramp["Ramp analysis<br/>[ramp.py]"]
end

subgraph group_internal["Shared internals"]
  node_settings["Application settings<br/>[settings.py]"]
  node_filters["Run filtering<br/>[run_filters.py]"]
  node_sync["Sync-mode utilities<br/>[sync_mode.py]"]
  node_logging["Request logging<br/>[logging.py]"]
end

node_user(("User"))

node_user -->|"uses"| node_webapp
node_webapp -->|"routes to"| node_uploadui
node_webapp -->|"routes to"| node_hostui
node_webapp -->|"routes to"| node_historyui
node_webapp -->|"routes to"| node_compareui
node_webapp -->|"routes to"| node_satui
node_webapp -->|"routes to"| node_rampui
node_uploadui -.->|"submits through"| node_uploadhook
node_uploadhook -.->|"uploads to"| node_api
node_api -->|"routes requests"| node_import
node_api -->|"routes requests"| node_timeseries
node_api -->|"routes requests"| node_compare
node_api -->|"routes requests"| node_dashboard
node_api -.->|"protects routes"| node_auth
node_api -.->|"routes requests"| node_saturation
node_api -.->|"routes requests"| node_ramp
node_import -->|"extracts metrics"| node_fio
node_import -->|"parses client runs"| node_clientmode
node_import -->|"validates metadata"| node_storageinfo
node_import -->|"stores runs"| node_database
node_timeseries -->|"queries runs"| node_database
node_compare -->|"queries runs"| node_database
node_dashboard -->|"queries summaries"| node_database
node_database -.->|"uses schemas"| node_models
node_auth -.->|"protects administration"| node_useradmin
node_settings -->|"configures storage"| node_database
node_import -->|"checks upload limits"| node_settings
node_timeseries -->|"filters runs"| node_filters
node_compare -->|"filters runs"| node_filters
node_import -->|"logs activity"| node_logging
node_webapp -.->|"uses run types"| node_vuetypes

click node_webapp "https://github.com/styliteag/fio-analyzer/blob/main/frontend/src/App.tsx"
click node_uploadui "https://github.com/styliteag/fio-analyzer/blob/main/frontend/src/pages/Upload.tsx"
click node_hostui "https://github.com/styliteag/fio-analyzer/blob/main/frontend/src/pages/Host.tsx"
click node_historyui "https://github.com/styliteag/fio-analyzer/blob/main/frontend/src/pages/History.tsx"
click node_compareui "https://github.com/styliteag/fio-analyzer/blob/main/frontend/src/pages/Compare.tsx"
click node_satui "https://github.com/styliteag/fio-analyzer/blob/main/frontend/src/pages/Saturation.tsx"
click node_rampui "https://github.com/styliteag/fio-analyzer/blob/main/frontend/src/pages/Ramps.tsx"
click node_uploadhook "https://github.com/styliteag/fio-analyzer/blob/main/frontend/src/hooks/api/useUpload.ts"
click node_api "https://github.com/styliteag/fio-analyzer/blob/main/backend/main.py"
click node_auth "https://github.com/styliteag/fio-analyzer/blob/main/backend/auth/middleware.py"
click node_useradmin "https://github.com/styliteag/fio-analyzer/blob/main/backend/routers/users.py"
click node_import "https://github.com/styliteag/fio-analyzer/blob/main/backend/routers/imports.py"
click node_fio "https://github.com/styliteag/fio-analyzer/blob/main/backend/utils/fio_metrics.py"
click node_clientmode "https://github.com/styliteag/fio-analyzer/blob/main/backend/utils/fio_client_mode.py"
click node_storageinfo "https://github.com/styliteag/fio-analyzer/blob/main/backend/utils/storage_info.py"
click node_database "https://github.com/styliteag/fio-analyzer/blob/main/backend/database/connection.py"
click node_models "https://github.com/styliteag/fio-analyzer/blob/main/backend/database/models.py"
click node_timeseries "https://github.com/styliteag/fio-analyzer/blob/main/backend/routers/time_series.py"
click node_compare "https://github.com/styliteag/fio-analyzer/blob/main/backend/routers/compare.py"
click node_dashboard "https://github.com/styliteag/fio-analyzer/blob/main/backend/routers/dashboard.py"
click node_saturation "https://github.com/styliteag/fio-analyzer/blob/main/backend/routers/saturation.py"
click node_ramp "https://github.com/styliteag/fio-analyzer/blob/main/backend/routers/ramp.py"
click node_settings "https://github.com/styliteag/fio-analyzer/blob/main/backend/config/settings.py"
click node_filters "https://github.com/styliteag/fio-analyzer/blob/main/backend/utils/run_filters.py"
click node_sync "https://github.com/styliteag/fio-analyzer/blob/main/backend/utils/sync_mode.py"
click node_logging "https://github.com/styliteag/fio-analyzer/blob/main/backend/utils/logging.py"
click node_vuetypes "https://github.com/styliteag/fio-analyzer/blob/main/frontend-vue/src/types/testRun.ts"

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_webapp,node_uploadui,node_hostui,node_historyui,node_compareui,node_satui,node_rampui,node_uploadhook,node_vuetypes,node_user toneBlue
class node_api,node_auth,node_useradmin toneAmber
class node_import,node_fio,node_clientmode,node_storageinfo,node_database,node_models toneMint
class node_timeseries,node_compare,node_dashboard,node_saturation,node_ramp toneRose
class node_settings,node_filters,node_sync,node_logging toneIndigo
```

## Components

### Web application

- [React application](https://github.com/styliteag/fio-analyzer/blob/main/frontend/src/App.tsx): `frontend/src/App.tsx`
- [Upload page](https://github.com/styliteag/fio-analyzer/blob/main/frontend/src/pages/Upload.tsx): `frontend/src/pages/Upload.tsx`
- [Host analysis](https://github.com/styliteag/fio-analyzer/blob/main/frontend/src/pages/Host.tsx): `frontend/src/pages/Host.tsx`
- [History view](https://github.com/styliteag/fio-analyzer/blob/main/frontend/src/pages/History.tsx): `frontend/src/pages/History.tsx`
- [Comparison view](https://github.com/styliteag/fio-analyzer/blob/main/frontend/src/pages/Compare.tsx): `frontend/src/pages/Compare.tsx`
- [Saturation view](https://github.com/styliteag/fio-analyzer/blob/main/frontend/src/pages/Saturation.tsx): `frontend/src/pages/Saturation.tsx`
- [Ramp view](https://github.com/styliteag/fio-analyzer/blob/main/frontend/src/pages/Ramps.tsx): `frontend/src/pages/Ramps.tsx`
- [Upload handler](https://github.com/styliteag/fio-analyzer/blob/main/frontend/src/hooks/api/useUpload.ts): `frontend/src/hooks/api/useUpload.ts`
- [Vue run types](https://github.com/styliteag/fio-analyzer/blob/main/frontend-vue/src/types/testRun.ts): `frontend-vue/src/types/testRun.ts`

### API and access

- [FastAPI service](https://github.com/styliteag/fio-analyzer/blob/main/backend/main.py): `backend/main.py`
- [Role authentication](https://github.com/styliteag/fio-analyzer/blob/main/backend/auth/middleware.py): `backend/auth/middleware.py`
- [User management](https://github.com/styliteag/fio-analyzer/blob/main/backend/routers/users.py): `backend/routers/users.py`

### Import and persistence

- [FIO import](https://github.com/styliteag/fio-analyzer/blob/main/backend/routers/imports.py): `backend/routers/imports.py`
- [FIO metric extraction](https://github.com/styliteag/fio-analyzer/blob/main/backend/utils/fio_metrics.py): `backend/utils/fio_metrics.py`
- [Client-mode parsing](https://github.com/styliteag/fio-analyzer/blob/main/backend/utils/fio_client_mode.py): `backend/utils/fio_client_mode.py`
- [Storage metadata](https://github.com/styliteag/fio-analyzer/blob/main/backend/utils/storage_info.py): `backend/utils/storage_info.py`
- [SQLite persistence](https://github.com/styliteag/fio-analyzer/blob/main/backend/database/connection.py): `backend/database/connection.py`
- [Run and metric models](https://github.com/styliteag/fio-analyzer/blob/main/backend/database/models.py): `backend/database/models.py`

### Performance analysis

- [Time-series queries](https://github.com/styliteag/fio-analyzer/blob/main/backend/routers/time_series.py): `backend/routers/time_series.py`
- [Comparison queries](https://github.com/styliteag/fio-analyzer/blob/main/backend/routers/compare.py): `backend/routers/compare.py`
- [Dashboard summaries](https://github.com/styliteag/fio-analyzer/blob/main/backend/routers/dashboard.py): `backend/routers/dashboard.py`
- [Saturation analysis](https://github.com/styliteag/fio-analyzer/blob/main/backend/routers/saturation.py): `backend/routers/saturation.py`
- [Ramp analysis](https://github.com/styliteag/fio-analyzer/blob/main/backend/routers/ramp.py): `backend/routers/ramp.py`

### Shared internals

- [Application settings](https://github.com/styliteag/fio-analyzer/blob/main/backend/config/settings.py): `backend/config/settings.py`
- [Run filtering](https://github.com/styliteag/fio-analyzer/blob/main/backend/utils/run_filters.py): `backend/utils/run_filters.py`
- [Sync-mode utilities](https://github.com/styliteag/fio-analyzer/blob/main/backend/utils/sync_mode.py): `backend/utils/sync_mode.py`
- [Request logging](https://github.com/styliteag/fio-analyzer/blob/main/backend/utils/logging.py): `backend/utils/logging.py`

### Other components

- **User**

## Connections

- User → React application: uses
- React application → Upload page: routes to (evidence: `frontend/src/App.tsx`)
- React application → Host analysis: routes to (evidence: `frontend/src/App.tsx`)
- React application → History view: routes to (evidence: `frontend/src/App.tsx`)
- React application → Comparison view: routes to (evidence: `frontend/src/App.tsx`)
- React application → Saturation view: routes to (evidence: `frontend/src/App.tsx`)
- React application → Ramp view: routes to (evidence: `frontend/src/App.tsx`)
- Upload page → Upload handler: submits through
- Upload handler → FastAPI service: uploads to
- FastAPI service → FIO import: routes requests (evidence: `backend/main.py`)
- FastAPI service → Time-series queries: routes requests (evidence: `backend/main.py`)
- FastAPI service → Comparison queries: routes requests (evidence: `backend/main.py`)
- FastAPI service → Dashboard summaries: routes requests (evidence: `backend/main.py`)
- FastAPI service → Role authentication: protects routes
- FastAPI service → Saturation analysis: routes requests (evidence: `backend/main.py`)
- FastAPI service → Ramp analysis: routes requests (evidence: `backend/main.py`)
- FIO import → FIO metric extraction: extracts metrics (evidence: `backend/routers/imports.py`)
- FIO import → Client-mode parsing: parses client runs (evidence: `backend/routers/imports.py`)
- FIO import → Storage metadata: validates metadata (evidence: `backend/routers/imports.py`)
- FIO import → SQLite persistence: stores runs (evidence: `backend/routers/imports.py`)
- Time-series queries → SQLite persistence: queries runs (evidence: `backend/routers/time_series.py`)
- Comparison queries → SQLite persistence: queries runs (evidence: `backend/routers/compare.py`)
- Dashboard summaries → SQLite persistence: queries summaries (evidence: `backend/routers/dashboard.py`)
- SQLite persistence → Run and metric models: uses schemas
- Role authentication → User management: protects administration
- Application settings → SQLite persistence: configures storage (evidence: `backend/database/connection.py`)
- FIO import → Application settings: checks upload limits (evidence: `backend/routers/imports.py`)
- Time-series queries → Run filtering: filters runs (evidence: `backend/routers/time_series.py`)
- Comparison queries → Run filtering: filters runs (evidence: `backend/routers/compare.py`)
- FIO import → Request logging: logs activity (evidence: `backend/routers/imports.py`)
- React application → Vue run types: uses run types