> ## 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.

# Overview Components API

> React components for dashboards and statistics displays

The Overview components provide dashboard views, statistics displays, and module interfaces for visualizing Wazuh data.

## Overview

Main overview dashboard component with module navigation.

**Location:** `plugins/main/public/components/overview/overview.tsx:31`

### Usage

```typescript theme={null}
import React from 'react';
import { Overview } from '../components/overview/overview';

function App() {
  return <Overview />;
}
```

The Overview component is a routed component that handles:

* Welcome screen display
* Module dashboards (Security Events, FIM, Vulnerabilities, etc.)
* Agent selection and filtering
* Query state management

### Query Parameters

The component responds to URL query parameters:

**tab** `string`

Active module tab

**Possible values:**

* `"welcome"` - Welcome dashboard
* `"general"` - Security events
* `"fim"` - File integrity monitoring
* `"vulnerability"` - Vulnerability detection
* `"mitre"` - MITRE ATT\&CK
* `"virustotal"` - VirusTotal integration
* `"osquery"` - Osquery
* `"docker"` - Docker monitoring
* And more module-specific tabs

**tabView** `string` (default: dashboard)

View mode for the selected tab

**Possible values:**

* `"dashboard"` - Dashboard view
* `"events"` - Events table view
* `"panels"` - Custom panels view

**agentId** `string`

Filter data by specific agent ID

### Example URLs

```
# Welcome dashboard
/app/wazuh#/overview?tab=welcome

# Security events for specific agent
/app/wazuh#/overview?tab=general&agentId=001

# FIM events view
/app/wazuh#/overview?tab=fim&tabView=events
```

## Stats

Statistics summary component for the overview dashboard.

**Location:** `plugins/main/public/controllers/overview/components/stats.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 { Stats } from '../controllers/overview/components/stats';
import { WzRequest } from '../react-services';

function OverviewStats() {
  const [agentData, setAgentData] = useState(null);
  
  useEffect(() => {
    const fetchStats = async () => {
      const response = await WzRequest.apiReq(
        'GET',
        '/agents/summary/status',
        {}
      );
      setAgentData(response.data.data.connection);
    };
    fetchStats();
  }, []);
  
  return agentData ? <Stats agentData={agentData} /> : null;
}
```

## OverviewWelcome

Welcome screen component with module cards and quick actions.

**Location:** `plugins/main/public/components/common/welcome/overview-welcome.tsx`

### Props

**agentData** `object`

Agent summary statistics

### Usage

```typescript theme={null}
import React from 'react';
import { OverviewWelcome } from '../components/common/welcome/overview-welcome';

function WelcomeDashboard({ agentStats }) {
  return <OverviewWelcome agentData={agentStats} />;
}
```

The component displays:

* Agent status summary cards
* Module navigation cards
* Quick action buttons
* Getting started information

## MainModule

Module dashboard container with filters and visualizations.

**Location:** `plugins/main/public/components/common/modules/main.tsx`

### Props

**section** `string` *required*

Module identifier (e.g., "general", "fim", "vulnerability")

**agentId** `string`

Filter by specific agent

**tabView** `string` (default: dashboard)

Active view mode

### Usage

```typescript theme={null}
import React from 'react';
import { MainModule } from '../components/common/modules/main';

function SecurityEventsModule({ agentId }) {
  return (
    <MainModule
      section="general"
      agentId={agentId}
      tabView="dashboard"
    />
  );
}
```

## WzCurrentOverviewSectionWrapper

Wrapper component that manages the current overview section context.

**Location:** `plugins/main/public/components/common/modules/overview-current-section-wrapper.tsx`

### Props

**section** `string` *required*

Current module section

**children** `React.ReactNode` *required*

Child components

### Usage

```typescript theme={null}
import React from 'react';
import { WzCurrentOverviewSectionWrapper } from '../components/common/modules/overview-current-section-wrapper';

function ModuleView({ section }) {
  return (
    <WzCurrentOverviewSectionWrapper section={section}>
      {/* Module content */}
    </WzCurrentOverviewSectionWrapper>
  );
}
```

## Module-Specific Components

### Security Events

#### EventsTable

Displays security events in a data table.

**Props:**

**filters** `object`

Search filters to apply

**agentId** `string`

Filter by agent ID

**timeRange** `object`

Time range for events

**properties**

**from** `string`

Start time (ISO 8601)

**to** `string`

End time (ISO 8601)

**Usage:**

```typescript theme={null}
import React from 'react';
import { EventsTable } from '../components/overview/events-table';

function SecurityEvents() {
  const timeRange = {
    from: 'now-24h',
    to: 'now'
  };
  
  return (
    <EventsTable
      filters={{}}
      timeRange={timeRange}
    />
  );
}
```

### Vulnerability Detection

#### VulnerabilityDashboard

Displays vulnerability detection statistics and findings.

**Props:**

**agentId** `string`

Filter vulnerabilities by agent

**Usage:**

```typescript theme={null}
import React from 'react';
import { VulnerabilityDashboard } from '../components/overview/vulnerability';

function VulnModule({ agentId }) {
  return <VulnerabilityDashboard agentId={agentId} />;
}
```

### File Integrity Monitoring

#### FIMDashboard

Displays FIM events and statistics.

**Props:**

**agentId** `string`

Filter FIM events by agent

**Usage:**

```typescript theme={null}
import React from 'react';
import { FIMDashboard } from '../components/overview/fim';

function FIMModule({ agentId }) {
  return <FIMDashboard agentId={agentId} />;
}
```

## Chart Components

### WzVisualize

Wrapper for rendering Wazuh visualizations.

**Location:** `plugins/main/public/components/common/charts/wz-visualize.tsx`

#### Props

**visualizationId** `string` *required*

Saved object ID of the visualization

**filters** `object`

Additional filters to apply

**timeRange** `object`

Time range for the visualization

#### Usage

```typescript theme={null}
import React from 'react';
import { WzVisualize } from '../components/common/charts/wz-visualize';

function CustomChart() {
  return (
    <WzVisualize
      visualizationId="Wazuh-App-Overview-General-Alerts"
      filters={{}}
      timeRange={{ from: 'now-24h', to: 'now' }}
    />
  );
}
```

## Dashboard Components

### DashboardByRenderer

Renders OpenSearch Dashboards dashboards within Wazuh.

**Location:** `plugins/main/public/components/common/dashboards/dashboard-by-renderer.tsx`

#### Props

**dashboardId** `string` *required*

Dashboard saved object ID

**filters** `object`

Dashboard filters

**query** `object`

Search query

#### Usage

```typescript theme={null}
import React from 'react';
import { DashboardByRenderer } from '../components/common/dashboards/dashboard-by-renderer';

function EmbeddedDashboard() {
  return (
    <DashboardByRenderer
      dashboardId="Wazuh-App-Overview-General"
      filters={[]}
    />
  );
}
```

## Complete Example

Full overview module implementation:

```typescript theme={null}
import React, { useEffect, useState } from 'react';
import {
  EuiPage,
  EuiPageBody,
  EuiPageContent,
  EuiFlexGroup,
  EuiFlexItem,
  EuiPanel,
  EuiSpacer,
} from '@elastic/eui';
import { Stats } from '../controllers/overview/components/stats';
import { OverviewWelcome } from '../components/common/welcome/overview-welcome';
import { MainModule } from '../components/common/modules/main';
import { WzCurrentOverviewSectionWrapper } from '../components/common/modules/overview-current-section-wrapper';
import { WzRequest } from '../react-services';
import { useRouterSearch } from '../components/common/hooks';

function CustomOverview() {
  const [agentData, setAgentData] = useState(null);
  const { tab = 'welcome', tabView = 'dashboard', agentId } = useRouterSearch();
  
  useEffect(() => {
    const fetchAgentStats = async () => {
      try {
        const response = await WzRequest.apiReq(
          'GET',
          '/agents/summary/status',
          {}
        );
        setAgentData(response.data.data.connection);
      } catch (error) {
        console.error('Failed to fetch agent stats:', error);
      }
    };
    
    if (tab === 'welcome') {
      fetchAgentStats();
    }
  }, [tab]);
  
  const renderContent = () => {
    if (tab === 'welcome') {
      return (
        <>
          {agentData && (
            <>
              <Stats agentData={agentData} />
              <EuiSpacer size="l" />
            </>
          )}
          <OverviewWelcome agentData={agentData} />
        </>
      );
    }
    
    return (
      <WzCurrentOverviewSectionWrapper section={tab}>
        <MainModule
          section={tab}
          agentId={agentId}
          tabView={tabView}
        />
      </WzCurrentOverviewSectionWrapper>
    );
  };
  
  return (
    <EuiPage>
      <EuiPageBody>
        <EuiPageContent>
          {renderContent()}
        </EuiPageContent>
      </EuiPageBody>
    </EuiPage>
  );
}

export default CustomOverview;
```

## Available Modules

The Overview component supports these modules:

> **Security Events**
>
> General security events and alerts

> **FIM**
>
> File Integrity Monitoring

> **Vulnerabilities**
>
> Vulnerability detection findings

> **MITRE ATT\&CK**
>
> MITRE framework mapping

> **SCA**
>
> Security Configuration Assessment

> **PCI DSS**
>
> PCI DSS compliance

> **GDPR**
>
> GDPR compliance

> **TSC**
>
> TSC compliance

> **NIST**
>
> NIST framework

## Hooks

### useRouterSearch()

Hook to access URL query parameters.

**Returns:** Object with query parameters

```typescript theme={null}
import { useRouterSearch } from '../components/common/hooks';

function MyComponent() {
  const { tab, agentId, tabView } = useRouterSearch();
  
  // Use query params
}
```

### useAsyncAction()

Hook for managing async operations with loading and error states.

**Signature:**

```typescript theme={null}
function useAsyncAction<T>(
  action: () => Promise<T>,
  dependencies: any[]
): {
  run: () => Promise<void>;
  loading: boolean;
  error: Error | null;
  data: T | null;
}
```

**Usage:**

```typescript theme={null}
import { useAsyncAction } from '../components/common/hooks';

function DataLoader() {
  const action = useAsyncAction(async () => {
    const response = await WzRequest.apiReq('GET', '/agents', {});
    return response.data.data.affected_items;
  }, []);
  
  useEffect(() => {
    action.run();
  }, []);
  
  if (action.loading) return <div>Loading...</div>;
  if (action.error) return <div>Error: {action.error.message}</div>;
  
  return <div>Data: {JSON.stringify(action.data)}</div>;
}
```

## Best Practices

> **Use URL Parameters for State**
>
> Store dashboard state in URL parameters for bookmarkability:
>
> ```typescript theme={null}
> // Navigate to a module
> NavigationService.getInstance().navigate(
>   `/overview?tab=fim&agentId=001`
> );
> ```

> **Sync Query State**
>
> Keep search bar state synchronized with URL:
>
> ```typescript theme={null}
> import { syncQueryStateWithUrl } from 'data/public';
>
> useEffect(() => {
>   const { stop } = syncQueryStateWithUrl(
>     queryService.state$,
>     osdUrlStateStorage
>   );
>   return stop;
> }, []);
> ```

> **Handle Agent Selection**
>
> Update URL when agent selection changes:
>
> ```typescript theme={null}
> const handleAgentChange = (agentId: string) => {
>   NavigationService.getInstance().navigate(
>     `/overview?tab=${tab}&agentId=${agentId}`
>   );
> };
> ```

## Related Resources

> **[Agents Components](/api/components/agents.md)**
>
> Agent management components

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

> **[Dashboards](/guides/custom-dashboards.md)**
>
> Creating custom dashboards

> **[Modules](/concepts/security-modules.md)**
>
> Module development guide


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