fixing-typescript-errors

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 };

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) => (
   <EuiPanel hasBorder={true}>
-    <EuiTitle size="s" style={{ fontWeight: 400 }}>
+    <StyledEuiTitle size="s">
       <h3>{title}</h3>
-    </EuiTitle>
-    <EuiText size="xs" color={euiTextSubduedColor}>
+    </StyledEuiTitle>
+    <EuiText size="xs" color="subdued">
       {description}
     </EuiText>
     <Chart />
   </EuiPanel>
 );
+
+const StyledEuiTitle = styled(EuiTitle)`
+  font-weight: 400;
+`;

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 <EuiBadge color="danger">{'Critical'}</EuiBadge>;
+  if (value <= 86) return <EuiBadge color="warning">{'Warning'}</EuiBadge>;
+  if (value <= 100) return <EuiBadge color="success">{'Healthy'}</EuiBadge>;
+  return null;
+};

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 = ({

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,
               },
             },
           ]}

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}
             />
           </Chart>
         </>

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;

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 (
     <Chart size={{ height: 200 }}>
-      <Settings
-        theme={theme}
-        rotation={90}
-        showLegend={false}
-        onElementClick={handleElementClick}
-      />
+      <Settings theme={theme} rotation={90} showLegend={false} />
       <Axis id="left" position="left" />
       <BarSeries
         displayValueSettings={{
           showValueLabel: true,
-          valueFormatter: (d: any) => `${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,

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';

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<string, IconType> = {
   'CIS Kubernetes': 'logoKubernetes',
 };
 
-const getHealthBadge = (value: number) => {
-  if (value <= 65) return <EuiBadge color="danger">Critical</EuiBadge>;
-  if (value <= 86) return <EuiBadge color="warning">Warning</EuiBadge>;
-  if (value <= 100) return <EuiBadge color="success">Healthy</EuiBadge>;
-  return 'error';
-};
-
 export const BenchmarksSection = () => {
   const getStats = useCloudPostureStatsApi();
   const benchmarks = getStats.isSuccess && getStats.data.benchmarksStats;
@@ -59,37 +50,47 @@ export const BenchmarksSection = () => {
               </EuiTitle>
             </EuiFlexItem>
             <EuiFlexItem style={{ flexBasis: '20%' }}>
-              <EuiDescriptionList>
-                <EuiDescriptionListTitle>Compliance Score</EuiDescriptionListTitle>
-                <EuiDescriptionListDescription>
-                  <CloudPostureScoreChart {...benchmark} />
-                </EuiDescriptionListDescription>
-              </EuiDescriptionList>
+              <EuiDescriptionList
+                listItems={[
+                  {
+                    title: 'Compliance Score',
+                    description: <CloudPostureScoreChart {...benchmark} />,
+                  },
+                ]}
+              />
             </EuiFlexItem>
             <EuiFlexItem style={{ flexBasis: '40%' }}>
-              <EuiDescriptionList>
-                <EuiDescriptionListTitle>Compliance Trend</EuiDescriptionListTitle>
-                <EuiDescriptionListDescription>
-                  <ComplianceTrendChart {...benchmark} />
-                </EuiDescriptionListDescription>
-              </EuiDescriptionList>
+              <EuiDescriptionList
+                listItems={[
+                  {
+                    title: 'Compliance Trend',
+                    description: <ComplianceTrendChart {...benchmark} />,
+                  },
+                ]}
+              />
             </EuiFlexItem>
             <EuiFlexItem style={{ flexBasis: '10%' }}>
-              <EuiDescriptionList>
-                <EuiDescriptionListTitle>Posture Score</EuiDescriptionListTitle>
-                <EuiDescriptionListDescription>
-                  {benchmark.postureScore}
-                </EuiDescriptionListDescription>
-                <EuiDescriptionListTitle>Status</EuiDescriptionListTitle>
-                <EuiDescriptionListDescription>
-                  {getHealthBadge(benchmark.postureScore)}
-                </EuiDescriptionListDescription>
-                <EuiDescriptionListTitle>Total Failures</EuiDescriptionListTitle>
-                <EuiDescriptionListDescription>
-                  {benchmark.totalFailed}
-                </EuiDescriptionListDescription>
-              </EuiDescriptionList>
-              {/* <MiniCPSGoalChart />*/}
+              <EuiDescriptionList
+                listItems={[
+                  {
+                    title: 'Posture Score',
+                    description: benchmark.postureScore || 'error',
+                  },
+                  {
+                    title: 'Status',
+                    description:
+                      benchmark.postureScore !== undefined ? (
+                        <CSPHealthBadge value={benchmark.postureScore} />
+                      ) : (
+                        'error'
+                      ),
+                  },
+                  {
+                    title: 'Total Failures',
+                    description: benchmark.totalFailed || 'error',
+                  },
+                ]}
+              />
             </EuiFlexItem>
           </EuiFlexGrid>
         </EuiPanel>

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;