Fix the UI doc and relative screenshots. (#13017)

apache · Feb 2, 2025 · babc22e · babc22e
1 parent 44844dd
commit babc22e
Showing 1 changed file with 16 additions and 49 deletions.
diff --git 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.
 
-<img src="https://skywalking.apache.org/ui-doc/9.0.0/home.png"/>
+<img src="https://skywalking.apache.org/ui-doc/10.2.0/home.png"/>
 
 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,58 +70,25 @@ 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.
 
-<img src="https://skywalking.apache.org/screenshots/9.2.0/customize-dashboard-metrics-20220817-configuration.png" />
-
-### 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|<img src="https://skywalking.apache.org/screenshots/9.2.0/customize-dashboard-metrics-20220817-line.png" />|
-|get sorted top N values|Top List|<img src="https://skywalking.apache.org/screenshots/9.2.0/customize-dashboard-metrics-20220817-topn.png" />|
-|read all values of labels in the duration|Table|<img src="https://skywalking.apache.org/screenshots/9.2.0/customize-dashboard-metrics-20220817-tables.png" />|
-|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" />|
-|read sampled records in the duration|Records List|<img src="https://skywalking.apache.org/screenshots/9.2.0/customized-dashboard-metrics-20221201-sampled-records.png" />|
-
-#### 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|
+<img src="https://skywalking.apache.org/ui-doc/10.2.0/customize-dashboard-metrics-20250202.png" />
+
+### 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
 
 <img src="https://skywalking.apache.org/screenshots/9.2.0/customize-dashboard-metrics-20220817-options.png" />
 
 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