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

[Synthetics] Added total step duration (#144993)

Browse source
This commit is contained in:
Shahzad 2022-11-14 15:00:20 +01:00 • committed by GitHub
parent ea6a270c21
commit e580f23b13
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 33 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

1
x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/synthetics/single_metric_config.ts
View file

@ -91,6 +91,7 @@ export function getSyntheticsSingleMetricConfig({ dataView }: ConfigProps): Seri
}),
metricStateOptions: {
titlePosition: 'bottom',
textAlign: 'center',
},
},
{

2
x-pack/plugins/observability/public/components/shared/exploratory_view/types.ts
View file

@ -69,7 +69,7 @@ export interface MetricOption {
timeScale?: string;
showPercentileAnnotations?: boolean;
formula?: string;
metricStateOptions?: Pick<MetricState, 'colorMode' | 'palette' | 'titlePosition'>;
metricStateOptions?: Pick<MetricState, 'colorMode' | 'palette' | 'titlePosition' | 'textAlign'>;
palette?: PaletteOutput;
format?: 'percent' | 'number';
}

27
x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/components/step_metrics.tsx
View file

@ -14,6 +14,7 @@ import {
EuiTitle,
EuiIcon,
EuiIconTip,
EuiFlexGrid,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { CLS_HELP_LABEL, DCL_TOOLTIP, FCP_TOOLTIP, LCP_HELP_LABEL } from './labels';
@ -31,7 +32,7 @@ export const formatMillisecond = (ms: number) => {
export const StepMetrics = () => {
const stepMetrics = useStepMetrics();
const { fcpThreshold, lcpThreshold, clsThreshold, dclThreshold } =
const { fcpThreshold, lcpThreshold, clsThreshold, dclThreshold, totalThreshold } =
useStepPrevMetrics(stepMetrics);
return (
@ -48,7 +49,14 @@ export const StepMetrics = () => {
</EuiFlexGroup>
<EuiSpacer size="s" />
<EuiFlexGroup gutterSize="l">
<EuiFlexGrid gutterSize="l" columns={3}>
<EuiFlexItem>
<StatThreshold
description={TOTAL_DURATION_LABEL}
title={formatMillisecond((stepMetrics.totalDuration?.value ?? 0) / 1000)}
threshold={totalThreshold}
/>
</EuiFlexItem>
<EuiFlexItem>
<StatThreshold
description={'FCP'}
@ -73,9 +81,6 @@ export const StepMetrics = () => {
helpText={CLS_HELP_LABEL}
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="m" />
<EuiFlexGroup wrap>
<EuiFlexItem>
<StatThreshold
description={'DCL'}
@ -86,13 +91,14 @@ export const StepMetrics = () => {
</EuiFlexItem>
<EuiFlexItem>
<EuiStat
titleSize="s"
description={'Transfer size'}
title={stepMetrics.transferData + ' MB'}
reverse={true}
/>
</EuiFlexItem>
<EuiFlexItem />
</EuiFlexGroup>
</EuiFlexGrid>
</>
);
};
@ -106,7 +112,7 @@ const StatThreshold = ({
threshold: number;
title: number | string;
description: string;
helpText: string;
helpText?: string;
}) => {
const isUp = threshold >= 5;
const isDown = threshold < 5;
@ -116,10 +122,11 @@ const StatThreshold = ({
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiStat
titleSize="s"
{...(isSame ? {} : { titleColor: isUp ? 'danger' : 'success' })}
description={
<span>
{description} <EuiIconTip content={helpText} position="right" />
{description} {helpText && <EuiIconTip content={helpText} position="right" />}
</span>
}
title={
@ -144,3 +151,7 @@ const StatThreshold = ({
const METRICS_LABEL = i18n.translate('xpack.synthetics.stepDetailsRoute.metrics', {
defaultMessage: 'Metrics',
});
const TOTAL_DURATION_LABEL = i18n.translate('xpack.synthetics.totalDuration.metrics', {
defaultMessage: 'Step duration',
});

9
x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/hooks/use_step_metrics.ts
View file

@ -32,8 +32,8 @@ export const useStepMetrics = (loadData = true, prevCheckGroupId?: string) => {
bool: {
filter: [
{
term: {
'synthetics.type': 'step/metrics',
terms: {
'synthetics.type': ['step/metrics', 'step/end'],
},
},
...useStepFilters(prevCheckGroupId),
@ -61,6 +61,11 @@ export const useStepMetrics = (loadData = true, prevCheckGroupId?: string) => {
field: SYNTHETICS_DCL,
},
},
totalDuration: {
sum: {
field: SYNTHETICS_STEP_DURATION,
},
},
},
},
},

5
x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/hooks/use_step_prev_metrics.ts
View file

@ -31,12 +31,17 @@ export const useStepPrevMetrics = (stepMetrics: StepMetrics) => {
const lcpThreshold = findThreshold(stepMetrics?.lcp?.value, prevMetrics?.lcp?.value);
const clsThreshold = findThreshold(stepMetrics?.cls?.value, prevMetrics?.cls?.value);
const dclThreshold = findThreshold(stepMetrics?.dcl?.value, prevMetrics?.dcl?.value);
const totalThreshold = findThreshold(
stepMetrics?.totalDuration?.value,
prevMetrics?.totalDuration?.value
);
return {
fcpThreshold,
lcpThreshold,
clsThreshold,
dclThreshold,
totalThreshold,
};
};