Dynamically embedding Grafana Dashboards and panels. (code snippet)

ReactSampleGrafanaComponent.js

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

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

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

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!

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