garafana界面样式修改

程序员文章站 2024-03-22 13:30:46

...

frame引入garafana界面，部分可编辑操作不对外暴露，需要自定义样式，隐藏菜单和顶部编辑栏；但是garafana引入属于跨域引入，不可以直接获取garafana界面元素，本文章对具体实现做一总结。

iframe引入garafana

iframe的src地址为garafana地址，添加参数&monitorFlag=true让用户区分引入与未引入

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { TreeSelect, Card, Row, Spin } from 'antd';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import jQuery from 'jquery';

import styles from './Monitoring.less';

const $ = jQuery;

@connect(({ monitor, loading }) => ({
  monitor,
  loading: loading.models.monitor,
}))
class Monitoring extends PureComponent {
  state = {
    value: '', // 默认值 不能为空 监控页面有修改，需对应修改
    treedata: [],
    iframeUrl: '', // 默认值 不能为空
    iframePrefix: 'http://localhost:3000',
    iframeLoading: true,
    iframeHeight: 600,
  };

  componentDidMount() {
    // iframe的高度
    this.setState({
      iframeHeight: $('body').height() - 280,
    });

    // 发送消息 添加监听
    window.addEventListener('message', this.messageEvent);
  }

  componentWillUnmount() {
    // 移除监听
    window.removeEventListener('message', this.messageEvent);
  }

 // iframe传来的数据，初始loading为true,什么时候iframe传来数据，改为false,体现一个加载过程，用户体验良好
  messageEvent = event => {
    if (event.data === 'loadSuccess') {
      this.setState({
        iframeLoading: false,
      });
    }
  };

  render() {
    const { value, treedata, iframeUrl, iframePrefix, iframeLoading, iframeHeight } = this.state;
    return (
      <PageHeaderWrapper content="content">
        <Card bordered={false}>
          <div className={styles.iframeContain}>
            <Spin tip="Loading..." spinning={iframeLoading}>
              <iframe
                id="monitorBox"
                className="monitorBox"
                title="monitor"
                src={`${iframePrefix}${iframeUrl}&monitorFlag=true`}
                width="100%"
                height={iframeHeight}
                frameBorder="0"
              />
            </Spin>
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default Monitoring;

garafana源码修改样式

iframe不跨域的话，可以通过以下方法直接获得子元素内容

$("iframe")[0].contentWindow.document

但是如果是跨域的话，是获取不到的，所以不能直接修改元素样式，需要从引入的界面本身去修改代码
如果是引入服务器的garafana，没有办法直接查看修改结果，所以需要在本地搭建garafana=>localhost:3000，并修改本地配置，在本地修改源码测试，然后替换服务器的garafana源码；
源码目录
garafana界面样式修改
修改/grafana/public/views目录下的index.html,确认代码无误后，对应复制到index-template.html

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body class="theme-[[ .Theme ]] [[.AppNameBodyClass]]">
  <style>
     /*此处为源代码样式，为使博客简介，删掉了 */

     /*iframe-different为父元素，对子元素样式修改*/
    .iframe-differrent .dashboard-row__actions,.iframe-small .dashboard-row__actions{
      display: none !important;
    }

  </style>
  <script>
   // 添加代码！！！！！！！！！！！！   
   // 函数在最外层父元素添加iframe-differrent类名 执行函数成功后，发送消息给父级页面
      function changeDash(){
        // sidemenu与main-view是兄弟元素，所以用js操作控制样式，其他子元素直接写样式就可以，不需都用js操作样式
        document.getElementsByClassName("sidemenu")[0].style.cssText ="display:none!important;visibility:hidden";
        $(".main-view").addClass("iframe-differrent");
        window.parent.postMessage("loadSuccess","*");
      }  
  </script> 

  <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 preloader = document.getElementsByClassName("preloader");
      if (preloader.length) {
        preloader[0].className = "preloader preloader--done";
      }  
      
      // 添加代码！！！！！！！！！！！！
      // 如果获取到的地址含有monitorFlag参数，说明是iframe引入的页面，执行函数
      if(window.location.href.indexOf("monitorFlag")!==-1){
        changeDash();
      }
    };
  </script>

	[[if .GoogleTagManagerId]]
		<!-- Google Tag Manager -->
		<script>
			dataLayer = [{
				'IsSignedIn': '[[.User.IsSignedIn]]',
				'Email': '[[.User.Email]]',
				'Name': '[[.User.Name]]',
				'UserId': '[[.User.Id]]',
				'OrgId': '[[.User.OrgId]]',
				'OrgName': '[[.User.OrgName]]',
      }];
		</script>
		<noscript>
			<iframe src="//www.googletagmanager.com/ns.html?id=[[.GoogleTagManagerId]]" height="0" width="0" style="display:none;visibility:hidden"></iframe>
		</noscript>
		<script>(function (w, d, s, l, i) {
				w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0],
					j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
			})(window, document, 'script', 'dataLayer', '[[.GoogleTagManagerId]]');</script>
		<!-- End Google Tag Manager -->
  [[end]]
<script type="text/javascript" src="public/build/vendor.9d62d98149547e1107ad.js"></script><script type="text/javascript" src="public/build/app.9d62d98149547e1107ad.js"></script></body>

</html>

garafana本地配置与调试

下载garafana安装，然后在安装目录运行exe文件

garafana界面样式修改

双击grafana-cli.exe服务，如果重启可在任务管理器中找到对应服务重启，查看对应修改结果

双击grafana-server.exe，会打开一个命令窗口，关掉窗口，服务对应关闭
端口可以配置，默认3000，打开：localhost:3000,打开garafana页面