[Meta] Dashboard panel Share-to

[streamich]

Summary

Kibana supports sharing dashboards today, but there is no way to share a single panel. There are many permutations of the general need in our customer requests. The goal of this feature is to allow sharing of a dashboard panel to multiple destinations in multiple formats.

User stories

Some example use cases of this feature are:

• As a user, I can share a PNG image to my clipboard, so I can paste it into other applications.
• As a user, I can share a URL to my clipboard, so I can send users to a fullscreen panel that reflects its state at the time it was shared.
• As a user, I can share a URL to my clipboard, so I can send users to a fullscreen panel that reflects current data.
• As a user, I can share directly to slack, so that Slack shows a nice preview instead of a bare URL.
• As a user, I can save a panel as a PDF so it can be suitable for printing or a larger display.

Tasks

Panel sharing functionality should live in X-Pack (Gold).

• [x] New context menu design
• [x] Share icon in embeddable panels
• [x] Spike: generate PNG from dashboard Lens panels
• [ ] Dashboard panel landing page
• Sharing actions
  • [ ] Copy link
  • [ ] Send to Slack
  • [ ] Send to e-mail
  • [ ] Copy as .png
  • [ ] Download as .pdf
• [ ] Toggle in Advanced Settings.

Ideas

• [ ] Create a crawlable public .html page which Slack (or other services) can crawl to show a preview image inside a Slack channel.
• [ ] Copy as structured data, where we use clipboard APIs to copy data in various formats.
  • Visualizations can copy .png images into clipboard, and CSV text data as backup.
  • Table panels can copy HTML tables into the clipboard.

Designs

Figma mocks

---

Parent issue: https://github.com/elastic/kibana/issues/92603

[elasticmachine]

Pinging @elastic/kibana-app-arch (Team:AppArch)

[streamich]

• [ ] Sync with Marco.

[Dosant]

@streamich, @AlonaNadler, some ideas I had during today meeting, not sure if it would be useful, but just food for thought:

Share link with preprendered meta tags to have a nice preview.

This seems hard to implement, but if we do, we will get a nice and seamless previews in any medium. This basically allows to share both link and image using 1 url.

This could be an improvement of initial "Copy url" functionality without any images. so would be nice do design initial implementation with this future use case in mind.

The would look something like this:

1. User generates special link from dashboard and pastes it somewhere (e.g. slack channel).
2. When kibana server receives request for this link instead of sending static kibana root html, we modify its head with meta tags:

e.g.

<meta property="og:title" content="Vis title" />
<meta property="og:description" content="Vis description" />
<meta property="og:image" content="kibana/get_nice_vis.pgn" />
<meta property="og:url" content="url" />

<!-- any other tags usefull for content preview -->

3. These tags will help client (slack in this example) or other medium to generate a nice preview for a link.
4. When user navigates to link, user opens kibana dashboard deeplinked into needed state.

(not sure about security model here and what is the expectation)

Please see this in Slack docs: https://api.slack.com/docs/message-link-unfurling#classic_unfurling

Slack app unfurling

Not sure if we already have a slack app for kibana integration or if this is planned. But with that we could intercept any kibana urls and enrich the preview in any way we'd want. This would work for any kibana link.

The flow would look something like this:

1. User has kibana app installed in Slack
2. Pasting any kibana link anywhere in that Slack would trigger event in kibana server and will allow to format the preview. We could generate an image in that moment and send it to the client

This is similar to what you see when you past github link into slack

https://api.slack.com/docs/message-link-unfurling#slack_app_unfurling

btw, issue of discoverability of this potentially useful kibana slack app is easy to solve. This is how pasting a GitHub link into slack with no installed GitHub app looks:

[streamich]

@Dosant nice idea, we may also use oEmbed and/or JSON-LD. The only thing is security, we need to make that visualization "public" then, I guess.

[Dosant]

@streamich, still worth exploring. I guess we could do that content in <head/> meta tags is publicly accessible including vis image, but to access vis in Kibana user would still require to have creds. We could make this behaviour configurable when user is creating the link. we'd also explicitly explain "access" concerns.

[AlonaNadler]

Nice idea @Dosant !!

The ultimate goal: send url with an image when sharing from Kibana In the meeting, we discussed a few options to share I wanted to share how I see these options and the possible outcome :

• Share to slack - ability to write a short message and choose a channel/person to share to

  • Pros:
    • Sharing to slack directly from Kibana has been a priority for a while
    • Slack configuration is already taken care of by alerting the team
  • Cons:
    • Currently, only URL is possible, no way to share an image
    • Using the action set up, users will only be able to share to pre-configured channels. There will be no way to share ad-hoc if a person/channel was not pre-configured. I think this limitation makes share to slack not flexible enough for people to share with other peers and channels

• Share to email - the ability to add an email and a short text along with the URL

  • Pros:
    • Could be nice simple solution to share URL with users via email which everyone have.
  • Cons:
    • Similar to share to slack it is only possible to share a URL with no preview.
    • Users will not have the autocomplete they used to from email clients that helps fill the email address. Users will need to type the full email address, might be a drawback for users

• Copy image - ability to copy a PNG image of the chart which can be shared anywhere by pasting

  • Pros:
    • using Elastic charts copy png, users will be able to paste the chart anywhere (Slack, email, Whatsapp etc..)
    • Unless I'm wrong it seems to be the only short term way to share an image easily
  • Cons
    • It seems there is no way to share URL with the image

• Copy link

  • Pros:
    • similar to copy image users can paste the URL anywhere they want
    • Perhaps there is a way to include an image in the future, needs exploration
      • Cons:
    • Open questions in regards to where to drop the users, a full screen of the panel? a dashboard with multiple panels? If dropped in a dashboard, since there is no preview in the URL, how will users know which panel was shared?

Other open questions:

• Kibana URLs are sometimes very long, sharing a 1500 character of a URL is not an ideal experience. Can we avoid sharing an extremely long URL?(Dashboard URL with few filters and a different time range than the saved time range is very long)

Suggestion for next steps:

• As an MVP I think the ability to copy an image and copy URL will be the most used and the most flexibility. people are used to pasting in slack, email and everywhere and the mocks make it discoverable and quick.
• I liked @Dosant idea above and think it is worth further research setting a few guidelines regarding security ahead of time.

cc: @alexh97

[elasticmachine]

Pinging @elastic/kibana-app-services (Team:AppServicesUx)

[mdefazio]

We had this previous concept that may be a starting point as we revisit this discussion...

Shows the maximized panel view (would also be the landing destination from the shared link)

[vadimkibana]

Thank you everyone who contributed, closing this one as being old and now being tracked in Jira epic.

[alexfrancoeur]

@elastic-jb isn't this still on our roadmap? Or are we planning to open up a new issue when we kick off work?