ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

SkyWalking UI 使用指南:官方仪表盘、动态侧边栏与自定义 Dashboard 完全解析

SkyWalking UI 使用指南:官方仪表盘、动态侧边栏与自定义 Dashboard 完全解析 可观测性后端微服务云原生【免费下载链接】skywalkingAPM, Application Performance Monitoring System项目地址https://gitcode.com/gh_mirrors/sky/skywalking点击查看免费下载SkyWalking 官方 UI 是项目默认的可视化前端为全链路应用观测提供开箱即用的仪表盘能力。本文围绕 docs/en/ui/README.md 展开系统讲解侧边栏菜单与 Marketplace 机制、Layer/Entity 两个核心概念、自定义 Dashboard 的编辑与保存、Widget 的指标配置与图型映射、以及关联、静态链接与设置项等实战要点帮助你快速掌握 SkyWalking UI 的查看与定制能力。官方 UI 与默认仪表盘概览SkyWalking 官方 UI 提供默认且强大的可视化能力用于观测全栈应用full-stack applications。它是 SkyWalking 项目仓库中独立于 OAP 后端的前端工程源码位于 skywalking-ui 目录在正式发布包中UI 与 OAP 后端一同分发可通过 apm-dist 的 assembly 配置打包集成。UI 左侧的导航栏列出了所有受支持的观测栈及其默认仪表盘使用Official Dashboards菜单可以逐个探索用于监控不同技术栈的默认仪表盘仪表盘覆盖范围包括语言 AgentJava、Go、Node.js、Python 等、服务网格Istio/Envoy、Kubernetes、各类数据库与消息队列、基础设施Linux/Windows、云厂商服务AWS以及 SkyWalking 自身的可观测性SO11Y。这些默认仪表盘不是写死在 UI 前端代码里的而是由 OAP 后端在启动时从ui-initialized-templates目录加载的 JSON 模板。从 UITemplateInitializer.java 的源码可以看到后端会按Layer名称逐一扫描ui-initialized-templates/layer子目录下的模板文件如general、mesh、mysql、kafka、so11y_oap等解析后通过UITemplateManagementService.addIfNotExist写入存储形成默认仪表盘集合。侧边栏菜单与 Marketplace菜单的按需出现机制自 9.6.0 起所有可用的功能菜单项只登记在 marketplace 中只有存在被各类观测探针语言 Agent、服务网格平台、OTEL 集成等观测到的对应服务时菜单项才会出现在侧边栏上。也就是说菜单是动态的、按需浮现的——没有采集到对应数据前左侧导航保持精简一旦某个服务被观测到其所属菜单会在短时间内自动弹出。驱动这一机制的配置文件是ui-initialized-templates/menu.yaml它是所有默认支持集成的通用 marketplace。从 UIMenuInitializer.java 的实现可以看出OAP 启动时用 SnakeYAML 读取该文件解析为MenuData后调用UIMenuManagementService.saveMenu保存菜单定义如果文件不存在则跳过加载仅打印 debug 日志。仓库中的真实菜单文件位于 menu.yaml。菜单定义支持一级和二级菜单项叶子菜单项必须带有用于导航的layer字段。典型结构如下menus: - name: GeneralService icon: general_service menus: - name: Services layer: GENERAL - name: VisualDatabase layer: VIRTUAL_DATABASE - name: VisualCache layer: VIRTUAL_CACHE - name: VisualMQ layer: VIRTUAL_MQ - name: SelfObservability icon: self_observability menus: - name: SkyWalkingServer layer: SO11Y_OAP - name: Satellite layer: SO11Y_SATELLITE仓库中的实际模板在字段命名上略有演进如顶层使用title/i18nKey/description但核心结构一致二级菜单的layer是菜单与观测数据之间的关联键。例如General Service下的Virtual MQ对应VIRTUAL_MQ层——当语言 Agent 通过插件观测到虚拟消息队列时该菜单才会出现。菜单刷新间隔配置菜单出现存在一个轮询刷新周期。控制该周期的是后端配置项uiMenuRefreshInterval默认值为20秒定义见 CoreModuleConfig.java配置词汇表configuration-vocabulary.md中的说明为The period (in seconds) of refreshing the status of all UI menu items.。也就是说当至少一个服务被观测到后UI 会以该周期默认 20 秒刷新各菜单项对应的状态从而让相关菜单自动弹出在左侧导航栏。自定义 Dashboard 的核心概念除官方仪表盘外Dashboards为最终用户提供定制能力可以新增标签页/页面/小组件tab/page/widget也可以按个人偏好重新配置仪表盘。Layer 与 Entity Type定制前必须理解的两个属性每个仪表盘都有两个关键属性Layer层决定仪表盘属于哪类观测对象如GENERAL、MESH、MYSQL、KAFKA、SO11Y_OAP、VIRTUAL_DATABASE等。后端在加载模板时正是以 Layer 目录为单位扫描的参见 UITemplateInitializer.java 中的UI_TEMPLATE_FOLDER列表其中除各类技术栈 Layer 外还包含custom目录。Entity Type实体类型决定仪表盘作用在哪个粒度上例如 Service、Instance、Endpoint、Cluster、Node 等。此外追踪trace、指标metrics与日志log分析分别由 SkyWalking 内核中的 OAL、MAL、LAL 引擎驱动OAL指标聚合语言参见 mal.md 概念文档MAL指标表达式语言参见 mal.mdLAL日志分析语言参见 lal.md。建议先理解这三个引擎再进行自定义仪表盘工作。Root 仪表盘与入口语义Service和All实体类型的仪表盘可以设置为 rootset this to root被设为 root 的仪表盘将作为其 Layer 的默认入口。注意如果一个 Layer 下有多个 root 仪表盘UI 会随机选择其中一个作为入口官方不推荐这样做因此应保证每个 Layer 至多保留一个 root 仪表盘。编辑权限与保存机制重要注意事项发布版本默认关闭仪表盘编辑功能需要设置系统环境变量来激活SW_ENABLE_UPDATE_UI_TEMPLATEtrue该环境变量在后端配置中映射为enableUpdateUITemplate默认值为false定义见 server-starter 的 application.yml。从 UIConfigurationManagement.java 源码可以看出创建、更新、禁用仪表盘的 GraphQL 接口都会在未开启该开关时返回dashboard creation/update/disable has been disabled. Check SW_ENABLE_UPDATE_UI_TEMPLATE...的提示。保存机制上的两个关键点在保存编辑结果之前修改只存在内存中关闭标签页会永久丢失所有未保存的更改——编辑完成后务必立即保存。新增与编辑仪表盘新增仪表盘通过Dashboards菜单中的New Dashboard创建。编辑已有仪表盘有两种方式在Dashboards菜单的Dashboard List中对已有仪表盘执行编辑edit/删除delete/设为 rootset-as-root操作在任意仪表盘页面右上角点击V切换转为E代表Edit模式后直接编辑。模板加载的底层机制自定义仪表盘与官方仪表盘在底层使用同一套模板体系。OAP 启动时UITemplateInitializer.java 会读取ui-initialized-templates/layer目录下的所有 JSON 文件每个文件必须且只能包含一个dashboard 配置对象否则抛出异常校验同一 Layer Entity Name 组合下的命名冲突verifyNameConflict冲突时拒绝加载通过addIfNotExist写入实现幂等初始化。以通用层根仪表盘为例general-root.json 展示了真实模板结构顶层children为 Tab/Widget 的布局树x/y/w/h 定位Widget 内通过graph.type如ServiceList、Topology声明图型metricConfig声明指标标签与单位expressions/subExpressions声明 MQE 表达式如avg(service_cpm)、avg(service_sla)/100。理解这份 JSON 有助于深入理解 UI 仪表盘的渲染原理。Widget仪表盘的基本组成单元仪表盘由各种 widget 组成。在Edit模式下可以根据 Layer 对 widget 进行新增、移动、删除、编辑——每个 widget 都会声明自己适用的 Layer。Widget 的核心作用是可视化由 OAL、MAL 或 LAL 脚本生成的指标数据。指标Metrics配置要素要在图中展示一个或多个指标需要配置以下信息Name名称指标的名称Data Type数据类型按不同指标类型决定读取数据的方式Visualization可视化用于可视化指标的图型选项每种数据类型都有与之匹配的图型对应关系见下文常见图型Unit单位指标数据的单位Calculation计算指标的计算公式可用公式见下文计算方式。常见图型与数据类型的匹配指标数据类型可视化图型说明读取时间范围内的所有值Line折线图展示指标随时间的变化趋势获取排序后的 Top N 值Top ListTop 列表展示排名靠前的对象读取时间范围内所有标签的值Table表格以表格形式展示多标签数据读取时间范围内的所有值Area面积图与折线类似但带填充区域读取时间范围内的所有值Service/Instance/Endpoint List以实体列表形式展示服务/实例/端点数据读取时间范围内的采样记录Records List记录列表展示采样到的明细记录实际图型能力对应着 UI 渲染层例如模板中出现的ServiceList、Topology等图型类型即由graph.type字段驱动参见 general-root.json。计算方式Calculations标签计算方式PercentageValue / 100ApdexValue / 10000AverageSum of values / Count of valuesPercentage Avg-previewSum of values / Count of values / 100Apdex Avg-previewSum of values / Count of values / 10000Byte to KBValue / 1024Byte to MBValue / 1024 / 1024Byte to GBValue / 1024 / 1024 / 1024Seconds to YYYY-MM-DD HH:mm:ssdayjs(value * 1000).format(YYYY-MM-DD HH:mm:ss)Milliseconds to YYYY-MM-DD HH:mm:ssdayjs(value).format(YYYY-MM-DD HH:mm:ss)PrecisionValue.toFixed(2)Milliseconds to secondsValue / 1000Seconds to daysValue / 86400这些计算对应着原始存储值与展示值之间的换算例如 OAL 中 Apdex 类指标通常以万分比存储展示时除以 10000 还原为 0~1 的 Apdex 分service_apdex/10000正是 general-root.json 中根仪表盘的 MQE 表达式写法。时间类的转换基于 dayjs 库用于把 Unix 时间戳渲染为可读时间。图型样式Graph styles除指标配置外图型还提供高级样式选项advanced style options用于调整展示效果如坐标轴显隐、字号、是否显示分组等。以模板中的ServiceList图型为例其样式字段包括fontSize、showXAxis、showYAxis、showGroup等见 general-root.json。Widget 选项Widget optionsWidget 本身可以定义以下属性Name名称widget 的名称用于在仪表盘中与其他 widget 进行关联Title标题widget 的标题名Tooltip Content提示内容widget 的附加说明文字。Widget 关联Association OptionsWidget 提供与其他 widget 关联的能力关联后鼠标悬停时会在同一时间点上显示轴指针axis pointer与提示信息帮助用户理解多个指标之间的连通性/联动关系。Widget 静态链接Widget Static Link仪表盘上每个 widget 的右上角都有Generate Link选项可生成代表该 widget 的静态链接。通过该链接可以将 widget 分享给他人将 widget 以 iFrame 形式集成到任何第三方系统中轻松构建大屏网络运维中心NOC, Network Operations Center仪表盘。关于该链接有两个可自定义选项Lock Query Duration锁定查询时长手动设置查询时长默认关闭OFFAuto Fresh自动刷新默认开启ON查询周期为 6 秒、时间范围为最近 30 分钟查询周期与时间范围均可自定义。Settings 设置UI 的Settings提供以下选项语言language服务器时区server time zone自动刷新auto-fresh选项。这些设置存储在**浏览器本地存储local storage**中除非手动清除否则不会改变。FAQ登录与认证SkyWalking 多年来一直不提供常规意义上的登录与认证功能。如果有认证需求业界已有大量成熟的网关Gateway解决方案可以与之配合例如 Nginx 生态下的各类认证模块。也就是说SkyWalking UI 默认假设运行在受信任的内网或由上层网关统一管控的网络环境中认证能力应由部署架构中的网关层补齐。延伸阅读backend settings 配置词汇表查阅uiMenuRefreshInterval、enableUpdateUITemplate等与 UI 相关的完整配置项说明OAL/MAL 概念文档 与 LAL 文档理解指标与日志数据的生成引擎官方仪表盘模板目录仓库内 115 个 JSON 模板覆盖全部默认技术栈是学习仪表盘 JSON 结构与自定义的最佳参考menu.yaml完整侧边栏菜单 marketplace 定义UITemplateInitializer.java 与 UIMenuInitializer.java仪表盘模板与菜单的加载源码UITemplateCheckerTest.java模板合法性的测试用例可用于验证模板格式。赞分享可观测性后端微服务云原生【免费下载链接】skywalkingAPM, Application Performance Monitoring System项目地址https://gitcode.com/gh_mirrors/sky/skywalking点击查看免费下载相关推荐Apache SkyWalking自定义指标仪表盘JSON配置详解Apache SkyWalking自定义指标仪表盘JSON配置详解 1. 仪表盘配置基础架构 SkyWalking仪表盘系统采用分层架构设计通过JSON/Y可观测性后端微服务云原生TREK 自托管旅行规划器My Trips 仪表盘/dashboard完全指南——视图切换、Spotlight 卡片、归档管理与侧边栏 WidgetTREK 自托管旅行规划器My Trips 仪表盘/dashboard完全指南——视图切换、Spotlight 卡片、归档管理与侧边栏 Widget 本文后端前端MCP 服务AI 应用ResXResourceManager脚本功能入门批量处理多语言资源文件ResXResourceManager脚本功能入门批量处理多语言资源文件 ResXResourceManager是一款强大的多语言资源文件管理工具其脚本功能开发工具创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表