[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>
This commit is contained in:
Melissa Vagi 2023-03-01 15:47:23 -07:00 committed by GitHub
parent 936e50925b
commit 7213507f9c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 142 additions and 0 deletions

View File

@ -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)

Binary file not shown.

After

Width:  |  Height:  |  Size: 200 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 272 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 176 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 228 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 264 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 333 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB