Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace search bar on Agents #5452

Merged
merged 123 commits into from
Aug 11, 2023
Merged

Conversation

Desvelao
Copy link
Member

@Desvelao Desvelao commented May 17, 2023

Description

This pull request replaces the search bar and table component on Agents.

It depends on #5442

Additional changes:

  • Remove unused code

Issues Resolved

#4312

Evidence

image
image
image

Table - Agents
Suggestions:

field get distinct values searchable searchable term
dateAdd GET /agents?distinct=true&limit=30&select={field}&sort=+{field}&q={currentValue}
id GET /agents?distinct=true&limit=30&select={field}&sort=+{field}&q={currentValue}
ip GET /agents?distinct=true&limit=30&select={field}&sort=+{field}&q={currentValue}
group GET /agents?distinct=true&limit=30&select={field}&sort=+{field}&q={currentValue}
group_config_status GET /agents?distinct=true&limit=30&select={field}&sort=+{field}&q={currentValue}
laskKeepAlive GET /agents?distinct=true&limit=30&select={field}&sort=+{field}&q={currentValue}
manager GET /agents?distinct=true&limit=30&select={field}&sort=+{field}&q={currentValue}
name GET /agents?distinct=true&limit=30&select={field}&sort=+{field}&q={currentValue}
node_name GET /agents?distinct=true&limit=30&select={field}&sort=+{field}&q={currentValue}
os.name GET /agents?distinct=true&limit=30&select={field}&sort=+{field}&q={currentValue}
os.platform GET /agents?distinct=true&limit=30&select={field}&sort=+{field}&q={currentValue}
os.version GET /agents?distinct=true&limit=30&select={field}&sort=+{field}&q={currentValue}
status active,disconnected,pending,neved_connected
version GET /agents?distinct=true&limit=30&select={field}&sort=+{field}&q={currentValue}

Test

Use a Wazuh manager

Legend:
⚫: none
🟢: pass
🟡: warning
🔴: fail
⚪: not applicable

UI

Test Chrome Firefox Safari
Agents: For each suggested field, check the value suggestion display results or at least doesn't break
Agents: Using a value suggested should allow to run the search
Agents: Type a term and run the search should search in each displayed field
Agents: Type a simple field search and this should returns the expected results
Agents: Type a complex field search and this should returns the expected results
Agents: Clicking on the Refresh button should refresh the data
Agents: Clicking on the Export formatted button should refresh export the data to CSV
Agents: Enable or disable some visible fields, the table should render the visible fields
Agents: Enable or disable some visible fields, type a search term and check the query is searching in the visible fields
Agents: Clicking on the status KPI from the Status panel should add a filter to the search bar, the table should filters the data
Agents: Clicking on the status KPI from the Details panel should add a filter to the search bar, the table should filters the data
Modules directory: Clicking on the status KPI from should redirect to the Agents section adding a filter to the search bar, the table should filters the data

Details

⚫ Agents: For each suggested field, check the value suggestion display results or at least doesn't break

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Agents: Using a value suggested should allow to run the search

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Agents: Type a term and run the search should search in each displayed field

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Agents: Type a simple field search and this should returns the expected results

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Agents: Type a complex field search and this should returns the expected results

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Agents: Clicking on the Refresh button should refresh the data

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Agents: Clicking on the Export formatted button should refresh export the data to CSV

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Agents: Enable or disable some visible fields, the table should render the visible fields

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Agents: Enable or disable some visible fields, type a search term and check the query is searching in the visible fields

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Agents: Clicking on the status KPI from the Status panel should add a filter to the search bar, the table should filters the data

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Agents: Clicking on the status KPI from the Details panel should add a filter to the search bar, the table should filters the data

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Modules directory: Clicking on the status KPI from should redirect to the Agents section adding a filter to the search bar, the table should filters the data

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

Check List

  • All tests pass
    • yarn test:jest
  • New functionality includes testing.
  • New functionality has been documented.
  • Update CHANGELOG.md
  • Commits are signed per the DCO using --signoff

Desvelao and others added 30 commits February 16, 2023 12:50
Features:
- Supports multiple query languages
- Decouple the business logic of query languages of the search bar
  component
- Ability of query language to interact with the search bar

Query language implementations
- AQL: custom implementation of the Wazuh Query Language. Include
  suggestions.
- UIQL: simple implementation (as another example)
…ression used in the Wazuh manager API

- Change the implementation of AQL query language to use the regular
  expression decomposition defined in the Wazuh manager API
- Adapt the tests for the tokenizer and getting the suggestions
- Enchance documentation of search bar
- Add documentation of AQL query language
- Add more fields and values for the use example in Agents section
- Add description to the query language select input
…using the Search suggestion in AQL

- Fixes a problem hidding the suggestion popover when using the Search
  suggestion in AQL
- Fixes a problem of input text with undefined value
- Minor fixes
  - Remove `syntax` property of SearchBar component
  - Add disableFocusTrap property to the custom EuiSuggestInput component to be
    forwarded to the EuiInputPopover
  - Replace the inputRef by a reference instead of a state and pass as
    a parameter in the query language run function
  - Move the rebuiding of input text when using some suggestion that changes
    the input to be done when a related suggestion was clicked instead
    of any suggestion (exclude Search).
implemenation

- Add the ability to update the input of the search bar in the example
  implementation
- Enhance the component documentation
- (AQL) Add the fields and an open operator group when there is no input text
link of query language displayed in the popover
- AQL enhancements:
  - documentation:
    - Enhance some descriptions
    - Enhance input processing
    - Remove intermetiate interface of EuiSuggestItem
  - Remove the intermediate interface of EuiSuggestItem. Now it is
    managed in the internal of query language instead of be built by the
    suggestion handler
  - Display suggestions when the input text is empty
  - Add the unifiedQuery field to the query language output
  - Adapt tests

- Search Bar component:
  - Enhance documentation
- Remove UIQL
- Add HAQL query language that is a high-level implementation of AQL
  - Add the query language interface
  - Add tests for tokenizer, get suggestions and
    transformSpecificQLToUnifiedQL method
  - Add documentation about the language
    - Syntax
    - Options
    - Workflow
- Add tests to HAQL and AQL query languages
- Fix suggestions for HAQL when typing as first element a value entity.
  Now there are no suggestions because the field and operator_compare
  are missing.
- Enhance documentation of HAQL and AQL
- Removed unnecesary returns of suggestion handler in the example
  implementation of search bar on Agents section
- Rename query language HAQL to WQL
- Update tests
- Remove AQL usage from the implementation in the agents section
- Add more use cases to the test of WQL query language
- Replace some literals by constants in the WQL query language
  implementation
- WQL
  - add implicit query mode to WQL
  - enhance query language documentation
  - renamed transformUnifiedQuery to transformUQLToQL
  - now wraps the user input if this is defined and there a implicit
    query string
  - fix a problem with the value suggestions if there is a previous
    conjunction
    - add tests cases
  - update tests
- AQL
  - enhance query language documentation
  - renamed transformUnifiedQuery to transformUQLToQL
  - add warning about the query language implementation is not updated
    to the last changes in the search bar component
  - update tests

- Search Bar
  - renamed transformUnifiedQuery to transformUQLToQL
- Set a width for the syntax options popover
- Unify the description in the suggestions of WQL example implementation
- Update tests
- Fix minor bugs in the WQL example implementation in Agents
- WQL
  - Enhance documentation
  - Add partial and "expanded" input validation
  - Add tests
…feat/4312-poc-search-bar-component-multiple-query-language-api-query-language-implementation
Fix an error when the last token in the input was a value and used
a value suggestion whose label contains whitespaces, the value was
not wrapped with quotes.
…uery-language-api-query-language-implementation
…uery-language-api-query-language-implementation
…earch term fields changed

- Search bar:
  - Add a dependency to run the query language output
  - Adapt search bar documentation to the changes
- WQL
  - Create a new parameter called `options`
  - Moved the `implicitFilter` and `searchTerm` settings to `options`
  - Update tests
  - Update documentation
@Desvelao Desvelao requested a review from a team as a code owner August 9, 2023 09:41
@asteriscos asteriscos self-requested a review August 10, 2023 11:45
@asteriscos
Copy link
Member

asteriscos commented Aug 10, 2023

Test

Legend:
⚫: none
🟢: pass
🟡: warning
🔴: fail
⚪: not applicable

Test Chrome Firefox Safari
Agents: For each suggested field, check the value suggestion display results or at least doesn't break 🟢 🟢
Agents: Using a value suggested should allow to run the search 🟢 🟢
Agents: Type a term and run the search should search in each displayed field 🟢 🟢
Agents: Type a simple field search and this should returns the expected results 🟢 🟢
Agents: Type a complex field search and this should returns the expected results 🟢 🟢
Agents: Clicking on the Refresh button should refresh the data 🟢 🟢
Agents: Clicking on the Export formatted button should refresh export the data to CSV 🟢 🟢
Agents: Enable or disable some visible fields, the table should render the visible fields 🟢 🟢
Agents: Enable or disable some visible fields, type a search term and check the query is searching in the visible fields 🟢 🟢
Agents: Clicking on the status KPI from the Status panel should add a filter to the search bar, the table should filters the data 🟢 🟢
Agents: Clicking on the status KPI from the Details panel should add a filter to the search bar, the table should filters the data 🟢 🟢
Modules directory: Clicking on the status KPI from should redirect to the Agents section adding a filter to the search bar, the table should filters the data 🟢 🟢

Details

🟢 Agents: For each suggested field, check the value suggestion display results or at least doesn't break

Chrome - 🟢

image

Firefox - 🟢

image

Safari - ⚫

🟢 Agents: Using a value suggested should allow to run the search

Chrome - 🟢

image

Firefox - 🟢

image

Safari - ⚫

🟢 Agents: Type a term and run the search should search in each displayed field

Chrome - 🟢

image

Firefox - 🟢

image

Safari - ⚫

🟢 Agents: Type a simple field search and this should returns the expected results

Chrome - 🟢

image

Firefox - 🟢

image

Safari - ⚫

🟢 Agents: Type a complex field search and this should returns the expected results

Chrome - 🟢

image

Firefox - 🟢

image

Safari - ⚫

🟢 Agents: Clicking on the Refresh button should refresh the data

Chrome - 🟢

image

Firefox - 🟢

image

Safari - ⚫

🟢 Agents: Clicking on the Export formatted button should refresh export the data to CSV

Chrome - 🟢

image

Firefox - 🟢

image

Safari - ⚫

🟢 Agents: Enable or disable some visible fields, the table should render the visible fields

Chrome - 🟢

image

Firefox - 🟢

image

Safari - ⚫

🟢 Agents: Enable or disable some visible fields, type a search term and check the query is searching in the visible fields

Chrome - 🟢

image

Firefox - 🟢

image

Safari - ⚫

🟢 Agents: Clicking on the status KPI from the Status panel should add a filter to the search bar, the table should filters the data

Chrome - 🟢

image

Firefox - 🟢

image

Safari - ⚫

🟢 Agents: Clicking on the status KPI from the Details panel should add a filter to the search bar, the table should filters the data

Chrome - 🟢

image

Firefox - 🟢

image

Safari - ⚫

🟢 Modules directory: Clicking on the status KPI from should redirect to the Agents section adding a filter to the search bar, the table should filters the data

Chrome - 🟢

image

Firefox - 🟢

image

Safari - ⚫

@Tostti Tostti self-requested a review August 10, 2023 13:03
@Tostti
Copy link
Member

Tostti commented Aug 10, 2023

⚫: none
🟢: pass
🟡: warning
🔴: fail
⚪: not applicable

UI

Test Chrome Firefox Safari
Agents: For each suggested field, check the value suggestion display results or at least doesn't break 🟢 🟢
Agents: Using a value suggested should allow to run the search 🟢 🟢
Agents: Type a term and run the search should search in each displayed field 🟢 🟢
Agents: Type a simple field search and this should returns the expected results 🟢 🟢
Agents: Type a complex field search and this should returns the expected results 🟢 🟢
Agents: Clicking on the Refresh button should refresh the data 🟢 🟢
Agents: Clicking on the Export formatted button should refresh export the data to CSV 🟢 🟢
Agents: Enable or disable some visible fields, the table should render the visible fields 🟢 🟢
Agents: Enable or disable some visible fields, type a search term and check the query is searching in the visible fields 🟢 🟢
Agents: Clicking on the status KPI from the Status panel should add a filter to the search bar, the table should filters the data 🟢 🟢
Agents: Clicking on the status KPI from the Details panel should add a filter to the search bar, the table should filters the data 🟢 🟢
Modules directory: Clicking on the status KPI from should redirect to the Agents section adding a filter to the search bar, the table should filters the data 🟢 🟢

Details

🟢 Agents: For each suggested field, check the value suggestion display results or at least doesn't break

Chrome - 🟢
image
image
image
image
image
image
image
image
image
image
image
image
image
image

Firefox - 🟢
image
image
image
image
image
image
image
image
image
image
image
image
image
image

Safari - ⚫

🟢 Agents: Using a value suggested should allow to run the search

Chrome - 🟢
image
image
image
image
image
image
image
image
image
image
image
image

Firefox - 🟢
image
image
image
image
image
image
image
image
image
image
image
image

Safari - ⚫

🟢 Agents: Type a term and run the search should search in each displayed field

Chrome - 🟢
image

Firefox - 🟢
image

Safari - ⚫

🟢 Agents: Type a simple field search and this should returns the expected results

Chrome - 🟢
image

Firefox - 🟢
image

Safari - ⚫

🟢 Agents: Type a complex field search and this should returns the expected results

Chrome - 🟢
image

Firefox - 🟢
image

Safari - ⚫

🟢 Agents: Clicking on the Refresh button should refresh the data

Chrome - 🟢

Firefox - 🟢

Safari - ⚫

🟢 Agents: Clicking on the Export formatted button should refresh export the data to CSV

Chrome - 🟢
image

Firefox - 🟢
image

Safari - ⚫

🟢 Agents: Enable or disable some visible fields, the table should render the visible fields

Chrome - 🟢
image

Firefox - 🟢
image

Safari - ⚫

🟢 Agents: Enable or disable some visible fields, type a search term and check the query is searching in the visible fields

Chrome - 🟢
image

Firefox - 🟢
image

Safari - ⚫

🟢 Agents: Clicking on the status KPI from the Status panel should add a filter to the search bar, the table should filters the data

Chrome - 🟢
image

Firefox - 🟢
image

Safari - ⚫

🟢 Agents: Clicking on the status KPI from the Details panel should add a filter to the search bar, the table should filters the data

Chrome - 🟢
image

Firefox - 🟢
image

Safari - ⚫

🟢 Modules directory: Clicking on the status KPI from should redirect to the Agents section adding a filter to the search bar, the table should filters the data

Chrome - 🟢
image
image

Firefox - 🟢
image
image

Safari - ⚫

Tostti
Tostti previously approved these changes Aug 10, 2023
Copy link
Member

@Tostti Tostti left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TEST:✔️
CR:✔️

LGTM

Tostti
Tostti previously approved these changes Aug 10, 2023
asteriscos
asteriscos previously approved these changes Aug 10, 2023
@Desvelao Desvelao dismissed stale reviews from asteriscos and Tostti via fc7a56a August 11, 2023 13:58
@Desvelao Desvelao merged commit 0ecdcb0 into 4.6.0 Aug 11, 2023
2 checks passed
@Desvelao Desvelao deleted the feat/4312-search-bar-replace-agents branch August 11, 2023 14:00
@github-actions
Copy link
Contributor

Code coverage (Jest) % values
Statements 11.47% ( 3959 / 34491 )
Branches 7.57% ( 1775 / 23429 )
Functions 10.86% ( 896 / 8246 )
Lines 11.66% ( 3847 / 32982 )

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

New search bar component
4 participants