106 lines
3.0 KiB
Markdown
106 lines
3.0 KiB
Markdown
# component_architecture_web.md - **Stella Ops Web** (2025Q4)
|
|
|
|
> Angular 17 frontend SPA for StellaOps console.
|
|
|
|
> **Scope.** Frontend architecture for **Web**: the Angular 17 single-page application providing the StellaOps console interface.
|
|
|
|
> **Note:** For the comprehensive Web UI architecture including all features, see [`../ui/architecture.md`](../ui/architecture.md). This file provides a condensed overview.
|
|
|
|
---
|
|
|
|
## 0) Mission & boundaries
|
|
|
|
**Mission.** Provide an **intuitive, responsive web interface** for StellaOps operators to manage scans, review findings, configure policies, and monitor system health.
|
|
|
|
**Boundaries.**
|
|
|
|
* Web is a **frontend-only** application. All data comes from backend APIs.
|
|
* Web **does not** store sensitive data locally beyond session tokens.
|
|
* Supports **offline-first** patterns for air-gapped console access.
|
|
|
|
---
|
|
|
|
## 1) Solution & project layout
|
|
|
|
```
|
|
src/Web/StellaOps.Web/
|
|
├─ src/
|
|
│ ├─ app/
|
|
│ │ ├─ core/ # Core services, guards, interceptors
|
|
│ │ │ ├─ services/
|
|
│ │ │ ├─ guards/
|
|
│ │ │ └─ interceptors/
|
|
│ │ ├─ shared/ # Shared components, pipes, directives
|
|
│ │ │ ├─ components/
|
|
│ │ │ ├─ pipes/
|
|
│ │ │ └─ directives/
|
|
│ │ ├─ features/ # Feature modules
|
|
│ │ │ ├─ dashboard/
|
|
│ │ │ ├─ scans/
|
|
│ │ │ ├─ findings/
|
|
│ │ │ ├─ policies/
|
|
│ │ │ ├─ settings/
|
|
│ │ │ └─ admin/
|
|
│ │ └─ app.routes.ts
|
|
│ ├─ assets/
|
|
│ ├─ environments/
|
|
│ └─ styles/
|
|
├─ angular.json
|
|
├─ package.json
|
|
└─ tsconfig.json
|
|
```
|
|
|
|
---
|
|
|
|
## 2) Technology stack
|
|
|
|
* **Framework**: Angular 17 with standalone components
|
|
* **State management**: NgRx Signals
|
|
* **UI components**: Angular Material
|
|
* **HTTP**: Angular HttpClient with interceptors
|
|
* **Routing**: Angular Router with lazy loading
|
|
* **Build**: Angular CLI with esbuild
|
|
|
|
---
|
|
|
|
## 3) Key features
|
|
|
|
| Feature | Path | Description |
|
|
|---------|------|-------------|
|
|
| Dashboard | `/dashboard` | Overview metrics and alerts |
|
|
| Scans | `/scans` | Scan history and details |
|
|
| Findings | `/findings` | Vulnerability findings list |
|
|
| Compare | `/compare` | Diff view between scans |
|
|
| Policies | `/policies` | Policy configuration |
|
|
| Settings | `/settings` | User and system settings |
|
|
|
|
---
|
|
|
|
## 4) Authentication
|
|
|
|
* **OIDC/OAuth2** via Authority module
|
|
* **Token refresh** handled by interceptor
|
|
* **Session timeout** with configurable duration
|
|
|
|
---
|
|
|
|
## 5) Configuration
|
|
|
|
```typescript
|
|
// environment.ts
|
|
export const environment = {
|
|
production: false,
|
|
apiUrl: 'http://localhost:5000/api/v1',
|
|
authorityUrl: 'http://localhost:5001',
|
|
clientId: 'stellaops-web'
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## Related Documentation
|
|
|
|
* UI module: `../ui/architecture.md`
|
|
* Authority: `../authority/architecture.md`
|
|
* Auth smoke tests: `../ui/operations/auth-smoke.md`
|