Grafana-嵌入前端

Introduce

Grafana能展示好看的图表，但是前端不能直接展示

Quick Start

iframe模式

演示使用prometheus中的grafana,K8s部署

1. 添加配grafana置项

   # 允许嵌入
   [security]                                                                                                                                                                 
   allow_embedding = true   
   # 允许匿名登入
   [auth.anonymous]                                                                                                                                                           
   enabled = true  

2. kubectl get cm -n monitoring prometheus-grafana -oyaml

   grafana.ini: |                                                                                                                                                               
     [security]                                                                                                                                                                 
     allow_embedding = true                                                                                                                                                     
     [auth.anonymous]                                                                                                                                                           
     enabled = true                                                                                                                                                             
     [analytics]                                                                                                                                                                
     check_for_updates = true                                                                                                                                                   
     [grafana_net]                                                                                                                                                              
     url = https://grafana.net                                                                                                                                                  
     [log]                                                                                                                                                                      
     mode = console                                                                                                                                                             
     [paths]                                                                                                                                                                    
     data = /var/lib/grafana/                                                                                                                                                   
     logs = /var/log/grafana                                                                                                                                                    
     plugins = /var/lib/grafana/plugins                                                                                                                                         
     provisioning = /etc/grafana/provisioning                                                                                                                                   
     [server]                                                                                                                                                                   
     domain = '' 

3. 前端代码

<iframe
  :src="url"
  width="100%"
  height="1000px"
  frameborder="0"></iframe>

   data() {
      return {
        nodeArchPie: [],
        nodeStatusPie: [],
        appStatusPie: [],
	#grafana地址，通过双击图标右上角小电脑，进行转换再获取URL
        url: 'http://10.10.101.123:31915/d/vkQ0UHxik/coredns?orgId=1&refresh=10s&kiosk=tv',

      }
    },

4. 效果