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

# Settings Components API

> React components for application settings and configuration

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

```typescript theme={null}
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:
>
> ```typescript theme={null}
> 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:
>
> ```typescript theme={null}
> 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:
>
> ```typescript theme={null}
> 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:
>
> ```typescript theme={null}
> // Good
> console.log('Saving API config for:', config.identifier);
>
> // Bad - Don't do this!
> console.log('API config:', config);
> ```

## Related Resources

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

> **[API Setup](/configuration/authentication.md)**
>
> API connection setup

> **[Wazuh Core API](/api/wazuh-core.md)**
>
> Core configuration services

> **[Security](/api/components/security.md)**
>
> Security components


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