[SecuritySolution] Prettify asset criticality alert column (#180868)

## Summary

* [Prettify asset criticality alert
column](38fa0e2b50)
* [Memoize badge to prevent unnecessary
rerender](22599d2f25)


Before             |  After
:-------------------------:|:-------------------------:
<img width="200"
src="78fb2130-9ce2-4c67-85d7-5a5d78e39773"/>
| <img width="200"
src="91cfcdab-4fa0-4022-8fc4-ac218a75a377"/>









### Checklist

- [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
This commit is contained in:
Pablo Machado 2024-04-16 16:54:08 +02:00 committed by GitHub
parent 7c4c7072f0
commit b29fcf9692
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 12 additions and 8 deletions

View file

@ -21,7 +21,7 @@ const defaultProps = {
fieldType: 'testType',
isAggregatable: true,
isDraggable: true,
value: 'low',
value: 'low_impact',
};
describe('AssetCriticalityLevel', () => {
@ -30,6 +30,6 @@ describe('AssetCriticalityLevel', () => {
wrapper: TestProviders,
});
expect(getByTestId('AssetCriticalityLevel-score-badge')).toHaveTextContent('low');
expect(getByTestId('AssetCriticalityLevel-score-badge')).toHaveTextContent('Low Impact');
});
});

View file

@ -5,9 +5,9 @@
* 2.0.
*/
import React from 'react';
import React, { useMemo } from 'react';
import { EuiBadge } from '@elastic/eui';
import { isString } from 'lodash/fp';
import { isString, startCase } from 'lodash/fp';
import type { CriticalityLevel } from '../../../../../../common/entity_analytics/asset_criticality/types';
import { CRITICALITY_LEVEL_COLOR } from '../../../../../entity_analytics/components/asset_criticality';
import { DefaultDraggable } from '../../../../../common/components/draggables';
@ -32,11 +32,15 @@ const AssetCriticalityLevelComponent: React.FC<Props> = ({
value,
}) => {
const color = isString(value) ? CRITICALITY_LEVEL_COLOR[value as CriticalityLevel] : 'normal';
const stringValue = isString(value) ? value : '';
const badge = (
<EuiBadge color={color} data-test-subj="AssetCriticalityLevel-score-badge">
{value}
</EuiBadge>
const badge = useMemo(
() => (
<EuiBadge color={color} data-test-subj="AssetCriticalityLevel-score-badge">
{startCase(stringValue)}
</EuiBadge>
),
[color, stringValue]
);
return isDraggable ? (