Harbor Web Portal Management: Complete Guide to the Angular UI

The Harbor web portal provides a single-page Angular application that wraps the Harbor container registry REST API, enabling browser-based management of projects, repositories, users, and system configuration.

The Harbor web portal serves as the primary graphical interface for the goharbor/harbor open-source container registry. Located in src/portal/ within the repository, this Angular application translates user interactions into HTTP calls against backend API endpoints, offering visual workflows for authentication, container image management, and administrative tasks without requiring command-line tools.

Authentication and Session Management

The portal handles identity verification through the /c/login endpoint, implemented in src/portal/src/app/account/sign-in/sign-in.component.ts. When users submit credentials, the component delegates to SessionService (src/portal/src/app/shared/services/session.service.ts), which manages session lifecycle operations including sign-in, sign-off, language switching via /language?lang=xx-XX, and current-user retrieval.

Upon successful authentication, the backend issues a session cookie that the browser stores for subsequent requests. The SessionService.retrieveUser() method then fetches the current user profile to determine permissions and route access. This service maintains the client-side state necessary for rendering role-specific navigation elements.

Project and Repository Navigation

After login, the left-side navigation displays the Projects section, powered by ProjectService (src/portal/src/app/shared/services/project.service.ts). This service communicates with GET /api/v2.0/projects to list, create, edit, or delete projects and their associated repositories.

Within the project view, users manage container images, trigger vulnerability scans, and configure content trust policies. The UI calls backend endpoints such as /projects/:projectId/repositories and /artifacts/:digest/scan to perform these operations. The portal remains a thin wrapper—all business logic resides in the core API defined in api/v2.0/swagger.yaml.

Administrative Configuration and Customization

Administrators access system-wide settings through the Administration menu, which utilizes UserService (src/portal/src/app/shared/services/user.service.ts) to manage accounts, groups, and role bindings via the /users API. The portal also supports visual customization through SkinableConfig (src/portal/src/app/services/skinable-config.service.ts), allowing administrators to upload custom JSON configurations that modify the login background, logo, and portal title via the /api/v2.0/skin endpoint.

The JobServiceDashboardHealthCheckService (src/portal/src/app/base/left-side-nav/job-service-dashboard/job-service-dashboard-health-check.service.ts) periodically polls core services to display real-time health status in the top-right dashboard.

Portal Architecture and Bootstrapping

The entry point src/portal/src/app/app.component.ts initializes the application by setting the theme, loading language preferences, and configuring the title before bootstrapping the Angular router. The UI implements the Clarity Design System for component styling and follows standard Angular CLI build configurations defined in src/portal/angular.json.

Unlike monolithic applications, the Harbor web portal contains no client-side business logic. It functions as a RESTful API consumer, translating user events into HTTP requests and updating the view based on JSON responses.

Code Examples: Portal Service Implementations

Authenticating Users Programmatically

The sign-in component demonstrates the authentication flow using SessionService:

// src/portal/src/app/account/sign-in/sign-in.component.ts
const cred = { principal: 'admin', password: 'Harbor12345' };
this.session.signIn(cred).subscribe(() => {
  // Backend creates session cookie
  this.session.retrieveUser().subscribe(() => {
    // UI routes to dashboard after user profile loads
    this.router.navigateByUrl('/harbor');
  });
});

Managing Projects and Repositories

The ProjectService provides CRUD operations for registry organization:

// src/portal/src/app/shared/services/project.service.ts

// Fetch all projects
public getProjects(): Observable<Project[]> {
  const url = `${CURRENT_BASE_HREF}/projects`;
  return this.http.get<Project[]>(url, HTTP_GET_OPTIONS);
}

// Create a new project
public createProject(name: string, publicProject: boolean): Observable<Project> {
  const payload = { project_name: name, public: publicProject };
  const url = `${CURRENT_BASE_HREF}/projects`;
  return this.http.post<Project>(url, payload, HTTP_JSON_OPTIONS);
}

Customizing Portal Appearance

Administrators can load custom skins through the SkinableConfig service:

// src/portal/src/app/services/skinable-config.service.ts
public getSkinConfig(): CustomStyle | null {
  const skinUrl = '/api/v2.0/skin';
  // Caches custom login backgrounds, titles, and logos
}

Switching Interface Languages

The SessionService supports runtime language changes:

// src/portal/src/app/shared/services/session.service.ts
this.session.switchLanguage('zh').subscribe(() => {
  this.translate.use('zh-CN');
});

Summary

• The Harbor web portal is an Angular single-page application located in src/portal/ that consumes the Harbor REST API.
• SessionService handles authentication via /c/login and maintains user state throughout the browser session.
• ProjectService manages container registry organization through endpoints like /api/v2.0/projects.
• SkinableConfig enables visual customization of the login page and portal branding without code changes.
• All UI actions are thin wrappers around backend API calls—the portal contains no embedded business logic.

Frequently Asked Questions

Where is the Harbor web portal source code located?

The source code resides in the src/portal/ directory of the goharbor/harbor repository. This directory contains the Angular application, including components, services, and the angular.json configuration file. The entry point for the application is src/portal/src/app/app.component.ts.

How does the Harbor UI handle user authentication?

The portal authenticates users through the /c/login endpoint using SessionService (src/portal/src/app/shared/services/session.service.ts). Upon successful login, the backend issues a session cookie that the browser stores for subsequent API requests. The service also retrieves the current user profile to determine access permissions and available routes.

Can I customize the Harbor web portal appearance?

Yes. Administrators can upload a custom skin JSON configuration that modifies the login background, logo, and portal title. The SkinableConfig service (src/portal/src/app/services/skinable-config.service.ts) loads these settings from /api/v2.0/skin at application startup, allowing branded deployments without modifying the Angular source code.

What framework powers the Harbor management interface?

The Harbor web portal is built with Angular and uses the Clarity Design System for UI components. It is a standard Angular CLI application defined in src/portal/angular.json, compiling TypeScript components like sign-in.component.ts and services like project.service.ts into a single-page application that runs entirely in the browser.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}