Skip to main content
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:
​
filters
object
Filters to apply to rules list
​
onSelectRule
(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:
​
filters
object
Filters for decoders list
​
onSelectDecoder
(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:
​
onSelectList
(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
Agent to configure (omit for manager configuration)
​
section
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
​
onSave
(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:
​
configuration
object
required
Configuration object to display
​
section
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:
​
onSelectGroup
(group: Group) => void
Callback when a group is selected
​
onEditGroup
(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

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);
};
Confirm destructive actions:
const handleDelete = async (rule) => {
  const confirmed = await confirm(
    `Delete rule ${rule.id}?`
  );
  if (confirmed) {
    await deleteRule(rule.id);
  }
};
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

Build docs developers (and LLMs) love

Get started for freeTalk to us