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

# 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

```typescript theme={null}
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

**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:**

```typescript theme={null}
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

```typescript theme={null}
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

**properties**

**file** `string`

Filter by decoder file

**search** `string`

Search term

**onSelectDecoder** `(decoder: Decoder) =\> void`

Callback when a decoder is selected

**Usage:**

```typescript theme={null}
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

```typescript theme={null}
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:**

```typescript theme={null}
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

```typescript theme={null}
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:**

```typescript theme={null}
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:**

```typescript theme={null}
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:**

```typescript theme={null}
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

```typescript theme={null}
interface Group {
  name: string;
  count: number;
  mergedSum: string;
  configSum: string;
  agents?: Agent[];
}
```

## Complete Example

Full management interface implementation:

```typescript theme={null}
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.

```typescript theme={null}
import { formatRule } from '../components/management/rules/utils';

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

### validateConfiguration()

Validate configuration before saving.

```typescript theme={null}
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:
>
> ```typescript theme={null}
> 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:
>
> ```typescript theme={null}
> 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:
>
> ```typescript theme={null}
> const canEdit = await checkPermission('rules:update');
>
> return (
>   <RulesTable
>     showEditButton={canEdit}
>   />
> );
> ```

## Related Resources

> **[Settings Components](/api/components/settings.md)**
>
> Application settings interfaces

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

> **[Rules](/guides/custom-dashboards.md)**
>
> Rules management guide

> **[Configuration](/configuration/settings.md)**
>
> Configuration guide


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