More than 5 years have passed since last update.

Splunk Dashboard Single Valueについて

Splunk

Last updated at 2020-04-21Posted at 2020-04-20

Splunkでダッシュボードを作る時、単一値(Single Value)はよく使うと思う
でも、少しレイアウトとか変更しようとするとふと困ってしまいますのでまとめました

基本的には下のリンクを参照してください。
https://docs.splunk.com/Documentation/Splunk/latest/Viz/SingleValue

とりあえずダッシュボードを作ってみた

singlevalue.xml

<dashboard>
  <label>single values</label>
  <row>
    <panel depends="$alwaysHide$">
      <html>
        <style>
          #first .svg-container {
            display: flex !important;
            justify-content: center !important;
            height: 110% !important;
            background: transparent 80% 80% no-repeat url("/static/app/TA-SplunkAnswers/pet_echo_kensa_dog.png");
            background-size: contain;
          }
          #row_combine {
            width: 25% !important;
          }
          #row_combine .panel-element-row {
            display: grid;
          }
          #row_combine .dashboard-element {
            width: 100% !important;
          }
          #third .svg-container {
            background: linear-gradient(-135deg, #E4A972, #9941D8);
          }
          #tables {
            width: 75% !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <single id="first">
        <search>
          <query>
            | makeresults count=4 | streamstats count as node | eval status=mvindex(split("UP DOWN"," "),(random() % 2)) | stats values(status) as status by node | eval range = if(match(status,"DOWN"),"severe","low") | eval
            status=case(status="UP",printf("%c",tonumber("2764",16)),status="DOWN",printf("%c",tonumber("1F494",16)))</query>
          <earliest>0</earliest>
          <latest></latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">value</option>
        <option name="drilldown">none</option>
        <option name="field">status</option>
        <option name="height">250</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">
          [ "red","green"]</option>
        <option name="rangeValues">
          [ 0]</option>
        <option name="refresh.display">progressbar</option>
        <option name="trellis.enabled">1</option>
        <option name="trellis.size">large</option>
        <option name="trellis.splitBy">node</option>
        <option name="useColors">0</option>
      </single>
    </panel>
  </row>
  <row>
    <panel id="row_combine">
      <single id="second">
        <search>
          <query>
            | makeresults | streamstats count as node | eval status=mvindex(split("UP DOWN"," "),(random() % 2)) | stats values(status) as status by node | eval range = if(match(status,"DOWN"),"severe","low")
          </query>
          <earliest>0</earliest>
          <latest></latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="useColors">0</option>
        <option name="drilldown">none</option>
        <option name="colorBy">value</option>
        <option name="field">status</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">
          [ "red","green"]</option>
        <option name="rangeValues">
          [ 0]</option>
      </single>
      <single id="third">
        <search>
          <query>
            | makeresults | streamstats count as node | eval status=mvindex(split("UP DOWN"," "),(random() % 2)) | stats values(status) as status by node | eval range = if(match(status,"DOWN"),"severe","low")
          </query>
          <earliest>0</earliest>
          <latest></latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="useColors">0</option>
        <option name="drilldown">none</option>
        <option name="colorBy">value</option>
        <option name="field">status</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">
          [ "red","green"]</option>
        <option name="rangeValues">
          [ 0]</option>
      </single>
    </panel>
    <panel id="tables">
      <table>
        <search>
          <query>
            | makeresults | eval text="table sample" | fields - _time</query>
          <earliest>$earliest$</earliest>
          <latest>$latest$</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</dashboard>

画像は$SPLUNK_HOME/etc/apps/{app_name}/appserver/static/の下に配置してください。
Splunk>Answers用のAppsで作ってみました。

ダッシュボードの画面

あんまり意味はないです。

解説

文字を表示する。

text_display

      <single id="second">
        <search>
          <query>| makeresults
| streamstats count as node
| eval status=mvindex(split("UP DOWN"," "),(random() % 2))  
| stats values(status) as status by node
| eval range = if(match(status,"DOWN"),"severe","low")
 </query>
          <earliest>0</earliest>
          <latest></latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="useColors">0</option>
        <option name="drilldown">none</option>
        <option name="colorBy">value</option>
        <option name="field">status</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["red","green"]</option>
        <option name="rangeValues">[0]</option>
      </single>

range	status	node
severe	UP	1

表示する列をfieldで指定して、rangeColorsで色を指定している。
rangeValuesは0で問題ないと思う。

rangeについては下記の通り

Migration for rangemap settings in existing single value visualizations

Existing single value visualizations might use a query with the rangemap command to configure ranges and colors.

By default, a single value visualization has this color mapping configuration for ranges.

low: green
guarded: blue
elevated: yellow
high: orange
severe: red

画像を表示する。

background_image

<panel depends="$alwaysHide$">
  <html>
    <style>
    #first .svg-container{
       display: flex !important;
       justify-content: center !important;
       height: 110% !important;
       background: transparent 80% 80% no-repeat url('/static/app/TA-SplunkAnswers/pet_echo_kensa_dog.png');
       background-size: contain;
       }
  </html>
</panel>
 
      <single id="first">
...
      </single>

cssでの表示が必要。ここからはcssのみの記載とします。
参照先は
https://developer.mozilla.org/ja/docs/Web/CSS/background
これは_trellis_表示のひとつひとつに表示するためにクラスを指定しているが
通常はidで十分

レイアウトを変更する

Layout

        #row_combine{
          width: 25% !important;
          }
        #row_combine .panel-element-row{
             display: grid;
        }

single valueを２行を１行で表示するためには、こちらが必要。
参照先は
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout
なお、他のパネルのwidthも指定する必要がある。

レイアウトを変更したあと文字列をセンタリング

algin_center

   #row_combine .dashboard-element{
     width: 100% !important;
   }

通常は50%なっており左よりになっているのを100%にしてあげると、パネルの大きさと同じになってわかりやすい。

trellis表示とする

trellis

   #first .svg-container{
      display: flex !important;
      justify-content: center !important;
      height: 110% !important;
      background: transparent 80% 80% no-repeat url('/static/app/TA-SplunkAnswers/pet_echo_kensa_dog.png');
      background-size: contain;
      }

trellis表示のクラスはこれ。なお_flex_レイアウト
参照先は
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout
https://developer.mozilla.org/ja/docs/Web/CSS/justify-content

まとめ

Single Valueの表示を少し凝ったことをしようとすると、CSSが必要になります。
いちいち調べるのが大変なのでまとめてみました。

https://www.google.com/search?q=site%3Aanswers.splunk.com+niketnilay
https://www.google.com/search?q=site%3Aanswers.splunk.com+vnravikumar
の後に調べたいダッシュボードのキーワードを入れて検索すると、大体見つかります。

今回も大変お世話になりました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up