Skip to content

Angular Client Service

The Angular Client is the frontend single-page application (SPA) dashboard. It provides the visual interfaces to configure, launch, monitor, and interact with infrastructure resources.

1. Technology Stack

  • Framework: Angular v18+ (Standalone Components, Signals API)
  • Styling: SCSS (Custom theme with responsive flex and grid layouts)
  • Libraries:
  • @angular/common/http for API requests.
  • keycloak-js for OIDC redirection, authentication checks, and session refresh.
  • @ngx-translate/core for multi-language support (English and Greek).

2. Core Functional Modules

  • Auth Guard: Integrates with Keycloak to guard private routes. It captures the authorization code, exchanges it for JWTs, and updates tokens silently.
  • Dashboard Component: Displays general usage statistics, reserved IPs, and running instances.
  • Instances Wizard:
  • Provides a pre-configured template builder for instant LXD VM/container provisioning.
  • Provides a custom Terraform Configuration Upload zone allowing advanced DevOps engineers to run custom templates.
  • Generates Kubernetes VMs templates dynamically via helper modules.
  • Terminal Console Component: Establishes a raw WebSocket connection via the gateway to connect users to their instances.
  • Network Port Forwarding Panel: Interacts with the API to display, reserve, and edit port forwarding targets.

3. Communication Patterns

REST API Integration

All requests are structured in node.service.ts using the Angular HttpClient. The URL endpoints are mapped under: * /api/instances: Instance state, creation, deletion. * /api/networks/reserved-ips: IP subnetting & forwards mappings. * /api/terraform: Terraform validation, planning, and execution. * /api/agent: Interaction with the AI infrastructure bot.

WebSocket Console Terminal

The terminal utilizes standard WebSockets to establish a connection to the Proxy Server terminal proxy. It uses the XTerm.js addon on the UI to capture key events and render response streams.

4. Key Specifications & Security

  • PKCE Protocol: Leverages PKCE for secure authentication authorization.
  • No Secret Storage: The SPA stores no API secrets, database passwords, or private key materials. All operations are authorized using the short-lived OIDC bearer token.
  • Localizations: Supports internationalization (i18n) for standard accessibility.