@ijin

[Michael H. Oshita]

AWS GameDay Japan 2016を開催してきた

過去に何回も参加・開催両方を経験した事があるAWS GameDayに、またしても運営側として関わりました。

お題は基本的に去年のre:Inventでやったのを若干チューニングしたやつ。 詳細は今後また別のところで開催される可能性があるので、その時の参加者の為に伏せておきます。

当日

競技中はそれぞれのチームのスコアがリアルタイムで見れるダッシュボードがあって白熱した様子が伝わってました。

これはこれで楽しいんですが、何かが足りない感じ。。。






そう、グラフです！!






参加チームの白熱したバトル（順位の入れ替え等）を時系列で表示し、戦いの軌跡をビジュアライズするアレです。ISUCONでもよく見慣れたあの遷移するグラフがなかったのです！

開始してから気づきました。。

なので作りました

Graphing premiere

ダッシュボードの作りを見てみると jQuery と React.js を使っている模様。ならば、どこかでendpointを叩いてjsonを取得しているはずなので、いろいろ探したところ、それらしいのがありました。

1
2
3
4
5
6
7
8
9
10
11
12
13

  getScores: function() {
    $.ajax({
      url: 'https://xxxxxxxxx.execute-api.us-west-2.amazonaws.com/prod/scores',
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error("scores", status, err.toString());
      }.bind(this)
    });
  },

こうなれば話は簡単で後は返却されるjsonを解析して、定期的にcallしてplotしていけば良いだけです。

データ送信

グラフを描画するサーバを用意するのはしんどいので、カスタムメトリックスが作成できる監視サービスを使いました。 最初はMackerelをと思ったけど、独自グラフを一般公開する設定がなさそうだったのでDatadogを採用。

Datadogでカスタムメトリックスを送るにはAPIを直接叩くよりは、StatsD経由で送信した方が楽なのでrubyでサクっと適当に記述。

gameday.rb
1
2
3
4
5
6

statsd.batch do |s|
  s.gauge('gameday2016', scores[0]['Profit']*100, :tags => ["team:" + scores[0]['Team']])
  s.gauge('gameday2016', scores[1]['Profit']*100, :tags => ["team:" + scores[1]['Team']])
  s.gauge('gameday2016', scores[2]['Profit']*100, :tags => ["team:" + scores[2]['Team']])
  # etc
end

グラフ描画

公開ダッシュボードを作成するには TimeBoard ではなく ScreenBoard を選択し、後は必要そうなグラフを追加していくだけ。

グラフ自体はGUIで作っても良いし、jsonで記述可能なので結構柔軟で素敵です。

profits.json
1
2
3
4
5
6
7
8
9
10
11

{
  "viz": "timeseries",
  "requests": [
    {
      "q": "avg:gameday2016{*} by {team}",
      "aggregator": "avg",
      "conditional_formats": [],
      "type": "line"
    }
  ]
}
ranking.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

{
  "viz": "toplist",
  "requests": [
    {
      "q": "top(avg:gameday2016{*} by {team}, 20, 'last', 'desc')",
      "style": {
        "palette": "dog_classic"
      },
      "conditional_formats": [
        {
          "palette": "white_on_green",
          "comparator": ">=",
          "value": 0
        },
        {
          "palette": "white_on_red",
          "comparator": "<",
          "value": 0
        }
      ]
    }
  ]
}

できあがったグラフはこんな感じ。 高負荷発生等のイベント時の対応との比較もできて見やすいと思います。

これで各チームのポジション等を伝えやすくなりました。

というわけで優勝したチーム初老丸、おめでとうございます！

終わりに

今回は競技の途中から実装しちゃったので次回は最初から用意しておきたいと思います。

（※）実は去年のISUCONの時も似たような事をやってましたね。。

Comments