[DOC] Create new doc for Dashboard application (#2350)
* New site page and content Signed-off-by: vagimeli <vagimeli@amazon.com> * Content dev Signed-off-by: vagimeli <vagimeli@amazon.com> * Content dev Signed-off-by: vagimeli <vagimeli@amazon.com> * Change link to localhost instead of playground Signed-off-by: vagimeli <vagimeli@amazon.com> * Continue writing Signed-off-by: vagimeli <vagimeli@amazon.com> * Continue writing Signed-off-by: vagimeli <vagimeli@amazon.com> * Continue writing Signed-off-by: vagimeli <vagimeli@amazon.com> * Add installation guide for Debian distribution (#2355) * Creating page for the content Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> * Added intro section Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> * Adding local repo steps but still waiting on syntax for ubuntu distribution naming Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> * Dumping from the rpm guide so I can work through it in-place Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> * Adding commands now that I have package names Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> * Add output Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> * Polishing Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> * Polishing Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> * Touch up Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> * Applying changes from tech review part 1 Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> * Applying changes from tech review part 1.1 Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> * Applying changes from tech review part 2 Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> * Add fingerprint verification steps Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> * Last minute tech revisions Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> * Changes Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> * Clean up CLI command Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> * Fix curl Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> * Modify GPG commands Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> * Changes Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> * Clean up RPM/YUM installation guide (#2371) * Cleaning up Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> * Cleaning up Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> * Cleaning up Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> * [DOC] Adds new site pages and content under Visualize (#2377) * Adds new doc site pages and new content Signed-off-by: vagimeli <vagimeli@amazon.com> * Adds response fields to the cluster health API (#2385) * Adds response fields to the cluster health API Signed-off-by: Fanit Kolchina <kolchfa@amazon.com> * Incorporated doc review comments Signed-off-by: Fanit Kolchina <kolchfa@amazon.com> * Formatting tables Signed-off-by: Fanit Kolchina <kolchfa@amazon.com> * More formatting changes Signed-off-by: Fanit Kolchina <kolchfa@amazon.com> * Incorporated editorial comments Signed-off-by: Fanit Kolchina <kolchfa@amazon.com> Signed-off-by: Fanit Kolchina <kolchfa@amazon.com> * Continue writing tutorial Signed-off-by: vagimeli <vagimeli@amazon.com> * Continue writing Signed-off-by: vagimeli <vagimeli@amazon.com> * Continue content development Signed-off-by: vagimeli <vagimeli@amazon.com> * Continue content development Signed-off-by: vagimeli <vagimeli@amazon.com> * Writing Signed-off-by: vagimeli <vagimeli@amazon.com> * Revert "Add installation guide for Debian distribution (#2355)" This reverts commit d289b58e776a43f20c83cd5d503149de5f3aae22. * Revert "Clean up RPM/YUM installation guide (#2371)" This reverts commit 4091471b52a1f78438f5fdf4e24426a55c07ea67. * Revert "[DOC] Adds new site pages and content under Visualize (#2377)" This reverts commit 71aa7b5b6ae5370ecb81c34c38bcb80fc1f33566. * Revert "Adds response fields to the cluster health API (#2385)" This reverts commit 515f11c85ff9922027d7c32a92f6a6e5c7c37f41. * Continue writing tutorial Signed-off-by: vagimeli <vagimeli@amazon.com> * Continue writing Signed-off-by: vagimeli <vagimeli@amazon.com> * Continue writing Signed-off-by: vagimeli <vagimeli@amazon.com> * Continue writing Signed-off-by: vagimeli <vagimeli@amazon.com> * Continue writing Signed-off-by: vagimeli <vagimeli@amazon.com> * Continue writing Signed-off-by: vagimeli <vagimeli@amazon.com> * Continue writing Signed-off-by: vagimeli <vagimeli@amazon.com> * Final draft for tech review Signed-off-by: vagimeli <vagimeli@amazon.com> * Image resizing Signed-off-by: vagimeli <vagimeli@amazon.com> * Resizing images Signed-off-by: vagimeli <vagimeli@amazon.com> * Copy edits Signed-off-by: vagimeli <vagimeli@amazon.com> * Update _dashboards/dashboard/index.md Co-authored-by: Caroline <113052567+carolxob@users.noreply.github.com> * Update _dashboards/dashboard/index.md Co-authored-by: Josh Romero <rmerqg@amazon.com> * address tech review feedback Signed-off-by: vagimeli <vagimeli@amazon.com> * address tech feedback Signed-off-by: vagimeli <vagimeli@amazon.com> * Edit .gitignore file Signed-off-by: vagimeli <vagimeli@amazon.com> * Update images Signed-off-by: vagimeli <vagimeli@amazon.com> * Update _dashboards/dashboard/index.md Co-authored-by: Josh Romero <rmerqg@amazon.com> * Update _dashboards/dashboard/index.md Co-authored-by: Josh Romero <rmerqg@amazon.com> * Update _dashboards/dashboard/index.md Co-authored-by: Josh Romero <rmerqg@amazon.com> * address tech feedback Signed-off-by: vagimeli <vagimeli@amazon.com> * address tech feedback Signed-off-by: vagimeli <vagimeli@amazon.com> * copy edits Signed-off-by: vagimeli <vagimeli@amazon.com> * copy edits Signed-off-by: vagimeli <vagimeli@amazon.com> * copy edits Signed-off-by: vagimeli <vagimeli@amazon.com> * copy edits Signed-off-by: vagimeli <vagimeli@amazon.com> * address tech review feedback Signed-off-by: vagimeli <vagimeli@amazon.com> * address tech review feedback Signed-off-by: vagimeli <vagimeli@amazon.com> * Copy edits Signed-off-by: vagimeli <vagimeli@amazon.com> * add definitions Signed-off-by: vagimeli <vagimeli@amazon.com> * Update index.md * Update index.md * Update index.md * Update index.md * Update index.md * Update index.md * Update index.md * Update index.md * copy edits and graphics updates Signed-off-by: vagimeli <vagimeli@amazon.com> * clean up unused images Signed-off-by: vagimeli <vagimeli@amazon.com> * copy edit Signed-off-by: vagimeli <vagimeli@amazon.com> * Update index.md * copy edit Signed-off-by: vagimeli <vagimeli@amazon.com> * Incorporated tech review comments Signed-off-by: Fanit Kolchina <kolchfa@amazon.com> * Implemented editorial comments Signed-off-by: Fanit Kolchina <kolchfa@amazon.com> --------- Signed-off-by: vagimeli <vagimeli@amazon.com> Signed-off-by: JeffH-AWS <jeffhuss@amazon.com> Signed-off-by: Fanit Kolchina <kolchfa@amazon.com> Co-authored-by: Jeff Huss <jeffhuss@amazon.com> Co-authored-by: kolchfa-aws <105444904+kolchfa-aws@users.noreply.github.com> Co-authored-by: Caroline <113052567+carolxob@users.noreply.github.com> Co-authored-by: Josh Romero <rmerqg@amazon.com> Co-authored-by: Fanit Kolchina <kolchfa@amazon.com>
|
@ -0,0 +1,142 @@
|
|||
---
|
||||
layout: default
|
||||
title: Creating dashboards
|
||||
nav_order: 30
|
||||
has_children: true
|
||||
---
|
||||
|
||||
# Creating dashboards
|
||||
|
||||
The **Dashboard** application in OpenSearch Dashboards lets you visually represent your analytical, operational, and strategic data to help you quickly understand the trends in your data, giving you a high-level view of key metrics, simplifying data exploration, and delivering insights when and where you need them.
|
||||
|
||||
In this tutorial you'll learn the basics of creating a dashboard using the **Dashboard** application and OpenSearch sample data. The sample dataset has existing sample visualizations, and you can use those visualizations or create new visualizations for the dashboard. In this tutorial, you'll do both. Once you've completed this tutorial, you'll have learned the foundations of creating a new dashboard with multiple panels in OpenSearch Dashboards.
|
||||
|
||||
This OpenSearch Playground [dashboard example](https://playground.opensearch.org/app/dashboards#/view/722b74f0-b882-11e8-a6d9-e546fe2bba5f?_g=(filters:!(),refreshInterval:(pause:!f,value:900000),time:(from:now-7d,to:now))&_a=(description:'Analyze%20mock%20eCommerce%20orders%20and%20revenue',filters:!(),fullScreenMode:!f,options:(hidePanelTitles:!f,useMargins:!t),query:(language:kuery,query:''),timeRestore:!t,title:'%5BeCommerce%5D%20Revenue%20Dashboard',viewMode:view)) shows you what's possible with OpenSearch Dashboards.
|
||||
{: .note}
|
||||
|
||||
## Getting familiar with the UI
|
||||
|
||||
Before getting started, let's get familiar with the **Dashboard** UI. The UI comprises the following main components:
|
||||
|
||||
![Dashboard user interface]({{site.url}}{{site.baseurl}}/images/dashboards/dashboard-UI.png)
|
||||
|
||||
- The **navigation panel** (A) on the left contains the OpenSearch Dashboards applications.
|
||||
- The **search** bar (B) lets you search for documents and other objects and add filters.
|
||||
- The **filter** (C) lets you narrow a dashboard's results.
|
||||
- The **toolbar** (D) contains frequently used commands and shortcuts.
|
||||
- The **time filter** (E) lets you customize the time and date.
|
||||
- The **panel** (F) allows you to add existing visualizations to the dashboard or create new ones for the dashboard.
|
||||
|
||||
## Defining terminology
|
||||
|
||||
The following is some useful terminology for working with OpenSearch Dashboards and the **Dashboard** application:
|
||||
|
||||
- _Dashboards_ is the abbreviated name for OpenSearch Dashboards. OpenSearch Dashboards is an open-source visualization tool designed to work with OpenSearch.
|
||||
- _Dashboard_ is the OpenSearch Dashboards application used to track, analyze, and display data.
|
||||
- _dashboard_ or _dashboards_ are common names for a tool used to visually display data.
|
||||
- _Panel_ is a term used to refer to a visualization displayed on a dashboard. The terms _panel_ and _visualization_ may be used interchangeably throughout this and other Dashboards documentation.
|
||||
|
||||
The following tutorial assumes you're either using your existing installation of OpenSearch Dashboards or using the [OpenSearch Playground](https://playground.opensearch.org/app/home#/). Depending on which one you use, certain capabilities may not be available. For example, sample datasets may not be included in your existing installation, and saving a dashboard isn't an option in the OpenSearch Playground.
|
||||
{: .note}
|
||||
|
||||
## Creating a dashboard and adding an existing visualization
|
||||
|
||||
To create a dashboard and add a sample visualization:
|
||||
|
||||
1. Connect to `https://localhost:5601`. The username and password are `admin`. Alternatively, go to the [OpenSearch Playground](https://playground.opensearch.org/app/home#/).
|
||||
1. On the top menu, go to **OpenSearch Dashboards > Dashboard**.
|
||||
1. From the **Dashboards** panel, choose **Create Dashboard**.
|
||||
1. Choose the calendar icon and set the time filter to **Last 30 days**.
|
||||
1. From the panel, choose **Add an existing**.
|
||||
1. From the **Add panels** window, choose **[eCommerce] Promotion Tracking**, and then choose `x` to close the panel.
|
||||
|
||||
You've now created the following basic dashboard with a single panel, which you'll continue using throughout this tutorial.
|
||||
|
||||
![Basic dashboard with single panel]({{site.url}}{{site.baseurl}}/images/dashboards/dashboard-basic.png)
|
||||
|
||||
## Creating visualizations
|
||||
|
||||
Continuing with the dashboard you created in the preceding steps, you'll create a new visualization and save it to the dashboard:
|
||||
|
||||
1. From the dashboard toolbar, choose **Create new**.
|
||||
1. From the **New Visualization** window, choose **Gauge** and then select the index pattern **opensearch_dashboards_sample_data_ecommerce**.
|
||||
1. From the toolbar, choose **Save**.
|
||||
1. In the **Save visualization** window, enter a title for the visualization. For example, the title for the gauge chart panel is [eCommerce] Orders.
|
||||
1. Choose **Save and return**.
|
||||
|
||||
The gauge chart visualization is now saved and you are taken back to the dashboard. You'll see two visualizations on the dashboard, like the following.
|
||||
|
||||
![Dashboard showing visualizations combined in a single view]({{site.url}}{{site.baseurl}}/images/dashboards/dashboard-combined.png)
|
||||
|
||||
## Adding subsequent panels
|
||||
|
||||
Continuing with the dashboard you created in the preceding steps, you'll add an existing visualization to the dashboard:
|
||||
|
||||
1. From the dashboard toolbar, choose **Add**.
|
||||
1. From the **Add panels** window, choose **[eCommerce] Sales by Category**.
|
||||
1. Choose `x` to close the **Add panels** window.
|
||||
|
||||
You'll see an area chart visualization display on the dashboard, as shown in the following image.
|
||||
|
||||
![Adding another panel to the dashboard]({{site.url}}{{site.baseurl}}/images/dashboards/dashboard-adding-panels.png)
|
||||
|
||||
## Saving dashboards
|
||||
|
||||
When you've finalized your dashboard, save it. If you're saving a new dashboard:
|
||||
|
||||
1. In the toolbar, choose **Save**.
|
||||
2. In the **Save dashboard** window, enter the **Title**. The **Description** is optional.
|
||||
3. To save the time filter to the dashboard, select **Store time with dashboard**.
|
||||
4. Choose **Save**.
|
||||
|
||||
## Customizing the look of a panel
|
||||
|
||||
To customize the panels, you'll need to be in edit mode:
|
||||
|
||||
- Choose **Edit** at the top right of the toolbar.
|
||||
|
||||
If you see **Create new** at the top right of the toolbar, you're already in edit mode.
|
||||
{: .note}
|
||||
|
||||
Displaying a legend can give readers more information, while hiding a legend can give a panel a cleaner look. If you want to display or hide the panel legend:
|
||||
|
||||
- Choose the list icon in the panel's lower left corner.
|
||||
|
||||
If you want to change the color of the panel legend:
|
||||
|
||||
- From the visualization legend, select a category and then select a color from the flyout. The area chart updates with your change.
|
||||
|
||||
This color change is only saved for the current panel and dashboard and doesn't affect the saved visualization.
|
||||
{: .note}
|
||||
|
||||
If you want to change the color of the panel legend in the visualization:
|
||||
|
||||
1. Choose the gear icon on the area chart panel.
|
||||
2. From the **Options** window, select **Edit visualization**.
|
||||
3. From the visualization legend, select a category and then select a color from the flyout. The area chart updates with your change.
|
||||
4. Choose **Save and return**.
|
||||
|
||||
This color change affects the saved visualization and any dashboard that links to the visualization.
|
||||
{: .note}
|
||||
|
||||
If you want to display, hide, or customize the panel title:
|
||||
|
||||
1. Choose the gear icon on the panel.
|
||||
2. From the **Options** window, select **Edit panel title**.
|
||||
3. From the **Customize panel**, enter a title under **Panel title** or toggle the **Show panel title** to hide the title.
|
||||
4. Choose **Save**.
|
||||
|
||||
Changing panel titles only affects the particular panel on the particular dashboard and won't affect any other panel containing that same visualization or any other dashboard.
|
||||
{: .note}
|
||||
|
||||
## Arranging panels
|
||||
|
||||
To organize panels, arrange them side by side, or resize them, you can use these options:
|
||||
|
||||
- To move a panel, select and hold the panel title or the top of the panel and drag to the new location.
|
||||
- To resize a panel, choose the resize icon in the panel's lower-right corner and drag to the new dimensions.
|
||||
- To view a panel in full screen mode, choose the gear icon (edit mode) or vertical ellipsis (⋮) at the top right of the panel and select **Maximize panel**. To minimize the full screen mode, choose the gear icon or vertical ellipsis and select **Minimize**.
|
||||
|
||||
The following is an example of a customized dashboard created by using this tutorial.
|
||||
|
||||
![Customized dashboard with panels arranged side by side and without legends]({{site.url}}{{site.baseurl}}/images/dashboards/dashboard-customized.png)
|
After Width: | Height: | Size: 200 KiB |
After Width: | Height: | Size: 93 KiB |
After Width: | Height: | Size: 272 KiB |
After Width: | Height: | Size: 176 KiB |
After Width: | Height: | Size: 228 KiB |
After Width: | Height: | Size: 220 KiB |
After Width: | Height: | Size: 264 KiB |
After Width: | Height: | Size: 333 KiB |
After Width: | Height: | Size: 188 KiB |
After Width: | Height: | Size: 262 KiB |
After Width: | Height: | Size: 96 KiB |