Add filter by value to document details fields

CHANGELOG.md

@@ -13,6 +13,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Support for Wazuh 4.10.0
 - Added sample data for YARA [#6964](https://github.com/wazuh/wazuh-dashboard-plugins/issues/6964)
 - Added a custom filter and visualization for vulnerability.under_evaluation field [#6968](https://github.com/wazuh/wazuh-dashboard-plugins/issues/6968) [#7044](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7044) [#7046](https://github.com/wazuh/wazuh-dashboard-plugins/issues/7046)
+- Added filter by value to document details fields [#7081](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7081)
 
 ### Changed
 

plugins/main/public/components/agents/fim/inventory/fileDetail.tsx

@@ -52,6 +52,7 @@ import { RedirectAppLinks } from '../../../../../../../src/plugins/opensearch_da
 import TechniqueRowDetails from '../../../overview/mitre/framework/components/techniques/components/flyout-technique/technique-row-details';
 import { DATA_SOURCE_FILTER_CONTROLLED_CLUSTER_MANAGER } from '../../../../../common/constants';
 import NavigationService from '../../../../react-services/navigation-service';
+import { setFilters } from '../../../common/search-bar/set-filters';
 
 export class FileDetails extends Component {
   props!: {
@@ -586,6 +587,8 @@ export class FileDetails extends Component {
 
           this.discoverFilterManager.addFilters(newFilter);
         }}
+        filters={[]}
+        setFilters={setFilters(this.discoverFilterManager)}
       />
     );
   }

plugins/main/public/components/common/data-grid/cell-filter-actions.test.tsx

@@ -61,7 +61,7 @@ describe('cell-filter-actions', () => {
       fireEvent.click(component);
 
       expect(onFilter).toHaveBeenCalledTimes(1);
-      expect(onFilter).toHaveBeenCalledWith(TEST_COLUMN_ID, TEST_VALUE, 'is');
+      expect(onFilter).toHaveBeenCalledWith(TEST_COLUMN_ID, 'is', TEST_VALUE);
     });
   });
 
@@ -102,8 +102,8 @@ describe('cell-filter-actions', () => {
       expect(onFilter).toHaveBeenCalledTimes(1);
       expect(onFilter).toHaveBeenCalledWith(
         TEST_COLUMN_ID,
-        TEST_VALUE,
         'is not',
+        TEST_VALUE,
       );
     });
   });

plugins/main/public/components/common/data-grid/cell-filter-actions.tsx

@@ -15,30 +15,30 @@ export const filterIsAction = (
   rows: any[],
   pageSize: number,
   onFilter: (
-    columndId: string,
-    value: any,
+    field: string,
     operation: FILTER_OPERATOR.IS | FILTER_OPERATOR.IS_NOT,
+    value?: any,
   ) => void,
 ) => {
   return ({
     rowIndex,
-    columnId,
+    columnId: field,
     Component,
   }: EuiDataGridColumnCellActionProps) => {
     const filterForValueText = i18n.translate('discover.filterForValue', {
       defaultMessage: 'Filter for value',
     });
     const filterForValueLabel = i18n.translate('discover.filterForValueLabel', {
       defaultMessage: 'Filter for value: {value}',
-      values: { value: columnId },
+      values: { value: field },
     });
 
     const handleClick = () => {
       const row = rows[rowIndex % pageSize];
       const flattened = indexPattern.flattenHit(row);
 
       if (flattened) {
-        onFilter(columnId, flattened[columnId], FILTER_OPERATOR.IS);
+        onFilter(field, FILTER_OPERATOR.IS, flattened[field]);
       }
     };
 
@@ -61,26 +61,30 @@ export const filterIsNotAction =
     rows: any[],
     pageSize: number,
     onFilter: (
-      columndId: string,
-      value: any,
+      field: string,
       operation: FILTER_OPERATOR.IS | FILTER_OPERATOR.IS_NOT,
+      value?: any,
     ) => void,
   ) =>
-  ({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) => {
+  ({
+    rowIndex,
+    columnId: field,
+    Component,
+  }: EuiDataGridColumnCellActionProps) => {
     const filterOutValueText = i18n.translate('discover.filterOutValue', {
       defaultMessage: 'Filter out value',
     });
     const filterOutValueLabel = i18n.translate('discover.filterOutValueLabel', {
       defaultMessage: 'Filter out value: {value}',
-      values: { value: columnId },
+      values: { value: field },
     });
 
     const handleClick = () => {
       const row = rows[rowIndex % pageSize];
       const flattened = indexPattern.flattenHit(row);
 
       if (flattened) {
-        onFilter(columnId, flattened[columnId], FILTER_OPERATOR.IS_NOT);
+        onFilter(field, FILTER_OPERATOR.IS_NOT, flattened[field]);
       }
     };
 
@@ -103,9 +107,9 @@ export function cellFilterActions(
   rows: any[],
   pageSize: number,
   onFilter: (
-    columndId: string,
-    value: any,
+    field: string,
     operation: FILTER_OPERATOR.IS | FILTER_OPERATOR.IS_NOT,
+    value: any,
   ) => void,
 ) {
   if (!field.filterable) return;

plugins/main/public/components/common/data-grid/data-grid-service.ts

@@ -192,19 +192,15 @@ export const exportSearchToCSV = async (
   }
 };
 
-const onFilterCellActions = (
+export const onFilterCellActions = (
   indexPatternId: string,
   filters: Filter[],
   setFilters: (filters: Filter[]) => void,
 ) => {
-  return (
-    columndId: string,
-    value: any,
-    operation: FILTER_OPERATOR.IS | FILTER_OPERATOR.IS_NOT,
-  ) => {
+  return (field: string, operation: FILTER_OPERATOR, value?: any) => {
     const newFilter = PatternDataSourceFilterManager.createFilter(
       operation,
-      columndId,
+      field,
       value,
       indexPatternId,
     );

plugins/main/public/components/common/doc-viewer/doc-viewer.scss

@@ -0,0 +1,79 @@
+.osdDocViewerTable {
+  pre,
+  .osdDocViewer__value {
+    display: inline-block;
+    word-break: break-all;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    color: $euiColorFullShade;
+    vertical-align: top;
+    padding-top: 2px;
+  }
+
+  .osdDocViewer__field {
+    padding-top: 8px;
+  }
+
+  .dscFieldName {
+    color: $euiColorDarkShade;
+  }
+
+  td,
+  pre {
+    font-family: $euiCodeFontFamily;
+  }
+
+  tr {
+    position: relative;
+  }
+
+  tr:first-child td {
+    border-top-color: transparent;
+  }
+
+  tr:hover {
+    .osdDocViewer__buttons {
+      display: flex;
+      position: absolute;
+      background: #fff;
+      background: linear-gradient(
+        180deg,
+        rgb(255, 255, 255) 0%,
+        rgb(255, 255, 255) 80%,
+        rgba(0, 0, 0, 0) 100%
+      );
+      right: 0;
+      top: 0;
+      transform: translateY(1px);
+
+      .osdDocViewer__actionButton {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.osdDocViewer__buttons,
+.osdDocViewer__field {
+  white-space: nowrap;
+}
+
+.osdDocViewer__buttons {
+  display: none;
+}
+
+.osdDocViewer__field {
+  width: 160px;
+}
+
+.osdDocViewer__actionButton {
+  opacity: 0;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.osdDocViewer__warning {
+  margin-right: $euiSizeS;
+}

plugins/main/public/components/common/doc-viewer/doc-viewer.tsx

@@ -4,6 +4,13 @@ import { escapeRegExp } from 'lodash';
 import { i18n } from '@osd/i18n';
 import { FieldIcon } from '../../../../../../src/plugins/opensearch_dashboards_react/public';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { FILTER_OPERATOR } from '../data-source';
+import { DocViewTableRowBtnFilterAdd } from './table_row_btn_filter_add';
+import { DocViewTableRowBtnFilterRemove } from './table_row_btn_filter_remove';
+import { DocViewTableRowBtnFilterExists } from './table_row_btn_filter_exists';
+import './doc-viewer.scss';
+import { onFilterCellActions } from '../data-grid';
+import { Filter } from '../../../../../../src/plugins/data/common';
 
 const COLLAPSE_LINE_LENGTH = 350;
 const DOT_PREFIX_RE = /(.).+?\./g;
@@ -15,6 +22,8 @@ export type tDocViewerProps = {
   mapping: any;
   indexPattern: any;
   docJSON: any;
+  filters: Filter[];
+  setFilters: (filters: Filter[]) => void;
 };
 
 /**
@@ -82,8 +91,25 @@ const DocViewer = (props: tDocViewerProps) => {
   const [fieldRowOpen, setFieldRowOpen] = useState(
     {} as Record<string, boolean>,
   );
-  const { flattened, formatted, mapping, indexPattern, renderFields, docJSON } =
-    props;
+  const {
+    flattened,
+    formatted,
+    mapping,
+    indexPattern,
+    renderFields,
+    docJSON,
+    filters,
+    setFilters,
+  } = props;
+
+  const onFilter = (field: string, operation: FILTER_OPERATOR, value?: any) => {
+    const _onFilter = onFilterCellActions(
+      indexPattern?.id,
+      filters,
+      setFilters,
+    );
+    _onFilter(field, operation, value);
+  };
 
   return (
     <>
@@ -147,6 +173,35 @@ const DocViewer = (props: tDocViewerProps) => {
                       </EuiFlexGroup>
                     </td>
                     <td>
+                      <div className='osdDocViewer__buttons'>
+                        <DocViewTableRowBtnFilterAdd
+                          disabled={!fieldMapping || !fieldMapping.filterable}
+                          onClick={() =>
+                            onFilter(
+                              field,
+                              FILTER_OPERATOR.IS,
+                              flattened[field],
+                            )
+                          }
+                        />
+                        <DocViewTableRowBtnFilterRemove
+                          disabled={!fieldMapping || !fieldMapping.filterable}
+                          onClick={() =>
+                            onFilter(
+                              field,
+                              FILTER_OPERATOR.IS_NOT,
+                              flattened[field],
+                            )
+                          }
+                        />
+                        <DocViewTableRowBtnFilterExists
+                          disabled={!fieldMapping || !fieldMapping.filterable}
+                          onClick={() =>
+                            onFilter(field, FILTER_OPERATOR.EXISTS)
+                          }
+                          scripted={fieldMapping && fieldMapping.scripted}
+                        />
+                      </div>
                       {renderFields &&
                       renderFields?.find(
                         (field: string) => field?.id === displayName,

plugins/main/public/components/common/doc-viewer/table_row_btn_filter_add.tsx

@@ -0,0 +1,75 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { FormattedMessage } from '@osd/i18n/react';
+import { EuiToolTip, EuiSmallButtonIcon } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+
+export interface Props {
+  onClick: () => void;
+  disabled: boolean;
+}
+
+export function DocViewTableRowBtnFilterAdd({
+  onClick,
+  disabled = false,
+}: Props) {
+  const tooltipContent = disabled ? (
+    <FormattedMessage
+      id='discover.docViews.table.unindexedFieldsCanNotBeSearchedTooltip'
+      defaultMessage='Unindexed fields can not be searched'
+    />
+  ) : (
+    <FormattedMessage
+      id='discover.docViews.table.filterForValueButtonTooltip'
+      defaultMessage='Filter for value'
+    />
+  );
+
+  return (
+    <EuiToolTip content={tooltipContent}>
+      <EuiSmallButtonIcon
+        aria-label={i18n.translate(
+          'discover.docViews.table.filterForValueButtonAriaLabel',
+          {
+            defaultMessage: 'Filter for value',
+          },
+        )}
+        className='osdDocViewer__actionButton'
+        data-test-subj='addInclusiveFilterButton'
+        disabled={disabled}
+        onClick={onClick}
+        iconType={'magnifyWithPlus'}
+        iconSize={'s'}
+      />
+    </EuiToolTip>
+  );
+}