从“应用程序见解"(Azure Portal)中获取数据以将其显示在asp.net Web应用程序的网页上 [英] Fetching data from Application insights (Azure Portal) to display it on a web page in asp.net web application
问题描述
我已经使用应用程序见解使用Azure门户配置了.net Web应用程序.现在我想要的是，门户中显示的详细信息应该显示在.net Web应用程序的网页上.我不知道该怎么做，并希望有人在这方面帮助我.还共享了我实际上想从Azure门户获取的快照，以在应用程序的网页上显示为网格报告. [
I have configured my .net web application with azure portal using application insights. Now what I want is that the details that are shown in the portal should be displayed on my web page of my .net web app. I don't know hoe to do it and want someone to help me in this regard. T am also sharing the snapshot of what actually I want to fetch from my azure portal, to display as a grid report on my application's web page. [
推荐答案
有一个API可从Application Insights检索数据.从文档中，您可以查询并与Application Insights为您的应用程序收集的性能，可用性和使用情况数据集成".和使用功能强大且简单的REST API访问应用程序的所有事件和指标数据".
There's an API for retrieving data from Application Insights. From the documentation you can "Query and integrate with the performance, availability and usage data collected by Application Insights for your application" and "Access all your app's event and metric data with a powerful and simple REST API".
一些样品要求:
返回最后一天的请求总数(timespan = P1D):
Return the total number of requests in the last day (timespan=P1D):
GET /v1/apps/DEMO_APP/metrics/requests/count?timespan=P1D HTTP/1.1
最近6小时每小时的平均服务器响应时间(间隔= PT1H):
Average server response time per hour (interval=PT1H) for the last 6 hours:
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请求:
List GET requests which failed or took longer than 0.5 seconds:
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/
以下是添加应用洞察"的方法:
Below is how you add Application Insights:
- 单击您的App Service，然后在概述"面板中，您将看到"Application Insights"的链接:
- 添加此内容后，再次单击App服务，然后在设置"部分中选择应用程序见解"，然后滚动并选择"API访问":
- 点击创建API密钥
好，一旦创建了API密钥，就可以将其与应用程序ID一起使用，以从Application Insights返回数据.您可以使用具有以下格式的公共API来做到这一点:
Ok once you create the API key you can use this along with your application ID to return data from Application Insights. You can do this using the public API which has this format:
https://api.applicationinsights.io/{version}/apps/{app-id}/{operation}/[path]?[parameters] X-API-Key:{key}
您可以使用此页面来查询数据，也可以使用Postman或cUrl之类的内容:
You can use this page to query the data or you can use something like Postman or cUrl:
https://dev.applicationinsights.io/apiexplorer/metrics
您需要提供您在Azure门户中找到的应用程序ID和生成的API密钥.下面是一个示例GET请求，该请求获取最近30天的请求总数:
You'll need to provide your application ID which you'll find in your Azure portal and the API key you generated. Below is an example GET request that gets the total number of requests for the last 30 days:
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等.
When you have the API call working correctly you can use whatever client you want to retrieve the data e.g. Angular, jQuery, C# HttpClient, etc.
好吧，这是一个基本但完整的html页面，用于从您的应用程序中检索应用程序见解数据.您所需要做的就是替换"{applicationId}"和"{api-key}"与您的价值观.您可以在azure门户网站中找到这些文件-点击"Application Insights"(应用程序分析)和"API访问"部分，如上一个屏幕截图所示.
Ok so here's a basic but complete html page to retrieve app insight data from your application. All you need to do is replace "{applicationId}" and "{api-key}" with your values. You get these in the azure portal - click on the "Application Insights" and "API Access" sections as shown in the previous screen shots.
<!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>
这篇关于从“应用程序见解"(Azure Portal)中获取数据以将其显示在asp.net Web应用程序的网页上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
