Splunk Dashboard Single Valueについて

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

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

#とりあえずダッシュボードを作ってみた
```xml: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/`の下に配置してください。
:sweat:Splunk>Answers用のAppsで作ってみました。

#ダッシュボードの画面
![qiita_s1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130729/fcda48b5-d49a-54a1-9ec4-d2eb9f53df1d.png)


あんまり意味はないです。
#解説
##文字を表示する。
```xml: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`については[下記の通り](https://docs.splunk.com/Documentation/Splunk/latest/Viz/SingleValueFormatting#Migration_for_rangemap_settings_in_existing_single_value_visualizations)
####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: <font color="green">green</font>
- guarded: <font color="blue">blue</font>
- elevated: <font color="yellow">yellow</font>
- high: <font color="orange">orange</font>
- severe: <font color="red">red</font>

##画像を表示する。
```css: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で十分
##レイアウトを変更する
```css: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`も指定する必要がある。
##レイアウトを変更したあと文字列をセンタリング
```css:algin_center
   #row_combine .dashboard-element{
     width: 100% !important;
   }
```
通常は`50%`なっており左よりになっているのを`100%`にしてあげると、パネルの大きさと同じになってわかりやすい。
##trellis表示とする
```css: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
の後に調べたいダッシュボードのキーワードを入れて検索すると、大体見つかります。

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