[FEATURE_REQUEST] image widgets with custom header

[maxisam]

Is your feature request related to a problem? If so, please describe.

It would be really helpful if we can have a way to add auth header, so this widget can access private api to get image.

This is useful for Grafana, because it generates images with api key in the header

Describe the solution you'd like

any way to add an api key in the header

Priority

Medium (Would be very useful)

Is this something you would be keen to implement

No response

[Lissy93]

Heya @maxisam
Should be possible, yup. The source for the image widget is in ImageWidget.vue. Would you be up for submitting a PR for this?

[Lissy93]

All the functionality for custom headers etc is already there (in the WidgetMixin). So it's just a case of tying it together.

You'd just need to add an option to fetch the image via an XHR request, instead of embedding it directly.

It'd be something like this (totally untested, just vague idea)

computed: {
  imagePath() {
    if (!this.options.imagePath) this.error('You must specify an imagePath');
    return this.options.imagePath;
  },
  customHeaders() {
    return this.options.customHeaders || {};
  },
},
methods: {
  fetchData() {
    this.makeRequest(this.imagePath, this.customHeaders).then(this.processData);
  },
  processData(imageResponse) {
    const imageElement = this.$refs.image; // need to add ref to <img> tag first
    const reader = new window.FileReader();
    reader.readAsDataURL(imageResponse); 
    reader.onload = () => imageElement.setAttribute("src", reader.result);
  }
}

Or, this could be done without changing any of the code, by using a dynamic widget.

[maxisam]

Thanks for quick response!. I don't know which dynamic widget you were referring. https://dashy.to/docs/widgets#dynamic-widgets. I feel like the future API widget might work.

also I wanna double check with you. I think this is the only way to show Grafana dashboard behind authentication right?

Widgets | Dashy

Dashy has support for displaying dynamic content in the form of widgets. There are several built-in widgets available out-of-the-box as well as support for custom widgets to display stats from almost any service with an API.

[maxisam]

just gave you a quick update on this.

we need to have responseType in makeRequest so we can use different responseType like blob.

However, after I did all changes, I still can't get it to work. I can get the blob and put the base64 into url.

But the content-type was wrong. I got text/html instead. If I use postman, the return is content type is image/png.

Is it possible it got mess up by the proxy, because I have to enable useProxy to bypass CORS.

On the side note:

dashy/services/print-message.js

Line 35 in 93911c2

+ `┃ ${chars.CYAN}Welcome to Dashy! 🚀${blanks(55)}${chars.GREEN}┃${chars.BR}`

this is off on my screen. Not sure if it happens to yours. 54 works fine to me

BTW, thanks for the great project

[Lissy93]

I'm not sure if this is relevant, maybe their setup is completely different - but I have seen some users with Grafana widgets as (I think) iframes, like this one and this one.

But if that doesn't help, I will proceed with trying to add an option to fetch the image via XHR request so that you can pass custom headers.

Another option, in the meantime, depending on how familiar you are with web technologies, but you can build your own widget, either as an embedable or as a simple web page for the iframe widget. That way you won't have any of Dashy's restrictions.

[liss-bot]

This issue has gone 6 weeks without an update. To keep the ticket open, please indicate that it is still relevant in a comment below. Otherwise it will be closed in 5 working days.

[maxisam]

I think I will try iframe with anonymous. Thanks for helping

…

On Fri, Jul 1, 2022, 5:56 PM Alicia Sykes ***@***.***> wrote: I'm not sure if this is relevant, maybe their setup is completely different - but I have seen some users with Grafana widgets as (I think) iframes, like this one </~https://github.com/Lissy93/dashy/blob/master/docs/showcase.md#dipans-dash> and this one </~https://github.com/Lissy93/dashy/blob/master/docs/showcase.md#raspberry-pi-docker-dashboard> . But if that doesn't help, I will proceed with trying to add an option to fetch the image via XHR request so that you can pass custom headers. — Reply to this email directly, view it on GitHub <#770 (comment)>, or unsubscribe </~https://github.com/notifications/unsubscribe-auth/AADPQZ5NQPOT4PPXXV3UDMLVR5ZR3ANCNFSM5Z7UZ52A> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[Lissy93]

Closing as stale. Let me know in a comment if still relevant.