Overview
The application uses two related but distinct concepts to construct pages:
- PageLayout components: Defines how the page is structured at different levels of the Information Architecture, and is what you would visually see within the application.
- PageContent component: Defines how pages are assembled in the application by selecting and configuring the appropriate layout. This is a non-visual component, used by engineers when setting a page in Octopus portal.
Page Layout Components
Page Layout components provide consistent, opinionated page structure across the application. They define where the navigation, headings, content and errors appear, but do not decide which layouts to use.
Layouts are organized by page level.
Level 1 Page Layout
Level 1 pages are typically associated with top-level navigation areas, such as Projects, Deployment Targets, and Tenants. It serves as the primary structure for the application's main areas.
A level 1 page uses the Level1PageLayout component. This provides slots for specific types of content to ensure common elements are placed in the same space across the application.
Level 2 Page Layout
Level 2 pages are typically associated with second-level areas within the application, such as Releases, Environments, and Workers. It provides the framework for subpages that branch off from the main Areas and have additional requirements, such as heading information and optional side navigation.
A Level 2 Page uses the Level2OuterPageLayout and the Level2InnerPageLayout. The Outer page layout component wraps the inner page layout component. Both provide slots for specific areas of content to ensure elements are placed consistently across the application.
Page Content Component
PageContent is a Octopus portal specific, non visual, component that uses the PageLayout components.
It has two core functions:
- Layout Selection: Chooses Level1PageLayout or Level2InnerPageLayout based on the page’s PageRegistration.
- Error Aggregation: Aggregates page-level errors that will then be displayed in the selected layout's Errors block.
Anatomy (Page Layout)
Level 1 Page Layout
The basic structure begins with the Level1PageLayout, which includes pre-determined areas for Errors, Callouts, Headers, filters, and Content.
Level 2 Page Layout
Level 2 Page Layouts require the use of both the Level2OuterPageLayout and the Level2InnerPageLayout, which are designed to work together.
Level 2 Outer Page Layout
Provides the high-level structure and defines the overall layout. Level2OuterPageLayout includes slots for common types of content, including headings and side navigation. It acts as a container that organizes major sections and ensures alignment across different pages.
Level 2 Inner Page Layout
Nests within the Level2OuterPageLayout handle the arrangement of specific content slots and ensure that content such as headings, callouts, and other supporting elements is positioned correctly.
Help and support