繁体   English   中英

从应用程序洞察(Azure 门户)获取数据以将其显示在 asp.net Web 应用程序的网页上

[英]Fetching data from Application insights (Azure Portal) to display it on a web page in asp.net web application

我已经使用应用程序洞察为我的 .net Web 应用程序配置了 azure 门户。 现在我想要的是门户中显示的详细信息应该显示在我的 .net Web 应用程序的网页上。 我不知道怎么做,并希望有人在这方面帮助我。 我还分享了我想要从我的 azure 门户中获取的实际内容的快照,以在我的应用程序网页上显示为网格报告。 [ 我希望这两个标记的部分作为我网页的一部分,即一个作为分区,另一个作为网格报告。 [1]

有一个用于从 Application Insights 检索数据的 API。 从文档中,您可以“查询并集成 Application Insights 为您的应用程序收集的性能、可用​​性和使用数据”和“使用强大而简单的 REST API 访问您应用程序的所有事件和指标数据”。

一些示例请求:

返回最后一天的请求总数(timespan=P1D):

GET /v1/apps/DEMO_APP/metrics/requests/count?timespan=P1D HTTP/1.1

过去 6 小时的每小时平均服务器响应时间(间隔=PT1H):

GET /v1/apps/{app-id}/metrics/requests/duration?timespan=PT6H&interval=PT1H

列出最近的 5 个事件:

GET /v1/apps/{app-id}/events/$all?$top=5

列出失败或耗时超过 0.5 秒的 GET 请求:

GET /v1/apps/{app-id}/events/requests?$filter=startswith(request/name, 'GET') and (request/resultCode ne '200' or request/duration gt 500)

更多信息在这里:

https://dev.applicationinsights.io/

编辑:

以下是添加 Application Insights 的方法:

  1. 单击您的应用服务,然后在“概览”面板中,您应该会看到 Application Insights 的链接:

应用服务概述

  1. 添加后再次点击应用服务并在设置部分选择应用程序洞察,然后滚动并选择 API 访问:

接口访问

  1. 单击创建 API 密钥

编辑2:

好的,一旦您创建了 API 密钥,您就可以将它与您的应用程序 ID 一起使用,以从 Application Insights 返回数据。 您可以使用具有以下格式的公共 API 来执行此操作:

https://api.applicationinsights.io/{version}/apps/{app-id}/{operation}/[path]?[parameters] X-API-Key:{key}

您可以使用此页面查询数据,也可以使用 Postman 或 cUrl 之类的内容:

https://dev.applicationinsights.io/apiexplorer/metrics

你需要提供可在 Azure 门户中找到的应用程序 ID 和生成的 API 密钥。 以下是获取过去 30 天请求总数的示例 GET 请求:

GET /v1/apps/{yourApplicationId}/metrics/requests/count?timespan=P30D HTTP/1.1
Host: api.applicationinsights.io
x-api-key: {yourAPIKey}

当 API 调用正常工作时,您可以使用任何您想要检索数据的客户端,例如 Angular、jQuery、C# HttpClient 等。

编辑 3:

好的,这里有一个基本但完整的 html 页面,用于从您的应用程序中检索应用程序洞察数据。 您需要做的就是用您的值替换“{applicationId}”和“{api-key}”。 您可以在 azure 门户中获得这些 - 单击“Application Insights”和“API Access”部分,如前面的屏幕截图所示。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>App Insights Sample</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
      function getAppInsightsData() {
        const userAction = async () => {
          const url = 'https://api.applicationinsights.io/v1/apps/{applicationId}/metrics/requests/count?timespan=P30D';
          const myHeaders = { headers: new Headers({  
              'x-api-key': '{api-key}'
            })
          }
          const response = await fetch(url, myHeaders);
          const myJson = await response.json();

          document.getElementById('p1').innerHTML = 'Date Range: ' + myJson.value.start + ' to ' + myJson.value.end + '. Requests: ' + myJson.value["requests/count"].sum;
        }
        userAction();
      }
    </script>
  </head>
  <body>
    <button type="submit" onclick="javascript:getAppInsightsData()">Get data using fetch</button>
    <div id='div'>
      <p id='p1'></p>
    </div>
  </body>
</html>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM