The manage a resource pattern provides the configuration and management of a single Azure resource.
Users wants to manage all aspects of an Azure resoruce.
Users manage many different types of Azure resources. For settings that are common across resources, users expect a common interaction. For settings that are unique to a resource, users want a way to easily find those settings.
The Manage a Resource pattern is used to configure and manage a single Azure resource by using a resource menu to navigate the resource blades. The manage a resource page is typically opened from the browse resources page, when the user wants to see more details or make a change to a specific resource. The manage a resource page can also be opened from related resources that link to it.
- Resource blade
- Resource detail
- Resource menu
- Resource manage
These Azure resources are good examples of this design pattern. Links to specific resources cannot be included in the documentation, so find a resource of this type and navigate to it to see the resource management experience.
- Redis cache
- Virtual machine
Managing a single azure resource.
The manage a resource pattern is a full screen experience composed of a resource menu and corresponding resource blades. Settings that are common across resources have a standard menu item and menu location so that users can easily find them.
A manage a resource experience usually contains:
- Resource menu with common and specific items to manage all aspects of this resource
- Resource pages opened from the menu items, commands or links
When a resource is opened in azure the resource menu is loaded and the Overview page for the resource is displayed. The user can then select other menu items .
The resource menu offers a way to navigate to all pages related to the resource. The navigation includes pages that are common to all resources throughout the portal. Your resource will get those "for free," although some common pages require onboarding by the resource provider. You can have additional pages for your resource. Refer to the table below to make sure each item is grouped properly. Learn more Resource Menu
Azure Portal Toolkit: ResourceMenu design in figma
(Top level-no group label)
Settings - Configuration settings
any resource-specific groups and items Monitoring - Services that give visibility into health and ops
Support + troubleshooting - Tools to help users find and resolve issues
|
Each menu item opens a page that allows the user to drill deeper for more information. Monitoring pages and Resource health require the resource provider to do additional onboarding.
The overview page is the home page for a resource. It displays key information and actions for the resource. The overview page should contain a toolbar, essentials panel, and content area. See more details on overview page layout in the overview page design pattern
Toolbar commands should open context panes instead of narrow blades to avoid horizontal scrolling. The resource toolbar should contain commands common to all resources
- Delete - delete the current resource
- Move - a dropdown menu to move the current resource to a different resource group or subscription
- Refresh - refresh the overview page The resource toolbar should also contain resource-specific commands for easy access. Learn more Toolbar, Context pane
The essentials panel surfaces key properties that are common for all Azure resources and important resource specific properties. User feedback has shown that they rely heavily on the essentials panel for looking up information. Properties can contain links, and can open blades containing related resources (for example, resource group, subscription, hosting plan, etc). The links can also point to external sites.
The Essentials sections is divided in two well know parts, the left column contains properties common to all resources and the right column contains properties that are specific to this resource.
Ordering guidelines
Common resource properties - Left column | Resource-specific properties - Right column |
---|---|
Resource group Status Location Subscription name (link to subscription blade) Subscription ID |
Up to 5 resource-specific fields. Labels should be limited a maximum length of 150px. |
Tags Display and manage the tags assigned to this resource. Enabled with control option |
Learn more portalfx-extensions-essentials.md
Display guiding content and key information about the resource
- Must meet the performance bar – the overview page is the most viewed blade for your resource
- Content to guide the user to get the most from the resource
- Resource properties to indicate important resource configuration
- Resource performance metric graphs to indicate whether resource is functioning properly
-
Open context blades for user input and short summaries
-
Ensure you have efficient APIs to get data for your overview page
-
Do leverage a status bar for resource level or page level messaging (error, warning, info, upsell)
-
Don’t create resource-specific menu groups that have only one menu item
-
Don’t put so much information on your resource overview page that it fails the performance bar. You'll end up removing it to meet the bar.
-
Don’t build your overview page as a PDL blade
- Overvew page design-patterns-page-overview.md
- Create a Resource design-patterns-resource-create.md
- Browse Resources design-patterns-resource-browse.md
- Design guidelines top-design.md
- Resources and menus with more than 20,000 clicks over last 28 days View report
Developers can use the following information to get started implementing this pattern
-
Use the ResourceMenu SDK building block
-
Opt in to ResourceMenu using the AssetType
UseResourceMenu="true"
option- Assign keywords to your Resource Menu items to help the user find items
- Enable the recommended flags on your resource menu
enableSupportTroubleshootV2
enableProperties
enableAlerts
enableMetrics
enableLogs
enableDiagnostics
enableResourceHealth
- Make your resource menu static to help meet the performance bar
-
For you overview page
- Build your overview page as a template blade
- To display tags in the Essentials Panel, add this line to the options object
passed to the essentials control:
includeTags:true
- Make sure you have efficient APIs for overview data
- Include standard Overview page actions - Move, Delete and Refresh
-
Make sure your RP has onboarded to Geneva for metrics and logs so you can enable the monitoring menu items
-
Make sure your RP has onboarded to health services so you can enable the diagnose/troubleshooting and resource health menu items
Azure Portal Toolkit: ResourceMenu design in figma
- Resource Menu top-blades-resourcemenublade.md
- Essentials portalfx-controls-essentials.md
- Toolbar control portalfx-controls-toolbar.md
- Context Pane top-extensions-context-panes.md
- Properties page portalfx-blades-properties.md