Consistency in the non-core visualizations and agent status #4166

Desvelao · 2022-05-25T12:46:06Z

Description

This PR adds some enhancements in the consistency of non-core visualizations and agent status.

Changes

Consistency in custom donut visualizations:
Replaced the visualizations in Agents and Modules/SCA/Inventory by the VisualizationBasic component
Removed the Pie component
Consistency in agent status, labels, and colors:
Centralized the agent status, labels, and colors to constants.ts file
Replaced the hardcoded values with the centralized ones
Added the pending status to:
- Agents stats in Modules directory
- Status visualization in Agents section
- Details panel in Agents section
- Agents stats in Management/Status
Created a service to get the color and label depending on the agent
status. It is shared by the backend and frontend.
Created a component to display the agent status: AgentStatus.
It is adapted to the different use cases.
- Replaced the old rendering with the new one in some components. Removed unnecessary methods and layout.
Removed deprecated methods and files
- Rendering agent status stats when the monitoring job was disabled
  and the visualization of agent status evolution was in Modules/Security events. WzVisualize component.
  - Removed an API request to get the agent status data
Refactored the API request managing in:
- Modules/SCA/Inventory
- Agents
- Management/Status
Added a new property error to VisualizationBasic to render the
error message coming from error.message
Fixed an error when creating a visualization that didn't apply the
definitions in uiStateJSON property. This is due to a bug in Kibana 7.10.2
Fixed some typos

Screenshots

Agents
Modules/SCA
Modules directory
Management/Status
Agent selector
Group's agent

Test

Agents:
- Status visualization:
  - Click on the legend's labels adding a filter to the search bar
  - Include the Pending status
- Details panels:
  - Click on the agent status stat adding a filter to the search bar
  - Include the Pending status
- Evolution visualization:
  - status colors are equals to the other panels
- Search bar
  - status suggestion includes pending status
Agent selector
- status suggestion includes pending status
- Status colum displays the status indicator and the label.
- If there is a selected agent, it displays the status indicator and the agent name (id) as a label.
Management/Groups/
- Search bar:
  - status suggestion includes pending status
Modules directory
- Display the agent count by status including pending state
Management/Status
- Display the agent count by status including pending state
- Display the agent status using the labels.
- The agent count should display as expected when loading the first time or change the manager using the manager node selector for a cluster mode
Reviewing the files changed, access to the sections, and using an agent with status same of change, see that is working as expected.
- Modules/File integrity monitoring/Inventory
  - active: display the data
  - not active: display a prompt related to the agent status
- Modules/SCA/Inventory
  - never_connected: prompt with a message related to the agent status
  - not never_connected: display the data
- Agent/Stats:
  - active: display the data
  - not active: display a prompt related to the agent status
- Agent/Inventory
  - active: display the data
  - disconnected: display a prompt related to the agent status
  - never_connected: display a prompt related to the agent status
- Agent/Overview:
  - never_connected: display a prompt related to the agent status
  - no never_connected: display the data
- Agents
  - Table
    - not never_connected: not display the button to open the agent configuration
    - Status column is rendered with an indicator that depends on the agent status and a label without _ character
      - For window width < 1200, only display the indicator and no the status label
- Agent/Configuration
  - active: display the section
  - never_connected: display a prompt related to the agent status
- <Module> - Generate a report in PDF
  - not active: display a message with the current state of the agent.
The order of agent status are: active, disconnected, pending, never_connected

Closes #4077

…bels and colors - Consistency in custom donut visualizations: - Replaced the visualizations in `Agents` and `Modules/SCA/Inventory` by the `VisualizationBasic` component - Removed the `Pie` component - Consistency in agent status, labels, and colors: - Centralized the agent status, labels, and colors to constants.ts file - Replaced the hardcoded values with the centralized ones - Added the `pending` status to: - Agents stats in Modules directory - Status visualization in `Agents` section - Details panel in `Agents` section - Agents stats in Management/Status - Created a service to get the color and label depending on the agent status. It is shared by the backend and frontend. - Created a component to display the agent status: AgentStatus. It is adapted to the different use cases. - Replaced the old rendering with the new one in some components. Removed unnecessary methods and layout. - Removed deprecated methods and files - Rendering agent status stats when the monitoring job was disabled and the visualization of agent status evolution was in Modules/Security events. `WzVisualize` component. - Removed an API request to get the agent status data - Refactored the API request managing in: - `Modules/SCA/Inventory` - `Agents` - `Management/Status` - Added a new property `error` to `VisualizationBasic` to render the error message coming from `error.message` - Fixed an error when creating a visualization that didn't apply the definitions in `uiStateJSON` property. This is due to a bug in Kibana 7.10.2 - Fixed some typos

Mayons95 · 2022-05-26T17:15:45Z

Testing in progress

Mayons95 · 2022-05-27T12:46:33Z

Test OK

Add missing parentheses

AlexRuiz7 · 2022-06-01T11:55:15Z

Test

Agents:
- Status visualization:
  - Click on the legend's labels, adding a filter to the search bar
  - Include the Pending status
- Details panels:
  - Click on the agent status stat, adding a filter to the search bar
  - Include the Pending status
- Evolution visualization:
  - status colors are equals to the other panels
- Search bar
  - status suggestion includes pending status
Agent selector
- status suggestion includes pending status
- Status column displays the status indicator and the label.
- If there is a selected agent, it displays the status indicator and the agent name (ID) as a label.
Management/Groups/
- Search bar:
  - status suggestion includes pending status
Modules directory
- Display the agent count by status, including pending state
Management/Status
- Display the agent count by status, including pending state
- Display the agent status using the labels.
- The agent count should display as expected when loading the first time or change the manager using the manager node selector for a cluster mode
Reviewing the files changed, access to the sections, and using an agent with status same of change, see that is working as expected.
- Modules/File integrity monitoring/Inventory
  - active: display the data
  - not active: display a prompt related to the agent status
- Modules/SCA/Inventory
  - never_connected: prompt with a message related to the agent status
  - not never_connected: display the data
- Agent/Stats:
  - active: display the data
  - not active: display a prompt related to the agent status
- Agent/Inventory
  - active: display the data
  - disconnected: display a prompt related to the agent status
  - never_connected: display a prompt related to the agent status
- Agent/Overview:
  - never_connected: display a prompt related to the agent status
  - no never_connected: display the data
- Agents
  - Table
    - not never_connected: not display the button to open the agent configuration
    - Status column is rendered with an indicator that depends on the agent status and a label without _ character
      - For window width < 1200, only display the indicator and on the status label
- Agent/Configuration
  - active: display the section
  - never_connected: display a prompt related to the agent status
- <Module> - Generate a report in PDF
  - not active: display a message with the current state of the agent.
The order of agent status are: active, disconnected, pending, never_connected

AlexRuiz7

Test: ✔️
Code Review: ✔️*

*Left some feedback. Check the comments.

AlexRuiz7 · 2022-06-01T11:27:21Z

common/services/wz_agent_status.ts

@@ -0,0 +1,11 @@
+import { UI_COLOR_AGENT_STATUS, UI_LABEL_NAME_AGENT_STATUS } from '../constants';
+
+type AgentStatus = 'active' | 'disconected' | 'pending' | 'never_connected';


Duplicated values from API_NAME_AGENT_STATUS.

Couldn't it be used instead??

import { API_NAME_AGENT_STATUS } from '../constants'; type AgentStatus = API_NAME_AGENT_STATUS

Or even better, use enums: https://www.typescriptlang.org/docs/handbook/enums.html#string-enums

I will see if I can redefine this type to avoid the hardcoded values and use the constant.

AlexRuiz7 · 2022-06-01T14:40:04Z

public/components/agents/agent_status.tsx

+import React from 'react';
+import { EuiToolTip } from '@elastic/eui';
+import { agentStatusColorByAgentStatus, agentStatusLabelByAgentStatus } from '../../../common/services/wz_agent_status';
+
+export const AgentStatus = ({  status, children = null, labelProps = {}, style = {} }) => (
+	<span className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow" style={style}>
+		<EuiToolTip position="top" content={agentStatusLabelByAgentStatus(status).toLowerCase()}>
+			<span className="euiFlexItem euiFlexItem--flexGrowZero">
+				<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" className={`euiIcon euiIcon--medium`} style={{ color: agentStatusColorByAgentStatus(status) }} focusable="false" role="img" aria-hidden="true">
+					<circle cx="8" cy="8" r="4"></circle>
+				</svg>
+			</span>
+		</EuiToolTip>
+		<span className="euiFlexItem euiFlexItem--flexGrowZero" {...labelProps}>{children || agentStatusLabelByAgentStatus(status).toLowerCase()}</span>
+	</span>
+)


Run formatter

public/components/agents/agent_status.test.tsx

AlexRuiz7 · 2022-06-01T14:42:18Z

public/components/agents/sca/inventory.tsx


 export class Inventory extends Component {
  _isMount = false;
  constructor(props) {
    super(props);
    const { agent } = this.props;
-    this.state = { agent, items: [], itemIdToExpandedRowMap: {}, showMoreInfo: false, loading: false, filters: [], pageTableChecks: {pageIndex: 0} }
-    this.policies = [];
+    this.state = { agent, items: [], itemIdToExpandedRowMap: {}, showMoreInfo: false, loading: false, filters: [], pageTableChecks: {pageIndex: 0}, policies: [] }


Formatter here

public/controllers/management/components/management/status/status-stats.js

AlexRuiz7 · 2022-06-01T15:45:06Z

server/integration-files/visualizations/overview/overview-general.ts

@@ -96,7 +98,7 @@ export default [
        ],
      }),
      uiStateJSON: JSON.stringify({
-        vis: { colors: { never_connected: '#447EBC', active: '#E5AC0E' } },
+        vis: { colors: { active: UI_COLOR_AGENT_STATUS.active, disconnected: UI_COLOR_AGENT_STATUS.disconnected, pending: UI_COLOR_AGENT_STATUS.pending, never_connected: UI_COLOR_AGENT_STATUS.never_connected } },


AlexRuiz7 · 2022-06-01T15:45:38Z

server/integration-files/visualizations/overview/overview-office.ts

@@ -96,7 +98,7 @@ export default [
        ],
      }),
      uiStateJSON: JSON.stringify({
-        vis: { colors: { never_connected: '#447EBC', active: '#E5AC0E' } },
+        vis: { colors: { active: UI_COLOR_AGENT_STATUS.active, disconnected: UI_COLOR_AGENT_STATUS.disconnected, pending: UI_COLOR_AGENT_STATUS.pending, never_connected: UI_COLOR_AGENT_STATUS.never_connected } },


yenienserrano

Test: ✔️
CR: ✔️

…into feat/4077-consistency-charts-agent-status

github-actions · 2022-06-02T09:51:52Z

The backport to 4.3-7.16 failed:

The process '/usr/bin/git' failed with exit code 1

To backport manually, run these commands in your terminal:

# Fetch latest updates from GitHub
git fetch
# Create a new working tree
git worktree add .worktrees/backport-4.3-7.16 4.3-7.16
# Navigate to the new working tree
cd .worktrees/backport-4.3-7.16
# Create a new branch
git switch --create backport-4166-to-4.3-7.16
# Cherry-pick the merged commit of this pull request and resolve the conflicts
git cherry-pick -x --mainline 1 cacf7923c8ed33cc6397b6f1c28a3ee2ed3fe66b
# Push it to GitHub
git push --set-upstream origin backport-4166-to-4.3-7.16
# Go back to the original working tree
cd ../..
# Delete the working tree
git worktree remove .worktrees/backport-4.3-7.16

Then, create a pull request where the base branch is 4.3-7.16 and the compare/head branch is backport-4166-to-4.3-7.16.

github-actions · 2022-06-02T09:51:53Z

The backport to 4.3-1.2-wzd failed:

The process '/usr/bin/git' failed with exit code 1

To backport manually, run these commands in your terminal:

# Fetch latest updates from GitHub
git fetch
# Create a new working tree
git worktree add .worktrees/backport-4.3-1.2-wzd 4.3-1.2-wzd
# Navigate to the new working tree
cd .worktrees/backport-4.3-1.2-wzd
# Create a new branch
git switch --create backport-4166-to-4.3-1.2-wzd
# Cherry-pick the merged commit of this pull request and resolve the conflicts
git cherry-pick -x --mainline 1 cacf7923c8ed33cc6397b6f1c28a3ee2ed3fe66b
# Push it to GitHub
git push --set-upstream origin backport-4166-to-4.3-1.2-wzd
# Go back to the original working tree
cd ../..
# Delete the working tree
git worktree remove .worktrees/backport-4.3-1.2-wzd

Then, create a pull request where the base branch is 4.3-1.2-wzd and the compare/head branch is backport-4166-to-4.3-1.2-wzd.

github-actions · 2022-06-02T09:51:55Z

The backport to cloud/4.3-7.10 failed:

The process '/usr/bin/git' failed with exit code 1

To backport manually, run these commands in your terminal:

# Fetch latest updates from GitHub
git fetch
# Create a new working tree
git worktree add .worktrees/backport-cloud/4.3-7.10 cloud/4.3-7.10
# Navigate to the new working tree
cd .worktrees/backport-cloud/4.3-7.10
# Create a new branch
git switch --create backport-4166-to-cloud/4.3-7.10
# Cherry-pick the merged commit of this pull request and resolve the conflicts
git cherry-pick -x --mainline 1 cacf7923c8ed33cc6397b6f1c28a3ee2ed3fe66b
# Push it to GitHub
git push --set-upstream origin backport-4166-to-cloud/4.3-7.10
# Go back to the original working tree
cd ../..
# Delete the working tree
git worktree remove .worktrees/backport-cloud/4.3-7.10

Then, create a pull request where the base branch is cloud/4.3-7.10 and the compare/head branch is backport-4166-to-cloud/4.3-7.10.

github-actions · 2022-06-02T09:51:56Z

The backport to cloud/4.3-7.10-custom-agents-view failed:

The process '/usr/bin/git' failed with exit code 1

To backport manually, run these commands in your terminal:

# Fetch latest updates from GitHub
git fetch
# Create a new working tree
git worktree add .worktrees/backport-cloud/4.3-7.10-custom-agents-view cloud/4.3-7.10-custom-agents-view
# Navigate to the new working tree
cd .worktrees/backport-cloud/4.3-7.10-custom-agents-view
# Create a new branch
git switch --create backport-4166-to-cloud/4.3-7.10-custom-agents-view
# Cherry-pick the merged commit of this pull request and resolve the conflicts
git cherry-pick -x --mainline 1 cacf7923c8ed33cc6397b6f1c28a3ee2ed3fe66b
# Push it to GitHub
git push --set-upstream origin backport-4166-to-cloud/4.3-7.10-custom-agents-view
# Go back to the original working tree
cd ../..
# Delete the working tree
git worktree remove .worktrees/backport-cloud/4.3-7.10-custom-agents-view

Then, create a pull request where the base branch is cloud/4.3-7.10-custom-agents-view and the compare/head branch is backport-4166-to-cloud/4.3-7.10-custom-agents-view.

github-actions · 2022-06-02T10:02:45Z

Jest Test Coverage	%	values
Statements	4.09%	( 1489 / 36372 )
Branches	1.68%	( 473 / 28235 )
Functions	3.06%	( 272 / 8898 )
Lines	4.14%	( 1440 / 34790 )

Desvelao self-assigned this May 25, 2022

Desvelao added the type/enhancement Enhancement issue label May 25, 2022

Desvelao linked an issue May 25, 2022 that may be closed by this pull request

Improvement of agent charts #4077

Closed

Desvelao force-pushed the feat/4077-consistency-charts-agent-status branch from 0b68a75 to 7ab242e Compare May 25, 2022 12:54

changelog: Add PR entry

d9f7c3d

Desvelao mentioned this pull request May 25, 2022

Improvement of agent charts #4077

Closed

Mayons95 self-requested a review May 27, 2022 12:47

AlexRuiz7 added 2 commits May 30, 2022 10:20

Merge branch '4.3-7.10' into feat/4077-consistency-charts-agent-status

6bcd396

Update CHANGELOG.md

0e77fec

Add missing parentheses

AlexRuiz7 approved these changes Jun 1, 2022

View reviewed changes

yenienserrano approved these changes Jun 2, 2022

View reviewed changes

fix: replaced hardcoded values for a type related to the agent status

caa96b8

Desvelao added backport 4.3-7.16 labels Jun 2, 2022

Merge branch '4.3-7.10' of https://github.com/wazuh/wazuh-kibana-app …

9859513

…into feat/4077-consistency-charts-agent-status

Desvelao merged commit cacf792 into 4.3-7.10 Jun 2, 2022

Desvelao deleted the feat/4077-consistency-charts-agent-status branch June 2, 2022 09:51

Desvelao mentioned this pull request Jun 3, 2022

[BUG] Visualizations are not displayed cause to Types was not set error #4199

Closed

gdiazlo mentioned this pull request Jun 7, 2022

Release 4.3.4 RC1 - Wazuh UI Manual Testing #4223

Closed

snaow changed the title ~~[Enhancement] Consistency in the non-core visualizations and agent status~~ Consistency in the non-core visualizations and agent status Jun 8, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Consistency in the non-core visualizations and agent status #4166

Consistency in the non-core visualizations and agent status #4166

Desvelao commented May 25, 2022 •

edited

Loading

Mayons95 commented May 26, 2022

Mayons95 commented May 27, 2022 •

edited

Loading

AlexRuiz7 commented Jun 1, 2022 •

edited

Loading

AlexRuiz7 left a comment

AlexRuiz7 Jun 1, 2022

Desvelao Jun 2, 2022

AlexRuiz7 Jun 1, 2022

AlexRuiz7 Jun 1, 2022

AlexRuiz7 Jun 1, 2022

AlexRuiz7 Jun 1, 2022

yenienserrano left a comment

github-actions bot commented Jun 2, 2022

github-actions bot commented Jun 2, 2022

github-actions bot commented Jun 2, 2022

github-actions bot commented Jun 2, 2022

github-actions bot commented Jun 2, 2022

		@@ -0,0 +1,11 @@
		import { UI_COLOR_AGENT_STATUS, UI_LABEL_NAME_AGENT_STATUS } from '../constants';

		type AgentStatus = 'active' \| 'disconected' \| 'pending' \| 'never_connected';

Consistency in the non-core visualizations and agent status #4166

Consistency in the non-core visualizations and agent status #4166

Conversation

Desvelao commented May 25, 2022 • edited Loading

Description

Changes

Screenshots

Test

Mayons95 commented May 26, 2022

Mayons95 commented May 27, 2022 • edited Loading

AlexRuiz7 commented Jun 1, 2022 • edited Loading

Test

AlexRuiz7 left a comment

Choose a reason for hiding this comment

AlexRuiz7 Jun 1, 2022

Choose a reason for hiding this comment

Desvelao Jun 2, 2022

Choose a reason for hiding this comment

AlexRuiz7 Jun 1, 2022

Choose a reason for hiding this comment

AlexRuiz7 Jun 1, 2022

Choose a reason for hiding this comment

AlexRuiz7 Jun 1, 2022

Choose a reason for hiding this comment

AlexRuiz7 Jun 1, 2022

Choose a reason for hiding this comment

yenienserrano left a comment

Choose a reason for hiding this comment

github-actions bot commented Jun 2, 2022

github-actions bot commented Jun 2, 2022

github-actions bot commented Jun 2, 2022

github-actions bot commented Jun 2, 2022

github-actions bot commented Jun 2, 2022

Desvelao commented May 25, 2022 •

edited

Loading

Mayons95 commented May 27, 2022 •

edited

Loading

AlexRuiz7 commented Jun 1, 2022 •

edited

Loading