[Synthetics] Status overview embeddable

[shahzad31]

Summary

Added status overview embeddable !!

status.panel.mov

[elasticmachine]

Pinging @elastic/obs-ux-management-team (Team:obs-ux-management)

[obltmachine]

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

• /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
• run docs-build : Re-trigger the docs validation. (use unformatted text in the comment!)

[mgiota]

@shahzad31 This is the name with which the embeddable gets registered to the embeddable registry. I recommend synthetics is include in the name, something like SYNTHETICS_OVERVIEW_EMBEDDABLE

[mgiota]

@shahzad31 Every embeddable needs to have a data-shared-item="" in order to not report timeout errors in the Kibana screenshot tool. In the Dashboard app you have the option to export the Dashboard as PDF.

Right now it reports a timeout error because it is missing this attribute. Try to add following:

 <div
              data-shared-item="" // TODO: Remove data-shared-item and data-rendering-count as part of https://github.com/elastic/kibana/issues/179376
            >
              <StatusOverviewComponent />
            </div>

This manual adding of the data-shared-item attribute in each embeddable is temporary and should be holistically addressed later on in this issue.

You can find more information about this here

[mgiota]

@shahzad31 In general it looks good! I was able to add a new Synthetics Status Overview embeddable. I left a few comments regarding removing the edit option from your embeddable and adding the data-shared-item attribute. I have a few more comments:

• Refresh button: I would expect the embeddable to react to this button. As a quick test, I added a new monitor in the Synthetics app and then I clicked the Refresh button in the Dashboard app. I would expect the embeddable to react to this change, without me having to reload whole page
• Initial dimensions We have a way to control the initial dimensions of the panel. I suggest we make the panel smaller by default. Let me search how I handled it in the overview embeddable and I will share.

[mgiota]

@ThomThomson This is a new Observebility embeddable that @shahzad31 is adding!

[mgiota]

@shahzad31 Can you make the new Synthetics panel clickable, so when users click on the panel, they are redirected to the Synthetics app?

We should also think how we handle empty state. When user has no monitors set up, we should display message and a link to the Synthetics app.

[jloleysens]

Kibana.jsonc lgtm

[mgiota]

I approve this PR. As discussed we will handle the clicking/filtering/empty state in a follow up PR!

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: ed4bd2c
• Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-188807-ed4bd2c56fcf
• Observability Deployment

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
synthetics	913	973	+60

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
synthetics	854.5KB	847.8KB	-6.8KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
synthetics	19.5KB	40.0KB	+20.5KB

History

• 💔 Build #222786 failed d7d3d46

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[ThomThomson]

@mgiota thanks for the tag!

One thing I'm noticing straight away here is that the status doesn't stretch to fill the vertical panel space on the Dashboard. This makes me worry that if the panel is too small content will be cut off. @andreadelrio would you mind helping out with a design audit of this?

@nreese we should prioritize that functional test that fails when a new item is added to the add panel menu so we can get pinged for review when folks add a new embeddable type.