[DOCS] Updates Discover docs to show Document Explorer (#129549) (#130400)

* [DOCS] Updates Discover docs to show Document Explorer

* [DOCS] Updates screenshots and text for DE

* [DOCS] Removed view documents and combined with document explorer

* Apply suggestions from code review

* [DOCS] Updates search for relevance

* [DOCS] Incorporates review comments

* Update docs/discover/document-explorer.asciidoc

Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co>

* Update docs/discover/document-explorer.asciidoc

Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co>

* Update docs/user/discover.asciidoc

Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co>

* Update docs/user/discover.asciidoc

Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co>

* Update docs/discover/document-explorer.asciidoc

Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co>

* Update docs/discover/document-explorer.asciidoc

Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co>

* [DOCS] Incorporates review feedback

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co>
(cherry picked from commit cf844371e4)

docs/discover/document-explorer.asciidoc

@@ -1,10 +1,11 @@
 [[document-explorer]]
-== Document Explorer
+== Explore your documents
 
-beta::[]
 
-*Discover* has a *Document Explorer* with resizable columns, better data sorting and comparison,
-and a fullscreen view.
+*Discover* displays your documents in table format, so you can
+best explore your data.
+Use the document table to resize columns, set row height,
+perform multi-column sorting, compare data, and more.
 
 ++++
 <script type="text/javascript" async src="https://play.vidyard.com/embed/v4.js">
@@ -12,20 +13,14 @@ and a fullscreen view.
 <img
 style="width: 100%; margin: auto; display: block;"
 class="vidyard-player-embed"
-src="https://play.vidyard.com/BgbLpBo3qvPZvtXrwZoNuD.jpg"
-data-uuid="BgbLpBo3qvPZvtXrwZoNuD"
+src="https://play.vidyard.com/KbZQP6Y7msjevAm1JGbKeG.jpg"
+data-uuid="KbZQP6Y7msjevAm1JGbKeG"
 data-v="4"
 data-type="inline"
 />
 </br>
 ++++
 
-To use the *Document Explorer* instead of the classic document table:
-
-. Open *Discover*.
-. In the toolbar, click *Options*, and then click *Try Document Explorer*.
-. Turn off the classic view and save the changes.
-
 [float]
 [[document-explorer-columns]]
 === Reorder and resize columns
@@ -51,7 +46,7 @@ adjust the height to fit the contents, click the row height icon
 image:images/row-height-icon.png[icon to open the Row height pop-up].
 
 [role="screenshot"]
-image::images/document-explorer-row-height.png[Row height settings for Document Explroer, width="75%"]
+image::images/document-explorer-row-height.png[Row height settings for the document table, width="75%"]
 
 
 [float]
@@ -61,33 +56,41 @@ image::images/document-explorer-row-height.png[Row height settings for Document
 Sort your data by one or more fields, in ascending or descending order.
 The default sort is based on the time field, from new to old.
 
-. In the *Document Explorer*, click and open the *field sorted* options.
+To add or remove a sort on a single field, click the
+column header, and then select the sort order.
+
+To sort by multiple fields:
+
+. In the document table, click the *field sorted* option.
 +
 [role="screenshot"]
-image::images/document-explorer-sort-data.png[Pop-up in Document Explorer for sorting columns, width="75%"]
+image::images/document-explorer-sort-data.png[Pop-up in document table for sorting columns, width="75%"]
 
 . To add more fields to the sort, select from the dropdown menu.
 +
 By default, columns are sorted in the order they are added.
-For example, to sort by `order_date` then `geo.country_iso_code`, make sure `order_date` appears first.
 +
 [role="screenshot"]
-image::images/document-explorer-multi-field.png[Multi field sort in Document Explorer, width="75%"]
+image::images/document-explorer-multi-field.png[Multi field sort in the document table, width="75%"]
 
 . To change the sort order, select a field in the pop-up, and then drag it to the new location.
++
+For example, to sort by `geo.country_iso_code` then `order_date`, make sure `geo.country_iso_code` appears first.
+
 
 [float]
 [[document-explorer-compare-data]]
 === Compare data
 
-Narrow your results to a subset documents.
+Narrow your results to a subset of documents to easily
+compare the data of interest.
 
 . Select the documents you want to compare.
 
-. Click and open the *documents selected* options, and then select *Show selected documents only*.
+. Click the *documents selected* option, and then select *Show selected documents only*.
 +
 [role="screenshot"]
-image::images/document-explorer-compare-data.png[Multi field sort in Document Explorer, width="75%"]
+image::images/document-explorer-compare-data.png[Compare data in the document table, width="75%"]
 
 [float]
 [[document-explorer-expand-documents]]
@@ -99,26 +102,56 @@ the documents that occurred before and after it.
 . Click the expand icon
 image:images/expand-icon-2.png[double arrow icon to open a flyout with the document details].
 +
+You can view the document in two ways. The **Table** view displays the document fields row-by-row.
+The **JSON** (JavaScript Object Notation) view allows you to look at how {es} returns the document.
++
 [role="screenshot"]
-image::images/document-explorer-expand.png[Expanded view in Document Explorer]
-
-. Scan through the fields and their values, or search for a field by name.
+image::images/document-explorer-expand.png[Expanded view of the document table]
++
+. In the *Table* view, scan through the fields and their values, or search for a field by name.
 
 . When you find a field of interest,
 click
 image:images/actions-icon.png[three dots icon in table column] in the *Actions* column
 to:
-.. Filter the view of the data
-.. Toggle the field in or out the document table
-.. Pin the field so it stays at the top
+.. Filter the results to include or exclude specific fields or values.
+.. Toggle the field in or out the document table.
+.. Pin the field so it stays at the top.
 
-. For direct access to a particular document, click <<discover-view-single-document,**Single document**>>.
+. To navigate to the next and previous documents, click the < and > arrows at the top of the view.
+
+. To create a view of the document that you can bookmark and share, click **Single document**.
++
+[role="screenshot"]
+image::images/discover-view-single-document.png[Discover single document view]
++
+The link is valid for the time the document is available in Elasticsearch. To create a customized view of the document,
+you can create <<external-plugin-development, your own plugin>>.
+
+. To view documents that occurred before or after the event you are looking at, click **Surrounding documents**.
++
+Documents are displayed using the same set of columns as the *Discover* view from which
+the context was opened. The filters you applied are also carried over. Pinned
+filters remain active, while other filters are copied in a disabled state.
++
+[role="screenshot"]
+image::images/discover-context.png[Image showing context view feature, with anchor documents highlighted in blue]
 
-. To view documents that occurred before or after the event you are looking at, click <<discover-view-surrounding-documents,**Surrounding documents**>>.
 
 [float]
 [[document-explorer-full-screen]]
 === View documents in fullscreen
 
 To view as much data as possible and eliminate distractions, click the fullscreen icon
-image:images/fullscreen-icon.png[icon to display the Document Explorer in fullscreen mode].
+image:images/fullscreen-icon.png[icon to display the document table in fullscreen mode]
+in the document table.
+
+[float]
+[[document-explorer-configure-table]]
+=== Configure the number of documents displayed
+
+By default, the document table displays 100 rows per page. To change this number,
+click *Rows per page*.
+
+[role="screenshot"]
+image::images/document-table-rows-per-page.png["Menu with options for setting the number of rows in the document table", width=50%]

docs/discover/field-statistics.asciidoc

@@ -1,5 +1,5 @@
 [[show-field-statistics]]
-== Explore the fields in your data
+== View field statistics
 
 beta::[]
 
@@ -50,7 +50,7 @@ image::images/field-statistics-geo.png["Field statistics for a geo field."]
 . Explore additional field types to see the statistics that *Discover* provides.
 
 . To create a visualization of the field data, click
-image:images/chart-icon.png[Click the magnifying glass icon to create a visualization of the data in Lens]
+image:images/visualization-icon.png[Click the magnifying glass icon to create a visualization of the data in Lens]
 or
 image:images/map-icon.png[Click the Maps icon to explore the data in a map]
 in the *Actions* column.

docs/discover/search-for-relevance.asciidoc

@@ -8,7 +8,7 @@ This example shows how to use *Discover* to list
 your documents from most relevant to least relevant. This example uses
 the <<gs-get-data-into-kibana, sample flights data set>>, or you can use your own data.
 
-.  In *Discover*, open the {data-source} dropdown, and select that data you want to work with.
+.  In *Discover*, open the {data-source} dropdown, and select the data that you want to work with.
 +
 For the sample flights data, set the {data-source} to *kibana_sample_data_flights*.
 
@@ -19,15 +19,16 @@ Warsaw OR Venice OR Clear
 ```
 . If you don't see any results, expand the <<set-time-filter,time range>>, for example to *Last 7 days*.
 . From the list of *Available fields*, add `_score` and any other fields you want to the document table.
-. To sort the `_score` column in descending order, hover over its header, and set
-the sort icon to
-image:images/downward-arrow.png[Downward pointing arrow to indicate descending sorting].
 +
-At this point, you're doing a multi-column sort: first by `Time`, and then by `_score`.
-. To turn off sorting for the `Time` field, hover over its header, and set the sort icon to
-image:images/double-arrow.png[Arrow on both ends of the icon indicates sorting is off].
+At this point, you're sorting by the`timestamp` field.
+. To turn off sorting by the `timestamp` field, click the *field sorted* option, and then click *Clear sorting.*
+. To turn on sorting by the `_score` field in descending order, open the dropdown menu and click *_score*, and then select *High-Low*.
++
+[role="screenshot"]
+image::images/sort-by-relevance.png["Field sorting popover", width=75%]
+
 +
 Your table now sorts documents from most to least relevant.
 +
 [role="screenshot"]
-image::images/discover-search-for-relevance.png["Documents are sorted from most relevant to least relevant."]
+image::images/discover-search-for-relevance.png["Documents are sorted from most relevant to least relevant.", width=75%]

docs/discover/view-document.asciidoc

@@ -1,51 +0,0 @@
-[[discover-view-document]]
-== View a document
-
-Once you've found a document of interest in *Discover*, you have two more ways to
-view it: in a view by itself or in context with surrounding documents.
-
-[float]
-[[discover-view-single-document]]
-=== View a single document
-
-Access a single document so you can bookmark it and share the link.
-
-. In the document table, click the expand icon (>).
-. In the expanded view, click **View single document**.
-+
-You can view the document in two ways. The **Table** view displays the document fields row-by-row.
-The **JSON** (JavaScript Object Notation) view allows you to look at how {es} returns the document.
-+
-[role="screenshot"]
-image::images/discover-view-single-document.png[Discover single document view]
-+
-The link is valid for the time the document is available in Elasticsearch. To create a customized view of the document,
-you can create <<external-plugin-development, your own plugin>>.
-
-[float]
-[[discover-view-surrounding-documents]]
-=== View surrounding documents
-
-To inspect the documents that occurred immediately before and after a document,
-your {data-source} must contain time-based events.
-
-. In the document table, click the expand icon (>).
-. In the expanded view, click **View surrounding documents**.
-+
-Documents are displayed using the same set of columns as the *Discover* view from which
-the context was opened. The filters you applied are also carried over. Pinned
-filters remain active, while normal filters are copied in a disabled state.
-+
-[role="screenshot"]
-image::images/discover-context.png[Image showing context view feature, with anchor documents highlighted in blue]
-
-. To find the documents of interest, add filters.
-
-. To increase the number of documents that surround the anchor document, click *Load*.
-By default, five documents are added with each click.
-+
-[role="screenshot"]
-image::images/discover-context-load-newer-documents.png[Load button and the number of documents to load, width=50%]
-. To configure the number of documents to display and
-the number of documents to load with each button click, go to *Stack Management > Advanced Settings*
-and edit the <<kibana-discover-settings, context settings>>.

docs/redirects.asciidoc

@@ -329,7 +329,7 @@ This content has moved. Refer to <<kuery-query>>.
 [role="exclude",id="discover-document-context"]
 == View surrounding documents
 
-This content has moved. Refer to <<discover-view-surrounding-documents>>.
+This content has moved. Refer to <<document-explorer>>.
 
 [role="exclude",id="field-formatters-string"]
 == String field formatters
@@ -405,3 +405,8 @@ This content has moved. Refer to {kibana-ref-all}/7.17/upgrade-assistant.html[Up
 == Install {kib} on macOS with Homebrew
 
 This page has been deleted. Refer to <<install>>.
+
+[role="exclude",id="discover-view-document"]
+== View a document
+
+This page has been deleted. Refer to <<document-explorer>>.

docs/user/discover.asciidoc

@@ -54,13 +54,15 @@ Tell {kib} where to find the data you want to explore, and then specify the time
 +
 {kib} uses a <<data-views,{data-source}>> to tell it where to find
 your {es} data.
-To view the ecommerce sample data, make sure the {data-source} is set to **kibana_sample_data_ecommerce**.
+To view the ecommerce sample data, select **kibana_sample_data_ecommerce**
+from the {data-source} dropdown.
 +
 [role="screenshot"]
 image::images/discover-data-view.png[How to set the {data-source} in Discover, width=50%]
 +
 To create a data view for your own data,
-click the ellipsis icon (…​), and then click *Create new data view*.
+click
+image:images/actions-icon.png[three dots icon next to data view dropdown], and then click *Create new data view*.
 For details, refer to <<data-views, Create a data view.>>
 
 . Adjust the <<set-time-filter,time range>> to view data for the *Last 7 days*.
@@ -76,9 +78,10 @@ click and drag the mouse over the chart.
 [[explore-fields-in-your-data]]
 === Explore the fields in your data
 
-**Discover** includes a table that shows all the documents that match your search.
-By default, the table includes columns for the time field and the document `_source`.
-You’ll modify this table to display your fields of interest.
+**Discover** includes a table
+that shows all the documents that match your search.
+By default, the document table includes a column for the time field and a column that lists all other fields in the document.
+You’ll modify the document table to display your fields of interest.
 
 . Scan through the list of **Available fields** until you find the `manufacturer` field.
 You can also search for the field by name.
@@ -94,15 +97,18 @@ image:images/find-manufacturer-field.png[Fields list that displays the top five
 . Click image:images/add-icon.png[Add icon] to toggle the field into the document table.
 
 . Find the `customer_first_name` and `customer_last_name` fields and add
-them to your document table. Your table should look similar to this:
+them to the document table. Your table should look similar to this:
 +
 [role="screenshot"]
 image:images/document-table.png[Document table with fields for manufacturer, customer_first_name, and customer_last_name]
 
-. To rearrange the table columns, hover the mouse over a
-column header, and then use the move control.
+. To rearrange the table columns, click a
+column header, and then select *Move left* or *Move right*.
 
-. To view more of the document table, click *Chart options > Hide chart*.
+. To view more of the document table, click
+image:images/chart-icon.png[icon button for opening Show/Hide chart menu, width=24px]
+to open the *Chart options* menu,
+and then select *Hide chart*.
 
 [float]
 [[add-field-in-discover]]
@@ -114,7 +120,8 @@ You can add a runtime field to your {data-source} from inside of **Discover**,
 and then use that field for analysis and visualizations,
 the same way you do with other fields.
 
-. Click the ellipsis icon (...), and then click *Add field*.
+. Click
+image:images/actions-icon.png[three dots icon next to data view dropdown], and then click *Add field*.
 +
 [role="screenshot"]
 image:images/add-field-to-data-view.png[Dropdown menu located next to {data-source} field with item for adding a field to a {data-source}, width=50%]
@@ -131,10 +138,10 @@ emit("Hello World!");
 
 . Click *Save*.
 
-. In the fields list, search for the *hello* field, and then add it to the table to view it's value.
+. In the fields list, search for the *hello* field, and then add it to the document table to view it's value.
 +
 [role="screenshot"]
-image:images/hello-field.png[hello field in the document table]
+image:images/hello-field.png[hello field in the document tables]
 
 . Create a second field named `customer` that combines customer last name and first initial.
 +
@@ -143,7 +150,7 @@ String str = doc['customer_first_name.keyword'].value;
 char ch1 = str.charAt(0);
 emit(doc['customer_last_name.keyword'].value + ", " + ch1);
 ```
-. Simplify the the document table by removing `customer_first_name` and `customer_last_name` and adding `customer` in their place.
+. Remove `customer_first_name` and `customer_last_name` from the document table, and then add `customer`.
 +
 [role="screenshot"]
 image:images/customer.png[Customer last name, first initial in the document table]
@@ -208,29 +215,31 @@ click the close icon (x) next to its name in the filter bar.
 Dive into an individual document to view its fields and the documents
 that occurred before and after it.
 
-. In the document table, expand any document.
+. In the document table, click the expand icon
+image:images/expand-icon-2.png[double arrow icon to open a flyout with the document details]
+to show document details.
 +
 [role="screenshot"]
 image:images/document-table-expanded.png[Table view with document expanded]
 
 . Scan through the fields and their values. If you find a field of interest,
-hover over its name for filters and other controls.
+click
+image:images/actions-icon.png[three dots icon next to data view dropdown] in the *Actions* column for filters and other controls.
 
 . To view documents that occurred before or after the event you are looking at, click
-<<discover-view-surrounding-documents, View surrounding documents>>.
+**Surrounding documents**.
 
-. For direct access to a particular document, click **<<discover-view-single-document,View single document>>**.
-+
-You can bookmark this document and share the link.
+. To create a view of the document that you can bookmark and share, click **Single document**.
 
 
 [float]
 [[save-your-search]]
 === Save your search for later use
 
-Save your search so you can repeat it later, generate a CSV report, or use it in visualizations, dashboards, and Canvas workpads.
+Save your search so you can use it later, generate a CSV report, or use it to create visualizations, dashboards, and Canvas workpads.
 Saving a search saves the query text, filters,
-and current view of *Discover*, including the columns selected in the document table, the sort order, and the {data-source}.
+and current view of *Discover*, including the columns selected in
+the document table, the sort order, and the {data-source}.
 
 . In the toolbar, click **Save**.
 
@@ -281,8 +290,7 @@ Go to **Advanced Settings** to configure the number of documents to show,
 the table columns that display by default, and more.
 
 --
-
-include::{kib-repo-dir}/discover/view-document.asciidoc[]
+include::{kib-repo-dir}/discover/document-explorer.asciidoc[]
 
 include::{kib-repo-dir}/discover/search-for-relevance.asciidoc[]
 
@@ -290,6 +298,4 @@ include::{kib-repo-dir}/discover/save-search.asciidoc[]
 
 include::{kib-repo-dir}/discover/search-sessions.asciidoc[]
 
-include::{kib-repo-dir}/discover/document-explorer.asciidoc[]
-
 include::{kib-repo-dir}/discover/field-statistics.asciidoc[]