How to embed quicksight dashboard into React application [closed] - amazon-quicksight

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
enter image description hereHow to integrate amazon quick sight in to react application
1.how to import aws-sdk
2.where to get the dashboard ID

Answer 1

You are going to need to get a url for your quicksight graphs whether that is from aws or whether you are using the sdk in your api. I'm currently getting a new url from my nodejs api.
const AWS = require("aws-sdk");
exports.url_aws = (req, res) => {
let awsCredentials = {
region: "us-east-1",
accessKeyId: process.env.KEY_ID,
secretAccessKey: process.env.ACCESS_KEY
};
AWS.config.update(awsCredentials);
let params = {
RoleArn: "<the arn role and iam id>",
RoleSessionName: "embeddingsession",
};
let sts = new AWS.STS({
apiVersion: "2011-06-15"
});
sts.assumeRole(paras, (err, data) => {
if (err) {
console.log(err); // account for error;
res.end();
}
AWS.config.update({
accessKeyId: data.Credentials.AccessKeyId,
secretAccessKey: data.Credentials.SecretAccessKey,
sessionToken: data.Credentials.SessionToken
});
AWS.config.update({
region: "<your region>"
});
let quicksight = new AWS.QuickSight({
apiVersion: '2018-04-01',
region: '<Your region>'
});
let getdashboardparams = {
AwsAccountId: "<Your account Id",
DashboardId: "<Dashboard Id you want to display",
IdentityType: "QUICKSIGHT",
ResetDisable: false, // or true, what ever you prefer
SessionLifeTimeInMinutes: "<writes the minutes inside the quotes",
UndoRedoDisabled: false, // or true...
UserArn: "<the user arn>"
};
quicksight.getDashboardEmbedUrl(getdashboardparams, (err, data) => {
if (err) console.log("Quicksight GetDashboard Error",err, err.stack);
else console.log(data);
res.json(data);
console.log("\nEND \n")
res.end();
return;
});
});
};
That's how I have it setup in my backend, in the front-end in react, I used react-iframe.
https://www.npmjs.com/package/react-iframe
And basically just put the url in the url prop.
Hope this helps.