Polish UI setup doc (#9726)

This commit is contained in:
吴晟 Wu Sheng 2022-10-03 17:59:20 +08:00 committed by GitHub
parent dd6b7a1fc0
commit 5ae4c125f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 7 deletions

View File

@ -24,13 +24,20 @@ so).
**Notice, dashboard editable is disabled on release; set system env(**SW_ENABLE_UPDATE_UI_TEMPLATE=true**) to activate
them.** Before you save the edited dashboard, it is just stored in memory. Closing a tab would **LOSE** the change permanently.
### Widget
A new dashboard should be added through `New Dashboard` in the `Dashboards` menu.
Meanwhile, there are two ways to edit an existing dashboard.
1. `Dashboard List` in the `Dashboard` menu provides edit/delete/set-as-root features to manage existing dashboards.
2. In every dashboard page, click the right top `V` toggle, and turn to `E`(representing **Edit**) mode.
## Widget
A dashoard consists of various widget. In the `Edit` mode, widgets could be added/moved/removed/edit according to the Layer.(Every widget declares its suitable layer.)
The widget provides the ability to visualize the metrics, generated through [OAL](../concepts-and-designs/mal.md), [MAL](../concepts-and-designs/mal.md), or [LAL](../concepts-and-designs/lal.md) scripts.
<img src="https://skywalking.apache.org/screenshots/9.2.0/customize-dashboard-metrics-20220817-configuration.png" />
#### Metrics
### Metrics
To display one or more metrics in a graph, the following information is required:
1. **Name**: The name of the metric.
@ -39,7 +46,7 @@ To display one or more metrics in a graph, the following information is required
4. **Unit**: The unit of the metrics data.
5. **Calculation**: The calculation formula for the metric. The available formulas are [here](#calculations).
##### Common Graphs
#### Common Graphs
|Metrics Data Type|Visualization|Demo|
|----|-------------|----|
@ -49,7 +56,7 @@ To display one or more metrics in a graph, the following information is required
|read all values in the duration|Area|<img src="https://skywalking.apache.org/screenshots/9.2.0/customize-dashboard-metrics-20220817-area.png" />|
|read all values in the duration|Service/Instance/Endpoint List|<img src="https://skywalking.apache.org/screenshots/9.2.0/customize-dashboard-metrics-20220817-entity-table.png" />|
##### Calculations
#### Calculations
|Label|Calculation|
|----|----|
@ -67,11 +74,11 @@ To display one or more metrics in a graph, the following information is required
|Milliseconds to seconds|Value / 1000|
|Seconds to days|Value / 86400|
#### Graph styles
### Graph styles
Graph advanced style options.
#### Widget options
### Widget options
<img src="https://skywalking.apache.org/screenshots/9.2.0/customize-dashboard-metrics-20220817-options.png" />
@ -80,7 +87,7 @@ Define the following properties of the widget:
2. **Title**: The title name of the widget.
3. **Tooltip Content**: Additional explanation of the widget.
#### Association Options
### Association Options
<img src="https://skywalking.apache.org/screenshots/9.2.0/customize-dashboard-metrics-20220817-association.png" />