Enhancement/4211 improve visualizations text size

CHANGELOG.md

@@ -13,6 +13,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 ### Changed
 
 - Changed the word Manager to Wazuh server from the phrases that appeared in "Deploy a new agent". [#4239](https://github.com/wazuh/wazuh-kibana-app/pull/4239)
+- The two graphs, the lists and the select were centered. The font size was also corrected to the same used in the table. [#4254](https://github.com/wazuh/wazuh-kibana-app/pull/4254)
 
 
 ## Wazuh v4.3.4 - Kibana 7.10.2, 7.16.x, 7.17.x - Revision 4305

public/components/agents/vuls/inventory.tsx

@@ -21,8 +21,6 @@ import {
   EuiFlexItem,
   EuiCard,
   EuiStat,
-  EuiText,
-  EuiIcon,
   EuiToolTip,
   euiPaletteColorBlind,
 } from '@elastic/eui';
@@ -222,7 +220,7 @@ export class Inventory extends Component {
         <EuiFlexGroup wrap>
           <EuiFlexItem>
             <EuiCard title description betaBadgeLabel="Severity" className="wz-euiCard-no-title">
-              <div style={{display: 'flex', alignItems: 'flex-end', height: '100%'}}>
+              <div style={{display: 'flex', alignItems: 'flex-end', height: '100%', flexDirection: 'column', justifyContent: 'center'}}>
                 <VisualizationBasicWidget
                   type='donut'
                   size={{ width: '100%', height: '150px' }}

public/components/agents/vuls/inventory/table.tsx

@@ -11,7 +11,7 @@
  */
 
 import React, { Component } from 'react';
-import { Direction, EuiOverlayMask, EuiOutsideClickDetector } from '@elastic/eui';
+import { Direction } from '@elastic/eui';
 import { FlyoutDetail } from './flyout';
 import { filtersToObject, IFilter, IWzSuggestItem } from '../../../wz-search-bar';
 import { TableWzAPI } from '../../../../components/common/tables';

public/components/common/charts/visualizations/basic.tsx

@@ -1,19 +1,21 @@
-import React, { useCallback, useState} from "react";
+import React, { useCallback, useState } from "react";
+import type { ReactNode } from "react";
 import { ChartLegend } from "./legend";
 import { ChartDonut, ChartDonutProps } from '../charts/donut';
-import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiLoadingChart, EuiText, EuiSelect, EuiSpacer } from '@elastic/eui';
+import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiLoadingChart, EuiText, EuiSelect } from '@elastic/eui';
 import { useAsyncActionRunOnStart } from "../../hooks";
 
 export type VisualizationBasicProps = ChartDonutProps & {
   type: 'donut',
-  size: number | string | {width: number | string, height: number | string}
+  size: number | string | { width: number | string, height: number | string }
   showLegend?: boolean
   isLoading?: boolean
   noDataTitle?: string
-  noDataMessage?: string | (() => React.node)
+  noDataMessage?: string | ReactNode
   errorTitle?: string
-  errorMessage?: string | (() => React.node)
-  error?: {message: string}
+  errorMessage?: string | ReactNode
+  error?: { message: string }
+  select?: ReactNode
 }
 
 const chartTypes = {
@@ -34,51 +36,55 @@ export const VisualizationBasic = ({
   noDataMessage,
   errorTitle = 'Error',
   errorMessage,
-  error
+  error,
+  select
 }: VisualizationBasicProps) => {
   const { width, height } = typeof size === 'object' ? size : { width: size, height: size };
-  
+
   let visualization = null;
 
-  if(isLoading){
+  if (isLoading) {
     visualization = (
-      <div style={{ textAlign: "center", width, height, position: 'relative'}}>
-        <EuiLoadingChart size="xl" style={{top: '50%', transform:'translate(-50%, -50%)', position: 'absolute'}}/>
+      <div style={{ textAlign: "center", width, height, position: 'relative' }}>
+        <EuiLoadingChart size="xl" style={{ top: '50%', transform: 'translate(-50%, -50%)', position: 'absolute' }} />
       </div>
     )
-  }else if(errorMessage || error?.message){
+  } else if (errorMessage || error?.message) {
     visualization = (
       <EuiEmptyPrompt
         iconType="alert"
         title={<h4>{errorTitle}</h4>}
         body={errorMessage || error?.message}
       />
     )
-  }else if(!data || (Array.isArray(data) && !data.length)){
+  } else if (!data || (Array.isArray(data) && !data.length)) {
     visualization = (
       <EuiEmptyPrompt
         iconType="stats"
         title={<h4>{noDataTitle}</h4>}
         body={typeof noDataMessage === 'function' ? noDataMessage() : noDataMessage}
       />
     )
-  }else{
+  } else {
     const Chart = chartTypes[type];
     const chartFlexStyle = {
       alignItems: 'flex-end',
       paddingRight: '1em'
     }
     const legendFlexStyle = {
-      height:'100%',
-      paddingLeft: '1em'
+      height: '100%',
+      paddingLeft: '1em',
+      justifyContent: 'center'
     }
     visualization = (
-      <EuiFlexGroup responsive={false} style={{ height:'100%'}} gutterSize='none'>
+      <EuiFlexGroup responsive={false} style={{ height: '100%' }} gutterSize='none'>
         <EuiFlexItem style={chartFlexStyle}>
-          <Chart data={data}/>
+          <Chart data={data} />
         </EuiFlexItem>
-        {showLegend && (
+        {/* Select is optional if it arrives the selector is rendered */}
+        {(showLegend || select) && (
           <EuiFlexItem style={legendFlexStyle}>
+            {select}
             <ChartLegend
               data={data.map(({ color, ...rest }) => ({ ...rest, labelColor: color, color: 'text' }))}
             />
@@ -89,7 +95,7 @@ export const VisualizationBasic = ({
   }
 
   return (
-    <div style={{ width, height}}>
+    <div style={{ width, height }}>
       {visualization}
     </div>
   )
@@ -104,26 +110,26 @@ type VisualizationBasicWidgetProps = VisualizationBasicProps & {
 /**
  * Component that fetch the data and renders the visualization using the visualization basic component
  */
-export const VisualizationBasicWidget = ({onFetch, onFetchDependencies, ...rest}: VisualizationBasicWidgetProps) => {
-  const {running, ...restAsyncAction} = useAsyncActionRunOnStart(onFetch, onFetchDependencies);
+export const VisualizationBasicWidget = ({ onFetch, onFetchDependencies, ...rest }: VisualizationBasicWidgetProps) => {
+  const { running, ...restAsyncAction } = useAsyncActionRunOnStart(onFetch, onFetchDependencies);
 
-  return <VisualizationBasic {...rest} {...restAsyncAction} isLoading={running}/>
+  return <VisualizationBasic {...rest} {...restAsyncAction} isLoading={running} />
 }
 
 type VisualizationBasicWidgetSelectorProps = VisualizationBasicWidgetProps & {
-  selectorOptions: {value: any, text: string}[]
+  selectorOptions: { value: any, text: string }[]
   title?: string
   onFetchExtraDependencies?: any[]
 }
 
 /**
  * Renders a visualization that has a selector to change the resource to fetch data and display it. Use the visualization basic. 
  */
-export const VisualizationBasicWidgetSelector = ({selectorOptions, title, onFetchExtraDependencies, ...rest}: VisualizationBasicWidgetSelectorProps) => {
+export const VisualizationBasicWidgetSelector = ({ selectorOptions, title, onFetchExtraDependencies, ...rest }: VisualizationBasicWidgetSelectorProps) => {
   const [selectedOption, setSelectedOption] = useState(selectorOptions[0].value);
 
   const onChange = useCallback((e) => setSelectedOption(e.target.value));
-  
+
   return (
     <>
       <EuiFlexGroup
@@ -136,17 +142,7 @@ export const VisualizationBasicWidgetSelector = ({selectorOptions, title, onFetc
             </h2>
           )}
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiSelect
-            compressed={true}
-            options={selectorOptions}
-            value={selectedOption}
-            onChange={onChange}
-            aria-label="Select options"
-          />
-        </EuiFlexItem>
       </EuiFlexGroup>
-      <EuiSpacer size='s'/>
       <VisualizationBasicWidget
         {...rest}
         {...(rest.noDataMessage ?
@@ -157,8 +153,15 @@ export const VisualizationBasicWidgetSelector = ({selectorOptions, title, onFetc
           }
           : {}
         )}
-        onFetchDependencies={[selectedOption,...(onFetchExtraDependencies || [])]}
+        onFetchDependencies={[selectedOption, ...(onFetchExtraDependencies || [])]}
+        select={(<EuiSelect style={{ paddingLeft: '0.438rem' }}
+          compressed={true}
+          options={selectorOptions}
+          value={selectedOption}
+          onChange={onChange}
+          aria-label="Select options"
+        />)}
       />
     </>
-  ) 
+  )
 }

public/components/common/charts/visualizations/legend.tsx

@@ -17,7 +17,7 @@ type ChartLegendProps = {
  */
 export function ChartLegend({ data }: ChartLegendProps) {
   const list = data.map(({label, labelColor, value, ...rest}, idx) => ({
-    label: `${label} (${value})`,
+    label: <div style={{fontSize: '0.875rem'}}>{`${label} (${value})`}</div>,
     icon: <EuiIcon type="dot" size='l' color={labelColor} />,
     ...rest
   }));