diff --git a/docs/en/ui/README.md b/docs/en/ui/README.md index fb5d537b01..d8be87ff67 100644 --- a/docs/en/ui/README.md +++ b/docs/en/ui/README.md @@ -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. -#### 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|| |read all values in the duration|Service/Instance/Endpoint List|| -##### 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 @@ -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