diff --git a/.eslintignore b/.eslintignore index c848fc0797907..4c6618779bbda 100644 --- a/.eslintignore +++ b/.eslintignore @@ -21,8 +21,6 @@ snapshots.js # plugin overrides /src/core/lib/kbn_internal_native_observable /src/plugins/data/common/es_query/kuery/ast/_generated_/** -/src/plugins/vis_types/timelion/common/_generated_/** -/x-pack/plugins/apm/e2e/tmp/* /x-pack/plugins/canvas/canvas_plugin /x-pack/plugins/canvas/shareable_runtime/build /x-pack/plugins/canvas/storybook/build diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index fadcc4609e676..48674bc5444ff 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -125,8 +125,6 @@ /x-pack/test/api_integration/apis/uptime @elastic/uptime # Client Side Monitoring / Uptime (lives in APM directories but owned by Uptime) -/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm @elastic/uptime -/x-pack/plugins/apm/e2e/cypress/integration/csm_dashboard.feature @elastic/uptime /x-pack/plugins/apm/public/application/uxApp.tsx @elastic/uptime /x-pack/plugins/apm/public/components/app/RumDashboard @elastic/uptime /x-pack/plugins/apm/server/lib/rum_client @elastic/uptime diff --git a/.github/paths-labeller.yml b/.github/paths-labeller.yml index 81d57be9b2d95..37414be6973ad 100644 --- a/.github/paths-labeller.yml +++ b/.github/paths-labeller.yml @@ -15,7 +15,6 @@ - "x-pack/test/fleet_api_integration/**/*.*" - "Team:uptime": - "x-pack/plugins/uptime/**/*.*" - - "x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/*.*" - "x-pack/plugins/apm/public/application/csmApp.tsx" - "x-pack/plugins/apm/public/components/app/RumDashboard/**/*.*" - "x-pack/plugins/apm/public/components/app/RumDashboard/*.*" diff --git a/docs/user/dashboard/aggregation-based.asciidoc b/docs/user/dashboard/aggregation-based.asciidoc index d901ab8deccb8..351e1f5d0825a 100644 --- a/docs/user/dashboard/aggregation-based.asciidoc +++ b/docs/user/dashboard/aggregation-based.asciidoc @@ -187,8 +187,33 @@ TIP: Aggregation-based panels support a maximum of three *Split series*. [role="screenshot"] image:images/bar-chart-tutorial-2.png[Bar chart with sample logs data] +[float] +[[save-the-aggregation-based-panel]] +===== Save and add the panel + +Save the panel to the *Visualize Library* and add it to the dashboard, or add it to the dashboard without saving. + +To save the panel to the *Visualize Library*: + +. Click *Save to library*. + +. Enter the *Title* and add any applicable <>. + +. Make sure that *Add to Dashboard after saving* is selected. + . Click *Save and return*. +To save the panel to the dashboard: + +. Click *Save and return*. + +. Add an optional title to the panel. + +.. In the panel header, click *No Title*. + +.. On the *Customize panel* window, select *Show panel title*. + +.. Enter the *Panel title*, then click *Save*. diff --git a/docs/user/dashboard/aggregation-reference.asciidoc b/docs/user/dashboard/aggregation-reference.asciidoc deleted file mode 100644 index 17bfc19c2e0c9..0000000000000 --- a/docs/user/dashboard/aggregation-reference.asciidoc +++ /dev/null @@ -1,467 +0,0 @@ -[[aggregation-reference]] -== Supported features by panel type - -Each panel type in {kib} supports different features and {ref}/search-aggregations.html[{es} aggregations]. -This reference can help simplify the comparison if you need a specific feature. - - -[float] -[[chart-types]] -=== Supported panel types by editor - -[options="header"] -|=== - -| Type | Lens | TSVB | Agg-based | Vega | Timelion - -| Table -| ✓ -| ✓ -| ✓ -| -| - -| Bar, line, and area -| ✓ -| ✓ -| ✓ -| ✓ -| ✓ - -| Split chart/small multiples -| -| ✓ -| ✓ -| ✓ -| - -| Pie and donut -| ✓ -| -| ✓ -| ✓ -| - -| Sunburst -| ✓ -| -| ✓ -| ✓ -| - -| Treemap -| ✓ -| -| -| ✓ -| - -| Heat map -| ✓ -| ✓ -| ✓ -| ✓ -| - -| Gauge and Goal -| -| ✓ -| ✓ -| ✓ -| - -| Markdown -| -| ✓ -| -| -| - -| Metric -| ✓ -| ✓ -| ✓ -| ✓ -| - -| Tag cloud -| -| -| ✓ -| ✓ -| - -|=== - -[float] -[[table-features]] -=== Table features - -[options="header"] -|=== - -| Type | Lens | TSVB | Agg-based - -| Summary row -| ✓ -| -| ✓ - -| Pivot table -| ✓ -| -| - -| Calculated column -| Formula -| ✓ -| Percent only - -| Color by value -| ✓ -| ✓ -| - -|=== - -[float] -[[xy-features]] -=== Bar, line, area features - -[options="header"] -|=== - -| Type | Lens | TSVB | Agg-based | Vega | Timelion - -| Dense time series -| Customizable -| ✓ -| Customizable -| ✓ -| ✓ - -| Percentage mode -| ✓ -| ✓ -| ✓ -| ✓ -| - -| Break downs -| 1 -| 1 -| 3 -| ∞ -| 1 - -| Custom color with break downs -| -| Only for Filters -| ✓ -| ✓ -| - -| Fit missing values -| ✓ -| -| ✓ -| ✓ -| ✓ - -| Synchronized tooltips -| -| ✓ -| -| -| - -|=== - -[float] -[[bucket-aggregations]] -=== Bucket aggregations - -Vega supports all bucket aggregations because it allows custom queries. - -For information about {es} bucket aggregations, refer to {ref}/search-aggregations-bucket.html[Bucket aggregations]. - -[options="header"] -|=== - -| Type | Lens | TSVB | Agg-based - -| Histogram -| ✓ -| -| ✓ - -| Date histogram -| ✓ -| ✓ -| ✓ - -| Date range -| Use filters -| -| ✓ - -| Filter -| -| ✓ -| - -| Filters -| ✓ -| ✓ -| ✓ - -| GeoHash grid -| -| -| ✓ - -| IP range -| Use filters -| Use filters -| ✓ - -| Range -| ✓ -| Use filters -| ✓ - -| Terms -| ✓ -| ✓ -| ✓ - -| Significant terms -| -| -| ✓ - -|=== - -[float] -[[metrics-aggregations]] -=== Metrics aggregations - -Vega supports all metric aggregations because it allows custom queries. - -For information about {es} metrics aggregations, refer to {ref}/search-aggregations-metrics.html[Metrics aggregations]. - -[options="header"] -|=== - -| Type | Lens | TSVB | Agg-based - -| Metrics with filters -| ✓ -| -| - -| Average, Sum, Max, Min -| ✓ -| ✓ -| ✓ - -| Unique count (Cardinality) -| ✓ -| ✓ -| ✓ - -| Percentiles and Median -| ✓ -| ✓ -| ✓ - -| Percentiles Rank -| -| ✓ -| ✓ - -| Standard deviation -| -| ✓ -| ✓ - -| Sum of squares -| -| ✓ -| - -| Top hit (Last value) -| ✓ -| ✓ -| ✓ - -| Value count -| -| -| ✓ - -| Variance -| -| ✓ -| - -|=== - -[float] -[[pipeline-aggregations]] -=== Pipeline aggregations - -Vega supports all pipeline aggregations because it allows custom queries. - -For information about {es} pipeline aggregations, refer to {ref}/search-aggregations-pipeline.html[Pipeline aggregations]. - -[options="header"] -|=== - -| Type | Lens | TSVB | Agg-based - -| Avg bucket -| <> -| ✓ -| ✓ - -| Derivative -| ✓ -| ✓ -| ✓ - -| Max bucket -| <> -| ✓ -| ✓ - -| Min bucket -| <> -| ✓ -| ✓ - -| Sum bucket -| <> -| ✓ -| ✓ - -| Moving average -| ✓ -| ✓ -| ✓ - -| Cumulative sum -| ✓ -| ✓ -| ✓ - -| Bucket script -| -| -| ✓ - -| Bucket selector -| -| -| - -| Serial differencing -| -| ✓ -| ✓ - -|=== - -[float] -[[custom-functions]] -=== Additional functions - -[options="header"] -|=== - -| Type | Lens | TSVB | Agg-based - -| Counter rate -| ✓ -| ✓ -| - -| <> -| Use <> -| ✓ -| - -| <> -| -| ✓ -| - -| <> -| -| ✓ -| - -| Static value -| -| ✓ -| - - -|=== - -[float] -[[other-features]] -=== Other features - -This comparison is meant for users who are not sure about which {kib} panel type to -build their advanced visualization. - -[options="header"] -|=== - -| Type | Lens | TSVB | Agg-based | Vega | Timelion - -| Math -| ✓ -| ✓ -| -| ✓ -| ✓ - -| Visualize two indices -| ✓ -| ✓ -| -| ✓ -| ✓ - -| Math across indices -| -| -| -| ✓ -| ✓ - -| Time shifts -| ✓ -| ✓ -| -| ✓ -| ✓ - -| Fully custom {es} queries -| -| -| -| ✓ -| - -| Normalize by time -| ✓ -| ✓ -| -| -| - - -|=== diff --git a/docs/user/dashboard/dashboard-troubleshooting.asciidoc b/docs/user/dashboard/dashboard-troubleshooting.asciidoc new file mode 100644 index 0000000000000..d9bf80a5b1996 --- /dev/null +++ b/docs/user/dashboard/dashboard-troubleshooting.asciidoc @@ -0,0 +1,69 @@ +[[dashboard-troubleshooting]] +== Dashboard and visualizations troubleshooting +++++ +Troubleshooting +++++ + +Find solutions to common dashboard and visualization issues. + +[float] +[[defer-loading-panels-below-the-fold]] +=== Improve dashboard loading time + +To improve the dashboard loading time, enable *Defer loading panels below the fold* *Lab*, which loads dashboard panels as they become visible on the dashboard. + +. In the toolbar, click *Labs*. ++ +To enable *Labs*, contact your administrator, or configure the <>. + +. To specify how you want to enable the lab, use the following actions: + +* *{kib}* — Enables the lab in {kib}. + +* *Browser* — Enables the lab for your browser, and persists after you close the browser. + +* *Session* — Enables the lab for this browser session, then resets after you close the browser. + +. Click *Close*. + +[float] +[[migrate-timelion-app-worksheets]] +=== Migrate Timelion app worksheets + +deprecated::[The *Timelion* app is deprecated in 7.0.0, and will be removed in 7.16.0. To prepare for the removal of *Timelion* app, you must migrate *Timelion* app worksheets to a dashboard. + +. Open the main menu, then click *Dashboard*. + +. On the *Dashboards* page, click *Create dashboard*. + +. For each *Timelion* app worksheet, create a visualization with the *Timelion* editor. + +.. On the dashboard, click *All types > Aggregation based*, then select *Timelion*. + +.. In your browser, open a new tab, the open the *Timelion* app. + +.. Select the chart you want to copy, then copy the chart expression. ++ +[role="screenshot"] +image::images/timelion-copy-expression.png[Timelion app chart] + +.. Go to the *Timelion* editor, paste the chart expression in the *Timelion expression* field, then click *Update*. ++ +[role="screenshot"] +image::images/timelion-vis-paste-expression.png[Timelion advanced editor UI] + +. Save the visualization. + +.. In the toolbar, click *Save to library*. + +.. Enter the *Title* and add any applicable <>. + +.. Make sure that *Add to Dashboard after saving* is selected. + +.. Click *Save and return*. ++ +The Timelion visualization panel appears on the dashboard. ++ +[role="screenshot"] +image::user/dashboard/images/timelion-dashboard.png[Final dashboard with saved Timelion app worksheet] + diff --git a/docs/user/dashboard/dashboard.asciidoc b/docs/user/dashboard/dashboard.asciidoc index 1284c057af2da..1a9a0087becda 100644 --- a/docs/user/dashboard/dashboard.asciidoc +++ b/docs/user/dashboard/dashboard.asciidoc @@ -1,5 +1,5 @@ [[dashboard]] -= Dashboard += Dashboard and visualizations [partintro] -- @@ -11,14 +11,13 @@ that bring clarity to your data, tell a story about your data, and allow you to [role="screenshot"] image:images/Dashboard_example.png[Example dashboard] -Panels display your data in charts, tables, maps, and more, which allow you to compare your data side-by-side to identify patterns and connections. Dashboards support several editors you can use to create panels, and support many types of panels to display your data. +Panels display your data in charts, tables, maps, and more, which allow you to compare your data side-by-side to identify patterns and connections. Dashboards support several types of panels to display your data, and several options to create panels. [cols="2"] |=== | <> -| Use the *Lens*, *TSVB*, *Vega*, and *Timelion* editors to create visualizations of your data, or create *Aggregation based* visualizations using {es} aggregations. -*Lens* is the recommended editor. +| Use one of the editors to create visualizations of your data. Each editor varies in capabilities for all levels of analysts. | <> | Create beautiful displays of your geographical data. @@ -33,7 +32,10 @@ Panels display your data in charts, tables, maps, and more, which allow you to c | Display a table of live streaming logs. | <> -| Add context to your panels with <>, or add dynamic filters with <>. +| Add interactive filters with *Controls* panels. + +| <> +| Add context to your panels with *Text*. |=== @@ -61,71 +63,115 @@ refer to <>. [[open-the-dashboard]] === Open the dashboard -Begin with an empty dashboard, or open an existing dashboard. +Begin with an empty dashboard, or open an existing dashboard. . Open the main menu, then click *Dashboard*. . On the *Dashboards* page, choose one of the following options: * To start with an empty dashboard, click *Create dashboard*. ++ +When you create a dashboard, you are automatically in edit mode and can make changes to the dashboard. * To open an existing dashboard, click the dashboard *Title* you want to open. ++ +When you open an existing dashboard, you are in view mode. To make changes to the dashboard, click *Edit* in the toolbar. [float] [[create-panels-with-lens]] -=== Add panels +=== Create and add panels + +You create panels using the editors, which you can access from the dashboard toolbar or the *Visualize Library*, or add panels that are saved in the *Visualize Library*, or search results from <>. + +To create panels from the dashboard toolbar, use one of the following options: + +* *Create visualization* — Opens the drag-and-drop editor, which is the recommended way to create visualization panels. + +* *All types* — Opens the menu for all of the editors and panel types. + +To create panels from the *Visualize Library*: -Create and add panels of your data to the dashboard, or add existing panels from the library. +. Open the main menu, then click *Visualize Library*. -* *Create visualization* — Opens *Lens*, the recommended editor to create visualizations of your data. +. Click *Create visualization*, then select an editor. -* *All types* — Select the editor to create the panel, or select the panel type you want to add to the dashboard. +To add existing panels from the *Visualize Library*: -* *Add from library* — Add panels from the *Visualize Library*, including search results from <>. The search results from *Discover* are not aggregated. +. In the dashboard toolbar, click *Add from library*. + +. Click the panel you want to add to the dashboard, then click *X*. + When a panel contains a saved query, both queries are applied. ++ +When you add search results from *Discover* to dashboards, the results are not aggregated. [[tsvb]] [float] [[save-panels]] -=== Save panels +=== Save and add panels -Consider where you want to save the panel in {kib}. You can save the panel just on the dashboard you are working on, or save the panel in the *Visualize Library*. +Consider where you want to save and add the panel in {kib}. [float] [[save-to-visualize-library]] ==== Save to the Visualize Library -To use the panel on *Canvas* workpads and other dashboards, save the panel to the *Visualize Library*. +To use the panel on other dashboards and *Canvas* workpads, save the panel to the *Visualize Library*. When panels are saved in the *Visualize Library*, image:dashboard/images/visualize-library-icon.png[Visualize Library icon] appears in the panel header. -. Click *Save to library*. +If you created the panel from the dashboard: + +. In the editor, click *Save to library*. -. Enter the *Title* and add any applicable *Tags*. +. Enter the *Title* and add any applicable <>. . Make sure that *Add to Dashboard after saving* is selected. . Click *Save and return*. -+ -When panels are saved in the *Visualize Library*, image:dashboard/images/visualize-library-icon.png[Visualize Library icon] appears in the panel header. + +If you created the panel from the *Visualize Library*: + +. In the editor, click *Save*. + +. On the *Save* window, enter the *Title*. + +. Choose one of the following options: + +* To save the panel to a dashboard and the *Visualize Library*, select *Add to library*, add any applicable <>, then click *Save and go to Dashboard*. + +* To save the panel only to the *Visualize Library*, select *None*, add any applicable <>, then click *Save and add to library*. [float] [[save-to-the-dashboard]] ==== Save to the dashboard -Quickly add the panel and return to the dashboard without specifying the save options or adding the panel to the *Visualize Library*. +Return to the dashboard and add the panel without specifying the save options or adding the panel to the *Visualize Library*. -. Click *Save and return*. +If you created the panel from the dashboard: -. Add more panels to the dashboard, or specify the panel title. +. In the editor, click *Save and return*. + +. Add an optional title to the panel. .. In the panel header, click *No Title*. -.. Select *Show panel title*. +.. On the *Customize panel* window, select *Show panel title*. + +.. Enter the *Panel title*, then click *Save*. + +If you created the panel from the *Visualize Library*: + +. Click *Save*. -.. Enter the *Panel title*. +. On the *Save* window, enter the *Title*. -If you change your mind and want to add the panel to the *Visualize Library*: +. Choose one of the following options: + +* If you want to add the panel to an existing dashboard, select *Existing*, select the dashboard from the dropdown, then click *Save and go to Dashboard*. + +* If you want to add the panel to a new dashboard, select *New*, then click *Save and go to Dashboard*. + +To add unsaved dashboard panels to the *Visualize Library*: . Open the panel menu, then select *More > Save to library*. @@ -135,72 +181,61 @@ If you change your mind and want to add the panel to the *Visualize Library*: [[add-text]] == Add context to panels -To provide context to your dashboard panels, add *Text* panels that display important information, instructions, images, and more. - -You create *Text* panels using GitHub-flavored Markdown text. For information about GitHub-flavored Markdown text, click *Help*. +To provide context to your dashboard panels, add *Text* panels that display important information, instructions, images, and more. You create *Text* panels using GitHub-flavored Markdown text. -. From the dashboard, click *All types*, then select *Text*. +. On the dashboard, click image:images/dashboard_createNewTextButton_7.15.0.png[Create New Text button in dashboard toolbar]. . In the *Markdown* field, enter the text, then click *Update*. For example, when you enter: [role="screenshot"] -image::images/markdown_example_1.png[] +image::images/markdown_example_1.png[Markdown text with links] The following instructions are displayed: [role="screenshot"] -image::images/markdown_example_2.png[] +image::images/markdown_example_2.png[Panel with markdown link text] Or when you enter: [role="screenshot"] -image::images/markdown_example_3.png[] +image::images/markdown_example_3.png[Markdown text with image file] The following image is displayed: [role="screenshot"] -image::images/markdown_example_4.png[] +image::images/markdown_example_4.png[Panel with markdown image] -[float] -[[edit-panels]] -== Edit panels +For detailed information about writing on GitHub, click *Help*. -To make changes to the panel, use the panel menu options. - -. In the toolbar, click *Edit*. +[float] +[[save-the-markdown-panel]] +=== Save and add the panel -. Open the panel menu, then use the following options: +Save the panel to the *Visualize Library* and add it to the dashboard, or add it to the dashboard without saving. -* *Edit lens* — Opens *Lens* so you can make changes to the visualization. +To save the panel to the *Visualize Library*: -* *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*. +. Click *Save to library*. -* *Edit panel title* — Opens the *Customize panel* window to change the *Panel title*. +. Enter the *Title* and add any applicable <>. -* *More > Replace panel* — Opens the *Visualize Library* so you can select a new panel to replace the existing panel. +. Make sure that *Add to Dashboard after saving* is selected. -* *More > Delete from dashboard* — 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*. +. Click *Save and return*. -[float] -[[search-or-filter-your-data]] -== Search and filter your data +To save the panel to the dashboard: -{kib} supports several ways to search your data and apply {es} filters. You can combine the filters with any panel -filter to display the data want to you see. +. Click *Save and return*. -For more information about {kib} and {es} filters, refer to <>. +. Add an optional title to the panel. -To apply a panel-level time filter: +.. In the panel header, click *No Title*. -. Open the panel menu, then select *More > Customize time range*. +.. On the *Customize panel* window, select *Show panel title*. -. Enter the time range you want to view, then click *Add to panel*. +.. Enter the *Panel title*, then click *Save*. [float] [[arrange-panels]] @@ -208,7 +243,7 @@ To apply a panel-level time filter: [[resizing-containers]] == Arrange panels -To compare the data side-by-side, move and arrange the 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: @@ -219,18 +254,28 @@ In the toolbar, click *Edit*, then use the following options: * To maximize to fullscreen, open the panel menu, then click *More > Maximize panel*. [float] -[[apply-design-options]] -== Apply design options +[[edit-panels]] +== Edit panels -Apply a set of design options to the entire dashboard. +To make changes to the panel, use the panel menu options. -In the toolbar, click *Edit > Options*, then use the following options: +. In the toolbar, click *Edit*. + +. Open the panel menu, then use the following options: -* *Use margins between panels* — Specifies a margin of space between each panel. +* *Edit lens* — Opens *Lens* so you can make changes to the visualization. -* *Show panel titles* — Specifies the appearance of titles in the header of each panel. +* *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*. + +* *Edit panel title* — Opens the *Customize panel* window to change the *Panel title*. + +* *More > Replace panel* — Opens the *Visualize Library* so you can select a new panel to replace the existing panel. -* *Sync color pallettes across panels* — Specifies whether the color pallette is applied to all panels. +* *More > Delete from dashboard* — 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*. [float] [[duplicate-panels]] @@ -262,56 +307,71 @@ Copy panels from one dashboard to another dashboard. . On the *Copy to dashboard* window, select the dashboard, then click *Copy and go to dashboard*. [float] -[[explore-the-underlying-documents]] -== Explore the underlying documents +[[search-or-filter-your-data]] +== Search and filter your data -You can add additional interactions that allow you to open *Discover* from dashboard panels. To use the interactions, the panel must use only one index pattern. +{kib} supports several ways to search your data and apply {es} filters. You can combine the filters with any panel +filter to display the data want to you see. -Panel interaction:: Opens the data in *Discover* with the current dashboard filters, but does not take the filters -saved with the panel. -+ -To enable panel interactions, refer to <>. -+ -NOTE: In {kib} 7.13 and earlier, the panel interaction is enabled by default. +For more information about {kib} and {es} filters, refer to <>. -Series interaction:: -Opens the series data in *Discover* from inside the panel. -+ -To enable series interactions, refer to <>. +To apply a panel-level time filter: + +. Open the panel menu, then select *More > Customize time range*. + +. Enter the time range you want to view, then click *Add to panel*. [float] -[[download-csv]] -== Download panel data +[[apply-design-options]] +== Apply design options -Download panel data in a CSV file. When you download visualization panels with multiple layers, each layer produces a CSV file, and the file names contain the visualization and layer index names. +Apply a set of design options to the entire dashboard. -. Open the panel menu, then select *Inspect*. +. If you're in view mode, click *Edit* in the toolbar. -. Click *Download CSV*, then select the format type from the dropdown: +. In the toolbar, *Options*, then use the following options: -* *Formatted CSV* — Contains human-readable dates and numbers. +* *Use margins between panels* — Adds a margin of space between each panel. -* *Unformatted* — Best used for computer use. +* *Show panel titles* — Displays the titles in the panels headers. + +* *Sync color pallettes across panels* — Applies the same color palette to all panels on the dashboard. [float] -[[defer-loading-panels-below-the-fold]] -== Improve dashboard loading time +[[save-dashboards]] +== Save dashboards -To improve the dashboard loading time, enable the *Defer loading panels below the fold* *Lab*, which loads the dashboard panels as they become visible on the dashboard. +When you've finished making changes to the dashboard, save it. -. In the toolbar, click *Labs*. -+ -To enable *Labs*, contact your administrator, or configure the <>. +If you are saving a new dashboard: + +. In the toolbar, click *Save*. + +. On the *Save dashboard* window, enter the *Title* and an optional *Description*. -. To specify how you want to enable the lab, use the following actions: +. Add any applicable <>. -* *{kib}* — Enables the lab in {kib}. +. To save the time filter to the dashboard, select *Store time with dashboard*. -* *Browser* — Enables the lab for your browser, and persists after you close the browser. +. Click *Save*. -* *Session* — Enables the lab for this browser session, then resets after you close the browser. +If you are saving an existing dashboard, click *Save*. -. Click *Close*. +To exit *Edit* mode, click *Switch to view mode*. + +[float] +[[download-csv]] +== Download panel data + +Download panel data in a CSV file. When you download visualization panels with multiple layers, each layer produces a CSV file, and the file names contain the visualization and layer index names. + +. Open the panel menu, then select *Inspect*. + +. Click *Download CSV*, then select the format type from the dropdown: + +* *Formatted CSV* — Contains human-readable dates and numbers. + +* *Unformatted* — Best used for computer use. [float] [[share-the-dashboard]] @@ -333,3 +393,5 @@ include::lens-advanced.asciidoc[] include::create-panels-with-editors.asciidoc[] include::make-dashboards-interactive.asciidoc[] + +include::dashboard-troubleshooting.asciidoc[] diff --git a/docs/user/dashboard/enhance-dashboards.asciidoc b/docs/user/dashboard/enhance-dashboards.asciidoc deleted file mode 100644 index de8af34e6d32e..0000000000000 --- a/docs/user/dashboard/enhance-dashboards.asciidoc +++ /dev/null @@ -1,69 +0,0 @@ -[[enhance-dashboards]] -== Enhance dashboards - -You can add filter panels to interact with the data in your visualization panels, and Markdown panels to add context to the data. -To make your dashboard look the way you want, use the editing options. - -[float] -[[add-controls]] -=== Add controls - -To filter the data on your dashboard in real-time, add a *Controls* panel or use a map panel to <>. - -{kib} supports two types of *Controls*: - -* *Options list* — Filters content based on one or more specified options. The dropdown menu is dynamically populated with the results of a terms aggregation. -For example, use the options list on the sample flight dashboard when you want to filter the data by origin city and destination city. - -* *Range slider* — Filters data within a specified range of numbers. The minimum and maximum values are dynamically populated with the results of a -min and max aggregation. For example, use the range slider when you want to filter the sample flight dashboard by a specific average ticket price. -+ -[role="screenshot"] -image::images/dashboard-controls.png[] - -. On the dashboard, click *All types*, then select *Controls*. - -. Click *Options*, then configure the following options: - -* *Update {kib} filters on each change* — When selected, all interactive inputs create filters that refresh the dashboard. When unselected, - {kib} filters are created only when you click *Apply changes*. - -* *Use time filter* — When selected, the aggregations that generate the options list and time range are connected to the <>. - -* *Pin filters for all applications* — When selected, all filters created by interacting with the inputs are automatically pinned. - -. Click *Update* - -[float] -[[add-text]] -=== Add text - -Add text panels with *Markdown* when you want to provide context to the other panels on your dashboard, such as important information, instructions, and images. - -*Markdown* is a text entry field that accepts GitHub-flavored Markdown text. For information about GitHub-flavored Markdown text, click *Help*. - -. From the dashboard, click *All types*, then select *Text*. - -. In the *Markdown* field, enter the text, then click *Update*. - -For example, when you enter: - -[role="screenshot"] -image::images/markdown_example_1.png[] - -The following instructions are displayed: - -[role="screenshot"] -image::images/markdown_example_2.png[] - -Or when you enter: - -[role="screenshot"] -image::images/markdown_example_3.png[] - -The following image is displayed: - -[role="screenshot"] -image::images/markdown_example_4.png[] - - diff --git a/docs/user/dashboard/images/dashboard_createNewTextButton_7.15.0.png b/docs/user/dashboard/images/dashboard_createNewTextButton_7.15.0.png new file mode 100644 index 0000000000000..f89f2ef5cf249 Binary files /dev/null and b/docs/user/dashboard/images/dashboard_createNewTextButton_7.15.0.png differ diff --git a/docs/user/dashboard/images/markdown_example_1.png b/docs/user/dashboard/images/markdown_example_1.png index 71dd9b76b8caf..8ade6b83cf742 100644 Binary files a/docs/user/dashboard/images/markdown_example_1.png and b/docs/user/dashboard/images/markdown_example_1.png differ diff --git a/docs/user/dashboard/images/markdown_example_2.png b/docs/user/dashboard/images/markdown_example_2.png index f2094c3cbb3f1..e114d33846fdf 100644 Binary files a/docs/user/dashboard/images/markdown_example_2.png and b/docs/user/dashboard/images/markdown_example_2.png differ diff --git a/docs/user/dashboard/images/markdown_example_3.png b/docs/user/dashboard/images/markdown_example_3.png index eca9735b495d0..09a1858a2a932 100644 Binary files a/docs/user/dashboard/images/markdown_example_3.png and b/docs/user/dashboard/images/markdown_example_3.png differ diff --git a/docs/user/dashboard/images/markdown_example_4.png b/docs/user/dashboard/images/markdown_example_4.png index d4a0829fef64e..f0d133fc3641a 100644 Binary files a/docs/user/dashboard/images/markdown_example_4.png and b/docs/user/dashboard/images/markdown_example_4.png differ diff --git a/docs/user/dashboard/images/timelion-dashboard.png b/docs/user/dashboard/images/timelion-dashboard.png new file mode 100644 index 0000000000000..e217dca98d079 Binary files /dev/null and b/docs/user/dashboard/images/timelion-dashboard.png differ diff --git a/docs/user/dashboard/lens.asciidoc b/docs/user/dashboard/lens.asciidoc index 6b61c9fe6a9a3..0f130f15c8a77 100644 --- a/docs/user/dashboard/lens.asciidoc +++ b/docs/user/dashboard/lens.asciidoc @@ -178,7 +178,39 @@ For a time shift example, refer to <>. [float] [[filter-the-data]] -==== Apply filters with the legend +==== Apply filters + +You can use the <> to focus on a known set of data for the entire visualization, or use the filter options from the layer pane or legend. + +[float] +[[filter-with-the-function]] +===== Apply multiple KQL filters + +With the *Filters* function, you can apply more than one KQL filter, and apply a KQL filter to a single layer so you can visualize filtered and unfiltered data at the same time. + +. In the layer pane, click a field. + +. Click the *Filters* function. + +. Click *Add a filter*, then enter the KQL filter you want to apply. ++ +To try the *Filters* function on your own, refer to <>. + +[float] +[[filter-with-the-advanced-option]] +===== Apply a single KQL filter + +With the *Filter by* advanced option, you can assign a color to each filter group in *Bar* and *Line and area* visualizations, and build complex tables. For example, to display failure rate and the overall data. + +. In the layer pane, click a field. + +. Click *Add advanced options*, then select *Filter by*. + +. Enter the KQL filter you want to apply. + +[float] +[[filter-with-legend-filters]] +===== Apply legend filters Apply filters to visualizations directly from the values in the legend. *Bar*, *Line and area*, and *Proportion* visualizations support legend filters. @@ -205,30 +237,38 @@ The following component menus are available: * *Left axis*, *Bottom axis*, and *Right axis* — Specify how you want to display the chart axes. For example, add axis labels and change the orientation and bounds. [float] -[[lens-faq]] -==== Frequently asked questions +[[save-the-lens-panel]] +===== Save and add the panel -For answers to common *Lens* questions, review the following. +Save the panel to the *Visualize Library* and add it to the dashboard, or add it to the dashboard without saving. -[discrete] -[[kql]] -.*When should I use KQL filters, the Filters function, or the Filter by option?* -[%collapsible] -==== -Use the <> field to focus on a known set of data for the entire visualization. You can combine KQL filters with other filters using AND logic. +To save the panel to the *Visualize Library*: -Use the *Filters* function to apply: +. Click *Save to library*. -* More than one KQL filter. +. Enter the *Title* and add any applicable <>. -* The KQL filter to a single layer, which allows you to visualize filtered and unfiltered data. +. Make sure that *Add to Dashboard after saving* is selected. -Use the *Filter by* advanced option to: +. Click *Save and return*. -* Assign a custom color to each filter group in a bar, line, or area chart. +To save the panel to the dashboard: -* Build a complex table. For example, to display the failure rate and overall data. -==== +. Click *Save and return*. + +. Add an optional title to the panel. + +.. In the panel header, click *No Title*. + +.. On the *Customize panel* window, select *Show panel title*. + +.. Enter the *Panel title*, then click *Save*. + +[float] +[[lens-faq]] +=== Frequently asked questions + +For answers to common *Lens* questions, review the following. [discrete] [[when-should-i-normalize-the-data-by-unit-or-use-a-custom-interval]] @@ -401,4 +441,4 @@ Pagination in a data table is unsupported. To use pagination in data tables, cre [%collapsible] ==== Specifying the color for a single data point, such as a single bar or line, is unsupported. -==== +==== \ No newline at end of file diff --git a/docs/user/dashboard/make-dashboards-interactive.asciidoc b/docs/user/dashboard/make-dashboards-interactive.asciidoc index c3a94f17fc6d9..6e09fd34f508e 100644 --- a/docs/user/dashboard/make-dashboards-interactive.asciidoc +++ b/docs/user/dashboard/make-dashboards-interactive.asciidoc @@ -1,4 +1,4 @@ -[[role="xpack"]] +[role="xpack"] [[drilldowns]] == Make dashboards interactive @@ -7,28 +7,7 @@ you to apply dashboard-level filters, and drilldowns that allow you to navigate to other \ dashboards and external websites. -Add interactive capabilities to your dashboard, such as controls that allow you to apply dashboard-level filters, and drilldowns that allow you to navigate to other dashboards and external websites. - -*Controls* panels allow you to apply dashboard-level filters based on values from a list, or a range of values. - -{kib} supports two types of *Controls*: - -* *Options list* — Filters content based on one or more specified options. The dropdown menu is dynamically populated with the results of a terms aggregation. -For example, use the options list on the sample flight dashboard when you want to filter the data by origin city and destination city. - -* *Range slider* — Filters data within a specified range of numbers. The minimum and maximum values are dynamically populated with the results of a -min and max aggregation. For example, use the range slider when you want to filter the sample flight dashboard by a specific average ticket price. -+ -[role="screenshot"] -image::images/dashboard-controls.png[] - -Panels have built-in interactive capabilities that apply filters to the dashboard data. For example, when you drag a time range or click a pie slice, a filter for the time range or pie slice is applied. Drilldowns let you customize the interactive behavior while keeping the context of the interaction. - -{kib} supports two types of drilldowns: - -* *Dashboard* — Navigates you from one dashboard to another dashboard. For example, when can create a drilldown for a *Lens* panel that navigates you from a summary dashboard to a dashboard with a filter for a specific host name. - -* *URL* — Navigates you from a dashboard to an external website. For example, a website with the specific host name as a parameter. +Add interactive capabilities to your dashboard, such as controls that allow you to apply dashboard-level filters, and drilldowns that allow you to navigate to *Discover*, other dashboards, and external websites. ++++