From 21d129612418cb2522c07f47fa18ffd13a1ce2a6 Mon Sep 17 00:00:00 2001 From: "Christiane (Tina) Heiligers" Date: Thu, 16 Dec 2021 11:16:32 -0700 Subject: [PATCH] Adds event loop delay percentiles to mean delay (#121052) (#121432) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../__snapshots__/metric_tiles.test.tsx.snap | 45 ++++++-- .../status/components/metric_tiles.test.tsx | 17 +++ .../status/components/metric_tiles.tsx | 106 ++++++++++++++++-- .../core_app/status/lib/load_status.test.ts | 18 ++- .../public/core_app/status/lib/load_status.ts | 62 +++++++--- test/functional/apps/status_page/index.ts | 5 + 6 files changed, 220 insertions(+), 33 deletions(-) diff --git a/src/core/public/core_app/status/components/__snapshots__/metric_tiles.test.tsx.snap b/src/core/public/core_app/status/components/__snapshots__/metric_tiles.test.tsx.snap index 2219e0d7609b8..cc4e27a6d6388 100644 --- a/src/core/public/core_app/status/components/__snapshots__/metric_tiles.test.tsx.snap +++ b/src/core/public/core_app/status/components/__snapshots__/metric_tiles.test.tsx.snap @@ -4,17 +4,24 @@ exports[`MetricTile correct displays a byte metric 1`] = ` `; exports[`MetricTile correct displays a float metric 1`] = ` - `; @@ -22,7 +29,7 @@ exports[`MetricTile correct displays a time metric 1`] = ` `; @@ -31,7 +38,29 @@ exports[`MetricTile correct displays an untyped metric 1`] = ` `; + +exports[`MetricTile correctly displays a metric with metadata 1`] = ` + +`; diff --git a/src/core/public/core_app/status/components/metric_tiles.test.tsx b/src/core/public/core_app/status/components/metric_tiles.test.tsx index 76608718e8cd3..8e6d1cf38cd01 100644 --- a/src/core/public/core_app/status/components/metric_tiles.test.tsx +++ b/src/core/public/core_app/status/components/metric_tiles.test.tsx @@ -35,6 +35,18 @@ const timeMetric: Metric = { value: 1234, }; +const metricWithMeta: Metric = { + name: 'Delay', + type: 'time', + value: 1, + meta: { + description: 'Percentiles', + title: '', + value: [1, 5, 10], + type: 'time', + }, +}; + describe('MetricTile', () => { it('correct displays an untyped metric', () => { const component = shallow(); @@ -55,4 +67,9 @@ describe('MetricTile', () => { const component = shallow(); expect(component).toMatchSnapshot(); }); + + it('correctly displays a metric with metadata', () => { + const component = shallow(); + expect(component).toMatchSnapshot(); + }); }); diff --git a/src/core/public/core_app/status/components/metric_tiles.tsx b/src/core/public/core_app/status/components/metric_tiles.tsx index 1eb5ee4c95dd8..18fa9ae738227 100644 --- a/src/core/public/core_app/status/components/metric_tiles.tsx +++ b/src/core/public/core_app/status/components/metric_tiles.tsx @@ -7,24 +7,105 @@ */ import React, { FunctionComponent } from 'react'; -import { EuiFlexGrid, EuiFlexItem, EuiCard } from '@elastic/eui'; -import { formatNumber, Metric } from '../lib'; +import { EuiFlexGrid, EuiFlexItem, EuiCard, EuiStat } from '@elastic/eui'; +import { DataType, formatNumber, Metric } from '../lib'; /* - * Displays a metric with the correct format. + * Displays metadata for a metric. */ -export const MetricTile: FunctionComponent<{ metric: Metric }> = ({ metric }) => { - const { name } = metric; +const MetricCardFooter: FunctionComponent<{ + title: string; + description: string; +}> = ({ title, description }) => { + return ( + + ); +}; + +const DelayMetricTile: FunctionComponent<{ metric: Metric }> = ({ metric }) => { + const { name, meta } = metric; return ( + ) + } + /> + ); +}; + +const LoadMetricTile: FunctionComponent<{ metric: Metric }> = ({ metric }) => { + const { name, meta } = metric; + return ( + } /> ); }; +const ResponseTimeMetric: FunctionComponent<{ metric: Metric }> = ({ metric }) => { + const { name, meta } = metric; + return ( + + ) + } + /> + ); +}; + +/* + * Displays a metric with the correct format. + */ +export const MetricTile: FunctionComponent<{ metric: Metric }> = ({ metric }) => { + const { name } = metric; + switch (name) { + case 'Delay': + return ; + case 'Load': + return ; + case 'Response time avg': + return ; + default: + return ( + + ); + } +}; + /* * Wrapper component that simply maps each metric to MetricTile inside a FlexGroup */ @@ -38,11 +119,20 @@ export const MetricTiles: FunctionComponent<{ metrics: Metric[] }> = ({ metrics ); +// formatting helper functions + const formatMetric = ({ value, type }: Metric) => { const metrics = Array.isArray(value) ? value : [value]; return metrics.map((metric) => formatNumber(metric, type)).join(', '); }; -const formatMetricId = ({ name }: Metric) => { +const formatMetricId = (name: Metric['name']) => { return name.toLowerCase().replace(/[ ]+/g, '-'); }; + +const formatDelayFooterTitle = (values: number[], type?: DataType) => { + return ` + 50: ${formatNumber(values[0], type)}; + 95: ${formatNumber(values[1], type)}; + 99: ${formatNumber(values[2], type)}`; +}; diff --git a/src/core/public/core_app/status/lib/load_status.test.ts b/src/core/public/core_app/status/lib/load_status.test.ts index 73c697c3d55aa..5b5a2d0af99bc 100644 --- a/src/core/public/core_app/status/lib/load_status.test.ts +++ b/src/core/public/core_app/status/lib/load_status.test.ts @@ -218,13 +218,23 @@ describe('response processing', () => { expect(names).toEqual([ 'Heap total', 'Heap used', + 'Requests per second', 'Load', + 'Delay', 'Response time avg', - 'Response time max', - 'Requests per second', ]); - const values = data.metrics.map((m) => m.value); - expect(values).toEqual([1000000, 100, [4.1, 2.1, 0.1], 4000, 8000, 400]); + expect(values).toEqual([1000000, 100, 400, [4.1, 2.1, 0.1], 1, 4000]); + }); + + test('adds meta details to Load, Delay and Response time', async () => { + const data = await loadStatus({ http, notifications }); + const metricNames = data.metrics.filter((met) => met.meta); + expect(metricNames.map((item) => item.name)).toEqual(['Load', 'Delay', 'Response time avg']); + expect(metricNames.map((item) => item.meta!.description)).toEqual([ + 'Load interval', + 'Percentiles', + 'Response time max', + ]); }); }); diff --git a/src/core/public/core_app/status/lib/load_status.ts b/src/core/public/core_app/status/lib/load_status.ts index a5cc18ffd6c16..f33ad70c63f53 100644 --- a/src/core/public/core_app/status/lib/load_status.ts +++ b/src/core/public/core_app/status/lib/load_status.ts @@ -13,10 +13,17 @@ import type { HttpSetup } from '../../../http'; import type { NotificationsSetup } from '../../../notifications'; import type { DataType } from '../lib'; +interface MetricMeta { + title: string; + description: string; + value?: number[]; + type?: DataType; +} export interface Metric { name: string; value: number | number[]; type?: DataType; + meta?: MetricMeta; } export interface FormattedStatus { @@ -57,33 +64,62 @@ function formatMetrics({ metrics }: StatusResponse): Metric[] { value: metrics.process.memory.heap.used_in_bytes, type: 'byte', }, + { + name: i18n.translate('core.statusPage.metricsTiles.columns.requestsPerSecHeader', { + defaultMessage: 'Requests per second', + }), + value: (metrics.requests.total * 1000) / metrics.collection_interval_in_millis, + type: 'float', + }, { name: i18n.translate('core.statusPage.metricsTiles.columns.loadHeader', { defaultMessage: 'Load', }), value: [metrics.os.load['1m'], metrics.os.load['5m'], metrics.os.load['15m']], type: 'float', + meta: { + description: i18n.translate('core.statusPage.metricsTiles.columns.load.metaHeader', { + defaultMessage: 'Load interval', + }), + title: Object.keys(metrics.os.load).join('; '), + }, }, { - name: i18n.translate('core.statusPage.metricsTiles.columns.resTimeAvgHeader', { - defaultMessage: 'Response time avg', + name: i18n.translate('core.statusPage.metricsTiles.columns.processDelayHeader', { + defaultMessage: 'Delay', }), - value: metrics.response_times.avg_in_millis, + value: metrics.process.event_loop_delay, type: 'time', + meta: { + description: i18n.translate( + 'core.statusPage.metricsTiles.columns.processDelayDetailsHeader', + { + defaultMessage: 'Percentiles', + } + ), + title: '', + value: [ + metrics.process.event_loop_delay_histogram?.percentiles['50'], + metrics.process.event_loop_delay_histogram?.percentiles['95'], + metrics.process.event_loop_delay_histogram?.percentiles['99'], + ], + type: 'time', + }, }, { - name: i18n.translate('core.statusPage.metricsTiles.columns.resTimeMaxHeader', { - defaultMessage: 'Response time max', + name: i18n.translate('core.statusPage.metricsTiles.columns.resTimeAvgHeader', { + defaultMessage: 'Response time avg', }), - value: metrics.response_times.max_in_millis, + value: metrics.response_times.avg_in_millis, type: 'time', - }, - { - name: i18n.translate('core.statusPage.metricsTiles.columns.requestsPerSecHeader', { - defaultMessage: 'Requests per second', - }), - value: (metrics.requests.total * 1000) / metrics.collection_interval_in_millis, - type: 'float', + meta: { + description: i18n.translate('core.statusPage.metricsTiles.columns.resTimeMaxHeader', { + defaultMessage: 'Response time max', + }), + title: '', + value: [metrics.response_times.max_in_millis], + type: 'time', + }, }, ]; } diff --git a/test/functional/apps/status_page/index.ts b/test/functional/apps/status_page/index.ts index 08693372cc6eb..21a3b382f7aed 100644 --- a/test/functional/apps/status_page/index.ts +++ b/test/functional/apps/status_page/index.ts @@ -33,6 +33,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { expect(metrics).to.have.length(6); }); + it('should display the server metrics meta', async () => { + const metricsMetas = await testSubjects.findAll('serverMetricMeta'); + expect(metricsMetas).to.have.length(3); + }); + it('should display the server status', async () => { const titleText = await testSubjects.getVisibleText('serverStatusTitle'); expect(titleText).to.contain('Kibana status is');