[8.x] [Docs] Add visuals to the Build dashboard pages (#194234) (#194340)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Docs] Add visuals to the Build dashboard pages
(#194234)](https://github.com/elastic/kibana/pull/194234)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"wajihaparvez","email":"wajiha.parvez@elastic.co"},"sourceCommit":{"committedDate":"2024-09-27T18:23:24Z","message":"[Docs]
Add visuals to the Build dashboard pages (#194234)\n\n##
Summary\r\n\r\nAdded screenshots and gifs to the
[Build\r\nDashboards](https://www.elastic.co/guide/en/kibana/master/create-dashboards.html)\r\npages
as part of the ongoing project to add more visuals to the\r\nDashboards
docs.\r\n\r\nRel:https://github.com/elastic/platform-docs-team/issues/457
and\r\nhttps://github.com/elastic/platform-docs-team/issues/466","sha":"dab27867a63476f1ca109efbbc18b33ea70e5d4a","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Docs","release_note:skip","v9.0.0","v8.16.0","backport:version"],"title":"[Docs]
Add visuals to the Build dashboard
pages","number":194234,"url":"https://github.com/elastic/kibana/pull/194234","mergeCommit":{"message":"[Docs]
Add visuals to the Build dashboard pages (#194234)\n\n##
Summary\r\n\r\nAdded screenshots and gifs to the
[Build\r\nDashboards](https://www.elastic.co/guide/en/kibana/master/create-dashboards.html)\r\npages
as part of the ongoing project to add more visuals to the\r\nDashboards
docs.\r\n\r\nRel:https://github.com/elastic/platform-docs-team/issues/457
and\r\nhttps://github.com/elastic/platform-docs-team/issues/466","sha":"dab27867a63476f1ca109efbbc18b33ea70e5d4a"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/194234","number":194234,"mergeCommit":{"message":"[Docs]
Add visuals to the Build dashboard pages (#194234)\n\n##
Summary\r\n\r\nAdded screenshots and gifs to the
[Build\r\nDashboards](https://www.elastic.co/guide/en/kibana/master/create-dashboards.html)\r\npages
as part of the ongoing project to add more visuals to the\r\nDashboards
docs.\r\n\r\nRel:https://github.com/elastic/platform-docs-team/issues/457
and\r\nhttps://github.com/elastic/platform-docs-team/issues/466","sha":"dab27867a63476f1ca109efbbc18b33ea70e5d4a"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: wajihaparvez <wajiha.parvez@elastic.co>

docs/user/dashboard/create-dashboards.asciidoc

@@ -26,22 +26,24 @@ TIP: If you don't have data at hand and still want to explore dashboards, you ca
 
 //To make your dashboard experience as good as possible for you and users who will view it, check the <<dashboard-best-practices,dashboard best practices>>. 
 
-. Open the *Dashboard* page in {kib}.
+. Open the *Dashboards* page in {kib}.
 
 . Select *Create dashboard* to start with an empty dashboard.
 +
 When you create a dashboard, you are automatically in edit mode and can make changes to the dashboard. 
 [[create-panels-with-lens]]
-. Add content to the dashboard. You have several options covered in more details in the <<panels-editors,Visualizations section>>:
+. Add content to the dashboard. You have several options covered in more detail in the <<panels-editors,Visualizations section>>:
 ** <<lens,**Create visualization**>>. This option is a shortcut to create a chart using **Lens**, the default visualization editor in {kib}.
 ** <<panels-editors,**Add panel**>>. Choose one of the available panels to add and configure content to your dashboard.
 ** **Add from library**. Select existing content that has already been configured and saved to the **Visualize Library**.
 ** <<add-controls,**Controls**>>. Add controls to help filter the content of your dashboard.
-
++
+[role="screenshot"]
+image::images/add_content_to_dashboard_8.15.0.png[Options to add content to your dashboard, width=70%]
 . Organize your dashboard by <<arrange-panels,organizing the various panels>>. 
 [[add-dashboard-settings]]
 . Define the main settings of your dashboard from the *Settings* menu located in the toolbar.
-.. Meaningful title, description, and <<managing-tags,tags>> allow you to find the dashboard quickly later when browsing your list of dashboard or using the {kib} search bar.
+.. A meaningful title, description, and <<managing-tags,tags>> allow you to find the dashboard quickly later when browsing your list of dashboards or using the {kib} search bar.
 .. Additional display options allow you unify the look and feel of the dashboard's panels:
 
 *** *Store time with dashboard* &mdash; Saves the specified time filter.
@@ -49,16 +51,19 @@ When you create a dashboard, you are automatically in edit mode and can make cha
 *** *Show panel titles* &mdash; Displays the titles in the panel headers.
 *** *Sync color palettes across panels* &mdash; Applies the same color palette to all panels on the dashboard.
 *** *Sync cursor across panels* &mdash; When you hover your cursor over a time series chart or a heatmap, the cursor on all other related dashboard charts automatically appears.
-*** *Sync tooltips across panels* &mdash; When you hover your cursor over a *Lens* chart, the tooltips on all other related dashboard charts automatically appears.
+*** *Sync tooltips across panels* &mdash; When you hover your cursor over a *Lens* chart, the tooltips on all other related dashboard charts automatically appear.
 
-.. Click *Apply*. 
+.. Click *Apply*.
++
+[role="screenshot"]
+image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt532d6c9ca72817d6/66f31b1f80b55f3a20e1a329/dashboard_settings_8.15.0.gif[Change and apply dashboard settings, width 30%]
 
-. **Save** Save the dashboard.
+. Click **Save**  to save the dashboard.
 
 [[open-the-dashboard]]
 == Edit a dashboard
 
-. Open the *Dashboard* page in {kib}.
+. Open the *Dashboards* page in {kib}.
 
 . Locate the dashboard you want to edit.
 +
@@ -67,7 +72,9 @@ TIP: When looking for a specific dashboard, you can filter them by tag or by cre
 . Click the dashboard *Title* you want to open.
 
 . Make sure that you are in **Edit** mode to be able to make changes to the dashboard. You can switch between **Edit** and **View** modes from the toolbar.
-
++
+[role="screenshot"]
+image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltf75cdb828cef8b5a/66f5cfcfad4f59f38b73ba64/switch-to-view-mode-8.15.0.gif[Switch between Edit and View modes, width 30%]
 . Make the changes that you need to the dashboard:
 
 ** Adjust the dashboard's settings
@@ -86,7 +93,11 @@ NOTE: Once changes are saved, you can no longer revert them in one click, and in
 
 . In the toolbar, click *Reset*.
 
-. On the *Reset dashboard* window, click *Reset dashboard*.
+. On the *Reset dashboard?* window, click *Reset dashboard*.
+
++
+[role="screenshot"]
+image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltcd3dbda9caf48a9b/66f4957fc9f9c71ce7533774/reset-dashboard-8.15.0.gif[Reset dashboard to revert unsaved changes, width 30%]
 
 include::dashboard-controls.asciidoc[leveloffset=-1]
 
@@ -108,7 +119,7 @@ In the toolbar, click *Edit*, then use the following options:
 
 * To resize, click the resize control, then drag to the new dimensions.
 
-* To maximize to full screen, open the panel menu, then click *More > Maximize panel*.
+* To maximize to full screen, open the panel menu, then click *More > Maximize*.
 +
 TIP: If you <<share-the-dashboard,share>> a dashboard while viewing a full screen panel, the generated link will directly open the same panel in full screen mode.
 
@@ -126,7 +137,10 @@ Duplicated panels appear next to the original panel, and move the other panels t
 
 . In the toolbar, click *Edit*.
 
-. Open the panel menu, then select *Duplicate panel*. 
+. Open the panel menu, then select *Duplicate*.
++
+[role="screenshot"]
+image::images/duplicate-panels-8.15.0.png[Duplicate a panel, width=50%] 
 
 [float]
 [[copy-to-dashboard]]
@@ -137,6 +151,9 @@ Copy panels from one dashboard to another dashboard.
 . Open the panel menu, then select *More > Copy to dashboard*.
 
 . On the *Copy to dashboard* window, select the dashboard, then click *Copy and go to dashboard*.
++
+[role="screenshot"]
+image:https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt64206db263cf5514/66f49286833cffb09bebd18d/copy-to-dashboard-8.15.0.gif[Copy a panel to another dashboard, width 30%]
 
 == Import dashboards
 

docs/user/dashboard/dashboard-controls.asciidoc

@@ -33,9 +33,12 @@ To add interactive Options list and Range slider controls, create the controls,
 
 . Open or create a new dashboard. 
 
-. Make sure you are in *Edit* mode, and select *Controls* > *Add control* in the dashboard toolbar.
+. In *Edit* mode, select *Controls* > *Add control* in the dashboard toolbar.
++
+[role="screenshot"]
+image::images/dashboard-add-control-8.15.0.png[Controls button in the toolbar with the Add Control option selected, width=60%]
 
-. From the *Data view* dropdown, select the data view that contains the field you want to use for the *Control*.
+. On the *Create control* flyout, from the *Data view* dropdown, select the data view that contains the field you want to use for the *Control*.
 
 . In the *Field* list, select the field you want to filter on.
 
@@ -80,7 +83,10 @@ You can add one interactive time slider control to a dashboard.
 
 . Open or create a new dashboard. 
 
-. In the dashboard toolbar, click *Controls* > *Add time slider control*.
+. In *Edit* mode, select *Controls* > *Add time slider control*.
++
+[role="screenshot"]
+image::images/dashboard-add-time-slider-control-8.15.0.png[Controls button in the toolbar with the Add a time slider option selected, width=60%]
 
 . The time slider control uses the time range from the global time filter. To change the time range in the time slider control, <<set-time-filter,change the global time filter>>. 
 
@@ -92,11 +98,14 @@ You can add one interactive time slider control to a dashboard.
 [[configure-controls-settings]]
 ==== Configure the controls settings
 
-Several settings that apply to all controls of a same dashboard are available.
+Several settings that apply to all controls of the same dashboard are available.
 
-. In the dashboard toolbar, click *Controls*, then select *Settings*.
+. In *Edit* mode, select *Controls* > *Settings*.
++
+[role="screenshot"]
+image::images/dashboard-controls-settings-8.15.0.png[Controls button in the toolbar with the Settings option selected, width=60%]
 
-. On the *Control settings* flyout, configure the settings:
+. On the *Control settings* flyout, configure the following settings:
 
 * *Label position* &mdash; Specify where the control label appears.
 
@@ -105,7 +114,7 @@ Several settings that apply to all controls of a same dashboard are available.
 ** **Apply global filters to controls** &mdash; Define whether controls should ignore or apply any filter specified in the main filter bar of the dashboard.
 ** **Apply global time range to controls** &mdash; Define whether controls should ignore or apply the main time range specified for the dashboard. Note that <<add-time-slider-controls,time slider controls>> rely on the global time range and don't work properly when this option is disabled.
 
-* *Selection* settings:
+* *Selections* settings:
 
 ** *Validate user selections* &mdash; When selected, any selected option that results in no data is ignored.
 ** *Chain controls* &mdash; When selected, controls are applied sequentially from left to right, and line by line. Any selected options in one control narrows the available options in the next control.