Merge branch 'feat/4312-search-bar-replace-tablewzapi' of https://git…

…hub.com/wazuh/wazuh-kibana-app into feat/4312-search-bar-replace-explore-agent-modal
wazuh · May 19, 2023 · 4978e4f · 4978e4f
2 parents 5f86e1e + b18c570
commit 4978e4f
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 15 deletions.
diff --git a/public/components/common/tables/table-default.tsx b/public/components/common/tables/table-default.tsx
@@ -112,7 +112,7 @@ export function TableDefault({
   };
   return (
     <EuiBasicTable
-      columns={tableColumns}
+      columns={tableColumns.map(({show, ...rest}) => ({...rest}))}
       items={items}
       loading={loading}
       pagination={tablePagination}

diff --git a/public/components/common/tables/table-with-search-bar.tsx b/public/components/common/tables/table-with-search-bar.tsx
@@ -11,17 +11,79 @@
  */
 
 import React, { useState, useEffect, useRef, useMemo } from 'react';
-import { EuiBasicTable, EuiSpacer } from '@elastic/eui';
+import { EuiBasicTable, EuiBasicTableProps, EuiSpacer } from '@elastic/eui';
 import _ from 'lodash';
 import { UI_ERROR_SEVERITIES } from '../../../react-services/error-orchestrator/types';
 import { UI_LOGGER_LEVELS } from '../../../../common/constants';
 import { getErrorOrchestrator } from '../../../react-services/common-services';
-import { SearchBar } from '../../search-bar';
+import { SearchBar, SearchBarProps } from '../../search-bar';
 
-export function TableWithSearchBar({
+export interface ITableWithSearcHBarProps<T>{
+  /**
+   * Function to fetch the data
+   */
+  onSearch: (
+    endpoint: string,
+    filters: Record<string, any>,
+    pagination: {pageIndex: number, pageSize: number},
+    sorting: {sort: {field: string, direction: string}}
+  ) => Promise<{items: any[], totalItems: number}>
+  /**
+   * Properties for the search bar
+   */
+  searchBarProps?: Omit<SearchBarProps, 'defaultMode' | 'modes' | 'onSearch' | 'input'>
+  /**
+   * Columns for the table
+   */
+  tableColumns: EuiBasicTableProps<T>['columns'] & {
+    composeField?: string[],
+    searchable?: string
+    show?: boolean,
+  }
+  /**
+   * Table row properties for the table
+   */
+  rowProps?: EuiBasicTableProps<T>['rowProps']
+  /**
+   * Table page size options
+   */
+  tablePageSizeOptions?: number[]
+  /**
+   * Table initial sorting direction
+   */
+  tableInitialSortingDirection?: 'asc' | 'dsc'
+  /**
+   * Table initial sorting field
+   */
+  tableInitialSortingField?: string
+  /**
+   * Table properties
+   */
+  tableProps?: Omit<EuiBasicTableProps<T>, 'columns' | 'items' | 'loading' | 'pagination' | 'sorting' | 'onChange' | 'rowProps'>
+  /**
+   * Refresh the fetch of data
+   */
+  reload?: number
+  /**
+   * API endpoint
+   */
+  endpoint: string
+  /**
+   * Search bar properties for WQL
+   */
+  searchBarWQL?: any
+  /**
+   * Visible fields
+   */
+  selectedFields: string[]
+  /**
+   * API request filters
+   */
+  filters?: any
+}
+
+export function TableWithSearchBar<T>({
   onSearch,
-  searchBarSuggestions,
-  searchBarPlaceholder = 'Filter or search',
   searchBarProps = {},
   tableColumns,
   rowProps,
@@ -32,7 +94,7 @@ export function TableWithSearchBar({
   reload,
   endpoint,
   ...rest
-}) {
+}: ITableWithSearcHBarProps<T>) {
   const [loading, setLoading] = useState(false);
   const [items, setItems] = useState([]);
   const [totalItems, setTotalItems] = useState(0);
@@ -143,14 +205,14 @@ export function TableWithSearchBar({
   return (
     <>
       <SearchBar
-        defaultMode='wql'
         {...searchBarProps}
+        defaultMode='wql'
         modes={[
           {
             id: 'wql',
             options: searchBarWQLOptions,
-            ...( rest?.searchBarWQL?.suggestions ? {suggestions: rest?.searchBarWQL?.suggestions} : {}),
-            ...( rest?.searchBarWQL?.validate ? {suggestions: rest?.searchBarWQL?.validate} : {})
+            ...( rest?.searchBarWQL?.suggestions ? {suggestions: rest.searchBarWQL.suggestions} : {}),
+            ...( rest?.searchBarWQL?.validate ? {validate: rest.searchBarWQL.validate} : {})
           }
         ]}
         input={rest?.filters?.q || ''}
@@ -162,7 +224,7 @@ export function TableWithSearchBar({
       />
       <EuiSpacer size="s" />
       <EuiBasicTable
-        columns={tableColumns}
+        columns={tableColumns.map(({searchable, show, composeField, ...rest}) => ({...rest}))}
         items={items}
         loading={loading}
         pagination={tablePagination}

diff --git a/public/components/search-bar/index.tsx b/public/components/search-bar/index.tsx
@@ -14,12 +14,14 @@ import {
 import { EuiSuggest } from '../eui-suggest';
 import { searchBarQueryLanguages } from './query-language';
 import _ from 'lodash';
+import { ISearchBarModeWQL } from './query-language/wql';
 
-type SearchBarProps = {
+export interface SearchBarProps{
   defaultMode?: string;
-  modes: { id: string; [key: string]: any }[];
+  modes: ISearchBarModeWQL[];
   onChange?: (params: any) => void;
   onSearch: (params: any) => void;
+  buttonsRender?: () => React.ReactNode
   input?: string;
 };
 
@@ -71,7 +73,7 @@ export const SearchBar = ({
     setInput(event.target.value);
 
   // Handler when pressing a key
-  const onKeyPressHandler = event => {
+  const onKeyPressHandler = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter') {
       _onSearch(queryLanguageOutputRun.output);
     }
@@ -192,7 +194,7 @@ export const SearchBar = ({
                         text: searchBarQueryLanguages[id].label,
                       }))}
                       value={queryLanguage.id}
-                      onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                      onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
                         const queryLanguageID: string = event.target.value;
                         setQueryLanguage({
                           id: queryLanguageID,

diff --git a/public/components/search-bar/query-language/wql.tsx b/public/components/search-bar/query-language/wql.tsx
@@ -217,11 +217,21 @@ type OptionsQL = {
   options?: {
     implicitQuery?: OptionsQLImplicitQuery
     searchTermFields?: string[]
+    filterButtons: {id: string, label: string, input: string}[]
   }
   suggestions: {
     field: QLOptionSuggestionHandler;
     value: QLOptionSuggestionHandler;
   };
+  validate?: {
+    value?: {
+      [key: string]: (token: IToken, nearTokens: {field: string, operator: string}) => string | undefined
+    }
+  }
+};
+
+export interface ISearchBarModeWQL extends OptionsQL{
+  id: 'wql'
 };
 
 /**