fix(discv2 docs): updating screenshots and navigation (#1762)

* updated screenshots

* updating screenshots

* added perf spanshots

* updated discovery and query builder

* added query builder instructions

* wrote query builder details on tags summary and cell

* relinked to tag info

* added space between stack trace

* explains what a saved query looks like

Co-authored-by: Mark Story <[email protected]>

* better meaning of what confirm means

Co-authored-by: Mark Story <[email protected]>

* generalize query blder ref

* syntax

Co-authored-by: Dora Chan <[email protected]>
Co-authored-by: Mark Story <[email protected]>

Author: 3 people

src/_assets/img/discover/discover-event-details.png

@@ -7,85 +7,89 @@ Our Discover tool provides visibility into your data across environments by buil
 
 [{% asset discover/discover-homepage.png alt="Full view of the Discover Homepage with query cards and button to build new queries." %}]({% asset discover/discover-homepage.png @path %})
 
-## Discover Homepage
+The Discover Homepage offers views of all your saved and pre-built queries so you can quickly dive into areas that need immediate attention. For example, if a spike occurred in the past 24 hours for a query on errors, a user may investigate that first. Each query is saved as a card that displays a summarized view of the data.
 
-The Discover Homepage offers views of all your saved queries and Sentry's pre-built queries so you can quickly dive into areas that need immediate attention. Circular Sentry avatars indicate pre-built queries. User avatars indicate saved queries. The user who creates a saved query will automatically have their avatar attached to the saved query.
+- Display Name
+- Search Conditions
+- Creator
+- Graph Snapshot
+- Date Range
+- Last Edited
 
-### Query Cards
+## Pre-built Queries
 
-Query cards are the individual cards on the Homepage that display a summarized view of the data in a specific query. Users can get a high-level view of the information in each query card to see what they want to investigate first. For example, if a spike occurred in the past 24 hours, a user may view that query first.
-
-### Pre-built Queries
-
-Circular Sentry avatars indicate pre-built queries.
+Query cards with Sentry avatars are pre-built and cannot be removed.
 
 - All Events: Users can see the raw error stream for any group of projects. This replaces the Events feature and gives users the ability to add additional columns and change groupings to achieve their desired breakdown.
 - Errors by Title: Users can see their most frequently occurring errors by the total number of raw errors, as well as the total number of users affected.
 - Errors by URL: Users can see the pages that generated the most errors and different types of issues. As a reminder, issues are a group of fingerprinted Events. For more details, see the [full documentation on fingerprinting]({%- link _documentation/data-management/event-grouping/index.md -%}).
 
-### Saved Queries
-
-User avatars indicate saved queries. The user who creates a saved query will automatically have their avatar attached to the saved query.
-
-**Deleting or Duplicating Saved Queries**
+## Saved Queries
 
-Delete or duplicate a saved query in the Context Menu --- looks like ellipses --- located in the lower right corner of each query card.
+Query cards with a user avatar indicate saved queries. The user who created a saved query will have their avatar display on the query card. Saved Queries are viewable by anyone in your organization, and **are not** scoped to the user's account. 
 
-**Searching Saved Queries**
+**Build a New Query**
 
-Saved queries will be viewable by anyone in your Sentry organization. You can use our search bar on the homepage to find a specific query. 
-
-
-## Query Builder
-
-[{% asset discover/discover-results.png alt="Page displaying a graph of error spikes by URL, the event tag summary, and results of the query." %}]({% asset discover/discover-results.png @path %})
-
-Navigate to any query page from the Discover Homepage in these ways:
+From the Discover Homepage, you can build a query in three ways. 
 
 - Click on "Build a new query"
-- Click on any pre-built or saved queries
-
-On the query's results page, you'll find the graph, table, and facet maps. The Query Builder enables the user to create custom views of the events sent to Sentry.io. You can add any tags/fields as columns, aggregate with columns, and sort with columns.
+- Click on the ellipsis of an existing saved query card to "Duplicate"
+- Go into any existing query
+  1. Click on "Save as..." in the top right
+  2. Enter a display name
+  3. Click "Save"
 
-If you don't apply aggregate functions to any of the applicable columns, or if they're not present, Sentry doesn't group the rows. If aggregate functions are present, Discover results group by unaggregated columns (tags, events). The unaggregated columns act as grouping keys and combine rows that have the same values as summary rows. Each summary row has the corresponding values in the specified columns. Aggregate functions (`avg`, `count`, `count_unique`) are optional. 
+Apply new search conditions or table columns to modify the results of the query. Save the query and assign a custom display name. For the full details, see [documentation on the Query Builder]({%- link _documentation/performance/discover/query-builder.md -%}).
 
-### Sharing Query Views
+**Search for a Query**
 
-Share your queries as often as you want. You can share URLs with other users who also have access to the same organization. As each part of the query is built, the results update, and the URL is updated so that in-progress searches can be shared in email/chat.
+Looking for a specific query? Use the search bar on the homepage to find the query name. 
 
-### Saved Query
+**Sort Queries**
 
-Although search queries are shareable, you can save them as saved queries. Saved queries are visible to the entire organization. In other words, saved queries **are not** scoped to the user's account. You can find saved queries on the Discover Homepage with the avatar of whoever built it. Circular Sentry logos indicate pre-built queries. You can use either a pre-built query or an existing saved query to create a new saved query.
+The dropdown in the top right will allow you to sort by attributes.
 
-For more details, see [full documentation on the Query Builder]({%- link _documentation/performance/discover/query-builder.md -%}).
+- Recently Edited (Default)
+- My Queries 
+- Query Name (A-Z)
+- Date Created (Newest)
+- Date Created (Oldest)
+- Most Outdated
 
-### Performance Homepage
-Custom queries also provide more curated views in the [Performance Homepage]({%- link _documentation/performance/performance-homepage.md -%}). In the Performance Homepage, you can investigate transaction spikes, possible performance regressions, average transaction duration, etc. Together, Discover and Performance offer multiple views of errors and data.  
+**Edit Queries**
 
-## Event Details
+If you need to edit any of these queries, go into the query, make the desired changes and a button will appear in the top right asking you to save/update the query. Keep in mind, edits to the query conditions **will not** be automatically saved.
 
-[{% asset discover/discover-event-details.png alt="Event detail page displaying a graph with spikes, the event details, and different metrics for tags." %}]({% asset discover/discover-event-details.png @path %})
+To rename a saved query, click on the pencil icon by the header and enter the desired display name. Click "enter" or outside of the area to save the updated name.  
 
-Navigate to the Event Details page from **Discover > Query > Event Detail**. On the Event Details view, you can find all of the details about a single event. 
+**Share Queries**
 
-On the left, you will see a series of tabs. These tabs contain details about the various contexts, and event dimensions Sentry has captured. 
+Share your queries as often as you want. You can share URLs with other users who also have access to the same organization. As each part of the query is built, the results update, and the URL is updated so that in-progress searches can be shared in email, chat, etc.
 
-On the right, you will see the current event's identifier, timestamp, and link to view the normalized JSON payload that Sentry received. You can also see the event's linked issue and tag details.
+**Delete Queries**
 
-The right sidebar can be hidden with the "Hide Details" button found in the Event Details header.
+{% capture __alert_content -%}
+Deleting a saved query is irreversible.
+{%- endcapture -%}
+{%- include components/alert.html
+    title="Warning"
+    content=__alert_content
+    level="warning"
+%}
 
-### Tags
+On the Discover Homepage, each saved query card has an ellipsis that will open a context menu. Delete the query from here. You can also delete the query within Query Results view by clicking the trash can in the upper right. 
 
-The tag value links displayed on the Event Details can be used to refine your search results further. Clicking on any tag link will take you to a new Discover query with the clicked tag value added as a condition. If you were looking at an aggregated result, the new query will have all aggregations removed. This allows you to drill into aggregated results and explore your data more quickly.
+## Query Results
+[{% asset discover/discover-results.png alt="Page displaying a graph of error spikes by URL, the event tag summary, and results of the query." %}]({% asset discover/discover-results.png @path %})
 
-### Details Graph
+To view query results, click into any query card. You'll find a graph, table, and toggleable tag summary (or facet map). The search bar at the top enables you to see the search conditions entered. The table reflects the events with sortable columns. 
 
-If your query included aggregations, the Event Details view will contain a graph at the top of the page. This graph visualizes the volume of events within the aggregation over time. The pin marker and vertical bar indicate the position of the currently displayed event within the aggregation. Hovering over the graph line will display a tooltip with more precise time and event volume details.
+If the first column shows an icon (as seen above), it means the events have been stacked. Click on the icon to view the full list of events. Each event will have an event ID you can click on for more details. For more about how to build a query, go to [the Query Builder]({%- link _documentation/performance/discover/query-builder.md -%}). 
 
-### Traversing Aggregated Events
+## Event Details
 
-When viewing results that include aggregations, you can use the "Older" and "Newer" navigation buttons on the top right to view other events from the current aggregation. You can also click on the line displayed in the Details Graph to navigate to an event within that time slice.
+[{% asset discover/discover-event-details.png alt="Event detail page displaying a graph with spikes, the event details, and different metrics for tags." %}]({% asset discover/discover-event-details.png @path %})
 
-### Related Issues
+Navigate to the Event Details page from **Discover > [Saved Query] > Event Detail**. You'll find all the relevant details about a single event. For every event, you will see the ID, timestamp, and link to view the normalized JSON payload that Sentry received. 
 
-On events that have an issue, a related issue panel will be shown in the sidebar. This panel gives you a quick glance at the event volume for that issue and lets you quickly navigate to the related issue.
+The Event Detail view varies depending on event type (i.e. error, transaction, csp). For example, errors may have a related issue shown in the sidebar. This panel gives you a quick glance at the event volume for that issue and lets you quickly navigate to the related issue. You may also find stack traces, breadcrumbs and more in these views.