Added pinned agent mechanic to inventory data, stats, and configuration for consistent functionality

CHANGELOG.md

@@ -14,6 +14,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Added ability to filter from File Integrity Monitoring registry inventory [#7119](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7119)
 - Added new field columns and ability to select the visible fields in the File Integrity Monitoring Files and Registry tables [#7119](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7119)
 - Added filter by value to document details fields [#7081](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7081)
+- Added pinned agent mechanic to inventory data, stats, and configuration for consistent functionality [#7135](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7135)
 
 ### Changed
 

plugins/main/public/components/agents/stats/agent-stats.test.tsx

@@ -1,15 +1,60 @@
 import React from 'react';
-import { render, act } from '@testing-library/react';
+import { render, act, RenderResult } from '@testing-library/react';
 import { AgentStats } from './agent-stats';
 import { queryDataTestAttr } from '../../../../test/public/query-attr';
 import { CSS } from '../../../../test/utils/CSS';
+import { WzRequest } from '../../../react-services';
+import { AgentStatTable } from './table';
+
+const agent000 = '000';
+const agent001 = '001';
+
+const apiReqMock = WzRequest.apiReq as jest.Mock;
+const AgentStatTableMock = AgentStatTable as jest.Mock;
 
 jest.mock('../../../react-services', () => ({
   WzRequest: {
     apiReq: jest.fn().mockResolvedValue(undefined),
   },
 }));
 
+jest.mock('redux', () => ({
+  compose: () => (Component: React.JSX.Element) => Component,
+  __esModule: true,
+}));
+
+jest.mock('../../common/hocs', () => ({
+  withGlobalBreadcrumb: () => () => <></>,
+  withGuard: () => () => <></>,
+  withUserAuthorizationPrompt: () => () => <></>,
+  withErrorBoundary: () => () => <></>,
+  __esModule: true,
+}));
+
+jest.mock('../prompts', () => ({
+  PromptNoActiveAgentWithoutSelect: () => <></>,
+  PromptAgentFeatureVersion: () => <></>,
+  __esModule: true,
+}));
+
+jest.mock('../../../utils/applications', () => ({
+  endpointsSummary: {
+    id: 'endpoints-summary',
+    breadcrumbLabel: 'Endpoints',
+  },
+}));
+
+jest.mock('../../../react-services/navigation-service', () => ({
+  getInstance: () => ({
+    getUrlForApp: jest.fn().mockReturnValue('http://url'),
+    __esModule: true,
+  }),
+}));
+
+jest.mock('./table', () => ({
+  AgentStatTable: jest.fn(() => <></>),
+}));
+
 describe('AgentStats', () => {
   it('should not render agent info ribbon', async () => {
     await act(async () => {
@@ -65,4 +110,152 @@ describe('AgentStats', () => {
       ).toHaveLength(7);
     });
   });
+
+  it('should call api with correct agent ids and endpoints when changing agent', async () => {
+    apiReqMock.mockClear();
+
+    let rerender: RenderResult['rerender'];
+
+    await act(async () => {
+      ({ rerender } = render(<AgentStats agent={{ id: agent000 }} />));
+    });
+
+    expect(apiReqMock).toHaveBeenCalledTimes(2);
+    expect(apiReqMock.mock.calls[0]).toEqual([
+      'GET',
+      `/agents/${agent000}/stats/logcollector`,
+      {},
+    ]);
+    expect(apiReqMock.mock.calls[1]).toEqual([
+      'GET',
+      `/agents/${agent000}/stats/agent`,
+      {},
+    ]);
+
+    apiReqMock.mockClear();
+
+    await act(async () => {
+      rerender(<AgentStats agent={{ id: agent001 }} />);
+    });
+
+    expect(apiReqMock).toHaveBeenCalledTimes(2);
+    expect(apiReqMock.mock.calls[0]).toEqual([
+      'GET',
+      `/agents/${agent001}/stats/logcollector`,
+      {},
+    ]);
+    expect(apiReqMock.mock.calls[1]).toEqual([
+      'GET',
+      `/agents/${agent001}/stats/agent`,
+      {},
+    ]);
+  });
+
+  it('should maintain column structure across multiple renders, either when changing agent or not', async () => {
+    AgentStatTableMock.mockClear();
+
+    const mockColumns = [
+      {
+        field: 'location',
+        name: 'Location',
+        sortable: true,
+      },
+      {
+        field: 'events',
+        name: 'Events',
+        sortable: true,
+      },
+      {
+        field: 'bytes',
+        name: 'Bytes',
+        sortable: true,
+      },
+    ];
+
+    let rerender: RenderResult['rerender'];
+
+    await act(async () => {
+      ({ rerender } = render(<AgentStats agent={{ id: agent000 }} />));
+    });
+
+    expect(AgentStatTableMock.mock.calls[0][0].columns).toEqual(mockColumns);
+    expect(AgentStatTableMock.mock.calls[1][0].columns).toEqual(mockColumns);
+
+    AgentStatTableMock.mockClear();
+
+    await act(async () => {
+      rerender(<AgentStats agent={{ id: agent001 }} />);
+    });
+
+    expect(AgentStatTableMock.mock.calls[0][0].columns).toEqual(mockColumns);
+    expect(AgentStatTableMock.mock.calls[1][0].columns).toEqual(mockColumns);
+  });
+
+  it('should apply correct titles after render and rerender, either when changing agent or not', async () => {
+    AgentStatTableMock.mockClear();
+
+    const mockDataStatLogcollectorTitle = 'Global';
+    const mockDataStatAgentTitle = 'Interval';
+
+    let rerender: RenderResult['rerender'];
+
+    await act(async () => {
+      ({ rerender } = render(<AgentStats agent={{ id: agent000 }} />));
+    });
+
+    expect(AgentStatTableMock.mock.calls[0][0].title).toEqual(
+      mockDataStatLogcollectorTitle,
+    );
+    expect(AgentStatTableMock.mock.calls[1][0].title).toEqual(
+      mockDataStatAgentTitle,
+    );
+
+    AgentStatTableMock.mockClear();
+
+    await act(async () => {
+      rerender(<AgentStats agent={{ id: agent001 }} />);
+    });
+
+    expect(AgentStatTableMock.mock.calls[0][0].title).toEqual(
+      mockDataStatLogcollectorTitle,
+    );
+    expect(AgentStatTableMock.mock.calls[1][0].title).toEqual(
+      mockDataStatAgentTitle,
+    );
+  });
+
+  it('should update export csv filename correctly when changing agent', async () => {
+    AgentStatTableMock.mockClear();
+
+    const mockExportCSVFilename = (
+      agent000: string,
+      suffix: 'global' | 'interval',
+    ) => `agent-stats-${agent000}-logcollector-${suffix}`;
+
+    let rerender: RenderResult['rerender'];
+
+    await act(async () => {
+      ({ rerender } = render(<AgentStats agent={{ id: agent000 }} />));
+    });
+
+    expect(AgentStatTableMock.mock.calls[0][0].exportCSVFilename).toEqual(
+      mockExportCSVFilename(agent000, 'global'),
+    );
+    expect(AgentStatTableMock.mock.calls[1][0].exportCSVFilename).toEqual(
+      mockExportCSVFilename(agent000, 'interval'),
+    );
+
+    AgentStatTableMock.mockClear();
+
+    await act(async () => {
+      rerender(<AgentStats agent={{ id: agent001 }} />);
+    });
+
+    expect(AgentStatTableMock.mock.calls[0][0].exportCSVFilename).toEqual(
+      mockExportCSVFilename(agent001, 'global'),
+    );
+    expect(AgentStatTableMock.mock.calls[1][0].exportCSVFilename).toEqual(
+      mockExportCSVFilename(agent001, 'interval'),
+    );
+  });
 });

plugins/main/public/components/agents/stats/agent-stats.tsx

@@ -13,14 +13,10 @@ import React, { useState, useEffect } from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiLoadingSpinner,
-  EuiPanel,
   EuiPage,
   EuiPageBody,
   EuiSpacer,
-  EuiText,
 } from '@elastic/eui';
-
 import {
   withGlobalBreadcrumb,
   withGuard,
@@ -48,6 +44,8 @@ import { getErrorOrchestrator } from '../../../react-services/common-services';
 import { endpointSummary } from '../../../utils/applications';
 import NavigationService from '../../../react-services/navigation-service';
 import WzRibbon from '../../common/ribbon/ribbon';
+import { Agent } from '../../endpoints-summary/types';
+import { SECTIONS } from '../../../sections';
 
 const tableColumns = [
   {
@@ -67,48 +65,51 @@ const tableColumns = [
   },
 ];
 
-const statsAgents: { title: string; field: string; render?: (value) => any }[] =
-  [
-    {
-      title: 'Status',
-      field: 'status',
-    },
-    {
-      title: 'Buffer',
-      field: 'buffer_enabled',
-      render: value => (value ? 'enabled' : 'disabled'),
-    },
-    {
-      title: 'Message buffer',
-      field: 'msg_buffer',
-    },
-    {
-      title: 'Messages count',
-      field: 'msg_count',
-    },
-    {
-      title: 'Messages sent',
-      field: 'msg_sent',
-    },
-    {
-      title: 'Last ack',
-      field: 'last_ack',
-      render: formatUIDate,
-    },
-    {
-      title: 'Last keep alive',
-      field: 'last_keepalive',
-      render: formatUIDate,
-    },
-  ];
+const statsAgents: {
+  title: string;
+  field: string;
+  render?: (value: any) => any;
+}[] = [
+  {
+    title: 'Status',
+    field: 'status',
+  },
+  {
+    title: 'Buffer',
+    field: 'buffer_enabled',
+    render: value => (value ? 'enabled' : 'disabled'),
+  },
+  {
+    title: 'Message buffer',
+    field: 'msg_buffer',
+  },
+  {
+    title: 'Messages count',
+    field: 'msg_count',
+  },
+  {
+    title: 'Messages sent',
+    field: 'msg_sent',
+  },
+  {
+    title: 'Last ack',
+    field: 'last_ack',
+    render: formatUIDate,
+  },
+  {
+    title: 'Last keep alive',
+    field: 'last_keepalive',
+    render: formatUIDate,
+  },
+];
 
 export const MainAgentStats = compose(
   withErrorBoundary,
   withGlobalBreadcrumb(({ agent }) => [
     {
       text: endpointSummary.breadcrumbLabel,
       href: NavigationService.getInstance().getUrlForApp(endpointSummary.id, {
-        path: `#/agents-preview`,
+        path: `#/${SECTIONS.AGENTS_PREVIEW}`,
       }),
     },
     { agent },
@@ -143,9 +144,13 @@ export const MainAgentStats = compose(
   ),
 )(AgentStats);
 
-export function AgentStats(props) {
+interface AgentStatsProps {
+  agent: Agent;
+}
+
+export function AgentStats(props: AgentStatsProps) {
   const { agent } = props;
-  const [loading, setLoading] = useState();
+  const [loading, setLoading] = useState(false);
   const [dataStatLogcollector, setDataStatLogcollector] = useState({});
   const [dataStatAgent, setDataStatAgent] = useState();
   useEffect(() => {
@@ -175,16 +180,16 @@ export function AgentStats(props) {
           severity: UI_ERROR_SEVERITIES.BUSINESS as UIErrorSeverity,
           error: {
             error: error,
-            message: error.message || error,
-            title: error.name || error,
+            message: (error as Error).message || (error as string),
+            title: (error as Error).name || (error as string),
           },
         };
         getErrorOrchestrator().handleError(options);
       } finally {
         setLoading(false);
       }
     })();
-  }, []);
+  }, [agent.id]);
   return (
     <EuiPage>
       <EuiPageBody>