Settings Components API - Wazuh Dashboard Plugins

The Settings components provide interfaces for configuring the Wazuh Dashboard application, managing API connections, and customizing application behavior.

Settings Main

Main settings interface component. Location: plugins/main/public/components/settings/settings.tsx:36

Usage

import React from 'react';
import { Settings } from '../components/settings/settings';

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

The Settings component provides access to:

API connection management
Plugin configuration
Sample data management
About/version information

Query Parameters

tab

string

Active settings tabPossible values:

"api" - API configuration
"configuration" - Plugin settings
"sample-data" - Sample data
"about" - About information

API Configuration

ApiTable

Manages Wazuh API host configurations. Location: plugins/main/public/components/settings/api/api-table.tsx

Props

No props required - component manages its own state.

Usage

import React from 'react';
import { ApiTable } from '../components/settings/api/api-table';

function ApiSettings() {
  return (
    <div>
      <h2>API Configuration</h2>
      <ApiTable />
    </div>
  );
}

Features

Add new API hosts
Edit existing configurations
Test API connections
Set default API host
Remove API hosts

AddApiForm

Form for adding a new API host. Props:

onSuccess

() => void

required

Callback when API is successfully added

onCancel

() => void

required

Callback when form is cancelled

Usage:

import React, { useState } from 'react';
import { AddApiForm } from '../components/settings/api/add-api-form';
import { EuiModal, EuiModalHeader } from '@elastic/eui';

function AddApiModal({ onClose, onSuccess }) {
  return (
    <EuiModal onClose={onClose}>
      <EuiModalHeader>
        <h2>Add API Connection</h2>
      </EuiModalHeader>
      <AddApiForm
        onSuccess={() => {
          onSuccess();
          onClose();
        }}
        onCancel={onClose}
      />
    </EuiModal>
  );
}

Form Fields

identifier

string

required

Unique identifier for the API host

url

string

required

Wazuh API URL (e.g., “https://localhost”)

port

number

required

API port number (default: 55000)

username

string

required

API username

password

string

required

API password

run_as

boolean

default:false

Enable run_as for this connection

EditApiForm

Form for editing an existing API host. Props:

apiId

string

required

ID of the API host to edit

onSuccess

() => void

required

Callback when API is successfully updated

onCancel

() => void

required

Callback when editing is cancelled

Usage:

import React from 'react';
import { EditApiForm } from '../components/settings/api/edit-api-form';

function EditApi({ apiId, onClose, onSuccess }) {
  return (
    <EditApiForm
      apiId={apiId}
      onSuccess={() => {
        onSuccess();
        onClose();
      }}
      onCancel={onClose}
    />
  );
}

Plugin Configuration

WzConfigurationSettings

Manages plugin-level configuration settings. Location: plugins/main/public/components/settings/configuration/index.tsx

Usage

import React from 'react';
import { WzConfigurationSettings } from '../components/settings/configuration';

function PluginConfiguration() {
  return <WzConfigurationSettings />;
}

Configurable Settings

The component provides UI for all plugin settings:

pattern

string

Index pattern for Wazuh alerts

timeout

number

Request timeout in milliseconds

ip.selector

boolean

Enable IP selector in UI

ip.ignore

string[]

IP addresses to exclude

logs.level

string

Logging level (info, debug, error, warning)

hideManagerAlerts

boolean

Hide manager alerts in visualizations

enrollment.dns

string

DNS for agent enrollment

enrollment.password

string

Password for agent enrollment

cron.prefix

string

Cron job prefix

cron.statistics.interval

string

Statistics collection interval

SettingForm

Generic form component for individual settings. Props:

setting

Setting

required

Setting configuration object

Show properties

key

string

Setting key

title

string

Display title

description

string

Setting description

type

string

Input type (text, number, boolean, array, etc.)

defaultValue

any

Default value

value

any

required

Current setting value

onChange

(value: any) => void

required

Callback when value changes

Usage:

import React, { useState } from 'react';
import { SettingForm } from '../components/settings/configuration/setting-form';

function CustomSetting() {
  const [value, setValue] = useState(20000);
  
  const setting = {
    key: 'timeout',
    title: 'Request Timeout',
    description: 'Maximum time in milliseconds for API requests',
    type: 'number',
    defaultValue: 20000,
  };
  
  return (
    <SettingForm
      setting={setting}
      value={value}
      onChange={setValue}
    />
  );
}

Sample Data

WzSampleDataWrapper

Manages sample data installation and removal. Location: plugins/main/public/components/add-modules-data/WzSampleDataWrapper.tsx

Usage

import React from 'react';
import { WzSampleDataWrapper } from '../components/add-modules-data/WzSampleDataWrapper';

function SampleData() {
  return <WzSampleDataWrapper />;
}

Features

Install sample data for different modules
Remove installed sample data
View sample data status
Preview sample dashboards

About Information

SettingsAbout

Displays version and platform information. Location: plugins/main/public/components/settings/about/index.tsx

Usage

import React from 'react';
import { SettingsAbout } from '../components/settings/about';

function AboutPage() {
  return <SettingsAbout />;
}

Displayed Information

Wazuh app version
Wazuh API version
OpenSearch Dashboards version
Installation path
Platform information

Complete Example

Full settings interface implementation:

import React, { useState } from 'react';
import {
  EuiPage,
  EuiPageBody,
  EuiPageContent,
  EuiPageHeader,
  EuiTabbedContent,
  EuiSpacer,
} from '@elastic/eui';
import { ApiTable } from '../components/settings/api/api-table';
import { WzConfigurationSettings } from '../components/settings/configuration';
import { WzSampleDataWrapper } from '../components/add-modules-data/WzSampleDataWrapper';
import { SettingsAbout } from '../components/settings/about';

function SettingsInterface() {
  const [selectedTab, setSelectedTab] = useState('api');
  
  const tabs = [
    {
      id: 'api',
      name: 'API Configuration',
      content: (
        <>
          <EuiSpacer />
          <ApiTable />
        </>
      ),
    },
    {
      id: 'configuration',
      name: 'Configuration',
      content: (
        <>
          <EuiSpacer />
          <WzConfigurationSettings />
        </>
      ),
    },
    {
      id: 'sample-data',
      name: 'Sample Data',
      content: (
        <>
          <EuiSpacer />
          <WzSampleDataWrapper />
        </>
      ),
    },
    {
      id: 'about',
      name: 'About',
      content: (
        <>
          <EuiSpacer />
          <SettingsAbout />
        </>
      ),
    },
  ];
  
  return (
    <EuiPage>
      <EuiPageBody>
        <EuiPageHeader pageTitle="Settings" />
        <EuiPageContent>
          <EuiTabbedContent
            tabs={tabs}
            selectedTab={tabs.find(t => t.id === selectedTab)}
            onTabClick={(tab) => setSelectedTab(tab.id)}
          />
        </EuiPageContent>
      </EuiPageBody>
    </EuiPage>
  );
}

export default SettingsInterface;

API Connection Management

Testing Connections

Test an API connection before saving:

import { WzRequest } from '../react-services';

const testConnection = async (apiConfig) => {
  try {
    const response = await WzRequest.apiReq(
      'POST',
      '/api/check-api',
      apiConfig
    );
    
    if (response.data.statusCode === 200) {
      console.log('Connection successful');
      return true;
    }
  } catch (error) {
    console.error('Connection failed:', error);
    return false;
  }
};

Saving API Configuration

Save a new API host:

const saveApiHost = async (config) => {
  try {
    const response = await WzRequest.apiReq(
      'POST',
      '/hosts/apis',
      { body: config }
    );
    
    console.log('API host saved');
    return response.data;
  } catch (error) {
    console.error('Failed to save:', error);
    throw error;
  }
};

Configuration Validation

Validating Settings

Validate settings before saving:

import { SettingsValidator } from 'plugins/wazuh-core/public';

const validateSettings = (settings) => {
  const validator = new SettingsValidator();
  
  const errors = [];
  
  // Validate timeout
  if (settings.timeout < 1000 || settings.timeout > 60000) {
    errors.push('Timeout must be between 1000 and 60000 ms');
  }
  
  // Validate pattern
  if (!settings.pattern || settings.pattern.trim() === '') {
    errors.push('Index pattern is required');
  }
  
  return errors;
};

Saving Settings

Save plugin configuration:

import { getWazuhCorePlugin } from './plugin-services';

const saveSettings = async (settings) => {
  const errors = validateSettings(settings);
  
  if (errors.length > 0) {
    console.error('Validation errors:', errors);
    return;
  }
  
  const wazuhCore = getWazuhCorePlugin();
  
  try {
    for (const [key, value] of Object.entries(settings)) {
      await wazuhCore.configuration.set(key, value);
    }
    console.log('Settings saved successfully');
  } catch (error) {
    console.error('Failed to save settings:', error);
  }
};

Best Practices

Test Before Saving

Always test API connections before saving:

const handleSave = async (apiConfig) => {
  const isValid = await testConnection(apiConfig);
  if (!isValid) {
    alert('Connection test failed');
    return;
  }
  await saveApiHost(apiConfig);
};

Validate User Input

Validate all configuration input:

const handleChange = (value) => {
  const errors = validateSettings({ timeout: value });
  if (errors.length > 0) {
    setErrors(errors);
    return;
  }
  setValue(value);
};

Provide Feedback

Show clear feedback for save operations:

const handleSave = async (settings) => {
  try {
    await saveSettings(settings);
    showSuccessToast('Settings saved successfully');
  } catch (error) {
    showErrorToast('Failed to save settings');
  }
};

Handle Credentials Securely

Never log or expose API credentials:

// Good
console.log('Saving API config for:', config.identifier);

// Bad - Don't do this!
console.log('API config:', config);

Configuration Guide

Plugin configuration guide

API Setup

API connection setup

Wazuh Core API

Core configuration services

Security

Security components

Overview

Plugin APIs

Components

​Settings Main

​Usage

​Query Parameters

​API Configuration

​ApiTable

​Props

​Usage

​Features

​AddApiForm

​Form Fields

​EditApiForm

​Plugin Configuration

​WzConfigurationSettings

​Usage

​Configurable Settings

​SettingForm

​Sample Data

​WzSampleDataWrapper

​Usage

​Features

​About Information

​SettingsAbout

​Usage

​Displayed Information

​Complete Example

​API Connection Management

​Testing Connections

​Saving API Configuration

​Configuration Validation

​Validating Settings

​Saving Settings

​Best Practices

​Related Resources

Configuration Guide

API Setup

Wazuh Core API

Security

Build docs developers (and LLMs) love

Settings Main

Usage

Query Parameters

API Configuration

ApiTable

Props

Usage

Features

AddApiForm

Form Fields

EditApiForm

Plugin Configuration

WzConfigurationSettings

Usage

Configurable Settings

SettingForm

Sample Data

WzSampleDataWrapper

Usage

Features

About Information

SettingsAbout

Usage

Displayed Information

Complete Example

API Connection Management

Testing Connections

Saving API Configuration

Configuration Validation

Validating Settings

Saving Settings

Best Practices

Related Resources