vlambda
2020-07-15

把kibana装到grafana里要几步

脚本之家

你与百万开发者在一起

把kibana装到grafana里要几步

作者 | 左国才

出品 | 脚本之家（ID：jb51net）

把kibana装到grafana里要几步？

我们想在grafana里给elasticsearch数据源做词云可视化，由于grafana没有词云方面的插件，我们发现kibana里有词云方面的可视化方案tag cloud。我们尝试着把kibana的词云的图形嵌入到grafana里来快速实现了grafana的词云功能。那么把kibana装到grafana里要几步呢？答案是三步。

原理

先来说说服务部署的现状，kibana和elasticsearch 我没有选用官方的x-pack版，选用的AWS 开源的opendistroforelasticsearch，是elasticsearch 官方的修改版，里边集成了AWS的认证模块opendistro_security，在这里我没有启用其他认证方式，只是使用了opendistro_security的简单认证(base auth)。这样就有一个问题，如果在grafana里直接嵌入从kibana面板拷贝过来的iframe code的时候，需要做认证，否则会报401 Unauthorized错误。所以我使用了一种折中的方案，在grafana和kibana中间再加一层nginx代理，把简单认证的密码加到nginx请求的header里，让nginx去帮忙做认证，把认证后的结果返回给grafana。画了个流程图，有点low，大家凑合着看吧。

grafana(html iframe)----------- nginx (header) ------------- kibana（带base auth功能）

如果您对opendistro项目感兴趣，可以参考https://opendistro.github.io/for-elasticsearch/

第一步配置好kibana

kibana和elasticsearch 配置认证这里就不讲了，感兴趣的可以参考opendistro开源项目文档。

1.在Kibana Visualize 里创建 tag cloud ，把elasticsearch里的数据可视化为词云。如图1

把kibana装到grafana里要几步

2.Kibana Visualize里支持分享iframe代码，拷贝词云这幅图表的iframe代码。如图2

第二步配置好nginx

对用户名和密码做base64转码

echo -n username:password | base64

比如用户名是admin，密码是admin，echo -n admin:admin | base64，使用Base64对明文admin:admin进行转码，然后把转码后的base64字符串添加到nginx proxy_set_header Authorization "Basic YWRtaW46YWRtaW4=";中。

nginx.conf example

upstream kibana_backend {  server 10.10.10.110:5601 max_fails=2 fail_timeout=30s ;  }
server { listen 443 ssl; server_name kibana.xxx.com; ssl_certificate xxx.com.crt; ssl_certificate_key xxx.com.key; ssl_session_timeout 5m; ssl_protocols TLSv1 TLSv1.1 TLSv1.2;  ssl_ciphers HIGH:!aNULL:!MD5; ssl_ciphers ALL：!ADH：!EXPORT56：RC4+RSA：+HIGH：+MEDIUM：+LOW：+SSLv2：+EXP;  ssl_prefer_server_ciphers on;  location / { proxy_pass http://kibana_backend/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Authorization "Basic YWRtaW46YWRtaW4="; }
}

第三步配置好grafana

1.grafana 配置文件

grafana 配置里需要设置允许嵌入iframe

grep -vE "^;|#" /etc/grafana/grafana.ini
[security]allow_embedding = true
[panels]disable_sanitize_html = true

2.grafana(html iframe)

在grafana 面板里我们通过Pannel--Visualization--Text--Options--Mode--html 添加iframe代码。可以先拿百度地图测试一下，看html iframe能否正常显示。

<iframe id="inlineFrameExample" title="Inline Frame Example" width="1200" height="900" src="https://map.baidu.com"></iframe>

以下嵌入grafana的代码,只对布局做了调整，其他都是引用kibana--Visualize --share里"Copy iframe code" 的内容。

<iframe src="https://kibana.xxx.com/app/kibana#/visualize/edit/14da2260-a700-11ea-93ba-a9a125fcf025?embed=true&_g=()" height="900" width="1200" style="POSITION:absolute;RIGHT:500px; LEFT:-50px; TOP:-100px;"></iframe>

好啦，此刻kiabana的词云已经装到grafana里了，是不是很简单，三步搞定grafana词云。当然你把python的 word cloud嵌入到grafana里，我也没意见。以上kibana，grafana 都使用了域名并配置了https证书。

本文参考的文档 :https://discuss.elastic.co/t/auto-authenticating-to-iframe-embedded-kibana-dashboard/46091

————————————————————

 
   
   
 
  
    
    
   
    
     
      
      - END - 
      
      
      点击卡片进入小程序，签到赢礼品 
      
      
      👇🏻👇🏻👇🏻 
      
      
       
        
         
        
       
      
     （更多精彩值得期待……）

把kibana装到grafana里要几步

●

vlambda博客
学习文章列表