Web UI features and common tasks - AWS Perspective

Web UI features and common tasks

The AWS Perspective solution deploys an AWS Amplify web UI to build architecture diagrams of your services and resources. This section provides details about the features of the web UI and how to navigate it.

Side navigation pane

If the left pane is not visible, choose the menu icon to expand the list of options. The side navigation pane provides the following functionalities.

Option Sub options Description
Resources All Select resources to visualize. Resources are grouped by service. Select to visualize individual resources.
Types Select resources to visualize. Resources are grouped by type. Select to visualize all resources of a particular type, for example, all Lambda functions.
Costs & Usage Query Build a query to run against Cost & Usage Reports (CURs). Requires extra setup.
Generate cost report Produces a cost report detailing the incurred costs of the resources in your architecture diagram.
Architecture Diagrams Manage Save, load, and delete architecture diagrams.
Actions Export Export the architecture diagram in a variety of formats including CSV, JSON, PNG, and Draw.io.
Clear Map This will remove all resources from the current architecture diagram.
Preferences Filters Filters that can be applied to the data. These are persisted to S3 to allow them to be saved across sessions.
Settings Imported Regions Manage the Regions that AWS Perspective can discover resources in.
Cost Settings Activate/deactivate the Cost processing feature. It also contains links for help setting up the feature.
Get in touch Feature Request Provide details of a new feature they would like to view in AWS Perspective.
Raise an issue Log an issue that they have encountered on our GitHub repository page.

AWS Perspective architecture diagrams

Architecture diagrams generated by AWS Perspective appear in the main body of the web UI. Each architecture diagram displays the selected resources and the relationships between those resources. Resource relationships are presented as edges between resources in the architecture diagram.

AWS Perspective architecture diagrams are interactive, you can drag resources to another position and zoom in or out to produce the architecture diagram to suit your needs.

Build an AWS Perspective architecture diagram

Note

Before you start this exercise, ensure you have imported the AWS Perspective deployment Region as suggested in step 6 of the Log in procedure.

The following steps walk you through building an architecture diagram.

  1. Under the Resources category on the left pane, select All.

    If the left pane is not visible, choose the menu icon to expand the list.

  2. Choose Lambda to expand the list of resources directly related to Lambda.

    In the AWS Perspective account, there are both environment variables and functions.

  3. Choose Function to expand the list of Lambda functions.

  4. Choose aws-perspective-<account-ID>-<Region>-GremlinFunction. AWS Perspective then builds the architecture diagram.


          
            AWS Perspective architecture diagram for the
            GremlinFunction Lambda function

Figure 10: AWS Perspective architecture diagram for the GremlinFunction Lambda function

The GremlinFunction Lambda function appears at the center of the AWS Perspective architecture diagram, with a line to each related resource. The architecture diagram groups the resources by account, Region, Availability Zone, VPC, subnet, and type.

You can explore the workload by right-clicking on the resources and selecting Expand. This gathers the related resources for each resource selected.

To learn more about a resource, right-click and select Show resource details to view the configuration information about the selected resource.

Context menu

Use the context menu to explore AWS Perspective architecture diagrams. Select a resource in the architecture diagram.

Option Sub options Description
Focus Redraw the visualization to show this resource and its immediate dependencies, removing everything else.
Expand Selected resources View additional resource dependencies and redraw the architecture diagram to include the resource dependencies of the selected resource(s).
This resource
Remove Remove this resource from the current visualization.
Show resource details Opens a dialog box containing the configuration details for the selected resource.

After choosing a resource grouping (for example, a group of tags), the following options become available.

Option Sub options Description
Collapse All Collapse the group of resources down to one icon.
Remove All Remove all the resources in the group.
Diagram Clear Remove the architecture diagram and leave a blank canvas.
Fit Reset the viewport on the canvas to bring the contents to the center.

The following table shows the options available after choosing an empty section of the canvas.

Option Sub-options Description
Diagram Clear Remove the architecture diagram and leave a blank canvas.
Fit Reset the viewport on the canvas to bring the contents to the center.
Costs & usage Cost report Produces a report detailing the costs of the resources in the architecture diagram.
Resources Group resources Provides a layout with resources grouped by type.
Edges Show or hide the edges in the architecture diagram.

Resource Details dialog box

The Resource details dialog box is accessed from the context menu and provides the following:

  • High level information about the selected resource.

  • A link to access the resource within the AWS Management Console, when possible.

  • The data object that we have stored for that resource as JSON.

The structure and content of the resource details dialog depends on the type of resource being viewed.

To view a JSON formatted document holding the data about a resource, expand Raw data.


            Resource details box

Figure 11: Resource details box

Note: You can also view a high-level overview of a resource without selecting it. When you hover over a resource, a small detail box appears towards the side of the screen containing some key details about the resource.

Visualize AWS resources by resource type

  1. Under the Resources category on the left pane, select Types.

  2. Choose Lambda to expand the list of resources directly related to Lambda.

    In the AWS Perspective Region, there are both Environment variables and Functions.

  3. Choose Function to build an architecture diagram of all Lambda functions discovered across your imported Regions. The architecture diagram will be grouped by accounts and Regions. Figure 12 is an example architecture diagram.


            AWS Perspective architecture diagram of Lambda functions

Figure 12: AWS Perspective architecture diagram of Lambda functions

Note

If resources are not appearing, verify if you have any filters applied.

Search for resources

The Search bar is useful for quickly finding AWS resources. Imagine that a CloudWatch log file contains the name of an EC2 instance that has terminated and you want to view potentially affected resources. Simply search for the instance ID.

  1. Enter your search term into the search bar at the top of the screen. The autocomplete dropdown helps you narrow down the possible matches.

  2. Select the resource to visualize from the autocomplete dropdown.

After a brief pause, an AWS Perspective architecture diagram builds showing the resource and its related resources.

Costs & Usage

The Costs & Usage feature lets you query for estimated costs associated to individual or grouped resources in an account. This feature returns unblended costs from the Cost and Usage Report. For details about how to set up the Cost and Usage Report with AWS Perspective, refer to Step 4. Set up the cost feature.

View costs by resource

A quick way to view the resources that have incurred the highest cost is to use the Query all Resources option. This will return a list of resources ordered by the estimated cost (highest first)

  1. Sign in to AWS Perspective (or refresh the page if it’s already loaded). Refer to Log in for the URL.

  2. Under the Costs & Usage category on the left pane, select Query.

  3. Under Query, select Query all Resources.

  4. Select the Account IDs, Regions, and a To/From date range, and then choose Submit.

    The Summary panel contains the following information:

    • Estimated AWS costs

    • Number of AWS resources

    • Date range

    The Resources panel contains the following information:

    • Resource

    • Estimated cost

    • Account ID

    • Region

  5. Select a single resource or multiple resources, and then choose Add to diagram to display them on a canvas.

View costs by service

The Query by Service option returns estimated costs broken down by service type. Select the service, for example AWS Lambda, and the estimated cost returns.

  1. Under the Costs & Usage category on the left pane, select Query.

  2. Under Query, select Query by Service.

  3. Select the Account IDs, Regions, Service name, and a To/From date range, and then choose Submit.

    The Summary panel contains the following information:

    • Estimated AWS costs

    • Number of AWS Resources

    • Date range

    The Resources panel contains the following information:

    • Resource

    • Estimated cost

    • Account ID

    • Region

View costs by ARN

The Query by ARN option provides estimated cost information for particular Amazon Resource Names (ARNs).

  1. Under the Costs & Usage category on the left pane, select Query.

  2. Under Query, select Query by ARN.

  3. Select the Account Ids, Regions, Add Resource ARN, and a To/From date range, and then choose Submit.

    The Summary panel contains the following information:

    • Estimated AWS costs

    • Number of AWS Resources

    • Date range

    The Resources panel contains the following information:

    • Resource

    • Estimated cost

    • Account ID

    • Region

Generate a Cost Report

To view estimated cost information for your workloads, you can generate a high-level cost report.

  1. Follow the steps to Build an AWS Perspective architecture diagram.

  2. Under the Costs & Usage category on the left pane, select Generate cost report. Alternatively, you can right-click on the canvas, select Costs & usage, and then choose Cost report.

    A dialog opens containing an overview of the resources with their incurred a costs. It provides the following options:

    1. To rerun the query for a specific time period, under Time period, in the From/To box, change the date.

    2. To export the Resources table as a Comma Seperated Value (CSV) file, select Actions, and then choose Export CSV.

    3. To build a line chart, select resources from the Resources table, select Actions, and then choose Update graph.

Export AWS Perspective architecture diagrams

Export an AWS Perspective architecture diagram as CSV

  1. Sign in to AWS Perspective (or refresh the page if it’s already loaded). Refer to Log in for the URL.

  2. Under the Actions category on the left pane, under Export, select CSV. The Export Graph dialog box loads a list of resources that are about to be exported.

  3. Enter a file name and change the delimiter, if required.

  4. Choose Export and the CSV file downloads to your computer.

Export an AWS Perspective architecture diagram as PNG

  1. Under the Actions category on the left pane, under Export, select PNG.

  2. Enter a file name.

  3. Choose Download to save it to your computer.

Export an AWS Perspective architecture diagram as JSON

  1. Under the Actions category on the left pane, under Export, select JSON.

  2. Enter a file name.

  3. Choose Download to save it to your computer.

Export an AWS Perspective architecture diagram to draw.io

Under the Actions category on the left pane, under Export, select Drawio.

Draw.io opens in a new tab displaying your architecture diagram.

Saving, downloading, and filtering

Save an AWS Perspective architecture diagram

You can save architecture diagrams created in AWS Perspective to S3. Saving files allows you to continue editing them later.

  1. Sign in to AWS Perspective (or refresh the page if it’s already loaded). Refer to Log in for the URL.

  2. Under the Architecture diagrams category on the left pane, select Manage.

  3. On the You tab, enter a file name and choose Save. Only you can view the saved architecture diagram.

If you would like other users in your deployment of AWS Perspective to have access to the architecture diagram, select the All users tab and save your file.

Download an AWS Perspective architecture diagram

  1. Under the Architecture diagrams category on the left pane, select Manage.

  2. Choose the relevant tab, You or All users. A list of architecture diagrams available to you appears.

  3. Choose a diagram and choose Preview to verify the diagram in the preview section.

  4. When you are ready to load the diagram, choose Download. The diagram renders in the main canvas for you to start editing.

Filtering in AWS Perspective

There are two ways that you can filter the data in AWS Perspective: by account and Region, and by resource type.

Accounts & Regions filter

These filters allow you to restrict the accounts and Regions you view data from.

View all Regions in an account

  1. Under the Preferences category on the left pane, select Filters.

  2. Choose the Accounts & Regions tab.

  3. Locate the account in the Accounts table.

  4. Toggle the Show column.

Display or hide global resources

  1. Under the Preferences category on the left pane, select Filters.

  2. Choose the Accounts & Regions tab.

  3. Locate the account to view global resources.

  4. Toggle the Show global resources column.

Display or hide Regions

  1. Under the Preferences category on the left pane, select Filters.

  2. Choose the Accounts & Regions tab.

  3. Locate the account that contains the Region to display or hide.

  4. Select the account.

  5. The Regions table updates to show discoverable Regions.

  6. Locate the Region to update.

  7. Toggle the Show column.

Resource Types filter

These filters allow you to show or hide particular resource types.

Show or hide a resource type

  1. Under the Preferences category on the left pane, select Filters.

  2. Choose the Resource Types tab.

  3. Search for the resource type you want to filter by.

  4. Toggle the Show column.

Show all resources types

  1. Under the Preferences category on the left pane, select Filters.

  2. Choose the Resource Types tab.

  3. Choose Include all.

Hide all resources types

This can be helpful to select a small subset of resource types to display.

  1. Under the Preferences category on the left pane, select Filters.

  2. Choose the Resource Types tab.

  3. Choose Exclude all.

Filter badge

A badge displayed under the Preferences category on the left pane, next to Filters shows the number of filters currently in action.

If there is no badge next to Filters then no filters have been applied and zero resources will appear. You must select the account and Regions you want to view resources from.