# raiinzli/ihkmonitoring architecture

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

- Interactive diagram: https://gitdiagram.com/raiinzli/ihkmonitoring
- Repository: https://github.com/raiinzli/ihkmonitoring

## Overview

IHKMonitoring is an early-stage infrastructure monitoring dashboard with an Angular frontend and an ASP.NET API backed by PostgreSQL. The visible workflow is opening the dashboard to view device and monitor statuses; the sampled dashboard currently uses hard-coded data. The API also exposes a target-list endpoint, but the sampled frontend does not call it. The tree indicates broader device, monitor, and log domain areas; their runtime wiring is not established by the sampled source.

Main entry points: [`frontend/src/app/components/dashboard/dashboard/dashboard.ts`](https://github.com/raiinzli/ihkmonitoring/blob/main/frontend/src/app/components/dashboard/dashboard/dashboard.ts) (Status dashboard), [`frontend/src/app/app.ts`](https://github.com/raiinzli/ihkmonitoring/blob/main/frontend/src/app/app.ts) (Root app), [`backend/Monitoring.Api/Data/MonitoringDbContext.cs`](https://github.com/raiinzli/ihkmonitoring/blob/main/backend/Monitoring.Api/Data/MonitoringDbContext.cs) (EF Core context), [`frontend/src/main.ts`](https://github.com/raiinzli/ihkmonitoring/blob/main/frontend/src/main.ts) (Angular bootstrap)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Dashboard frontend"]
  node_bootstrap["Angular bootstrap<br/>[main.ts]"]
  node_app["Root app<br/>[app.ts]"]
  node_dashboard["Status dashboard<br/>[dashboard.ts]"]
  node_summary["Status summary"]
  node_statuscard["Status cards"]
  node_searchbar["Dashboard search"]
end

subgraph group_backend["Monitoring API"]
  node_api["HTTP API<br/>[Program.cs]"]
  node_targetquery["Targets endpoint<br/>[Program.cs]"]
end

subgraph group_domain["Monitoring domain"]
  node_deviceui["Device view model<br/>[device.ts]"]
  node_monitorui["Monitor view model<br/>[monitors.ts]"]
  node_targetmodel["Target entity"]
  node_monitorentities["Monitor entities<br/>[Models]"]
end

subgraph group_storage["Persistence"]
  node_dbcontext["EF Core context"]
  node_postgres[("PostgreSQL")]
end

node_user(("Operator"))

node_user -->|"opens app"| node_bootstrap
node_bootstrap -->|"bootstraps"| node_app
node_app -->|"renders"| node_dashboard
node_dashboard -->|"renders"| node_summary
node_dashboard -->|"renders"| node_statuscard
node_dashboard -->|"uses sample data"| node_deviceui
node_deviceui -->|"includes monitors"| node_monitorui
node_app -->|"tests backend"| node_api
node_api -->|"maps endpoint"| node_targetquery
node_targetquery -->|"queries targets"| node_dbcontext
node_dbcontext -->|"sets"| node_targetmodel
node_dbcontext -->|"reads"| node_postgres

click node_bootstrap "https://github.com/raiinzli/ihkmonitoring/blob/main/frontend/src/main.ts"
click node_app "https://github.com/raiinzli/ihkmonitoring/blob/main/frontend/src/app/app.ts"
click node_dashboard "https://github.com/raiinzli/ihkmonitoring/blob/main/frontend/src/app/components/dashboard/dashboard/dashboard.ts"
click node_summary "https://github.com/raiinzli/ihkmonitoring/blob/main/frontend/src/app/components/dashboard/dashboard-summary/dashboard-summary.ts"
click node_statuscard "https://github.com/raiinzli/ihkmonitoring/blob/main/frontend/src/app/components/dashboard/dashboard-status-card/dashboard-status-card.ts"
click node_searchbar "https://github.com/raiinzli/ihkmonitoring/blob/main/frontend/src/app/components/dashboard/dashboard-searchbar/dashboard-searchbar.ts"
click node_deviceui "https://github.com/raiinzli/ihkmonitoring/blob/main/frontend/src/app/models/device.ts"
click node_monitorui "https://github.com/raiinzli/ihkmonitoring/blob/main/frontend/src/app/models/monitors.ts"
click node_api "https://github.com/raiinzli/ihkmonitoring/blob/main/backend/Monitoring.Api/Program.cs"
click node_targetquery "https://github.com/raiinzli/ihkmonitoring/blob/main/backend/Monitoring.Api/Program.cs"
click node_dbcontext "https://github.com/raiinzli/ihkmonitoring/blob/main/backend/Monitoring.Api/Data/MonitoringDbContext.cs"
click node_targetmodel "https://github.com/raiinzli/ihkmonitoring/blob/main/backend/Monitoring.Api/Models/MonitoringTargets.cs"
click node_monitorentities "https://github.com/raiinzli/ihkmonitoring/tree/main/backend/Monitoring.Api/Models"

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_bootstrap,node_app,node_dashboard,node_summary,node_statuscard,node_searchbar toneBlue
class node_api,node_targetquery toneAmber
class node_deviceui,node_monitorui,node_targetmodel,node_monitorentities toneMint
class node_dbcontext,node_postgres toneRose
class node_user toneIndigo
```

## Components

### Dashboard frontend

- [Angular bootstrap](https://github.com/raiinzli/ihkmonitoring/blob/main/frontend/src/main.ts): `frontend/src/main.ts`
- [Root app](https://github.com/raiinzli/ihkmonitoring/blob/main/frontend/src/app/app.ts): `frontend/src/app/app.ts`
- [Status dashboard](https://github.com/raiinzli/ihkmonitoring/blob/main/frontend/src/app/components/dashboard/dashboard/dashboard.ts): `frontend/src/app/components/dashboard/dashboard/dashboard.ts`
- [Status summary](https://github.com/raiinzli/ihkmonitoring/blob/main/frontend/src/app/components/dashboard/dashboard-summary/dashboard-summary.ts): `frontend/src/app/components/dashboard/dashboard-summary/dashboard-summary.ts`
- [Status cards](https://github.com/raiinzli/ihkmonitoring/blob/main/frontend/src/app/components/dashboard/dashboard-status-card/dashboard-status-card.ts): `frontend/src/app/components/dashboard/dashboard-status-card/dashboard-status-card.ts`
- [Dashboard search](https://github.com/raiinzli/ihkmonitoring/blob/main/frontend/src/app/components/dashboard/dashboard-searchbar/dashboard-searchbar.ts): `frontend/src/app/components/dashboard/dashboard-searchbar/dashboard-searchbar.ts`

### Monitoring API

- [HTTP API](https://github.com/raiinzli/ihkmonitoring/blob/main/backend/Monitoring.Api/Program.cs): `backend/Monitoring.Api/Program.cs`
- [Targets endpoint](https://github.com/raiinzli/ihkmonitoring/blob/main/backend/Monitoring.Api/Program.cs): `backend/Monitoring.Api/Program.cs`

### Monitoring domain

- [Device view model](https://github.com/raiinzli/ihkmonitoring/blob/main/frontend/src/app/models/device.ts): `frontend/src/app/models/device.ts`
- [Monitor view model](https://github.com/raiinzli/ihkmonitoring/blob/main/frontend/src/app/models/monitors.ts): `frontend/src/app/models/monitors.ts`
- [Target entity](https://github.com/raiinzli/ihkmonitoring/blob/main/backend/Monitoring.Api/Models/MonitoringTargets.cs): `backend/Monitoring.Api/Models/MonitoringTargets.cs`
- [Monitor entities](https://github.com/raiinzli/ihkmonitoring/tree/main/backend/Monitoring.Api/Models): `backend/Monitoring.Api/Models`

### Persistence

- [EF Core context](https://github.com/raiinzli/ihkmonitoring/blob/main/backend/Monitoring.Api/Data/MonitoringDbContext.cs): `backend/Monitoring.Api/Data/MonitoringDbContext.cs`
- **PostgreSQL**

### Other components

- **Operator**

## Connections

- Operator → Angular bootstrap: opens app
- Angular bootstrap → Root app: bootstraps
- Root app → Status dashboard: renders
- Status dashboard → Status summary: renders
- Status dashboard → Status cards: renders
- Status dashboard → Device view model: uses sample data
- Device view model → Monitor view model: includes monitors
- Root app → HTTP API: tests backend
- HTTP API → Targets endpoint: maps endpoint
- Targets endpoint → EF Core context: queries targets
- EF Core context → Target entity: sets
- EF Core context → PostgreSQL: reads