View on GitHub


Eclipse Winery project

Repository: Angular UI

In Angular, the project structure should be very flat. However, because we have a very complex and often nested system, this structure is also present in the angular app.


Entry into the angular app is the WineryRepositoryComponent. It contains the standard header and the router outlet. All main routes are configured in the WineryRepositoryRoutingModule which is bootstrapped in the WineryRepositoryModule.

Angular Component Diagram source

Main Routes

The main routes are other, notfound and :section, whereas :section stands for all possible types that are specified in TOSCA (e.g. Service Templates, Node Types, Relationship Types, etc.). Besides the components for the main routes, the Winery specific modules can be found here. These are, for example, a generic uploader component winery-uploader or the winery-modal.


The SectionComponent is responsible for displaying all instances available for the specific :section. It allows to add new components and group them by namespace.


The OtherComponent only provides some links to reach all definitions children.


The InstanceComponent is a container to display all TOSCA specific content, including the admin section, equally. Similarly to the WineryRepositoryComponent, it provides the header for each component according to their definitions only. All subcomponents are also rendered in the router outlet.


Components for the management of the repository are declared here. Internally, they are all depending on the same component (winery-instance-type-with-short-name) which gets the backend-urls depending on the current route.

ArtifactTemplates, …, ServiceTemplates

Here, all components specific to one definitions children are declared.

Shared Components

All components which are used in more than one definitions children are declared here.

Winery Modules

There are some modules which are used in almost every component, like the WineryModalModule or WineryNotificationService. All of them can be found in the same level as the main routes. Besides those modules there are some additional utilities like the ExistService, pipes or a validator.

API Documentation

The API documentation is automatically generated by running the build process: npm run build. Afterwards, the documentation can be found in org.eclipse.winery.repository.ui/dist/doc/index.html. It is also shown by using the shortcut CTRL + Q (in IntelliJ) to see documented members/methods/classes.


Copyright (c) 2017 Contributors to the Eclipse Foundation

See the NOTICE file(s) distributed with this work for additional information regarding copyright ownership.

This program and the accompanying materials are made available under the terms of the Eclipse Public License 2.0 which is available at, or the Apache Software License 2.0 which is available at

SPDX-License-Identifier: EPL-2.0 OR Apache-2.0