3步跑通XO开源监控大屏再花10分钟改出自己的主题【免费下载链接】deepopsObserve any stack, any service and any data, using any UI components you prefer, never missing any X factors and resolve them before they become real problems.项目地址: https://gitcode.com/gh_mirrors/xo/deepops周五发版夜告警群消息刷了200条值班同学翻了5分钟才在监控工具的十几个页签里找到异常机器——时间都花在了切换和过滤上。你缺的往往不是更多工具而是一块一页看全的屏。XO 是一款可编程的开源可观测性平台它的UI层本仓库 datav/ 目录下的 Datav可以作为 Grafana 的替代方案当开源监控大屏使用用你想要的可视化组件自由拼画面。读完这篇你能把第一块自定义看板跑起来并把主色换成你团队的色号。最短路径跑起来拿代码。前端入口在 datav/frontend/ 目录git clone https://gitcode.com/gh_mirrors/xo/deepops cd deepops/datav/frontend装依赖。技术栈是 Vite React 18 Chakra UI ECharts一条命令yarn install起开发服务浏览器打开终端打印的地址yarn dev⚠️ 首次启动时数据接口会报错因为前端依赖 datav/query/ 下的 Go 后端或 deploy/ 目录里的 ClickHouse、Prometheus。页面骨架渲染不受影响可以先改主题和背景数据后接。你现在看到的就是内置的 Home Dashboard深色网络球背景图服务依赖拓扑和运行时指标按网格布局排好进编辑模式就能调整面板位置。按场景拆能力值班大屏配色改刺眼只动一个json深色屏白天看着还行凌晨三点刷亮色渐变就扎眼默认蓝也未必合团队色。XO 把整屏颜色收敛到一份主题文件背景画布 #111217、主色 #3D71D9、错误色 #D10E5C、警告色 #F5B73D面板标题、按钮、选中态全部从这里取。datav/frontend/src/data/theme/dark.json所谓开源可视化自定义主题就是改这个文件里的几个色值动 primary.main整块看板的主色联动变化不用碰任何组件代码。大屏背景从素换到上得了台面一步完成黑底大屏投到指挥中心总差点意思。仓库内置了 3 套背景Universe深色网络球、Rainbow浅色彩虹渐变、Dark Rainbow深底蓝紫渐变在仪表板样式设置页下拉就能切。这套监控大屏配置的入口在 datav/frontend/src/views/dashboard/settings/Styles.tsx 的 bgOptions 数组共 4 项你在里面加一行自己图片的路径文件放进 datav/frontend/public/dashboard/它就成为下拉可选项。数据为空时让页面说人话面板没数据整屏空白用户会以为系统挂了URL 输错又跳到白底 404。XO 的处理方式是插画加一行引导文案告诉用户这里现在没有东西你可以做什么。空状态组件在 datav/frontend/src/components/Empty.tsx里面的插画地址和引导文案都能直接换404 页面 datav/frontend/src/pages/NotFound.tsx 是同样的改法换图、改文案两处各一行。指标、日志、trace 一把 compose 进同一套栈指标在 Prometheus、日志和 trace 在 ClickHouse数据源一个个手搓很劝退。deploy/ 目录给了全栈 compose 文件仓库里的 otel-collector/ 目录还带了 ClickHouse exporter 和 tail-sampling 采样 processor采集链路自己就能扩。deploy/docker-compose-all-in-one.yaml在 deploy/ 目录跑一次 up数据源就位仪表板直接连不用从零写采集配置。动手改一版改法一主题色。打开这份 dark.json把第 21 行的色值换成你团队的品牌蓝保存、刷新浏览器整块看板主色就变了primary: { - main: #3D71D9, main: #0B5FFF, text: #6E9FFF,改法二大屏背景。在 Styles.tsx 的 bgOptions 数组里加一项图片文件丢进 public/dashboard/{ label: My BG, value: /dashboard/my-bg.png, colorMode: dark, },保存后打开仪表板样式设置背景下拉里会多出 My BG 一项选上它整屏背景换成你的图。收尾XO 适合想在开源可观测性平台上自建监控大屏、又不想被现成模板框住的团队如果你需要现成的采集、采样、告警全套先翻 deploy/ 目录的 compose 文件和 otel-collector/ 目录把数据栈立起来再谈画面。下一步建议fork 下来把 dark.json 里的 primary.main 改成你团队的色号跑一次 yarn dev 看效果。仓库地址https://gitcode.com/gh_mirrors/xo/deepops【免费下载链接】deepopsObserve any stack, any service and any data, using any UI components you prefer, never missing any X factors and resolve them before they become real problems.项目地址: https://gitcode.com/gh_mirrors/xo/deepops创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考