この記事では、タブでコンテンツを分けたダッシュボードの作り方をご紹介します。コンテンツを複数のタブに分けるだけでなく、タブがクリックされるまでパネル内のサーチを実行しないようにします。そうすることで、ダッシュボードのビューが最初に開かれたときにすべてのサーチが一度に実行されるのを防ぎます。
このようにタブを使う目的は2つあります。
- 一度に多くのものを表示しないようにします。パネルが4つ以上あるダッシュボードはスクロールしなければならないので、ユーザーの操作性を損なう可能性があります。
- 一度に大量のサーチが実行されないようにすることで、読み込み時間を短縮し、タイムアウトを防ぎ、負荷を軽減する効果があります。
このチュートリアルは、私が作成したサンプルアプリをダウンロードし、手順を追いながらご覧になることをおすすめします。サンプルアプリはこちらからダウンロードできます。tabs.tar.gz
ステップ1：ダッシュボードを作成する
はじめに、通常と同様にダッシュボードを作成します。SplunkのUIを使って作成できます。タブのロジックについては今は考えないでおきましょう。後で追加します。
tabsアプリの[Step 1]というビューを見ると、初期表示を確認できます。
現段階で、ビューはこのようになっています。
このビューにはパネルが4つあります。2つは内部インデックス用で、もう2つは内部以外のインデックス用です。内部インデックス用のパネルと内部以外のインデックス用のパネルを別のタブに分けたいと思います。
ステップ2：タブヘルパーのJavaScriptとCSSを追加する
タブを実装するためのJavaScriptとCSSを作ってありますので、これらを追加しましょう。タブを追加するビューのあるアプリのappserver/staticディレクトリに、JavaScriptファイル「tabs.js」とCSSファイル「tabs.css」をコピーします。たとえば、ビューが「myapp」アプリ内にある場合、JavaScriptファイルを追加すると「etc/apps/myapp/appserver/static/tabs.js」となり、CSSファイルを追加すると「etc/apps/myapp/appserver/static/tabs.css」になります。各ファイルはこちらからダウンロードできます。
次に、cssファイルとjsファイルを参照するようビューを変更します。手順としては、formタグかviewタグ内でscriptとstylesheetを宣言します。たとえば以下のように記述します。
<form script="tabs.js" stylesheet="tabs.css">
この変更を行うには、ソースディレクトリを直接編集する必要があります。[Edit source]をクリックしてから、追記してください。変更しても、ビューにはまだ変化が見られないはずです。すぐに違いを見て取れるようになるので、今はこれで問題ありません。
ステップ3：タブを宣言する
では、タブを追加しましょう。手順としては、簡単なHTMLをビューにコピーします。htmlタグ内にタブを追加すると、タブ自体がBootstrapタブになります(詳細についてはBootstrapのドキュメントを参照)。
以下のコードをfieldsetの直後(fieldsetタグがない場合は先頭)に追加してください。ビューの先頭部分はこのようになります(変更部分は赤)。
<form script="tabs.js" stylesheet="tabs.css">
<label>Tabs</label>
<fieldset submitButton="true" autoRun="false">
<input type="time" token="field1" searchWhenChanged="false">
<label></label>
<default>
<earliest>-24h@h</earliest>
<latest>now</latest>
</default>
</input>
</fieldset>
<row id="tabs">
<panel>
<html>
<ul id="tabs" class="nav nav-tabs">
<li class="active">
<a href="#" class="toggle-tab" data-toggle="tab">Non-internal Indexes</a>
</li>
<li>
<a href="#" class="toggle-tab" data-toggle="tab">Internal Index</a>
</li>
</ul>
</html>
</panel>
</row>
これでBootstrapタブが2つできます。「active」クラスが設定されているため、「Non-internal Indexes」と名付けたタブがデフォルトで表示されます。
ビューを再読み込みすると、タブが表示されるはずです。まだこれらのタブでは何もできません。これから設定していきます。ビューは今、このようになっているはずです。
ステップ4：タブを設定する
パネルの表示/非表示を切り替えられるよう、タブの設定を行います。
あらかじめ、表示/非表示を切り替えたい各行(row)にidを設定しておく必要があります。そのために、タブを表す文言をidとして設定します。たとえば、1番目のパネルに「tab_sourcetype」と名前を付ける場合、XMLはこのようになります。
<row id="tab_sourcetype">
タブで制御したいすべてのパネルにこの設定をしてください。次に、各タブにdata-elements属性を作成します。この属性で、表示したり非表示にしたりする行(row)を指定します。ここに設定する要素は、各パネルに設定したidと完全に一致していなければなりません。タブで制御したい行が複数ある場合は、カンマ区切りのリストにします。今回の例では、次のようになっています(data-elements属性に注目)。
<row id="tabs">
<panel>
<html>
<ul id="tabs" class="nav nav-tabs">
<li class="active">
<a href="#" class="toggle-tab" data-toggle="tab" data-elements="tab_source,tab_sourcetype">Non-internal Indexes</a>
</li>
<li>
<a href="#" class="toggle-tab" data-toggle="tab" data-elements="tab_source_internal,tab_sourcetype_internal">Internal Index</a>
</li>
</ul>
</html>
</panel>
</row>
ビューを再読み込みすると、タブの各行の表示/非表示を確認できます。ビューは現在、このようになっています。
ステップ5：タブがクリックされるまでサーチを実行しないよう、トークンを設定する
このステップが必要になるのは、タブがクリックされるまでタブ内のサーチを実行したくない場合のみです。仕組みとしては、タブがクリックされた場合のみ定義されるトークンを設定します。トークンが定義されていなければ、Splunkでサーチは実行されません。また、JavaScriptファイルのtabs.jsでは、タブがクリックされるまでトークンが定義されません。その結果、タブがクリックされるまでサーチが行われなくなります。
手順としては、まずは各タブにdata-token属性を定義します。タブにトークンを定義すると、このようになります。
<row id="tabs">
<panel>
<html>
<ul id="tabs" class="nav nav-tabs">
<li class="active">
<a href="#" class="toggle-tab" data-toggle="tab" data-elements="tab_source,tab_sourcetype" data-token="control_token_non_internal">Non-internal Indexes</a>
</li>
<li>
<a href="#" class="toggle-tab" data-toggle="tab" data-elements="tab_source_internal,tab_sourcetype_internal" data-token="control_token_internal">Internal Index</a>
</li>
</ul>
</html>
</panel>
</row>
次に、このトークンをサーチに追加します。トークン名は、サーチ結果を表示するタブに対応している必要があります。たとえば、[Sourcetypes (internal)]パネルと[Source (internal)]パネルは、[Internal Index]タブがクリックされたときにのみ実行したいとします。[Internal Index]タブには「control_token_internal」トークンが設定されているため、この「control_token_internal」を当該パネル内のサーチに追加します。トークンはどこに追加してもかまいません(サーチ実行時にトークンは削除されます)。トークンであることを示すために、$マークで囲む必要があります。この例では、パネルはこのようになります。
<row id="tab_sourcetype_internal">
<panel>
<title>Sourcetypes (internal)</title>
<table>
<search>
<query>| search * $control_token_internal$ index=_internal | stats count by sourcetype</query>
<earliest>$field1.earliest$</earliest>
<latest>$field1.latest$</latest>
</search>
<option name="count">10</option>
</table>
</panel>
</row>
<row id="tab_source_internal">
<panel>
<title>Source (internal)</title>
<table>
<search>
<query>| search * $control_token_internal$ index=_internal | stats count by source</query>
<earliest>$field1.earliest$</earliest>
<latest>$field1.latest$</latest>
</search>
<option name="count">10</option>
</table>
</panel>
</row>
ビューを再読み込みすると、トークンの効果で、タブがクリックされるまでパネル内のサーチが実行されなくなっていることを確認できます。
まとめ
各ステップを説明するサンプルアプリを作成しましたので、ぜひダウンロードしてお試しください。ファイルはこちらからダウンロードできます。tabs.tar.gz
----------------------------------------------------
ありがとうございました！
Luke Murphey
このブログはこちらの英語ブログの翻訳、住吉 章治によるレビューです。
