mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
# Backport This will backport the following commits from `main` to `8.x`: - [[Synthetics] Fixes embedded components styles !! (#197188)](https://github.com/elastic/kibana/pull/197188) <!--- Backport version: 9.4.3 --> ### 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"],"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 <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] 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"}}]}] BACKPORT--> Co-authored-by: Shahzad <shahzad31comp@gmail.com>
This commit is contained in:
parent
e519dd8e51
commit
b4142f2a9f
18 changed files with 200 additions and 128 deletions
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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', {
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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
|
||||
);
|
||||
};
|
|
@ -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) {
|
||||
|
|
|
@ -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} />
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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', {
|
||||
|
|
|
@ -50,6 +50,9 @@ export const SyntheticsSharedContext: React.FC<
|
|||
coreStart={{
|
||||
application: coreStart.application,
|
||||
}}
|
||||
style={{
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</RedirectAppLinks>
|
||||
|
|
|
@ -44465,7 +44465,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",
|
||||
|
|
|
@ -44205,7 +44205,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": "監視",
|
||||
|
|
|
@ -44255,7 +44255,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": "监测",
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue