> ## Documentation Index
> Fetch the complete documentation index at: https://private-7c7dfe99-mintlify-8a08bda2.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# テーブルの行クリックによるドリルダウン

> テーブルタイルを調査ワークフローとして活用できます。行をクリックすると、その行に絞り込まれた専用のダッシュボードや、関連するログやトレースにドリルダウンできます

export const Image = ({img, alt, size}) => {
  return <Frame>
      <img src={img} alt={alt} />
    </Frame>;
};

テーブルタイルは、多くの場合 **カタログ** として機能します。サービス、ホスト、エンドポイント、またはエラーグループごとに1行があり、それぞれを評価するためのカラムがいくつか表示されます。行クリックアクションを使うと、このカタログが調査ワークフローになります。カタログを見て重要な行を見つけてクリックすると、ClickStack がその行の値をフィルターとして引き継ぎます。すると宛先は、その項目にあらかじめ絞り込まれた状態で開くため、クエリを手作業で組み直す必要はありません。

クリック先は次の2つのいずれかです。

* **別のダッシュボード**。たとえばサービスごとの詳細ダッシュボードのように、その項目だけに絞って確認するための表示です。
* その行の背後にあるログまたはトレースを確認できる、[Search](/ja/clickstack/features/search) の **元のイベント**。

以下の2つのユースケースはどちらも、同じカタログ (サービス一覧) から始まり、そこから各宛先へドリルダウンします。行クリックアクションはテーブルタイルにのみ適用されます。これは、折れ線グラフや棒グラフ上の点をクリックしたときにコンテキストメニューを開く、チャートの [drilldown to search](/ja/clickstack/features/dashboards/overview#drilldown-to-search) とは別の機能です。

<div id="inspect-in-dashboard">
  ## 専用ダッシュボードでサービスを調査する
</div>

サービスごとに1行の概要テーブルを使うと、「どのサービスが不健全か？」を把握できます。さらに行をクリックすると、クリックしたサービスに絞り込まれたサービス別ダッシュボードが開き、「その内部で何が起きているのか？」を確認できます。以下のパターンでは、サービス一覧テーブルと `Service Detail` ダッシュボードを組み合わせます。

<Steps>
  <Step>
    ### 詳細ダッシュボードを作成する

    `Service Detail` という名前のダッシュボードを作成し、トレース ログソースに対して、式 `ServiceName` の[カスタムフィルター](/ja/clickstack/features/dashboards/overview#custom-filters)を追加します。このダッシュボードレベルのフィルターにより、すべてのタイルが単一のサービスに絞り込まれるため、各タイルのクエリにサービス名をハードコードする必要はありません。必要なサービス別ビューを追加します。たとえば、RED の主要指標 (requests、errors、P95 duration) 、レイテンシのパーセンタイルチャート (P50、P95、P99) 、時間ごとのリクエスト率、`SpanName` でグループ化したエンドポイントごとの内訳などです。

    次の手順で対象として選択できるよう、まずこのダッシュボードを保存します。
  </Step>

  <Step>
    ### サービス一覧を作成する

    概要ダッシュボードで、トレース ログソースに `ServiceName` でグループ化した **Table** タイルを追加します。各サービスを評価するための RED のカラムを追加し、それぞれをエイリアス付きのシリーズにします。

    * `Requests`: span 数 (rate) 。
    * `Errors`: error status の span 数。
    * `P95 Duration`: `Duration` の95パーセンタイル。カラムの数値フォーマットを duration に設定し、生のナノ秒ではなく `288ms` のように表示されるようにします。

    `Requests` の降順で並べ替え、最もトラフィックの多いサービスが上位に来るようにします。このテーブルがカタログとなり、各サービスが1行ずつ RED で評価されます。

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/vQMVv9Ng6hRPWQ0d/images/clickstack/dashboards/row-click-catalog.png?fit=max&auto=format&n=vQMVv9Ng6hRPWQ0d&q=85&s=25cb992d027ad8ed855fbcf7eb4ddd36" alt="各サービスについて RED のカラム（Requests、Errors、P95 Duration）を表示し、リクエスト量順に並べたサービス一覧テーブル。その上に requests-over-time のトレンドを表示" size="lg" width="1600" height="1000" data-path="images/clickstack/dashboards/row-click-catalog.png" />

    <Tip>
      **group-by カラムを先頭に置く**

      デフォルトでは、テーブルは group-by カラム (ここでは `ServiceName`) をシリーズの後、右側に表示します。カタログとしては、各行の識別子が先頭にあるほうが読みやすくなります。タイルの **Display Settings** を開き、**Display Group By Columns on Left** をオンにして、group-by カラムを先頭へ移動します。
    </Tip>
  </Step>

  <Step>
    ### 行クリックを設定する

    一覧テーブルで **Row Click Action** を開き、**Dashboard** を選択して、ダッシュボード一覧から `Service Detail` を選びます。ダッシュボードを直接選ぶと、ID で固定されます。これにより、後でダッシュボード名を変更してもリンクは機能し続け、ダッシュボードをエクスポート／インポートしても維持されます。 (行ごとに別のダッシュボードを選ぶ場合のみ **Template** オプションを使います。[行クリックアクションを設定する](#set-up)を参照してください。)

    `Service Detail` では `ServiceName` のカスタムフィルターを定義しているため、ドロワーにはその式に対応する空のフィルターがあらかじめ表示されます。そのテンプレートを入力します。

    * **Expression**: `ServiceName` (入力済み)
    * **Template**: `{{ServiceName}}`

    **Apply** をクリックして保存します。これで、クリックした行のサービスがダッシュボードの `ServiceName` フィルターに渡されます。
  </Step>

  <Step>
    ### 行をクリックする

    行にホバーすると、テーブル右端にリンク用の操作要素が表示され、操作内容を示すヒント (`Open dashboard "Service Detail"`) が表示されます。行をクリックすると、`Service` フィルターがクリックした値に設定された状態で `Service Detail` ダッシュボードが開き、すべてのタイル (RED の主要指標、レイテンシのパーセンタイル、エンドポイントごとの内訳) が、その1つのサービスに絞り込まれます。

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/vQMVv9Ng6hRPWQ0d/images/clickstack/dashboards/row-click-drilldown.png?fit=max&auto=format&n=vQMVv9Ng6hRPWQ0d&q=85&s=09e5e38c1334ddc2ed73364a51f77a4e" alt="行クリック後の Service Detail ダッシュボード。Service フィルターがクリックしたサービスに設定され、RED の主要指標、レイテンシのパーセンタイル、エンドポイントごとの内訳がすべてそのサービスにスコープされている" size="lg" width="1600" height="1000" data-path="images/clickstack/dashboards/row-click-drilldown.png" />
  </Step>
</Steps>

<div id="jump-to-traces">
  ## サービスからそのトレースに移動する
</div>

別の集計ビューではなく、生のイベントを見たいことがあります。**Search** アクションを使うと、クリック先がダッシュボードではなく [Search](/ja/clickstack/features/search) ページになり、その行に対応するログまたはトレースが、その行で絞り込まれた状態で開きます。

同じサービス一覧テーブルから始めて、行クリックの遷移先を詳細ダッシュボードではなく、トレースそのものに設定します。

<Steps>
  <Step>
    ### 行クリックの遷移先を Search に設定する

    一覧テーブルで **Row Click Action** を開き、**Search** を選択します。トレースソースを選択します (表示されるのはログソースとトレースソースのみです) 。フィルターを 1 つ追加します。

    * **Expression**: `ServiceName`
    * **Template**: `{{ServiceName}}`

    **Apply** をクリックして保存します。
  </Step>

  <Step>
    ### 行をクリックする

    これでサービスの行をクリックすると、そのトレースソースの Search ページが開き、`ServiceName = <service>` で絞り込まれるため、同じ時間範囲内でそのサービスの span だけを表示できます。

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/vQMVv9Ng6hRPWQ0d/images/clickstack/dashboards/row-click-search-drilldown.png?fit=max&auto=format&n=vQMVv9Ng6hRPWQ0d&q=85&s=3181b42a57a14a4b8212d3d3ef9c29bc" alt="行クリック後にトレースソースの Search ページが開き、クリックしたサービスで絞り込まれた状態" size="lg" width="1600" height="1000" data-path="images/clickstack/dashboards/row-click-search-drilldown.png" />
  </Step>
</Steps>

この方法は、どのような項目カタログにも応用できます。テーブルを `ServiceName` ではなく操作 (`SpanName`) や endpoint 属性でグループ化し、そのカラムからフィルターをテンプレート化すれば、各行のクリックでその操作または endpoint に対応するイベントを開けます。map 属性での group-by については、[Validation and limitations](#validation) の alias に関する注記を参照してください。

<div id="set-up">
  ## 行クリックアクションを設定する
</div>

行クリックアクションはテーブルタイル上で設定します。専用の設定ページはありません。タイルを追加または編集し、visualization type を **Table** に設定します。すると、エディタのツールバーで **Display Settings** の横に **Row Click Action** ボタンが表示されます。このボタンはテーブルタイルでのみ表示され、ラベルには現在のアクションが反映されます: `Row Click Action: Default`、`Row Click Action: Search`、`Row Click Action: Dashboard`。クリックするとドロワーが開きます。

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/vQMVv9Ng6hRPWQ0d/images/clickstack/dashboards/row-click-drawer.png?fit=max&auto=format&n=vQMVv9Ng6hRPWQ0d&q=85&s=add84f998cb9e924416c9fb23ec9488d" alt="Dashboard モードの Row Click Action ドロワー。宛先として Service Detail ダッシュボードが選択され、クリックした行の ServiceName フィルタがテンプレート化されている" size="lg" width="1600" height="1000" data-path="images/clickstack/dashboards/row-click-drawer.png" />

このドロワーでは 3 つのアクションを選択できます。

* **Default**: 組み込みの動作です。行をクリックすると、その行の group-by カラムの値と選択した時間範囲でフィルタされた Search ページが開きます。カスタムアクションを設定していない場合はこの動作になります。
* **Search**: 選択したログソースの Search ページにクリック先を送ります。
* **Dashboard**: チームが所有する別のダッシュボードにクリック先を送ります。

**Search** と **Dashboard** では、クリック先と、引き継ぐフィルタのテンプレートを設定します。

* **Destination**: 特定のログソースまたはダッシュボードを選ぶか、**Template** を選んで、利用可能なログソースまたはダッシュボード名に一致する [Handlebars](https://handlebarsjs.com/) テンプレートを入力します。特定の宛先を選ぶと、その ID に固定されます。単一の固定宛先にはこちらを推奨します。リネームやダッシュボードのエクスポート / インポート後も維持され、ダッシュボードの場合は宛先で宣言済みのフィルタも事前入力されます。行ごとに宛先を変えたい場合は **Template** を使い、行のカラムを参照して選択します (例: `Errors-{{ServiceName}}`) 。
* **Filters**: **Add filter** をクリックし、**Expression** (宛先側のカラムまたは式。例: `ServiceName`) と、その値の **Template** (例: `{{ServiceName}}`) を指定します。テンプレートでは、クリックした行のカラムを `{{columnName}}` で参照します (利用できるカラムについては下の注記を参照してください) 。各フィルタは宛先で `expression IN (value)` 条件として展開され、同じ式を共有するフィルタはマージされます。宛先がダッシュボードの場合、そのダッシュボードで宣言済みの各フィルタについて、ドロワーに空のフィルタが 1 つずつ事前入力されるため、テンプレートだけを埋めれば済みます。
* **WHERE** (任意) : 上記のフィルタごとの条件に加えて、宛先のグローバルフィルタに展開される Handlebars テンプレートです。宛先で正しく解析されるよう、query language を SQL または Lucene に設定してください。たとえば、SQL テンプレート `ServiceName = '{{ServiceName}}'` を使うと、クリックした行の service に宛先を絞り込めます。

<Note>
  **テンプレートはテーブルのカラムを参照します**

  `{{...}}` テンプレートは、テーブルタイル自身のカラム、つまり group-by カラムと、各 series をその名前または alias で、テーブルに表示されているとおりに参照して解決されます。テーブルが選択していない基盤ログソースのカラムは参照できません。クリックで値を引き継ぐには、その値がテーブル内のカラムである必要があります。そのため、`ServiceName` はテーブルの group-by カラムなので `{{ServiceName}}` は機能し、alias が付いたカラムはその alias で参照します。テーブルに存在しない名前を参照すると、クリックは `Row has no column '<name>'` で失敗します。
</Note>

**Apply** をクリックしてテンプレートを検証し (ClickStack は構文が無効なものを報告します) 、その後ダッシュボードを保存してアクションを永続化します。

<div id="how-it-resolves">
  ## 宛先とフィルターがどのように解決されるか
</div>

閲覧者が行をクリックすると、ClickStack はその行に基づいてアクションを解決します。

* **宛先。** 特定のログソースまたはダッシュボードを選択すると、その ID に固定されます。**Template** ターゲットは、クリックされた行に対してレンダリングされた後、チームのログソースまたはダッシュボードと名前で照合されます。解決するには、名前が一意である必要があります。2 つのログソースまたは 2 つのダッシュボードでレンダリング後の名前が同じ場合、リンクはそのどちらか 1 つに解決できません。レンダリング後の名前が空の場合や、一致する名前がない場合も解決に失敗します。
* **フィルター。** 各フィルターテンプレートはその行に対してレンダリングされ、宛先では `expression IN (value)` 条件になります。`Search` アクションでは、選択したログソースにスコープされた `/search` が開き、`Dashboard` アクションではそのダッシュボードが開きます。どちらの場合も、クリックされた行の時間範囲が引き継がれます。

<Note>
  **ダッシュボードを宛先にする場合は、一致するフィルターの宣言が必要です**

  ダッシュボードに引き継がれたフィルターが有効になるのは、宛先ダッシュボードで、そのフィルターの **Expression** と一致するトップレベルの [custom filter](/ja/clickstack/features/dashboards/overview#custom-filters) が宣言されている場合に限られます。一致する宣言済みフィルターがない場合、その値はクリック時に破棄され、その式についてはフィルター未適用のまま宛先が開きます。これが、ダッシュボードモードで宛先に宣言済みのフィルターが事前入力される理由です。式が一致すると、宛先のドロップダウンにはクリックされた行の値が自動入力されます。
</Note>

<div id="validation">
  ## 検証と制限事項
</div>

* **テーブルタイルのみ。** **Row Click Action** ボタンはテーブルタイルでのみ表示され、チャートビルダーのテーブルと [SQL ベース](/ja/clickstack/features/dashboards/sql-visualizations)のテーブルの両方で利用できます。その他のタイルタイプでは行クリックアクションは使用できません。
* **Search の対象はログソースまたはトレースソースである必要があります。** Metric ソースとセッションソースは Search ページで表示できないため、対象として選択できません。
* **Template 名は一意である必要があります。** Template のターゲットは名前で解決されるため、同じ名前の 2 つのソース、または 2 つのダッシュボードを Template ターゲットとして使うことはできません。
* **ダッシュボードターゲットでは、引き継いだ値を有効にするには一致する宣言済みフィルター** が必要です (上記の注記を参照) 。
* **式による group-by カラムにはエイリアスが必要です。** `SpanAttributes['http.route']` のような式で group-by すると、結果のカラム名がそのまま生の式になるため、Template から参照しづらくなります。チャートビルダーでカラムにエイリアスを付けてください。**Group By** 入力で式の後ろに `AS <alias>` を追加し (たとえば `SpanAttributes['http.route'] AS Route`) 、Template では `{{Route}}` を参照します。集計 series も同様に **Alias** フィールドの値をエイリアスとして使います。`ServiceName` のような通常のカラムで group-by する場合は、すでに分かりやすい名前になっているためエイリアスは不要です。
