From e126a39accc07d94d3e3e388ef7f057187c135df Mon Sep 17 00:00:00 2001 From: Or Ouziel Date: Tue, 30 Nov 2021 19:04:59 +0200 Subject: [PATCH] add types, fix minor issues (#22) --- .../pages/findings/findings_table.tsx | 37 ++---- .../cloud_posture/pages/findings/index.tsx | 113 ++++++++---------- .../pages/findings/rule_flyout.tsx | 2 +- 3 files changed, 67 insertions(+), 85 deletions(-) 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 b363a4b5765935..34b04aa024aacb 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 fc7b47bbf5d1c4..91e72c79b5b019 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 d7c49cd6765b3b..75c5ff1b07cb84 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(() => {