ApplicationInsightsの「エンドツーエンドトランザクションの詳細画面」を表示する
ApplicationInsights で記録したログが時系列に表示される「エンドツーエンドトランザクションの詳細画面」を検索画面を経ずに URL 生成して直接表示してみようという試みのメモです。エンドツーエンドトランザクションの詳細画面はコレ。
この画面の URL はパスにエスケープされた JSON を2つ含んでおり、見やすくエスケープとフォーマットをしてみます。
https://portal.azure.com/#blade/AppInsightsExtension/DetailsV2Blade/DataModel/ { "eventId": "00000000-0000-0000-0000-000000000000", // 対象レコードの itemId "timestamp": "2020-09-21T10:23:57.159Z", // 対象レコードの timestamp "cacheId": "00000000-0000-0000-0000-000000000000", // 不明 "eventTable": "exceptions", // 対象レコードの itemType "timeContext": { // 日時検索範囲 "durationMs": 86400000, // 検索期間ミリ秒 "endTime": "2020-09-21T19:21:00.000Z", // 検索終了日時 "createdTime": "2020-09-21T19:20:14.460Z", // 検索条件が作成された日時? "isInitialTime": false, // 不明 "grain": 1, // 不明 "useDashboardTimeRange": false // 不明 } } /ComponentId/ { "Name": "ApplicationInsightsの名前", "SubscriptionId": "サブスクリプションID", "ResourceGroup": "リソースグループの名前" }
この中から実際に画面を叩いてみて必要だったパラメーターは次の6つでした。
- eventId
- timeContext / durationMs
- timeContext / endTime
- Name
- SubscriptionId
- ResourceGroup
詳細画面を直接開くURLは例えばこのように生成できます。
// JSの場合 const aiName = 'ApplicationInsights Resource Name'; const subscriptionId = '00000000-0000-0000-0000-000000000000'; const resourceGroupName = 'ResourceGroup Name'; const eventId = '00000000-0000-0000-0000-000000000000'; // 対象レコードID const timestamp = new Date('2020-09-22T04:43:00+09:00'); // 対象レコード日時 const durationMs = 24 * 60 * 60 * 1000; // 1日 = 86400000 const endTime = new Date(timestamp.getTime() + durationMs / 2); // 表示終了日時 = 対象レコードから12時間後 const dataModel = JSON.stringify({ eventId, timeContext: { durationMs, endTime } }); const componentId = JSON.stringify({ Name: aiName, SubscriptionId: subscriptionId, ResourceGroup: resourceGroupId }); const url = 'https://portal.azure.com/#blade/AppInsightsExtension/DetailsV2Blade/DataModel/' + encodeURIComponent(dataModel) + '/ComponentId/' + encodeURIComponent(componentId);