diff --git a/docs/user/dashboard/create-dashboards.asciidoc b/docs/user/dashboard/create-dashboards.asciidoc index 8b0d5e5f524fd..2bc2825cd4fda 100644 --- a/docs/user/dashboard/create-dashboards.asciidoc +++ b/docs/user/dashboard/create-dashboards.asciidoc @@ -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. @@ -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 ** <> ** <> [[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 <> them and edit these duplicates. @@ -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] @@ -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 <> a dashboard while viewing a full screen panel, the generated link will directly open the same panel in full screen mode. @@ -138,10 +138,7 @@ 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]] @@ -149,12 +146,12 @@ image::images/duplicate-panels-8.15.0.png[Duplicate a panel, width=50%] 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 diff --git a/docs/user/dashboard/create-visualizations.asciidoc b/docs/user/dashboard/create-visualizations.asciidoc index 815f46d5711eb..5a4f0d4dc1b6f 100644 --- a/docs/user/dashboard/create-visualizations.asciidoc +++ b/docs/user/dashboard/create-visualizations.asciidoc @@ -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*. @@ -155,7 +155,7 @@ There are three types of *Discover* interactions you can add to dashboard panels + To enable panel interactions, configure <> 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* — Opens the series data in *Discover*. + @@ -165,7 +165,7 @@ To use series data interactions, click a data series in the panel. * *Saved search interactions* — Opens <> data in *Discover*. + -To use saved search interactions, open the panel menu, then click *More > View saved search*. +To use saved Discover session interactions, open the panel menu and click *View Discover session*. [[edit-panels]] === Edit panels @@ -178,15 +178,13 @@ To make changes to the panel, use the panel menu options. * *Edit visualization* — 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* — Opens *TSVB* and aggregation-based visualizations in *Lens*. * *Settings* — Opens the *Settings* window to change the *title*, *description*, and *time range*. -* *More > Replace panel* — Opens the *Visualize Library* so you can select a new panel to replace the existing panel. - -* *More > Delete from dashboard* — Removes the panel from the dashboard. +* *Remove* — 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*. diff --git a/docs/user/dashboard/dashboard-controls.asciidoc b/docs/user/dashboard/dashboard-controls.asciidoc index 1db623f7cea96..629bcfbdff36e 100644 --- a/docs/user/dashboard/dashboard-controls.asciidoc +++ b/docs/user/dashboard/dashboard-controls.asciidoc @@ -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]] @@ -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. diff --git a/docs/user/dashboard/images/dashboard-panel-maximized.png b/docs/user/dashboard/images/dashboard-panel-maximized.png index 26d0dc448c990..1be941430b913 100644 Binary files a/docs/user/dashboard/images/dashboard-panel-maximized.png and b/docs/user/dashboard/images/dashboard-panel-maximized.png differ diff --git a/docs/user/dashboard/images/duplicate-panels-8.15.0.png b/docs/user/dashboard/images/duplicate-panels-8.15.0.png deleted file mode 100644 index 23c5b831dcdb4..0000000000000 Binary files a/docs/user/dashboard/images/duplicate-panels-8.15.0.png and /dev/null differ diff --git a/docs/user/dashboard/images/edit-link-icon.png b/docs/user/dashboard/images/edit-link-icon.png new file mode 100644 index 0000000000000..42f698b7f9fbd Binary files /dev/null and b/docs/user/dashboard/images/edit-link-icon.png differ diff --git a/docs/user/dashboard/images/edit-links-panel.png b/docs/user/dashboard/images/edit-links-panel.png new file mode 100644 index 0000000000000..428f91e5a38e0 Binary files /dev/null and b/docs/user/dashboard/images/edit-links-panel.png differ diff --git a/docs/user/dashboard/images/edit-visualization-icon.png b/docs/user/dashboard/images/edit-visualization-icon.png new file mode 100644 index 0000000000000..fab4eef47cce5 Binary files /dev/null and b/docs/user/dashboard/images/edit-visualization-icon.png differ diff --git a/docs/user/dashboard/images/move-control.png b/docs/user/dashboard/images/move-control.png new file mode 100644 index 0000000000000..b75eb6fb7622e Binary files /dev/null and b/docs/user/dashboard/images/move-control.png differ diff --git a/docs/user/dashboard/images/settings-icon-hover-action.png b/docs/user/dashboard/images/settings-icon-hover-action.png new file mode 100644 index 0000000000000..96a60f5131ba6 Binary files /dev/null and b/docs/user/dashboard/images/settings-icon-hover-action.png differ diff --git a/docs/user/dashboard/images/vertical-actions-menu.png b/docs/user/dashboard/images/vertical-actions-menu.png new file mode 100644 index 0000000000000..a7a6c3dc4e887 Binary files /dev/null and b/docs/user/dashboard/images/vertical-actions-menu.png differ diff --git a/docs/user/dashboard/lens.asciidoc b/docs/user/dashboard/lens.asciidoc index ca5ec69add9f6..b0ed7a9a0f9e9 100644 --- a/docs/user/dashboard/lens.asciidoc +++ b/docs/user/dashboard/lens.asciidoc @@ -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]] diff --git a/docs/user/dashboard/links-panel.asciidoc b/docs/user/dashboard/links-panel.asciidoc index 62c5538c7fcc3..e8d4273db7de2 100644 --- a/docs/user/dashboard/links-panel.asciidoc +++ b/docs/user/dashboard/links-panel.asciidoc @@ -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 <> settings. **Links** panels support vertical and horizontal layouts and may be saved to the *Library* for use in other dashboards. @@ -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**. \ No newline at end of file diff --git a/docs/user/dashboard/share-dashboards.asciidoc b/docs/user/dashboard/share-dashboards.asciidoc index 4e8f1839ae9b2..5cb2b752c65cd 100644 --- a/docs/user/dashboard/share-dashboards.asciidoc +++ b/docs/user/dashboard/share-dashboards.asciidoc @@ -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 <>. -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. @@ -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**. diff --git a/docs/user/dashboard/tutorial-create-a-dashboard-of-lens-panels.asciidoc b/docs/user/dashboard/tutorial-create-a-dashboard-of-lens-panels.asciidoc index 4d299ba951296..0b3f340af1014 100644 --- a/docs/user/dashboard/tutorial-create-a-dashboard-of-lens-panels.asciidoc +++ b/docs/user/dashboard/tutorial-create-a-dashboard-of-lens-panels.asciidoc @@ -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]] @@ -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*. + @@ -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*. @@ -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*. @@ -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*. diff --git a/docs/user/dashboard/use-dashboards.asciidoc b/docs/user/dashboard/use-dashboards.asciidoc index 1baa7d49ab8f8..127a8048f4056 100644 --- a/docs/user/dashboard/use-dashboards.asciidoc +++ b/docs/user/dashboard/use-dashboards.asciidoc @@ -7,7 +7,7 @@ {kib} supports several ways to explore the data displayed in a dashboard more in depth: * The **query bar**, using KQL expressions by default. -* The **Time range**, that allows you to display data only for the period that you want to focus on. You can set a global time range for the entire dashboard, or specify a custom time range for each panel. +* The **time range**, that allows you to display data only for the period that you want to focus on. You can set a global time range for the entire dashboard, or specify a custom time range for each panel. * **Controls**, that dashboard creators can add to help viewers filter on specific values. * **Filter pills**, that you can add and combine by clicking on specific parts of the dashboard visualizations, or by defining conditions manually from the filter editor. The filter editor is a good alternative if you're not comfortable with using KQL expressions in the main query bar. * View the data of a panel and the requests used to build it. @@ -16,6 +16,28 @@ This section shows the most common ways for you to filter dashboard data. For more information about {kib} and {es} filtering capabilities, refer to <>. +[float] +=== Use filter pills + +Use filter pills to focus in on the specific data you want. + +[role="screenshot"] +image::images/dashboard_filter_pills_8.15.0.png[Filter pills, width=50%] + +[float] +==== Add pills by interacting with visualizations + +You can interact with some panel visualizations to explore specific data more in depth. Upon clicking, filter pills are added and applied to the entire dashboard, so that surrounding panels and visualizations also reflect your browsing. + +image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt93fcc34395a310d4/6750e7e9b09fe993fbc0824a/add-filter-pills-8.17.gif[Browsing a chart creates a filter dynamically] + +[float] +==== Add pills using the filter editor + +As an alternative to the main query bar, you can filter dashboard data by defining individual conditions on specific fields and values, and by combining these conditions together in a filter pill. + +image::images/dashboard-filter-editor.png[Filter editor with 2 conditions] + [float] === Filter dashboards using the KQL query bar @@ -40,11 +62,11 @@ image::images/dashboard-global-time-range.png[Time range menu with multiple time **To apply a panel-level time range:** -. 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. . Turn on *Apply a custom time range*. -. Enter the time range you want to view, then *Apply* it. +. Enter the time range you want to view, then click *Apply*. **To view and edit the time range applied to a specific panel:** @@ -66,7 +88,7 @@ Filter the data with one or more options that you select. . Select the available options. + -The *Exists* query returns all documents that contain an indexed value for the field. +Selecting _Exists_ returns all documents that contain an indexed value for the field. . Select how to filter the options. @@ -113,30 +135,7 @@ Filter the data within a specified range of time. . To clear the specified values, click image:images/dashboard_controlsClearSelections_8.3.0.png[The icon to clear all specified values in the Range slider]. [role="screenshot"] -image::images/dashboard_timeSliderControl_8.7.0.gif[Time slider control] - -[float] -=== Use filter pills - -Use filter pills to focus in on the specific data you want. - -[role="screenshot"] -image::images/dashboard_filter_pills_8.15.0.png[Filter pills, width=50%] - -[float] -==== Add pills by interacting with visualizations - -You can interact with some panel visualizations to explore specific data more in depth. Upon clicking, filter pills are added and applied to the entire dashboard, so that surrounding panels and visualizations also reflect your browsing. - -image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt3636aae815d783f9/66c467d346b3f438b396fafa/dashboard-filter-pills.gif[Browsing a chart creates a filter dynamically] - -[float] -==== Add pills using the filter editor - -As an alternative to the main query bar, you can filter dashboard data by defining individual conditions on specific fields and values, and by combining these conditions together in a filter pill. - -image::images/dashboard-filter-editor.png[Filter editor with 2 conditions] - +image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt672f3aaadf9ea5a6/6750dd6c2452f972af0a88b4/dashboard_timeslidercontrol_8.17.0.gif[Time slider control] [float] [[download-csv]] @@ -145,7 +144,7 @@ image::images/dashboard-filter-editor.png[Filter editor with 2 conditions] **View the data in visualizations and the requests that collect the data:** -. Open the panel menu, then select **Inspect**. +. Open the panel menu and select **Inspect**. . View and download the panel data. @@ -181,7 +180,7 @@ You can display dashboards in full screen mode to gain visual space and view or image::images/dashboard-full-screen.png[A dashboard in full screen mode] -If you need to focus on a particular panel, you can maximize it. To do that, open the panel menu, and select **More** > **Maximize**. You can minimize it again the same way. +If you need to focus on a particular panel, you can maximize it by opening the panel menu and selecting **Maximize**. You can minimize it again the same way. 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.