专栏首页云原生实验室教你如何优雅地魔改 Grafana 主题,太实用了!

教你如何优雅地魔改 Grafana 主题,太实用了!

Grafana 自带两款主题 LightDark,都还不错,Light 有点刺眼,不建议使用。Dark 还马马虎虎,不过时间长了总会产生审美疲劳,anyway 还是有很多人需要自定义主题的,前几天我在票圈分享了魔改的 Grafana 界面之后,一大批童鞋让我分享主题。可是 Grafana 默认情况下是不支持自定义主题的,你想改变主题样式或新增主题只能修改源码重新编译。

难道没有别的办法了?办法还是有的,只不过稍微有点繁琐,但不复杂。今天就来给大家分享一种不需要改源码的方法,老少皆宜,按照我的步骤来,最后一定能搞定。这里不得不提一句,很多事情都是没有什么技术含量的,靠的是敏锐的嗅觉、强大的信息收集能力和变通能力,有很多技术大神思维都很僵化,解决问题容易钻进死胡同,这里我就不多说了。

就拿今天的主题来说,自定义 Grafana 主题的方法真的没有什么技术含量,当你知道了之后就会觉得它非常简单,但是为什么你搞不定呢?可以自己思考一下。

下面我来演示一下我解决这个问题的思路和方法,最后给出结果。

一开始我想到 Grafana 可以通过插件机制来扩展和自定义自身的功能,那就可以从这里入手,首先打开 Google 搜索,从 Grafana 官网搜索关于 theme 的插件:

找了一圈发现只有 Boom theme plugin 符合要求,点进去发现这是一个 Panel 插件,这就意味着由于插件自身的局限性,不管你做了什么它只会对当前的仪表盘生效。如果你想改变当前仪表盘的样式,需要添加一个面板:

点击 ”Choose Visualization“ 选择可视化类型,然后选择 <Boom Theme>,然后你就可以添加自定义主题了。

但是现在问题又来了,我太懒了,不想自己写 CSS,怎么办?有没有别人写好的主题呢?Github 是一个宝库,可以去那里找找。通过关键词 grafana theme 搜索过去一年内活跃过的项目:

最终选择了 theme.pak[1]。找到自己心仪的主题添加到上面的面板中,就大功告成了:

你可以将其中一个主题设为默认主题,这样每次打开当前仪表盘都会使用你设置的默认主题。自定义主题后的仪表盘是这个样子的:

最上面的菜单是我们刚刚添加的主题,可以直接点击不同主题实时切换:

如果想让所有的仪表盘都使用自定义主题,需要在所有的仪表盘上新增一个 Boom Theme Panel,为了避免重复的配置工作,可以直接复制 Panel,操作步骤如下:

首先点击 Panel 上的到三角,鼠标悬停在选项 More 上:

然后选择 Copy

到下一个仪表盘中新建一个面板,选择 Paste copied panel

搞定。

怎么样,没什么技术含量吧?

脚注

[1]

theme.pak: https://github.com/gilbN/theme.park

文章分享自微信公众号:
云原生实验室

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 写好项目文档有多重要?关于我被百大 UP 主选中又放鸽子这档事

    其实当我刚刚听说这个游戏的时候,属于村里刚刚通网,当时这个游戏都已经在网上传遍了,而且也有同学扒光了源码,并公开到了 GitHub 平台。

    程序员鱼皮
  • 优雅解决LeanCloud流控问题

    最近好多人遇到了"因流控原因,通过定时任务唤醒体验版实例失败,建议升级至标准版云引擎实例避免休眠"。我也遇到了这种问题,太难受了。难道白嫖结束了,羊被薅死了?

    Dreamy.TZK
  • Hexo鼠标样式修改

    1.在\themes\butterfly\source\css路径下创建一个mouse.css文件,在文件中添加如下代码:

    花猪
  • 通过研究代码如何随时间变化,Michael Feathers 确定了代码库的功率曲线

    通过研究代码如何随时间变化,Michael Feathers 确定了代码库的功率曲线。每个系统都有代码,通常而言里面的很多很多代码,一次写好之后就永远不会变了的...

    聚名12255
  • 光速从0到1掌握Prometheus和Grafana,腾讯云专家5万字精华教程免费送

    黄雷,腾讯云高级工程师,曾负责构建腾讯云云监控新一代多维业务监控系统,擅长大规模分布式监控系统设计,对 golang 后台项目架构设计有较深理解,后加入TKE...

    腾讯云原生
  • GitHub万星资源:强化学习算法实现,教程代码样样全,还有详细学习规划

    自从有了强化学习(RL),AI上能星际争霸,下能雅达利称王,让内行人沉醉,让外行人惊奇。

    Datawhale
  • GitHub万星资源:强化学习算法实现,教程代码样样全,还有详细学习规划

    自从有了强化学习(RL),AI上能星际争霸,下能雅达利称王,让内行人沉醉,让外行人惊奇。

    石晓文
  • 从零搭建Prometheus监控报警系统

    Prometheus是由SoundCloud开发的开源监控报警系统和时序列数据库(TSDB)。Prometheus使用Go语言开发,是Google BorgMo...

    kubernetes中文社区
  • Si Stebbins Stack中的数学与魔术(十一)——《Woody on Stebbins》作品赏析

    在前面的文章中,已经陆续介绍过《Woody on Stebbins》系列的作品了,这也是我在写这个系列的时候难得的参考,里面很多魔术演绎方法和数学应用方式都十分...

    magic2728
  • grafana + influxdb + telegraf 构建性能监控平台

    原文链接:https://www.relaxheart.cn/to/master/blog?uuid=79

    七七分享
  • Grafana如何助力Zabbix,打造漂亮的监控界面?

    Grafana是一个跨平台的开源的度量分析和可视化工具,有着非常漂亮的图表和布局展示,功能齐全的度量仪表盘和图形编辑器,官方原生支持Zabbix数据输出,而Gr...

    Zabbix
  • Grafana 中文入门教程 | 构建你的第一个仪表盘

    比如说,需要计算资源的时候,一个配置文件就可以要来两百台虚拟化好的机子。需要试下缓存?点下鼠标就可以要到几十个配置好的 Redis 结点。

    杰哥的IT之旅
  • 从零开始搭建ELK+GPE监控预警系统

    前言 本文可能不会详细记录每一步实现的过程,但一定程度上可以引领小伙伴走向更开阔的视野,串联每个环节,呈现予你不一样的效果。 业务规模 8个平台 100+台服务...

    小柒2012
  • 从零开始搭建ELK+GPE监控预警系统

    本文可能不会详细记录每一步实现的过程,但一定程度上可以引领小伙伴走向更开阔的视野,串联每个环节,呈现予你不一样的效果。

    小柒2012
  • GitHub 热点速览 Vol.15:Background-Matting 让你秒变专业抠图师

    以下内容摘录自上周微博@HelloGitHub 的 GitHub Trending,选项标准:新发布 | 实用 | 有趣,根据项目 release 时间分类,发...

    HelloGitHub
  • GitHub万星资源:强化学习算法实现,教程代码样样全,还有详细学习规划

    自从有了强化学习(RL),AI上能星际争霸,下能雅达利称王,让内行人沉醉,让外行人惊奇。

    代码医生工作室

扫码关注腾讯云开发者

领取腾讯云代金券