kazusa
/
skywalking
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
吴晟 Wu Sheng 2025-02-02 22:06:55 +08:00 committed by GitHub
parent 44844dd802
commit babc22e159
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 15 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
docs/en/ui/README.md
View File

@ -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,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.
<img src="https://skywalking.apache.org/screenshots/9.2.0/customize-dashboard-metrics-20220817-configuration.png" />
<img src="https://skywalking.apache.org/ui-doc/10.2.0/customize-dashboard-metrics-20250202.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|
### 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