[SecuritySolution] Numbers of Network KPI metric are cropped (#211460)

## Summary

Fix issue https://github.com/elastic/kibana/issues/210806


### Network Page
| Before | After |
|--------|-------|
| ![Network
Before](https://github.com/user-attachments/assets/0b3277f7-dbe2-41a4-ac76-05a806bb42e8)
| ![Network
After](https://github.com/user-attachments/assets/12b16e81-d13b-495f-9d46-a4154aa8e0cf)
|

### Host Page
| Before | After |
|--------|-------|
| ![Host
Before](https://github.com/user-attachments/assets/1338b0e5-f4b1-4d1a-ad54-da392f0eff07)
| ![Host
After](https://github.com/user-attachments/assets/48af01d9-a4aa-450d-ac81-e2b4a724363f)
|

### Users Page
| Before | After |
|--------|-------|
| ![Users
Before](https://github.com/user-attachments/assets/d7acdf4d-9a4f-4b67-923c-a184e13b367f)
| ![Users
After](https://github.com/user-attachments/assets/43bf36bd-1e3b-47d7-b121-0d4142b18cbe)
|


### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Karen Grigoryan <karen.grigoryan@elastic.co>
This commit is contained in:
Agustina Nahir Ruidiaz 2025-02-24 11:18:12 -03:00 committed by GitHub
parent 04a9acd365
commit fd18951f8f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 12 additions and 21 deletions

View file

@ -187,7 +187,7 @@ Object {
},
"visualization": Object {
"accessor": "0374e520-eae0-4ac1-bcfe-37565e7fc9e3",
"autoScaleMetricAlignment": "left",
"autoScaleMetricAlignment": "center",
"colorMode": "None",
"layerId": "cea37c70-8f91-43bf-b9fe-72d8c049f6a3",
"layerType": "data",

View file

@ -192,7 +192,7 @@ Object {
},
"visualization": Object {
"accessor": "370ebd07-5ce0-4f46-a847-0e363c50d037",
"autoScaleMetricAlignment": "left",
"autoScaleMetricAlignment": "center",
"layerId": "eaadfec7-deaa-4aeb-a403-3b4e516416d2",
"layerType": "data",
},

View file

@ -211,7 +211,7 @@ Object {
},
"visualization": Object {
"accessor": "21052b6b-5504-4084-a2e2-c17f772345cf",
"autoScaleMetricAlignment": "left",
"autoScaleMetricAlignment": "center",
"layerId": "1f48a633-8eee-45ae-9471-861227e9ca03",
"layerType": "data",
},

View file

@ -175,7 +175,7 @@ Object {
},
"visualization": Object {
"accessor": "a27f3503-9c73-4fc1-86bb-12461dae4b70",
"autoScaleMetricAlignment": "left",
"autoScaleMetricAlignment": "center",
"layerId": "5d46d48f-6ce8-46be-a797-17ad50642564",
"layerType": "data",
},

View file

@ -17,7 +17,7 @@ export const kpiDnsQueriesLensAttributes: LensAttributes = {
accessor: '0374e520-eae0-4ac1-bcfe-37565e7fc9e3',
layerType: 'data',
colorMode: 'None',
autoScaleMetricAlignment: 'left',
autoScaleMetricAlignment: 'center',
},
query: {
query: '',

View file

@ -16,7 +16,7 @@ export const kpiNetworkEventsLensAttributes: LensAttributes = {
layerId: 'eaadfec7-deaa-4aeb-a403-3b4e516416d2',
accessor: '370ebd07-5ce0-4f46-a847-0e363c50d037',
layerType: 'data',
autoScaleMetricAlignment: 'left',
autoScaleMetricAlignment: 'center',
},
query: {
query: '',

View file

@ -15,7 +15,7 @@ export const kpiTlsHandshakesLensAttributes: LensAttributes = {
layerId: '1f48a633-8eee-45ae-9471-861227e9ca03',
accessor: '21052b6b-5504-4084-a2e2-c17f772345cf',
layerType: 'data',
autoScaleMetricAlignment: 'left',
autoScaleMetricAlignment: 'center',
},
query: {
query:

View file

@ -16,7 +16,7 @@ export const kpiUniqueFlowIdsLensAttributes: LensAttributes = {
layerId: '5d46d48f-6ce8-46be-a797-17ad50642564',
accessor: 'a27f3503-9c73-4fc1-86bb-12461dae4b70',
layerType: 'data',
autoScaleMetricAlignment: 'left',
autoScaleMetricAlignment: 'center',
},
query: {
query: 'source.ip: * or destination.ip: * ',

View file

@ -4,9 +4,9 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { EuiFlexGroup, EuiIcon } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
import React from 'react';
import { FlexItem, MetricItem, StatValue } from './utils';
import { FlexItem, StatValue } from './utils';
import { VisualizationEmbeddable } from '../../../common/components/visualization_actions/visualization_embeddable';
import type { FieldConfigs } from './types';
@ -41,7 +41,7 @@ const MetricEmbeddableComponent = ({
</FlexItem>
)}
<MetricItem>
<EuiFlexItem>
{field.lensAttributes && (
<div data-test-subj="stat-title">
<VisualizationEmbeddable
@ -54,7 +54,7 @@ const MetricEmbeddableComponent = ({
/>
</div>
)}
</MetricItem>
</EuiFlexItem>
{field.description != null && (
<FlexItem>
<StatValue>

View file

@ -24,15 +24,6 @@ export const FlexItem = styled(EuiFlexItem)`
FlexItem.displayName = 'FlexItem';
export const MetricItem = styled(EuiFlexItem)`
&.euiFlexItem {
flex-basis: 0;
flex-grow: 0;
min-width: 100px;
}
`;
MetricItem.displayName = 'MetricItem';
export const StatValue = styled(EuiTitle)`
overflow: hidden;
text-overflow: ellipsis;