This topic describes how to embed a Grafana dashboard in a self-managed web application. This way, you can view the Grafana dashboard in your application without the need to switch between systems or log on to Grafana.
Background information
The operation to embed a Grafana dashboard in a self-managed web application brings the following benefits:
You can log on to your own system and browse the embedded Grafana dashboard.
You can hide the top navigation bar and left-side navigation pane of Grafana. For more information, see Step 5.
Workflow
The following figure shows how an external system accesses Grafana.
Step 1: Create a RAM user and grant permissions to the RAM user
Use your Alibaba Cloud account to create a RAM user and authorize the RAM user to call Security Token Service (STS) to assume RAM roles.
Log on to the RAM console.
In the left-side navigation pane, choose .
On the Users page, click Create User.
On the Create User page, set the Logon Name and Display Name parameters in the User Account Information section, select Console Access in the Access Mode section, and then click OK.
ImportantRAM automatically generates an AccessKey pair for a RAM user. This way, the RAM user can access STS by calling the required API operations. For security purposes, the RAM console allows you to view or download an AccessKey secret only once. Therefore, you must keep the related AccessKey secret strictly confidential when you create an AccessKey pair.
On the Users page, find the created RAM user and click Add Permissions in the Actions column.
In the Policy section of the Grant Permission panel, add AliyunSTSAssumeRoleAccess, and click Grant permissions.
Check the authorization result and click Complete.
Step 2: Create a RAM role and grant permissions to the RAM role
Create a RAM role and grant the RAM role the permissions to access the Application Real-Time Monitoring Service (ARMS) console. Then, the RAM user can assume the RAM role to access the ARMS console.
In the left-side navigation pane of the RAM console, choose .
On the Roles page, click Create Role.
On the Create Role page, perform the following operations:
In Select Trusted Entity section of the Select Role Type step, select Alibaba Cloud Account and click Next.
In the Configure Role step, enter a role name in the RAM Role Name field and click OK.
In the Finish step, click Add Permissions to RAM Role.
In the Policy section of the Grant Permission panel, add the desired policy, and click Grant permissions.
You can grant the following permissions on ARMS to a RAM role:
AliyunARMSFullAccess: the full access permissions on ARMS
AliyunARMSReadOnlyAccess: the read-only permissions on ARMS
Check the authorization result and click Complete.
Step 3: Obtain the temporary AccessKey pair and STS token
Log on to the self-managed web application and call the AssumeRole operation of STS on the web server to obtain the temporary AccessKey pair and STS token. They are used as temporary credentials. For more information about the AssumeRole operation, see AssumeRole.
You can call the AssumeRole operation by using one of the following methods:
Use OpenAPI Explorer.
Use RAM SDK for Java.
RAM SDK for Java is used as an example.
Set the following parameters when you use the SDK for Java:
String accessKey = "<accessKeyId>"; // The AccessKey ID of the RAM user.
String accessSecret = "<accessKeySecret>"; // The AccessKey secret of the RAM user.
String roleArn = "<roleArn>"; // The Alibaba Cloud Resource Name (ARN) of the RAM role.
The AccessKey ID and AccessKey secret of the RAM user are provided when the RAM user is created. For more information, see Create an AccessKey pair.
Perform the following steps to obtain the ARN of the RAM role:
In the left-side navigation pane of the RAM console, choose . In the lower part of the Roles page, click the name of the RAM role whose ARN you want to obtain.
On the page that appears, copy the value of the ARN parameter in the Basic Information section.
Step 4: Obtain the logon token
After you call the AssumeRole operation of STS to obtain the temporary AccessKey pair and STS token, call the GetSigninToken operation to obtain the logon token.
The temporary STS token may contain special characters. Before you use the token, you must use the URL encoding method to encode the special characters.
Sample request:
https://signin.aliyun.com/federation?Action=GetSigninToken
&AccessKeyId=<The temporary AccessKey ID that is returned by STS>
&AccessKeySecret=<The temporary AccessKey secret that is returned by STS>
&SecurityToken=<The token that is returned by STS>
If your self-managed web application is deployed by a virtual network operator, you must add the &TicketType=mini
parameter.
Step 5: Generate a logon-free URL
Use the obtained logon token and URL of the Grafana dashboard that you want to embed to generate a logon-free URL. You can use the URL to access the Grafana dashboard from your self-managed web application without the need to log on to Grafana.
A logon token is valid for 3 hours. We recommend that you configure the URL in the self-managed web application to generate a new logon token on each request.
Obtain the URL of the dashboard that you want to embed from Grafana.
NoteTo hide the left-side navigation pane, add
kiosk=tv
to the search section of the URL.To hide the top navigation bar and the left-side navigation pane, add
kiosk
to the search section of the URL.To hide the top navigation bar and the left-side navigation pane but keep the time selector in the upper-right corner, add
kiosk=tv2
to the search section of the URL.
Use the logon token and the URL of the Grafana dashboard to generate a logon-free URL.
http://signin.aliyun.com/federation?Action=Login &LoginUrl=<A URL that returns HTTP status code 302 and redirects you to the self-managed web application> &Destination=<The URL of the Grafana dashboard> &SigninToken=<The obtained logon token>
Use the logon-free URL to access the ARMS console page in your browser.