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] Better formatting for waterfall timeline tooltips (#149142)

Browse source 
Co-authored-by: Shahzad <shahzad31comp@gmail.com>
This commit is contained in:
Abdul Wahab Zahid 2023-01-24 11:59:45 +01:00 • committed by GitHub
parent 48eb4d51d1
commit 83d799a9c7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 11 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

4
x-pack/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/result_details.tsx
View file

@ -54,10 +54,10 @@ export const TimingDetails = ({ step }: { step: JourneyStep }) => {
<EuiLoadingContent lines={1} />
) : (
<ThresholdIndicator
currentFormatted={formatMillisecond(item.value, 1)}
currentFormatted={formatMillisecond(item.value, { digits: 1 })}
current={Number(item.value.toFixed(1))}
previous={Number(prevValue.toFixed(1))}
previousFormatted={formatMillisecond(prevValue, 1)}
previousFormatted={formatMillisecond(prevValue, { digits: 1 })}
/>
),
};

7
x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/common/network_data/data_formatting.ts
View file

@ -491,8 +491,11 @@ export const colourPalette: ColourPalette = { ...TIMING_PALETTE, ...MIME_TYPE_PA
export const formatTooltipHeading = (index: number, fullText: string): string =>
isNaN(index) ? fullText : `${index}. ${fullText}`;
export const formatMillisecond = (ms: number, digits?: number) => {
if (ms < 1000) {
export const formatMillisecond = (
ms: number,
{ maxMillis = 1000, digits }: { digits?: number; maxMillis?: number }
) => {
if (ms < maxMillis) {
return `${ms.toFixed(digits ?? 0)} ms`;
}
return `${(ms / 1000).toFixed(digits ?? 1)} s`;

2
x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_timing_breakdown/breakdown_legend.tsx
View file

@ -32,7 +32,7 @@ export const BreakdownLegend = () => {
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiText css={{ whiteSpace: 'nowrap' }} size="s">
{formatMillisecond(value)}
{formatMillisecond(value, {})}
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>

2
x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_timing_breakdown/network_timings_donut.tsx
View file

@ -58,7 +58,7 @@ export const NetworkTimingsDonut = () => {
data={networkTimings.timingsWithLabels}
layout={PartitionLayout.sunburst}
valueAccessor={(d: Datum) => d?.value}
valueFormatter={(d: number) => formatMillisecond(d)}
valueFormatter={(d: number) => formatMillisecond(d, {})}
layers={[
{
groupByRollup: (d: Datum) => d.label,

6
x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_marker/waterfall_markers.tsx
View file

@ -13,6 +13,7 @@ import { euiStyled } from '@kbn/kibana-react-plugin/common';
import { MarkerItems, useWaterfallContext } from '../context/waterfall_context';
import { WaterfallMarkerIcon } from './waterfall_marker_icon';
import { formatMillisecond } from '../../../common/network_data/data_formatting';
export const FIELD_SYNTHETICS_LCP = 'browser.experience.lcp.us';
export const FIELD_SYNTHETICS_FCP = 'browser.experience.fcp.us';
@ -98,10 +99,7 @@ export function WaterfallChartMarkers() {
{
dataValue: offset,
details: label,
header: i18n.translate('xpack.synthetics.synthetics.waterfall.offsetUnit', {
defaultMessage: '{offset} ms',
values: { offset },
}),
header: formatMillisecond(offset, { maxMillis: 4000 }),
},
]}
marker={<WaterfallMarkerIcon field={field} label={label} />}