Splunk: ナビゲーションメニューの編集


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

### 1. 概要

 Splunk で App の画面を開くと、画面の上側に「サーチ」や「ダッシュボード」等と書かれたメニューがあります。

![WS000000.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/9bdb4850-6471-c077-02fc-af2e967aeaad.jpeg "ナビゲーションメニュー")

これは「ナビゲーションメニュー」と呼ばれるもので、例えば「サーチ」を押せばサーチ画面に、「ダッシュボード」を押せばダッシュボード一覧画面に移動できます。
そして実はこのメニューは編集することが可能で、よく使用するダッシュボードなどをここにセットすることで簡単にその画面に移動することができます。
今回はこのメニューの編集方法について紹介します。

### 2. 設定方法

まず、「設定」⇒「ユーザーインターフェイス」を選択します。

![WS000000.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/a9b513f3-3068-0466-da18-e4de747a8d02.jpeg "設定")

「ナビゲーションメニュー」を選択します。

![WS000001.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/41f9f5e8-ea20-431e-4fe5-f29a3681b1be.jpeg "ナビゲーションメニュー")

ナビゲーションメニューの一覧が表示されます。
今はホーム画面のもののみ表示されているので、「 App 」を「すべて」にしてみましょう。

![WS000002.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/bfe39979-37a8-94ce-773e-c6b466f30e83.jpeg "ナビゲーションメニュー一覧1")

すると、各 App のナビゲーションメニューがずらっと表示されます。
今回はテスト用の App を「 test 」というフォルダ名で事前に作成しているので、それを編集してみましょう。

該当の App を探し、「 default 」を押します。

![WS000003.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/7bc96045-c04a-ee71-e421-5e3d49330d38.jpeg "ナビゲーションメニュー一覧2")

すると、以下のようにナビゲーションメニューの編集画面が開きます。
ナビゲーションメニューは XML として管理されています。

![WS000004.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/36f11c11-6cc2-7d86-6437-91e8d98e1d2c.jpeg "ナビゲーションメニューの編集")

```XML:Splunk
<nav search_view="search">
  <view name="search" default='true' />
  <view name="analytics_workspace" />
  <view name="datasets" />
  <view name="reports" />
  <view name="alerts" />
  <view name="dashboards" />
</nav>
```

では早速、ここにダッシュボードを追加してみましょう。
事前に「 test_dashboard 」という ID でテスト用のダッシュボードを作成しているので、これを追加してみます。

必要な行は、以下の通りです。
「 view 」を使用し、「 name 」に上の ID を指定する形です。

```XML:Splunk
  <view name="test_dashboard" />
```

これを、「 dashboards 」の次の行に追加します。

```XML:Splunk
<nav search_view="search">
  <view name="search" default='true' />
  <view name="analytics_workspace" />
  <view name="datasets" />
  <view name="reports" />
  <view name="alerts" />
  <view name="dashboards" />
  <view name="test_dashboard" />
</nav>
```

これで「保存」を押すと、以下の通りナビゲーションメニューにテスト用のダッシュボードが表示されました。
もちろん、クリックすれば登録したテスト用のダッシュボードに移動できます。
なお、表示される文字列は「 name 」に指定したダッシュボードの ID ではなく、ダッシュボードのタイトルになります。

![WS000005.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/53b32b42-7590-f973-a027-5a615325c598.jpeg "テスト用")

### 3. デフォルト画面

「 `default='true'` 」を移動させることで、デフォルト画面を変更できます。
試しに先ほどのナビゲーションメニューを以下のように書き換えてみましょう。

```XML:Splunk
<nav search_view="search">
  <view name="search" />
  <view name="analytics_workspace" />
  <view name="datasets" />
  <view name="reports" />
  <view name="alerts" />
  <view name="dashboards" />
  <view name="test_dashboard" default='true' />
</nav>
```

これでテスト用の App に移動してみると、最初に表示される画面がテスト用のダッシュボードとなっていることがわかります。

![WS000006.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/8be2d600-57db-12a7-d641-5b1226a53d86.jpeg "デフォルト画面")

### 4. サブメニュー

ナビゲーションメニューから、さらに階層構造でサブメニューを増やすことも可能です。
サブメニューを作りたい場合は、以下のように「 collection 」を使用します。
サブメニュー自体の表示文字列は「 label 」で指定します。

```XML:Splunk
  <collection label="サブメニュー1">
    <view name="test_dashboard" />
  </collection>
```

実際に使用してみましょう。
先ほどのナビゲーションメニューを、今度は以下のように書き換えます。

```XML:Splunk
<nav search_view="search">
  <view name="search" default='true' />
  <view name="analytics_workspace" />
  <view name="datasets" />
  <view name="reports" />
  <view name="alerts" />
  <view name="dashboards" />
  <collection label="サブメニュー1">
    <view name="test_dashboard" />
  </collection>
</nav>
```

以下の通り、サブメニューを作ることができました。

![WS000008.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/6b6e0f93-6f04-1202-a428-21395b091b47.jpeg "サブメニュー1")

複数階層を作ることも可能です。

```XML:Splunk
<nav search_view="search">
  <view name="search" default='true' />
  <view name="analytics_workspace" />
  <view name="datasets" />
  <view name="reports" />
  <view name="alerts" />
  <view name="dashboards" />
  <collection label="サブメニュー1">  
    <view name="test_dashboard" />
    <collection label="サブメニュー2">
      <view name="test_dashboard" />
    </collection>
  </collection>
</nav>
```

![WS000009.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/94944c5d-ce4d-3a58-874a-895126815f37.jpeg "サブメニュー2_1")

![WS000010.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/a372e6ba-37d8-df21-b105-f4734418bb34.jpeg "サブメニュー2_2")

### 5. ラベルの変更

ダッシュボードのタイトルと別の文字列をナビゲーションメニューに表示したい場合は、「 view 」の代わりに「 a 」を使用します。
「 href 」にダッシュボードの ID を、表示したい文字列は`<a>`と`</a>`の間に指定します。

```XML:Splunk
  <a href="test_dashboard">試験用ラベル</a>
```

実際に使用してみましょう。
先ほどのナビゲーションメニューを、今度は以下のように書き換えます。

```XML:Splunk
<nav search_view="search">
  <view name="search" default='true' />
  <view name="analytics_workspace" />
  <view name="datasets" />
  <view name="reports" />
  <view name="alerts" />
  <view name="dashboards" />
  <a href="test_dashboard">試験用ラベル</a>
</nav>
```

表示される文字列が「試験用ラベル」になることが確認できました。
もちろん、クリックすればきちんと指定したダッシュボードに移動できます。

![WS000011.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/b1281344-f524-1930-3899-dde1a200da04.jpeg "表示名変更1")

ちなみに、「 a 」を使用したダッシュボードをデフォルトにしたい場合は、以下のように「 view 」と併用する必要があります。

```XML:Splunk
  <a href="test_dashboard">試験用ラベル<view name="test_dashboard" default='true' /></a>
```

実際に使用してみましょう。
先ほどのナビゲーションメニューを、今度は以下のように書き換えます。

```XML:Splunk
<nav search_view="search">
  <view name="search" />
  <view name="analytics_workspace" />
  <view name="datasets" />
  <view name="reports" />
  <view name="alerts" />
  <view name="dashboards" />
  <a href="test_dashboard">試験用ラベル<view name="test_dashboard" default='true' /></a>
</nav>
```

これでテスト用の App に移動してみると、最初に表示される画面がテスト用のダッシュボードとなっていることが確認できました。
もちろん、表示名も「試験用ラベル」のままです。

![WS000012.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/e567426e-4df9-2aad-830a-9824f49a9678.jpeg "表示名変更2")