Add filter for outdated agents

CHANGELOG.md

@@ -10,7 +10,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Added AngularJS dependencies [#6145](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6145)
 - Added a migration task to setup the configuration using a configuration file [#6337](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6337)
 - Added the ability to manage the API hosts from the Server APIs [#6337](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6337) [#6519](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6519)
-- Added edit agent groups and upgrade agents actions to Endpoints Summary [#6250](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6250) [#6476](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6476) [#6274](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6274) [#6501](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6501)
+- Improve fleet management by adding 'Edit Agent Groups' and 'Upgrade Agents' actions, as well as a filter to show only outdated agents [#6250](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6250) [#6476](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6476) [#6274](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6274) [#6501](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6501) [#6529](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6529)
 - Added propagation of updates from the table to dashboard visualizations in Endpoints summary [#6460](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6460)
 - Handle index pattern selector on new discover [#6499](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6499)
 

plugins/main/public/components/agents/syscollector/__snapshots__/inventory.test.tsx.snap

@@ -141,7 +141,7 @@ exports[`Inventory component A Apple agent should be well rendered. 1`] = `
                 class="euiFlexItem"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
                 >
                   <div
                     class="euiFlexItem euiFlexItem--flexGrowZero wz-flex-basis-auto"
@@ -544,7 +544,7 @@ exports[`Inventory component A Apple agent should be well rendered. 1`] = `
                 class="euiFlexItem"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
                 >
                   <div
                     class="euiFlexItem euiFlexItem--flexGrowZero wz-flex-basis-auto"
@@ -897,7 +897,7 @@ exports[`Inventory component A Apple agent should be well rendered. 1`] = `
                 class="euiFlexItem"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
                 >
                   <div
                     class="euiFlexItem euiFlexItem--flexGrowZero wz-flex-basis-auto"
@@ -1303,7 +1303,7 @@ exports[`Inventory component A Apple agent should be well rendered. 1`] = `
                 class="euiFlexItem"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
                 >
                   <div
                     class="euiFlexItem euiFlexItem--flexGrowZero wz-flex-basis-auto"
@@ -1711,7 +1711,7 @@ exports[`Inventory component A Apple agent should be well rendered. 1`] = `
                 class="euiFlexItem"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
                 >
                   <div
                     class="euiFlexItem euiFlexItem--flexGrowZero wz-flex-basis-auto"
@@ -2289,7 +2289,7 @@ exports[`Inventory component A Linux agent should be well rendered. 1`] = `
                 class="euiFlexItem"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
                 >
                   <div
                     class="euiFlexItem euiFlexItem--flexGrowZero wz-flex-basis-auto"
@@ -2691,7 +2691,7 @@ exports[`Inventory component A Linux agent should be well rendered. 1`] = `
                 class="euiFlexItem"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
                 >
                   <div
                     class="euiFlexItem euiFlexItem--flexGrowZero wz-flex-basis-auto"
@@ -3075,7 +3075,7 @@ exports[`Inventory component A Linux agent should be well rendered. 1`] = `
                 class="euiFlexItem"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
                 >
                   <div
                     class="euiFlexItem euiFlexItem--flexGrowZero wz-flex-basis-auto"
@@ -3480,7 +3480,7 @@ exports[`Inventory component A Linux agent should be well rendered. 1`] = `
                 class="euiFlexItem"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
                 >
                   <div
                     class="euiFlexItem euiFlexItem--flexGrowZero wz-flex-basis-auto"
@@ -3888,7 +3888,7 @@ exports[`Inventory component A Linux agent should be well rendered. 1`] = `
                 class="euiFlexItem"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
                 >
                   <div
                     class="euiFlexItem euiFlexItem--flexGrowZero wz-flex-basis-auto"
@@ -4587,7 +4587,7 @@ exports[`Inventory component A Windows agent should be well rendered. 1`] = `
                 class="euiFlexItem"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
                 >
                   <div
                     class="euiFlexItem euiFlexItem--flexGrowZero wz-flex-basis-auto"
@@ -4990,7 +4990,7 @@ exports[`Inventory component A Windows agent should be well rendered. 1`] = `
                 class="euiFlexItem"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
                 >
                   <div
                     class="euiFlexItem euiFlexItem--flexGrowZero wz-flex-basis-auto"
@@ -5367,7 +5367,7 @@ exports[`Inventory component A Windows agent should be well rendered. 1`] = `
                 class="euiFlexItem"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
                 >
                   <div
                     class="euiFlexItem euiFlexItem--flexGrowZero wz-flex-basis-auto"
@@ -5770,7 +5770,7 @@ exports[`Inventory component A Windows agent should be well rendered. 1`] = `
                 class="euiFlexItem"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
                 >
                   <div
                     class="euiFlexItem euiFlexItem--flexGrowZero wz-flex-basis-auto"
@@ -6080,7 +6080,7 @@ exports[`Inventory component A Windows agent should be well rendered. 1`] = `
                 class="euiFlexItem"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
                 >
                   <div
                     class="euiFlexItem euiFlexItem--flexGrowZero wz-flex-basis-auto"
@@ -6464,7 +6464,7 @@ exports[`Inventory component A Windows agent should be well rendered. 1`] = `
                 class="euiFlexItem"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
                 >
                   <div
                     class="euiFlexItem euiFlexItem--flexGrowZero wz-flex-basis-auto"

plugins/main/public/components/common/tables/__snapshots__/table-wz-api.test.tsx.snap

@@ -62,9 +62,10 @@ exports[`Table WZ API component renders correctly to match the snapshot 1`] = `
                   <EuiFlexGroup
                     alignItems="center"
                     responsive={false}
+                    wrap={true}
                   >
                     <div
-                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
                     >
                       <EuiFlexItem
                         className="wz-flex-basis-auto"

plugins/main/public/components/common/tables/table-wz-api.tsx

@@ -197,7 +197,7 @@ export function TableWzAPI({
     <>
       <EuiFlexGroup wrap alignItems='center' responsive={false}>
         <EuiFlexItem>
-          <EuiFlexGroup alignItems='center' responsive={false}>
+          <EuiFlexGroup wrap alignItems='center' responsive={false}>
             <EuiFlexItem className='wz-flex-basis-auto' grow={false}>
               {rest.title && (
                 <EuiTitle size='s'>

plugins/main/public/components/endpoints-summary/dashboard/components/outdated-agents-card.test.tsx

@@ -18,102 +18,102 @@ describe('OutdatedAgentsCard', () => {
       wrapper.update();
     });
   };
-
-  const mockLoading = false;
-  const mockDataNoOutdatedAgents = [];
-  const useServiceMockNoOutdatedAgent = jest.fn(() => ({data: mockDataNoOutdatedAgents, isLoading: mockLoading}));
-  const mockDataOutdatedAgents = [
-    {
-        version: "Wazuh v3.0.0",
-        id: "003",
-        name: "main_database"
-    },
-    {
-        version: "Wazuh v3.0.0",
-        id: "004",
-        name: "dmz002"
-    }
-];
-  const useServiceMockOutdatedAgent = jest.fn(() => ({data: mockDataOutdatedAgents, isLoading: mockLoading}));
-
-  const handleClick = jest.fn();
+  const filterByOutdatedAgent = jest.fn();
 
   it('renders with not outdated agents', async () => {
-    require('../../../common/hooks/use-service').useService = useServiceMockNoOutdatedAgent;  
-
     await act(async () => {
       const { getByTestId } = render(
-        <OutdatedAgentsCard onClick={handleClick} />
+        <OutdatedAgentsCard
+          isLoading={false}
+          outdatedAgents={0}
+          filterByOutdatedAgent={filterByOutdatedAgent}
+        />,
       );
 
-      const outdatedAgentsNumberElement = getByTestId('wazuh-endpoints-summary-outdated-agents-number')
-      expect(outdatedAgentsNumberElement).toHaveClass('euiTextColor euiTextColor--success');
-      expect(outdatedAgentsNumberElement.textContent).toBe(`${mockDataNoOutdatedAgents.length}`);
+      const outdatedAgentsNumberElement = getByTestId(
+        'wazuh-endpoints-summary-outdated-agents-number',
+      );
+      expect(outdatedAgentsNumberElement).toHaveClass(
+        'euiTextColor euiTextColor--success',
+      );
+      expect(outdatedAgentsNumberElement.textContent).toBe('0');
     });
   });
 
   it('renders with outdated agents', async () => {
-    require('../../../common/hooks/use-service').useService = useServiceMockOutdatedAgent;  
-
     await act(async () => {
       const { getByTestId } = render(
-        <OutdatedAgentsCard onClick={handleClick} />
+        <OutdatedAgentsCard
+          isLoading={false}
+          outdatedAgents={2}
+          filterByOutdatedAgent={filterByOutdatedAgent}
+        />,
       );
 
-      const outdatedAgentsNumberElement = getByTestId('wazuh-endpoints-summary-outdated-agents-number')
-      expect(outdatedAgentsNumberElement).toHaveClass('euiTextColor euiTextColor--warning');
-      expect(outdatedAgentsNumberElement.textContent).toBe(`${mockDataOutdatedAgents.length}`);
+      const outdatedAgentsNumberElement = getByTestId(
+        'wazuh-endpoints-summary-outdated-agents-number',
+      );
+      expect(outdatedAgentsNumberElement).toHaveClass(
+        'euiTextColor euiTextColor--warning',
+      );
+      expect(outdatedAgentsNumberElement.textContent).toBe('2');
     });
   });
 
   it('renders popover on click with outdated agents', async () => {
-    require('../../../common/hooks/use-service').useService = useServiceMockOutdatedAgent;
-
     const wrapper = await mount(
-      <OutdatedAgentsCard onClick={handleClick} />,
+      <OutdatedAgentsCard
+        isLoading={false}
+        outdatedAgents={2}
+        filterByOutdatedAgent={filterByOutdatedAgent}
+      />,
     );
 
     await awaitForMyComponent(wrapper);
-    
+
     expect(wrapper.find('.wazuh-outdated-agents-panel').exists()).toBeTruthy();
     expect(wrapper.find(EuiButtonEmpty).exists()).not.toBeTruthy();
-    
+
     wrapper.find('.wazuh-outdated-agents-panel').simulate('click');
     expect(wrapper.find(EuiButtonEmpty).exists()).toBeTruthy();
   });
 
   it('handles click with correct data', async () => {
-    require('../../../common/hooks/use-service').useService = useServiceMockOutdatedAgent;
-
     const wrapper = await mount(
-      <OutdatedAgentsCard onClick={handleClick} />,
+      <OutdatedAgentsCard
+        isLoading={false}
+        outdatedAgents={2}
+        filterByOutdatedAgent={filterByOutdatedAgent}
+      />,
     );
 
     await awaitForMyComponent(wrapper);
-    
+
     expect(wrapper.find('.wazuh-outdated-agents-panel').exists()).toBeTruthy();
     expect(wrapper.find(EuiButtonEmpty).exists()).not.toBeTruthy();
-    
+
     wrapper.find('.wazuh-outdated-agents-panel').simulate('click');
     expect(wrapper.find(EuiButtonEmpty).exists()).toBeTruthy();
 
     wrapper.find(EuiButtonEmpty).simulate('click');
-    expect(handleClick).toHaveBeenCalledTimes(1);
-    expect(handleClick).toHaveBeenCalledWith(mockDataOutdatedAgents);
+    expect(filterByOutdatedAgent).toHaveBeenCalledTimes(1);
+    expect(filterByOutdatedAgent).toHaveBeenCalledWith(true);
   });
 
   it('EuiButtonEmpty filter must be disabled when no data', async () => {
-    require('../../../common/hooks/use-service').useService = useServiceMockNoOutdatedAgent;
-
     const wrapper = await mount(
-      <OutdatedAgentsCard onClick={handleClick} />,
+      <OutdatedAgentsCard
+        isLoading={false}
+        outdatedAgents={0}
+        filterByOutdatedAgent={filterByOutdatedAgent}
+      />,
     );
 
     await awaitForMyComponent(wrapper);
-    
+
     expect(wrapper.find('.wazuh-outdated-agents-panel').exists()).toBeTruthy();
     expect(wrapper.find(EuiButtonEmpty).exists()).not.toBeTruthy();
-    
+
     wrapper.find('.wazuh-outdated-agents-panel').simulate('click');
     expect(wrapper.find(EuiButtonEmpty).exists()).toBeTruthy();
     expect(wrapper.find(EuiButtonEmpty).prop('isDisabled')).toBe(true);
@@ -123,20 +123,21 @@ describe('OutdatedAgentsCard', () => {
     const documentationLink = webDocumentationLink(
       'upgrade-guide/wazuh-agent/index.html',
     );
-    require('../../../common/hooks/use-service').useService = useServiceMockNoOutdatedAgent;
-
     const wrapper = await mount(
-      <OutdatedAgentsCard onClick={handleClick} />,
+      <OutdatedAgentsCard
+        isLoading={false}
+        outdatedAgents={0}
+        filterByOutdatedAgent={filterByOutdatedAgent}
+      />,
     );
 
     await awaitForMyComponent(wrapper);
-    
+
     expect(wrapper.find('.wazuh-outdated-agents-panel').exists()).toBeTruthy();
     expect(wrapper.find(EuiButtonEmpty).exists()).not.toBeTruthy();
-    
+
     wrapper.find('.wazuh-outdated-agents-panel').simulate('click');
     expect(wrapper.find(EuiLink).exists()).toBeTruthy();
     expect(wrapper.find(EuiLink).prop('href')).toBe(documentationLink);
   });
-
 });