From 0a402f1ef517839504b0cca061948532faa34f51 Mon Sep 17 00:00:00 2001 From: Guido Modarelli <38738725+guidomodarelli@users.noreply.github.com> Date: Tue, 1 Oct 2024 11:48:55 -0300 Subject: [PATCH] Increase the font size of the kpi subtitles and the features descriptions (#7033) * Remove font-size property from welcome.scss * Refactor LastAlertsStat component for readability * Fix Merge Conflict * Refactor LastAlertsStat component and severities object * Update font size for KPI subtitles and feature descriptions * Update text size to 's' in LastAlertsStat component * Update class size to "small" in Stats component snapshot --- CHANGELOG.md | 1 + .../components/common/welcome/welcome.scss | 1 - .../__snapshots__/stats.test.tsx.snap | 8 +- .../last-alerts-stat/last-alerts-stat.tsx | 105 ++++++++++-------- 4 files changed, 61 insertions(+), 54 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index aa376214f9..a94d836602 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ All notable changes to the Wazuh app project will be documented in this file. - Changed the registration id of the Settings application for compatibility with OpenSearch Dashboard 2.16.0 [#6938](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6938) - Changed Malware detection dashboard visualizations [#6964](https://github.com/wazuh/wazuh-dashboard-plugins/issues/6964) - Changed malware feature description [#7036](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7036) +- Changed the font size of the kpi subtitles and the features descriptions [#7033](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7033) ### Fixed diff --git a/plugins/main/public/components/common/welcome/welcome.scss b/plugins/main/public/components/common/welcome/welcome.scss index 9058ab441c..0ce9e18dda 100644 --- a/plugins/main/public/components/common/welcome/welcome.scss +++ b/plugins/main/public/components/common/welcome/welcome.scss @@ -6,7 +6,6 @@ .wz-welcome-page .euiCard .euiText, .wz-module-body .euiCard .euiText { - font-size: 12px; font-family: sans-serif; } diff --git a/plugins/main/public/controllers/overview/components/__snapshots__/stats.test.tsx.snap b/plugins/main/public/controllers/overview/components/__snapshots__/stats.test.tsx.snap index 29b8d3d0da..4b0953aba0 100644 --- a/plugins/main/public/controllers/overview/components/__snapshots__/stats.test.tsx.snap +++ b/plugins/main/public/controllers/overview/components/__snapshots__/stats.test.tsx.snap @@ -139,7 +139,7 @@ exports[`Stats component renders correctly to match the snapshot 1`] = `

Rule level 15 or higher @@ -184,7 +184,7 @@ exports[`Stats component renders correctly to match the snapshot 1`] = `

Rule level 12 to 14 @@ -229,7 +229,7 @@ exports[`Stats component renders correctly to match the snapshot 1`] = `

Rule level 7 to 11 @@ -274,7 +274,7 @@ exports[`Stats component renders correctly to match the snapshot 1`] = `

Rule level 0 to 6 diff --git a/plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx b/plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx index e1113790d5..4f51cf8600 100644 --- a/plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx +++ b/plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx @@ -20,48 +20,59 @@ import { PatternDataSourceFilterManager, } from '../../../../components/common/data-source/pattern/pattern-data-source-filter-manager'; -export function LastAlertsStat({ severity }: { severity: string }) { - const [countLastAlerts, setCountLastAlerts] = useState(null); - const [discoverLocation, setDiscoverLocation] = useState(''); - const severityLabel = { - low: { - label: 'Low', - color: UI_COLOR_STATUS.success, - ruleLevelRange: { - minRuleLevel: 0, - maxRuleLevel: 6, - }, +type SeverityKey = 'low' | 'medium' | 'high' | 'critical'; + +const severities = { + low: { + label: 'Low', + color: UI_COLOR_STATUS.success, + ruleLevelRange: { + minRuleLevel: 0, + maxRuleLevel: 6, }, - medium: { - label: 'Medium', - color: UI_COLOR_STATUS.info, - ruleLevelRange: { - minRuleLevel: 7, - maxRuleLevel: 11, - }, + }, + medium: { + label: 'Medium', + color: UI_COLOR_STATUS.info, + ruleLevelRange: { + minRuleLevel: 7, + maxRuleLevel: 11, }, - high: { - label: 'High', - color: UI_COLOR_STATUS.warning, - ruleLevelRange: { - minRuleLevel: 12, - maxRuleLevel: 14, - }, + }, + high: { + label: 'High', + color: UI_COLOR_STATUS.warning, + ruleLevelRange: { + minRuleLevel: 12, + maxRuleLevel: 14, }, - critical: { - label: 'Critical', - color: UI_COLOR_STATUS.danger, - ruleLevelRange: { - minRuleLevel: 15, - }, + }, + critical: { + label: 'Critical', + color: UI_COLOR_STATUS.danger, + ruleLevelRange: { + minRuleLevel: 15, + maxRuleLevel: undefined, }, - }; + }, +} as const; + +export function LastAlertsStat({ + severity: severityKey, +}: { + severity: SeverityKey; +}) { + const [countLastAlerts, setCountLastAlerts] = useState(null); + const [discoverLocation, setDiscoverLocation] = useState(''); + + const severity = severities[severityKey]; + const ruleLevelRange = severity.ruleLevelRange; useEffect(() => { const getCountLastAlerts = async () => { try { const { indexPatternId, cluster, count } = await getLast24HoursAlerts( - severityLabel[severity].ruleLevelRange, + ruleLevelRange, ); setCountLastAlerts(count); const core = getCore(); @@ -82,10 +93,7 @@ export function LastAlertsStat({ severity }: { severity: string }) { PatternDataSourceFilterManager.createFilter( FILTER_OPERATOR.IS_BETWEEN, 'rule.level', - [ - severityLabel[severity].ruleLevelRange.minRuleLevel, - severityLabel[severity].ruleLevelRange.maxRuleLevel, - ], + [ruleLevelRange.minRuleLevel, ruleLevelRange.maxRuleLevel], indexPatternId, ); const predefinedFilters = @@ -117,20 +125,19 @@ export function LastAlertsStat({ severity }: { severity: string }) { @@ -138,16 +145,16 @@ export function LastAlertsStat({ severity }: { severity: string }) { } - description={`${severityLabel[severity].label} severity`} + description={`${severity.label} severity`} descriptionElement='h3' - titleColor={severityLabel[severity].color} + titleColor={severity.color} textAlign='center' /> - + {'Rule level ' + - severityLabel[severity].ruleLevelRange.minRuleLevel + - (severityLabel[severity].ruleLevelRange.maxRuleLevel - ? ' to ' + severityLabel[severity].ruleLevelRange.maxRuleLevel + ruleLevelRange.minRuleLevel + + (ruleLevelRange.maxRuleLevel + ? ' to ' + ruleLevelRange.maxRuleLevel : ' or higher')}