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),仅供参考

相关新闻

BrewUI实战:Homebrew可视化包管理与依赖关系排查指南

BrewUI实战:Homebrew可视化包管理与依赖关系排查指南

1. 我为什么折腾了一圈还是回到 BrewUI先交代一下背景。作为 Mac 上重度依赖 Homebrew 的人,我几乎每天都在 brew install、brew update、brew upgrade 之间来回切换,命令行用习惯了其实也不觉得麻烦,真正让人头疼的是另外几件事:…

2026/9/21 17:40:10 阅读更多 →
从 PyTorch 迁移到 Apache MXNet Gluon:API 对照、MNIST 实战与自动求导原理

从 PyTorch 迁移到 Apache MXNet Gluon:API 对照、MNIST 实战与自动求导原理

人工智能深度学习机器学习 【免费下载链接】mxnet Lightweight, Portable, Flexible Distributed/Mobile Deep Learning with Dynamic, Mutation-aware Dataflow Dep Scheduler; for Python, R, Julia, Scala, Go, Javascript and more 项目地址: https://gitcode.c…

2026/9/21 18:16:12 阅读更多 →
汽车EMC设计实战:从原理到整改的完整指南

汽车EMC设计实战:从原理到整改的完整指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/21 14:03:36 阅读更多 →

最新新闻

2026最新绿荫继承者调试指南:3招解决代码复制跑不通难题

2026最新绿荫继承者调试指南:3招解决代码复制跑不通难题

2026最新绿荫继承者调试指南:3招解决代码复制跑不通难题 刚把掘金技术社区热帖里的代码复制下来,双击运行,控制台直接红屏报错?别慌,这不是你笨,也不是代码烂。很多转岗进开发圈的朋友都卡在第一步:看着别人跑通的“绿荫继承者”模式示例,自己环…

2026/9/22 19:04:09 阅读更多 →
如何编写自己的AI编程技能:MiniMax Skills技能开发与贡献完全教程

如何编写自己的AI编程技能:MiniMax Skills技能开发与贡献完全教程

如何编写自己的AI编程技能:MiniMax Skills技能开发与贡献完全教程 【免费下载链接】skills 项目地址: https://gitcode.com/gh_mirrors/skills18/skills MiniMax Skills 是一个面向 AI 编程工具的开发技能库,让 Claude Code、Cursor、Codex 等 A…

2026/9/22 19:04:09 阅读更多 →
悦读纪博客避坑速查手册:3步搞定代码调试难题

悦读纪博客避坑速查手册:3步搞定代码调试难题

悦读纪博客避坑速查手册:3步搞定代码调试难题 复制来的代码跑不通,报错信息满屏飞,你是不是也盯着屏幕发呆,不知道从哪下手?别慌,这种“复制粘贴即崩溃”的尴尬,几乎每个开发者都经历过。这时候,你需要的不是盲目搜索错误代码,而是一份能直接定位问…

2026/9/22 19:04:09 阅读更多 →
皇牌空战性能调优避坑指南:3个实战案例搞定高并发卡顿

皇牌空战性能调优避坑指南:3个实战案例搞定高并发卡顿

皇牌空战性能调优避坑指南:3个实战案例搞定高并发卡顿 刚学完 Python 或 Go 语法,看着文档里的 for 循环和 if 判断觉得挺简单,真到了公司接手项目,一上线就崩。是不是觉得代码逻辑没错,但服务器 CPU 飙红、响应时间从…

2026/9/22 19:04:09 阅读更多 →
5个关键步骤搞定SSD固态硬盘修复源码最佳实践

5个关键步骤搞定SSD固态硬盘修复源码最佳实践

5个关键步骤搞定SSD固态硬盘修复源码最佳实践 复制来的代码跑不通,报错日志像天书,调试半天没头绪?这不仅是新手噩梦,也是资深开发者常踩的坑。在SSD固态硬盘修复领域,很多教程只给结果不给过程,导致你明明照着写,却因环境差异或底层逻辑理解偏…

2026/9/22 19:04:09 阅读更多 →
3个技巧搞定图片缩小,高频面试题里的坑全在这

3个技巧搞定图片缩小,高频面试题里的坑全在这

3个技巧搞定图片缩小,高频面试题里的坑全在这 昨天帮一个刚转行嵌入式的朋友看代码,他对着屏幕抓耳挠腮,说从网上抄的Python图片处理脚本,一跑就报错,改来改去还是不行。这场景太熟悉了,很多开发者都卡在这里:复制来的代码跑不通,日志满屏红字…

2026/9/22 19:03:08 阅读更多 →

日新闻

3台商务办公笔记本实测:手写实现环境配置,告别卡半天

3台商务办公笔记本实测:手写实现环境配置,告别卡半天

3台商务办公笔记本实测:手写实现环境配置,告别卡半天 配置环境就卡半天?别怪机器慢,多半是你没选对工具链。在Java、Go或Python的项目现场, 手写实现…

2026/9/22 0:00:41 阅读更多 →
剑帝加点速查手册:3分钟搞懂核心逻辑

剑帝加点速查手册:3分钟搞懂核心逻辑

剑帝加点速查手册:3分钟搞懂核心逻辑 面试被问原理答不上来,是不是常态?别慌。很多开发者对着 GitHub 开源仓库里的代码发呆,看似简单实则暗藏玄机。今天这份【剑帝加点】速查手册,直接带你拆解核心实现,把面试必考的原理讲透。…

2026/9/22 0:00:41 阅读更多 →
手写实现图片压缩网站核心:搞定WebP转换与质量调优

手写实现图片压缩网站核心:搞定WebP转换与质量调优

手写实现图片压缩网站核心:搞定WebP转换与质量调优 复制来的代码跑不通不知道怎么调?别慌,这种“复制粘贴地狱”在开发圈太常见了。尤其是做 图片压缩网站…

2026/9/22 0:00:41 阅读更多 →

周新闻

Flutter for OpenHarmony游戏卡片渐变背景实战:从原理到性能优化

Flutter for OpenHarmony游戏卡片渐变背景实战:从原理到性能优化

直接铺开项目本身吧。这几个月我一直在折腾一件事:用Flutter给OpenHarmony做一款游戏集合类的App,说白了就是把若干小游戏塞进一个壳里,用统一入口分发。这个方向本身不算新鲜,真正让我花了不少心思的,是首页那堆游戏卡…

2026/9/22 4:32:41 阅读更多 →
Word表格编号全攻略:从列表编号到题注交叉引用

Word表格编号全攻略:从列表编号到题注交叉引用

写Word文档,最让人头疼的往往是那些“看起来不起眼”的小问题。比如表格编号这事:今天在表后面多加了两个空白行,明天给客户交稿前发现整个章节的编号全部错位,光是挨个改序号就能耗掉大半个下午。我前阵子帮人整理一份上百页的技…

2026/9/22 4:38:57 阅读更多 →
从第一个站到第二个站:独立开发者的静态网站选型与落地实践

从第一个站到第二个站:独立开发者的静态网站选型与落地实践

1. 项目概述1.1 核心需求解析做独立开发者这几年,说实话,第一个网站上线的那天晚上我兴奋得没睡着。但等它跑了半年,流量惨淡、功能臃肿、代码自己都懒得看第二遍之后,我才慢慢琢磨明白一个道理:第一个网站是练手&…

2026/9/22 8:51:04 阅读更多 →

月新闻

持续集成 流水线自动化与 声明式交付 实践:原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践:原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践:原型怎样变成可用功能分类:[AI/大模型]细分主题:AI 增强型 CI/CD 流水线自动化与 GitOps 实践:Agent 工作流、工具调用与任务拆解:从原型到生产的验收清单很多团队在尝试用大…

2026/9/21 15:36:51 阅读更多 →
容器编排 生产环境运维与排障实战:复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战:复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战:复盘记录怎样真正派上用场分类:[工程技术]细分主题:Kubernetes 生产环境运维与排障实战:可复制的项目复盘模板与决策记录大部分团队的事故复盘报告,最后都变成了躺在 Confluence 或钉…

2026/9/21 15:36:51 阅读更多 →
容器 容器化技术与镜像安全管理:核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理:核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理:核心链路应该先拆哪一步分类:[工程技术]细分主题:Docker 容器化技术与镜像安全管理:核心链路的逐步实现与关键代码取舍面对一个积累了五六年历史包袱的单体架构应用(包含 Web 接口、后台…

2026/9/22 2:43:42 阅读更多 →