Preface

There is a need recently , Is to put grafana Share the page on to the front end , As long as the front end gets the link, it can refresh the page by passing parameters .

So how do you do that ？ From the description , We can know that there are several problems to be solved ：

1. How the front end can see the page without logging in and opening the link ？
2. How to share links ？
3. How to make sharing links with parameters ？
4. How to get only the page you want ？

The following article focuses on these issues .

step1： Set login free

If you want to open it directly grafana Link without logging in , Need modification defaults.ini .

Get into grafana Installation directory , Editors can access anonymously ：

vi vi /opt/prometheus_env/grafana-8.4.7/conf/defaults.ini 

The modification is as follows ：

#################################### Anonymous Auth ######################
[auth.anonymous]
# enable anonymous access
enabled = true

And then restart grafana that will do .

step2： Share links

Sharing links is simple , Just click on the interface as shown in the figure below to share ：

Share	Select the style and copy the link

The link we copied is like this ：http:// Server address :3000/d/pcip2Ow7z/shi-shi-cai-ji-jian-kong-zhi-biao?orgId=1&from=1650593694199&to=1650615294199&theme=light&viewPanel=5

obviously , In this link , We can't pass in parameters , How to transfer parameters ？ In fact, we need to define a global parameter first .

step3： Set global parameters

Click the settings button in the upper right corner ：

Click on the variable module , and new A variable ：

Set a variable , The contents are as follows ：

Click on update after , Click again Save dashboard, On our template page , You can see an additional query input box ：

This is not the most critical , Let's go in and set up the panel , Set the variable name in the panel ：

ok, Come here , We can officially share the link

step4： Share links with parameters

Open link to share , And enter the content we want to query ：

Copy the browser link ：

http://10.194.188.37:3000/d/pcip2Ow7z/shi-shi-cai-ji-jian-kong-zhi-biao?orgId=1&from=1650594296047&to=1650615896047&viewPanel=5&var-exported_job=ylw-111

You can see that this link has a query condition ：var-exported_job, So as long as we provide this link to the front end , And let the front end pass in var-exported_job Value , You can query for different conditions .

But there is a problem , The interface has Grafana Status bar and menu bar , How can we get rid of it ？

step5： Optimize the interface

We add... After the link kiosk Parameters , You can get rid of , Link modified as ：

http://10.194.188.37:3000/d/pcip2Ow7z/shi-shi-cai-ji-jian-kong-zhi-biao?orgId=1&from=1650594296047&to=1650615896047&viewPanel=5&var-exported_job=ylw-111&kiosk

The effect is as follows ：

see , Can this interface be used directly from the front end .

Okay , Here we are , This article is finished , I hope I can help you ！