Skip to content

Commit

Permalink
[8.x] [Synthetics] Fixes embedded components styles !! (#197188) (#19…
Browse files Browse the repository at this point in the history 
…7499)

# Backport

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

<!--- Backport version: 9.4.3 -->

### 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"],"title":"[Synthetics]
Fixes embedded components styles
!!","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":[],"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]
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"}}]}]
BACKPORT-->

Co-authored-by: Shahzad <[email protected]>
  • Loading branch information
@kibanamachine @shahzad31
kibanamachine and shahzad31 authored Oct 24, 2024
1 parent e519dd8 commit b4142f2
Show file tree
Hide file tree
Showing 18 changed files with 200 additions and 128 deletions.
95 changes: 41 additions & 54 deletions ...bservability_solution/synthetics/public/apps/embeddables/common/monitor_configuration.tsx
View file
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>
);
}
14 changes: 1 addition & 13 deletions ...observability_solution/synthetics/public/apps/embeddables/common/monitor_filters_form.tsx
View file
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
3 changes: 3 additions & 0 deletions ...bility_solution/synthetics/public/apps/embeddables/common/monitors_open_configuration.tsx
View file
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
22 changes: 22 additions & 0 deletions x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/common/utils.ts
View file
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
);
};
6 changes: 6 additions & 0 deletions ...tion/synthetics/public/apps/embeddables/monitors_overview/monitors_embeddable_factory.tsx
View file
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
10 changes: 4 additions & 6 deletions ...solution/synthetics/public/apps/embeddables/monitors_overview/monitors_grid_component.tsx
View file
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
32 changes: 25 additions & 7 deletions ...y_solution/synthetics/public/apps/embeddables/stats_overview/stats_overview_component.tsx
View file
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}
/>
);
};
3 changes: 3 additions & 0 deletions ...n/synthetics/public/apps/embeddables/stats_overview/stats_overview_embeddable_factory.tsx
View file
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
10 changes: 1 addition & 9 deletions ...servability_solution/synthetics/public/apps/embeddables/synthetics_embeddable_context.tsx
View file
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
6 changes: 6 additions & 0 deletions ...n/synthetics/public/apps/embeddables/ui_actions/create_monitors_overview_panel_action.tsx
View file
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
3 changes: 3 additions & 0 deletions ...tion/synthetics/public/apps/embeddables/ui_actions/create_stats_overview_panel_action.tsx
View file
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 b4142f2

Please sign in to comment.