Add visualization of vulnerabilities evaluation status count

plugins/main/public/components/common/data-grid/use-data-grid.ts → plugins/main/public/components/common/data-grid/use-data-grid.tsx

@@ -17,12 +17,13 @@ import {
   IndexPattern,
 } from '../../../../../../src/plugins/data/common';
 import { EuiDataGridPaginationProps } from '@opensearch-project/oui';
+import dompurify from 'dompurify';
 
 export interface PaginationOptions
   extends Pick<
     EuiDataGridPaginationProps,
     'pageIndex' | 'pageSize' | 'pageSizeOptions'
-  > {}
+  > { }
 
 type SortingColumns = EuiDataGridSorting['columns'];
 
@@ -69,7 +70,7 @@ export const useDataGrid = (props: tDataGridProps): EuiDataGridProps => {
     useDefaultPagination = false,
     pagination: paginationProps = {},
     filters = [],
-    setFilters = () => {},
+    setFilters = () => { },
   } = props;
   const [columnVisibility, setVisibility] = useState(() =>
     columns.map(({ id }) => id),
@@ -85,11 +86,11 @@ export const useDataGrid = (props: tDataGridProps): EuiDataGridProps => {
     );
     return defaultSort
       ? [
-          {
-            id: defaultSort.id,
-            direction: defaultSort.defaultSortDirection || 'desc',
-          },
-        ]
+        {
+          id: defaultSort.id,
+          direction: defaultSort.defaultSortDirection || 'desc',
+        },
+      ]
       : [];
   };
   const defaultSorting: SortingColumns = getDefaultSorting();
@@ -104,9 +105,9 @@ export const useDataGrid = (props: tDataGridProps): EuiDataGridProps => {
     useDefaultPagination
       ? DEFAULT_PAGINATION_OPTIONS
       : {
-          ...DEFAULT_PAGINATION_OPTIONS,
-          ...paginationProps,
-        },
+        ...DEFAULT_PAGINATION_OPTIONS,
+        ...paginationProps,
+      },
   );
 
   const onChangeItemsPerPage = useMemo(
@@ -163,7 +164,18 @@ export const useDataGrid = (props: tDataGridProps): EuiDataGridProps => {
         );
       }
 
-      return fieldFormatted;
+      // Format the value using the field formatter
+      // https://github.com/opensearch-project/OpenSearch-Dashboards/blob/2.16.0/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.tsx#L80-L89
+      const formattedValue = indexPattern.formatField(rows[rowIndex], columnId);
+      if (typeof formattedValue === 'undefined') {
+        return <span>-</span>;
+      } else {
+        const sanitizedCellValue = dompurify.sanitize(formattedValue);
+        return (
+          // eslint-disable-next-line react/no-danger
+          <span dangerouslySetInnerHTML={{ __html: sanitizedCellValue }} />
+        );
+      }
     }
     return null;
   };

plugins/main/public/components/common/data-source/pattern/pattern-data-source-filter-manager.ts

@@ -325,7 +325,7 @@ export class PatternDataSourceFilterManager
   static createFilter(
     type: FILTER_OPERATOR,
     key: string,
-    value: string | string[],
+    value: string | string[] | any,
     indexPatternId: string,
     controlledBy?: string,
   ) {

plugins/main/public/components/common/search-bar/search-bar.tsx

@@ -12,11 +12,13 @@ export interface WzSearchBarProps extends SearchBarProps {
   userFilters?: Filter[];
   preQueryBar?: React.ReactElement;
   postFilters?: React.ReactElement;
+  postFixedFilters?: () => React.ReactElement<any>[];
   hideFixedFilters?: boolean;
 }
 
 export const WzSearchBar = ({
   fixedFilters = [],
+  postFixedFilters,
   preQueryBar,
   hideFixedFilters,
   postFilters,
@@ -65,14 +67,18 @@ export const WzSearchBar = ({
                 {fixedFilters?.map((filter, idx) => (
                   <EuiFlexItem grow={false} key={idx}>
                     <EuiBadge className='globalFilterItem' color='hollow'>
-                      {`${filter.meta.key}: ${
-                        typeof filter.meta.value === 'function'
-                          ? filter.meta.value()
-                          : filter.meta.value
-                      }`}
+                      {`${filter.meta.key}: ${typeof filter.meta.value === 'function'
+                        ? filter.meta.value()
+                        : filter.meta.value
+                        }`}
                     </EuiBadge>
                   </EuiFlexItem>
                 ))}
+                {postFixedFilters ? postFixedFilters.map((Filter, idx) => (
+                  <EuiFlexItem grow={false} key={idx}>
+                    <Filter />
+                  </EuiFlexItem>
+                )) : null}
               </EuiFlexGroup>
             </EuiFlexItem>
           )}

plugins/main/public/components/overview/vulnerabilities/common/components/vuls-evaluation-filter.tsx

@@ -0,0 +1,92 @@
+import React, { useState, useEffect } from "react";
+import { EuiButtonGroup } from "@elastic/eui"
+import { FILTER_OPERATOR, PatternDataSourceFilterManager } from "../../../../common/data-source";
+import { Filter } from "../../../../../../../../src/plugins/data/common";
+
+type VulsEvaluatedFilterProps = {
+    setValue: (underEvaluation: boolean | null) => void;
+    value: boolean | null;
+}
+
+const UNDER_EVALUATION_FIELD = "wazuh.vulnerability.under_evaluation";
+
+export const getUnderEvaluationFilterValue = (filters: Filter[]): boolean | null => {
+    const underEvaluationFilter = filters.find(f => f.meta?.key === UNDER_EVALUATION_FIELD);
+    if (underEvaluationFilter) {
+        return underEvaluationFilter.meta?.params.query as boolean;
+    }
+    return null;
+}
+
+export const excludeUnderEvaluationFilter = (filters: Filter[]): Filter[] => {
+    return filters.filter(f => f.meta?.key !== UNDER_EVALUATION_FIELD);
+}
+
+export const createUnderEvaluationFilter = (underEvaluation: boolean, indexPatternId: string): Filter => {
+    return PatternDataSourceFilterManager.createFilter(
+        FILTER_OPERATOR.IS,
+        UNDER_EVALUATION_FIELD,
+        underEvaluation,
+        indexPatternId
+    )
+}
+
+const VulsEvaluationFilter = ({ setValue, value }: VulsEvaluatedFilterProps) => {
+
+    const toggleButtons = [
+        {
+            id: 'evaluated',
+            label: 'Evaluated',
+        },
+        {
+            id: 'underEvaluation',
+            label: 'Under evaluation',
+        }
+    ];
+
+    const getDefaultValue = () => {
+        if (value === true) {
+            return { underEvaluation: true, evaluated: false };
+        } else if (value === false) {
+            return { underEvaluation: false, evaluated: true };
+        } else {
+            return {};
+        }
+    }
+
+    const [toggleIdToSelectedMap, setToggleIdToSelectedMap] = useState(getDefaultValue());
+
+
+    useEffect(() => {
+        setToggleIdToSelectedMap(getDefaultValue());
+    }, [value]);
+
+
+    const handleChange = (optionId: string) => {
+        let newToggleIdToSelectedMap = {};
+        if (!toggleIdToSelectedMap[optionId]) {
+            newToggleIdToSelectedMap = { [optionId]: true };
+        }
+        setToggleIdToSelectedMap(newToggleIdToSelectedMap);
+        if (optionId === "underEvaluation" && newToggleIdToSelectedMap[optionId]) {
+            setValue(true);
+        } else if (optionId === "evaluated" && newToggleIdToSelectedMap[optionId]) {
+            setValue(false);
+        } else {
+            setValue(null);
+        }
+
+    }
+
+    return (
+        <EuiButtonGroup
+            type="multi"
+            idToSelectedMap={toggleIdToSelectedMap}
+            options={toggleButtons}
+            onChange={(id) => handleChange(id)}
+            buttonSize="compressed"
+        />
+    )
+}
+
+export default VulsEvaluationFilter;

plugins/main/public/components/overview/vulnerabilities/dashboards/inventory/inventory.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { IntlProvider } from 'react-intl';
 import {
   EuiDataGrid,
@@ -34,7 +34,6 @@ import { LoadingSearchbarProgress } from '../../../../../../public/components/co
 // common components/hooks
 import useSearchBar from '../../../../common/search-bar/use-search-bar';
 import { useDataGrid } from '../../../../common/data-grid/use-data-grid';
-import { useDocViewer } from '../../../../common/doc-viewer/use-doc-viewer';
 import { withErrorBoundary } from '../../../../common/hocs';
 import { exportSearchToCSV } from '../../../../common/data-grid/data-grid-service';
 import { compose } from 'redux';
@@ -51,6 +50,7 @@ import { IndexPattern } from '../../../../../../../../src/plugins/data/public';
 import { wzDiscoverRenderColumns } from '../../../../common/wazuh-discover/render-columns';
 import { DocumentViewTableAndJson } from '../../../../common/wazuh-discover/components/document-view-table-and-json';
 import { WzSearchBar } from '../../../../common/search-bar';
+import VulsEvaluationFilter, { createUnderEvaluationFilter, excludeUnderEvaluationFilter, getUnderEvaluationFilterValue } from '../../common/components/vuls-evaluation-filter';
 
 const InventoryVulsComponent = () => {
   const {
@@ -104,6 +104,11 @@ const InventoryVulsComponent = () => {
     );
   };
 
+  const getUnderEvaluation = useCallback(getUnderEvaluationFilterValue, [
+    JSON.stringify(filters),
+    isDataSourceLoading
+  ]);
+
   const dataGridProps = useDataGrid({
     ariaLabelledBy: 'Vulnerabilities Inventory Table',
     defaultColumns: inventoryTableDefaultColumns,
@@ -117,11 +122,6 @@ const InventoryVulsComponent = () => {
 
   const { pagination, sorting, columnVisibility } = dataGridProps;
 
-  const docViewerProps = useDocViewer({
-    doc: inspectedHit,
-    indexPattern: indexPattern as IndexPattern,
-  });
-
   const onClickExportResults = async () => {
     const params = {
       indexPattern: indexPattern as IndexPattern,
@@ -152,6 +152,7 @@ const InventoryVulsComponent = () => {
     if (isDataSourceLoading) {
       return;
     }
+    setUnderEvaluation(getUnderEvaluation(filters || []));
     setIndexPattern(dataSource?.indexPattern);
     fetchData({ query, pagination, sorting })
       .then(results => {
@@ -171,6 +172,28 @@ const InventoryVulsComponent = () => {
     JSON.stringify(sorting),
   ]);
 
+
+  /**
+   * When the user changes the filter value, this function is called to update the filters
+   * If the value is null, the filter is removed
+   * If the filter already exists, it is remove and the new filter is added
+   * @param underEvaluation 
+   * @returns 
+   */
+  const handleFilterChange = (underEvaluation: boolean | null) => {
+    const newFilters = excludeUnderEvaluationFilter(filters || []);
+    if (underEvaluation === null) {
+      setFilters(newFilters);
+      return;
+    }
+    newFilters.push(createUnderEvaluationFilter(underEvaluation, dataSource?.id || indexPattern?.id));
+    setFilters(newFilters);
+  };
+
+
+  const [underEvaluation, setUnderEvaluation] = useState<boolean | null>(getUnderEvaluation(filters || []));
+
+
   return (
     <IntlProvider locale='en'>
       <>
@@ -190,7 +213,9 @@ const InventoryVulsComponent = () => {
               <WzSearchBar
                 appName='inventory-vuls'
                 {...searchBarProps}
+                filters={excludeUnderEvaluationFilter(filters)}
                 fixedFilters={fixedFilters}
+                postFixedFilters={[() => <VulsEvaluationFilter value={underEvaluation} setValue={handleFilterChange} />]}
                 showDatePicker={false}
                 showQueryInput={true}
                 showQueryBar={true}
@@ -219,15 +244,17 @@ const InventoryVulsComponent = () => {
                             showResetButton={false}
                             tooltip={
                               results?.hits?.total &&
-                              results?.hits?.total > MAX_ENTRIES_PER_QUERY
+                                results?.hits?.total > MAX_ENTRIES_PER_QUERY
                                 ? {
-                                    ariaLabel: 'Warning',
-                                    content: `The query results exceeded the limit of ${formatNumWithCommas(
-                                      MAX_ENTRIES_PER_QUERY,
-                                    )} hits. Please refine your search.`,
-                                    iconType: 'alert',
-                                    position: 'top',
-                                  }
+                                  ariaLabel: 'Warning',
+                                  content: `The query results has exceeded the limit of ${formatNumWithCommas(
+                                    MAX_ENTRIES_PER_QUERY,
+                                  )} hits. To provide a better experience the table only shows the first ${formatNumWithCommas(
+                                    MAX_ENTRIES_PER_QUERY,
+                                  )} hits.`,
+                                  iconType: 'alert',
+                                  position: 'top',
+                                }
                                 : undefined
                             }
                           />