[Stack Monitoring] Document count graph doesn't show exact number (#164809)

closes https://github.com/elastic/kibana/issues/164667

## 📝  Summary

This PR modifies the legend for `Document Count` graph in stack
monitoring to allow showing the exact document count when the user
hovers on a specific point.

##   Testing

1. Make sure to have any dummy index with millions of documents
2. Navigate to Indices tab in Stack Monitoring
3. Click on the created index and observe the Document Count Graph 
4. Hovering on any point should show the exact document count through
the legend below the graph

## 🎥 Demo


56747cf7-7914-4742-884a-9f9a9f59e9e6
This commit is contained in:
mohamedhamed-ahmed 2023-08-29 18:57:36 +02:00 committed by GitHub
parent 6fc6921361
commit 2eb46924cb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 956 additions and 626 deletions

View file

@ -12,6 +12,7 @@ export const SMALL_FLOAT = '0.[00]';
export const LARGE_BYTES = '0,0.0 b';
export const SMALL_BYTES = '0.0 b';
export const LARGE_ABBREVIATED = '0,0.[0]a';
export const LARGE = '0,0';
export const ROUNDED_FLOAT = '00.[00]';
/**

View file

@ -52,8 +52,10 @@ export class HorizontalLegend extends React.Component {
return this.displayValue(row.tickFormatter(value));
}
if (isFunction(this.props.tickFormatter)) {
return this.displayValue(this.props.tickFormatter(value));
const formatter = this.props.legendFormatter || this.props.tickFormatter;
if (isFunction(formatter)) {
return this.displayValue(formatter(value));
}
return this.displayValue(value);
}

View file

@ -11,8 +11,8 @@ import numeral from '@elastic/numeral';
import { getColor } from './get_color';
import { TimeseriesVisualization } from './timeseries_visualization';
function formatTicksFor(series) {
const format = get(series, 'metric.format', '0,0.0');
function formatTicksFor(series, formatProperty = 'metric.format') {
const format = get(series, formatProperty, '0,0.0');
const units = get(series, 'metric.units', '');
return function formatTicks(val) {
@ -38,12 +38,15 @@ export function MonitoringTimeseries({ series, onBrush }) {
const firstSeries = first(series);
const timeRange = get(firstSeries, 'timeRange');
const formatTicks = formatTicksFor(firstSeries);
const legendFormatter =
firstSeries.metric.legendFormat && formatTicksFor(firstSeries, 'metric.legendFormat');
return (
<TimeseriesVisualization
series={dataset}
timeRange={timeRange}
tickFormatter={formatTicks}
legendFormatter={legendFormatter}
onBrush={onBrush}
/>
);

View file

@ -371,6 +371,7 @@ Object {
"hasCalculation": false,
"isDerivative": true,
"label": "Total Shards",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"title": "Search Rate",
@ -752,6 +753,7 @@ Object {
"hasCalculation": true,
"isDerivative": false,
"label": "Indexing Latency",
"legendFormat": undefined,
"metricAgg": "sum",
"technicalPreview": undefined,
"units": "ms",
@ -1128,6 +1130,7 @@ Object {
"hasCalculation": false,
"isDerivative": false,
"label": "Max",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"title": "Client Response Time",
@ -1505,6 +1508,7 @@ Object {
"hasCalculation": false,
"isDerivative": false,
"label": "CPU Utilization",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"units": "%",
@ -1881,6 +1885,7 @@ Object {
"hasCalculation": false,
"isDerivative": false,
"label": "Fixed Bitsets",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"title": "Index Memory - Lucene",
@ -2251,6 +2256,7 @@ Object {
"hasCalculation": false,
"isDerivative": false,
"label": "Version Map",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"title": "Index Memory",

View file

@ -47,6 +47,7 @@ Array [
"hasCalculation": true,
"isDerivative": true,
"label": "Cgroup CPU Utilization",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"title": "CPU Utilization",
@ -68,6 +69,7 @@ Array [
"hasCalculation": false,
"isDerivative": true,
"label": "Cgroup Throttling",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"title": "Cgroup CPU Performance",
@ -89,6 +91,7 @@ Array [
"hasCalculation": false,
"isDerivative": false,
"label": "CPU Utilization",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"units": "%",
@ -109,6 +112,7 @@ Array [
"hasCalculation": false,
"isDerivative": false,
"label": "Disk Free Space",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"units": "",
@ -129,6 +133,7 @@ Array [
"hasCalculation": false,
"isDerivative": false,
"label": "Used Heap",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"title": "JVM Heap",
@ -150,6 +155,7 @@ Array [
"hasCalculation": false,
"isDerivative": false,
"label": "1m",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"title": "System Load",
@ -184,6 +190,7 @@ Array [
"hasCalculation": false,
"isDerivative": true,
"label": "Cgroup Throttling",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"title": "Cgroup CPU Performance",
@ -205,6 +212,7 @@ Array [
"hasCalculation": false,
"isDerivative": false,
"label": "CPU Utilization",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"units": "%",
@ -225,6 +233,7 @@ Array [
"hasCalculation": false,
"isDerivative": false,
"label": "Disk Free Space",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"units": "",
@ -245,6 +254,7 @@ Array [
"hasCalculation": false,
"isDerivative": false,
"label": "Used Heap",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"title": "JVM Heap",
@ -266,6 +276,7 @@ Array [
"hasCalculation": false,
"isDerivative": false,
"label": "1m",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"title": "System Load",
@ -345,6 +356,7 @@ Array [
"hasCalculation": true,
"isDerivative": true,
"label": "Cgroup CPU Utilization",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"title": "CPU Utilization",
@ -366,6 +378,7 @@ Array [
"hasCalculation": false,
"isDerivative": true,
"label": "Cgroup Throttling",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"title": "Cgroup CPU Performance",
@ -387,6 +400,7 @@ Array [
"hasCalculation": false,
"isDerivative": false,
"label": "CPU Utilization",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"units": "%",
@ -407,6 +421,7 @@ Array [
"hasCalculation": false,
"isDerivative": false,
"label": "Disk Free Space",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"units": "",
@ -427,6 +442,7 @@ Array [
"hasCalculation": false,
"isDerivative": false,
"label": "Used Heap",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"title": "JVM Heap",
@ -448,6 +464,7 @@ Array [
"hasCalculation": false,
"isDerivative": false,
"label": "1m",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"title": "System Load",
@ -482,6 +499,7 @@ Array [
"hasCalculation": false,
"isDerivative": true,
"label": "Cgroup Throttling",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"title": "Cgroup CPU Performance",
@ -503,6 +521,7 @@ Array [
"hasCalculation": false,
"isDerivative": false,
"label": "CPU Utilization",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"units": "%",
@ -523,6 +542,7 @@ Array [
"hasCalculation": false,
"isDerivative": false,
"label": "Disk Free Space",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"units": "",
@ -543,6 +563,7 @@ Array [
"hasCalculation": false,
"isDerivative": false,
"label": "Used Heap",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"title": "JVM Heap",
@ -564,6 +585,7 @@ Array [
"hasCalculation": false,
"isDerivative": false,
"label": "1m",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"title": "System Load",

View file

@ -12,6 +12,7 @@ Object {
"hasCalculation": false,
"isDerivative": false,
"label": "CPU Utilization",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"units": "%",
@ -32,6 +33,7 @@ Object {
"hasCalculation": false,
"isDerivative": false,
"label": "Used Heap",
"legendFormat": undefined,
"metricAgg": "max",
"technicalPreview": undefined,
"title": "JVM Heap",

View file

@ -25,6 +25,7 @@ interface OptionalMetricOptions {
type?: string;
isNotSupportedInInternalCollection?: boolean;
technicalPreview?: boolean;
legendFormat?: string;
}
interface DefaultMetricOptions {
@ -40,6 +41,7 @@ export class Metric {
public label!: string;
public description!: string;
public format!: string;
public legendFormat?: string;
public units!: string;
public timestampField!: string;
public app?: string;
@ -101,6 +103,7 @@ export class Metric {
'description',
'units',
'format',
'legendFormat',
'technicalPreview',
];

View file

@ -15,7 +15,14 @@ import { NORMALIZED_DERIVATIVE_UNIT } from '../../../../common/constants';
type ElasticsearchMetricOptions = Pick<
MetricOptions,
'format' | 'metricAgg' | 'field' | 'label' | 'description' | 'units' | 'derivative'
| 'format'
| 'metricAgg'
| 'field'
| 'label'
| 'description'
| 'units'
| 'derivative'
| 'legendFormat'
> &
Partial<Pick<MetricOptions, 'title'>> & { type: string; min?: number };

View file

@ -27,6 +27,7 @@ import {
SMALL_BYTES,
LARGE_BYTES,
LARGE_ABBREVIATED,
LARGE,
} from '../../../../common/formatting';
const indexingRateTitle = i18n.translate('xpack.monitoring.metrics.es.indexingRateTitle', {
@ -1397,6 +1398,7 @@ export const metrics = {
}),
type: 'index',
format: LARGE_ABBREVIATED,
legendFormat: LARGE,
metricAgg: 'max',
units: '',
}),

View file

@ -30,82 +30,25 @@
"isDerivative": true
},
"data": [
[
1507235520000,
null
],
[
1507235530000,
0
],
[
1507235540000,
0
],
[
1507235550000,
0
],
[
1507235560000,
0
],
[
1507235570000,
0
],
[
1507235580000,
0
],
[
1507235590000,
0
],
[
1507235600000,
0
],
[
1507235610000,
0
],
[
1507235620000,
0
],
[
1507235630000,
0
],
[
1507235640000,
0
],
[
1507235650000,
0
],
[
1507235660000,
0
],
[
1507235670000,
0
],
[
1507235680000,
0
],
[
1507235690000,
0
],
[
1507235700000,
0
]
[1507235520000, null],
[1507235530000, 0],
[1507235540000, 0],
[1507235550000, 0],
[1507235560000, 0],
[1507235570000, 0],
[1507235580000, 0],
[1507235590000, 0],
[1507235600000, 0],
[1507235610000, 0],
[1507235620000, 0],
[1507235630000, 0],
[1507235640000, 0],
[1507235650000, 0],
[1507235660000, 0],
[1507235670000, 0],
[1507235680000, 0],
[1507235690000, 0],
[1507235700000, 0]
]
}
],
@ -129,82 +72,25 @@
"isDerivative": true
},
"data": [
[
1507235520000,
null
],
[
1507235530000,
0
],
[
1507235540000,
0
],
[
1507235550000,
0
],
[
1507235560000,
0
],
[
1507235570000,
0
],
[
1507235580000,
0
],
[
1507235590000,
0
],
[
1507235600000,
0
],
[
1507235610000,
0
],
[
1507235620000,
0
],
[
1507235630000,
0
],
[
1507235640000,
0
],
[
1507235650000,
0
],
[
1507235660000,
0
],
[
1507235670000,
0
],
[
1507235680000,
0
],
[
1507235690000,
0
],
[
1507235700000,
0
]
[1507235520000, null],
[1507235530000, 0],
[1507235540000, 0],
[1507235550000, 0],
[1507235560000, 0],
[1507235570000, 0],
[1507235580000, 0],
[1507235590000, 0],
[1507235600000, 0],
[1507235610000, 0],
[1507235620000, 0],
[1507235630000, 0],
[1507235640000, 0],
[1507235650000, 0],
[1507235660000, 0],
[1507235670000, 0],
[1507235680000, 0],
[1507235690000, 0],
[1507235700000, 0]
]
},
{
@ -226,82 +112,25 @@
"isDerivative": true
},
"data": [
[
1507235520000,
null
],
[
1507235530000,
0
],
[
1507235540000,
0
],
[
1507235550000,
0
],
[
1507235560000,
0
],
[
1507235570000,
0
],
[
1507235580000,
0
],
[
1507235590000,
0
],
[
1507235600000,
0
],
[
1507235610000,
0
],
[
1507235620000,
0
],
[
1507235630000,
0
],
[
1507235640000,
0
],
[
1507235650000,
0
],
[
1507235660000,
0
],
[
1507235670000,
0
],
[
1507235680000,
0
],
[
1507235690000,
0
],
[
1507235700000,
0
]
[1507235520000, null],
[1507235530000, 0],
[1507235540000, 0],
[1507235550000, 0],
[1507235560000, 0],
[1507235570000, 0],
[1507235580000, 0],
[1507235590000, 0],
[1507235600000, 0],
[1507235610000, 0],
[1507235620000, 0],
[1507235630000, 0],
[1507235640000, 0],
[1507235650000, 0],
[1507235660000, 0],
[1507235670000, 0],
[1507235680000, 0],
[1507235690000, 0],
[1507235700000, 0]
]
}
],
@ -325,82 +154,25 @@
"isDerivative": false
},
"data": [
[
1507235520000,
9202023
],
[
1507235530000,
9202023
],
[
1507235540000,
9202023
],
[
1507235550000,
9202023
],
[
1507235560000,
9202023
],
[
1507235570000,
9202023
],
[
1507235580000,
9202023
],
[
1507235590000,
9202023
],
[
1507235600000,
9202023
],
[
1507235610000,
9202023
],
[
1507235620000,
9202023
],
[
1507235630000,
9202023
],
[
1507235640000,
9202023
],
[
1507235650000,
9202023
],
[
1507235660000,
9202023
],
[
1507235670000,
9202023
],
[
1507235680000,
9202023
],
[
1507235690000,
9202023
],
[
1507235700000,
9202023
]
[1507235520000, 9202023],
[1507235530000, 9202023],
[1507235540000, 9202023],
[1507235550000, 9202023],
[1507235560000, 9202023],
[1507235570000, 9202023],
[1507235580000, 9202023],
[1507235590000, 9202023],
[1507235600000, 9202023],
[1507235610000, 9202023],
[1507235620000, 9202023],
[1507235630000, 9202023],
[1507235640000, 9202023],
[1507235650000, 9202023],
[1507235660000, 9202023],
[1507235670000, 9202023],
[1507235680000, 9202023],
[1507235690000, 9202023],
[1507235700000, 9202023]
]
},
{
@ -422,82 +194,25 @@
"isDerivative": false
},
"data": [
[
1507235520000,
4601000
],
[
1507235530000,
4601000
],
[
1507235540000,
4601000
],
[
1507235550000,
4601000
],
[
1507235560000,
4601000
],
[
1507235570000,
4601000
],
[
1507235580000,
4601000
],
[
1507235590000,
4601000
],
[
1507235600000,
4601000
],
[
1507235610000,
4601000
],
[
1507235620000,
4601000
],
[
1507235630000,
4601000
],
[
1507235640000,
4601000
],
[
1507235650000,
4601000
],
[
1507235660000,
4601000
],
[
1507235670000,
4601000
],
[
1507235680000,
4601000
],
[
1507235690000,
4601000
],
[
1507235700000,
4601000
]
[1507235520000, 4601000],
[1507235530000, 4601000],
[1507235540000, 4601000],
[1507235550000, 4601000],
[1507235560000, 4601000],
[1507235570000, 4601000],
[1507235580000, 4601000],
[1507235590000, 4601000],
[1507235600000, 4601000],
[1507235610000, 4601000],
[1507235620000, 4601000],
[1507235630000, 4601000],
[1507235640000, 4601000],
[1507235650000, 4601000],
[1507235660000, 4601000],
[1507235670000, 4601000],
[1507235680000, 4601000],
[1507235690000, 4601000],
[1507235700000, 4601000]
]
}
],
@ -516,86 +231,30 @@
"description": "Total number of documents, only including primary shards.",
"units": "",
"format": "0,0.[0]a",
"legendFormat": "0,0",
"hasCalculation": false,
"isDerivative": false
},
"data": [
[
1507235520000,
628
],
[
1507235530000,
628
],
[
1507235540000,
628
],
[
1507235550000,
628
],
[
1507235560000,
628
],
[
1507235570000,
628
],
[
1507235580000,
628
],
[
1507235590000,
628
],
[
1507235600000,
628
],
[
1507235610000,
628
],
[
1507235620000,
628
],
[
1507235630000,
628
],
[
1507235640000,
628
],
[
1507235650000,
628
],
[
1507235660000,
628
],
[
1507235670000,
628
],
[
1507235680000,
628
],
[
1507235690000,
628
],
[
1507235700000,
628
]
[1507235520000, 628],
[1507235530000, 628],
[1507235540000, 628],
[1507235550000, 628],
[1507235560000, 628],
[1507235570000, 628],
[1507235580000, 628],
[1507235590000, 628],
[1507235600000, 628],
[1507235610000, 628],
[1507235620000, 628],
[1507235630000, 628],
[1507235640000, 628],
[1507235650000, 628],
[1507235660000, 628],
[1507235670000, 628],
[1507235680000, 628],
[1507235690000, 628],
[1507235700000, 628]
]
}
],
@ -619,82 +278,25 @@
"isDerivative": false
},
"data": [
[
1507235520000,
60
],
[
1507235530000,
60
],
[
1507235540000,
60
],
[
1507235550000,
60
],
[
1507235560000,
60
],
[
1507235570000,
60
],
[
1507235580000,
60
],
[
1507235590000,
60
],
[
1507235600000,
60
],
[
1507235610000,
60
],
[
1507235620000,
60
],
[
1507235630000,
60
],
[
1507235640000,
60
],
[
1507235650000,
60
],
[
1507235660000,
60
],
[
1507235670000,
60
],
[
1507235680000,
60
],
[
1507235690000,
60
],
[
1507235700000,
60
]
[1507235520000, 60],
[1507235530000, 60],
[1507235540000, 60],
[1507235550000, 60],
[1507235560000, 60],
[1507235570000, 60],
[1507235580000, 60],
[1507235590000, 60],
[1507235600000, 60],
[1507235610000, 60],
[1507235620000, 60],
[1507235630000, 60],
[1507235640000, 60],
[1507235650000, 60],
[1507235660000, 60],
[1507235670000, 60],
[1507235680000, 60],
[1507235690000, 60],
[1507235700000, 60]
]
},
{
@ -716,82 +318,25 @@
"isDerivative": false
},
"data": [
[
1507235520000,
30
],
[
1507235530000,
30
],
[
1507235540000,
30
],
[
1507235550000,
30
],
[
1507235560000,
30
],
[
1507235570000,
30
],
[
1507235580000,
30
],
[
1507235590000,
30
],
[
1507235600000,
30
],
[
1507235610000,
30
],
[
1507235620000,
30
],
[
1507235630000,
30
],
[
1507235640000,
30
],
[
1507235650000,
30
],
[
1507235660000,
30
],
[
1507235670000,
30
],
[
1507235680000,
30
],
[
1507235690000,
30
],
[
1507235700000,
30
]
[1507235520000, 30],
[1507235530000, 30],
[1507235540000, 30],
[1507235550000, 30],
[1507235560000, 30],
[1507235570000, 30],
[1507235580000, 30],
[1507235590000, 30],
[1507235600000, 30],
[1507235610000, 30],
[1507235620000, 30],
[1507235630000, 30],
[1507235640000, 30],
[1507235650000, 30],
[1507235660000, 30],
[1507235670000, 30],
[1507235680000, 30],
[1507235690000, 30],
[1507235700000, 30]
]
}
]
@ -899,18 +444,14 @@
"shardCount": 5,
"indexCount": 1,
"name": "whatever-01",
"node_ids": [
"jUT5KdxfRbORSCWkb5zjmA"
],
"node_ids": ["jUT5KdxfRbORSCWkb5zjmA"],
"type": "master"
},
"xcP6ue7eRCieNNitFTT0EA": {
"shardCount": 5,
"indexCount": 1,
"name": "whatever-02",
"node_ids": [
"xcP6ue7eRCieNNitFTT0EA"
],
"node_ids": ["xcP6ue7eRCieNNitFTT0EA"],
"type": "node"
}
}
@ -920,18 +461,14 @@
"shardCount": 5,
"indexCount": 1,
"name": "whatever-01",
"node_ids": [
"jUT5KdxfRbORSCWkb5zjmA"
],
"node_ids": ["jUT5KdxfRbORSCWkb5zjmA"],
"type": "master"
},
"xcP6ue7eRCieNNitFTT0EA": {
"shardCount": 5,
"indexCount": 1,
"name": "whatever-02",
"node_ids": [
"xcP6ue7eRCieNNitFTT0EA"
],
"node_ids": ["xcP6ue7eRCieNNitFTT0EA"],
"type": "node"
}
},

File diff suppressed because one or more lines are too long