HTML Snippets in Slack on Image Render Error

[magikid]

Describe the bug
When requesting a dashboard through Slack, the hubot returns HTML snippets instead of images.

To Reproduce
Steps to reproduce the behavior:

1. Data source 'elasticsearch'
2. Command entered 'graf db dashboardname'
3. The bot posts HTML snippets instead of images

Expected behavior
I expected to see images and not HTML snippets.

Screenshots

Software:

• Grafana: 6.2.0
• Hubot: 3.3.2
• Adapter: Slack
• Node: 10.16.0
• NPM: 6.9.0

I'm not sure if the issue is with Grafana not returning what the hubot-grafana plugin expects or an issue with hubot-grafana itself. I'm happy to help diagnose and write a PR if the issue turns out to be in hubot-grafana.

[magikid]

Hm, ok, so I copied out the HTML for one of those snippets and loaded it up in a browser. It looks like the problem is with Grafana and not this plugin. Those snippets are all 500 responses.

It'd be nice if there were a way to capture that response as a 500 and return an error message instead of the HTML snippet though.

[stephenyeargin]

What's likely happening is that the /render endpoint is returning the HTML instead of the expected PNG, and our Hubot package is not catching that and displaying an error like it should. Can you verify that your Grafana server can render an image from a panel per usual? Sometimes it may be related to PhantomJS or something not working as expected.

[stephenyeargin]

It'd be nice if there were a way to capture that response as a 500 and return an error message instead of the HTML snippet though.

Yep, agree with that.

[stephenyeargin]

What will make that a bit of a challenge is that in the case of the Slack adapter, we're passing that URL along without checking to see if it's valid. This allows the bot to not wait around for the image to render (it can take a bit), but it puts us at the mercy of whatever Slack does in the event of a failure. Perhaps there's some type hinting we can do through the Slack API to say "No seriously, this should be an image. If it isn't, fail to render the image rather than returning the server output as text."

[gkaskonas]

I am getting these snippets even though grafana is able to render the dashboards. I only get the error when using hubot-grafana

Any ideas how I could debug this?

Everything seems to be ok, I get the correct URL and statusText from Grafana is OK but it returns an HTML instead of the PNG

I tried the same request with CURL and it worked fine

I think I found the problem.

The API key is not being passed to grafana in the header

  /**
   * Downloads the given URL.
   * @param {string} url The URL.
   * @returns {Promise<{ body: Buffer, contentType: string}>}
   */
  async download(url) {


    console.log(grafanaHeaders(null, null))
    return await fetch(url, {
      method: 'GET',
      headers: grafanaHeaders(null, null, "PUT_YOR_TOKEN_HERE), // By default the token is not set in there
    }).then(async (res) => {
      const contentType = res.headers.get('content-type');

      console.log(res.statusText)

      const body = await res.arrayBuffer();

      return {
        body: Buffer.from(body),
        contentType: contentType,
      };
    });
  }

After adding the key there it worked, however by default it is not passed. Is this a bug on your end?

[stephenyeargin]

Splitting this off into a new issue. Definitely a bug, will update there.