= Web UI features and common tasks

The Workload Discovery on AWS solution includes a web interface for building 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.

[stripes="none" options="header"]
|===
|Option |Sub options |Description
.3+|Explore | Resources | Select resources to visualize. The resulting visualization can be saved as a Diagram.
|Views | Select resources to visualize from a subset of resource types, AWS Accounts, and AWS Regions. Views can be saved and are automatically regenerated using current data.
|Costs | Build a query to run against Cost & Usage Reports (CURs).

Requires extra https://docs.aws.amazon.com/solutions/latest/workload-discovery-on-aws/set-up-the-cost-feature.html[setup].
|Diagrams | Manage | Create a new Diagram; Open or Delete an existing Diagram.
|Configure | Accounts | Manage the AWS Accounts and Regions that Workload Discovery on AWS will discover resources in.
.3+||Feature Request | Provide details of a new feature you would like to see in Workload Discovery on AWS.
|Raise an issue | Log an issue that you have encountered on our link:https://github.com/awslabs/workload-discovery-on-aws[GitHub repository].
|Sign out | End your Workload Discovery on AWS session. You will need to sign in to resume using Workload Discovery.
|===

== Architecture Diagrams

Architecture diagrams generated by Workload Discovery on AWS 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.

Workload Discovery on AWS 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_architecture_diagram]]
=== Build an architecture diagram

IMPORTANT: Before you start this exercise, ensure you have imported the Workload Discovery on AWS deployment Region as suggested in step 6 of the https://docs.aws.amazon.com/solutions/latest/workload-discovery-on-aws/log-in-to-aws-perspective.html[Log in] procedure.

The following steps walk you through building an architecture diagram.

. Under the *Explore* category on the left pane, select *Resources*.
+
If the left pane is not visible, choose the menu icon to expand the list.

. In the _Resource Filters_ section, select *Choose All* for both _Accounts_ and _Regions_.

. In the _Resources types_ section, choose the `AWS::Lambda::Function` type to display a list of Lambda Function resources.

. In the _Resources_ section, search for `GremlinAppSyncFunction` and select the Lambda function.

. Choose *Add to Diagram*. Workload Discovery on AWS will display a preview of the architecture diagram.

. In the _Create Diagram_ section, set the following values:
+
- *Visibility:* Private
- *Name:* Gremlin Function Demo

. Choose *Create*

.Workload Discovery on AWS architecture diagram for the GremlinAppSyncFunction Lambda function
image::gremlin-lamdba-function.png[]

The `GremlinAppSyncFunction` Lambda function appears at the center of the Workload Discovery on AWS 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 double-clicking the resource. This gathers the related resources for each resource selected.

=== Actions menu

Use the actions menu to explore Workload Discovery on AWS architecture diagrams. To interact with resources, first select a resource on the architecture diagram.

|===
|Option | Sub options | Description
.3+|*Resources*|*Focus* | Redraw the visualization to show the selected resource and its immediate dependencies, removing everything else.
|*Expand* | View additional resource dependencies and redraw the architecture diagram to include the resource dependencies of the selected resource(s).
|*Remove* | Remove the selected resource from the current visualization.

.4+|*Diagram* | *Group* | Arrange the Diagram layout with resources grouped by type.
|*Clear* |Remove the architecture diagram and leave a blank canvas.
|*Fit* |Reset the viewport on the canvas to bring the contents to the center.
|*Export* | Create a JSON, CSV, or Diagrams.net file containing the current Diagram.
2+|*Save* | Saves the current Diagram state to the server.
2+|*Delete* | Deletes the current Diagram from the server.
|===

=== Search and add resources

Additional resources can be added to an existing diagram using the _Add Resource_ field.

. Open or create a Diagram

. Choose *Find a resource*

. Begin typing the name, or ARN, of the resource you want to add
+
A menu appears with search results as you type.

. When you see the resource you want in the menu, select it

The resource and its dependencies will then be added to the current diagram.

=== Selected Resources Pane

The *Selected resources* pane is accessed from the bottom of the Diagram display screen and provides the following:

* High level information about selected resources.
* 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
image::resource-details.png[]

=== Filters

Filters can be applied to the resources displayed on diagrams in Workload Discovery on AWS. You can use filters to include only the resources on your diagram that are relevant to you.

A filter can be specified on three criteria: AWS account, AWS region, and resource types. The resources that match the filter criteria can either be hidden from the diagram, or shown exclusively whilst hiding other resources that do not match.


To apply a filter:

. Sign in to Workload Discovery on AWS
. Open or create a Diagram
. Choose the *Diagram Settings* section, found below the diagram
. Select the Filter type, and specify the criteria -- Accounts, Regions, and/or Resource Types -- you want to filter by.
+
If you leave a criteria field blank, it will not be used for the filter.
. Choose *Apply*
. The filter is applied to the current resources on the diagram and interactions to the diagram that follow.

When you apply a filter, non-conforming resources are permanently removed from the diagram. To display the removed resources again, you will have to modify the filter then re-add the resources to the diagram.

TIP: You can apply a filter temporarily by **not saving** the diagram after adding the filter. Reloading the diagram will load the previously saved version.

=== Save a diagram

When you create a *Diagram* in Workload Discovery on AWS it is saved to Amazon S3. You can access saved diagrams at a later time to view or edit them further.

To create a Diagram:

. Choose *Diagrams -> Manage* in the left pane.
. Choose *Create*
. Specify the *Visibility* you want to other users of your Workload Discovery on AWS instance.
+
.Visibility setting permissions
|===
| Visibility Setting | Effect
| Public  | Can be accessed and modified by any signed-in user
| Private | Can only be accessed and modified by the user who created it
|===
. Specify a *Name* for your diagram. The name must be unique.
. Choose *Create*

As you modify an existing Diagram, select *Actions -> Save* to save your changes.


=== Export a diagram

NOTE: You need to have <<build_an_architecture_diagram, built a diagram>> first to be able to export it.

. Sign in to Workload Discovery on AWS

. Select *Diagrams -> Manage* in the left pane.

. Select the Diagram you want to export.

. Select *Actions -> Diagram -> Export*.

. Select the Export type, and a File name.

. Select *Export*.
+
For _CSV_ and _JSON_ export types, the export file will be saved on your computer. For _Diagrams.net_ exports, a copy of the diagram will open directly in your web browser on Diagrams.net.

== Views

Views are lists of resources that automatically update based on criteria you set. You can use views to see a consolidated list of your resources across multiple AWS accounts and regions. The resource list can then be used to create diagrams.

=== Create a View

. Choose *Explore -> Views* in the side navigation pane
. Choose *Create*
. In the _Resource Filters_ section, select which AWS accounts and regions you want resource to appear from in the view.
. In the _Resources types_ section, select the types of resources you want to appear in the view.
. In the _View Details_ section, specify a name for the view.
+
View names must be unique to a user in a Workload Discovery on AWS instance.
. Choose *Save*.
. Workload Discovery on AWS will now show the View including the resource list

.A View showing IAM Roles and Policies
image::view-example.png[]


== Costs

The Costs feature lets you query for estimated costs associated to individual or grouped resources in an account.
This feature shows unblended costs from the Cost and Usage Report.

IMPORTANT: To use the Costs feature, you must complete https://docs.aws.amazon.com/solutions/latest/workload-discovery-on-aws/set-up-the-cost-feature.html[additional steps to 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)

. Sign in to Workload Discovery on AWS

. Select *Explore -> Costs* on the left pane

. In the _Query type_ section, select *Query all Resources*

. In the _Accounts & Regions_ section, select the Account IDs, Regions, and a To/From date range

. Choose *Calculate Costs*

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 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.

. Sign in to Workload Discovery on AWS

. Select *Explore -> Costs* on the left pane

. In the _Query type_ section, select *Query by Service*

. In the _Accounts & Regions_ section, select the Account IDs, Regions, Service name, and a To/From date range.

. In the _Service name_ section, select the Service you want to see cost estimates for.

. Choose *Calculate Costs*

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).

. Sign in to Workload Discovery on AWS

. Select *Explore -> Costs* on the left pane

. In the _Query type_ section, select *Query by ARN or Resource Id*

. In the _Accounts & Regions_ section, select the Account IDs, Regions, and a To/From date range

. In the _AWS Resource_ section, add the Resource ID or Amazon Resource Name (ARN) of resources you want to query.

. Choose *Calculate Costs*

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.

. Follow the steps to <<build_an_architecture_diagram,Build a Workload Discovery on AWS architecture diagram>>.

. Choose *View Cost Report*.
+
A dialog opens containing an overview of the resources with their incurred a costs.
It provides the following options:
+
- To rerun the query for a specific time period, under **Cost Data Time Period**, in the **From/To** box, change the date.

- To export the **Resources** table as a Comma Seperated Value (CSV) file, choose **Export CSV**.

- To build a line chart, select resources from the **Resources**
table, and then choose **Update Graph**.
