Skip to content

Instantly share code, notes, and snippets.

@thenishchalraj
Last active March 21, 2023 13:05
Show Gist options
  • Save thenishchalraj/46b943cfd91fa46a818efdcc1b8aed07 to your computer and use it in GitHub Desktop.
Save thenishchalraj/46b943cfd91fa46a818efdcc1b8aed07 to your computer and use it in GitHub Desktop.
Dynamically embedding Grafana Dashboards and panels. (code snippet)
import React from 'react'
//configuration file that has the values stored for users
import config from './config'
class SampleDashboard extends React.Component {
render() {
//suppose user is received from props
const { user } = this.props
return (
<>
{/** different dashboards for different organizations
* depending upon the parameters their panels value changes
*/}
{(config.roles.user1_org1 === user.role.id) &&
<iframe
src={`https://${config.sampleDash.organization1.username}:${config.sampleDash.organization1.password}@authproxy.sampleDomain/z/aaaaaaaaa/organization_1?orgId=1&from=now-90d&to=now&var-org_user=${type}&var-state=${state}&var-top=5&kiosk=tv`} />
}
{(config.roles.user2_org3 === user.role.id) &&
<iframe
src={`https://${config.sampleDash.organization3.username}:${config.sampleDash.organization3.password}@authproxy.sampleDomain/z/ccccccccc/organization_3?orgId=3&from=now-90d&to=now&var-org_user=${user.username}&var-city=${city}&kiosk=tv`} />
}
{(config.roles.user3_org2 === user.role.id) &&
<iframe
src={`https://${config.sampleDash.organization2.username}:${config.sampleDash.organization2.password}@authproxy.sampleDomain/z/bbbbbbbbb/organization_2?orgId=2&from=now-90d&to=now&var-org_user=${user.username}&kiosk=tv`} />
}
</>
)
}
}
export default SampleDashboard
@thenishchalraj
Copy link
Author

thenishchalraj commented Jan 14, 2021

The blog to understand the above code snippet is here.

Show your support by sharing this to the community by a re-tweet here.

OMG! Thanks a lot team. I just wrote it for the community and it's been loved by all.
This is really a blessed day.#grafana #dashboards #dynamic #react #components https://t.co/diIAOGYJP0

— Nishchal Raj August 12, 2020

@uzairbangee
Copy link

Hey, I am implementing Iframe like this
http://username:password@authproxy.domain/d/id/metering?orgId=7&from=1611638741240&to=1611681941241&panelId=2
But it doesn't work and also giving a browser error that the browser doesn't support URL like this.
ERROR:
Subresource requests whose URLs contain embedded credentials (e.g. https://user:pass@host/) are blocked. See https://www.chromestatus.com/feature/5669008342777856 for more details.

Can you please help me with this?
Thank you

@thenishchalraj
Copy link
Author

Hey @uzairbangee
Chrome has blocked those type of URLs and hence you won't be able to access it, either try using Firefox browser (it will ask for confirmation on client side) or change the embedded credentials URL.

Happy debugging!

@AMJAD195
Copy link

AMJAD195 commented Oct 5, 2021

Hi when i share my url through auth proxy it shows not found error

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment