Catalog

• The Catalog section is found at the bottom of the web console homepage.
• The Catalog contains catalog items and provides the means to browse, sort, and filter them.

Browse Catalog

• Initially, upon arriving on the page, the All section is highlighted, underlined and expanded, with the catalog items sorted alphabetically by name.

• Any tabs that have subcategories of catalog items will have those subcategories displayed as tiles.
• These tabs should also contain an a All tile for catalog items from all subcategories.
• Clicking on a subcategory tile will open a panel that contains the catalog items.
• By default, the All tile should be collapsed.
• If a category contains only a single subcategory
  • The subcategory should be expanded by default
  • No All tile should exist for that category

• Clicking on an expanded tile should collapse that tile.

• Deploy Image, Import YAML, and Select from Project links are available on the right side of the catalog primary categories bar. These links are collapsed into a dropdown on smaller viewports

Deploy Image, Import YAML, and Select from Project

• These three options are available to the far right of the “Browse Catalog” row and displayed in white text.
• Clicking either link will trigger the relevant overlay panel actions.
• Note: When adding from the catalog through one of these methods, users are prompted to select which project to add to. This option does not appear when adding from the console

Deploy Image

• Deploy Image will bring down an overlay panel with the option to specify image stream tags, or to search for and add an image by name.

Import YAML/JSON

• Import YAML will bring down an overlay panel with the option to browse for a file, or add a file to an editable text area.

Select from Project

• Select from project will bring down an overlay panel with the option to select a project

• If the selected project has no templates or images, an empty state pattern will be shown.

• Once a project has been selected, the user can choose a builder image or template from that project to order as usual.

Selection and Hover States

• The selected primary category will be blue with an underline.
• On hover, the primary categories are highlighted in a lighter blue.
• The selected subcategory icon will be a darker shade of the remaining unselected icons (light grey).
• On hover, the subcategory text and icon will be blue.
• Deploy Image and Import YAML are highlighted in a lighter blue on hover.
• On hover, catalog items will have a blue circle around the icon and blue text.

Implementation Details

• Administrators should have the ability to determine which catalog items are available to users.
• Disabled catalog items should not appear.
• The All category should be the first primary category and it should always be displayed.
• For remaining primary category tabs, if no catalog items exist, the tab should be hidden.
• Initially, category tabs will be limited to the defined list shown, with the addition of an Other category for customers to place resources that don’t fit in an existing category.
  • Note: Eventually, customers will have the capability to add their own custom category tabs.
• Some primary categories will have a secondary level of categorization available.
• For secondary levels of categorization, there should again be an Other category if there are items to display (not shown in mockup).

Responsive States

• On smaller viewports the tiles may need to wrap.
• Expanding a tile will always display the white caret with the catalog contents below the tile.

Mobile

• On mobile, the catalog tabs should stack with arrows to the right.
• If subcategories exist, selecting the primary category will bring users to another screen to view subcategories.
• On mobile, the subcategories will have the same visual representation as the primary categories.
• Clicking back will bring users back to the home page with all primary tabs listed.
• Selecting a subcategory will bring users to another screen to view catalog items by scrolling.
• Note: When subcategories do not exist for a tab, selecting a primary category will bring the user directly to scroll through the catalog items.