Grafana 定制
我做的需求是对Grafana的样式以及页面标签展示进行定制化开发
1,首先,将Grafana源码启动起来
起来之后 引入相关的Json文件 大概就是这个样子
2,接下来是我们要做的
(1)取消侧边栏。
(2)取消面包屑导航栏
(3)将浏览器的标签页 *** - Grafana 改为 **** - S_M_R
*取消侧边栏。取消面包屑导航栏 *
我们在Grafana源码中 找到当前目录,我们需要修改index-template.html 页面 之后再powershell里执行 yarn start 进行编译 之后powershell里重启后台服务 ./bin/grafana-server,exe 这样我们在127.0.01:3000本地就可以打开项目
.sidemenu {
display: none !important;
}
.page-toolbar .css-mgcb1x {
display: none !important;
}
<script>
window.grafanaBootData = {
user: [[.User]],
settings: [[.Settings]],
navTree: [[.NavTree]]
};
// In case the js files fails to load the code below will show an info message.
window.onload = function() {
var icon = document.getElementsByClassName("css-14mr6ll");
if (icon.length) {
//icon[0].className = "dis"
icon[0].style.display = 'none'
}
};
</script>
我们可以在页面的
修改导航栏 --自定义
可以看到 我们修改了自己定义的名字,这个修改需要我们在源码中找到 Branding.AppTitle,AppTitle就是我们需要修改的 (可以在public进行搜索)
ps:项目页面需要修改的东西,基本都是再public文件夹里
我们在public/app/features/dashboard/containers/DashboardPage.tsx文件里
// if we just got dashboard update title
if (prevProps.dashboard !== dashboard) {
document.title = dashboard.title + `${Branding.AppTitle}`;
//我们自己替换的
document.title = dashboard.title + 'S_M_R';
}
当然我们也需要将页面中 import引入Branding 需要删掉 不然会报警告.
如果你们还有一些定制化的修改 基本参考这个套路,不会有什莫太难的点
Grafana 汉化
这里汉化的话 我就说一点,因为都是大同小异
我这里汉化的部分是顶部时间选择器和按钮触碰,基本是在packages/grafana-ui/里找到对应的英语,进行修改。
比如在 packages/grafana-ui/src/components/DateTimePickers/options.ts
{ from: 'now-15m', to: 'now', display: '最近 15 分钟' },
{ from: 'now-30m', to: 'now', display: '最近 30 分钟' },
{ from: 'now-1h', to: 'now', display: '最近 1 小时' },
{ from: 'now-3h', to: 'now', display: '最近 3 小时' },
{ from: 'now-6h', to: 'now', display: '最近 6 小时' },
{ from: 'now-12h', to: 'now', display: '最近 12 小时' },
{ from: 'now-24h', to: 'now', display: '最近 24 小时' },
{ from: 'now-2d', to: 'now', display: '最近 2 天' },
{ from: 'now-7d', to: 'now', display: '最近 7 天' },
{ from: 'now-30d', to: 'now', display: '最近 30 天' },
{ from: 'now-90d', to: 'now', display: '最近 90 天' },
{ from: 'now-6M', to: 'now', display: '最近 6 月' },
{ from: 'now-1y', to: 'now', display: '最近 1 年' },
{ from: 'now-2y', to: 'now', display: '最近 2 年' },
{ from: 'now-5y', to: 'now', display: '最近 5 年' },
我们对时间选择进行的一些汉化处理。
当然这些我们做的都是一些最基础的汉化操作,如果你觉得我的文章写的不是很清楚,下面有个 b站 up主的视频讲解 也大概讲了一下对Grafana的设置,登陆页面之类的汉化操作,大家如果感兴趣,可以看下
https://www.bilibili.com/video/BV1Fv411z7uZ?spm_id_from=333.337.search-card.all.click
https://www.bilibili.com/video/BV17g4y1i75d?spm_id_from=333.337.search-card.all.click
这就是这篇博客的所有东西,如果我写的东西帮助到了您,麻烦您点赞,加关注哦~~