Skip to content

Commit

Permalink
[Docs] Update dashboard docs for hover actions (#204844)
Browse files Browse the repository at this point in the history
## Summary

Updated instructions and visuals for the new hover actions feature. 
Also came across a mention of the Replace panel action and removed it
([#178596](#178596)).

Rel: [#182535](#182535) and
[#596](elastic/platform-docs-team#596)
Closes: [#580](elastic/platform-docs-team#580)
  • Loading branch information
wajihaparvez authored Dec 20, 2024
1 parent b746c39 commit 5b8ffd6
Show file tree
Hide file tree
Showing 16 changed files with 62 additions and 73 deletions.
21 changes: 9 additions & 12 deletions docs/user/dashboard/create-dashboards.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ image::images/add_content_to_dashboard_8.15.0.png[Options to add content to your
.. 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%]
image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt4a6e9807f1fac9f8/6750ee9cef6d5a250c229e50/dashboard-settings-8.17.0.gif[Change and apply dashboard settings, width 30%]

. Click **Save** to save the dashboard.

Expand All @@ -74,14 +74,14 @@ TIP: When looking for a specific dashboard, you can filter them by tag or by cre
. 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%]
image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt619b284e92c2be27/6750f3a512a5eae780936fe3/switch-to-view-mode-8.17.0.gif[Switch between Edit and View modes, width 30%]
. Make the changes that you need to the dashboard:

** Adjust the dashboard's settings
** <<panels-editors,Add, remove, move, or edit panels>>
** <<add-controls,Change the available controls>>
[[save-dashboards]]
. **Save** the dashboard. You can then leave the **Edit** mode and *Switch to view mode*.
. **Save** the dashboard. You automatically switch to *View* mode upon saving.

NOTE: Managed dashboards can't be edited directly, but you can <<duplicate-dashboards,duplicate>> them and edit these duplicates.

Expand All @@ -98,7 +98,7 @@ NOTE: Once changes are saved, you can no longer revert them in one click, and in

+
[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%]
image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blte0c08bede75b3874/6750f5566cdeea14b273b048/reset-dashboard-8.17.0.gif[Reset dashboard to revert unsaved changes, width 30%]

include::dashboard-controls.asciidoc[leveloffset=-1]

Expand All @@ -116,11 +116,11 @@ Compare the data in your panels side-by-side, organize panels by priority, resiz

In the toolbar, click *Edit*, then use the following options:

* To move, click and hold the panel header, then drag to the new location.
* To move, hover over the panel, click and hold image:images/move-control.png[The move control icon, width=4%], then drag to the new location.

* 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*.
* To maximize to full screen, open the panel menu and click *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.

Expand All @@ -138,23 +138,20 @@ 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*.
+
[role="screenshot"]
image::images/duplicate-panels-8.15.0.png[Duplicate a panel, width=50%]
. Open the panel menu and select *Duplicate*.

[float]
[[copy-to-dashboard]]
==== Copy panels

Copy panels from one dashboard to another dashboard.

. Open the panel menu, then select *More > Copy to dashboard*.
. Open the panel menu and select *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%]
image:https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt48304cb3cd1ee2e6/6753879eb7c4663812148d47/copy-to-dashboard-8.17.0.gif[Copy a panel to another dashboard, width 30%]

[[duplicate-dashboards]]
== Duplicate dashboards
Expand Down
12 changes: 5 additions & 7 deletions docs/user/dashboard/create-visualizations.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ If you created the panel from the *Visualize Library*:

To add unsaved dashboard panels to the *Visualize Library*:

. Open the panel menu, then select *More > Save to library*.
. Open the panel menu and select *Save to library*.

. Enter the panel title, then click *Save*.

Expand Down Expand Up @@ -155,7 +155,7 @@ There are three types of *Discover* interactions you can add to dashboard panels
+
To enable panel interactions, configure <<settings-explore-data-in-context,`xpack.discoverEnhanced.actions.exploreDataInContextMenu.enabled`>> in kibana.yml. If you are using 7.13.0 and earlier, panel interactions are enabled by default.
+
To use panel interactions, open the panel menu, then click *Explore underlying data*.
To use panel interactions, open the panel menu and click *Explore underlying data*.

* *Series data interactions* &mdash; Opens the series data in *Discover*.
+
Expand All @@ -165,7 +165,7 @@ To use series data interactions, click a data series in the panel.

* *Discover session interactions* &mdash; Opens <<save-your-search,saved Discover session>> data in *Discover*.
+
To use saved Discover session interactions, open the panel menu, then click *More > View Discover session*.
To use saved Discover session interactions, open the panel menu and click *View Discover session*.

[[edit-panels]]
=== Edit panels
Expand All @@ -178,15 +178,13 @@ To make changes to the panel, use the panel menu options.

* *Edit visualization* &mdash; Opens the editor so you can make changes to the panel.
+
To make changes without changing the original version, open the panel menu, then click *More > Unlink from library*.
To make changes without changing the original version, open the panel menu and click *Unlink from library*.

* *Convert to Lens* &mdash; Opens *TSVB* and aggregation-based visualizations in *Lens*.

* *Settings* &mdash; Opens the *Settings* window to change the *title*, *description*, and *time range*.

* *More > Replace panel* &mdash; Opens the *Visualize Library* so you can select a new panel to replace the existing panel.

* *More > Delete from dashboard* &mdash; Removes the panel from the dashboard.
* *Remove* &mdash; Removes the panel from the dashboard.
+
If you want to use the panel later, make sure that you save the panel to the *Visualize Library*.

Expand Down
6 changes: 3 additions & 3 deletions docs/user/dashboard/dashboard-controls.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ image::images/dashboard_controlsRangeSlider_8.3.0.png[Range slider control for t
+
For example, you are using the *[Logs] Web Traffic* dashboard from the sample web logs data, and the global time filter is *Last 7 days*. When you add the time slider, you can click the previous and next buttons to advance the time range backward or forward, and click the play button to watch how the data changes over the last 7 days.
[role="screenshot"]
image::images/dashboard_timeSliderControl_8.7.0.gif[Time slider control for the the Last 7 days]
image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt672f3aaadf9ea5a6/6750dd6c2452f972af0a88b4/dashboard_timeslidercontrol_8.17.0.gif[Time slider control for the the Last 7 days]

[float]
[[create-and-add-options-list-and-range-slider-controls]]
Expand Down Expand Up @@ -54,10 +54,10 @@ TIP: Range sliders are for Number type fields only.

. Specify the additional settings:

* For option lists:
* For Options lists:

** Define whether users can select multiple values to filter with the control, or only one.
** For option list controls on _string_ and _IP address_ type fields, you can define how the control's embedded search should behave:
** For Options list controls on _string_ and _IP address_ type fields, you can define how the control's embedded search should behave:

*** **Prefix**: Show options that _start with_ the entered value.
*** **Contains**: Show options that _contain_ the entered value. This setting option is only available for _string_ type fields. Results can take longer to show with this option.
Expand Down
Binary file modified docs/user/dashboard/images/dashboard-panel-maximized.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file added docs/user/dashboard/images/edit-link-icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/user/dashboard/images/edit-links-panel.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/user/dashboard/images/move-control.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 5 additions & 5 deletions docs/user/dashboard/lens.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -39,19 +39,19 @@ Choose the data you want to visualize.

Edit and delete.

. Click image:dashboard/images/lens_layerActions_8.5.0.png[Actions menu to clear Lens visualization layers] on the panel, then **Edit visualization**.
. Hover over the panel and click image:dashboard/images/edit-visualization-icon.png[Edit visualization icon, width=3%] to edit the visualization. The *Edit visualization* flyout appears.

. To change the aggregation *Quick function* and, click the field in the flyout.
. To change the aggregation *Quick function*, click the field in the flyout.

. To delete a field, click image:dashboard/images/trash_can.png[Actions menu icon to delete a field, width=5%] next to the field.

. To duplicate a layer, click image:dashboard/images/lens_layerActions_8.5.0.png[Actions menu to duplicate Lens visualization layers] in the flyout, then select *Duplicate layer*.
. To duplicate a layer, click image:dashboard/images/vertical-actions-menu.png[Actions menu to duplicate Lens visualization layers] in the flyout, then select *Duplicate layer*.

. To clear the layer configuration, click image:dashboard/images/lens_layerActions_8.5.0.png[Actions menu to clear Lens visualization layers] in the flyout, then select *Clear layer*.
. To clear the layer configuration, click image:dashboard/images/vertical-actions-menu.png[Actions menu to clear Lens visualization layers] in the flyout, then select *Clear layer*.

. Click **Apply and close**.

TIP: Use the **Edit visualization** flyout to make edits without having to leave the dashboard, or click **Edit in Lens** to make edits using the Lens application.
TIP: Use the **Edit visualization** flyout to make edits without having to leave the dashboard, or click **Edit in Lens** in the flyout to make edits using the Lens application.

[float]
[[change-the-fields]]
Expand Down
8 changes: 4 additions & 4 deletions docs/user/dashboard/links-panel.asciidoc
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
[[dashboard-links]]
=== Link panels
=== Links panels

You can use **Links** panels to create links to other dashboards or external websites. When creating links to other dashboards, you have the option to carry the time range, query, and filters to apply over to the linked dashboard. Links to external websites follow the <<external-URL-policy,`externalUrl.policy`>> settings. **Links** panels support vertical and horizontal layouts and may be saved to the *Library* for use in other dashboards.

Expand Down Expand Up @@ -46,10 +46,10 @@ To add a previously saved links panel to another dashboard:

To edit links panels:

. From the panel menu (image:images/lens_layerActions_8.5.0.png[panel menu image]), select **Edit Links**.
. Click the Edit icon (image:images/dashboard_controlsEditControl_8.3.0.png[Edit icon image]) next to the link.
. Hover over the panel and click image:dashboard/images/edit-visualization-icon.png[Edit links icon, width=3%] to edit the link. The *Edit links panel* flyout appears.
. Click image:dashboard/images/edit-link-icon.png[Edit link icon, width=3%] next to the link.
+
[role="screenshot"]
image::images/edit-links-panel-8.16.0.png[A screenshot displaying the Edit icon next to the link]
image::images/edit-links-panel.png[A screenshot displaying the Edit icon next to the link]
. Edit the link as needed and then click **Update link**.
. Click **Save**.
9 changes: 3 additions & 6 deletions docs/user/dashboard/share-dashboards.asciidoc
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
= Share dashboards

[float]
[[share-the-dashboard]]
== Share dashboards
= Share dashboards

To share a dashboard with a larger audience, click *Share* in the toolbar. For detailed information about the sharing options, refer to <<reporting-getting-started,Reporting>>.

image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt49f2b5a80ec89a34/66b9e919af508f4ac182c194/share-dashboard.gif[getting a shareable link for a dashboard]
image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt9428300b184af4c6/6763173de7201118db0315a7/share-dashboard-copy-link.gif[getting a shareable link for a dashboard]

TIP: When sharing a dashboard with a link while a panel is in maximized view, the generated link will also open the dashboard on the same maximized panel view.

Expand All @@ -18,7 +15,7 @@ TIP: When sharing a dashboard with a link while a panel is in maximized view, th

You can export dashboards from **Stack Management** > **Saved Objects**. To configure and start the export:

. Select the dashboard that you want, then select **Export**.
. Select the dashboard that you want, then click **Export**.
. Enable **Include related objects** if you want that objects associated to the selected dashboard, such as data views and visualizations, also get exported. This option is enabled by default and recommended if you plan to import that dashboard again in a different space or cluster.
. Select **Export**.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,6 @@ In the layer pane, *Unique count of clientip* appears because the editor automat
.. Click *Close*.

. Click *Save and return*.
+
*[No Title]* appears in the visualization panel header. Since the visualization has its own `Unique visitors` label, you do not need to add a panel title.

[discrete]
[[mixed-multiaxis]]
Expand Down Expand Up @@ -138,7 +136,7 @@ image::images/line-chart-bottom-axis-8.16.0.png[Bottom axis menu, width=50%]

Since you removed the axis labels, add a panel title:

. Open the panel menu, then select *Settings*.
. Hover over the panel and click image:dashboard/images/settings-icon-hover-action.png[Settings icon, width=3%]. The *Settings* flyout appears.

. In the *Title* field, enter `Median of bytes`, then click *Apply*.
+
Expand Down Expand Up @@ -242,7 +240,7 @@ image::images/lens_pieChartCompareSubsetOfDocs_7.16.png[Pie chart that compares

Add a panel title:

. Open the panel menu, then select *Settings*.
. Hover over the panel and click image:dashboard/images/settings-icon-hover-action.png[Settings icon, width=3%]. The *Settings* flyout appears.

. In the *Title* field, enter `Sum of bytes from large requests`, then click *Apply*.

Expand Down Expand Up @@ -275,7 +273,7 @@ image::images/lens_barChartDistributionOfNumberField_7.16.png[Bar chart that dis

Add a panel title:

. Open the panel menu, then select *Settings*.
. Hover over the panel and click image:dashboard/images/settings-icon-hover-action.png[Settings icon, width=3%]. The *Settings* flyout appears.

. In the *Title* field, enter `Website traffic`, then click *Apply*.

Expand Down Expand Up @@ -339,7 +337,7 @@ image::images/lens_treemapMultiLevelChart_7.16.png[Treemap visualization]

Add a panel title:

. Open the panel menu, then select *Settings*.
. Hover over the panel and click image:dashboard/images/settings-icon-hover-action.png[Settings icon, width=3%]. The *Settings* flyout appears.

. In the *Title* field, enter `Page views by location and referrer`, then click *Apply*.

Expand Down
Loading

0 comments on commit 5b8ffd6

Please sign in to comment.