findings details update and 'hide history' filter (#259)

UI - Added new fields to findings table and details
UI - Added the 'hide history' filter to findings

ui/package.json

@@ -18,6 +18,7 @@
     "react-select": "^5.7.0",
     "react-table": "^7.8.0",
     "react-time-picker": "^5.2.0",
+    "react-toggle": "^4.1.3",
     "react-tooltip": "^4.2.15",
     "recharts": "^2.5.0",
     "sass": "^1.58.0",

ui/src/components/ToggleButton/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Toggle from 'react-toggle';
+
+import 'react-toggle/style.css';
+import './toggle-button.scss';
+
+const ToggleButton = ({title, checked, onChange}) => (
+    <div className="toggle-button">
+        <Toggle
+            icons={false}
+            checked={checked}
+            onChange={({target}) => onChange(target.checked)}
+        />
+        <div>{title}</div>
+    </div>
+)
+
+export default ToggleButton;

ui/src/components/ToggleButton/toggle-button.scss

@@ -0,0 +1,45 @@
+@import 'utils/scss_variables.module.scss';
+
+.toggle-button {
+    display: flex;
+    align-items: center;
+    font-weight: 400;
+    font-size: 14px;
+    color: $color-grey-black;
+
+    .react-toggle {
+        margin-right: 13px;
+
+        &.react-toggle--focus,
+        &:active {
+            .react-toggle-thumb {
+                box-shadow: none;
+                outline: none;
+            }
+        }
+        &:hover {
+            .react-toggle-track {
+                background-color: $color-grey;
+            }
+        }
+        &.react-toggle--checked {
+            .react-toggle-track {
+                background-color: $color-main-light;
+            }
+            .react-toggle-thumb {
+                left: 18px;
+                border-color: $color-main-light;
+            }
+        }
+        .react-toggle-track {
+            height: 12px;
+            width: 40px;
+            background-color: $color-grey;
+        }
+        .react-toggle-thumb {
+            top: -5px;
+            left: 0;
+            border-color: $color-grey;
+        }
+    }
+}

ui/src/context/FiltersProvider.js

@@ -20,6 +20,7 @@ const initialState = Object.keys(FILTER_TYPES).reduce((acc, curr) => ({
     [curr]: {
         tableFilters: [],
         systemFilters: {},
+        customFilters: {},
         selectedPageIndex: 0,
         tableSort: {}
     }
@@ -28,6 +29,7 @@ const initialState = Object.keys(FILTER_TYPES).reduce((acc, curr) => ({
 const FITLER_ACTIONS = {
     SET_TABLE_FILTERS_BY_KEY: "SET_TABLE_FILTERS_BY_KEY",
     SET_SYSTEM_FILTERS_BY_KEY: "SET_SYSTEM_FILTERS_BY_KEY",
+    SET_CUSTOM_FILTERS_BY_KEY: "SET_CUSTOM_FILTERS_BY_KEY",
     SET_TABLE_PAGE_BY_KEY: "SET_TABLE_PAGE_BY_KEY",
     SET_TABLE_SORT_BY_KEY: "SET_TABLE_SORT_BY_KEY",
     RESET_ALL_FILTERS: "RESET_ALL_FILTERS",
@@ -61,6 +63,18 @@ const reducer = (state, action) => {
                 }
             };
         }
+        case FITLER_ACTIONS.SET_CUSTOM_FILTERS_BY_KEY: {
+            const {filterType, filterData} = action.payload;
+
+            return {
+                ...state,
+                [filterType]: {
+                    ...state[filterType],
+                    customFilters: filterData,
+                    selectedPageIndex: 0
+                }
+            };
+        }
         case FITLER_ACTIONS.SET_TABLE_PAGE_BY_KEY: {
             const {filterType, pageIndex} = action.payload;
 
@@ -113,8 +127,8 @@ const reducer = (state, action) => {
 
 const [FiltersProvider, useFilterState, useFilterDispatch] = create(reducer, initialState);
 
-const setFilters = (dispatch, {type, filters, isSystem=false}) => dispatch({
-    type: isSystem ? FITLER_ACTIONS.SET_SYSTEM_FILTERS_BY_KEY : FITLER_ACTIONS.SET_TABLE_FILTERS_BY_KEY,
+const setFilters = (dispatch, {type, filters, isSystem=false, isCustom=false}) => dispatch({
+    type: isSystem ? FITLER_ACTIONS.SET_SYSTEM_FILTERS_BY_KEY : (isCustom ? FITLER_ACTIONS.SET_CUSTOM_FILTERS_BY_KEY : FITLER_ACTIONS.SET_TABLE_FILTERS_BY_KEY),
     payload: {filterType: type, filterData: filters}
 });
 const setPage = (dispatch, {type, pageIndex}) => dispatch({type: FITLER_ACTIONS.SET_TABLE_PAGE_BY_KEY, payload: {filterType: type, pageIndex}});

ui/src/layout/Findings/Exploits/TabExploitDetails.js

@@ -2,9 +2,11 @@ import React from 'react';
 import TitleValueDisplay, { TitleValueDisplayRow } from 'components/TitleValueDisplay';
 import DoublePaneDisplay from 'components/DoublePaneDisplay';
 import LinksDisplay from 'layout/Findings/LinkesDisplay';
+import { FindingsDetailsCommonFields } from '../utils';
 
 const TabExploitDetails = ({data}) => {
-    const {cveID, description, sourceDB, urls} = data.findingInfo;
+    const {findingInfo, foundOn, invalidatedOn} = data;
+    const {cveID, description, sourceDB, urls} = findingInfo;
 
     return (
         <DoublePaneDisplay
@@ -18,6 +20,7 @@ const TabExploitDetails = ({data}) => {
                         <TitleValueDisplay title="Description" withOpen defaultOpen>{description}</TitleValueDisplay>
                     </TitleValueDisplayRow>
                     <LinksDisplay title="URLs" links={urls} />
+                    <FindingsDetailsCommonFields foundOn={foundOn} invalidatedOn={invalidatedOn} />
                 </>  
             )}
         />

ui/src/layout/Findings/FindingsTablePage.js

@@ -1,25 +1,69 @@
-import React from 'react';
+import React, { useEffect, useCallback } from 'react';
+import { isUndefined } from 'lodash';
 import TablePage from 'components/TablePage';
+import { OPERATORS } from 'components/Filter';
+import ToggleButton from 'components/ToggleButton';
+import InfoIcon from 'components/InfoIcon';
+import Loader from 'components/Loader';
 import { getAssetColumnsFiltersConfig, scanColumnsFiltersConfig } from 'utils/utils';
 import { APIS } from 'utils/systemConsts';
-import { FILTER_TYPES } from 'context/FiltersProvider';
+import { useFilterDispatch, useFilterState, setFilters, FILTER_TYPES } from 'context/FiltersProvider';
 
-const FindingsTablePage = ({tableTitle, findingsObjectType, columns, filterType, filtersConfig}) => (
-    <TablePage
-        columns={columns}
-        url={APIS.FINDINGS}
-        tableTitle={tableTitle}
-        filterType={filterType}
-        filtersConfig={[
-            ...filtersConfig,
-            ...getAssetColumnsFiltersConfig({prefix: "asset.targetInfo", withType: false}),
-            ...scanColumnsFiltersConfig
-        ]}
-        systemFilterType={FILTER_TYPES.FINDINGS_GENERAL}
-        filters={`findingInfo.objectType eq '${findingsObjectType}'`}
-        expand="asset,scan"
-        defaultSortBy={{sortIds: ["scan.startTime"], desc: true}}
-    />
-)
+const FindingsTablePage = ({tableTitle, findingsObjectType, columns, filterType, filtersConfig}) => {
+    const filtersDispatch = useFilterDispatch();
+    const filtersState = useFilterState();
+
+    const {customFilters} = filtersState[filterType];
+    const {hideHistory} = customFilters;
+
+    const setHideHistory = useCallback(hideHistory => setFilters(filtersDispatch, {
+        type: filterType,
+        filters: {hideHistory},
+        isCustom: true
+    }), [filterType, filtersDispatch]);
+
+    useEffect(() => {
+        if (isUndefined(hideHistory)) {
+            setHideHistory(true);
+        }
+    }, [hideHistory, setHideHistory]);
+
+    if (isUndefined(hideHistory)) {
+        return <Loader />;
+    }
+
+    return (
+        <div style={{position: "relative"}}>
+            <div style={{position: "absolute", top: 0, right: 0, zIndex: 1, display: "flex", alignItems: "center"}}>
+                <ToggleButton title="Hide history" checked={hideHistory} onChange={setHideHistory} />
+                <div style={{marginLeft: "5px"}}>
+                    <InfoIcon tooltipId="hide-hostory-info-icon" tooltipText="Hide findings that were replaced by a newer asset scan results of that type" />
+                </div>
+            </div>
+            <TablePage
+                columns={columns}
+                url={APIS.FINDINGS}
+                tableTitle={tableTitle}
+                filterType={filterType}
+                filtersConfig={[
+                    ...filtersConfig,
+                    ...getAssetColumnsFiltersConfig({prefix: "asset.targetInfo", withType: false}),
+                    ...scanColumnsFiltersConfig,
+                    {value: "foundOn", label: "Found on", isDate: true, operators: [
+                        {...OPERATORS.ge},
+                        {...OPERATORS.le},
+                    ]}
+                ]}
+                systemFilterType={FILTER_TYPES.FINDINGS_GENERAL}
+                filters={[
+                    `(findingInfo.objectType eq '${findingsObjectType}')`,
+                    ...(hideHistory ? ["(invalidatedOn eq null)"] : [])
+                ].join(` and `)}
+                expand="asset,scan"
+                defaultSortBy={{sortIds: ["scan.startTime"], desc: true}}
+            />
+        </div>
+    )
+}
 
 export default FindingsTablePage;

ui/src/layout/Findings/Malware/TabMalwareDetails.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import TitleValueDisplay, { TitleValueDisplayRow } from 'components/TitleValueDisplay';
 import DoublePaneDisplay from 'components/DoublePaneDisplay';
+import { FindingsDetailsCommonFields } from '../utils';
 
 const TabMalwareDetails = ({data}) => {
-    const {malwareName, path} = data.findingInfo;
+    const {findingInfo, foundOn, invalidatedOn} = data;
+    const {malwareName, path} = findingInfo;
 
     return (
         <DoublePaneDisplay
@@ -15,6 +17,7 @@ const TabMalwareDetails = ({data}) => {
                     <TitleValueDisplayRow>
                     <TitleValueDisplay title="File path">{path}</TitleValueDisplay>
                     </TitleValueDisplayRow>
+                    <FindingsDetailsCommonFields foundOn={foundOn} invalidatedOn={invalidatedOn} />
                 </>  
             )}
         />

ui/src/layout/Findings/Misconfigurations/TabMisconfigurationDetails.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import TitleValueDisplay, { TitleValueDisplayRow } from 'components/TitleValueDisplay';
 import DoublePaneDisplay from 'components/DoublePaneDisplay';
+import { FindingsDetailsCommonFields } from '../utils';
 import { MISCONFIGURATION_SEVERITY_MAP } from './utils';
 
 const TabMisconfigurationDetails = ({data}) => {
-    const {testID, severity, testDescription, scannerName, scannedPath, remediation, testCategory, message} = data.findingInfo;
+    const {findingInfo, foundOn, invalidatedOn} = data;
+    const {testID, severity, testDescription, scannerName, scannedPath, remediation, testCategory, message} = findingInfo;
 
     return (
         <DoublePaneDisplay
@@ -28,6 +30,7 @@ const TabMisconfigurationDetails = ({data}) => {
                     <TitleValueDisplayRow>
                         <TitleValueDisplay title="Description" withOpen defaultOpen>{testDescription}</TitleValueDisplay>
                     </TitleValueDisplayRow>
+                    <FindingsDetailsCommonFields foundOn={foundOn} invalidatedOn={invalidatedOn} />
                 </>  
             )}
         />

ui/src/layout/Findings/Packages/TabPackageDetails.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import TitleValueDisplay, { TitleValueDisplayRow, ValuesListDisplay } from 'components/TitleValueDisplay';
 import DoublePaneDisplay from 'components/DoublePaneDisplay';
+import { FindingsDetailsCommonFields } from '../utils';
 
 const TabPackageDetails = ({data}) => {
-    const {name, version, language, licenses} = data.findingInfo;
+    const {findingInfo, foundOn, invalidatedOn} = data;
+    const {name, version, language, licenses} = findingInfo;
 
     return (
         <DoublePaneDisplay
@@ -17,6 +19,7 @@ const TabPackageDetails = ({data}) => {
                         <TitleValueDisplay title="Language">{language}</TitleValueDisplay>
                         <TitleValueDisplay title="Licenses"><ValuesListDisplay values={licenses} /></TitleValueDisplay>
                     </TitleValueDisplayRow>
+                    <FindingsDetailsCommonFields foundOn={foundOn} invalidatedOn={invalidatedOn} />
                 </>  
             )}
         />

ui/src/layout/Findings/Rootkits/TabRootkitDetails.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import TitleValueDisplay, { TitleValueDisplayRow } from 'components/TitleValueDisplay';
 import DoublePaneDisplay from 'components/DoublePaneDisplay';
+import { FindingsDetailsCommonFields } from '../utils';
 
 const TabPackageDetails = ({data}) => {
-    const {rootkitName, message} = data.findingInfo;
+    const {findingInfo, foundOn, invalidatedOn} = data;
+    const {rootkitName, message} = findingInfo;
 
     return (
         <DoublePaneDisplay
@@ -15,6 +17,7 @@ const TabPackageDetails = ({data}) => {
                     <TitleValueDisplayRow>
                         <TitleValueDisplay title="Message">{message}</TitleValueDisplay>
                     </TitleValueDisplayRow>
+                    <FindingsDetailsCommonFields foundOn={foundOn} invalidatedOn={invalidatedOn} />
                 </>  
             )}
         />

ui/src/layout/Findings/Secrets/TabSecretDetails.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import TitleValueDisplay, { TitleValueDisplayRow } from 'components/TitleValueDisplay';
 import DoublePaneDisplay from 'components/DoublePaneDisplay';
+import { FindingsDetailsCommonFields } from '../utils';
 
 const TabSecretDetails = ({data}) => {
-    const {fingerprint, description, startLine, endLine, filePath} = data.findingInfo;
+    const {findingInfo, foundOn, invalidatedOn} = data;
+    const {fingerprint, description, startLine, endLine, filePath} = findingInfo;
 
     return (
         <DoublePaneDisplay
@@ -20,6 +22,7 @@ const TabSecretDetails = ({data}) => {
                     <TitleValueDisplayRow>
                         <TitleValueDisplay title="File path">{filePath}</TitleValueDisplay>
                     </TitleValueDisplayRow>
+                    <FindingsDetailsCommonFields foundOn={foundOn} invalidatedOn={invalidatedOn} />
                 </>  
             )}
         />

ui/src/layout/Findings/Vulnerabilities/TabVulnerabilityDetails.js

@@ -8,6 +8,7 @@ import SeverityWithCvssDisplay from 'components/SeverityWithCvssDisplay';
 import { formatDate, getHigestVersionCvssData } from 'utils/utils';
 import LinksDisplay from 'layout/Findings/LinkesDisplay';
 import ScoreTag from './ScoreTag';
+import { FindingsDetailsCommonFields } from '../utils';
 
 import COLORS from 'utils/scss_variables.module.scss';
 
@@ -30,7 +31,7 @@ const ScoreBar = ({score}) => {
 }
 
 const TabVulnerabilityDetails = ({data}) => {
-    const {id, findingInfo, scan} = data;
+    const {id, findingInfo, scan, foundOn, invalidatedOn} = data;
     const {vulnerabilityName, package: packageInfo, severity, fix, cvss, description, links} = findingInfo;
     const {name: packageName, version} = packageInfo;
 
@@ -63,6 +64,7 @@ const TabVulnerabilityDetails = ({data}) => {
                         <TitleValueDisplay title="Description" withOpen defaultOpen>{description}</TitleValueDisplay>
                     </TitleValueDisplayRow>
                     <LinksDisplay title="Links" links={links} />
+                    <FindingsDetailsCommonFields foundOn={foundOn} invalidatedOn={invalidatedOn} />
                 </>  
             )}
             rightPlaneDisplay={() => (