Tips & Tricks

08月 10日, 2022

8 分程度

クリックでサーチを実行するタブ形式のダッシュボードを作成する

Splunk

この記事では、タブでコンテンツを分けたダッシュボードの作り方をご紹介します。コンテンツを複数のタブに分けるだけでなく、タブがクリックされるまでパネル内のサーチを実行しないようにします。そうすることで、ダッシュボードのビューが最初に開かれたときにすべてのサーチが一度に実行されるのを防ぎます。

このようにタブを使う目的は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」になります。各ファイルはこちらからダウンロードできます。

JavaScriptファイル(tabs.js)
CSSファイル(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

このブログはこちらの英語ブログの翻訳、住吉章治によるレビューです。

Splunk

世界の様々な企業が、デジタルシステムの安全性と信頼性を維持するためにSplunkを信頼しご利用いただいています。Splunkのソフトウェアソリューションとサービスは、ビジネスの継続に関わる重大な問題を未然に防ぎ、回復力を高め、イノベーションを加速します。Splunkの機能とSplunkが選ばれる理由をご覧ください。

Tips 3 分程度

日本語化がすすむSplunkの学習トレーニング。Splunk Educationで学び、使いこなそう！

Splunk学習コンテンツの日本語化が進んでいます。Splunkを勉強するにあたり、初中級難易度の認定資格やトレーニングコースがどれに該当するのか、おすすめの学習方法などをご紹介します。

Tips 3 分程度

Splunkが提供する無料トレーニング：オブザーバビリティ編 (1)

Splunkが無料でEラーニングコースを提供していることをご存じでしょうか？コンテンツの日本語化が進み、無料トレーニングの中には日本語で学習できるものもあります。今回は日本語で学習できるオブザーバビリティ関連の無料トレーニングの受講方法を紹介します。

Tips 11 分程度

Splunk Connect for Kafka – Kafka と Splunk を接続

Apache KafkaトピックのデータをSplunk にエクスポートするためのシンクコネクターであるSplunk Connect for Kafkaを紹介します。Kafkaの分散環境におけるビッグデータのSplunkへの取り込み、配信を可能にする設定方法をこのページで見てみましょう。

Splunkについて

Splunkプラットフォームは、データを行動へとつなげる際に立ちはだかる障壁を取り除いて、オブザーバビリティチーム、IT運用チーム、セキュリティチームの能力を引き出し、組織のセキュリティ、レジリエンス(回復力)、イノベーションを強化します。

Splunkは、2003年に設立され、世界の21の地域で事業を展開し、7,500人以上の従業員が働くグローバル企業です。取得した特許数は1,020を超え、あらゆる環境間でデータを共有できるオープンで拡張性の高いプラットフォームを提供しています。Splunkプラットフォームを使用すれば、組織内のすべてのサービス間通信やビジネスプロセスをエンドツーエンドで可視化し、コンテキストに基づいて状況を把握できます。Splunkなら、強力なデータ基盤の構築が可能です。

Splunkの詳細はこちら