Skip to content

Commit

Permalink
[Docs] Refresh dashboards docs (elastic#191129)
Browse files Browse the repository at this point in the history
## Summary

This PR updates the structure of the Dashboards docs and refreshes some
outdated parts of the content.
More updates will be made in future PRs to refresh screenshots and to
refresh the content more in depth.

This new structure and edits:
- distribute the pages in more user-oriented identified themes, for
better findability, scanning, and to ease possible integration of some
of these pages into in-app documentation.
- are more future proof to evolve along with upcoming features.

~I'll leave this PR as a draft until I resolve some link dependencies
coming from other docs sources and check some additional bits of
content.~

Preview available on demand on Slack.

Closes: elastic/platform-docs-team#408 (I'll
create separate issues for remaining items)
Closes: elastic/platform-docs-team#413
Closes: elastic/platform-docs-team#418
  • Loading branch information
florent-leborgne committed Sep 6, 2024
1 parent 2ace62c commit 3984d4d
Show file tree
Hide file tree
Showing 38 changed files with 958 additions and 744 deletions.
3 changes: 2 additions & 1 deletion docs/management/advanced-options.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,8 @@ When enabled, provides access to the experimental *Labs* features for *Canvas*.

[[labs-dashboard-defer-below-fold]]`labs:dashboard:deferBelowFold`::
When enabled, the panels that appear below the fold are loaded when they become visible on the dashboard.
_Below the fold_ refers to panels that are not immediately visible when you open a dashboard, but become visible as you scroll. For additional information, refer to <<dashboard-troubleshooting,Improve dashboard loading time>>.
_Below the fold_ refers to panels that are not immediately visible when you open a dashboard, but become visible as you scroll.
//For additional information, refer to <<dashboard-troubleshooting,Improve dashboard loading time>>.

[[labs-dashboard-enable-ui]]`labs:dashboard:enable_ui`::
When enabled, provides access to the experimental *Labs* features for *Dashboard*.
Expand Down
2 changes: 1 addition & 1 deletion docs/management/numeral.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Numeral formatting patterns are used in multiple places in {kib}, including:

* <<advanced-options, Advanced settings>>
* <<field-formatters-numeric, Data view formatters>>
* <<tsvb, *TSVB*>>
* <<tsvb-panel, *TSVB*>>
* <<canvas, *Canvas*>>

The simplest pattern format is `0`, and the default {kib} pattern is `0,0.[000]`.
Expand Down
11 changes: 10 additions & 1 deletion docs/redirects.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -439,6 +439,16 @@ For the most up-to-date API details, refer to the

This content has moved. Refer to <<manage-cases-settings>>.

[role="exclude", id="create-drilldowns"]
== Create drilldowns

This content has moved. Refer to <<drilldowns>>.

[role="exclude", id="tsvb"]
== Create drilldowns

This content has moved. Refer to <<tsvb-panel>>.

////
APM redirects
////
Expand Down Expand Up @@ -1133,4 +1143,3 @@ Refer to {api-kibana}/group/endpoint-cases[cases API].
== Sync {ml} saved objects API

Refer to {api-kibana}/group/endpoint-ml[machine learning APIs].

Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
[[aggregation-reference]]
== Create panels with editors

{kib} provides several editors that you can use to create panels of your data. Each editor supports different features and {ref}/search-aggregations.html[{es} aggregations]. To choose the best editor for your data, review the following information.

[float]
[[chart-types]]
=== Supported panel types
== Supported chart types

[[aggregation-reference]]
[options="header"]
|===

Expand Down Expand Up @@ -494,9 +489,3 @@ Pipeline aggregations are dependent on the outputs calculated from other aggrega
|===

For information about {es} pipeline aggregations, refer to {ref}/search-aggregations-pipeline.html[Pipeline aggregations].

include::lens.asciidoc[]
include::tsvb.asciidoc[]
include::vega.asciidoc[]
include::aggregation-based.asciidoc[]
include::timelion.asciidoc[]
151 changes: 151 additions & 0 deletions docs/user/dashboard/create-dashboards.asciidoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
[[create-dashboards]]
= Build dashboards

{kib} offers many ways to build powerful dashboards that will help you visualize and keep track of the most important information contained in your {es} data.

* Create and assemble visualizations such as charts or maps, and enrich them with helpful legends containing key data.
* Extract and show key indicators and metrics to keep them visible and highlighted at all times.
* Add text, images, and links to help viewers make the most of your dashboard.
* Include additional controls to facilitate filtering and browsing the data.

[float]
[[dashboard-minimum-requirements]]

To create or edit dashboards, you first need to:

* have {ref}/getting-started-index.html[data indexed into {es}] and a <<data-views, data view>>. A data view is a subset of your {es} data, and allows you to load just the right data when building a visualization or exploring it.
+
TIP: If you don't have data at hand and still want to explore dashboards, you can import one of the <<sample-data,sample data sets>> available.

* have sufficient permissions on the **Dashboard** feature. If that's not the case, you might get a read-only indicator. A {kib} administrator can <<kibana-privileges,grant you the required privileges>>.

//include::dashboard-best-practices.asciidoc[]

[[create-dashboard]]
== Create a dashboard

//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}.

. 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>>:
** <<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.

. 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.
.. 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.
*** *Use margins between panels* &mdash; Adds a margin of space between each panel.
*** *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.

.. Click *Apply*.

. **Save** Save the dashboard.

[[open-the-dashboard]]
== Edit a dashboard

. Open the *Dashboard* page in {kib}.

. Locate the dashboard you want to edit.
+
TIP: When looking for a specific dashboard, you can filter them by tag or by creator, or search the list based on their name and description. Note that the creator information is only available for dashboards created on or after version 8.14.

. 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.

. 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*.


[[reset-the-dashboard]]
=== Reset dashboard changes

When editing a dashboard, you can revert any changes you've made since the last save using **Reset dashboards**.

NOTE: Once changes are saved, you can no longer revert them in one click, and instead have to edit the dashboard manually.

. In the toolbar, click *Reset*.

. On the *Reset dashboard* window, click *Reset dashboard*.

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

include::drilldowns.asciidoc[leveloffset=-1]


[[arrange-panels]]
== Organize dashboard panels

[[moving-containers]]
[[resizing-containers]]
=== Move and resize panels

Compare the data in your panels side-by-side, organize panels by priority, resize the panels so they all appear immediately on the dashboard, and more.

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 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*.
+
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.

[[duplicate-panels]]
=== Copy and duplicate panels

To duplicate a panel and the configured functionality, use the clone and copy panel options. Cloned and copied panels replicate all of the functionality from the original panel,
including renaming, editing, and cloning.

[float]
[[clone-panels]]
==== Duplicate panels

Duplicated panels appear next to the original panel, and move the other panels to provide a space on the dashboard.

. In the toolbar, click *Edit*.

. Open the panel menu, then select *Duplicate panel*.

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

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*.

== Import dashboards

You can import dashboards from the **Saved Objects** page under **Stack Management**. Refer to <<managing-saved-objects,Manage saved objects>>.

When importing dashboards, you also import their related objects, such as data views and visualizations. Import options allow you to define how the import should behave with these related objects.

* **Check for existing objects**: When selected, objects are not imported when another object with the same ID already exists in this space or cluster. For example, if you import a dashboard that uses a data view which already exists, the data view is not imported and the dashboard uses the existing data view instead. You can also chose to select manually which of the imported or the existing objects are kept by selecting **Request action on conflict**.

* **Create new objects with random IDs**: All related objects are imported and are assigned a new ID to avoid conflicts.

image:images/dashboard-import-saved-object.png[Import panel]
Loading

0 comments on commit 3984d4d

Please sign in to comment.