Skip to content

Commit

Permalink
[Synthetics] Update layout for ping monitor (elastic#142779)
Browse files Browse the repository at this point in the history
  • Loading branch information
shahzad31 authored and WafaaNasr committed Oct 14, 2022
1 parent ba9340e commit d4a0b36
Show file tree
Hide file tree
Showing 4 changed files with 15 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export const SinglePingResult = ({ ping, loading }: { ping: Ping; loading: boole
const responseStatus = !loading ? ping?.http?.response?.status_code : undefined;

return (
<EuiDescriptionList type="responsiveColumn" compressed={true}>
<EuiDescriptionList type="column" compressed={true}>
<EuiDescriptionListTitle>IP</EuiDescriptionListTitle>
<EuiDescriptionListDescription>{ip}</EuiDescriptionListDescription>
<EuiDescriptionListTitle>{DURATION_LABEL}</EuiDescriptionListTitle>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const MonitorDetailsPanel = () => {
return (
<div css={wrapperStyle}>
<EuiSpacer size="s" />
<EuiDescriptionList type="responsiveColumn" compressed={true}>
<EuiDescriptionList type="column" compressed={true}>
<EuiDescriptionListTitle>{ENABLED_LABEL}</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
{monitor && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { ReportTypes } from '@kbn/observability-plugin/public';
import { useParams } from 'react-router-dom';
import { i18n } from '@kbn/i18n';

import { useSelectedMonitor } from '../hooks/use_selected_monitor';
import { ClientPluginsStart } from '../../../../../plugin';
export const StepDurationPanel = () => {
const { observability } = useKibana<ClientPluginsStart>().services;
Expand All @@ -20,12 +21,16 @@ export const StepDurationPanel = () => {

const { monitorId } = useParams<{ monitorId: string }>();

const { monitor } = useSelectedMonitor();

const isBrowser = monitor?.type === 'browser';

return (
<EuiPanel>
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiTitle size="xs">
<h3>{DURATION_BY_STEP_LABEL}</h3>
<h3>{isBrowser ? DURATION_BY_STEP_LABEL : DURATION_BY_LOCATION}</h3>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
Expand All @@ -43,10 +48,10 @@ export const StepDurationPanel = () => {
{
name: DURATION_BY_STEP_LABEL,
reportDefinitions: { 'monitor.id': [monitorId] },
selectedMetricField: 'synthetics.step.duration.us',
selectedMetricField: isBrowser ? 'synthetics.step.duration.us' : 'monitor.duration.us',
dataType: 'synthetics',
time: { from: 'now-24h/h', to: 'now' },
breakdown: 'synthetics.step.name.keyword',
breakdown: isBrowser ? 'synthetics.step.name.keyword' : 'observer.geo.name',
operationType: 'last_value',
seriesType: 'area_stacked',
},
Expand All @@ -60,6 +65,10 @@ const DURATION_BY_STEP_LABEL = i18n.translate('xpack.synthetics.detailsPanel.dur
defaultMessage: 'Duration by step',
});

const DURATION_BY_LOCATION = i18n.translate('xpack.synthetics.detailsPanel.durationByLocation', {
defaultMessage: 'Duration by location',
});

const LAST_24H_LABEL = i18n.translate('xpack.synthetics.detailsPanel.last24Hours', {
defaultMessage: 'Last 24 hours',
});
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@ export const fetchSyntheticsMonitor = async ({
)) as SavedObject<SyntheticsMonitor>;

return {
id: savedObject.id,
...savedObject.attributes,
id: savedObject.id,
updated_at: savedObject.updated_at,
} as EncryptedSyntheticsSavedMonitor;
};

0 comments on commit d4a0b36

Please sign in to comment.