Security Components API

The Security components provide interfaces for managing security policies, user permissions, role-based access control, and security events.

Security Main

Main security interface component for security policy management. Location: plugins/main/public/components/security/main.tsx

Usage

import React from 'react';
import { Security } from '../components/security/main';

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

The Security component provides access to:

Security events and alerts
RBAC policy management
User and role management
Security configuration
Audit logs

Security Events

SecurityEventsTable

Displays security events and alerts with filtering and search. Props:

object

Filters to apply to events

Show properties

object

Time range for events

Show properties

string

Start time (e.g., “now-24h”)

string

End time (e.g., “now”)

number

Minimum alert level

string[]

Filter by rule groups

string

Filter by agent ID

(event: SecurityEvent) => void

Callback when an event is clicked

Usage:

import React, { useState } from 'react';
import { SecurityEventsTable } from '../components/security/events/security-events-table';

function SecurityMonitoring() {
  const [selectedEvent, setSelectedEvent] = useState(null);
  
  return (
    <div>
      <SecurityEventsTable
        filters={{
          timeRange: { from: 'now-24h', to: 'now' },
          level: 7,
        }}
        onEventClick={setSelectedEvent}
      />
      
      {selectedEvent && (
        <EventDetails event={selectedEvent} />
      )}
    </div>
  );
}

SecurityEvent Type

interface SecurityEvent {
  id: string;
  timestamp: string;
  agent: {
    id: string;
    name: string;
    ip?: string;
  };
  rule: {
    id: number;
    description: string;
    level: number;
    groups: string[];
    mitre?: {
      id: string[];
      tactic: string[];
      technique: string[];
    };
  };
  data?: {
    srcip?: string;
    srcport?: number;
    dstip?: string;
    dstport?: number;
    protocol?: string;
    action?: string;
  };
  decoder?: {
    name: string;
    parent?: string;
  };
  location?: string;
  full_log?: string;
}

RBAC Components

RolesTable

Manage security roles and permissions. Props:

(role: Role) => void

Callback when a role is selected

(role: Role) => void

Callback to edit role

(role: Role) => void

Callback to delete role

Usage:

import React, { useState } from 'react';
import { RolesTable } from '../components/security/roles/roles-table';
import { EuiButton } from '@elastic/eui';

function RolesManagement() {
  const [selectedRole, setSelectedRole] = useState(null);
  const [showEditModal, setShowEditModal] = useState(false);
  
  const handleEditRole = (role) => {
    setSelectedRole(role);
    setShowEditModal(true);
  };
  
  const handleDeleteRole = async (role) => {
    if (confirm(`Delete role ${role.name}?`)) {
      try {
        await WzRequest.apiReq(
          'DELETE',
          `/security/roles/${role.id}`,
          {}
        );
        // Refresh roles list
      } catch (error) {
        console.error('Failed to delete role:', error);
      }
    }
  };
  
  return (
    <div>
      <RolesTable
        onSelectRole={setSelectedRole}
        onEditRole={handleEditRole}
        onDeleteRole={handleDeleteRole}
      />
    </div>
  );
}

Role Type

interface Role {
  id: number;
  name: string;
  description?: string;
  permissions: Permission[];
  policies?: Policy[];
  rules?: Rule[];
}

interface Permission {
  resource: string;
  actions: string[];
  conditions?: object;
}

UsersTable

Manage security users and role assignments. Props:

(user: User) => void

Callback when a user is selected

(user: User) => void

Callback to edit user

Usage:

import React from 'react';
import { UsersTable } from '../components/security/users/users-table';

function UsersManagement() {
  return (
    <UsersTable
      onSelectUser={(user) => {
        console.log('Selected user:', user);
      }}
      onEditUser={(user) => {
        // Open edit modal
      }}
    />
  );
}

User Type

interface User {
  username: string;
  roles: string[];
  allow_run_as?: boolean;
  backend_roles?: string[];
}

PoliciesTable

Manage security policies. Props:

(policy: Policy) => void

Callback when a policy is selected

Usage:

import React from 'react';
import { PoliciesTable } from '../components/security/policies/policies-table';

function PoliciesManagement() {
  return (
    <PoliciesTable
      onSelectPolicy={(policy) => {
        // View policy details
      }}
    />
  );
}

Policy Type

interface Policy {
  id: number;
  name: string;
  policy: {
    actions: string[];
    resources: string[];
    effect: 'allow' | 'deny';
  };
}

Role Editor

RoleEditor

Form component for creating and editing roles. Props:

Role

Existing role to edit (omit for new role)

(role: Role) => void

required

Callback when role is saved

() => void

required

Callback when editing is cancelled

Usage:

import React, { useState } from 'react';
import { RoleEditor } from '../components/security/roles/role-editor';
import { EuiModal, EuiModalHeader, EuiModalBody } from '@elastic/eui';

function RoleEditModal({ role, onClose, onSuccess }) {
  const handleSave = async (updatedRole) => {
    try {
      const method = role ? 'PUT' : 'POST';
      const path = role 
        ? `/security/roles/${role.id}` 
        : '/security/roles';
      
      await WzRequest.apiReq(method, path, { body: updatedRole });
      onSuccess();
      onClose();
    } catch (error) {
      console.error('Failed to save role:', error);
    }
  };
  
  return (
    <EuiModal onClose={onClose}>
      <EuiModalHeader>
        <h2>{role ? 'Edit Role' : 'Create Role'}</h2>
      </EuiModalHeader>
      <EuiModalBody>
        <RoleEditor
          role={role}
          onSave={handleSave}
          onCancel={onClose}
        />
      </EuiModalBody>
    </EuiModal>
  );
}

Permission Selector

PermissionSelector

Component for selecting resource permissions. Props:

Permission[]

required

Current permissions

(permissions: Permission[]) => void

required

Callback when permissions change

string[]

List of available resource types

Usage:

import React, { useState } from 'react';
import { PermissionSelector } from '../components/security/permissions/permission-selector';

function RolePermissions() {
  const [permissions, setPermissions] = useState([]);
  
  const availableResources = [
    'agent:id',
    'group:id',
    'rule:file',
    'decoder:file',
    '*:*',
  ];
  
  return (
    <PermissionSelector
      permissions={permissions}
      onChange={setPermissions}
      availableResources={availableResources}
    />
  );
}

Security Audit

AuditLogsTable

Displays security audit logs. Props:

object

Filters for audit logs

Show properties

string

Filter by username

string

Filter by action type

object

Time range filter

Usage:

import React from 'react';
import { AuditLogsTable } from '../components/security/audit/audit-logs-table';

function SecurityAudit() {
  return (
    <AuditLogsTable
      filters={{
        timeRange: { from: 'now-7d', to: 'now' },
        action: 'security:role:update',
      }}
    />
  );
}

Complete Example

Full security management interface:

import React, { useState } from 'react';
import {
  EuiPage,
  EuiPageBody,
  EuiPageContent,
  EuiTabbedContent,
  EuiButton,
  EuiSpacer,
  EuiFlexGroup,
  EuiFlexItem,
} from '@elastic/eui';
import { RolesTable } from '../components/security/roles/roles-table';
import { UsersTable } from '../components/security/users/users-table';
import { PoliciesTable } from '../components/security/policies/policies-table';
import { AuditLogsTable } from '../components/security/audit/audit-logs-table';
import { RoleEditor } from '../components/security/roles/role-editor';

function SecurityManagement() {
  const [selectedTab, setSelectedTab] = useState('roles');
  const [showRoleEditor, setShowRoleEditor] = useState(false);
  const [editingRole, setEditingRole] = useState(null);
  
  const handleEditRole = (role) => {
    setEditingRole(role);
    setShowRoleEditor(true);
  };
  
  const handleCreateRole = () => {
    setEditingRole(null);
    setShowRoleEditor(true);
  };
  
  const tabs = [
    {
      id: 'roles',
      name: 'Roles',
      content: (
        <>
          <EuiSpacer />
          <EuiFlexGroup justifyContent="flexEnd">
            <EuiFlexItem grow={false}>
              <EuiButton
                fill
                iconType="plusInCircle"
                onClick={handleCreateRole}
              >
                Create role
              </EuiButton>
            </EuiFlexItem>
          </EuiFlexGroup>
          <EuiSpacer />
          <RolesTable
            onEditRole={handleEditRole}
            onDeleteRole={async (role) => {
              // Handle delete
            }}
          />
        </>
      ),
    },
    {
      id: 'users',
      name: 'Users',
      content: (
        <>
          <EuiSpacer />
          <UsersTable
            onEditUser={(user) => {
              // Handle edit
            }}
          />
        </>
      ),
    },
    {
      id: 'policies',
      name: 'Policies',
      content: (
        <>
          <EuiSpacer />
          <PoliciesTable
            onSelectPolicy={(policy) => {
              console.log('Selected policy:', policy);
            }}
          />
        </>
      ),
    },
    {
      id: 'audit',
      name: 'Audit',
      content: (
        <>
          <EuiSpacer />
          <AuditLogsTable
            filters={{
              timeRange: { from: 'now-7d', to: 'now' },
            }}
          />
        </>
      ),
    },
  ];
  
  return (
    <EuiPage>
      <EuiPageBody>
        <EuiPageContent>
          <EuiTabbedContent
            tabs={tabs}
            selectedTab={tabs.find(t => t.id === selectedTab)}
            onTabClick={(tab) => setSelectedTab(tab.id)}
          />
        </EuiPageContent>
      </EuiPageBody>
      
      {showRoleEditor && (
        <RoleEditor
          role={editingRole}
          onSave={(role) => {
            // Save role
            setShowRoleEditor(false);
          }}
          onCancel={() => setShowRoleEditor(false)}
        />
      )}
    </EuiPage>
  );
}

export default SecurityManagement;

Utility Functions

checkPermission()

Check if current user has a specific permission.

import { checkPermission } from '../utils/security';

const canEditRoles = await checkPermission('security:role:update');

if (canEditRoles) {
  // Show edit button
}

hasRole()

Check if current user has a specific role.

import { hasRole } from '../utils/security';

const isAdmin = await hasRole('administrator');

getCurrentUser()

Get current user information.

import { getCurrentUser } from '../utils/security';

const user = await getCurrentUser();
console.log(`Logged in as: ${user.username}`);

Best Practices

Check Permissions Before Rendering

Verify user permissions before showing UI elements:

const [canEdit, setCanEdit] = useState(false);

useEffect(() => {
  checkPermission('security:role:update').then(setCanEdit);
}, []);

return (
  <div>
    {canEdit && <EditButton />}
  </div>
);

Validate Role Assignments

Ensure roles exist before assigning to users:

const assignRole = async (userId, roleId) => {
  const role = await fetchRole(roleId);
  if (!role) {
    throw new Error('Role not found');
  }
  await assignRoleToUser(userId, roleId);
};

Log Security Actions

Always log security-related actions for audit:

const deleteRole = async (roleId) => {
  await WzRequest.apiReq('DELETE', `/security/roles/${roleId}`, {});
  // Action is automatically logged by the API
};

Settings Components

Settings and configuration

RBAC Guide

Role-based access control

Authentication

Authentication configuration

Wazuh Core API

Security services API

Overview

Plugin APIs

Components

Security Main

Usage

Security Events

SecurityEventsTable

SecurityEvent Type

RBAC Components

RolesTable

Role Type

UsersTable

User Type

PoliciesTable

Policy Type

Role Editor

RoleEditor

Permission Selector

PermissionSelector

Security Audit

AuditLogsTable

Complete Example

Utility Functions

checkPermission()

hasRole()

getCurrentUser()

Best Practices

Settings Components

RBAC Guide

Authentication

Wazuh Core API

​Security Main

​Usage

​Security Events

​SecurityEventsTable

​SecurityEvent Type

​RBAC Components

​RolesTable

​Role Type

​UsersTable

​User Type

​PoliciesTable

​Policy Type

​Role Editor

​RoleEditor

​Permission Selector

​PermissionSelector

​Security Audit

​AuditLogsTable

​Complete Example

​Utility Functions

​checkPermission()

​hasRole()

​getCurrentUser()

​Best Practices

​Related Resources

Settings Components

RBAC Guide

Authentication

Wazuh Core API

Security Main

Usage

Security Events

SecurityEventsTable

SecurityEvent Type

RBAC Components

RolesTable

Role Type

UsersTable

User Type

PoliciesTable

Policy Type

Role Editor

RoleEditor

Permission Selector

PermissionSelector

Security Audit

AuditLogsTable

Complete Example

Utility Functions

checkPermission()

hasRole()

getCurrentUser()

Best Practices

Related Resources