Skip to content

Commit

Permalink
[8.16] [Synthetics] Fixes embedded components styles !! (#197188) (#1…
Browse files Browse the repository at this point in the history
…98286)

# Backport

This will backport the following commits from `main` to `8.16`:
- [[Synthetics] Fixes embedded components styles !!
(#197188)](#197188)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"Shahzad","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-23T16:34:53Z","message":"[Synthetics]
Fixes embedded components styles !! (#197188)\n\n## Summary\r\n\r\nFixes
https://github.com/elastic/kibana/issues/190853\r\n\r\nFixes embedded
components styles !!\r\n\r\nHide multiple titles \r\n\r\n###
After\r\n\r\n<img width=\"1728\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/dbb5ab2e-1649-4eba-a43f-3ee1e679544a\">\r\n\r\n###
Before\r\n<img width=\"1251\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/22561ca8-a145-4aa7-83e4-fe37b74e4412\">\r\n\r\n---------\r\n\r\nCo-authored-by:
Kevin Delemme
<[email protected]>","sha":"d6465c749a554b485d390df4ae8f9628f4aa3661","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-minor","ci:project-deploy-observability","Team:obs-ux-management","v8.16.0","v8.17.0"],"number":197188,"url":"https://github.com/elastic/kibana/pull/197188","mergeCommit":{"message":"[Synthetics]
Fixes embedded components styles !! (#197188)\n\n## Summary\r\n\r\nFixes
https://github.com/elastic/kibana/issues/190853\r\n\r\nFixes embedded
components styles !!\r\n\r\nHide multiple titles \r\n\r\n###
After\r\n\r\n<img width=\"1728\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/dbb5ab2e-1649-4eba-a43f-3ee1e679544a\">\r\n\r\n###
Before\r\n<img width=\"1251\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/22561ca8-a145-4aa7-83e4-fe37b74e4412\">\r\n\r\n---------\r\n\r\nCo-authored-by:
Kevin Delemme
<[email protected]>","sha":"d6465c749a554b485d390df4ae8f9628f4aa3661"}},"sourceBranch":"main","suggestedTargetBranches":["8.16"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","labelRegex":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/197188","number":197188,"mergeCommit":{"message":"[Synthetics]
Fixes embedded components styles !! (#197188)\n\n## Summary\r\n\r\nFixes
https://github.com/elastic/kibana/issues/190853\r\n\r\nFixes embedded
components styles !!\r\n\r\nHide multiple titles \r\n\r\n###
After\r\n\r\n<img width=\"1728\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/dbb5ab2e-1649-4eba-a43f-3ee1e679544a\">\r\n\r\n###
Before\r\n<img width=\"1251\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/22561ca8-a145-4aa7-83e4-fe37b74e4412\">\r\n\r\n---------\r\n\r\nCo-authored-by:
Kevin Delemme
<[email protected]>","sha":"d6465c749a554b485d390df4ae8f9628f4aa3661"}},{"branch":"8.16","label":"v8.16.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.x","label":"v8.17.0","labelRegex":"^v8.17.0$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/197499","number":197499,"state":"MERGED","mergeCommit":{"sha":"b4142f2a9f0dc3d31abd43c3234b8d778c72b19f","message":"[8.x]
[Synthetics] Fixes embedded components styles !! (#197188)
(#197499)\n\n# Backport\n\nThis will backport the following commits from
`main` to `8.x`:\n- [[Synthetics] Fixes embedded components styles
!!\n(#197188)](https://github.com/elastic/kibana/pull/197188)\n\n<!---
Backport version: 9.4.3 -->\n\n### Questions ?\nPlease refer to the
[Backport
tool\ndocumentation](https://github.com/sqren/backport)\n\n<!--BACKPORT\n[{\"author\":{\"name\":\"Shahzad\",\"email\":\"[email protected]\"},\"sourceCommit\":{\"committedDate\":\"2024-10-23T16:34:53Z\",\"message\":\"[Synthetics]\nFixes
embedded components styles !! (#197188)\\n\\n##
Summary\\r\\n\\r\\nFixes\nhttps://github.com//issues/190853\\r\\n\\r\\nFixes
embedded\ncomponents styles !!\\r\\n\\r\\nHide multiple titles
\\r\\n\\r\\n###\nAfter\\r\\n\\r\\n<img
width=\\\"1728\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://github.com/user-attachments/assets/dbb5ab2e-1649-4eba-a43f-3ee1e679544a\\\">\\r\\n\\r\\n###\nBefore\\r\\n<img
width=\\\"1251\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://github.com/user-attachments/assets/22561ca8-a145-4aa7-83e4-fe37b74e4412\\\">\\r\\n\\r\\n---------\\r\\n\\r\\nCo-authored-by:\nKevin
Delemme\n<[email protected]>\",\"sha\":\"d6465c749a554b485d390df4ae8f9628f4aa3661\",\"branchLabelMapping\":{\"^v9.0.0$\":\"main\",\"^v8.17.0$\":\"8.x\",\"^v(\\\\d+).(\\\\d+).\\\\d+$\":\"$1.$2\"}},\"sourcePullRequest\":{\"labels\":[\"release_note:skip\",\"v9.0.0\",\"backport:prev-minor\",\"ci:project-deploy-observability\",\"Team:obs-ux-management\"],\"title\":\"[Synthetics]\nFixes
embedded components
styles\n!!\",\"number\":197188,\"url\":\"https://github.com/elastic/kibana/pull/197188\",\"mergeCommit\":{\"message\":\"[Synthetics]\nFixes
embedded components styles !! (#197188)\\n\\n##
Summary\\r\\n\\r\\nFixes\nhttps://github.com//issues/190853\\r\\n\\r\\nFixes
embedded\ncomponents styles !!\\r\\n\\r\\nHide multiple titles
\\r\\n\\r\\n###\nAfter\\r\\n\\r\\n<img
width=\\\"1728\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://github.com/user-attachments/assets/dbb5ab2e-1649-4eba-a43f-3ee1e679544a\\\">\\r\\n\\r\\n###\nBefore\\r\\n<img
width=\\\"1251\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://github.com/user-attachments/assets/22561ca8-a145-4aa7-83e4-fe37b74e4412\\\">\\r\\n\\r\\n---------\\r\\n\\r\\nCo-authored-by:\nKevin
Delemme\n<[email protected]>\",\"sha\":\"d6465c749a554b485d390df4ae8f9628f4aa3661\"}},\"sourceBranch\":\"main\",\"suggestedTargetBranches\":[],\"targetPullRequestStates\":[{\"branch\":\"main\",\"label\":\"v9.0.0\",\"branchLabelMappingKey\":\"^v9.0.0$\",\"isSourceBranch\":true,\"state\":\"MERGED\",\"url\":\"https://github.com/elastic/kibana/pull/197188\",\"number\":197188,\"mergeCommit\":{\"message\":\"[Synthetics]\nFixes
embedded components styles !! (#197188)\\n\\n##
Summary\\r\\n\\r\\nFixes\nhttps://github.com//issues/190853\\r\\n\\r\\nFixes
embedded\ncomponents styles !!\\r\\n\\r\\nHide multiple titles
\\r\\n\\r\\n###\nAfter\\r\\n\\r\\n<img
width=\\\"1728\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://github.com/user-attachments/assets/dbb5ab2e-1649-4eba-a43f-3ee1e679544a\\\">\\r\\n\\r\\n###\nBefore\\r\\n<img
width=\\\"1251\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://github.com/user-attachments/assets/22561ca8-a145-4aa7-83e4-fe37b74e4412\\\">\\r\\n\\r\\n---------\\r\\n\\r\\nCo-authored-by:\nKevin
Delemme\n<[email protected]>\",\"sha\":\"d6465c749a554b485d390df4ae8f9628f4aa3661\"}}]}]\nBACKPORT-->\n\nCo-authored-by:
Shahzad <[email protected]>"}}]}] BACKPORT-->
  • Loading branch information
shahzad31 authored Oct 30, 2024
1 parent d92ea83 commit 623c445
Show file tree
Hide file tree
Showing 18 changed files with 200 additions and 128 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import {
EuiTitle,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { i18n } from '@kbn/i18n';
import { FormProvider, useForm } from 'react-hook-form';
import { MonitorFilters } from '../monitors_overview/types';
import { MonitorFiltersForm } from './monitor_filters_form';
Expand All @@ -29,12 +28,14 @@ interface MonitorConfigurationProps {
};
onCreate: (props: { filters: MonitorFilters }) => void;
onCancel: () => void;
title: string;
}

export function MonitorConfiguration({
initialInput,
onCreate,
onCancel,
title,
}: MonitorConfigurationProps) {
const methods = useForm<MonitorFilters>({
defaultValues: {
Expand All @@ -57,64 +58,50 @@ export function MonitorConfiguration({
};

return (
<EuiFlyout data-test-subj="sloSingleOverviewConfiguration" onClose={onCancel}>
<EuiFlyout onClose={onCancel}>
<EuiFlyoutHeader>
<EuiFlexGroup direction="column">
<EuiTitle>
<h2>{title}</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiFlexGroup>
<EuiFlexItem>
<EuiTitle>
<h2>
{i18n.translate(
'xpack.synthetics.overviewEmbeddable.config.sloSelector.headerTitle',
{
defaultMessage: 'Overview configuration',
}
)}
</h2>
</EuiTitle>
<EuiFlexGroup>
<EuiFlexItem grow>
<FormProvider {...methods}>
<MonitorFiltersForm />
</FormProvider>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutHeader>
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiButtonEmpty
data-test-subj="syntheticsMonitorConfigurationCancelButton"
onClick={onCancel}
>
<FormattedMessage
id="xpack.synthetics.embeddable.config.cancelButtonLabel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>

<>
<EuiFlyoutBody>
<EuiFlexGroup>
<EuiFlexItem>
<EuiFlexGroup>
<EuiFlexItem data-test-subj="singleSloSelector" grow>
<FormProvider {...methods}>
<MonitorFiltersForm />
</FormProvider>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiButtonEmpty
data-test-subj="syntheticsMonitorConfigurationCancelButton"
onClick={onCancel}
>
<FormattedMessage
id="xpack.synthetics.sloEmbeddable.config.cancelButtonLabel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>

<EuiButton
data-test-subj="syntheticsMonitorConfigurationSaveButton"
isDisabled={!(formState.isDirty || !initialInput)}
onClick={onConfirmClick}
fill
>
<FormattedMessage
id="xpack.synthetics.overviewEmbeddableSlo.config.confirmButtonLabel"
defaultMessage="Save"
/>
</EuiButton>
</EuiFlexGroup>
</EuiFlyoutFooter>
</>
<EuiButton
data-test-subj="syntheticsMonitorConfigurationSaveButton"
isDisabled={!(formState.isDirty || !initialInput)}
onClick={onConfirmClick}
fill
>
<FormattedMessage
id="xpack.synthetics.overviewEmbeddableSynthetics.config.confirmButtonLabel"
defaultMessage="Save"
/>
</EuiButton>
</EuiFlexGroup>
</EuiFlyoutFooter>
</EuiFlyout>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { EuiFlexGroup, EuiIconTip } from '@elastic/eui';
import { EuiFlexGroup } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';
import { FieldSelector } from './field_selector';
Expand All @@ -23,18 +23,6 @@ export function MonitorFiltersForm() {
)}
name="monitorIds"
dataTestSubj="syntheticsAvailabilityMonitorSelector"
tooltip={
<EuiIconTip
content={i18n.translate(
'xpack.synthetics.monitorEdit.syntheticsAvailability.monitor.tooltip',
{
defaultMessage:
'This is the monitor or monitors part of this monitor. Select "*" to group by project, tag, or location',
}
)}
position="top"
/>
}
/>
<FieldSelector
label={i18n.translate('xpack.synthetics.monitorEdit.syntheticsAvailability.tags', {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@ export async function openMonitorConfiguration({
coreStart,
pluginStart,
initialState,
title,
}: {
title: string;
coreStart: CoreStart;
pluginStart: ClientPluginsStart;
initialState?: { filters: MonitorFilters };
Expand All @@ -37,6 +39,7 @@ export async function openMonitorConfiguration({
>
<QueryClientProvider client={queryClient}>
<MonitorConfiguration
title={title}
initialInput={initialState}
onCreate={(update: { filters: MonitorFilters }) => {
flyoutSession.close();
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import { MonitorFilters } from '../monitors_overview/types';

export const areFiltersEmpty = (filters: MonitorFilters) => {
if (!filters) {
return true;
}

return (
!filters.monitorIds?.length &&
!filters.projects?.length &&
!filters.tags?.length &&
!filters.monitorTypes?.length &&
!filters.locations?.length
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,12 @@ export const getMonitorsEmbeddableFactory = (
initialState: {
filters: filters$.getValue(),
},
title: i18n.translate(
'xpack.synthetics.editSyntheticsOverviewEmbeddableTitle.overview.title',
{
defaultMessage: 'Create monitors overview',
}
),
});
filters$.next(result.filters);
} catch (e) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@

import React, { useEffect, useRef } from 'react';
import { Subject } from 'rxjs';
import { i18n } from '@kbn/i18n';
import { useDispatch } from 'react-redux';
import { areFiltersEmpty } from '../common/utils';
import { getOverviewStore } from './redux_store';
import { ShowSelectedFilters } from '../common/show_selected_filters';
import { setOverviewPageStateAction } from '../../synthetics/state';
Expand All @@ -26,13 +26,11 @@ export const StatusGridComponent = ({
}) => {
const overviewStore = useRef(getOverviewStore());

const hasFilters = !areFiltersEmpty(filters);

return (
<EmbeddablePanelWrapper
title={i18n.translate(
'xpack.synthetics.statusOverviewComponent.embeddablePanelWrapper.monitorsLabel',
{ defaultMessage: 'Monitors' }
)}
titleAppend={<ShowSelectedFilters filters={filters ?? {}} />}
titleAppend={hasFilters ? <ShowSelectedFilters filters={filters ?? {}} /> : null}
>
<SyntheticsEmbeddableContext reload$={reload$} reduxStore={overviewStore.current}>
<MonitorsOverviewList filters={filters} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
import React, { useEffect, useRef } from 'react';
import { Subject } from 'rxjs';
import { useDispatch } from 'react-redux';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { areFiltersEmpty } from '../common/utils';
import { getStatsOverviewStore } from './redux_store';
import { ShowSelectedFilters } from '../common/show_selected_filters';
import { MonitorFilters } from '../monitors_overview/types';
Expand All @@ -26,7 +28,16 @@ export const StatsOverviewComponent = ({

return (
<SyntheticsEmbeddableContext reload$={reload$} reduxStore={statsOverviewStore.current}>
<WithFiltersComponent filters={filters} />
<EuiFlexGroup
alignItems="center"
css={{
height: '100%',
}}
>
<EuiFlexItem>
<WithFiltersComponent filters={filters ?? {}} />
</EuiFlexItem>
</EuiFlexGroup>
</SyntheticsEmbeddableContext>
);
};
Expand All @@ -36,14 +47,21 @@ const WithFiltersComponent = ({ filters }: { filters: MonitorFilters }) => {
useEffect(() => {
dispatch(
setOverviewPageStateAction({
tags: filters.tags.map((tag) => tag.value),
locations: filters.locations.map((location) => location.value),
monitorTypes: filters.monitorTypes.map((monitorType) => monitorType.value),
monitorQueryIds: filters.monitorIds.map((monitorId) => monitorId.value),
projects: filters.projects.map((project) => project.value),
tags: filters.tags?.map((tag) => tag.value),
locations: filters.locations?.map((location) => location.value),
monitorTypes: filters.monitorTypes?.map((monitorType) => monitorType.value),
monitorQueryIds: filters.monitorIds?.map((monitorId) => monitorId.value),
projects: filters.projects?.map((project) => project.value),
})
);
}, [dispatch, filters]);

return <OverviewStatus titleAppend={<ShowSelectedFilters filters={filters ?? {}} />} />;
const hasFilters = !areFiltersEmpty(filters);

return (
<OverviewStatus
titleAppend={hasFilters ? <ShowSelectedFilters filters={filters ?? {}} /> : null}
hideTitle={true}
/>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,9 @@ export const getStatsOverviewEmbeddableFactory = (
initialState: {
filters: filters$.getValue(),
},
title: i18n.translate('xpack.synthetics.editSloOverviewEmbeddableTitle.title', {
defaultMessage: 'Create monitor stats',
}),
});
filters$.next(result.filters);
} catch (e) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@

import React from 'react';
import { createBrowserHistory } from 'history';
import { EuiPanel } from '@elastic/eui';
import { Router } from '@kbn/shared-ux-router';
import { Subject } from 'rxjs';
import { Store } from 'redux';
Expand All @@ -29,14 +28,7 @@ export const SyntheticsEmbeddableContext: React.FC<
<SyntheticsEmbeddableStateContextProvider>
<Router history={createBrowserHistory()}>
<SyntheticsSettingsContextProvider {...props}>
<EuiPanel
hasShadow={false}
css={{
width: '100%',
}}
>
{children}
</EuiPanel>
{children}
</SyntheticsSettingsContextProvider>
</Router>
</SyntheticsEmbeddableStateContextProvider>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,12 @@ export function createMonitorsOverviewPanelAction(
const initialState = await openMonitorConfiguration({
coreStart,
pluginStart,
title: i18n.translate(
'xpack.synthetics.editSyntheticsOverviewEmbeddableTitle.overview.title',
{
defaultMessage: 'Create monitors overview',
}
),
});
try {
embeddable.addNewPanel({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@ export function createStatusOverviewPanelAction(
const initialState = await openMonitorConfiguration({
coreStart,
pluginStart,
title: i18n.translate('xpack.synthetics.editSyntheticsOverviewEmbeddableTitle.title', {
defaultMessage: 'Create monitor stats',
}),
});
embeddable.addNewPanel({
panelType: SYNTHETICS_STATS_OVERVIEW_EMBEDDABLE,
Expand Down
Loading

0 comments on commit 623c445

Please sign in to comment.