diff --git a/docs/user/dashboard/create-dashboards.asciidoc b/docs/user/dashboard/create-dashboards.asciidoc index 48fba9a65d3a56d..b07b4e88a684a41 100644 --- a/docs/user/dashboard/create-dashboards.asciidoc +++ b/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 <>. -. 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 <>: +. Add content to the dashboard. You have several options covered in more detail in the <>: ** <>. This option is a shortcut to create a chart using **Lens**, the default visualization editor in {kib}. ** <>. 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 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 <>. [[add-dashboard-settings]] . Define the main settings of your dashboard from the *Settings* menu located in the toolbar. -.. Meaningful title, description, and <> 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 <> 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* — 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* — Displays the titles in the panel headers. *** *Sync color palettes across panels* — Applies the same color palette to all panels on the dashboard. *** *Sync cursor across panels* — 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* — When you hover your cursor over a *Lens* chart, the tooltips on all other related dashboard charts automatically appears. +*** *Sync tooltips across panels* — 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 <> 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 diff --git a/docs/user/dashboard/dashboard-controls.asciidoc b/docs/user/dashboard/dashboard-controls.asciidoc index 05819fe567e3047..1db623f7cea9697 100644 --- a/docs/user/dashboard/dashboard-controls.asciidoc +++ b/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, <>. @@ -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* — 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** — Define whether controls should ignore or apply any filter specified in the main filter bar of the dashboard. ** **Apply global time range to controls** — Define whether controls should ignore or apply the main time range specified for the dashboard. Note that <> rely on the global time range and don't work properly when this option is disabled. -* *Selection* settings: +* *Selections* settings: ** *Validate user selections* — When selected, any selected option that results in no data is ignored. ** *Chain controls* — 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. diff --git a/docs/user/dashboard/images/add_content_to_dashboard_8.15.0.png b/docs/user/dashboard/images/add_content_to_dashboard_8.15.0.png new file mode 100644 index 000000000000000..8a8b9b9d5d03b4c Binary files /dev/null and b/docs/user/dashboard/images/add_content_to_dashboard_8.15.0.png differ diff --git a/docs/user/dashboard/images/dashboard-add-control-8.15.0.png b/docs/user/dashboard/images/dashboard-add-control-8.15.0.png new file mode 100644 index 000000000000000..d4a21b32c4344b9 Binary files /dev/null and b/docs/user/dashboard/images/dashboard-add-control-8.15.0.png differ diff --git a/docs/user/dashboard/images/dashboard-add-time-slider-control-8.15.0.png b/docs/user/dashboard/images/dashboard-add-time-slider-control-8.15.0.png new file mode 100644 index 000000000000000..45c954e0c4b9b42 Binary files /dev/null and b/docs/user/dashboard/images/dashboard-add-time-slider-control-8.15.0.png differ diff --git a/docs/user/dashboard/images/dashboard-controls-settings-8.15.0.png b/docs/user/dashboard/images/dashboard-controls-settings-8.15.0.png new file mode 100644 index 000000000000000..ea348115b25d580 Binary files /dev/null and b/docs/user/dashboard/images/dashboard-controls-settings-8.15.0.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 new file mode 100644 index 000000000000000..23c5b831dcdb415 Binary files /dev/null and b/docs/user/dashboard/images/duplicate-panels-8.15.0.png differ