Merge branch 'main' into profiling/update-onboarding-instructions

packages/shared-ux/button/exit_full_screen/impl/src/exit_full_screen_button.component.tsx

@@ -12,6 +12,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
+  EuiImage,
   useEuiTheme,
   makeHighContrastColor,
 } from '@elastic/eui';
@@ -37,7 +38,7 @@ const description = i18n.translate(
 /**
  * A presentational component that renders a button designed to exit "full screen" mode.
  */
-export const ExitFullScreenButton = ({ onClick, className }: Props) => {
+export const ExitFullScreenButton = ({ onClick, className, customLogo }: Props) => {
   const { euiTheme } = useEuiTheme();
   const { colors, size, border } = euiTheme;
 
@@ -63,7 +64,11 @@ export const ExitFullScreenButton = ({ onClick, className }: Props) => {
       >
         <EuiFlexGroup component="span" responsive={false} alignItems="center" gutterSize="s">
           <EuiFlexItem component="span" grow={false}>
-            <EuiIcon type="logoElastic" size="m" />
+            {customLogo ? (
+              <EuiImage src={customLogo} size={16} alt="customLogo" />
+            ) : (
+              <EuiIcon type="logoElastic" size="m" />
+            )}
           </EuiFlexItem>
           <EuiFlexItem component="span" grow={false} data-test-subj="exitFullScreenModeText">
             {text}

packages/shared-ux/button/exit_full_screen/impl/src/exit_full_screen_button.test.tsx

@@ -17,6 +17,7 @@ import {
 
 import { ExitFullScreenButton } from './exit_full_screen_button';
 import { ExitFullScreenButtonKibanaProvider, ExitFullScreenButtonProvider } from './services';
+import { of } from 'rxjs';
 
 const componentServices = getExitFullScreenButtonServicesMock();
 const kibanaServices = getExitFullScreenButtonKibanaDependenciesMock();
@@ -103,6 +104,16 @@ describe('<ExitFullScreenButton />', () => {
       expect(kibanaServices.coreStart.chrome.setIsVisible).toHaveBeenCalledTimes(0);
     });
 
+    test('renders custom logo', () => {
+      kibanaServices.coreStart.customBranding.customBranding$ = of({
+        logo: 'imageSrcAsBase64encodedstring',
+      });
+      const component = kibanaMount(
+        <ExitFullScreenButton onExit={jest.fn()} toggleChrome={false} />
+      );
+      expect(component.render()).toMatchSnapshot();
+    });
+
     describe('onExit', () => {
       const onExitHandler = jest.fn();
       let component: ReactWrapper;

packages/shared-ux/button/exit_full_screen/impl/src/exit_full_screen_button.tsx

@@ -13,6 +13,7 @@ import useMountedState from 'react-use/lib/useMountedState';
 
 import type { ExitFullScreenButtonProps as Props } from '@kbn/shared-ux-button-exit-full-screen-types';
 
+import useObservable from 'react-use/lib/useObservable';
 import { ExitFullScreenButton as Component } from './exit_full_screen_button.component';
 import { useServices } from './services';
 
@@ -22,8 +23,10 @@ import { useServices } from './services';
  */
 export const ExitFullScreenButton = ({ onExit = () => {}, toggleChrome = true }: Props) => {
   const { euiTheme } = useEuiTheme();
-  const { setIsFullscreen } = useServices();
+  const { setIsFullscreen, customBranding$ } = useServices();
   const isMounted = useMountedState();
+  const customBranding = useObservable(customBranding$);
+  const customLogo = customBranding?.logo;
 
   const onClick = useCallback(() => {
     if (toggleChrome) {
@@ -70,5 +73,5 @@ export const ExitFullScreenButton = ({ onExit = () => {}, toggleChrome = true }:
     z-index: 5;
   `;
 
-  return <Component css={buttonCSS} {...{ onClick }} />;
+  return <Component css={buttonCSS} customLogo={customLogo} {...{ onClick }} />;
 };

packages/shared-ux/button/exit_full_screen/impl/src/services.tsx

@@ -43,6 +43,7 @@ export const ExitFullScreenButtonKibanaProvider: FC<ExitFullScreenButtonKibanaDe
         setIsFullscreen: (isFullscreen: boolean) => {
           services.coreStart.chrome.setIsVisible(!isFullscreen);
         },
+        customBranding$: services.coreStart.customBranding.customBranding$,
       }}
     >
       {children}

packages/shared-ux/button/exit_full_screen/mocks/src/jest.ts

@@ -10,13 +10,15 @@ import {
   ExitFullScreenButtonKibanaDependencies,
   ExitFullScreenButtonServices,
 } from '@kbn/shared-ux-button-exit-full-screen-types';
+import { of } from 'rxjs';
 
 /**
  * Return a Jest mock of the services for the `ExitFullScreenButton` component.
  */
 export const getServicesMock = (): ExitFullScreenButtonServices => {
   return {
     setIsFullscreen: jest.fn(),
+    customBranding$: of({}),
   };
 };
 
@@ -29,6 +31,9 @@ export const getKibanaDependenciesMock = (): ExitFullScreenButtonKibanaDependenc
       chrome: {
         setIsVisible: jest.fn(),
       },
+      customBranding: {
+        customBranding$: of({}),
+      },
     },
   };
 };

packages/shared-ux/button/exit_full_screen/mocks/src/storybook.ts

@@ -12,6 +12,7 @@ import type {
   ExitFullScreenButtonProps as Props,
   ExitFullScreenButtonServices,
 } from '@kbn/shared-ux-button-exit-full-screen-types';
+import { of } from 'rxjs';
 
 type PropArguments = Pick<Props, 'toggleChrome'>;
 
@@ -51,6 +52,7 @@ export class StorybookMock extends AbstractStorybookMock<
       setIsFullscreen: (isFullscreen: boolean) => {
         action('setIsFullscreen')(isFullscreen);
       },
+      customBranding$: of({}),
     };
   }
 }

packages/shared-ux/button/exit_full_screen/types/index.d.ts

@@ -7,13 +7,17 @@
  */
 
 import { MouseEventHandler, HTMLAttributes } from 'react';
+import { Observable } from 'rxjs';
+import { CustomBranding } from '@kbn/core-custom-branding-common';
 
 /**
  * Abstract external services for this component.
  */
 export interface Services {
   /** Function to invoke to set the application to full-screen mode */
   setIsFullscreen: (isFullscreen: boolean) => void;
+  /** Observable that emits the value of custom branding, if set*/
+  customBranding$: Observable<CustomBranding>;
 }
 
 /**
@@ -29,6 +33,9 @@ export interface KibanaDependencies {
     chrome: {
       setIsVisible: (isVisible: boolean) => void;
     };
+    customBranding: {
+      customBranding$: Observable<CustomBranding>;
+    };
   };
 }
 
@@ -55,4 +62,6 @@ export interface ExitFullScreenButtonComponentProps
   extends Pick<HTMLAttributes<HTMLDivElement>, 'className'> {
   /** Handler to invoke when one clicks the button. */
   onClick: MouseEventHandler<HTMLButtonElement>;
+  /** If set, custom logo is displayed instead of Elastic logo */
+  customLogo?: string;
 }

packages/shared-ux/button/exit_full_screen/types/tsconfig.json

@@ -9,5 +9,8 @@
   ],
   "exclude": [
     "target/**/*",
+  ],
+  "kbn_references": [
+    "@kbn/core-custom-branding-common",
   ]
 }

src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container.tsx

@@ -120,6 +120,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
   private dashboardSavedObjectService: DashboardSavedObjectService;
   private theme$;
   private chrome;
+  private customBranding;
 
   constructor(
     initialInput: DashboardContainerInput,
@@ -152,6 +153,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
         theme: { theme$: this.theme$ },
       },
       chrome: this.chrome,
+      customBranding: this.customBranding,
     } = pluginServices.getServices());
 
     this.initialSavedDashboardId = dashboardContainerInputIsByValue(this.input)
@@ -422,7 +424,9 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
     const { Wrapper: DashboardReduxWrapper } = this.reduxEmbeddableTools;
     ReactDOM.render(
       <I18nProvider>
-        <ExitFullScreenButtonKibanaProvider coreStart={{ chrome: this.chrome }}>
+        <ExitFullScreenButtonKibanaProvider
+          coreStart={{ chrome: this.chrome, customBranding: this.customBranding }}
+        >
           <KibanaThemeProvider theme$={this.theme$}>
             <DashboardReduxWrapper>
               <DashboardViewport />

src/plugins/dashboard/public/services/custom_branding/custom_branding.stub.ts

@@ -16,5 +16,6 @@ export const customBrandingServiceFactory: CustomBrandingServiceFactory = () =>
   const pluginMock = coreMock.createStart();
   return {
     hasCustomBranding$: pluginMock.customBranding.hasCustomBranding$,
+    customBranding$: pluginMock.customBranding.customBranding$,
   };
 };

src/plugins/dashboard/public/services/custom_branding/custom_branding_service.ts

@@ -19,5 +19,6 @@ export const customBrandingServiceFactory: CustomBrandingServiceFactory = ({ cor
   const { customBranding } = coreStart;
   return {
     hasCustomBranding$: customBranding.hasCustomBranding$,
+    customBranding$: customBranding.customBranding$,
   };
 };

src/plugins/dashboard/public/services/custom_branding/types.ts

@@ -10,4 +10,5 @@ import type { CustomBrandingStart } from '@kbn/core-custom-branding-browser';
 
 export interface DashboardCustomBrandingService {
   hasCustomBranding$: CustomBrandingStart['hasCustomBranding$'];
+  customBranding$: CustomBrandingStart['customBranding$'];
 }

x-pack/plugins/observability/public/pages/alerts/components/alerts_flyout/alerts_flyout_body.tsx

@@ -21,6 +21,7 @@ import {
   ALERT_EVALUATION_VALUE,
   ALERT_FLAPPING,
   ALERT_RULE_CATEGORY,
+  ALERT_RULE_TYPE_ID,
   ALERT_RULE_UUID,
   ALERT_STATUS_ACTIVE,
   ALERT_STATUS_RECOVERED,
@@ -32,6 +33,7 @@ import { RULE_DETAILS_PAGE_ID } from '../../../rule_details/constants';
 import { asDuration } from '../../../../../common/utils/formatters';
 import { translations, paths } from '../../../../config';
 import { FlyoutProps } from './types';
+import { formatAlertEvaluationValue } from '../../../../utils/format_alert_evaluation_value';
 
 // eslint-disable-next-line import/no-default-export
 export default function AlertsFlyoutBody({ alert, id: pageId }: FlyoutProps) {
@@ -74,11 +76,17 @@ export default function AlertsFlyoutBody({ alert, id: pageId }: FlyoutProps) {
     },
     {
       title: translations.alertsFlyout.expectedValueLabel,
-      description: alert.fields[ALERT_EVALUATION_THRESHOLD] ?? '-',
+      description: formatAlertEvaluationValue(
+        alert.fields[ALERT_RULE_TYPE_ID],
+        alert.fields[ALERT_EVALUATION_THRESHOLD]
+      ),
     },
     {
       title: translations.alertsFlyout.actualValueLabel,
-      description: alert.fields[ALERT_EVALUATION_VALUE] ?? '-',
+      description: formatAlertEvaluationValue(
+        alert.fields[ALERT_RULE_TYPE_ID],
+        alert.fields[ALERT_EVALUATION_VALUE]
+      ),
     },
     {
       title: translations.alertsFlyout.ruleTypeLabel,

x-pack/test/observability_functional/apps/observability/pages/alerts/index.ts

@@ -170,8 +170,8 @@ export default ({ getService }: FtrProviderContext) => {
               'Oct 19, 2021 @ 15:00:41.555',
               'Oct 19, 2021 @ 15:20:38.749',
               '20 minutes',
-              '5',
-              '30.73',
+              '5.0%',
+              '31%',
               'Failed transaction rate threshold',
             ];