Grafana 定制化修改 汉化Grafana

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

这就是这篇博客的所有东西，如果我写的东西帮助到了您，麻烦您点赞，加关注哦~~