Kibanaで円グラフ(Pie Chart)を作って可視化する #elasticsearch

リソースの可視化、ログデータの投入と来たら次はログデータ自身の可視化ですね。

Kibanaでは様々なグラフや表が用意されており、
それらを組み合わせることで目的に合わせたダッシュボードを作ることができます。

今回は、ログ内のUser Agent情報から、デバイス・OS・ブラウザの割合を円グラフ(Pie Chart)を使って可視化してみたいと思います。

User Agentは以下のサイトを参考にさせていただきました。
歌うキツネ : User-Agent (ユーザー エージェント) 一覧

こんな感じのログを適当に作成

2017-03-02_23-11-00.123,hostap1,Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393
2017-03-02_23-12-00.123,hostap1,Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko

Logstashの設定ファイルはこんな感じ。

input{
    file{
      path => "C:\dev\ua.txt"
      start_position => "beginning"
    }
}

filter{
     csv{
       columns => ["processingDate","hostName","userAgent"]
       separator => ","
     }
     date{
       match => ["processingDate" , "yyyy-MM-dd_HH-mm-ss.SSS"]
       timezone => "Asia/Tokyo"
     }
     useragent{
       source => "message"
       prefix => "ua."
       
     }
     mutate{
       remove_field => ["host","userAgent"]
     }
}
output{
    elasticsearch{
       hosts => ["<Elasticsearchが動作しているサーバのIPアドレス>"]
       index => "useragent-%{+YYYYMMdd}"
    }
}               

filter-useragent

今回の肝。
指定されたソースからUserAgentの書式を見つけて、
いい感じに各項目にパースしてくれるフィルターです。
prefixで接頭語を指定できます。この場合"ua."で始まる項目がuseragentフィルターで作成された項目ということになります。

mutate-remove_field

出力項目から指定された項目を除外するフィルターです。
userAgent項目はパースされており、2重になるので省いています。

Kibanaで可視化

さて、Kibanaで可視化してみましょう。

Index Patternsの追加

Kibanaのメニューの一番下にある「Management」をクリックし、
表示された項目の「Index Patterns」をクリックします。

そして「+Add New」ボタンをクリック。

Index name or patternに今回設定ファイルで設定した”useragent-YYYYMMdd”が対象になるように
「useragent-*」を入力し、「Create」ボタンをクリック。

Discoverでの表示

Kibana画面右上の時計マークをクリックして、対象のログの時間に合わせます。

Kibanaのメニュー「Discover」をクリックし、
左上に表示されているindexパターンの「▼」を押して「useragent-*」を指定します。
するとまあなんということでしょう。
ログデータが表示されますね。

円グラフ(Pie chart)の作成

さて遂に本題の可視化です。
今回はどんなOSが使われているのか、
そしてそのOSからどのようなブラウザを使用していて、
ブラウザのバージョンはいくつなのかといったことを可視化していきたいと思います。

Visualizeの作成

Kibanaメニューの「Visualize」をクリックし、
表示された中から「Pie chart」をクリックします。

index選択で今回追加した「useragent-*」を選択します。

OSの分布を可視化する

Split Slices選択して以下のように入力します。

• Aggregation : Terms
• Field : ua.os.keyword
• Order By : metric:Count

こんな感じにOS毎の円グラフが作成されます！

円グラフの分割しブラウザの使用状況を可視化する

OS分布を可視化したら次はOS毎の使用ブラウザを可視化します！

「Add Sub buckets」から再度「Split Slices」を選択し以下のように入力します。

• Aggregation : Terms
• Field : ua.name.keyword
• Order By : metric:Count

Windows10でChrome使ってる人、IE使ってる人などが可視化されました！！

ブラウザのバージョンを可視化する

最後にブラウザのバージョンを可視化しましょう。
サポート外のブラウザ使ってアクセスしてる人、
サポート外したいのに、まだ使ってる人が多いブラウザなどが可視化出来ますね。

「Add Sub buckets」から再度「Split Slices」を選択し以下のように入力します。

• Aggregation : Terms
• Field : ua.major.keyword
• Order By : metric:Count

まだIE8を使ってる人がいる、ということを可視化出来ました！

作ったグラフは画面右上の「Save」ボタンから保存することができます。