Splunk: ダッシュボードの入力やパネルを動的に表示する


###### 実施環境： Splunk Free 8.2.2

### やりたいこと

以下のようなダッシュボードを考えます。

![WS000033.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/26baa241-f135-4ad3-18d7-6395d8ee7c04.jpeg "ダッシュボード1")

```XML:Splunk
<form>
  <label>トークン使用テスト</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="select_0">
      <label>選択肢0</label>
      <choice value="token_1">トークン1</choice>
      <choice value="token_2">トークン2</choice>
      <choice value="token_3">トークン2</choice>
      <default>token_1</default>
    </input>
    <input type="dropdown" token="select_1">
      <label>選択肢1</label>
      <choice value="1">1</choice>
      <default>1</default>
    </input>
    <input type="dropdown" token="select_2">
      <label>選択肢2</label>
      <choice value="2">2</choice>
      <default>2</default>
    </input>
  </fieldset>
  <row>
    <panel>
      <single>
        <title>パネル1</title>
        <search>
          <query>| makeresults
| eval test=$select_1$
| fields - _time</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <title>パネル2</title>
        <search>
          <query>| makeresults
| eval test=$select_2$
| fields - _time</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
  </row>
</form>
```

このダッシュボードについて、「選択肢0」で選択している値によって例えば「トークン1」なら赤の枠の部分のみ表示、「トークン2」なら緑の枠の部分のみ表示、のように切り替えたいとします。

![WS000014.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/cf76d408-24ed-f85f-7c15-13cbf5624490.jpeg "ダッシュボード2")

この場合、どうすればよいでしょうか。

### 実現方法

上記の内容は、「トークン」を使用すれば実現できます。

まず、「 set 」と「 unset 」を使用して選択した値によってトークンを作成したり、削除したりするようにします。
以下だと例えば「 token_1 」が選択された状態だと「 token_A 」が作成、「 token_B 」が削除され、逆に「 token_2 」が選択された状態だと「 token_A 」が削除、「 token_B 」が作成されます。

```XML:Splunk
      <change>
        <condition value="token_1">
          <set token="token_A"></set>
          <unset token="token_B"></unset>
        </condition>
        <condition value="token_2">
          <unset token="token_A"></unset>
          <set token="token_B"></set>
        </condition>
        <condition value="token_3">
          <unset token="token_A"></unset>
          <unset token="token_B"></unset>
        </condition>
      </change>
```

これらのトークンを、「 depends 」で各パネルや入力に以下のように紐づけます。
トークンが存在すれば表示、存在しなければ非表示となります。

```XML:Splunk
    <input type="dropdown" token="select_1" depends="$token_A$">
```

実際に、先ほどのダッシュボードにこれらの処理を組み込んでみましょう。

```XML:Splunk
<form>
  <label>トークン使用テスト</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="select_0">
      <label>選択肢0</label>
      <choice value="token_1">トークン1</choice>
      <choice value="token_2">トークン2</choice>
      <choice value="token_3">トークン3</choice>
      <default>token_1</default>
      <change>
        <condition value="token_1">
          <set token="token_A"></set>
          <unset token="token_B"></unset>
        </condition>
        <condition value="token_2">
          <unset token="token_A"></unset>
          <set token="token_B"></set>
        </condition>
        <condition value="token_3">
          <unset token="token_A"></unset>
          <unset token="token_B"></unset>
        </condition>
      </change>
    </input>
    <input type="dropdown" token="select_1" depends="$token_A$">
      <label>選択肢1</label>
      <choice value="1">1</choice>
      <default>1</default>
    </input>
    <input type="dropdown" token="select_2" depends="$token_B$">
      <label>選択肢2</label>
      <choice value="2">2</choice>
      <default>2</default>
    </input>
  </fieldset>
  <row>
    <panel depends="$token_A$">
      <single>
        <title>パネル1</title>
        <search>
          <query>| makeresults
| eval test=$select_1$
| fields - _time</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel depends="$token_B$">
      <single>
        <title>パネル2</title>
        <search>
          <query>| makeresults
| eval test=$select_2$
| fields - _time</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
  </row>
</form>
```

以下のように、「選択肢0」で選択している値によって表示される入力やパネルが切り替わるようになりました。

![WS000015.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/caeb6e4b-1876-88ab-1ed9-e55572737164.jpeg "トークン1")

![WS000016.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/19656f94-6f18-abdb-f47f-5a2a84501ba2.jpeg "トークン2")

![WS000017.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/1cca3c42-c7ef-6725-3d19-cd9d72de6155.jpeg "トークン3")

### 注意点

なお、上記で表示されていない入力やパネルは「表示されていない」だけであって、「存在していない」わけではないことに注意が必要です。
実際、以下のように入力が表示されていない状態でも、その入力の値はパネルに適用されてしまいます。

![WS000019.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/dfd55ff6-5081-ed23-9843-9f8ce349e77c.jpeg "注意点")

```XML:Splunk
<form>
  <label>トークン使用テスト</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="select_0">
      <label>選択肢0</label>
      <choice value="token_1">トークン1</choice>
      <choice value="token_2">トークン2</choice>
      <choice value="token_3">トークン3</choice>
      <default>token_3</default>
      <change>
        <condition value="token_1">
          <set token="token_A"></set>
          <unset token="token_B"></unset>
        </condition>
        <condition value="token_2">
          <unset token="token_A"></unset>
          <set token="token_B"></set>
        </condition>
        <condition value="token_3">
          <unset token="token_A"></unset>
          <unset token="token_B"></unset>
        </condition>
      </change>
    </input>
    <input type="dropdown" token="select_1" depends="$token_A$">
      <label>選択肢1</label>
      <choice value="1">1</choice>
      <default>1</default>
    </input>
    <input type="dropdown" token="select_2" depends="$token_B$">
      <label>選択肢2</label>
      <choice value="2">2</choice>
      <default>2</default>
    </input>
  </fieldset>
  <row>
    <panel>
      <single>
        <title>パネル1</title>
        <search>
          <query>| makeresults
| eval test=$select_1$
| fields - _time</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <title>パネル2</title>
        <search>
          <query>| makeresults
| eval test=$select_2$
| fields - _time</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
  </row>
</form>
```