Add image/chart support to actions

[peterschretlen]

Kibana actions are mainly message/text based today. For example the slack action is backed by a webhook that has image support, but the action implementation itself only supports text via the message parameter.

Ideally actions from Kibana could include images of charts showing alert conditions or snapshots of dashboards. This would be useful not just for alerts but for user event drive actions, e.g. clicking "share on slack" from a dashboard chart.

There is a workaround today for slack - you could use a webhook action directly, and get access to the full formatting options . Ideally though we could make binding to it with limited parameters like message, image_url and kibana_url.

[elasticmachine]

Pinging @elastic/kibana-stack-services (Team:Stack Services)

[pmuellr]

I think it's certainly a "fallback" consideration that you can use the webhook action to do anything any of our other http-based actions do, with a richer interface.

But of course it would be nice to directly support things like "embed this image" and have it make sense across actions - the slack and email actions could certainly directly deal with such things - the other actions (pagerduty, webhook, index, server-log) kind of obviously can't.

So let's start with some basics. Is the image a bag of pixels with an image content/type that we can directly embed (somehow) in the outgoing message? Or is it a link to an image that Kibana can provide itself? Guessing the former, but the latter is conceptually simpler, as it's just an "image reference" (url) and not a bag of pixels (well, seems simpler anyway!). And long-term, we'd want both, but ... what do you want NOW-ish?

[peterschretlen]

So let's start with some basics. Is the image a bag of pixels with an image content/type that we can directly embed (somehow) in the outgoing message? Or is it a link to an image that Kibana can provide itself? Guessing the former, but the latter is conceptually simpler, as it's just an "image reference" (url) and not a bag of pixels (well, seems simpler anyway!). And long-term, we'd want both, but ... what do you want NOW-ish?

I don't think this is needed immediately because aside from PNG reports (which you can access via URL) I don't believe we have a way to create an image from a chart. I agree the form of the image (url vs base64 encoded image or other form) is probably the key question here, as well as which set of builtin actions we'd want to target.

cc @AlonaNadler who has been thinking about sharing of charts via actions.

[peterschretlen]

Looking at slack specifically, there appear to be two options:

• provide a publicly accessible URL of the image (in which case you can use webhook)
• use a slackbot and upload the file https://api.slack.com/methods/files.upload

Grafana provides both options: you can configure an external image store or use a bot integration

[AlonaNadler]

I don't believe we have a way to create an image from a chart. I agree the form of the image (url vs base64 encoded image or other form) is probably the key question here, as well as which set of builtin actions we'd want to target.

We are currently working on this capability cc: @markov00

The idea is that as a user I can select a dashboard panel and send it to slack channel or message with at least a preview and URL.

my own quick mock to explain the purpose

[peterschretlen]

We are currently working on this capability cc: @markov00

I noticed the addition of PNG export in Elastic Charts which is great and I think takes care of one of the obstacles.

The other is how to do this export server side as part of the alert. Once an alert condition is detected, we'd need to generate the chart, export it, and then either upload it to slack or make it a publicly accessible URL and pass the URL to the slack action. There's likely some overlap here with our reporting infrastructure @joelgriffith @tsullivan

[elasticmachine]

Pinging @elastic/kibana-reporting-services (Team:Reporting Services)

[elasticmachine]

Pinging @elastic/kibana-alerting-services (Team:Alerting Services)

[pmuellr]

There some some chatting on Slack re: images and actions, and Stacey mentioned the Slack file.upload capability. Seems like this might be a nice way to get images uploaded to Slack, that would be part of a Slack action execution. Not clear if we can upload a file without a channel, and then refer to it in the message itself via an Block Kit image element, which would be the ideal solution in terms of "nice looking slack messages". Worse case, we may have to post the text message, and follow that with image uploads to the same channel, but then those will get mixed in with any other messages being posted simultaneously. Will require a bit more research.

[pmuellr]

@peterschretlen noted offline that file.upload is in a different family of Slack APIs than what we are currently using - the "web apis" (what a name! 😄).

Here's the "web api" version of chat.postMessage: https://api.slack.com/methods/chat.postMessage

Might make sense to switch from what we're currently using, the "webhook" style API, to the web api one, since we'll want that for other capabilities in the future anyway.

Here's a link to the Slack SDK available for node, we're currently using @slack/webhook, the web apis are in a different package. https:/slackapi/node-slack-sdk

[YulNaumenko]

I did a research of possibility to use EuiMarkdownEditor for adding message templates with images and chart snapshots for actions like Slack and Email. There are a few blockers which doesn't allows to use it as a template builder for action messages:

1. Markdown editor Chart component supports only canvas usage for getting an image snapshot (using Export method mentioned above by @peterschretlen).
2. For both, Slack and Email we should transform the markdown to the specific formats - use markdown-it. for creating HTML for email message and implement/find translation library for Slack.
3. This is the link to PR with my research testing of the EuiMarkdownEditor on the possibility to upload files directly to a Slack channel with uploading image to a Slack and usage later this file URL to share in the different channels. Need some extra credentials for a bot token access to make it work.

[YulNaumenko]

In addition to the previous comment about posting images to Slack, I want to extend it with the info:

We have two different approaches on how to post a Slack message with an image. Both is implemented in my PR

1. Upload image directly with message:
   Upload an image directly to Slack and share it in a channel. Within that request you can also add a comment that will appear as message above the images. This is the easiest approach, however you comment is limited to one string.

Slack WebAPI method: files.upload with these arguments:

channels: ID of one or multiple channel for the image to appear in
initial_comment: Your message

2. Post message with image block / attachment
   Alternatively you can add an image to your normal message either as image block or secondary attachment. This only works with a public URL to your image file, so you first need to upload your image to an image hoster (which can be your Slack workspace) to get the public URL.

Fo doing that we will use Slack as image hoster.

WARNING! It will take from 5 - 10 seconds to have the file available after upload.

Step 1 - Upload image to Slack
Slack WebAPI method: files.upload with no special arguments, but make sure to get the file ID from the response. Don't include the channels argument or the image will be posted visible into those channel.

Step 2 - Create public URL
Next you have to mark the uploaded file as public. Only then will it be accessible through its public_url property

Slack WebAPI method: files.sharedPublicURL with the file ID as argument.

Next you need to construct the direct image link from the link to website / permalink_public property of the file.

The website link you get from permalink_public has the format:

https://slack-files.com/{team_id}-{file_id}-{pub_secret}
The direct link to the image has the format:

https://files.slack.com/files-pri/{team_id}-{file_id}/{filename}?pub_secret={pub_secret}
So you just need to extract the pub_secret from permalink_public and you should be able to construct the direct link to the image. The other parameters you can get from your file object.

Step 3 - Send message
Finally compose your message with the image URL either as Image Block or in a secondary attachment and submit it using a method of your choice.

Slack WebAPI method: chat.PostMessage or any other method for sending message incl. incoming Webhooks.
Example for a chat.PostMessage:

axios
    .post(
      'https://slack.com/api/chat.postMessage',
      {
        'channel': 'C013S4UAXBN',
        'blocks': [
          {
            'type': 'image',
            'title': {
              'type': 'plain_text',
              'text': 'Please enjoy this image of a chart'
            },
            'block_id': 'image4',
            'image_url': `https://files.slack.com/files-pri/${teamId}-${slackFileId}/${slackFileName}?pub_secret=${pubSecret}`,
            'alt_text': 'A very important chart data.'
          }
        ]
      },
      axiosOptions,
    )
    .then((slackFile) => {
     console.log(slackFile);
    });
};

[mikecote]

Two research related issues to this are now closed but worth looking at their comments:

• Research how alerting will render charts on the server side Research how alerting will render charts on the server side #54987
• Research reporting action type Research reporting action type #54988

[mikecote]

Moving from 7.x - Candidates to 8.x - Candidates (Backlog) after the latest 7.x planning session.

[mikecote]

Closing due to lack of activity.