MetricbeatでElasticsearchに貯めたCPU使用率をKibanaを使わずにJavaScriptで可視化する

正月休みに勉強しようと思って、Elasticsearch実践ガイドを買いました。
Amazonで買ったけど、インプレスで電子書籍版が半額(期間限定のようです)
初心者の私にはちょうどいい入門書でした！

前からやりたかった、Kibanaを使わずにKibanaっぽいグラフを作ることができました～！

環境構築

OS: Ubuntu 18.04.1 (on VirtualBox)
ホスト名：ubuntu.local

インストール

https://www.elastic.co/guide/en/elasticsearch/reference/current/deb.html
https://www.elastic.co/guide/en/kibana/current/deb.html
https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation.html
を参考に。

Open JDKのインストール

sudo apt update
sudo apt install openjdk-8-jre-headless

PGPキーのインストール

wget -qO - https://artifacts.elastic.co/GPG-KEY-elasticsearch | sudo apt-key add -

APT repositoryのインストール

sudo apt install apt-transport-https

sources listの追加

OSS版をインストールしたかったのでこちら

echo "deb https://artifacts.elastic.co/packages/oss-6.x/apt stable main" | sudo tee -a /etc/apt/sources.list.d/elastic-6.x.list

Elasticsearch/Kibana/Metricbeatのインストール

sudo apt update
sudo apt install elasticsearch-oss kibana-oss metricbeat-oss

設定ファイルの編集

Elasticsearchの設定

/etc/elasticsearch/elasticsearch.yml

# localhost以外からのアクセスを許可する
network.host: 0.0.0.0
http.port: 9200
transport.host: localhost
transport.tcp.port: 9300

# JavaScriptからのCORSアクセスを許可する
http.cors.enabled: true
http.cors.allow-origin: "*"

Kibanaの設定

/etc/kibana/kibana.yml

# localhost以外からのアクセスを許可する
server.host: "0.0.0.0"

ElasticsearchとKibanaのサービス有効化・開始

sudo systemctl enable elasticsearch.service
sudo systemctl enable kibana.service

sudo systemctl start elasticsearch.service
sudo systemctl start kibana.service

接続確認1

http://ubuntu.local:9200にアクセス
レスポンスがかえって来たら成功。

{
  "name" : "fXjgLKE",
  "cluster_name" : "elasticsearch",
  "cluster_uuid" : "WGnyRmUuSZemH70_ABZ3pg",
  "version" : {
    "number" : "6.5.4",
    "build_flavor" : "oss",
    "build_type" : "deb",
    "build_hash" : "d2ef93d",
    "build_date" : "2018-12-17T21:17:40.758843Z",
    "build_snapshot" : false,
    "lucene_version" : "7.5.0",
    "minimum_wire_compatibility_version" : "5.6.0",
    "minimum_index_compatibility_version" : "5.0.0"
  },
  "tagline" : "You Know, for Search"
}

Kibanahttp://ubuntu.local:5601にアクセス。Kibanaの画面が表示されたら成功。

Metricbeatの設定

Kibanaにダッシュボードを追加

metricbeat setup --dashboards

Metricbeatのサービス有効化・開始

sudo systemctl enable metricbeat.service

sudo systemctl start metricbeat.service

接続確認2

Metricbeatのデータが上手くElasticsearchに入れば、Kibanaでこんな画面が見れます

JavaScriptで可視化

Google Charts ( https://developers.google.com/chart/?hl=ja ) でグラフ化します。

ElasticsearchのREST APIで検索します。Aggregationでいい感じに平均値を取得します。

POST http://ubuntu.local:9200/metricbeat-*/_search

リクエスト

{
  "size": 0,
  "query": {
    "bool": {
      "filter": {
        "range": {
          "@timestamp": {
            "gte": "now-7d"
          }
        }
      },
      "must": [{
        "match": {
          "metricset.name": "cpu"
        }
      }, {
        "match": {
          "beat.hostname": "ubuntu"
        }
      }]
    }
  },
  "aggs": {
    "date_histogram": {
      "date_histogram": {
        "field": "@timestamp",
        "interval": "10m"
      },
      "aggs": {
        "system_cpu_total_pct": {
          "avg": {
            "field": "system.cpu.total.pct"
          }
        }
      }
    }
  }
}

レスポンス

{
  "took" : 16,
  "timed_out" : false,
  "_shards" : {
    "total" : 4,
    "successful" : 4,
    "skipped" : 0,
    "failed" : 0
  },
  "hits" : {
    "total" : 9239,
    "max_score" : 0.0,
    "hits" : [ ]
  },
  "aggregations" : {
    "date_histogram" : {
      "buckets" : [
        {
          "key_as_string" : "2019-01-01T14:50:00.000Z",
          "key" : 1546354200000,
          "doc_count" : 59,
          "system_cpu_total_pct" : {
            "value" : 1.2820169491525424
          }
        },
        {
          "key_as_string" : "2019-01-01T15:00:00.000Z",
          "key" : 1546354800000,
          "doc_count" : 60,
          "system_cpu_total_pct" : {
            "value" : 0.7167333333333333
          }
        },
        {
          "key_as_string" : "2019-01-01T15:10:00.000Z",
          "key" : 1546355400000,
          "doc_count" : 60,
          "system_cpu_total_pct" : {
            "value" : 0.6058666666666668
          }
        },
        {
          "key_as_string" : "2019-01-01T15:20:00.000Z",
          "key" : 1546356000000,
          "doc_count" : 60,
          "system_cpu_total_pct" : {
            "value" : 0.5145166666666667
          }
        },
        {
          "key_as_string" : "2019-01-01T15:30:00.000Z",
          "key" : 1546356600000,
          "doc_count" : 60,
          "system_cpu_total_pct" : {
            "value" : 0.5042166666666666
          }
        },
        {
          "key_as_string" : "2019-01-03T02:10:00.000Z",
          "key" : 1546481400000,
          "doc_count" : 60,
          "system_cpu_total_pct" : {
            "value" : 0.09896666666666668
          }
        },
        {
          "key_as_string" : "2019-01-03T02:20:00.000Z",
          "key" : 1546482000000,
          "doc_count" : 60,
          "system_cpu_total_pct" : {
            "value" : 0.10701666666666668
          }
        },
        {
          "key_as_string" : "2019-01-03T02:30:00.000Z",
          "key" : 1546482600000,
          "doc_count" : 60,
          "system_cpu_total_pct" : {
            "value" : 0.09681666666666668
          }
        },
        {
          "key_as_string" : "2019-01-03T02:40:00.000Z",
          "key" : 1546483200000,
          "doc_count" : 60,
          "system_cpu_total_pct" : {
            "value" : 0.13956666666666667
          }
        },
        {
          "key_as_string" : "2019-01-03T02:50:00.000Z",
          "key" : 1546483800000,
          "doc_count" : 27,
          "system_cpu_total_pct" : {
            "value" : 0.09644444444444444
          }
        }
      ]
    }
  }
}

このJSONをいい感じに変換して、Google Chartsで折れ線グラフにしてみます。

できました。

ソースはこんな感じで

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript" src="app.js"></script>

</head>
<body>
  <div id="chart" style="width: 900px; height: 500px"></div>
</body>
</html>

app.js

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var url = 'http://ubuntu.local:9200/metricbeat-*/_search'
  var data = {
    "size": 0,
    "query": {
      "bool": {
        "filter": {
          "range": {
            "@timestamp": {
              "gte": "now-7d"
            }
          }
        },
        "must": [{
          "match": {
            "metricset.name": "cpu"
          }
        }, {
          "match": {
            "beat.hostname": "ubuntu"
          }
        }]
      }
    },
    "aggs": {
      "date_histogram": {
        "date_histogram": {
          "field": "@timestamp",
          "interval": "10m"
        },
        "aggs": {
          "system_cpu_total_pct": {
            "avg": {
              "field": "system.cpu.total.pct"
            }
          }
        }
      }
    }
  }

  fetch(url, {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(function (response) {
    return response.json()
  }).then(function (response) {
    var data = []
    data.push(['日付', 'CPU使用率'])

    for (const date_histogram of response.aggregations.date_histogram.buckets) {
      var key = date_histogram.key
      var value = date_histogram.system_cpu_total_pct.value
      data.push([new Date(key), value * 100])
    }
    return data
  }).then(function (response) {
    var data = google.visualization.arrayToDataTable(response)

    var options = {
      title: 'CPU使用率',
      hAxis: {
        format: 'M/d H:mm'
      },
      legend: {
        position: 'bottom'
      }
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart'));

    chart.draw(data, options);
  })
}

参考サイト

初心者のためのRest APIから覚えるElasticsearch
https://qiita.com/_bsoo/items/d880831e644175782ee0

elasticsearchでlocalhost以外からのアクセスを許可する方法
https://qiita.com/fuku2014/items/c2e2ffc07da5e2d2ba05