Files
git.stella-ops.org/docs/modules/web/architecture.md

3.0 KiB

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. 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

// environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:5000/api/v1',
  authorityUrl: 'http://localhost:5001',
  clientId: 'stellaops-web'
};

  • UI module: ../ui/architecture.md
  • Authority: ../authority/architecture.md
  • Auth smoke tests: ../ui/operations/auth-smoke.md