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,6 +17,7 @@ import {
   IndexPattern,
 } from '../../../../../../src/plugins/data/common';
 import { EuiDataGridPaginationProps } from '@opensearch-project/oui';
+import dompurify from 'dompurify';
 
 export interface PaginationOptions
   extends Pick<
@@ -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,
@@ -73,6 +75,13 @@ export const WzSearchBar = ({
                     </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.scss

@@ -0,0 +1,21 @@
+.button-group-filter {
+  border-radius: 2px;
+
+  .euiButton__content,
+  .euiButton__text {
+    font-size: 12px;
+    font-weight: 500;
+  }
+
+  .euiButtonGroup__buttons {
+    height: 30px;
+    border-radius: 2px;
+    box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2),
+      0 3px 2px -2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px #424752 !important;
+    border: none !important;
+
+    .euiButtonGroupButton {
+      line-height: 28px;
+    }
+  }
+}

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

@@ -0,0 +1,105 @@
+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';
+import './vuls-evaluation-filter.scss';
+
+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
+      className='button-group-filter'
+      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,11 @@ 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 +108,11 @@ const InventoryVulsComponent = () => {
     );
   };
 
+  const getUnderEvaluation = useCallback(getUnderEvaluationFilterValue, [
+    JSON.stringify(filters),
+    isDataSourceLoading,
+  ]);
+
   const dataGridProps = useDataGrid({
     ariaLabelledBy: 'Vulnerabilities Inventory Table',
     defaultColumns: inventoryTableDefaultColumns,
@@ -117,11 +126,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 +156,7 @@ const InventoryVulsComponent = () => {
     if (isDataSourceLoading) {
       return;
     }
+    setUnderEvaluation(getUnderEvaluation(filters || []));
     setIndexPattern(dataSource?.indexPattern);
     fetchData({ query, pagination, sorting })
       .then(results => {
@@ -171,6 +176,32 @@ 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 +221,16 @@ const InventoryVulsComponent = () => {
               <WzSearchBar
                 appName='inventory-vuls'
                 {...searchBarProps}
+                filters={excludeUnderEvaluationFilter(filters)}
                 fixedFilters={fixedFilters}
+                postFixedFilters={[
+                  () => (
+                    <VulsEvaluationFilter
+                      value={underEvaluation}
+                      setValue={handleFilterChange}
+                    />
+                  ),
+                ]}
                 showDatePicker={false}
                 showQueryInput={true}
                 showQueryBar={true}
@@ -222,9 +262,11 @@ const InventoryVulsComponent = () => {
                               results?.hits?.total > MAX_ENTRIES_PER_QUERY
                                 ? {
                                     ariaLabel: 'Warning',
-                                    content: `The query results exceeded the limit of ${formatNumWithCommas(
+                                    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. Please refine your search.`,
+                                    )} hits.`,
                                     iconType: 'alert',
                                     position: 'top',
                                   }