• Enable Harbor Registry
  • Test settings
• Code structure
• Sequence diagram
• Policy
• Frontend Development

Harbor Registry

Enable Harbor Registry

To enable the Harbor Registry, you must configure the Harbor integration for your group or project. The Harbor configuration requires four fields: url, project_name, username and password.

You can use GitLab CI/CD predefined variables along with the following Harbor Registry variables to request data from the Harbor instance.

Test settings

When testing the settings, a request is sent to /api/v2.0/ping of the Harbor instance. A successful test returns status code 200. This test is primarily to verify that the Harbor instance is configured correctly. It doesn’t verify that the username and password are correct.

Code structure

app/controllers/concerns/harbor
├── access.rb
├── artifact.rb
├── repository.rb
└── tag.rb

app/controllers/projects/harbor
├── application_controller.rb
├── artifacts_controller.rb
├── repositories_controller.rb
└── tags_controller.rb

app/controllers/groups/harbor
├── application_controller.rb
├── artifacts_controller.rb
├── repositories_controller.rb
└── tags_controller.rb

app/models/integrations/harbor.rb

app/serializers/integrations/harbor_serializers
├── artifact_entity.rb
├── artifact_serializer.rb
├── repository_entity.rb
├── repository_serializer.rb
├── tag_entity.rb
└── tag_serializer.rb

lib/gitlab/harbor
├── client.rb
└── query.rb

The controllers under app/controllers/projects/harbor and app/controllers/groups/harbor provide the API interface for front-end calls.

The modules under app/controllers/concerns/harbor provide some common methods used by controllers.

The Harbor integration model is under app/models/integrations, and it contains some configuration information for Harbor integration.

The serializers under app/serializers/integrations/harbor_serializers are used by the controllers under app/controllers/projects/harbor and app/controllers/groups/harbor, and they help controllers to serialize the JSON data in the response.

The lib/gitlab/harbor directory contains the Harbor client, which sends API requests to the Harbor instances to retrieve data.

Sequence diagram

Policy

Theread_harbor_registry policy for groups and projects is used to control whether users have access to Harbor Registry. This policy is enabled for every user with the Reporter role and above.

Frontend Development

The relevant front-end code is located in the app/assets/javascripts/packages_and_registries/harbor_registry/ directory. The file structure is as follows:

├── components
│   ├── details
│   │   ├── artifacts_list_row.vue
│   │   ├── artifacts_list.vue
│   │   └── details_header.vue
│   ├── list
│   │   ├── harbor_list_header.vue
│   │   ├── harbor_list_row.vue
│   │   └── harbor_list.vue
│   ├── tags
│   │   ├── tags_header.vue
│   │   ├── tags_list_row.vue
│   │   └── tags_list.vue
│   └── harbor_registry_breadcrumb.vue
├── constants
│   ├── common.js
│   ├── details.js
│   ├── index.js
│   └── list.js
├── pages
│   ├── details.vue
│   ├── harbor_tags.vue
│   ├── index.vue
│   └── list.vue
├── index.js
├── router.js
└── utils.js

The file harbor_registry/pages/index.vue only contains a single Vue router-view component, which navigates to the images list, image detail, and tags list pages via router.js.

Because registry_breadcrumb.vue component does not support multi-level paths, we have reimplemented the harbor_registry/components/harbor_registry_breadcrumb.vue component.

A multi-level breadcrumb component can be generated by passing a path array to harbor_registry_breadcrumb.vue.

const routeNameList = [];
const hrefList = [];

this.breadCrumbState.updateName(nameList);
this.breadCrumbState.updateHref(hrefList);