[SLO][Embeddable] Fix Kibana reporting screenshot issue

x-pack/plugins/observability/public/embeddable/slo/overview/handle_explicit_input.tsx

@@ -11,7 +11,7 @@ import { toMountPoint } from '@kbn/react-kibana-mount';
 import type { CoreStart } from '@kbn/core/public';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import type { EmbeddableSloProps, SloEmbeddableInput } from './types';
+import type { SloEmbeddableInput, EmbeddableSloProps } from './types';
 
 import { ObservabilityPublicPluginsStart } from '../../..';
 import { SloConfiguration } from './slo_configuration';

x-pack/plugins/observability/public/embeddable/slo/overview/slo_configuration.tsx

@@ -20,7 +20,6 @@ import {
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import { SloSelector } from './slo_selector';
-
 import type { EmbeddableSloProps } from './types';
 
 interface SloConfigurationProps {

x-pack/plugins/observability/public/embeddable/slo/overview/slo_embeddable.tsx

@@ -50,8 +50,19 @@ export class SLOEmbeddable extends AbstractEmbeddable<SloEmbeddableInput, Embedd
     this.updateInput({ title });
   }
 
+  public reportsEmbeddableLoad() {
+    return true;
+  }
+
+  public onRenderComplete() {
+    this.renderComplete.dispatchComplete();
+  }
+
   public render(node: HTMLElement) {
+    super.render(node);
     this.node = node;
+    // required for the export feature to work
+    this.node.setAttribute('data-shared-item', '');
     this.setTitle(
       this.input.title ||
         i18n.translate('xpack.observability.sloEmbeddable.displayTitle', {
@@ -69,6 +80,7 @@ export class SLOEmbeddable extends AbstractEmbeddable<SloEmbeddableInput, Embedd
         <KibanaContextProvider services={this.deps}>
           <QueryClientProvider client={queryClient}>
             <SloOverview
+              onRenderComplete={() => this.onRenderComplete()}
               sloId={sloId}
               sloInstanceId={sloInstanceId}
               lastReloadRequestTime={this.input.lastReloadRequestTime}

x-pack/plugins/observability/public/embeddable/slo/overview/slo_overview.tsx

@@ -20,7 +20,12 @@ import { paths } from '../../../../common/locators/paths';
 
 import { EmbeddableSloProps } from './types';
 
-export function SloOverview({ sloId, sloInstanceId, lastReloadRequestTime }: EmbeddableSloProps) {
+export function SloOverview({
+  sloId,
+  sloInstanceId,
+  lastReloadRequestTime,
+  onRenderComplete,
+}: EmbeddableSloProps) {
   const {
     uiSettings,
     application: { navigateToUrl },
@@ -39,6 +44,13 @@ export function SloOverview({ sloId, sloInstanceId, lastReloadRequestTime }: Emb
   useEffect(() => {
     refetch();
   }, [lastReloadRequestTime, refetch]);
+  useEffect(() => {
+    if (!onRenderComplete) return;
+
+    if (!isLoading) {
+      onRenderComplete();
+    }
+  }, [isLoading, onRenderComplete]);
 
   const percentFormat = uiSettings.get('format:percent:defaultPattern');
   const isSloNotFound = !isLoading && slo === undefined;
@@ -97,6 +109,7 @@ export function SloOverview({ sloId, sloInstanceId, lastReloadRequestTime }: Emb
       </LoadingContainer>
     );
   }
+
   const TargetCopy = i18n.translate('xpack.observability.sloEmbeddable.overview.sloTargetLabel', {
     defaultMessage: 'Target',
   });

x-pack/plugins/observability/public/embeddable/slo/overview/types.ts

@@ -10,6 +10,7 @@ export interface EmbeddableSloProps {
   sloId: string | undefined;
   sloInstanceId: string | undefined;
   lastReloadRequestTime?: number | undefined;
+  onRenderComplete?: () => void;
 }
 
 export type SloEmbeddableInput = EmbeddableInput & EmbeddableSloProps;