Munin 2.0にLazy Load Plugin for jQueryを組み込むと快適になる話

はい、おつカレー様です。
くわのです。

Muninという監視ソフトウェアがございます。
こちら、とても使い勝手のいい、ソフトウェアでございまして、プラグインも作りやすいし便利なものなんですが、良くないのが、「1.4だと性的静的なグラフ画像生成のコストがエラい高い」「2.0だとグラフ画像生成は動的にできるけど、画面表示時にガッツリ変換するのでめちゃくちゃ遅い」っていう問題があります。

今回その辺の問題を軽減するためにLazy Load Plugin for jQueryを組み込んでみました。

Muninについて詳しく知りたい方は@zembutsu さんのSlideShareを見ていただけるとありがたいです。

Muninではじめる実践★リソース監視　-俺のサーバがこんなに重いはずがない、を乗り切るために- from Masahito Zembutsu

あと、Software Design1月号も詳しい記事があります。（こちらも@zembutsu さんの記事になります）

Software Design (ソフトウェア デザイン) 2012年 11月号 [雑誌]

というか、Muninの情報が知りたかったら@zembutsu さんをウォッチしていればよろしいｗｗｗ

Lazy Load Plugin for jQueryとは

基本的に、ブラウザでWebページが読まれた時に、そこの表示される画像はすべて読み込まれます。
ただ、Munin2.0でそれをやると、前述のとおり変換が一度に走って重くなります。
そのため、画面の表示されている範囲のみの画像だけを読み込む、というのがLazy Load Plugin for jQueryです。
詳しくは公式ページをどうぞ。

組み込み手順

まずjQuery & Lazy Load Plugin for jQueryの設置

cd /opt/munin/www/docs/static
wget http://www.appelsiini.net/projects/lazyload/jquery.lazyload.js
wget http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
# 適当にdot.png作っておいとく
# wget http://example.com/dot.png

Muninのテンプレートファイルの更新

ヘッダのテンプレートファイルのバックアップ、更新

cp /etc/munin/templates/partial/head.tmpl{,.org}
vim /etc/munin/templates/partial/head.tmpl

更新内容

# diff head.tmpl.org head.tmpl
20a21,31
> <script src="<TMPL_VAR NAME="R_PATH">/static/jquery.min.js" type="text/javascript" charset="utf-8"></script>
> <script src="<TMPL_VAR NAME="R_PATH">/static/jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
> <script type="text/javascript" charset="utf-8">
>     $(function() {
>         $("img").lazyload({
>            effect      : "fadeIn"
>         });
>     });
> </script>
>
>

日時グラフ一覧画面のテンプレートファイルのバックアップ、更新

cp /etc/munin/templates/munin-comparison-day.tmpl{,.org}
vim /etc/munin/templates/munin-comparison-day.tmpl

更新内容

# diff munin-comparison-day.tmpl.org munin-comparison-day.tmpl
25c25
<                               <img src="<TMPL_VAR NAME="CIMGDAY">" alt="<TMPL_VAR ESCAPE="HTML" NAME="LABEL">"
---
>                               <img data-original="<TMPL_VAR NAME="CIMGDAY">" src="/munin2/static/dot.png" alt="<TMPL_VAR ESCAPE="HTML" NAME="LABEL">"

• munin-comparison-week.tmpl
• munin-comparison-month.tmpl
• munin-comparison-year.tmpl

にも同様に変更を行う。
これで完了。暫く待つか、su - munin --shell=/usr/bin/munin-cronで更新されるはずです。

効果

Lazy Load Plugin for jQueryがあるものと、ないもので比べて、Dayでの一括表示時の負荷が実行プロセス数、USRの値など下がっているのがわかります。

Lazy Loadなし時のvmstat

procs -----------memory---------- ---swap-- -----io---- --system-- -----cpu-----
 r  b   swpd   free   buff  cache   si   so    bi    bo   in   cs us sy id wa st
11  0      0 26233984 182796 4588292    0    0     0    24 4253  567 91  9  0  0  0
16  0      0 26014516 182796 4588260    0    0     0    36 4210  868 92  8  0  0  0
16  0      0 25887604 182796 4588308    0    0     0   884 4217 1073 92  8  0  0  0
22  0      0 25894436 182796 4588336    0    0     0    68 4246 1109 92  8  0  0  0
22  0      0 25707196 182796 4588380    0    0     0  2140 4267 1215 92  8  0  0  0
22  0      0 25682580 182796 4588360    0    0     0    24 4151 1238 92  9  0  0  0
22  0      0 25734408 182796 4588372    0    0     0    24 4231 1235 92  8  0  0  0
22  0      0 25916616 182796 4588392    0    0     0   704 4214 1298 92  8  0  0  0
20  0      0 25757972 182796 4588396    0    0     0    24 4096 1157 91  9  0  0  0
21  0      0 25835520 182796 4588412    0    0     0   616 4267 1299 91  9  0  0  0
22  0      0 25787280 182796 4588408    0    0     0    24 4152 1229 92  8  0  0  0
22  0      0 25688576 182796 4588440    0    0     0    12 4158 1209 91  9  0  0  0
22  0      0 25703704 182796 4588464    0    0     0   620 4269 1324 91 10  0  0  0
22  0      0 25777548 182796 4588468    0    0     0    24 4234 1338 91  9  0  0  0
22  0      0 25701164 182796 4588468    0    0     0    28 4138 1233 91  9  0  0  0
22  0      0 25700544 182796 4588476    0    0     0    12 4248 1175 92  8  0  0  0
22  0      0 25950576 182796 4588500    0    0     0    12 4218 1302 91  9  0  0  0
22  0      0 25692216 182796 4588528    0    0     0   696 4132 1158 92  8  0  0  0
22  0      0 25730104 182796 4588548    0    0     0    24 4266 1247 92  8  0  0  0
22  0      0 25738968 182796 4588560    0    0     0    24 4146 1210 91  9  0  0  0
(snip)

Lazy Loadあり時のvmstat

procs -----------memory---------- ---swap-- -----io---- --system-- -----cpu-----
 r  b   swpd   free   buff  cache   si   so    bi    bo   in   cs us sy id wa st
 4  2      0 26504208 183016 4624264    0    0     0  3488 3263  952 30  5 26 38  0
 4  0      0 26510788 183016 4624224    0    0     0  4260 5086 1298 61 11 13 15  0
 7  0      0 26521420 183016 4624236    0    0     0   428 4687 1329 62  6 33  0  0
 2  0      0 26561380 183016 4624228    0    0     0   488 5639 1369 89  6  5  0  0
 2  1      0 26496200 183016 4624208    0    0     0  2348 3315  756 51  4 45  0  0
 2  0      0 26587484 183016 4624240    0    0     0   608 3902 1062 52  3 45  0  0
 2  1      0 26591700 183016 4624244    0    0     0  3004 4456 1174 57  3 34  6  0
 6  3      0 26543308 183016 4624264    0    0     0  8080 4062 1136 31  8 39 23  0
 2  1      0 26577060 183016 4624312    0    0     0  5640 4028 1035 48 10 19 24  0
 1  1      0 26585724 183016 4624296    0    0    16  5836 5069  991 74  6  9 11  0
 1  2      0 26568200 183016 4624280    0    0     0  6268 3157  834 27  3 40 29  0
 4  2      0 26539744 183016 4624300    0    0     0  6316 3558  799 40  2 27 30  0
 6  1      0 26317436 183016 4624296    0    0     0  6760 4136  606 62  6 21 11  0
 1  3      0 26527636 183016 4624280    0    0     0  4192 2888  499 46  5 28 21  0
 1  2      0 26562752 183016 4624304    0    0     0  4880 2920  730 32  2 30 36  0
 7  2      0 26575960 183016 4624324    0    0    40  6708 3391  841 31  2 32 35  0
 3  1      0 26498768 183016 4624696    0    0   336  9692 4706 1006 67  5 15 13  0
 2  0      0 26590476 183016 4625060    0    0   476   604 3179 1166 43  2 51  4  0
12  0      0 26278588 183016 4625732    0    0   592  1320 4674 1609 76  6 17  1  0
 2  0      0 26504304 183016 4626052    0    0   272   248 5120 1390 91  8  1  0  0
 2  0      0 26541200 183016 4626244    0    0   188   708 3616 1219 47  2 50  1  0
(snip)

まーまーいい。

画像が一度に出ない、というデメリットもありますが、表示されないよりは全然良いので多く表示されている環境では使えるかなと思います。

新装版 たのしいムーミン一家 (講談社文庫)

Software Design (ソフトウェア デザイン) 2012年 11月号 [雑誌]