diff --git a/x-pack/plugins/security_solution/public/cloud_posture/pages/findings/findings_table.tsx b/x-pack/plugins/security_solution/public/cloud_posture/pages/findings/findings_table.tsx
index b363a4b576593..34b04aa024aac 100644
--- a/x-pack/plugins/security_solution/public/cloud_posture/pages/findings/findings_table.tsx
+++ b/x-pack/plugins/security_solution/public/cloud_posture/pages/findings/findings_table.tsx
@@ -4,7 +4,6 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
-
import React, { useState } from 'react';
import {
Criteria,
@@ -15,15 +14,8 @@ import {
} from '@elastic/eui';
import { orderBy } from 'lodash';
import { CSPFinding } from './types';
-import { FindingsRuleFlyOut } from './rule_flyout';
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-const getEvaluationBadge = (v: string) => (
-
- {v.toUpperCase()}
-
-);
+import { FindingsRuleFlyout } from './rule_flyout';
+import { CSPEvaluationBadge } from '../../components/csp_evaluation_badge';
const getTagsBadges = (v: string[]) => (
<>
@@ -52,7 +44,7 @@ const columns: Array> = [
field: 'result.evaluation',
name: 'Evaluation',
width: '80px',
- render: getEvaluationBadge,
+ render: (v) => ,
},
{
field: 'rule.tags',
@@ -73,19 +65,13 @@ export const FindingsTable = ({ data, isLoading, error }: FindingsTableProps) =>
const [pageSize, setPageSize] = useState(25);
const [sortField, setSortField] = useState('resource');
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
- const [currentRule, setCurrentRule] = useState();
+ const [selectedFinding, setSelectedFinding] = useState();
- const getCellProps = (item: any, column: any) => {
- const { field } = column;
- if (field === 'rule.name') {
- return {
- onClick: () => setCurrentRule(item),
- };
- }
- return {};
- };
+ const getCellProps = (item: CSPFinding, column: EuiTableFieldDataColumnType) => ({
+ onClick: column.field === 'rule.name' ? () => setSelectedFinding(item) : undefined,
+ });
- const onTableChange = ({ page, sort }: Criteria) => {
+ const onTableChange = ({ page, sort }: Criteria) => {
if (!page || !sort) return;
const { index, size } = page;
const { field, direction } = sort;
@@ -128,8 +114,11 @@ export const FindingsTable = ({ data, isLoading, error }: FindingsTableProps) =>
onChange={onTableChange}
cellProps={getCellProps}
/>
- {currentRule && (
- setCurrentRule(false)} />
+ {selectedFinding && (
+ setSelectedFinding(undefined)}
+ />
)}
>
);
diff --git a/x-pack/plugins/security_solution/public/cloud_posture/pages/findings/index.tsx b/x-pack/plugins/security_solution/public/cloud_posture/pages/findings/index.tsx
index fc7b47bbf5d1c..91e72c79b5b01 100644
--- a/x-pack/plugins/security_solution/public/cloud_posture/pages/findings/index.tsx
+++ b/x-pack/plugins/security_solution/public/cloud_posture/pages/findings/index.tsx
@@ -23,15 +23,10 @@ import { FindingsTable } from './findings_table';
import { useKibana } from '../../../common/lib/kibana';
import { CSPFinding } from './types';
-// import { Filter, Query } from '@kbn/es-query';
-// import { SpyRoute } from '../../../common/utils/route/spy_routes';
-// import { CloudPosturePage } from '../../../app/types';
-// import type { TimeRange } from '../../../../../../'
-// import { makeMapStateToProps } from '../../../common/components/url_state/helpers';
-// import { useDeepEqualSelector } from '../../../common/hooks/use_selector';
-// TODO: use urlState
-// const urlMapState = makeMapStateToProps();
-// const { urlState } = useDeepEqualSelector(urlMapState);
+interface URLState {
+ query: Query;
+ dateRange?: TimeRange;
+}
const KUBEBEAT_INDEX = 'kubebeat';
@@ -43,61 +38,11 @@ export const Findings = () => (
);
-interface URLState {
- query: Query;
- dateRange?: TimeRange;
-}
-
-// Temp URL state utility
-const useSearchState = () => {
- const loc = useLocation();
- const [state, set] = useState(DEFAULT_QUERY);
-
- useEffect(() => {
- const params = new URLSearchParams(loc.search);
- const query = params.get('query');
- const dateRange = params.get('dateRange');
-
- try {
- set({
- query: (query ? decode(query as string) : DEFAULT_QUERY.query) as Query,
- dateRange: (dateRange ? decode(dateRange as string) : undefined) as TimeRange,
- });
- } catch (e) {
- // eslint-disable-next-line no-console
- console.log('Unable to decode URL ');
-
- set({} as URLState);
- }
- }, [loc.search]);
-
- return state;
-};
-
const DEFAULT_QUERY = {
query: { language: 'kuery', query: '' },
dateRange: undefined,
};
-const createEntry = (v: SearchHit): CSPFinding => ({
- ...v,
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
- ...v._source!,
-});
-
-// TODO: get it some other way
-const useKubebeatDataView = () => {
- const [kubebeatDataView, setKubebeatDataView] = useState();
- const {
- data: { dataViews },
- } = useKibana().services;
- useEffect(() => {
- if (!dataViews) return;
- (async () => setKubebeatDataView((await dataViews.find(KUBEBEAT_INDEX))?.[0]))();
- }, [dataViews]);
- return { kubebeatDataView };
-};
-
const FindingsTableContainer = () => {
const { data: dataService } = useKibana().services;
const [filters, setFilters] = useState([]);
@@ -191,7 +136,6 @@ const FindingsTableContainer = () => {
if (!kubebeatDataView || !findings) return null;
- // console.log({ searchState });
return (
{
);
};
+
+/**
+ * Temp URL state utility
+ */
+const useSearchState = () => {
+ const loc = useLocation();
+ const [state, set] = useState(DEFAULT_QUERY);
+
+ useEffect(() => {
+ const params = new URLSearchParams(loc.search);
+ const query = params.get('query');
+ const dateRange = params.get('dateRange');
+
+ try {
+ set({
+ query: (query ? decode(query as string) : DEFAULT_QUERY.query) as Query,
+ dateRange: (dateRange ? decode(dateRange as string) : undefined) as TimeRange,
+ });
+ } catch (e) {
+ // eslint-disable-next-line no-console
+ console.log('Unable to decode URL ');
+
+ set({} as URLState);
+ }
+ }, [loc.search]);
+
+ return state;
+};
+
+/**
+ * Temp DataView Utility
+ */
+const useKubebeatDataView = () => {
+ const [kubebeatDataView, setKubebeatDataView] = useState();
+ const {
+ data: { dataViews },
+ } = useKibana().services;
+ useEffect(() => {
+ if (!dataViews) return;
+ (async () => setKubebeatDataView((await dataViews.find(KUBEBEAT_INDEX))?.[0]))();
+ }, [dataViews]);
+ return { kubebeatDataView };
+};
+
+const createEntry = (v: SearchHit): CSPFinding => ({
+ ...v,
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ ...v._source!,
+});
diff --git a/x-pack/plugins/security_solution/public/cloud_posture/pages/findings/rule_flyout.tsx b/x-pack/plugins/security_solution/public/cloud_posture/pages/findings/rule_flyout.tsx
index d7c49cd6765b3..75c5ff1b07cb8 100644
--- a/x-pack/plugins/security_solution/public/cloud_posture/pages/findings/rule_flyout.tsx
+++ b/x-pack/plugins/security_solution/public/cloud_posture/pages/findings/rule_flyout.tsx
@@ -35,7 +35,7 @@ interface FindingFlyoutProps {
findings: CSPFinding;
}
-export const FindingsRuleFlyOut = ({ onClose, findings }: FindingFlyoutProps) => {
+export const FindingsRuleFlyout = ({ onClose, findings }: FindingFlyoutProps) => {
const [tab, setTab] = useState('resource');
const Tab = useCallback(() => {