From af4f7162a038ff52b613d503bc67ee68f4e82cf2 Mon Sep 17 00:00:00 2001 From: "chantal.kelm" Date: Fri, 10 Jun 2022 10:21:04 -0300 Subject: [PATCH 01/11] Unused imports --- public/components/agents/vuls/inventory.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/public/components/agents/vuls/inventory.tsx b/public/components/agents/vuls/inventory.tsx index f228888694..439a352d9b 100644 --- a/public/components/agents/vuls/inventory.tsx +++ b/public/components/agents/vuls/inventory.tsx @@ -21,8 +21,6 @@ import { EuiFlexItem, EuiCard, EuiStat, - EuiText, - EuiIcon, EuiToolTip, euiPaletteColorBlind, } from '@elastic/eui'; From 9408ff3f2caeda4041ecb7a2f2e978f4c46976a2 Mon Sep 17 00:00:00 2001 From: "chantal.kelm" Date: Fri, 10 Jun 2022 10:28:48 -0300 Subject: [PATCH 02/11] Unused imports --- public/components/agents/vuls/inventory/table.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/components/agents/vuls/inventory/table.tsx b/public/components/agents/vuls/inventory/table.tsx index ef95a2466b..7e9f4a3f05 100644 --- a/public/components/agents/vuls/inventory/table.tsx +++ b/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'; From 919e19127bb9c6b2217d20e8f472228776a332d7 Mon Sep 17 00:00:00 2001 From: "chantal.kelm" Date: Fri, 10 Jun 2022 14:38:32 -0300 Subject: [PATCH 03/11] Centered gravity graphic and list --- public/components/agents/vuls/inventory.tsx | 2 +- public/components/common/charts/visualizations/basic.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/public/components/agents/vuls/inventory.tsx b/public/components/agents/vuls/inventory.tsx index 439a352d9b..d9d0b87adf 100644 --- a/public/components/agents/vuls/inventory.tsx +++ b/public/components/agents/vuls/inventory.tsx @@ -220,7 +220,7 @@ export class Inventory extends Component { -
+
From 4c8731a5286dadc5a85805e99958becc3b02c364 Mon Sep 17 00:00:00 2001 From: "chantal.kelm" Date: Fri, 10 Jun 2022 16:59:31 -0300 Subject: [PATCH 04/11] font size texts first graph --- public/components/common/charts/visualizations/legend.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/components/common/charts/visualizations/legend.tsx b/public/components/common/charts/visualizations/legend.tsx index 38849f7566..b36270bdb3 100644 --- a/public/components/common/charts/visualizations/legend.tsx +++ b/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:
{`${label} (${value})`}
, icon: , ...rest })); From 19020e0bc745a8a4a2fec740d5aefc8f9b9f448e Mon Sep 17 00:00:00 2001 From: "chantal.kelm" Date: Mon, 13 Jun 2022 13:53:24 -0300 Subject: [PATCH 05/11] Select --- .../common/charts/visualizations/basic.tsx | 69 ++++++++++--------- 1 file changed, 35 insertions(+), 34 deletions(-) diff --git a/public/components/common/charts/visualizations/basic.tsx b/public/components/common/charts/visualizations/basic.tsx index a2eec0846a..05aebb7a65 100644 --- a/public/components/common/charts/visualizations/basic.tsx +++ b/public/components/common/charts/visualizations/basic.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState} from "react"; +import React, { useCallback, useState } from "react"; import { ChartLegend } from "./legend"; import { ChartDonut, ChartDonutProps } from '../charts/donut'; import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiLoadingChart, EuiText, EuiSelect, EuiSpacer } from '@elastic/eui'; @@ -6,14 +6,15 @@ 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) errorTitle?: string errorMessage?: string | (() => React.node) - error?: {message: string} + error?: { message: string } + select?: () => React.node } const chartTypes = { @@ -34,19 +35,20 @@ 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 = ( -
- +
+
) - }else if(errorMessage || error?.message){ + } else if (errorMessage || error?.message) { visualization = ( ) - }else if(!data || (Array.isArray(data) && !data.length)){ + } else if (!data || (Array.isArray(data) && !data.length)) { visualization = ( ) - }else{ + } else { const Chart = chartTypes[type]; const chartFlexStyle = { alignItems: 'flex-end', paddingRight: '1em' } const legendFlexStyle = { - height:'100%', + height: '100%', paddingLeft: '1em', justifyContent: 'center' } visualization = ( - + - + - {showLegend && ( + {/* Select is optional if it arrives the selector is rendered */} + {(showLegend || select) && ( + {select} ({ ...rest, labelColor: color, color: 'text' }))} /> @@ -90,7 +94,7 @@ export const VisualizationBasic = ({ } return ( -
+
{visualization}
) @@ -105,14 +109,14 @@ 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 + return } type VisualizationBasicWidgetSelectorProps = VisualizationBasicWidgetProps & { - selectorOptions: {value: any, text: string}[] + selectorOptions: { value: any, text: string }[] title?: string onFetchExtraDependencies?: any[] } @@ -120,11 +124,11 @@ type VisualizationBasicWidgetSelectorProps = VisualizationBasicWidgetProps & { /** * 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 ( <> )} - - - - )} /> - ) + ) } \ No newline at end of file From 67a1abb80897b3179aa922b1e3f6bd1c5c03ec03 Mon Sep 17 00:00:00 2001 From: "chantal.kelm" Date: Mon, 13 Jun 2022 13:54:43 -0300 Subject: [PATCH 06/11] Unused imports --- public/components/common/charts/visualizations/basic.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/components/common/charts/visualizations/basic.tsx b/public/components/common/charts/visualizations/basic.tsx index 05aebb7a65..5641facdfa 100644 --- a/public/components/common/charts/visualizations/basic.tsx +++ b/public/components/common/charts/visualizations/basic.tsx @@ -1,7 +1,7 @@ import React, { useCallback, useState } 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 & { From d52737d55a04d90eea4963b166511334b0bffd7c Mon Sep 17 00:00:00 2001 From: "chantal.kelm" Date: Mon, 13 Jun 2022 14:22:09 -0300 Subject: [PATCH 07/11] types --- public/components/common/charts/visualizations/basic.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/public/components/common/charts/visualizations/basic.tsx b/public/components/common/charts/visualizations/basic.tsx index 5641facdfa..699186d69a 100644 --- a/public/components/common/charts/visualizations/basic.tsx +++ b/public/components/common/charts/visualizations/basic.tsx @@ -1,4 +1,5 @@ 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 } from '@elastic/eui'; @@ -10,11 +11,11 @@ export type VisualizationBasicProps = ChartDonutProps & { showLegend?: boolean isLoading?: boolean noDataTitle?: string - noDataMessage?: string | (() => React.node) + noDataMessage?: string | ReactNode errorTitle?: string - errorMessage?: string | (() => React.node) + errorMessage?: string | ReactNode error?: { message: string } - select?: () => React.node + select?: ReactNode } const chartTypes = { From 1d42ead5f9486977505dd3e2f24ebe1347d585d2 Mon Sep 17 00:00:00 2001 From: "chantal.kelm" Date: Mon, 13 Jun 2022 14:49:53 -0300 Subject: [PATCH 08/11] CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 15e3a7194f..78c977b06b 100644 --- a/CHANGELOG.md +++ b/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 From 0a4293d48516d87ecf65873c330132acbcc5123e Mon Sep 17 00:00:00 2001 From: "chantal.kelm" Date: Tue, 14 Jun 2022 14:59:46 -0300 Subject: [PATCH 09/11] type --- public/components/common/charts/visualizations/basic.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/components/common/charts/visualizations/basic.tsx b/public/components/common/charts/visualizations/basic.tsx index 699186d69a..068a4ec335 100644 --- a/public/components/common/charts/visualizations/basic.tsx +++ b/public/components/common/charts/visualizations/basic.tsx @@ -11,7 +11,7 @@ export type VisualizationBasicProps = ChartDonutProps & { showLegend?: boolean isLoading?: boolean noDataTitle?: string - noDataMessage?: string | ReactNode + noDataMessage?: string | (() => React.node) errorTitle?: string errorMessage?: string | ReactNode error?: { message: string } From ff789ebb7242d09e8d487157bea34c286898f0cb Mon Sep 17 00:00:00 2001 From: "chantal.kelm" Date: Wed, 15 Jun 2022 12:11:32 -0300 Subject: [PATCH 10/11] Removing centered, and putting the same font size to the select --- public/components/agents/vuls/inventory.tsx | 2 +- .../common/charts/visualizations/basic.tsx | 33 +++++++++---------- .../common/charts/visualizations/legend.tsx | 2 +- 3 files changed, 17 insertions(+), 20 deletions(-) diff --git a/public/components/agents/vuls/inventory.tsx b/public/components/agents/vuls/inventory.tsx index d9d0b87adf..439a352d9b 100644 --- a/public/components/agents/vuls/inventory.tsx +++ b/public/components/agents/vuls/inventory.tsx @@ -220,7 +220,7 @@ export class Inventory extends Component { -
+
React.node) errorTitle?: string - errorMessage?: string | ReactNode + errorMessage?: string | (() => React.node) error?: { message: string } - select?: ReactNode } const chartTypes = { @@ -36,8 +34,7 @@ export const VisualizationBasic = ({ noDataMessage, errorTitle = 'Error', errorMessage, - error, - select + error }: VisualizationBasicProps) => { const { width, height } = typeof size === 'object' ? size : { width: size, height: size }; @@ -73,18 +70,15 @@ export const VisualizationBasic = ({ } const legendFlexStyle = { height: '100%', - paddingLeft: '1em', - justifyContent: 'center' + paddingLeft: '1em' } visualization = ( - {/* Select is optional if it arrives the selector is rendered */} - {(showLegend || select) && ( + {showLegend && ( - {select} ({ ...rest, labelColor: color, color: 'text' }))} /> @@ -142,7 +136,17 @@ export const VisualizationBasicWidgetSelector = ({ selectorOptions, title, onFet )} + + + + )} /> ) diff --git a/public/components/common/charts/visualizations/legend.tsx b/public/components/common/charts/visualizations/legend.tsx index b36270bdb3..fa76754ffa 100644 --- a/public/components/common/charts/visualizations/legend.tsx +++ b/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:
{`${label} (${value})`}
, icon: , ...rest })); From a6884b61e556835be0c5d68e62f1fbbe5694299c Mon Sep 17 00:00:00 2001 From: "chantal.kelm" Date: Thu, 16 Jun 2022 08:19:17 -0300 Subject: [PATCH 11/11] font-size --- public/components/common/charts/visualizations/legend.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/components/common/charts/visualizations/legend.tsx b/public/components/common/charts/visualizations/legend.tsx index fa76754ffa..b36270bdb3 100644 --- a/public/components/common/charts/visualizations/legend.tsx +++ b/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:
{`${label} (${value})`}
, icon: , ...rest }));