Research image / chart support for actions via markdown

[mikecote]

Investigate from a high level the implementation details of #49908.

[elasticmachine]

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

[mikecote]

This could and should be paired.

[pmuellr]

Is there a branch with the POC code for this?

[YulNaumenko]

POC PR is elastic/eui#3658

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.

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);
    });
};

[pmuellr]

To enable more elaborate formatting, we'll likely change Slack in the future to use the "blocks" framework it provides to be able to send a more structured message. We'd then include any images with Slack messages in a block per example 3 ^^^.

For email, we'll want want to embed the image as part of a multipart message - there's some convention about to how refer to an "attached" message from within another html part of the multipart message.

One potential issue is size. Presumably we'll get the image bytes when the alert runs, which means we then have to store it to use when the actions execute later as part of another task. So, those image bytes will end up in the action task params saved object, which isn't great. Another thought is to delay generating the image bytes till they are needed (the action is run), but by then, it may be too late, we may not be able to reconstruct an image after the fact.

This could also push us to implementing a story where we run all actions in the same task as the alert they were scheduled from. This makes action retries harder/impossible, but makes a lot of other aspects of running multiple actions much nicer.