Skip to content

Latest commit

 

History

History
239 lines (180 loc) · 12.8 KB

design-patterns-resource-browse.md

File metadata and controls

239 lines (180 loc) · 12.8 KB
Raw

Browse Resources

Last updated May 2021 (see Change Log)

The Browse Resources pattern provides discovery and management of resources across subscriptions and resource groups.

Context

Users need to locate and manage their Azure resources.

Problem

Managing Azure resources can be an overwhelming experience, particularly when users have several subscriptions using multiple types of resource. Users need an intuitive way to view, locate, navigate, and run commands against a specific resource or group of resources.

When users have not created a resource of a specific type, they need to learn its benefits and quickly create a resource.

Solution

The browse resources design pattern provides an intuitive way to view, navigate, and manage Azure resources.

Key resource properties are displayed in a table view with easy filtering, searching, sorting, grouping, and summarizing capabilities. The user can run commands by selecting one or more resources from the table and clicking on toolbar buttons. Selecting a resource from the table in the browse experience will open the resource and initiate the manage a resource experience.

Users can also create new resources from the browse experience. The “Add” command in the toolbar initiates the create a resource experience.

Previously known as

  • Resource list
  • Browse
  • Resource browse
  • Azure resource graph browse
  • ARG browse

 

Examples

Example images

Example images of the Browse Resources design pattern are shown below for List View, Summary View, and Empty View, respectively.

List View

Summary View

Empty View

Example uses

The following Azure Portal experiences are good examples of the Browse Resources design pattern: 

Use when

The Browse Resources design pattern should be used when showing a list of Azure resources.

Anatomy

The browse resources pattern is a full-screen experience that offers the following features:

  1. Title
  2. Toolbar: General Commands
  3. Toolbar: Selection Commands
  4. Search
  5. Filtering
  6. Column Grouping
  7. View Options
  8. Record Count
  9. Column Sorting
  10. Pagination

Behavior

Title

The title of a browse page is generally a descriptive, plural noun that reflects the items on the grid. Examples: “All resources", “Virtual machines", “Storage accounts".

Toolbar

The toolbar for the Browse Resource pattern contains commands that allow the user to manage their resources.

  1. The general commands are displayed as icons to the left of the separator, and do not require a table row selection before the user can click them.
  2. The selection commands displayed as icons to the right of the separator, are only enabled when one or more resource items are selected from the table.

The recommended general and selection commands for the Browse Resources toolbar are:

General Commands:

  • Create invokes the resource create experience
  • Manage View provides options to edit the table view, save a view, or revert to default
  • Refresh repopulates the table with fresh record data
  • Export to CSV downloads a .csv file of the table data currently in view

Selection Commands:

  • Assign tags enables tagging for the selected grid items
  • Delete will permanently remove the selected grid items from Azure

Additional general and selection commands can be added on a case-by-case basis but should always go to the left and right of the separator in the toolbar, respectively. When the "Feedback" command is added, it should be placed to the right of the Selection Commands with a separator in between.

  • Feedback opens a voluntary survey to collect feedback on the Azure experience

Search

Users can filter their resources by entering text into the type-ahead search bar below the toolbar. As the user types, the table is updated to only reflect records that are related to the given query.

Filtering

Users can filter the table results using the “pill-shaped” filters below the toolbar. If the default filters are not sufficient, the user can also create a custom filter using the “Add filter” option next to the default filters.

Column Grouping

Users can group the content of the table by resource type, subscription, resource group or location. Additional grouping options are provided depending on the resource domain (i.e. virtual machines, storage accounts). Grouping will reorganize the list of records into groups with parent-child relationships according to the user’s grouping selection.

View Options

Users have the option to view their resources in “List View” or “Summary View.” In list view, the user’s resources are displayed in a table with rows and columns. In summary view, the user’s resources are displayed on a map. To change between list and summary view, the user can click on the “Manage views” option from the toolbar and select “View as visuals.”

List View

  • The table columns represent key resource properties that help the user locate, navigate, and ultimately action on a resource. The default columns for the Browse Resources design pattern are resource name, resource group, location, and subscription.
  • If additional key resource properties are required to help the user navigate their resources, these columns can be added to the default table view. The user also has the ability to edit the key property columns displayed in the grid. When the user clicks on the “Manage view” then “Edit columns” command in the toolbar, they will be able to select from default and available columns.

Summary View

  • In summary view, users have the option of summarizing their resources by location, resource group, type, and subscription. They can also choose to visualize their summary in a map, bar chart, or donut chart.

Record Count

Users are provided with a record count just below the search bar that summarizes the number of table results.

Column Sorting

The user can sort the table based on the values in a particular column by clicking on the chronological sorting buttons (up or down) of a given column header.

Pagination

The user can page through additional resources in the table by clicking the “Next” button at the bottom of the table, or selecting a specific page of results.

Empty state

When the resource list has no items to display, the user is provided with information on how to get started. The icon, message, and link are generated from the asset definition.

Do

  • Consider user experience when picking table columns which influence sorting, filtering, and summarizing capabilities.
  • Include some common columns in your grid: Name, location and subscription
  • Include key resource properties as columns for the specific resource types
  • Include an empty message/link to explain the value of your resource

Don't

  • Don’t offer too many columns in the default view. Users can always add more if they need to.    

Related design guidelines

Research and usability

The browse resources pattern has been tested extensively. You can view an updated list of Browse Resources research at this HITs Link. A few of these studies are listed below for your convenience:

Telemetry

  • Browse by new (ARG) vs old (ARM) by resource type (View Report).
  • Browse frequency by resource type including empty browse counts over the last 7 days (View Report).

Implementation

Developers can use the following information to get started implementing this pattern:

Tips and tricks

  • Set your icon - AssetType icon Icon="{Resource CommonImages.snowmobile, Module=V1/ResourceTypes/Common/CommonLogos}"
  • Set your description for use in empty browse - AssetType description Description="{Resource AssetTypeNames.Snowmobile.linkTitle, Module=ClientResources}"
  • Empty message/link - AssetType link

Engineering Documentation

Change Log

May 2021

  • Updated the example images as well as the change from "Add" to "Create" in the command bar.

July 2020

  • Updated browse anatomy and examples with new design for ARG Browse. Added more detailed guidance and notes on behavior for pattern.

2018

  • Published