[Remove discover] Implement embeddable dashboard on Server Management / Cluster module

[asteriscos]

Description

We have to implement the embeddable dashboard on Server Management / Cluster and deprecate any use of kibana-integrations components.

[!WARNING]
The embeddable panel id must be unique including general and agents visualizations. Otherwise, the visualizations will not refresh when we pin an agent, because they are cached by id

[!WARNING]
https://github.com/wazuh/wazuh-dashboard-plugins/issues/6549 depends on this task

Current Cluster screens

**Screen on cluster mode**    

Tasks

• [x] Implement the embeddable dashboard on Server Management / Cluster
  • [x] Migrate visualizations to embeddable panels
  • [x] Add new searchbar
  • [x] Add conditionality to show the dashboard if there are results.
  • [x] Add loadings
  • [x] Add message that there are no results
  • [x] Keep the "The cluster is disabled" message when in Manager mode
  • [x] Change back button on Overview page (desirable)
  • [x] Change index pattern selection mechanism (Dependence: https://github.com/wazuh/wazuh-dashboard-plugins/issues/6434)
  • [x] Once the previous point have been applied, corroborate filter behavior with respect to hide alerts, allow agents and filter order (Implicit filters first, then pinned agent, if applicable, and then normal filters).
  • [x] Clean obsolete code
• [x] Check the following:
  • [x] Each visualization, if applicable, must have interaction so that it sets the date range of the searchbar when clicked and visualizations should refresh when a date range is selected in the search bar.
  • [x] If there are no results, the corresponding message must appear that there are no results and the visualizations should not be rendered.
  • [x] Check that the message "The cluster is disabled" appears when in the cluster is not enabled. _NOTE: To test this it is necessary to change the cluster configuration in the imposter by setting the enabled option to no in the docker/imposter/cluster/cluster_status.json file and restart the imposter._
  • [x] Check that the message "The cluster is not running" appears when in Manager mode
  • [x] Check filter behavior with respect to hide alerts and allow agents.
  • [x] Check the link to the list of agents on the Information card for both the name (Agents) and the value.
  • [x] Check that the corresponding information is displayed when you click on "View Overview" and that you can go back from that view.
  • [x] Check that when interacting with the Overview visualization (going to "View Overview") the corresponding filter is added.
  • [x] Check that the list of nodes is shown when you click on both Nodes and the value and that you can go back from that view.
  • [x] Check that fixed filters cannot be deleted or have the onClick functionality

Source task

• 6477

[jbiset]

Update 20/03/2024

The Server Management -> Cluster screen is different from the rest of the dashboards that are being migrated, since the sections of the screen are inserted with Angular through the management.html template. Therefore, we are analyzing migrating everything possible to React components without affecting other screens, preparing the context when replacing Angular. This is necessary not only for the replacement of the visualizations, but also for the replacement of the searchbar

Files involved:

• plugins/main/public/services/routes.js
• plugins/main/public/templates/management/management.html
• plugins/main/public/components/index.js
• plugins/main/public/components/management/cluster/cluster-visualization.js
• plugins/main/public/components/management/cluster/cluster-disabled.js

[jbiset]

Update 21/03/2024

Given the need to componentize the Cluster screen with React components. It was decided to modularize all parts of the Cluster screen in the management.html template and reduce it to a minimum. In this way, not only is any use of kibana-integrations components deprecated, but also partial progress is made with the elimination of Angular.

TO CONTINUE:

• Reduce everything related to the Cluster screen in management.html to a minimum. (Worked on this task)
• Migrate Cluster sections to React components
• Implement the embeddable dashboard on Server Management / Cluster

[jbiset]

Update 22/03/2024 - 25/03/2024 - 26/03/2024

Work was done on reducing to a minimum everything related to the Cluster screen in management.html.

MIGRATE CLUSTER MODULE TO REACT COMPONENT

BREADCRUMBS

```html

{{ mctrl.tabNames[mctrl.tab] }} / {{ mctrl.currentGroup.name }}

``` It does not affect Cluster as it is only rendered if `mctrl.tab !== 'monitoring' && mctrl.tab !== 'configuration'"`. However, the HOC is added `withGlobalBreadcrumb([{ text: cluster.breadcrumbLabel }])`

CLUSTER DISABLED MESSAGE WHEN NOT AUTHORIZED

```html {/* Cluster disabled or not running */}

``` Replaced with the HOC `withUserAuthorizationPrompt([ { action: 'cluster:status', resource: '*:*:*' }, ])`

CLUSTER DISABLED MESSAGE WHEN NOT ENABLED AND NOT RUNNING CLUSTER

```html {/* Cluster disabled or not running */}

``` It is replaced with the corresponding component and the necessary resources of the cluster controller are migrated.

DISCOVER SEARCH BAR SECTION

```html

{{loadingStatus}}

``` It is replaced by the new searchbar and ng-if is added to the management template so that it is not rendered in the tab monitoring (cluster)

CLUSTER MAIN SECTION

```html

Details  View Overview

IP address {{configuration.nodes[0] || '-'}}

Running {{ status || 'no' }}

Version {{version}}

Information

Nodes {{nodesCount}}

Agents {{agentsCount}}

``` The elements are migrated to the new ClusterOverview class component and the necessary resources of the Cluster controller

THE PLACE FROM WHICH CLUSTER OVERVIEW IS RENDERER IS CHANGED

Initially, the rendering was carried out through the template `management.html` with the following code: ```html ``` However, to avoid conflicts with other tasks and directly eliminate the use of the `management.html` template, the rendering is passed to the `management-main.js` component like other already migrated components, for example: statistics, logs, configuration, groups.

NODES DETAIL

There is a currently unused section that shows the details of a node. The functionality that selects the node does not currently exist, making this section obsolete: ```html

Node {{ currentNode.name }}

{{ currentNode.name }} alerts summary

Node information

IP {{currentNode.healthCheck.info.ip}}

Version {{currentNode.healthCheck.info.version}}

Type {{currentNode.healthCheck.info.type}}

Name {{currentNode.healthCheck.info.name}}

Active agents {{ currentNode.healthCheck.info.n_active_agents }}

Last files integrity synchronization

Last sync {{currentNode.healthCheck.status.last_sync_integrity.date_end_master}}

Duration {{currentNode.healthCheck.status.last_sync_integrity.duration}}

Total shared files {{currentNode.healthCheck.status.last_sync_integrity.total_files.shared}}

Total missing files {{currentNode.healthCheck.status.last_sync_integrity.total_files.missing}}

Total extra but valid files {{currentNode.healthCheck.status.last_sync_integrity.total_files.extra_valid}}

Total extra files {{currentNode.healthCheck.status.last_sync_integrity.total_files.extra}}

Last agents information synchronization

Last sync {{currentNode.healthCheck.status.last_sync_agentinfo.date_end_master}}

Duration {{currentNode.healthCheck.status.last_sync_agentinfo.duration}}

Total agent info {{currentNode.healthCheck.status.last_sync_agentinfo.total_agentinfo}}

Last agents groups synchronization

Last sync {{currentNode.healthCheck.status.last_sync_agentgroups.date_end_master}}

Duration {{currentNode.healthCheck.status.last_sync_agentgroups.duration}}

Total agent info {{currentNode.healthCheck.status.last_sync_agentgroups.total_agentgroups}}

``` For now, since this information view for a selected node has not existed since at least version 4.4.0, it is not migrated. But it is left to consideration to analyze this use case.

ADDED TIMELION VISUALIZATIONS SECTION WITH EMBEDDABLES

```html

``` The `ClusterTimelions` component is added to the `ClusterOverview`, using `DashboardByRenderer`. Replacing the functionality of the previous code.

CONFIGURATION SECTION

```html

Overview

Top 5 nodes There are no results for selected time range. Try another one.

Configuration

Disabled {{configuration.disabled}}

Hidden {{configuration.hidden}}

Name {{configuration.name}}

Node name {{configuration.node_name}}

Node type {{configuration.node_type}}

Bind address {{configuration.bind_addr}}

IP {{configuration.nodes[0] || '-'}}

Port {{configuration.port}}

``` Pass the configuration section to the ClusterOverview class component and then replace the corresponding tags with OpenSearch UI components

[jbiset]

Update 26/03/2024

• Migrated Timelions visualizations to embeddable panels
• Replace html tags from template management.html with OpenSearch UI components
• The structure is adjusted so that the order searchbar -> overview-cards -> Timelions visualizations is respected
• Add loadings
• Add message that there are no results

TO CONTINUE:

• Check the definition of Alerts by node summary so that it shows all nodes
• Complete View Overview rendering functionality

Current screen

[jbiset]

Update 27/03/2024

• View Overview rendering functionality is completed
• Fixed definition of Timelions visualizations
• Changed back button on Overview page
• Added cluster nodes table rendering
• Removed obsolete code from:
  • plugins/main/public/templates/management/management.html
  • plugins/main/public/controllers/management/index.js
  • plugins/main/public/components/index.js
• Final aesthetic changes are made

Current Server Management -> Cluster

Evidence.webm

The task is blocked until the dependencies are resolved

[jbiset]

Update 08/04/2024

• Changed index pattern selection mechanism.
• Corroborated filter behavior with respect to hide alerts, allow agents and filter order.
• Changed DiscoverNoResults and Loading-Spinner common components.

[jbiset]

Update 16/04/2024

• Fixed configuration_cards itemsList
• The code is improved according to suggestions to the PR
• Unnecessary code is removed
• Added condition so that the searchbar is not displayed on the node list screen

[jbiset]

Update 22/04/2024

• Discussed and resolved a visualization issue with Timeline visualizations when using SampleData.