对接Grafana_可视化开发_开发指南

本文主要通过Grafana示例演示如何将日志服务采集的Nginx日志进行实时可视化分析。

前提条件

已采集Nginx日志数据。详情请参见Nginx模式。
已开启并配置索引，详情请参见采集并分析Nginx访问日志。

流程架构

日志从收集到分析的流程架构如下。

操作步骤

安装Grafana。详情请参见Grafana官方文档。

以安装Ubuntu为例，需执行以下安装命令。

wget https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana_4.5.2_amd64.deb
sudo apt-get install -y adduser libfontconfig
sudo dpkg -i grafana_4.5.2_amd64.deb

若您需要使用饼状图，则需执行以下命令安装Pie chart插件。

grafana-cli plugins install grafana-piechart-panel

安装日志服务插件。
请确认Grafana的插件目录位置。在Ubuntu的插件目录/var/lib/grafana/plugins/安装插件，重启grafana-server。
以Ubuntu系统为例，执行以下命令安装插件，并重启grafana-server。
```
cd /var/lib/grafana/plugins/
git clone https://github.com/aliyun/aliyun-log-grafana-datasource-plugin
service grafana-server restart
```

配置日志服务数据源。

说明若您是在本机部署，默认是安装在3000端口。请提前在浏览器打开3000端口。

登录Grafana。
在左侧菜单栏，单击 > Data Sources。

在Data Sources页签，单击Add data source，选中LogService，单击Select，请参考如下说明配置数据源。


配置项	说明
Name	Name表示名称，请自定义一个数据源的名称。
HTTP	URL示例：`http://dashboard-demo.cn-hangzhou.log.aliyuncs.com`。`dashboard-demo`是project名称，`cn-hangzhou.log.aliyuncs.com`是project所在地域的Endpoint，在配置自己的数据源时，需要替换成自己的project和region地址，请参见服务入口。 Access可以选择Server，也可以选择Browser。 Whitelisted：添加访问白名单。
Auth	采用默认配置。
log service details	日志服务详细配置，分别填写Project和Logstore，以及具备读取权限的AccessKey。AccessKey可以是主账号的AccessKey，也可以是子帐号的AccessKey。

单击Save & Test。

添加Dashboard。

在左侧导航栏，选中 > Dashboards，添加一个Dashboard。

配置模板变量。

在Grafana中可以配置模板变量，在同一个视图中，通过选择不同的变量值，展示不同的视图。本文档主要配置每个时间区间的大小，以及不同域名的访问情况。

在New dashboard页面右上角，通过下拉框选择配置一个时间区间，单击页面右上角的 > Variables > Add variable，进入配置页面。

变量的名称是您在配置中使用的变量，在这里起名为myinterval，在查询条件中，要写成$myinterval，参考以下样例进行配置，并单击Add。


配置项	说明
Name	变量名称，您可以命名为myinterval。
Type	选择interval。
Lable	输入time interval。
Internal Options	value输入`1m,10m,30m,1h,6h,12h,1d,7d,14d,30d`。选中Auto Option。

配置一个域名模板。

通常一个VPS上可以挂载多个域名，则需要查看不同域名的访问情况。

在Variable页面，单击New，参考以下说明配置域名模板。


配置项	说明
Name	变量名称，您可以命名为hostname。
Type	选中Custom。
Lable	输入域名。
Custom Options	Values separated by输入`*,www.host.com,www.host0.com,www.host1.com`。表示可以查看所有域名的访问情况，也可以分别查看`www.host.com`、`www.host0.com`或`www.host1.com`的访问情况。
Selection Options	配置为默认值。

在左侧菜单栏，单击Save保存配置完成的模板。

视图配置示例。

配置PV & UV

单击右上角。
在New Panel页面，单击Add Query。
单击，在Visualization下拉列表选中Graph，创建一个Graph视图。
单击，在Title文本框输入UV & PV。

单击

，在Query下拉列表选中logservice，配置项请参见如下说明。 grafana-pv&uv01


配置项	说明
Query	`$hostname\| select approx_distinct(remote_addr) as uv ,count(1) as pv , __time__ - __time__ % $$myinterval as time group by time order by time limit 1000` 上述Query中的$hostname，在实际展示时，会替换成用户选择的域名。$$myinterval，则会替换成时间区间，注意myinterval前有两个$符号，而hostname有一个。
X-Column	time
Y-Column	uv,pv

若UV和PV的值相差较大，可通过调整为双Y轴图表展示。单击图表下方的图示线条（如下图①），单击Y-Axis（如下图②），打开use right y-axis开关（如下图③）。 grafana-pv&uv02

配置出入网带宽

添加出入网带宽的视图，创建步骤请参见配置PV & UV。

主要配置项如下：


配置项	说明
Query	`$hostname \| select sum(body_byte_sent) as net_out, sum(request_length) as net_in,__time__ - __time__ % $$myinterval as time group by __time__ - __time__ % $$myinterval limit 10000`
X-Column	Time
Y-Column	net_in,net_out

不同HTTP方法的占比

添加不同HTTP方法的占比的视图，创建步骤请参见配置PV & UV。

单击

，在Visualization下拉列表选中Pie Chart，创建一个饼图。主要配置项如下：


配置项	说明
Query	`$hostname \| select count(1) as pv ,method group by method`
X-Column	pie
Y-Column	method,pv

不同HTTP状态码占比

添加不同HTTP状态码占比的视图，创建步骤请参见配置PV & UV。

单击

，Visualization选中Pie Chart，创建一个饼图。主要配置项如下：


配置项	说明
Query	`$hostname \| select count(1) as pv ,status group by status`
X-Column	pie
Y-Column	status,pv

热门来源页面

添加热门来源页面的视图，创建步骤请参见配置PV & UV。

单击

，在Visualization下拉列表选中Pie Chart，创建一个饼图。主要配置项如下：


配置项	说明
Query	`$hostname \| select count(1) as pv , referer group by referer order by pv desc`
X-Column	pie
Y-Column	referer,pv

延时最高页面

添加延时最高页面的视图，创建步骤请参见配置PV & UV。

单击

，在Visualization下拉列表选中Table，创建一个表格，展示URL和对应的延时。主要配置项如下：


配置项	说明
Query	`$hostname \| select URL as top_latency_URL ,request_time order by request_time desc limit 10`
X-Column	X-Column不填写内容
Y-Column	top_latency_url,request_time

热门页面

添加热门页面的视图，创建步骤请参见配置PV & UV。

单击

，在Visualization下拉列表选中Table，创建一个表格。主要配置项如下：


配置项	说明
Query	`$hostname \| select count(1) as pv, split_part(URL,'?',1) as path group by split_part(URL,'?',1) order by pv desc limit 20`
X-Column	X-Column不填写内容
Y-Column	path,pv

非200请求top页面

添加非200请求top页面的视图，创建步骤请参见配置PV & UV。

单击

，在Visualization下拉列表选中Table，创建一个表格。主要配置项如下：


配置项	说明
Query	`$hostname not status:200\| select count(1) as pv , url group by url order by pv desc`
X-Column	X-Column不填写内容
Y-Column	url,pv

前后端平均延时

添加前后端平均延时的视图，创建步骤请参见配置PV & UV。

主要配置如下：

配置项说明

Query

配置项	说明
Query	`$hostname \| select avg(request_time) as response_time, avg(upstream_response_time) as upstream_response_time ,__time__ - __time__ % $$myinterval as time group by __time__ - __time__ % $$myinterval limit 10000`
X-Column	time
Y-Column	upstream_response_time,response_time

$hostname | select avg(request_time) as response_time, avg(upstream_response_time) as upstream_response_time ,__time__ - __time__ % $$myinterval as time group by __time__ -  __time__ % $$myinterval limit 10000

X-Column time

Y-Column upstream_response_time,response_time

客户端统计

添加客户端统计的视图，创建步骤请参见配置PV & UV。

单击

，在Visualization下拉列表选中Pie Chart，创建一个饼图。主要配置项如下：

配置项说明

Query

配置项	说明
Query	`$hostname \| select count(1) as pv, case when regexp_like(http_user_agent , 'okhttp') then 'okhttp' when regexp_like(http_user_agent , 'iPhone') then 'iPhone' when regexp_like(http_user_agent , 'Android') then 'Android' else 'unKnown' end as http_user_agent group by http_user_agent order by pv desc limit 10`
X-Column	pie
Y-Column	http_user_agent,pv

$hostname  | select count(1) as pv, case when  regexp_like(http_user_agent , 'okhttp') then 'okhttp' when  regexp_like(http_user_agent ,  'iPhone') then 'iPhone' when regexp_like(http_user_agent ,  'Android')  then 'Android' else 'unKnown' end as http_user_agent group by  http_user_agent order by pv desc limit 10

X-Column pie

Y-Column http_user_agent,pv

设置Logs
添加Logs视图，创建步骤请参见配置PV & UV。

单击，在Visualization下拉列表选中Logs，创建一个Logs。配置页面输入Logs Per Page即完成。

说明每页最多展示100条，即Logs Per Page最大值为100。

设置流图

添加流图，创建步骤请参见配置PV & UV。

主要配置项如下：

配置项说明

Query

配置项	说明
Query	`$hostname \| select to_unixtime(time) as time,status,count from (select time_series(__time__, '1m', '%Y-%m-%d %H:%i', '0') as time,status,count(*) as count from log group by status,time order by time limit 10000)`
X-Column	配置为时间列。
Y-Column	col1#:#col2，其中col1为聚合列，col2为其他列。

$hostname  | select to_unixtime(time) as time,status,count from (select time_series(__time__, '1m', '%Y-%m-%d %H:%i', '0')  as time,status,count(*) as count from log group by status,time order by time limit 10000)

X-Column 配置为时间列。

Y-Column col1#:#col2，其中col1为聚合列，col2为其他列。

设置地图

添加流图，创建步骤请参见配置PV & UV。

单击

，在Visualization下拉列表选中Wordmap Panel，创建一个地图。Queries主要配置项如下：


配置项	说明
Query	`$hostname \| select count(1) as pv ,geohash(ip_to_geo(arbitrary(remote_addr))) as geo,ip_to_country(remote_addr) as country from log group by country having geo <>'' limit 1000`
X-Column	map
Y-Column	country,geo,pv

Visualization主要配置项如下，其他配置为默认值。


配置项	说明
Location Data	geohash
Location Name Field	country
geo_point/geohash Field	geo
Metric Field	pv

单击右上角，保存Dashboard。

查看结果。

打开Dashboard首页查看效果。示例请参见Demo。

您可以在Dashboard页面上方选择统计的时间范围，也可以选择统计的时间粒度或不同的域名。整个Nginx访问统计的Dashboard完成，您可以从视图中挖掘有价值的信息。