From ea646dfe04799775de988dfb34248001e23e4437 Mon Sep 17 00:00:00 2001 From: Faisal Kanout Date: Tue, 14 Feb 2023 10:04:24 +0100 Subject: [PATCH 1/2] [BUG] [AO] - Fix alert evaluation value format in the alert flyout (#150720) ## Summary It closes #101945 It closes #150857 by using the formatter from the Observability plugin. ### Before ### ms Screenshot 2023-02-09 at 15 49 12 ### % Screenshot 2023-02-10 at 12 28 34 ### After ### ms Screenshot 2023-02-09 at 15 48 58 ### % Screenshot 2023-02-10 at 13 17 20 --- .../components/alerts_flyout/alerts_flyout_body.tsx | 12 ++++++++++-- .../apps/observability/pages/alerts/index.ts | 4 ++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/observability/public/pages/alerts/components/alerts_flyout/alerts_flyout_body.tsx b/x-pack/plugins/observability/public/pages/alerts/components/alerts_flyout/alerts_flyout_body.tsx index ead2b83388f87..97343a11cd498 100644 --- a/x-pack/plugins/observability/public/pages/alerts/components/alerts_flyout/alerts_flyout_body.tsx +++ b/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, diff --git a/x-pack/test/observability_functional/apps/observability/pages/alerts/index.ts b/x-pack/test/observability_functional/apps/observability/pages/alerts/index.ts index 8c386e99423ce..99c41f250ab07 100644 --- a/x-pack/test/observability_functional/apps/observability/pages/alerts/index.ts +++ b/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', ]; From 868fc247a944f55c15ac5a0a3ced1887dd9ac72e Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Tue, 14 Feb 2023 10:27:35 +0100 Subject: [PATCH 2/2] [SharedUX] Add custom branding to ExitFullScreenButton (#150620) ## Summary This PR replaces the Elastic logo with the custom logo in `ExitFullScreenButton` component. Without custom logo: Screenshot 2023-02-13 at 12 49 59 With custom logo: Screenshot 2023-02-13 at 12 53 16 ### Checklist Delete any items that are not applicable to this PR. ~- [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)~ ~- [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials~ - [X] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [X] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [X] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) ~- [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~ - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) ~- [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)~ ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> --- .../exit_full_screen_button.test.tsx.snap | 48 +++++++++++++++++++ .../src/exit_full_screen_button.component.tsx | 9 +++- .../impl/src/exit_full_screen_button.test.tsx | 11 +++++ .../impl/src/exit_full_screen_button.tsx | 7 ++- .../exit_full_screen/impl/src/services.tsx | 1 + .../button/exit_full_screen/mocks/src/jest.ts | 5 ++ .../exit_full_screen/mocks/src/storybook.ts | 2 + .../button/exit_full_screen/types/index.d.ts | 9 ++++ .../exit_full_screen/types/tsconfig.json | 3 ++ .../embeddable/dashboard_container.tsx | 6 ++- .../custom_branding/custom_branding.stub.ts | 1 + .../custom_branding_service.ts | 1 + .../public/services/custom_branding/types.ts | 1 + 13 files changed, 99 insertions(+), 5 deletions(-) diff --git a/packages/shared-ux/button/exit_full_screen/impl/src/__snapshots__/exit_full_screen_button.test.tsx.snap b/packages/shared-ux/button/exit_full_screen/impl/src/__snapshots__/exit_full_screen_button.test.tsx.snap index c3dbe9dc42bfc..137956b648c2c 100644 --- a/packages/shared-ux/button/exit_full_screen/impl/src/__snapshots__/exit_full_screen_button.test.tsx.snap +++ b/packages/shared-ux/button/exit_full_screen/impl/src/__snapshots__/exit_full_screen_button.test.tsx.snap @@ -41,6 +41,54 @@ exports[` with kibana services is rendered 1`] = ` `; +exports[` with kibana services renders custom logo 1`] = ` +
+

+ In full screen mode, press ESC to exit. +

+ +
+`; + exports[` with manual services is rendered 1`] = `

{ +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) => { > - + {customLogo ? ( + + ) : ( + + )} {text} diff --git a/packages/shared-ux/button/exit_full_screen/impl/src/exit_full_screen_button.test.tsx b/packages/shared-ux/button/exit_full_screen/impl/src/exit_full_screen_button.test.tsx index 1d2bf1d9aaa58..016762e470f97 100644 --- a/packages/shared-ux/button/exit_full_screen/impl/src/exit_full_screen_button.test.tsx +++ b/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('', () => { expect(kibanaServices.coreStart.chrome.setIsVisible).toHaveBeenCalledTimes(0); }); + test('renders custom logo', () => { + kibanaServices.coreStart.customBranding.customBranding$ = of({ + logo: 'imageSrcAsBase64encodedstring', + }); + const component = kibanaMount( + + ); + expect(component.render()).toMatchSnapshot(); + }); + describe('onExit', () => { const onExitHandler = jest.fn(); let component: ReactWrapper; diff --git a/packages/shared-ux/button/exit_full_screen/impl/src/exit_full_screen_button.tsx b/packages/shared-ux/button/exit_full_screen/impl/src/exit_full_screen_button.tsx index ada7075514e9c..dc70d1de3e453 100644 --- a/packages/shared-ux/button/exit_full_screen/impl/src/exit_full_screen_button.tsx +++ b/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 ; + return ; }; diff --git a/packages/shared-ux/button/exit_full_screen/impl/src/services.tsx b/packages/shared-ux/button/exit_full_screen/impl/src/services.tsx index da6ce5cbcbc8c..909b63e77ed68 100644 --- a/packages/shared-ux/button/exit_full_screen/impl/src/services.tsx +++ b/packages/shared-ux/button/exit_full_screen/impl/src/services.tsx @@ -43,6 +43,7 @@ export const ExitFullScreenButtonKibanaProvider: FC { services.coreStart.chrome.setIsVisible(!isFullscreen); }, + customBranding$: services.coreStart.customBranding.customBranding$, }} > {children} diff --git a/packages/shared-ux/button/exit_full_screen/mocks/src/jest.ts b/packages/shared-ux/button/exit_full_screen/mocks/src/jest.ts index f763c28c9015e..917595d441d6e 100644 --- a/packages/shared-ux/button/exit_full_screen/mocks/src/jest.ts +++ b/packages/shared-ux/button/exit_full_screen/mocks/src/jest.ts @@ -10,6 +10,7 @@ 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. @@ -17,6 +18,7 @@ import { 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({}), + }, }, }; }; diff --git a/packages/shared-ux/button/exit_full_screen/mocks/src/storybook.ts b/packages/shared-ux/button/exit_full_screen/mocks/src/storybook.ts index a44e5425c6d88..5393b333a5f81 100644 --- a/packages/shared-ux/button/exit_full_screen/mocks/src/storybook.ts +++ b/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; @@ -51,6 +52,7 @@ export class StorybookMock extends AbstractStorybookMock< setIsFullscreen: (isFullscreen: boolean) => { action('setIsFullscreen')(isFullscreen); }, + customBranding$: of({}), }; } } diff --git a/packages/shared-ux/button/exit_full_screen/types/index.d.ts b/packages/shared-ux/button/exit_full_screen/types/index.d.ts index e7a3c770e672e..fe8d22880b18d 100644 --- a/packages/shared-ux/button/exit_full_screen/types/index.d.ts +++ b/packages/shared-ux/button/exit_full_screen/types/index.d.ts @@ -7,6 +7,8 @@ */ import { MouseEventHandler, HTMLAttributes } from 'react'; +import { Observable } from 'rxjs'; +import { CustomBranding } from '@kbn/core-custom-branding-common'; /** * Abstract external services for this component. @@ -14,6 +16,8 @@ import { MouseEventHandler, HTMLAttributes } from 'react'; 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; } /** @@ -29,6 +33,9 @@ export interface KibanaDependencies { chrome: { setIsVisible: (isVisible: boolean) => void; }; + customBranding: { + customBranding$: Observable; + }; }; } @@ -55,4 +62,6 @@ export interface ExitFullScreenButtonComponentProps extends Pick, 'className'> { /** Handler to invoke when one clicks the button. */ onClick: MouseEventHandler; + /** If set, custom logo is displayed instead of Elastic logo */ + customLogo?: string; } diff --git a/packages/shared-ux/button/exit_full_screen/types/tsconfig.json b/packages/shared-ux/button/exit_full_screen/types/tsconfig.json index 362cc9e727b9f..9909bbb0564ca 100644 --- a/packages/shared-ux/button/exit_full_screen/types/tsconfig.json +++ b/packages/shared-ux/button/exit_full_screen/types/tsconfig.json @@ -9,5 +9,8 @@ ], "exclude": [ "target/**/*", + ], + "kbn_references": [ + "@kbn/core-custom-branding-common", ] } diff --git a/src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container.tsx b/src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container.tsx index 3e3addaac6eee..e370945d58f4f 100644 --- a/src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container.tsx +++ b/src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container.tsx @@ -120,6 +120,7 @@ export class DashboardContainer extends Container - + diff --git a/src/plugins/dashboard/public/services/custom_branding/custom_branding.stub.ts b/src/plugins/dashboard/public/services/custom_branding/custom_branding.stub.ts index 5496c29b760f9..5db0f72e2cd6b 100644 --- a/src/plugins/dashboard/public/services/custom_branding/custom_branding.stub.ts +++ b/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$, }; }; diff --git a/src/plugins/dashboard/public/services/custom_branding/custom_branding_service.ts b/src/plugins/dashboard/public/services/custom_branding/custom_branding_service.ts index 659a669a5bda1..c02aeedde2ad5 100644 --- a/src/plugins/dashboard/public/services/custom_branding/custom_branding_service.ts +++ b/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$, }; }; diff --git a/src/plugins/dashboard/public/services/custom_branding/types.ts b/src/plugins/dashboard/public/services/custom_branding/types.ts index 7e7e88bb15a7a..3f5536d21ddcb 100644 --- a/src/plugins/dashboard/public/services/custom_branding/types.ts +++ b/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$']; }