diff --git a/docs/en/ui/README.md b/docs/en/ui/README.md index 45061c86bf..c7ece22940 100644 --- a/docs/en/ui/README.md +++ b/docs/en/ui/README.md @@ -2,7 +2,7 @@ The SkyWalking official UI provides the default and powerful visualization capabilities for SkyWalking to observe full-stack applications. - + The left side menu lists all available supported stacks with default dashboards. @@ -29,7 +29,7 @@ menus: layer: VIRTUAL_CACHE - name: VisualMQ layer: VIRTUAL_MQ -.... + .... - name: SelfObservability icon: self_observability menus: @@ -59,7 +59,7 @@ 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. -A new dashboard should be added through `New Dashboard` in the `Dashboards` menu. +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. @@ -70,49 +70,16 @@ A dashboard consists of various widget. In the `Edit` mode, widgets could be add 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 - -To display one or more metrics in a graph, the following information is required: -1. **Name**: The name of the metric. -2. **Data Type**: The way of reading the metrics data according to various metric types. -3. **Visualization**: The graph options to visualize the metric. Each data type has its own matched graph options. See the [mapping doc](#common-graphs) for more details. -4. **Unit**: The unit of the metrics data. -5. **Calculation**: The calculation formula for the metric. The available formulas are [here](#calculations). - -#### Common Graphs - -|Metrics Data Type|Visualization|Demo| -|----|-------------|----| -|read all values in the duration|Line|| -|get sorted top N values|Top List|| -|read all values of labels in the duration|Table|| -|read all values in the duration|Area|| -|read all values in the duration|Service/Instance/Endpoint List|| -|read sampled records in the duration|Records List|| - -#### Calculations - -|Label|Calculation| -|----|----| -|Percentage|Value / 100| -|Apdex|Value / 10000| -|Average|Sum of values / Count of values| -|Percentage + Avg-preview|Sum of values / Count of values / 100| -|Apdex + Avg-preview|Sum of values / Count of values / 10000| -|Byte to KB|Value / 1024| -|Byte to MB|Value / 1024 / 1024| -|Byte to GB|Value / 1024 / 1024 / 1024| -|Seconds to YYYY-MM-DD HH:mm:ss|dayjs(value * 1000).format("YYYY-MM-DD HH:mm:ss")| -|Milliseconds to YYYY-MM-DD HH:mm:ss|dayjs(value).format("YYYY-MM-DD HH:mm:ss")| -|Precision|Value.toFixed(2)| -|Milliseconds to seconds|Value / 1000| -|Seconds to days|Value / 86400| +### Metric Query Expression +Metric Query Expression provides the ability to query metrics from the backend. +The query expression could be a simple metric name, or a complex expression with multiple functions. +Read [Metrics Query Expression(MQE) Syntax doc](../api/metrics-query-expression.md) to learn more about the syntax. ### Graph styles -Graph advanced style options. +Setup font size, unit, value mappings etc. to provide better visualization. ### Widget options @@ -120,8 +87,8 @@ Graph advanced style options. Define the following properties of the widget: 1. **Name**: The name of the widget, which used to [associate with other widget](#association-options) in the dashboard. -2. **Title**: The title name of the widget. -3. **Tooltip Content**: Additional explanation of the widget. +2. **Title**: The title name of the widget. +3. **Tooltip Content**: Additional explanation of the widget. ### Association Options @@ -131,17 +98,17 @@ Widget provides the ability to associate with other widgets to show axis pointer the connectivity among metrics. ### Widget Static Link -On the right top of every widget on the dashboard, there is a `Generate Link` option, which could generate a static +On the right top of every widget on the dashboard, there is a `Generate Link` option, which could generate a static link to represent this widget. -By using this link, users could share this widget, or integrate it into any 3rd party iFrame to build a +By using this link, users could share this widget, or integrate it into any 3rd party iFrame to build a network operations center(NOC) dashboard on the wall easily. About this link, there are several customizable options -1. `Lock Query Duration`. Set the query duration manually. It is OFF by default. +1. `Lock Query Duration`. Set the query duration manually. It is OFF by default. 2. `Auto Fresh` option is ON with 6s query period and last 30 mins time range. Query period and range are customizable. ## Settings -Settings provide language, server time zone, and auto-fresh options. These settings are stored in the browser's local storage. Unless you clear them manually, those will not change. +Settings provide language, server time zone, and auto-fresh options. These settings are stored in the browser's local storage. Unless you clear them manually, those will not change. ## FAQ