Portal Frontend UI Architecture
Relevant source files
The following files were used as context for generating this wiki page:
- src/portal/PACKAGE.md
- src/portal/angular.json
- src/portal/src/app/base/project/repository/artifact/artifact.module.ts
- src/portal/src/app/base/project/repository/artifact/artifact-additions/summary/summary.component.ts
- src/portal/src/app/base/project/repository/artifact/artifact-summary.component.ts
- src/portal/README.md
- src/portal/scripts/convert-yaml-to-json.js
- src/portal/app-swagger-ui/src/index.js
Introduction
The Harbor Portal is a web-based graphical user interface designed for managing container images and OCI artifacts. It is built using the Angular framework and the Clarity Design System, providing a professional and consistent user experience for administrative operations, repository browsing, and project management.
Sources: src/portal/README.md:5-7, README.md:53-54
The architecture follows a modular Angular approach, leveraging a robust build pipeline that includes automated API client generation from Swagger specifications and integration with specialized tools for Markdown rendering and internationalization.
Sources: src/portal/PACKAGE.md:14-118, src/portal/README.md:25-30
Core Framework and Dependencies
The frontend is built on Angular 16 and utilizes Clarity (v15/v6) for its UI components and design patterns.
Key Technology Stack
| Dependency | Purpose |
|---|---|
| Angular (^16.0.2) | Primary application framework (Animations, Forms, Router). |
| Clarity (@clr/angular 15.4.0) | UI Component library and design system. |
| ngx-translate | Internationalization (i18n) support. |
| ng-swagger-gen | Generates TypeScript API services and models from swagger.yaml. |
| ngx-markdown | Renders README and documentation files within the UI. |
| ngx-clipboard | Handles "copy to clipboard" functionality for pull commands. |
Sources: src/portal/PACKAGE.md:58-100
Project Build and Code Generation
Harbor Next employs a specific pre-build process to ensure the frontend stays in sync with the backend RESTful APIs.
API Client Generation Flow
The system converts the backend's swagger.yaml into JSON format, which is then used to generate typed services and data models. This ensures type safety when the frontend interacts with Harbor's core services.
The script convert-yaml-to-json.js traverses the Swagger object to enhance properties like additionalProperties and strips the host field to allow the UI to use relative paths for backend APIs.
Sources: src/portal/scripts/convert-yaml-to-json.js:8-43, src/portal/PACKAGE.md:14-16
Component Architecture and Routing
The application is structured into functional modules, such as the ArtifactModule, which manages the display and interaction with container images and other OCI artifacts.
Artifact Module Structure
The ArtifactModule defines a complex routing hierarchy for navigating between repositories, artifact lists, and detailed artifact summaries.
| Route Path | Component | Description |
|---|---|---|
:repo/artifacts-tab | ArtifactListTabComponent | Displays a list of artifacts within a repository. |
:repo/artifacts-tab/artifacts/:digest | ArtifactSummaryComponent | Shows detailed information for a specific artifact. |
info-tab | ArtifactInfoComponent | Detailed metadata tab for artifacts. |
Sources: src/portal/src/app/base/project/repository/artifact/artifact.module.ts:50-93
Data Flow: Artifact Details
When a user navigates to an artifact, the ArtifactDetailRoutingResolverService resolves the necessary data before the component loads.
Specialized Modules and Features
Content Rendering (Markdown)
The Portal uses a SummaryComponent to fetch and render README files or other documentation associated with artifacts (like Helm charts). It utilizes the AdditionsService to retrieve content via links provided in the artifact metadata.
Sources: src/portal/src/app/base/project/repository/artifact/artifact-additions/summary/summary.component.ts:35-65
Swagger UI Integration
An embedded Swagger UI is available for developers to test APIs directly. It is built as a separate project using Webpack and fetches /swagger.json to render the interactive documentation. It includes a requestInterceptor to inject CSRF tokens from localStorage into non-safe HTTP methods (POST, PUT, DELETE).
Sources: src/portal/app-swagger-ui/src/index.js:10-40, README.md:65-67
Development and Deployment
The frontend development environment supports hot-reloading and proxy configuration to redirect API calls to a local or remote Harbor instance.
Development Workflow
- Dependency Management: Uses
npmorbunfor package installation. - Environment Configuration:
proxy.config.mjsmanages API targets via environment variables likeHARBOR_PROXY_TARGET. - Build Commands:
npm run start: Launches the development server onhttp://localhost:4200.npm run test: Executes unit tests with Karma and Jasmine.npm run build: Generates the production-readydistfolder.
Sources: src/portal/README.md:12-38, src/portal/PACKAGE.md:18-42, src/portal/angular.json:30-60
Conclusion
The Harbor Portal's architecture is a modern, modular Angular application that prioritizes maintainability through automated code generation and a standardized UI component library (Clarity). By separating concerns into distinct modules like ArtifactModule and leveraging resolvers for data pre-fetching, it ensures a responsive and type-safe interface for managing complex OCI registry operations.
Sources: src/portal/src/app/base/project/repository/artifact/artifact.module.ts, src/portal/PACKAGE.md