From 2d13a25e4039fda6fb0fc867210d80d382bab177 Mon Sep 17 00:00:00 2001 From: Jordan <51442161+JordanSh@users.noreply.github.com> Date: Sun, 5 Dec 2021 19:01:31 +0200 Subject: [PATCH] fixing-typescript-errors --- .../public/cloud_posture/common/constants.ts | 12 +++ .../cloud_posture/components/chart_panel.tsx | 18 +++-- .../components/csp_health_badge.tsx | 23 ++++++ .../components/section_container.tsx | 14 +--- .../cloud_posture_score_chart.tsx | 10 ++- .../compliance_charts/compliance_stats.tsx | 16 ++-- .../resources_at_risk_chart.tsx | 2 + .../score_per_account_chart.tsx | 18 +---- .../accumulated_section.tsx | 18 +---- .../dashboard_sections/benchmarks_section.tsx | 75 ++++++++++--------- .../server/cloud_posture/types.ts | 4 +- 11 files changed, 110 insertions(+), 100 deletions(-) create mode 100644 x-pack/plugins/security_solution/public/cloud_posture/common/constants.ts create mode 100644 x-pack/plugins/security_solution/public/cloud_posture/components/csp_health_badge.tsx diff --git a/x-pack/plugins/security_solution/public/cloud_posture/common/constants.ts b/x-pack/plugins/security_solution/public/cloud_posture/common/constants.ts new file mode 100644 index 0000000000000..e7ad29937e49d --- /dev/null +++ b/x-pack/plugins/security_solution/public/cloud_posture/common/constants.ts @@ -0,0 +1,12 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { euiPaletteForStatus } from '@elastic/eui'; + +const [success, warning, danger] = euiPaletteForStatus(3); + +export const statusColors = { success, warning, danger }; diff --git a/x-pack/plugins/security_solution/public/cloud_posture/components/chart_panel.tsx b/x-pack/plugins/security_solution/public/cloud_posture/components/chart_panel.tsx index 6bdcc9e5740d0..10a7bd4cbd6ba 100644 --- a/x-pack/plugins/security_solution/public/cloud_posture/components/chart_panel.tsx +++ b/x-pack/plugins/security_solution/public/cloud_posture/components/chart_panel.tsx @@ -1,13 +1,13 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. */ import React from 'react'; -import { EuiPanel, EuiText, EuiTitle, euiTextSubduedColor } from '@elastic/eui'; +import styled from 'styled-components'; +import { EuiPanel, EuiText, EuiTitle } from '@elastic/eui'; interface ChartPanelProps { title: string; @@ -17,12 +17,16 @@ interface ChartPanelProps { export const ChartPanel = ({ title, description, chart: Chart }: ChartPanelProps) => ( - +

{title}

- - + + {description} ); + +const StyledEuiTitle = styled(EuiTitle)` + font-weight: 400; +`; diff --git a/x-pack/plugins/security_solution/public/cloud_posture/components/csp_health_badge.tsx b/x-pack/plugins/security_solution/public/cloud_posture/components/csp_health_badge.tsx new file mode 100644 index 0000000000000..6fb42e0e86025 --- /dev/null +++ b/x-pack/plugins/security_solution/public/cloud_posture/components/csp_health_badge.tsx @@ -0,0 +1,23 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { EuiBadge } from '@elastic/eui'; +// TODO: find out how to import from the server folder without warnings +// eslint-disable-next-line @kbn/eslint/no-restricted-paths +import { Score } from '../../../server/cloud_posture/types'; + +interface Props { + value: Score; +} + +export const CSPHealthBadge = ({ value }: Props) => { + if (value <= 65) return {'Critical'}; + if (value <= 86) return {'Warning'}; + if (value <= 100) return {'Healthy'}; + return null; +}; diff --git a/x-pack/plugins/security_solution/public/cloud_posture/components/section_container.tsx b/x-pack/plugins/security_solution/public/cloud_posture/components/section_container.tsx index 6d65b123c4e0d..f3790c8769e74 100644 --- a/x-pack/plugins/security_solution/public/cloud_posture/components/section_container.tsx +++ b/x-pack/plugins/security_solution/public/cloud_posture/components/section_container.tsx @@ -1,26 +1,18 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. */ -import { EuiAccordion, EuiPanel, EuiSpacer, EuiTitle, EuiButton } from '@elastic/eui'; import React from 'react'; -import { ErrorPanel } from './error_panel'; - -interface AppLink { - label: string; - href?: string; -} +import { EuiAccordion, EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui'; interface SectionContainerProps { title: string; children: React.ReactNode; hasBorder?: boolean; initialIsOpen?: boolean; - appLink?: AppLink; } export const SectionContainer = ({ diff --git a/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/compliance_charts/cloud_posture_score_chart.tsx b/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/compliance_charts/cloud_posture_score_chart.tsx index 0c8db2d82ec68..ffd7a870bf2e6 100644 --- a/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/compliance_charts/cloud_posture_score_chart.tsx +++ b/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/compliance_charts/cloud_posture_score_chart.tsx @@ -7,13 +7,12 @@ import React from 'react'; import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { EuiText, euiPaletteForStatus } from '@elastic/eui'; +import { EuiText } from '@elastic/eui'; import { useNavigateToCSPFindings } from '../../../common/hooks/use_navigate_to_csp_findings'; // TODO: find out how to import from the server folder without warnings // eslint-disable-next-line @kbn/eslint/no-restricted-paths import { BenchmarkStats } from '../../../../../server/cloud_posture/types'; - -const [green, , red] = euiPaletteForStatus(3); +import { statusColors } from '../../../common/constants'; export const CloudPostureScoreChart = ({ totalPassed, @@ -23,6 +22,8 @@ export const CloudPostureScoreChart = ({ const { navigate } = useNavigateToCSPFindings(); if (totalPassed === undefined || totalFailed === undefined || name === undefined) return null; + // TODO: add type + // @ts-ignore const handleElementClick = (e) => { const [data] = e; const [groupsData] = data; @@ -53,7 +54,8 @@ export const CloudPostureScoreChart = ({ { groupByRollup: (d: Datum) => d.label, shape: { - fillColor: (d, index) => (d.dataName === 'Passed' ? green : red), + fillColor: (d, index) => + d.dataName === 'Passed' ? statusColors.success : statusColors.danger, }, }, ]} diff --git a/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/compliance_charts/compliance_stats.tsx b/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/compliance_charts/compliance_stats.tsx index 2c6710e9ac387..038f35e73a575 100644 --- a/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/compliance_charts/compliance_stats.tsx +++ b/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/compliance_charts/compliance_stats.tsx @@ -7,25 +7,19 @@ import React from 'react'; import styled from 'styled-components'; -import { - EuiStat, - EuiFlexItem, - EuiPanel, - EuiIcon, - EuiFlexGrid, - euiPaletteForStatus, -} from '@elastic/eui'; +import { EuiStat, EuiFlexItem, EuiPanel, EuiIcon, EuiFlexGrid } from '@elastic/eui'; import { Chart, Settings, LineSeries } from '@elastic/charts'; import { useCloudPostureStatsApi } from '../../../common/api'; +import { statusColors } from '../../../common/constants'; type Trend = Array<[time: number, value: number]>; -const [green, yellow, red] = euiPaletteForStatus(3); +// TODO: this is the warning color hash listen in EUI's docs. need to find where to import it from. const warningColor = '#F5A700'; const getTitleColor = (value: number) => { if (value <= 65) return 'danger'; - if (value <= 86) return warningColor; + if (value <= 95) return warningColor; if (value <= 100) return 'success'; return 'default'; }; @@ -97,7 +91,7 @@ export const ComplianceStats = () => { data={scoreTrend} xAccessor={0} yAccessors={[1]} - color={isPositiveChange ? green : red} + color={isPositiveChange ? statusColors.success : statusColors.danger} /> diff --git a/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/compliance_charts/resources_at_risk_chart.tsx b/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/compliance_charts/resources_at_risk_chart.tsx index 25dc9569f78dc..95a191a97b963 100644 --- a/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/compliance_charts/resources_at_risk_chart.tsx +++ b/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/compliance_charts/resources_at_risk_chart.tsx @@ -28,6 +28,8 @@ export const ResourcesAtRiskChart = () => { const resources = getStats.isSuccess && getStats.data.resourcesEvaluations; if (!resources) return null; + // TODO: add type + // @ts-ignore const handleElementClick = (e) => { const [data] = e; const [groupsData] = data; diff --git a/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/compliance_charts/score_per_account_chart.tsx b/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/compliance_charts/score_per_account_chart.tsx index 5ce845259db36..ef6187d97b123 100644 --- a/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/compliance_charts/score_per_account_chart.tsx +++ b/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/compliance_charts/score_per_account_chart.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { Axis, BarSeries, Chart, Settings } from '@elastic/charts'; -import { euiPaletteForStatus } from '@elastic/eui/lib/services'; +import { statusColors } from '../../../common/constants'; const mockData = [ { id: '1', name: 'e836f61f0', value: 303, evaluation: 'pass' }, @@ -25,24 +25,14 @@ const mockData = [ export const ScorePerAccountChart = () => { const accountEvaluations = mockData; - const handleElementClick = (e) => { - // eslint-disable-next-line no-console - console.log(e); - }; - return ( - + `${Number(d * 100).toFixed(0)} %`, + valueFormatter: (v) => `${Number(v * 100).toFixed(0)}%`, }} id="bars" name="0" @@ -58,7 +48,7 @@ export const ScorePerAccountChart = () => { }; const theme = { - colors: { vizColors: euiPaletteForStatus(2) }, + colors: { vizColors: [statusColors.success, statusColors.danger] }, barSeriesStyle: { displayValue: { fontSize: 14, diff --git a/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/dashboard_sections/accumulated_section.tsx b/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/dashboard_sections/accumulated_section.tsx index 8112bf51b5a36..91183a26672df 100644 --- a/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/dashboard_sections/accumulated_section.tsx +++ b/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/dashboard_sections/accumulated_section.tsx @@ -1,24 +1,12 @@ /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. */ import React from 'react'; -import { - EuiFlexGrid, - EuiFlexItem, - EuiTitle, - EuiSpacer, - EUI_CHARTS_THEME_DARK, - EUI_CHARTS_THEME_LIGHT, - EuiPanel, - EuiText, - euiTextSubduedColor, - euiColorLightShade, -} from '@elastic/eui'; +import { EuiFlexGrid, EuiFlexItem } from '@elastic/eui'; import { TotalResourcesChart } from '../compliance_charts/total_resources_chart'; import { FindingsTrendChart } from '../compliance_charts/findings_trend_chart'; import { SectionContainer } from '../../../components/section_container'; diff --git a/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/dashboard_sections/benchmarks_section.tsx b/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/dashboard_sections/benchmarks_section.tsx index 1a1546a433571..14b8d0316b764 100644 --- a/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/dashboard_sections/benchmarks_section.tsx +++ b/x-pack/plugins/security_solution/public/cloud_posture/pages/compliance_dashboard/dashboard_sections/benchmarks_section.tsx @@ -14,26 +14,17 @@ import { EuiTitle, IconType, EuiSpacer, - EuiBadge, EuiDescriptionList, - EuiDescriptionListTitle, - EuiDescriptionListDescription, } from '@elastic/eui'; import { CloudPostureScoreChart } from '../compliance_charts/cloud_posture_score_chart'; import { ComplianceTrendChart } from '../compliance_charts/compliance_trend_chart'; import { useCloudPostureStatsApi } from '../../../common/api/use_cloud_posture_stats_api'; +import { CSPHealthBadge } from '../../../components/csp_health_badge'; const logoMap: Record = { 'CIS Kubernetes': 'logoKubernetes', }; -const getHealthBadge = (value: number) => { - if (value <= 65) return Critical; - if (value <= 86) return Warning; - if (value <= 100) return Healthy; - return 'error'; -}; - export const BenchmarksSection = () => { const getStats = useCloudPostureStatsApi(); const benchmarks = getStats.isSuccess && getStats.data.benchmarksStats; @@ -59,37 +50,47 @@ export const BenchmarksSection = () => { - - Compliance Score - - - - + , + }, + ]} + /> - - Compliance Trend - - - - + , + }, + ]} + /> - - Posture Score - - {benchmark.postureScore} - - Status - - {getHealthBadge(benchmark.postureScore)} - - Total Failures - - {benchmark.totalFailed} - - - {/* */} + + ) : ( + 'error' + ), + }, + { + title: 'Total Failures', + description: benchmark.totalFailed || 'error', + }, + ]} + /> diff --git a/x-pack/plugins/security_solution/server/cloud_posture/types.ts b/x-pack/plugins/security_solution/server/cloud_posture/types.ts index 1eb51d3828e73..f9059fc095701 100644 --- a/x-pack/plugins/security_solution/server/cloud_posture/types.ts +++ b/x-pack/plugins/security_solution/server/cloud_posture/types.ts @@ -6,10 +6,12 @@ */ export type Evaluation = 'passed' | 'failed' | 'NA'; +/** number between 1-100 */ +export type Score = number; export interface BenchmarkStats { name: string; - postureScore?: number; + postureScore?: Score; totalFindings?: number; totalPassed?: number; totalFailed?: number;