https://www.splunk.com
  • Splunkサイト
    • Splunk Answers
    • ブログ
    • Community
    • .conf
    • Developers
    • Documentation
    • Splunk.com
    • Splunkbase
    • サポート
    • トレーニング
    • User Groups
    • ビデオ
https://www.splunk.com
  • ブログ
  • カテゴリー
    カテゴリー
    • .conf & SplunkLive!
    • お客様 & コミュニティ
    • DevOps
    • 業種・業界
    • IT
    • 経営陣
    • Learn
    • パートナー
    • データプラットフォーム
    • セキュリティ
    • Splunk Life
    • Tips
    Category Spot Image
    電子書籍
    外形監視のベストプラクティス Synthetic Monitoringの紹介

    Webサイトのパフォーマンスが広告収入、ユーザーエンゲージメント、SEOランキングに与える影響、外形監視を使ったソリューションを紹介

    詳細はこちら
  • ライター
    ライター
    • Splunk
    • Guest
    • 江藤 愛
    • 大谷 和紀
    • 甲斐 逸郎
    • 加藤 教克
    • 塚本 政彦
    • 仲間 力
    • 野村 健
    • 村田 達宣
    • 矢崎 誠二
    • 山内 一洋
    • 山村 悟史
    • 横田 聡
    • Gary Steele
    • Spiros Xanthos
    • Garth Fort
    • Simon Davies
    • Ryan Kovar
    • Jane Wong
    • ライター一覧
    Author Spot Image
    電子書籍
    SIEM導入ガイド

    適切なSIEMソリューションがどのように役立つかを解説した最新版

    電子書籍を読む
  • メール配信
  • 無料トライアル
https://www.splunk.com 無料トライアル
ブログ
カテゴリー
  • .conf & SplunkLive!
  • お客様 & コミュニティ
  • DevOps
  • 業種・業界
  • IT
  • 経営陣
  • Learn
  • パートナー
  • データプラットフォーム
  • セキュリティ
  • Splunk Life
  • Tips
ライター
  • Splunk
  • Guest
  • 江藤 愛
  • 大谷 和紀
  • 甲斐 逸郎
  • 加藤 教克
  • 塚本 政彦
  • 仲間 力
  • 野村 健
  • 村田 達宣
  • 矢崎 誠二
  • 山内 一洋
  • 山村 悟史
  • 横田 聡
  • Gary Steele
  • Spiros Xanthos
  • Garth Fort
  • Simon Davies
  • Ryan Kovar
  • Jane Wong
  • ライター一覧
メール配信
Splunkサイト
  • Splunk Answers
  • ブログ
  • Community
  • .conf
  • Developers
  • Documentation
  • Splunk.com
  • Splunkbase
  • サポート
  • トレーニング
  • User Groups
  • ビデオ
TIPS & TRICKS

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

Share:

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

このようにタブを使う目的は2つあります。

  1. 一度に多くのものを表示しないようにします。パネルが4つ以上あるダッシュボードはスクロールしなければならないので、ユーザーの操作性を損なう可能性があります。
  2. 一度に大量のサーチが実行されないようにすることで、読み込み時間を短縮し、タイムアウトを防ぎ、負荷を軽減する効果があります。

このチュートリアルは、私が作成したサンプルアプリをダウンロードし、手順を追いながらご覧になることをおすすめします。サンプルアプリはこちらからダウンロードできます。tabs.tar.gz

ステップ1:ダッシュボードを作成する

はじめに、通常と同様にダッシュボードを作成します。SplunkのUIを使って作成できます。タブのロジックについては今は考えないでおきましょう。後で追加します。

tabsアプリの[Step 1]というビューを見ると、初期表示を確認できます。

現段階で、ビューはこのようになっています。

step1のビュー

 

このビューにはパネルが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」と名付けたタブがデフォルトで表示されます。

ビューを再読み込みすると、タブが表示されるはずです。まだこれらのタブでは何もできません。これから設定していきます。ビューは今、このようになっているはずです。

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

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

August 10, 2022
Splunk
Posted by

Splunk

Related Posts

SPLUNK ON TWITTER
  • @Splunk
  • @splunkanswers
  • @SplunkforGood
  • @SplunkDocs
  • @splunkdev
  • @splunkgov
SPLUNK ON FACEBOOK
  • @Facebook
SPLUNK ON INSTAGRAM
  • Follow us on Instagram
SPLUNK ON LINKEDIN
  • Follow us on LinkedIn
SPLUNK ON YOUTUBE
  • Subscribe to our Channel
SPLUNK ON SLIDESHARE
  • Follow us on SlideShare
Splunk製品
  • Splunk Cloud Platform
  • Splunk Enterprise
  • Splunk IT Service Intelligence
  • Splunk On-Call
  • Splunk Enterprise Security
  • Splunk SOAR
  • Splunk Infrastructure Monitoring
  • Splunk APM
ソリューション
  • オブザーバビリティ
  • セキュリティ
  • プラットフォーム
お客様事例
リソース
  • 電子書籍
  • アナリストレポート
  • ホワイトペーパー
  • ウェビナー
  • ビデオ
お問い合わせ
  • サポート
  • 営業へのお問い合わせ
Splunk Sites
  • Splunk Answers
  • 日本語ブログ
  • Community
  • .conf
  • Developers
  • Documentation
  • Splunkbase
  • SplunkLive!
  • T-shirt Store
  • トレーニング
  • User Groups
Splunk
Sitemap | Privacy
© 2005-2023 Splunk Inc. All rights reserved.
Splunk、Splunk>およびTurn Data Into Doingは、米国およびその他の国におけるSplunk Inc.の商標または登録商標です。他のすべてのブランド名、製品名、または商標は、それぞれの所有者に帰属します。