Overview Components API - Wazuh Dashboard Plugins

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

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:

string

Active module tabPossible 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

string

default:"dashboard"

View mode for the selected tabPossible values:

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

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

object

required

Agent summary data

Show properties

number

Count of active agents

number

Count of disconnected agents

number

Count of agents that never connected

number

Count of pending agents

number

Total agent count

Usage

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

object

Agent summary statistics

Usage

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

string

required

Module identifier (e.g., “general”, “fim”, “vulnerability”)

string

Filter by specific agent

string

default:"dashboard"

Active view mode

Usage

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

string

required

Current module section

React.ReactNode

required

Child components

Usage

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:

object

Search filters to apply

string

Filter by agent ID

object

Time range for events

Show properties

string

Start time (ISO 8601)

string

End time (ISO 8601)

Usage:

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:

string

Filter vulnerabilities by agent

Usage:

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:

string

Filter FIM events by agent

Usage:

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

string

required

Saved object ID of the visualization

object

Additional filters to apply

object

Time range for the visualization

Usage

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

string

required

Dashboard saved object ID

object

Dashboard filters

object

Search query

Usage

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:

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

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:

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

Usage:

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:

// Navigate to a module
NavigationService.getInstance().navigate(
  `/overview?tab=fim&agentId=001`
);

Sync Query State

Keep search bar state synchronized with URL:

import { syncQueryStateWithUrl } from 'data/public';

useEffect(() => {
  const { stop } = syncQueryStateWithUrl(
    queryService.state$,
    osdUrlStateStorage
  );
  return stop;
}, []);

Handle Agent Selection

Update URL when agent selection changes:

const handleAgentChange = (agentId: string) => {
  NavigationService.getInstance().navigate(
    `/overview?tab=${tab}&agentId=${agentId}`
  );
};

Agents Components

Agent management components

Main Plugin

Core plugin API

Dashboards

Creating custom dashboards

Modules

Module development guide

​Overview

​Usage

​Query Parameters

​Example URLs

​Stats

​Props

​Usage

​OverviewWelcome

​Props

​Usage

​MainModule

​Props

​Usage

​WzCurrentOverviewSectionWrapper

​Props

​Usage

​Module-Specific Components

​Security Events

​EventsTable

​Vulnerability Detection

​VulnerabilityDashboard

​File Integrity Monitoring

​FIMDashboard

​Chart Components

​WzVisualize

​Props

​Usage

​Dashboard Components

​DashboardByRenderer

​Props

​Usage

​Complete Example

​Available Modules

Security Events

FIM

Vulnerabilities

MITRE ATT&CK

SCA

PCI DSS

GDPR

TSC

NIST

​Hooks

​useRouterSearch()

​useAsyncAction()

​Best Practices

​Related Resources

Agents Components

Main Plugin

Dashboards

Modules

Overview

Usage

Query Parameters

Example URLs

Stats

Props

Usage

OverviewWelcome

Props

Usage

MainModule

Props

Usage

WzCurrentOverviewSectionWrapper

Props

Usage

Module-Specific Components

Security Events

EventsTable

Vulnerability Detection

VulnerabilityDashboard

File Integrity Monitoring

FIMDashboard

Chart Components

WzVisualize

Props

Usage

Dashboard Components

DashboardByRenderer

Props

Usage

Complete Example

Available Modules

Hooks

useRouterSearch()

useAsyncAction()

Best Practices

Related Resources