> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/wazuh/wazuh-dashboard-plugins/llms.txt
> Use this file to discover all available pages before exploring further.

# Agents Components API

> React components for agent management and display

The Agents components provide reusable UI elements for displaying agent information, status, and synchronization states.

## AgentStatus

Displays the current status of a Wazuh agent with visual indicators.

**Location:** `plugins/main/public/components/agents/agent-status.tsx:21`

### Props

**status** `TAgentStatus` *required*

Agent status value

**Possible values:**

* `"active"` - Agent is connected and reporting
* `"disconnected"` - Agent is not connected
* `"never_connected"` - Agent has never connected
* `"pending"` - Agent is pending registration

**agent** `Agent`

Complete agent object for detailed status information

**properties**

**id** `string`

Agent ID

**name** `string`

Agent name

**status** `string`

Status string

**status\_code** `number`

Numeric status code for detailed information

**children** `string`

Custom label to display instead of default status text

**style** `React.CSSProperties`

Custom styles to apply to the component

### Usage

```typescript theme={null}
import React from 'react';
import { AgentStatus } from '../components/agents/agent-status';

function AgentList({ agents }) {
  return (
    <div>
      {agents.map(agent => (
        <div key={agent.id}>
          <span>{agent.name}</span>
          <AgentStatus 
            status={agent.status} 
            agent={agent}
          />
        </div>
      ))}
    </div>
  );
}
```

### Custom Label

```typescript theme={null}
<AgentStatus 
  status="active" 
  agent={agent}
>
  Online
</AgentStatus>
```

### With Custom Styles

```typescript theme={null}
<AgentStatus 
  status="disconnected" 
  agent={agent}
  style={{ fontSize: '14px', fontWeight: 'bold' }}
/>
```

### Status Codes

The component displays detailed status information when an agent object is provided:

**0** `status`

**Active** - Agent is connected and sending events

**1** `status`

**Disconnected** - Agent lost connection to manager

**2** `status`

**Never connected** - Agent registered but never established connection

**3** `status`

**Pending** - Agent is awaiting approval

## AgentSynced

Displays the synchronization status of an agent.

**Location:** `plugins/main/public/components/agents/agent-synced.tsx`

### Props

**agent** `Agent` *required*

Agent object containing synchronization information

**properties**

**group\_config\_status** `string`

Configuration sync status: "synced" | "not synced"

**lastKeepAlive** `string`

Timestamp of last keep-alive

**showTitle** `boolean` (default: true)

Whether to show the "Synchronized" label

### Usage

```typescript theme={null}
import React from 'react';
import { AgentSynced } from '../components/agents/agent-synced';

function AgentDetails({ agent }) {
  return (
    <div>
      <h3>{agent.name}</h3>
      <AgentSynced agent={agent} />
    </div>
  );
}
```

### Without Title

```typescript theme={null}
<AgentSynced agent={agent} showTitle={false} />
```

## ColumnWithStatusIcon

Generic component for displaying text with a colored status icon.

**Location:** `plugins/main/public/components/agents/column-with-status-icon.tsx`

### Props

**text** `string` *required*

Text to display

**color** `string` *required*

Color of the status indicator

**Possible values:**

* `"success"` - Green indicator
* `"danger"` - Red indicator
* `"warning"` - Orange indicator
* `"subdued"` - Gray indicator
* Any valid EUI color

**tooltip** `string`

Tooltip text to show on hover

### Usage

```typescript theme={null}
import React from 'react';
import { ColumnWithStatusIcon } from '../components/agents/column-with-status-icon';

function CustomStatus({ status }) {
  const color = status === 'healthy' ? 'success' : 'danger';
  
  return (
    <ColumnWithStatusIcon
      text={status}
      color={color}
      tooltip={`System is ${status}`}
    />
  );
}
```

### In a Table

```typescript theme={null}
const columns = [
  {
    field: 'name',
    name: 'Name',
  },
  {
    field: 'status',
    name: 'Status',
    render: (status: string) => (
      <ColumnWithStatusIcon
        text={status}
        color={getStatusColor(status)}
      />
    ),
  },
];
```

## Agent Stats Components

Components for displaying agent statistics and summaries.

### AgentsSummary

Displays summary statistics for all agents.

**Location:** `plugins/main/public/components/agents/stats/agents-summary.tsx`

#### Props

**agentData** `object` *required*

Agent summary data

**properties**

**active** `number`

Count of active agents

**disconnected** `number`

Count of disconnected agents

**never\_connected** `number`

Count of agents that never connected

**pending** `number`

Count of pending agents

**total** `number`

Total agent count

#### Usage

```typescript theme={null}
import React, { useEffect, useState } from 'react';
import { WzRequest } from '../../react-services';

function DashboardStats() {
  const [agentData, setAgentData] = useState(null);
  
  useEffect(() => {
    const fetchStats = async () => {
      const { data } = await WzRequest.apiReq(
        'GET',
        '/agents/summary/status',
        {}
      );
      setAgentData(data.data.connection);
    };
    fetchStats();
  }, []);
  
  if (!agentData) return <div>Loading...</div>;
  
  return <AgentsSummary agentData={agentData} />;
}
```

## Agent Prompts

Dialog components for agent management actions.

### UpgradeAgentPrompt

Prompt for upgrading agents to a new version.

**Location:** `plugins/main/public/components/agents/prompts/upgrade-agent-prompt.tsx`

#### Props

**agents** `Agent[]` *required*

Array of agents to upgrade

**onClose** `() =\> void` *required*

Callback when the prompt is closed

**onSuccess** `() =\> void`

Callback when upgrade succeeds

#### Usage

```typescript theme={null}
import React, { useState } from 'react';
import { UpgradeAgentPrompt } from '../components/agents/prompts/upgrade-agent-prompt';
import { EuiButton } from '@elastic/eui';

function AgentActions({ selectedAgents }) {
  const [showUpgrade, setShowUpgrade] = useState(false);
  
  return (
    <>
      <EuiButton onClick={() => setShowUpgrade(true)}>
        Upgrade Agents
      </EuiButton>
      
      {showUpgrade && (
        <UpgradeAgentPrompt
          agents={selectedAgents}
          onClose={() => setShowUpgrade(false)}
          onSuccess={() => {
            setShowUpgrade(false);
            // Refresh agent list
          }}
        />
      )}
    </>
  );
}
```

## Syscollector Components

Components for displaying system inventory data from agents.

### SyscollectorInventory

Displays hardware, packages, and system information for an agent.

**Location:** `plugins/main/public/components/agents/syscollector/`

#### Props

**agent** `Agent` *required*

Agent to display inventory for

**section** `string`

Specific inventory section to display:

* `"hardware"` - Hardware information
* `"packages"` - Installed packages
* `"processes"` - Running processes
* `"ports"` - Open ports
* `"network"` - Network interfaces

#### Usage

```typescript theme={null}
import React from 'react';
import { SyscollectorInventory } from '../components/agents/syscollector';

function AgentInventory({ agent }) {
  return (
    <div>
      <h2>Agent Inventory</h2>
      <SyscollectorInventory 
        agent={agent} 
        section="hardware"
      />
    </div>
  );
}
```

## Type Definitions

### TAgentStatus

Agent status type definition.

```typescript theme={null}
export type TAgentStatus = 
  | 'active'
  | 'disconnected'
  | 'never_connected'
  | 'pending';
```

### Agent

Agent object interface.

```typescript theme={null}
export interface Agent {
  id: string;
  name: string;
  ip?: string;
  status: TAgentStatus;
  status_code?: number;
  group?: string[];
  group_config_status?: 'synced' | 'not synced';
  os?: {
    name?: string;
    platform?: string;
    version?: string;
  };
  version?: string;
  dateAdd?: string;
  lastKeepAlive?: string;
  manager?: string;
  node_name?: string;
}
```

## Utilities

### Agent Status Helpers

**Location:** `plugins/main/common/services/wz_agent_status.ts`

#### agentStatusLabelByAgentStatus()

Get human-readable label for agent status.

```typescript theme={null}
import { agentStatusLabelByAgentStatus } from '../../../common/services/wz_agent_status';

const label = agentStatusLabelByAgentStatus('active');
// => "Active"
```

#### agentStatusColorByAgentStatus()

Get color code for agent status.

```typescript theme={null}
import { agentStatusColorByAgentStatus } from '../../../common/services/wz_agent_status';

const color = agentStatusColorByAgentStatus('active');
// => "success"
```

## Complete Example

Full example of an agent management interface:

```typescript theme={null}
import React, { useEffect, useState } from 'react';
import {
  EuiPanel,
  EuiFlexGroup,
  EuiFlexItem,
  EuiBasicTable,
  EuiButton,
} from '@elastic/eui';
import { AgentStatus } from '../components/agents/agent-status';
import { AgentSynced } from '../components/agents/agent-synced';
import { AgentsSummary } from '../components/agents/stats/agents-summary';
import { WzRequest } from '../react-services';

function AgentManagement() {
  const [agents, setAgents] = useState([]);
  const [summary, setSummary] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    const fetchData = async () => {
      try {
        // Fetch agents
        const agentsResponse = await WzRequest.apiReq(
          'GET',
          '/agents',
          { params: { limit: 500 } }
        );
        setAgents(agentsResponse.data.data.affected_items);
        
        // Fetch summary
        const summaryResponse = await WzRequest.apiReq(
          'GET',
          '/agents/summary/status',
          {}
        );
        setSummary(summaryResponse.data.data.connection);
      } catch (error) {
        console.error('Failed to fetch agents:', error);
      } finally {
        setLoading(false);
      }
    };
    
    fetchData();
  }, []);
  
  const columns = [
    {
      field: 'id',
      name: 'ID',
      width: '75px',
    },
    {
      field: 'name',
      name: 'Name',
    },
    {
      field: 'ip',
      name: 'IP Address',
    },
    {
      field: 'status',
      name: 'Status',
      render: (status, agent) => (
        <AgentStatus status={status} agent={agent} />
      ),
    },
    {
      field: 'group_config_status',
      name: 'Sync',
      render: (_, agent) => (
        <AgentSynced agent={agent} showTitle={false} />
      ),
    },
    {
      field: 'version',
      name: 'Version',
    },
  ];
  
  return (
    <div>
      {summary && (
        <EuiPanel>
          <AgentsSummary agentData={summary} />
        </EuiPanel>
      )}
      
      <EuiPanel>
        <EuiBasicTable
          items={agents}
          columns={columns}
          loading={loading}
        />
      </EuiPanel>
    </div>
  );
}

export default AgentManagement;
```

## Best Practices

> **Always Provide Agent Objects**
>
> When possible, pass the complete agent object to components for richer status information:
>
> ```typescript theme={null}
> // Good
> <AgentStatus status={agent.status} agent={agent} />
>
> // Less informative
> <AgentStatus status={agent.status} />
> ```

> **Handle Loading States**
>
> Show loading indicators while fetching agent data:
>
> ```typescript theme={null}
> {loading ? (
>   <EuiLoadingSpinner size="xl" />
> ) : (
>   <AgentsSummary agentData={summary} />
> )}
> ```

> **Refresh Data Periodically**
>
> Agent status changes frequently. Implement auto-refresh:
>
> ```typescript theme={null}
> useEffect(() => {
>   const interval = setInterval(fetchAgents, 30000);
>   return () => clearInterval(interval);
> }, []);
> ```

## Related Resources

> **[Overview Components](/api/components/overview.md)**
>
> Dashboard and statistics components

> **[Main Plugin API](/api/main-plugin.md)**
>
> Core plugin functionality

> **[Agent Management](/agents/overview.md)**
>
> Agent management guide

> **[API Console](/api/console.md)**
>
> Test agent API endpoints


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.