Increase the font size of the kpi subtitles and the features descript…

…ions (#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
wazuh · Oct 1, 2024 · 0a402f1 · 0a402f1
1 parent 663fc9e
commit 0a402f1
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 54 deletions.
diff --git 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
@@ -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
@@ -139,7 +139,7 @@ exports[`Stats component renders correctly to match the snapshot 1`] = `
                       </p>
                     </div>
                     <div
-                      class="euiText euiText--extraSmall"
+                      class="euiText euiText--small"
                       css="margin-top: 0.7vh"
                     >
                       Rule level 15 or higher
@@ -184,7 +184,7 @@ exports[`Stats component renders correctly to match the snapshot 1`] = `
                       </p>
                     </div>
                     <div
-                      class="euiText euiText--extraSmall"
+                      class="euiText euiText--small"
                       css="margin-top: 0.7vh"
                     >
                       Rule level 12 to 14
@@ -229,7 +229,7 @@ exports[`Stats component renders correctly to match the snapshot 1`] = `
                       </p>
                     </div>
                     <div
-                      class="euiText euiText--extraSmall"
+                      class="euiText euiText--small"
                       css="margin-top: 0.7vh"
                     >
                       Rule level 7 to 11
@@ -274,7 +274,7 @@ exports[`Stats component renders correctly to match the snapshot 1`] = `
                       </p>
                     </div>
                     <div
-                      class="euiText euiText--extraSmall"
+                      class="euiText euiText--small"
                       css="margin-top: 0.7vh"
                     >
                       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
@@ -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<number | null>(null);
-  const [discoverLocation, setDiscoverLocation] = useState<string>('');
-  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<number | null>(null);
+  const [discoverLocation, setDiscoverLocation] = useState<string>('');
+
+  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,37 +125,36 @@ export function LastAlertsStat({ severity }: { severity: string }) {
             <EuiToolTip
               position='top'
               content={`Click to see rule.level ${
-                severityLabel[severity].ruleLevelRange.maxRuleLevel
+                ruleLevelRange.maxRuleLevel
                   ? 'between ' +
-                    severityLabel[severity].ruleLevelRange.minRuleLevel +
+                    ruleLevelRange.minRuleLevel +
                     ' to ' +
-                    severityLabel[severity].ruleLevelRange.maxRuleLevel
-                  : severityLabel[severity].ruleLevelRange.minRuleLevel +
-                    ' or higher'
+                    ruleLevelRange.maxRuleLevel
+                  : ruleLevelRange.minRuleLevel + ' or higher'
               }`}
             >
               <EuiLink
                 className='statWithLink'
                 style={{
                   fontWeight: 'normal',
-                  color: severityLabel[severity].color,
+                  color: severity.color,
                 }}
                 href={discoverLocation}
               >
                 {countLastAlerts ?? '-'}
               </EuiLink>
             </EuiToolTip>
           }
-          description={`${severityLabel[severity].label} severity`}
+          description={`${severity.label} severity`}
           descriptionElement='h3'
-          titleColor={severityLabel[severity].color}
+          titleColor={severity.color}
           textAlign='center'
         />
-        <EuiText size='xs' css='margin-top: 0.7vh'>
+        <EuiText size='s' css='margin-top: 0.7vh'>
           {'Rule level ' +
-            severityLabel[severity].ruleLevelRange.minRuleLevel +
-            (severityLabel[severity].ruleLevelRange.maxRuleLevel
-              ? ' to ' + severityLabel[severity].ruleLevelRange.maxRuleLevel
+            ruleLevelRange.minRuleLevel +
+            (ruleLevelRange.maxRuleLevel
+              ? ' to ' + ruleLevelRange.maxRuleLevel
               : ' or higher')}
         </EuiText>
       </RedirectAppLinks>