Management Components API

The Management components provide interfaces for configuring and administering Wazuh settings, rules, decoders, and CDB lists.

Management Main

Main management interface component. Location: plugins/main/public/components/management/

Usage

import React from 'react';
import { Management } from '../components/management';

function App() {
  return <Management />;
}

The Management component provides access to:

Rules management
Decoders management
CDB lists management
Groups configuration
Configuration assessment

Management Sections

Rules Management

Interface for viewing and managing Wazuh detection rules.

RulesTable

Props:

object

Filters to apply to rules list

Show properties

number

Filter by rule level

string

Filter by rule group

string

Filter by PCI DSS requirement

Filter by GDPR requirement

string

Search term

(rule: Rule) => void

Callback when a rule is selected

Usage:

import React, { useState } from 'react';
import { RulesTable } from '../components/management/rules/rules-table';

function RulesManagement() {
  const [selectedRule, setSelectedRule] = useState(null);
  
  return (
    <RulesTable
      filters={{ level: 10 }}
      onSelectRule={setSelectedRule}
    />
  );
}

Rule Type

interface Rule {
  id: number;
  description: string;
  level: number;
  file: string;
  groups: string[];
  pci_dss?: string[];
  gdpr?: string[];
  nist_800_53?: string[];
  mitre?: {
    id: string[];
    tactic: string[];
    technique: string[];
  };
  details?: {
    if_sid?: string;
    regex?: string;
    match?: string;
    decoded_as?: string;
  };
}

Decoders Management

Interface for managing log decoders.

DecodersTable

Props:

object

Filters for decoders list

Show properties

string

Filter by decoder file

string

Search term

(decoder: Decoder) => void

Callback when a decoder is selected

Usage:

import React from 'react';
import { DecodersTable } from '../components/management/decoders/decoders-table';

function DecodersManagement() {
  return (
    <DecodersTable
      filters={{ file: 'local_decoder.xml' }}
      onSelectDecoder={(decoder) => {
        console.log('Selected:', decoder);
      }}
    />
  );
}

Decoder Type

interface Decoder {
  name: string;
  file: string;
  position: number;
  details: {
    program_name?: string;
    parent?: string;
    prematch?: string;
    regex?: string;
    order?: string;
  };
}

CDB Lists Management

Interface for managing Custom Database (CDB) lists.

CDBListsTable

Props:

(list: CDBList) => void

Callback when a list is selected

Usage:

import React from 'react';
import { CDBListsTable } from '../components/management/cdb-lists/cdb-lists-table';

function CDBManagement() {
  return (
    <CDBListsTable
      onSelectList={(list) => {
        // View list details
      }}
    />
  );
}

CDBList Type

interface CDBList {
  name: string;
  path: string;
  items: Array<{
    key: string;
    value: string;
  }>;
}

Configuration Management

ConfigurationEditor

Editor for Wazuh configuration files. Props:

Agent

Agent to configure (omit for manager configuration)

string

required

Configuration section to editPossible values:

"alerts" - Alert configuration
"syscheck" - FIM configuration
"rootcheck" - Rootkit detection
"vulnerability-detector" - Vulnerability scanning
"osquery" - Osquery configuration
"sca" - SCA configuration
And more sections

(config: object) => void

Callback when configuration is saved

Usage:

import React from 'react';
import { ConfigurationEditor } from '../components/management/configuration/configuration-editor';

function AgentConfiguration({ agent }) {
  const handleSave = async (config) => {
    try {
      // Save configuration via API
      await WzRequest.apiReq(
        'PUT',
        `/agents/${agent.id}/config`,
        { body: config }
      );
      console.log('Configuration saved');
    } catch (error) {
      console.error('Failed to save:', error);
    }
  };
  
  return (
    <ConfigurationEditor
      agent={agent}
      section="syscheck"
      onSave={handleSave}
    />
  );
}

Configuration Viewer

Read-only configuration display. Props:

object

required

Configuration object to display

string

Specific section to highlight

Usage:

import React, { useEffect, useState } from 'react';
import { ConfigurationViewer } from '../components/management/configuration/configuration-viewer';
import { WzRequest } from '../react-services';

function ViewConfiguration({ agentId }) {
  const [config, setConfig] = useState(null);
  
  useEffect(() => {
    const fetchConfig = async () => {
      const response = await WzRequest.apiReq(
        'GET',
        `/agents/${agentId}/config/syscheck`,
        {}
      );
      setConfig(response.data.data);
    };
    fetchConfig();
  }, [agentId]);
  
  return config ? (
    <ConfigurationViewer
      configuration={config}
      section="syscheck"
    />
  ) : null;
}

Groups Management

GroupsTable

Manage agent groups and assignments. Props:

(group: Group) => void

Callback when a group is selected

(group: Group) => void

Callback to edit group configuration

Usage:

import React, { useState } from 'react';
import { GroupsTable } from '../components/management/groups/groups-table';

function GroupsManagement() {
  const [selectedGroup, setSelectedGroup] = useState(null);
  
  return (
    <div>
      <GroupsTable
        onSelectGroup={setSelectedGroup}
        onEditGroup={(group) => {
          // Open edit modal
        }}
      />
      
      {selectedGroup && (
        <div>
          <h3>Group: {selectedGroup.name}</h3>
          {/* Group details */}
        </div>
      )}
    </div>
  );
}

Group Type

interface Group {
  name: string;
  count: number;
  mergedSum: string;
  configSum: string;
  agents?: Agent[];
}

Complete Example

Full management interface implementation:

import React, { useState } from 'react';
import {
  EuiPage,
  EuiPageBody,
  EuiPageContent,
  EuiTabbedContent,
  EuiSpacer,
} from '@elastic/eui';
import { RulesTable } from '../components/management/rules/rules-table';
import { DecodersTable } from '../components/management/decoders/decoders-table';
import { CDBListsTable } from '../components/management/cdb-lists/cdb-lists-table';
import { GroupsTable } from '../components/management/groups/groups-table';

function ManagementInterface() {
  const [selectedTab, setSelectedTab] = useState('rules');
  
  const tabs = [
    {
      id: 'rules',
      name: 'Rules',
      content: (
        <>
          <EuiSpacer />
          <RulesTable
            filters={{}}
            onSelectRule={(rule) => {
              console.log('Selected rule:', rule);
            }}
          />
        </>
      ),
    },
    {
      id: 'decoders',
      name: 'Decoders',
      content: (
        <>
          <EuiSpacer />
          <DecodersTable
            filters={{}}
            onSelectDecoder={(decoder) => {
              console.log('Selected decoder:', decoder);
            }}
          />
        </>
      ),
    },
    {
      id: 'cdb-lists',
      name: 'CDB Lists',
      content: (
        <>
          <EuiSpacer />
          <CDBListsTable
            onSelectList={(list) => {
              console.log('Selected list:', list);
            }}
          />
        </>
      ),
    },
    {
      id: 'groups',
      name: 'Groups',
      content: (
        <>
          <EuiSpacer />
          <GroupsTable
            onSelectGroup={(group) => {
              console.log('Selected group:', group);
            }}
            onEditGroup={(group) => {
              // Open edit modal
            }}
          />
        </>
      ),
    },
  ];
  
  return (
    <EuiPage>
      <EuiPageBody>
        <EuiPageContent>
          <EuiTabbedContent
            tabs={tabs}
            selectedTab={tabs.find(t => t.id === selectedTab)}
            onTabClick={(tab) => setSelectedTab(tab.id)}
          />
        </EuiPageContent>
      </EuiPageBody>
    </EuiPage>
  );
}

export default ManagementInterface;

Utility Functions

formatRule()

Format rule object for display.

import { formatRule } from '../components/management/rules/utils';

const formatted = formatRule(rule);
// Returns formatted rule with enhanced properties

validateConfiguration()

Validate configuration before saving.

import { validateConfiguration } from '../components/management/configuration/utils';

const errors = validateConfiguration(config, 'syscheck');
if (errors.length > 0) {
  console.error('Validation errors:', errors);
}

Best Practices

Validate Before Saving

Always validate configuration changes before submitting:

const handleSave = async (config) => {
  const errors = validateConfiguration(config, section);
  if (errors.length > 0) {
    showErrors(errors);
    return;
  }
  await saveConfiguration(config);
};

Show Confirmation Dialogs

Confirm destructive actions:

const handleDelete = async (rule) => {
  const confirmed = await confirm(
    `Delete rule ${rule.id}?`
  );
  if (confirmed) {
    await deleteRule(rule.id);
  }
};

Handle Permissions

Check user permissions before showing edit options:

const canEdit = await checkPermission('rules:update');

return (
  <RulesTable
    showEditButton={canEdit}
  />
);

Settings Components

Application settings interfaces

Main Plugin

Core plugin API

Rules

Rules management guide

Configuration

Configuration guide

Overview

Plugin APIs

Components

Management Main

Usage

Management Sections

Rules Management

RulesTable

Rule Type

Decoders Management

DecodersTable

Decoder Type

CDB Lists Management

CDBListsTable

CDBList Type

Configuration Management

ConfigurationEditor

Configuration Viewer

Groups Management

GroupsTable

Group Type

Complete Example

Utility Functions

formatRule()

validateConfiguration()

Best Practices

Settings Components

Main Plugin

Rules

Configuration

​Management Main

​Usage

​Management Sections

​Rules Management

​RulesTable

​Rule Type

​Decoders Management

​DecodersTable

​Decoder Type

​CDB Lists Management

​CDBListsTable

​CDBList Type

​Configuration Management

​ConfigurationEditor

​Configuration Viewer

​Groups Management

​GroupsTable

​Group Type

​Complete Example

​Utility Functions

​formatRule()

​validateConfiguration()

​Best Practices

​Related Resources

Settings Components

Main Plugin

Rules

Configuration

Management Main

Usage

Management Sections

Rules Management

RulesTable

Rule Type

Decoders Management

DecodersTable

Decoder Type

CDB Lists Management

CDBListsTable

CDBList Type

Configuration Management

ConfigurationEditor

Configuration Viewer

Groups Management

GroupsTable

Group Type

Complete Example

Utility Functions

formatRule()

validateConfiguration()

Best Practices

Related Resources