Redesign inventory, stats and configuration page to use tabs

CHANGELOG.md

@@ -25,6 +25,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Changed the warning icon in events view to a info icon [#7057](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7057)
 - Changed feature container margins to ensure consistent separation and uniform design. [#7034](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7034)
 - Changed the initial width to the default columns on each selected field [#7059](https://github.com/wazuh/wazuh-dashboard-plugins/issues/7059)
+- Changed inventory, stats and configuration page to use tabs [#7089](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7089)
 
 ### Fixed
 

docker/imposter/wazuh-config.yml

@@ -1,6 +1,6 @@
 ---
 plugin: openapi
-specFile: https://raw.githubusercontent.com/wazuh/wazuh/master/api/api/spec/spec.yaml
+specFile: https://raw.githubusercontent.com/wazuh/wazuh/4.10.0/api/api/spec/spec.yaml
 system:
   stores:
     # this store is preloaded from file

plugins/main/common/services/wz_agent_status.ts

@@ -1,14 +1,27 @@
-import { UI_COLOR_AGENT_STATUS, UI_LABEL_NAME_AGENT_STATUS, API_NAME_AGENT_STATUS } from '../constants';
+import {
+  UI_COLOR_AGENT_STATUS,
+  UI_LABEL_NAME_AGENT_STATUS,
+  API_NAME_AGENT_STATUS,
+} from '../constants';
 
-type TAgentStatus = typeof API_NAME_AGENT_STATUS[keyof typeof API_NAME_AGENT_STATUS];
+export type TAgentStatus =
+  (typeof API_NAME_AGENT_STATUS)[keyof typeof API_NAME_AGENT_STATUS];
 
-type TAgentStatusColor = typeof UI_COLOR_AGENT_STATUS[keyof typeof UI_COLOR_AGENT_STATUS];
-type TAgentStatusLabel = typeof UI_LABEL_NAME_AGENT_STATUS[keyof typeof UI_LABEL_NAME_AGENT_STATUS];
+type TAgentStatusColor =
+  (typeof UI_COLOR_AGENT_STATUS)[keyof typeof UI_COLOR_AGENT_STATUS];
+type TAgentStatusLabel =
+  (typeof UI_LABEL_NAME_AGENT_STATUS)[keyof typeof UI_LABEL_NAME_AGENT_STATUS];
 
-export function agentStatusColorByAgentStatus(status: TAgentStatus): TAgentStatusColor{
-    return UI_COLOR_AGENT_STATUS[status] || UI_COLOR_AGENT_STATUS.default;
+export function agentStatusColorByAgentStatus(
+  status: TAgentStatus,
+): TAgentStatusColor {
+  return UI_COLOR_AGENT_STATUS[status] || UI_COLOR_AGENT_STATUS.default;
 }
 
-export function agentStatusLabelByAgentStatus(status: TAgentStatus): TAgentStatusLabel{
-    return UI_LABEL_NAME_AGENT_STATUS[status] || UI_LABEL_NAME_AGENT_STATUS.default;
-}
+export function agentStatusLabelByAgentStatus(
+  status: TAgentStatus,
+): TAgentStatusLabel {
+  return (
+    UI_LABEL_NAME_AGENT_STATUS[status] || UI_LABEL_NAME_AGENT_STATUS.default
+  );
+}

plugins/main/public/app-router.tsx

@@ -21,6 +21,7 @@ import { Settings } from './components/settings';
 import { WzSecurity } from './components/security';
 import $ from 'jquery';
 import NavigationService from './react-services/navigation-service';
+import { SECTIONS } from './sections';
 
 export function Application(props) {
   const dispatch = useDispatch();
@@ -66,33 +67,41 @@ export function Application(props) {
       <WzAgentSelectorWrapper />
       <WzUpdatesNotification />
       <Switch>
-        <Route path={'/health-check'} exact render={HealthCheck}></Route>
         <Route
-          path={'/agents-preview/deploy'}
+          path={`/${SECTIONS.HEALTH_CHECK}`}
+          exact
+          render={HealthCheck}
+        ></Route>
+        <Route
+          path={`/${SECTIONS.AGENTS_PREVIEW}/deploy`}
           exact
           render={RegisterAgent}
         ></Route>
-        <Route path={'/agents'} exact render={AgentView}></Route>
+        <Route path={`/${SECTIONS.AGENTS}`} exact render={AgentView}></Route>
         <Route
-          path={'/agents-preview/'}
+          path={`/${SECTIONS.AGENTS_PREVIEW}/`}
           exact
           render={MainEndpointsSummary}
         ></Route>
-        <Route path={'/manager'} exact render={WzManagement}></Route>
         <Route
-          path={'/overview'}
+          path={`/${SECTIONS.MANAGER}`}
+          exact
+          render={WzManagement}
+        ></Route>
+        <Route
+          path={`/${SECTIONS.OVERVIEW}`}
           exact
           render={props => <Overview {...props} />}
         ></Route>
-        <Route path={'/settings'} exact render={Settings}></Route>
-        <Route path={'/security'} exact render={WzSecurity}></Route>
+        <Route path={`/${SECTIONS.SETTINGS}`} exact render={Settings}></Route>
+        <Route path={`/${SECTIONS.SECURITY}`} exact render={WzSecurity}></Route>
         <Route
-          path={'/wazuh-dev'}
+          path={`/${SECTIONS.WAZUH_DEV}`}
           exact
           render={props => <ToolsRouter {...props} />}
         ></Route>
         <Route
-          path={'/blank-screen'}
+          path={`/${SECTIONS.BLANK_SCREEN}`}
           exact
           render={props => <WzBlankScreen {...props} />}
         ></Route>

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

@@ -2,15 +2,29 @@ import React from 'react';
 import {
   agentStatusColorByAgentStatus,
   agentStatusLabelByAgentStatus,
+  TAgentStatus,
 } from '../../../common/services/wz_agent_status';
 import { ColumnWithStatusIcon } from './column-with-status-icon';
 import { EuiIconTip } from '@elastic/eui';
 import { AGENT_STATUS_CODE } from '../../../common/constants';
 import '../../styles/common.scss';
+import { Agent } from '../endpoints-summary/types';
 
-export const AgentStatus = ({ status, children = null, style = {}, agent }) => {
+interface AgentStatusProps {
+  status: TAgentStatus;
+  children?: string | null;
+  style?: React.CSSProperties;
+  agent?: Agent;
+}
+
+export const AgentStatus = ({
+  status,
+  children,
+  style = {},
+  agent,
+}: AgentStatusProps) => {
   const statusCodeAgent = AGENT_STATUS_CODE.find(
-    (status: StatusCodeAgent) => status.STATUS_CODE === agent?.status_code,
+    status => status.STATUS_CODE === agent?.status_code,
   );
   return (
     <div

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { render, act } from '@testing-library/react';
+import { AgentStats } from './agent-stats';
+import { queryDataTestAttr } from '../../../../test/public/query-attr';
+import { CSS } from '../../../../test/utils/CSS';
+
+jest.mock('../../../react-services', () => ({
+  WzRequest: {
+    apiReq: jest.fn().mockResolvedValue(undefined),
+  },
+}));
+
+describe('AgentStats', () => {
+  it('should not render agent info ribbon', async () => {
+    await act(async () => {
+      const { container } = render(<AgentStats agent={{ id: '000' }} />);
+
+      const agentInfoRibbon = container.querySelector(
+        queryDataTestAttr('agent-info'),
+      );
+      expect(agentInfoRibbon).toBeFalsy();
+    });
+  });
+
+  it('should render stats info ribbon', async () => {
+    await act(async () => {
+      const { container } = render(<AgentStats agent={{ id: '000' }} />);
+
+      expect(
+        container.querySelector(queryDataTestAttr('ribbon-item-status')),
+      ).toBeTruthy();
+
+      expect(
+        container.querySelector(
+          queryDataTestAttr('ribbon-item-buffer_enabled'),
+        ),
+      ).toBeTruthy();
+
+      expect(
+        container.querySelector(queryDataTestAttr('ribbon-item-msg_buffer')),
+      ).toBeTruthy();
+
+      expect(
+        container.querySelector(queryDataTestAttr('ribbon-item-msg_count')),
+      ).toBeTruthy();
+
+      expect(
+        container.querySelector(queryDataTestAttr('ribbon-item-msg_sent')),
+      ).toBeTruthy();
+
+      expect(
+        container.querySelector(queryDataTestAttr('ribbon-item-last_ack')),
+      ).toBeTruthy();
+
+      expect(
+        container.querySelector(
+          queryDataTestAttr('ribbon-item-last_keepalive'),
+        ),
+      ).toBeTruthy();
+
+      expect(
+        container.querySelectorAll(
+          queryDataTestAttr('ribbon-item-', CSS.Attribute.Substring),
+        ),
+      ).toHaveLength(7);
+    });
+  });
+});

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

@@ -47,6 +47,7 @@ import {
 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';
 
 const tableColumns = [
   {
@@ -142,7 +143,8 @@ export const MainAgentStats = compose(
   ),
 )(AgentStats);
 
-function AgentStats({ agent }) {
+export function AgentStats(props) {
+  const { agent } = props;
   const [loading, setLoading] = useState();
   const [dataStatLogcollector, setDataStatLogcollector] = useState({});
   const [dataStatAgent, setDataStatAgent] = useState();
@@ -186,33 +188,20 @@ function AgentStats({ agent }) {
   return (
     <EuiPage>
       <EuiPageBody>
-        <EuiFlexGroup>
-          <EuiFlexItem>
-            <EuiPanel paddingSize='m'>
-              <EuiFlexGroup>
-                {statsAgents.map(stat => (
-                  <EuiFlexItem key={`agent-stat-${stat.field}`} grow={false}>
-                    <EuiText>
-                      {stat.title}:{' '}
-                      {loading ? (
-                        <EuiLoadingSpinner size='s' />
-                      ) : (
-                        <strong>
-                          {dataStatAgent !== undefined
-                            ? stat.render
-                              ? stat.render(dataStatAgent[stat.field])
-                              : dataStatAgent?.[stat.field]
-                            : '-'}
-                        </strong>
-                      )}
-                    </EuiText>
-                  </EuiFlexItem>
-                ))}
-              </EuiFlexGroup>
-            </EuiPanel>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiSpacer />
+        <WzRibbon
+          items={statsAgents.map(stat => ({
+            key: stat.field,
+            label: stat.title,
+            isLoading: loading,
+            value:
+              dataStatAgent !== undefined
+                ? stat.render
+                  ? stat.render(dataStatAgent[stat.field])
+                  : dataStatAgent?.[stat.field]
+                : '-',
+          }))}
+        />
+        <EuiSpacer size='xxl' />
         <EuiFlexGroup>
           <EuiFlexItem>
             <AgentStatTable