[Blazor] iframe 태그 이용하여 grafana DashBaord HTTPS URL 불러오기

개요

• Blazor 에서 iframe 태그를 이용하여 grafana DashBoard 를 불러올 수 있는지 PoC 진행하였습니다.
• grafana DashBoard URL이 HTTPS 인 경우, 불러오는 방법에 대해서 정리 진행하였습니다.
• URL이 HTTP 인 경우에 불러오는 방법은, 따로 정리하여 포스팅 진행할 예정입니다.

개발환경

• 개발 환경은 다음과 같습니다.
  • Visual Studio 2022
  • .NET 6
  • Blazor Server

Blazor 예제 코드

• Blazor Server 로 프로젝트를 생성하게 되면, 기본으로 Counter.razor 페이지가 생성됩니다.
• 해당 페이지의 코드를 아래와 같이 추가하였습니다.

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@if (currentCount % 2 == 0)
{
    <iframe width="1560" height="1015" src="https://192.168.90.21:3000/d/RAh6pC67z8/adc-edge-monitoring?orgId=1&kiosk=tv" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
}
else
{
    <iframe width="1560" height="1015" src="https://192.168.90.21:3000/d/RAh6pC67z8/adc-edge-monitoring?orgId=1&kiosk=tv" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
}
@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

• 위와 같이 currentCount 변수값에 따라서, iframe URL 이 불러오는지 테스트 진행하였습니다.

실행 결과

• 테스트 진행 결과, 정상적으로 그라파나 DashBoard 불러오는 것을 확인할 수 있습니다.