Management Components API

React components for management and administration interfaces

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

Show properties

level · number

Filter by rule level

group · string

Filter by rule group

pci_dss · string

Filter by PCI DSS requirement

gdpr · string

Filter by GDPR requirement

search · string

Search term

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

Show properties

file · string

Filter by decoder file

search · string

Search term

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 edit

Possible 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

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}
  />
);

Related Resources

Settings Components

Application settings interfaces

Main Plugin

Core plugin API

Rules

Rules management guide

Configuration

Configuration guide