Skip to content

Commit

Permalink
add types, fix minor issues (elastic#22)
Browse files Browse the repository at this point in the history
  • Loading branch information
@orouz
orouz committed Dec 21, 2021
1 parent b14491c commit e126a39
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 85 deletions.
37 changes: 13 additions & 24 deletions x-pack/plugins/security_solution/public/cloud_posture/pages/findings/findings_table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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) => (
<EuiBadge color={v === 'passed' ? 'success' : v === 'failed' ? 'danger' : 'default'}>
{v.toUpperCase()}
</EuiBadge>
);
import { FindingsRuleFlyout } from './rule_flyout';
import { CSPEvaluationBadge } from '../../components/csp_evaluation_badge';

const getTagsBadges = (v: string[]) => (
<>
Expand Down Expand Up @@ -52,7 +44,7 @@ const columns: Array<EuiTableFieldDataColumnType<CSPFinding>> = [
field: 'result.evaluation',
name: 'Evaluation',
width: '80px',
render: getEvaluationBadge,
render: (v) => <CSPEvaluationBadge type={v} />,
},
{
field: 'rule.tags',
Expand All @@ -73,19 +65,13 @@ export const FindingsTable = ({ data, isLoading, error }: FindingsTableProps) =>
const [pageSize, setPageSize] = useState(25);
const [sortField, setSortField] = useState<keyof CSPFinding>('resource');
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
const [currentRule, setCurrentRule] = useState<any>();
const [selectedFinding, setSelectedFinding] = useState<CSPFinding | undefined>();

const getCellProps = (item: any, column: any) => {
const { field } = column;
if (field === 'rule.name') {
return {
onClick: () => setCurrentRule(item),
};
}
return {};
};
const getCellProps = (item: CSPFinding, column: EuiTableFieldDataColumnType<CSPFinding>) => ({
onClick: column.field === 'rule.name' ? () => setSelectedFinding(item) : undefined,
});

const onTableChange = ({ page, sort }: Criteria<any>) => {
const onTableChange = ({ page, sort }: Criteria<CSPFinding>) => {
if (!page || !sort) return;
const { index, size } = page;
const { field, direction } = sort;
Expand Down Expand Up @@ -128,8 +114,11 @@ export const FindingsTable = ({ data, isLoading, error }: FindingsTableProps) =>
onChange={onTableChange}
cellProps={getCellProps}
/>
{currentRule && (
<FindingsRuleFlyOut findings={currentRule} onClose={() => setCurrentRule(false)} />
{selectedFinding && (
<FindingsRuleFlyout
findings={selectedFinding}
onClose={() => setSelectedFinding(undefined)}
/>
)}
</>
);
Expand Down
113 changes: 53 additions & 60 deletions x-pack/plugins/security_solution/public/cloud_posture/pages/findings/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -43,61 +38,11 @@ export const Findings = () => (
</SecuritySolutionPageWrapper>
);

interface URLState {
query: Query;
dateRange?: TimeRange;
}

// Temp URL state utility
const useSearchState = () => {
const loc = useLocation();
const [state, set] = useState<URLState>(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>): 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<DataView>();
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<Filter[]>([]);
Expand Down Expand Up @@ -191,7 +136,6 @@ const FindingsTableContainer = () => {

if (!kubebeatDataView || !findings) return null;

// console.log({ searchState });
return (
<div style={{ height: '100%', width: '100%' }}>
<SearchBar
Expand Down Expand Up @@ -219,3 +163,52 @@ const FindingsTableContainer = () => {
</div>
);
};

/**
* Temp URL state utility
*/
const useSearchState = () => {
const loc = useLocation();
const [state, set] = useState<URLState>(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<DataView>();
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>): CSPFinding => ({
...v,
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
...v._source!,
});
2 changes: 1 addition & 1 deletion x-pack/plugins/security_solution/public/cloud_posture/pages/findings/rule_flyout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ interface FindingFlyoutProps {
findings: CSPFinding;
}

export const FindingsRuleFlyOut = ({ onClose, findings }: FindingFlyoutProps) => {
export const FindingsRuleFlyout = ({ onClose, findings }: FindingFlyoutProps) => {
const [tab, setTab] = useState<typeof tabs[number]>('resource');

const Tab = useCallback(() => {
Expand Down

0 comments on commit e126a39

Please sign in to comment.