前端工作笔记

一. 全面定制grafana

1. 背景

使用grafana的share功能，无缝集成到自己的网站，grafana版本号8.2

2.隐藏kiosk按钮

<!-- grafana/public/views/index.html 添加以下代码-->
<style>
    .main-view .css-wtcggw .page-toolbar.css-1hik5m6 .css-p8muss:nth-of-type(9) {
      display: none;
    }
 </style>

3.禁用dashboard标题和panel标题的鼠标事件

在index.html的head中，找到引入的主题css文件名，eg: public/build/grafana.dark.******.css，修改一下内容

.panel-title-container {
    word-wrap: break-word;
    cursor: move;
    display: block;
    /* 增加阻止鼠标事件 */
    pointer-events: none
}
/* 增加阻止dashboard标题的单击事件 */
.css-vyoujf {
    display: flex;
    pointer-events: none
}

4.禁止键盘的Esc事件(配合kiosk全屏)

<!-- grafana/public/views/index.html 添加以下代码-->
  <script>
    document.addEventListener("keydown", function (e) {
      var event = e || window.event;
      if (event.keyCode == 27) {
        console.log("收到Esc按键", event.keyCode);

        if (event && event.stopPropagation) {
          console.log("w3c支持的浏览器");
          event.returnValue = false;
          event.preventDefault();
          //因此它支持W3C的stopPropagation()方法（阻止冒泡关联事件）
          event.stopPropagation();
        }
        else {
          console.log("IE浏览器支持");
          event.returnValue = false;
          event.preventDefault();
          //否则，我们需要使用IE的方式来取消事件冒泡（阻止冒泡关联事件）
          window.event.cancelBubble = true;
        }

      }
    }, true)
    // window.onkeydown = function(){
    //     console.log(window.event.keyCode)
    //     if (window.event.keyCode==49) {
    //         event.returnValue=false;
    //     }
    // }

  </script>