add types, fix minor issues (elastic#22)

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) => (
-  <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[]) => (
   <>
@@ -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',
@@ -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;
@@ -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)}
+        />
       )}
     </>
   );

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 = () => (
   </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[]>([]);
@@ -191,7 +136,6 @@ const FindingsTableContainer = () => {
 
   if (!kubebeatDataView || !findings) return null;
 
-  // console.log({ searchState });
   return (
     <div style={{ height: '100%', width: '100%' }}>
       <SearchBar
@@ -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!,
+});

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<typeof tabs[number]>('resource');
 
   const Tab = useCallback(() => {