noxi雑記

.NET、Angularまわりの小ネタブログ

ApplicationInsightsの「エンドツーエンドトランザクションの詳細画面」を表示する

ApplicationInsights で記録したログが時系列に表示される「エンドツーエンドトランザクションの詳細画面」を検索画面を経ずに URL 生成して直接表示してみようという試みのメモです。エンドツーエンドトランザクションの詳細画面はコレ。

f:id:noxi515:20200922042325p:plain
エンドツーエンドトランザクションの詳細画面

この画面の 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);