mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
[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:
parent
7c4c7072f0
commit
b29fcf9692
2 changed files with 12 additions and 8 deletions
|
@ -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');
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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 ? (
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue