Kibana:Drilldown 中的 URL 模板

警告:此功能处于 beta 版本,可能会更改。 该设计和代码不如正式的 GA 功能成熟,并且按原样提供,不提供任何担保。 Beta 功能不受官方 GA 功能的支持 SLA 约束。此功能在 7.11 及以上版本提供。

URL 模板 输入使用 Handlebars(一种简单的模板语言)。handlebars 模板看起来像带有嵌入的 handlebars 表达式的常规文本。

https://github.com/elastic/kibana/issues?q={{event.value}}

在上面,我们可以在 {{ }} 加入空格以使得更易阅读。 Handlebars 表达式是 {{,有些内容后跟 }}。 当执行向下钻取时,这些表达式将被仪表板和交互上下文中的值替换。

URL 模板包含如下的三个部分:

  • Handlebars
  • Variables
  • Helpers

在今天的练习中,我来展示如何使用上面的一些 variables 及 helpers 来完成在 Kibana dashboard 中的 drilldown。在今天的练习中,我将使用 Elasticsearch 7.11 来进行展示。

 

准备数据

我们可以从 github 下载已经准备好的数据:

git clone https://github.com/liu-xiao-guo/kibana-drilldown-dataset

 在上面的仓库中,有一个叫做 ratings_small.csv 的文件。这个数据是电影院 imdb 的真实数据。如果你感兴趣的话,你可以到 kaggle.com 去下载。它的文件格式如下:

rating_small.csv

userId,movieId,rating,timestamp
1,31,2.5,1260759144
1,1029,3.0,1260759179
1,1061,3.0,1260759182
1,1129,2.0,1260759185

我们可以通过如下的方式来把数据导入到 Elasticsearch 中。

 

我们选择刚才已经下载的 ratings_small.csv 文件。

请注意在上面,我们需要修改 timestamp 的 type 为 date。我们点击 Import 按钮。我们接下来为 movies 索引创建一个 index pattern:

我们选择 timestamp 为 Time field。点击上面的 Create index pattern。这样我们就创建好了 movies index pattern。我们可以在 Discover 中看到导入的数据:

从上面的数据中,我们可以看到是从1970年1月11日到1970年1月18日之间的数据。

 

创建 Dashboard

依据上面的数据,我们来创建两个可视化化:

保存上面的可视化为 movies per day。如法炮制,我们创建了另外一个如下的可视化:

X 轴上是 movieid,在 Y 轴上显示的是 数量。

我们把上面的两个可视化放到我们的 movies Dashboard 中去:

 

这样我们就创建好了 Dashboard。

 

创建 range selection drilldown

在上面的第一个可视化中,我们想针对可视化的时间范围来进行 drilldown,也就是说我们想针对 imdb 在可视化显示的时间段里进行搜索。我们可以通过如下的方法来进行操作。

我们把如下的 URL template 放入进去:

https://www.imdb.com/search/title/?release_date={{date event.from "YYYY-MM-DD"}},{{date event.to "YYYY-MM-DD"}}

上面,我们使用 event.from 以及 event.to 拿到时间范围,并同时使用 date helper 来进行格式的转换。点击 Create drilldown 按钮:

保存当前的 Dashboard。当我们点击可视化的空白部分时,我们可以看到一个菜单:

点击 IMDB Movie Search:

从上面我们可以看到在 IMDB 的页面上能找到相应的查询结果。在地址栏中,我们可以看到显示的时间范围。

 

针对 X 轴或 Y 轴的查询

在很多的情况下,我们可能想要对 X 轴的内容进行 drilldown,那么我们该如何来实现呢?我们针对 Movies totals 可视化来创建一个 drilldown:

在上面的 URL template 中,我们输入如下的内容:

https://imdb.com/find?q={{event.points.[0].value}}

也许这个并不是很好的一个例子,但是这里的重点是 event.points.[0].value 拿到的是 X 轴上的值,而 Y 轴上的值是 event.points.[1].value。点击 Create drilldown,并保存当前的 Dashboard:

我们可以看到在上面的 q=356,这里的 356 来做当期点击点的 X 轴上的值。

 

Helper 例子

在上面的例子中,我们已经展示了如何使用 date helper 来格式化时间。在接下来的例子中,我将来展示另外几个具体的例子来展示 helper 的用法。我们首先使用创建一个 player 索引:

POST players/_bulk
{ "index" : { "_id" : "1" } }
{ "Player" : "Lebron James", "Team": "Cavaliers", "Season": "2005", "PlayerID": "2544", "AveragePTS": 30.792 }
{ "index" : { "_id" : "2" } }
{ "Player" : "Kobe Bryant", "Team": "Lakers", "Season": "2005", "PlayerID": "977", "AveragePTS": 33.737 }

我们接下来需要为这个索引创建一个索引模式,并创建一个 table 可视化。如果你还不知道如何做这个可视化的化,请参阅之前的文章 “Kibana:为 table 创建链接 drilldown - 7.11 版本”。

我们可以使用 Lens 来创建一个如上所示的 table。我们把这个 table 放进一个 Dashboard 之中去:

现在我们来创建一些 drilldown。

在上面,我们在 URL template 中填入:

http://www.nba.com/{{lowercase event.value}}

在上面,我们使用 lowercase 把点击的值变为小写,以传入 NBA 的网页中进行查询。点击 Create drilldown:

上面显示 Drilldown 已经被创建完成。保存当前的 Dashboard:

接下来,我们来查看每个运动员的情况。我们为这个 table 创建一个 table row click 的 drilldown:

在上面,我们在 URL templagte 中输入:

http://www.nba.com/player/{{ event.values.[3] }}/{{lowercase (replace event.values.[0] " " "-")}}

在上面,我们使用 replace 把名字中的空格用 - 符号来代替,之后,再使用 lowercase 把字母变成小写的。点击上面的 Create drilldown,并保存当前的 Dashboard:

从上面,我们可以看到这个运动员的信息。

已标记关键词 清除标记
相关推荐