grafana 是一款非常優秀的可視化報表工具，有設計精良的可視化工具，今天來聊一聊如何將grafana集成到自己的應用中。
原理是：
- grafana允許iframe訪問，開啟
auth.proxy， java 后端鑒權后代理grafana - 前端通過iframe訪問后端代理過的grafana
grafana配置
要集成，可以選用iframe集成方式，需要配置可以embedding
[security]
allow_embedding = true
另外，還需要考慮認證的問題，可以開啟auth.proxy，通過http頭傳入認證信息：
[security]
allow_embedding = true
[auth.proxy]
# Defaults to false, but set to true to enable this feature
enabled = true
# HTTP Header name that will contain the username or email
header_name = Auth
# HTTP Header property, defaults to `username` but can also be `email`
header_property = username
# Set to `true` to enable auto sign up of users who do not exist in Grafana DB. Defaults to `true`.
auto_sign_up = true
# Define cache time to live in minutes
# If combined with Grafana LDAP integration it is also the sync interval
sync_ttl = 60
# Limit where auth proxy requests come from by configuring a list of IP addresses.
# This can be used to prevent users spoofing the X-WEBAUTH-USER header.
# Example `whitelist = 192.168.1.1, 192.168.1.0/24, 2001::23, 2001::0/120`
whitelist =
# Optionally define more headers to sync other user attributes
# Example `headers = Name:X-WEBAUTH-NAME Role:X-WEBAUTH-ROLE Email:X-WEBAUTH-EMAIL Groups:X-WEBAUTH-GROUPS`
headers =
# Check out docs on this for more details on the below setting
enable_login_token = false
default_theme = light
由於默認是black主題，集成到系統里效果不美觀，可以設置默認主題為light。
為了方便外部認證proxy，可以設置下sub_path 和 root_url
[server]
root_url = http://0.0.0.0:3000/grafana
serve_from_sub_path=true
java后端配置
引入httpproxy
<dependency>
<groupId>org.mitre.dsmiley.httpproxy</groupId>
<artifactId>smiley-http-proxy-servlet</artifactId>
<version>1.11</version>
</dependency>
添加配置：
proxy:
grafana:
servlet_url: /grafana/*
target_url: http://grafana_url/grafana
添加代理Servlet：
/**
* 代理Grafana 用做管理面板
*/
public class GrafanaProxyServlet extends ProxyServlet {
@Override
protected HttpResponse doExecute(HttpServletRequest servletRequest, HttpServletResponse servletResponse,
HttpRequest proxyRequest) throws IOException {
String currentUser = SecurityUtils.getCurrentUserLogin().orElse(null);
if(currentUser == null){
return null;
}
// 設置用戶
proxyRequest.setHeader("Auth", currentUser);
return super.doExecute(servletRequest, servletResponse, proxyRequest);
}
}
注冊servlet：
@Configuration
public class ProxyServletConfiguration {
/**
* 讀取配置文件中路由設置
*/
@Value("${proxy.grafana.servlet_url}")
private String servlet_url;
/**
* 讀取配置中代理目標地址
*/
@Value("${proxy.grafana.target_url}")
private String target_url;
@Bean
public ServletRegistrationBean proxyServletRegistration() {
ServletRegistrationBean registrationBean = new ServletRegistrationBean(new GrafanaProxyServlet(), servlet_url);
//設置網址以及參數
Map<String, String> params = ImmutableMap.of("targetUri", target_url, "log", "true");
registrationBean.setInitParameters(params);
return registrationBean;
}
}
前端配置
新增一個vue頁面，iframe地址填寫后端代理過的grafana面板。
<template>
<div class="grafana">
<iframe
:src="url"
width="100%"
height="1000px"
frameborder="0"></iframe>
</div>
</template>
<script>
export default {
data() {
return {
url: '/grafana/d/FN0S0R47z/qian-duan-ri-zhi-mai-dian?orgId=1&kiosk&from=now-6h&to=now'
}
}
}
</script>
debug的時候，可以配置webpack的proxy：
'/grafana': {
target: 'http://172.31.161.36:13000',
changeOrigin: true,
headers: {
'Auth': 'viewer'
},
pathRewrite: {
}
},
headers 添加Auth認證頭。
集成效果：
