github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[8.16] [Synthetics] Fixes embedded components styles !! (#197188) (#198286)

Browse source 
# Backport

This will backport the following commits from `main` to `8.16`:
- [[Synthetics] Fixes embedded components styles !!
(#197188)](https://github.com/elastic/kibana/pull/197188)

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

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

<!--BACKPORT
[{"author":{"name":"Shahzad","email":"shahzad31comp@gmail.com"},"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
<kdelemme@gmail.com>","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
<kdelemme@gmail.com>","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
<kdelemme@gmail.com>","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\":\"shahzad31comp@gmail.com\"},\"sourceCommit\":{\"committedDate\":\"2024-10-23T16:34:53Z\",\"message\":\"[Synthetics]\nFixes
embedded components styles !! (#197188)\\n\\n##
Summary\\r\\n\\r\\nFixes\nhttps://github.com/elastic/kibana/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<kdelemme@gmail.com>\",\"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/elastic/kibana/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<kdelemme@gmail.com>\",\"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/elastic/kibana/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<kdelemme@gmail.com>\",\"sha\":\"d6465c749a554b485d390df4ae8f9628f4aa3661\"}}]}]\nBACKPORT-->\n\nCo-authored-by:
Shahzad <shahzad31comp@gmail.com>"}}]}] BACKPORT-->
This commit is contained in:
Shahzad 2024-10-30 17:26:52 +01:00 • committed by GitHub
parent d92ea8356c
commit 623c445fb5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 200 additions and 128 deletions
Download patch file Download diff file Expand all files Collapse all files

95
x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/common/monitor_configuration.tsx
View file

@ -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';
@ -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: {
@ -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
x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/common/monitor_filters_form.tsx
View file

@ -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';
@ -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', {

3
x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/common/monitors_open_configuration.tsx
View file

@ -18,7 +18,9 @@ export async function openMonitorConfiguration({
coreStart,
pluginStart,
initialState,
title,
}: {
title: string;
coreStart: CoreStart;
pluginStart: ClientPluginsStart;
initialState?: { filters: MonitorFilters };
@ -37,6 +39,7 @@ export async function openMonitorConfiguration({
>
<QueryClientProvider client={queryClient}>
<MonitorConfiguration
title={title}
initialInput={initialState}
onCreate={(update: { filters: MonitorFilters }) => {
flyoutSession.close();

22
x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/common/utils.ts Normal file
View file

@ -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
x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/monitors_overview/monitors_embeddable_factory.tsx
View file

@ -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) {

10
x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/monitors_overview/monitors_grid_component.tsx
View file

@ -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';
@ -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} />

32
x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/stats_overview/stats_overview_component.tsx
View file

@ -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';
@ -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>
);
};
@ -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
x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/stats_overview/stats_overview_embeddable_factory.tsx
View file

@ -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) {

10
x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/synthetics_embeddable_context.tsx
View file

@ -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';
@ -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>

6
x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/ui_actions/create_monitors_overview_panel_action.tsx
View file

@ -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({

3
x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/ui_actions/create_stats_overview_panel_action.tsx
View file

@ -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,

67
x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/common/components/embeddable_panel_wrapper.tsx
View file

@ -6,37 +6,58 @@
*/
import React, { FC } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiProgress, EuiTitle } from '@elastic/eui';
import {
EuiFlexGroup,
EuiFlexItem,
EuiPanel,
EuiProgress,
EuiSpacer,
EuiTitle,
} from '@elastic/eui';
import { AddToDashboard } from './add_to_dashboard';
import { SYNTHETICS_STATS_OVERVIEW_EMBEDDABLE } from '../../../../embeddables/constants';
export const EmbeddablePanelWrapper: FC<
React.PropsWithChildren<{
title: string;
loading?: boolean;
titleAppend?: React.ReactNode;
}>
> = ({ children, title, loading, titleAppend }) => {
interface Props {
title?: string;
loading?: boolean;
hideTitle?: boolean;
titleAppend?: React.ReactNode;
}
export const EmbeddablePanelWrapper: FC<React.PropsWithChildren<Props>> = ({
children,
title,
loading,
titleAppend,
hideTitle,
}) => {
const isSyntheticsApp = window.location.pathname.includes('/app/synthetics');
const noTitle = !title && !titleAppend;
return (
<>
<EuiPanel hasShadow={false} hasBorder>
<EuiPanel hasShadow={false} hasBorder={isSyntheticsApp}>
{!noTitle && (
<>
<EuiFlexGroup>
<EuiFlexItem grow={true}>
{(!hideTitle || !title) && (
<EuiTitle size="xs">
<h3>{title}</h3>
</EuiTitle>
)}
</EuiFlexItem>
{isSyntheticsApp && (
<EuiFlexItem grow={false}>
<AddToDashboard type={SYNTHETICS_STATS_OVERVIEW_EMBEDDABLE} />
</EuiFlexItem>
)}
{titleAppend && <EuiFlexItem grow={false}>{titleAppend}</EuiFlexItem>}
</EuiFlexGroup>
<EuiSpacer size="s" />
</>
)}
{loading && <EuiProgress size="xs" color="accent" />}
<EuiFlexGroup>
<EuiFlexItem grow={true}>
<EuiTitle size="xs">
<h3>{title}</h3>
</EuiTitle>
</EuiFlexItem>
{isSyntheticsApp && (
<EuiFlexItem grow={false}>
<AddToDashboard type={SYNTHETICS_STATS_OVERVIEW_EMBEDDABLE} />
</EuiFlexItem>
)}
{titleAppend && <EuiFlexItem grow={false}>{titleAppend}</EuiFlexItem>}
</EuiFlexGroup>
{children}
</EuiPanel>
</>

29
x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/grid_by_group/grid_items_by_group.tsx
View file

@ -10,6 +10,7 @@ import React, { useRef, useState, FC, PropsWithChildren } from 'react';
import { useSelector } from 'react-redux';
import { get, invert, orderBy } from 'lodash';
import styled from 'styled-components';
import { i18n } from '@kbn/i18n';
import { OverviewLoader } from '../overview_loader';
import {
getSyntheticsFilterDisplayValues,
@ -60,18 +61,25 @@ export const GridItemsByGroup = ({
items: monitorTypes,
values: getSyntheticsFilterDisplayValues(monitorTypes, 'monitorTypes', allLocations),
otherValues: {
label: 'Invalid monitor type',
label: i18n.translate('xpack.synthetics.monitorsPage.overview.gridItemsByGroup.noType', {
defaultMessage: 'Invalid monitor type',
}),
items: allConfigs?.filter((monitor) => !get(monitor, ConfigKey.MONITOR_TYPE)),
},
};
break;
case 'locationId':
selectedGroup = {
key: 'location.label',
key: 'locationLabel',
items: locations,
values: getSyntheticsFilterDisplayValues(locations, 'locations', allLocations),
otherValues: {
label: 'Without any location',
label: i18n.translate(
'xpack.synthetics.monitorsPage.overview.gridItemsByGroup.noLocations',
{
defaultMessage: 'Without any location',
}
),
items: allConfigs?.filter((monitor) => !get(monitor, 'location')),
},
};
@ -82,7 +90,9 @@ export const GridItemsByGroup = ({
items: tags,
values: getSyntheticsFilterDisplayValues(tags, 'tags', allLocations),
otherValues: {
label: 'Without any tags',
label: i18n.translate('xpack.synthetics.monitorsPage.overview.gridItemsByGroup.noTags', {
defaultMessage: 'Without any tags',
}),
items: allConfigs?.filter((monitor) => get(monitor, 'tags', []).length === 0),
},
};
@ -93,7 +103,12 @@ export const GridItemsByGroup = ({
items: projects,
values: getSyntheticsFilterDisplayValues(projects, 'projects', allLocations),
otherValues: {
label: 'UI Monitors',
label: i18n.translate(
'xpack.synthetics.monitorsPage.overview.gridItemsByGroup.uiMonitors',
{
defaultMessage: 'UI Monitors',
}
),
items: allConfigs?.filter((monitor) => !Boolean(monitor.projectId)),
},
};
@ -138,11 +153,11 @@ export const GridItemsByGroup = ({
</>
);
})}
{selectedGroup.otherValues.items?.length && (
{(selectedGroup.otherValues.items ?? []).length > 0 && (
<WrappedPanel isFullScreen={fullScreenGroup === selectedGroup.otherValues.label}>
<GroupGridItem
groupLabel={selectedGroup.otherValues.label}
groupMonitors={selectedGroup.otherValues.items}
groupMonitors={selectedGroup.otherValues.items ?? []}
loaded={loaded}
setFlyoutConfigCallback={setFlyoutConfigCallback}
setFullScreenGroup={setFullScreenGroup}

22
x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_status.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiStat } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiStat } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
@ -19,7 +19,13 @@ function title(t?: number) {
return t ?? '-';
}
export function OverviewStatus({ titleAppend }: { titleAppend?: React.ReactNode }) {
export function OverviewStatus({
titleAppend,
hideTitle,
}: {
titleAppend?: React.ReactNode;
hideTitle?: boolean;
}) {
const { statusFilter } = useGetUrlParams();
const {
@ -92,8 +98,12 @@ export function OverviewStatus({ titleAppend }: { titleAppend?: React.ReactNode
}, [status, statusFilter]);
return (
<EmbeddablePanelWrapper title={headingText} loading={loading} titleAppend={titleAppend}>
<EuiSpacer size="m" />
<EmbeddablePanelWrapper
title={headingText}
loading={loading}
titleAppend={titleAppend}
hideTitle={hideTitle}
>
<EuiFlexGroup gutterSize="xl" justifyContent="spaceAround">
<EuiFlexItem grow={false}>
<EuiStat
@ -142,8 +152,8 @@ export function OverviewStatus({ titleAppend }: { titleAppend?: React.ReactNode
);
}
const headingText = i18n.translate('xpack.synthetics.overview.status.headingText', {
defaultMessage: 'Current status',
const headingText = i18n.translate('xpack.synthetics.overview.monitors.headingText', {
defaultMessage: 'Monitors status',
});
const upDescription = i18n.translate('xpack.synthetics.overview.status.up.description', {

3
x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/contexts/synthetics_shared_context.tsx
View file

@ -51,6 +51,9 @@ export const SyntheticsSharedContext: React.FC<
coreStart={{
application: coreStart.application,
}}
style={{
height: '100%',
}}
>
{children}
</RedirectAppLinks>

1
x-pack/plugins/translations/translations/fr-FR.json
View file

@ -44468,7 +44468,6 @@
"xpack.synthetics.overview.status.filters.legend": "Statut du moniteur",
"xpack.synthetics.overview.status.filters.pending": "En attente",
"xpack.synthetics.overview.status.filters.up": "Opérationnel",
"xpack.synthetics.overview.status.headingText": "Statut actuel",
"xpack.synthetics.overview.status.pending.description": "En attente",
"xpack.synthetics.overview.status.up.description": "Opérationnel",
"xpack.synthetics.overview.SyntheticsHeading": "Moniteurs",

1
x-pack/plugins/translations/translations/ja-JP.json
View file

@ -44206,7 +44206,6 @@
"xpack.synthetics.overview.status.filters.legend": "監視ステータス",
"xpack.synthetics.overview.status.filters.pending": "保留中",
"xpack.synthetics.overview.status.filters.up": "アップ",
"xpack.synthetics.overview.status.headingText": "現在のステータス",
"xpack.synthetics.overview.status.pending.description": "保留中",
"xpack.synthetics.overview.status.up.description": "アップ",
"xpack.synthetics.overview.SyntheticsHeading": "監視",

1
x-pack/plugins/translations/translations/zh-CN.json
View file

@ -44256,7 +44256,6 @@
"xpack.synthetics.overview.status.filters.legend": "监测状态",
"xpack.synthetics.overview.status.filters.pending": "待处理",
"xpack.synthetics.overview.status.filters.up": "运行",
"xpack.synthetics.overview.status.headingText": "当前状态",
"xpack.synthetics.overview.status.pending.description": "待处理",
"xpack.synthetics.overview.status.up.description": "运行",
"xpack.synthetics.overview.SyntheticsHeading": "监测",