From c78abd97ddf69159936c0f075442aac99f044e8a Mon Sep 17 00:00:00 2001
From: Ian Yenien Serrano <63758389+yenienserrano@users.noreply.github.com>
Date: Fri, 17 Jan 2025 22:28:54 +0100
Subject: [PATCH] Add rules views

---
 .../public/components/app.tsx                 |  20 +-
 .../integretions/mock-data-rules.tsx          | 746 ++++++++++++++++++
 .../public/components/rules/overview.tsx      |  90 +++
 .../public/components/rules/rule-details.tsx  |   7 +
 4 files changed, 860 insertions(+), 3 deletions(-)
 create mode 100644 plugins/wazuh-security-policies/public/components/integretions/mock-data-rules.tsx
 create mode 100644 plugins/wazuh-security-policies/public/components/rules/overview.tsx
 create mode 100644 plugins/wazuh-security-policies/public/components/rules/rule-details.tsx

diff --git a/plugins/wazuh-security-policies/public/components/app.tsx b/plugins/wazuh-security-policies/public/components/app.tsx
index f5663fe469..135546d068 100644
--- a/plugins/wazuh-security-policies/public/components/app.tsx
+++ b/plugins/wazuh-security-policies/public/components/app.tsx
@@ -10,7 +10,9 @@ import {
 import { Router, Route, Switch, Redirect, useParams } from 'react-router-dom';
 import { getCore, getHistory } from '../plugin-services';
 import { IntegrationOverview } from './integretions/overview';
-import { IntegrationView } from './integretions/integration';
+import { IntegrationView } from './integretions/integration-details';
+import { RulesOverview } from './rules/overview';
+import { RuleDetails } from './rules/rule-details';
 
 interface ViewInterface {
   name: string;
@@ -29,7 +31,8 @@ const views: ViewInterface[] = [
   {
     name: 'Rules',
     id: 'rules',
-    render: () => <div>Rules</div>,
+    render: () => <RulesOverview />,
+    renderDetails: () => <RuleDetails />,
   },
   {
     name: 'Decoders',
@@ -46,6 +49,11 @@ const views: ViewInterface[] = [
 export const WazuhSecurityPoliciesApp = () => {
   const history = getHistory();
   const [currentTab, setCurrentTab] = useState('');
+  const [isSideNavOpenOnMobile, setIsSideNavOpenOnMobile] = useState(false);
+
+  const toggleOpenOnMobile = () => {
+    setIsSideNavOpenOnMobile(!isSideNavOpenOnMobile);
+  };
 
   useEffect(() => {
     setCurrentTab(history.location.pathname);
@@ -76,7 +84,13 @@ export const WazuhSecurityPoliciesApp = () => {
         <>
           <EuiPage paddingSize='m'>
             <EuiPageSideBar>
-              <EuiSideNav aria-label='Ruleset' items={sideNav} />
+              <EuiSideNav
+                mobileTitle='Ruleset'
+                toggleOpenOnMobile={() => toggleOpenOnMobile()}
+                isOpenOnMobile={isSideNavOpenOnMobile}
+                aria-label='Ruleset'
+                items={sideNav}
+              />
             </EuiPageSideBar>
             <EuiPageBody component='main'>
               <EuiPanel
diff --git a/plugins/wazuh-security-policies/public/components/integretions/mock-data-rules.tsx b/plugins/wazuh-security-policies/public/components/integretions/mock-data-rules.tsx
new file mode 100644
index 0000000000..2faffaff16
--- /dev/null
+++ b/plugins/wazuh-security-policies/public/components/integretions/mock-data-rules.tsx
@@ -0,0 +1,746 @@
+export const decoder = [
+  {
+    name: 'decoder/syslog/0',
+    provider: 'native',
+    status: 'enable',
+    metadata: {
+      module: 'syslog',
+      title: 'Syslog Decoder event',
+      description: 'Syslog header',
+      compatibility: 'This decoder has been tested on Wazuh version 4.3',
+      author: {
+        name: 'Wazuh, Inc.',
+        url: 'https://wazuh.com',
+        date: '2022/11/08',
+      },
+      references: [
+        'https://www.ietf.org/rfc/rfc3164.txt',
+        'https://www.ietf.org/rfc/rfc5424.txt',
+      ],
+    },
+    'parse|event.original': [
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 standard',
+      },
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 no pid',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->[<process.pid>]: <message>',
+        description: 'BSD Syslog RFC 3164 standard ISO8601',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->: <message>',
+        description: 'BSD Syslog RFC 3164 no pid ISO8601',
+      },
+      {
+        pattern: '<event.start/SYSLOG> <host.hostname> <message>',
+        description: 'RFC3164 example 2 section 5.4',
+      },
+      {
+        pattern:
+          '<event.start/%Y %b %d %T> <timezone> <host.hostname> <tmp.host_ip> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'RFC3164 example 4 section 5.4',
+      },
+    ],
+    normalize: [
+      {
+        map: [
+          { 'event.kind': 'event' },
+          { 'wazuh.decoders': 'array_append(syslog)' },
+          { 'related.hosts': 'array_append($host.hostname)' },
+          { 'process.name': 'rename($TAG)' },
+          { 'host.ip': 'array_append($tmp.host_ip)' },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'decoder/syslog/1',
+    provider: 'native',
+    status: 'disable',
+    metadata: {
+      module: 'syslog2',
+      title: 'Syslog Decoder event',
+      description: 'Syslog header',
+      compatibility: 'This decoder has been tested on Wazuh version 4.3',
+      author: {
+        name: 'Wazuh, Inc.',
+        url: 'https://wazuh.com',
+        date: '2022/11/08',
+      },
+      references: [
+        'https://www.ietf.org/rfc/rfc3164.txt',
+        'https://www.ietf.org/rfc/rfc5424.txt',
+      ],
+    },
+    'parse|event.original': [
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 standard',
+      },
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 no pid',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->[<process.pid>]: <message>',
+        description: 'BSD Syslog RFC 3164 standard ISO8601',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->: <message>',
+        description: 'BSD Syslog RFC 3164 no pid ISO8601',
+      },
+      {
+        pattern: '<event.start/SYSLOG> <host.hostname> <message>',
+        description: 'RFC3164 example 2 section 5.4',
+      },
+      {
+        pattern:
+          '<event.start/%Y %b %d %T> <timezone> <host.hostname> <tmp.host_ip> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'RFC3164 example 4 section 5.4',
+      },
+    ],
+    normalize: [
+      {
+        map: [
+          { 'event.kind': 'event' },
+          { 'wazuh.decoders': 'array_append(syslog)' },
+          { 'related.hosts': 'array_append($host.hostname)' },
+          { 'process.name': 'rename($TAG)' },
+          { 'host.ip': 'array_append($tmp.host_ip)' },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'decoder/syslog/2',
+    provider: 'native',
+    status: 'disable',
+    metadata: {
+      module: 'syslog3',
+      title: 'Syslog Decoder event',
+      description: 'Syslog header',
+      compatibility: 'This decoder has been tested on Wazuh version 4.3',
+      author: {
+        name: 'Wazuh, Inc.',
+        url: 'https://wazuh.com',
+        date: '2022/11/08',
+      },
+      references: [
+        'https://www.ietf.org/rfc/rfc3164.txt',
+        'https://www.ietf.org/rfc/rfc5424.txt',
+      ],
+    },
+    'parse|event.original': [
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 standard',
+      },
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 no pid',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->[<process.pid>]: <message>',
+        description: 'BSD Syslog RFC 3164 standard ISO8601',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->: <message>',
+        description: 'BSD Syslog RFC 3164 no pid ISO8601',
+      },
+      {
+        pattern: '<event.start/SYSLOG> <host.hostname> <message>',
+        description: 'RFC3164 example 2 section 5.4',
+      },
+      {
+        pattern:
+          '<event.start/%Y %b %d %T> <timezone> <host.hostname> <tmp.host_ip> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'RFC3164 example 4 section 5.4',
+      },
+    ],
+    normalize: [
+      {
+        map: [
+          { 'event.kind': 'event' },
+          { 'wazuh.decoders': 'array_append(syslog)' },
+          { 'related.hosts': 'array_append($host.hostname)' },
+          { 'process.name': 'rename($TAG)' },
+          { 'host.ip': 'array_append($tmp.host_ip)' },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'decoder/syslog/0',
+    provider: 'native',
+    status: 'disable',
+    metadata: {
+      module: 'syslog4',
+      title: 'Syslog Decoder event',
+      description: 'Syslog header',
+      compatibility: 'This decoder has been tested on Wazuh version 4.3',
+      author: {
+        name: 'Wazuh, Inc.',
+        url: 'https://wazuh.com',
+        date: '2022/11/08',
+      },
+      references: [
+        'https://www.ietf.org/rfc/rfc3164.txt',
+        'https://www.ietf.org/rfc/rfc5424.txt',
+      ],
+    },
+    'parse|event.original': [
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 standard',
+      },
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 no pid',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->[<process.pid>]: <message>',
+        description: 'BSD Syslog RFC 3164 standard ISO8601',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->: <message>',
+        description: 'BSD Syslog RFC 3164 no pid ISO8601',
+      },
+      {
+        pattern: '<event.start/SYSLOG> <host.hostname> <message>',
+        description: 'RFC3164 example 2 section 5.4',
+      },
+      {
+        pattern:
+          '<event.start/%Y %b %d %T> <timezone> <host.hostname> <tmp.host_ip> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'RFC3164 example 4 section 5.4',
+      },
+    ],
+    normalize: [
+      {
+        map: [
+          { 'event.kind': 'event' },
+          { 'wazuh.decoders': 'array_append(syslog)' },
+          { 'related.hosts': 'array_append($host.hostname)' },
+          { 'process.name': 'rename($TAG)' },
+          { 'host.ip': 'array_append($tmp.host_ip)' },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'decoder/syslog/1',
+    provider: 'native',
+    status: 'disable',
+    metadata: {
+      module: 'syslog5',
+      title: 'Syslog Decoder event',
+      description: 'Syslog header',
+      compatibility: 'This decoder has been tested on Wazuh version 4.3',
+      author: {
+        name: 'Wazuh, Inc.',
+        url: 'https://wazuh.com',
+        date: '2022/11/08',
+      },
+      references: [
+        'https://www.ietf.org/rfc/rfc3164.txt',
+        'https://www.ietf.org/rfc/rfc5424.txt',
+      ],
+    },
+    'parse|event.original': [
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 standard',
+      },
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 no pid',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->[<process.pid>]: <message>',
+        description: 'BSD Syslog RFC 3164 standard ISO8601',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->: <message>',
+        description: 'BSD Syslog RFC 3164 no pid ISO8601',
+      },
+      {
+        pattern: '<event.start/SYSLOG> <host.hostname> <message>',
+        description: 'RFC3164 example 2 section 5.4',
+      },
+      {
+        pattern:
+          '<event.start/%Y %b %d %T> <timezone> <host.hostname> <tmp.host_ip> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'RFC3164 example 4 section 5.4',
+      },
+    ],
+    normalize: [
+      {
+        map: [
+          { 'event.kind': 'event' },
+          { 'wazuh.decoders': 'array_append(syslog)' },
+          { 'related.hosts': 'array_append($host.hostname)' },
+          { 'process.name': 'rename($TAG)' },
+          { 'host.ip': 'array_append($tmp.host_ip)' },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'decoder/syslog/2',
+    provider: 'native',
+    status: 'draft',
+    metadata: {
+      module: 'syslog6',
+      title: 'Syslog Decoder event',
+      description: 'Syslog header',
+      compatibility: 'This decoder has been tested on Wazuh version 4.3',
+      author: {
+        name: 'Wazuh, Inc.',
+        url: 'https://wazuh.com',
+        date: '2022/11/08',
+      },
+      references: [
+        'https://www.ietf.org/rfc/rfc3164.txt',
+        'https://www.ietf.org/rfc/rfc5424.txt',
+      ],
+    },
+    'parse|event.original': [
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 standard',
+      },
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 no pid',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->[<process.pid>]: <message>',
+        description: 'BSD Syslog RFC 3164 standard ISO8601',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->: <message>',
+        description: 'BSD Syslog RFC 3164 no pid ISO8601',
+      },
+      {
+        pattern: '<event.start/SYSLOG> <host.hostname> <message>',
+        description: 'RFC3164 example 2 section 5.4',
+      },
+      {
+        pattern:
+          '<event.start/%Y %b %d %T> <timezone> <host.hostname> <tmp.host_ip> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'RFC3164 example 4 section 5.4',
+      },
+    ],
+    normalize: [
+      {
+        map: [
+          { 'event.kind': 'event' },
+          { 'wazuh.decoders': 'array_append(syslog)' },
+          { 'related.hosts': 'array_append($host.hostname)' },
+          { 'process.name': 'rename($TAG)' },
+          { 'host.ip': 'array_append($tmp.host_ip)' },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'decoder/syslog/0',
+    provider: 'custom',
+    status: 'enable',
+    metadata: {
+      module: 'syslog',
+      title: 'Syslog Decoder event',
+      description: 'Syslog header',
+      compatibility: 'This decoder has been tested on Wazuh version 4.3',
+      author: {
+        name: 'Wazuh, Inc.',
+        url: 'https://wazuh.com',
+        date: '2022/11/08',
+      },
+      references: [
+        'https://www.ietf.org/rfc/rfc3164.txt',
+        'https://www.ietf.org/rfc/rfc5424.txt',
+      ],
+    },
+    'parse|event.original': [
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 standard',
+      },
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 no pid',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->[<process.pid>]: <message>',
+        description: 'BSD Syslog RFC 3164 standard ISO8601',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->: <message>',
+        description: 'BSD Syslog RFC 3164 no pid ISO8601',
+      },
+      {
+        pattern: '<event.start/SYSLOG> <host.hostname> <message>',
+        description: 'RFC3164 example 2 section 5.4',
+      },
+      {
+        pattern:
+          '<event.start/%Y %b %d %T> <timezone> <host.hostname> <tmp.host_ip> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'RFC3164 example 4 section 5.4',
+      },
+    ],
+    normalize: [
+      {
+        map: [
+          { 'event.kind': 'event' },
+          { 'wazuh.decoders': 'array_append(syslog)' },
+          { 'related.hosts': 'array_append($host.hostname)' },
+          { 'process.name': 'rename($TAG)' },
+          { 'host.ip': 'array_append($tmp.host_ip)' },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'decoder/syslog/1',
+    provider: 'custom',
+    status: 'enable',
+    metadata: {
+      module: 'syslog',
+      title: 'Syslog Decoder event',
+      description: 'Syslog header',
+      compatibility: 'This decoder has been tested on Wazuh version 4.3',
+      author: {
+        name: 'Wazuh, Inc.',
+        url: 'https://wazuh.com',
+        date: '2022/11/08',
+      },
+      references: [
+        'https://www.ietf.org/rfc/rfc3164.txt',
+        'https://www.ietf.org/rfc/rfc5424.txt',
+      ],
+    },
+    'parse|event.original': [
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 standard',
+      },
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 no pid',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->[<process.pid>]: <message>',
+        description: 'BSD Syslog RFC 3164 standard ISO8601',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->: <message>',
+        description: 'BSD Syslog RFC 3164 no pid ISO8601',
+      },
+      {
+        pattern: '<event.start/SYSLOG> <host.hostname> <message>',
+        description: 'RFC3164 example 2 section 5.4',
+      },
+      {
+        pattern:
+          '<event.start/%Y %b %d %T> <timezone> <host.hostname> <tmp.host_ip> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'RFC3164 example 4 section 5.4',
+      },
+    ],
+    normalize: [
+      {
+        map: [
+          { 'event.kind': 'event' },
+          { 'wazuh.decoders': 'array_append(syslog)' },
+          { 'related.hosts': 'array_append($host.hostname)' },
+          { 'process.name': 'rename($TAG)' },
+          { 'host.ip': 'array_append($tmp.host_ip)' },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'decoder/syslog/2',
+    provider: 'custom',
+    status: 'enable',
+    metadata: {
+      module: 'syslog',
+      title: 'Syslog Decoder event',
+      description: 'Syslog header',
+      compatibility: 'This decoder has been tested on Wazuh version 4.3',
+      author: {
+        name: 'Wazuh, Inc.',
+        url: 'https://wazuh.com',
+        date: '2022/11/08',
+      },
+      references: [
+        'https://www.ietf.org/rfc/rfc3164.txt',
+        'https://www.ietf.org/rfc/rfc5424.txt',
+      ],
+    },
+    'parse|event.original': [
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 standard',
+      },
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 no pid',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->[<process.pid>]: <message>',
+        description: 'BSD Syslog RFC 3164 standard ISO8601',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->: <message>',
+        description: 'BSD Syslog RFC 3164 no pid ISO8601',
+      },
+      {
+        pattern: '<event.start/SYSLOG> <host.hostname> <message>',
+        description: 'RFC3164 example 2 section 5.4',
+      },
+      {
+        pattern:
+          '<event.start/%Y %b %d %T> <timezone> <host.hostname> <tmp.host_ip> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'RFC3164 example 4 section 5.4',
+      },
+    ],
+    normalize: [
+      {
+        map: [
+          { 'event.kind': 'event' },
+          { 'wazuh.decoders': 'array_append(syslog)' },
+          { 'related.hosts': 'array_append($host.hostname)' },
+          { 'process.name': 'rename($TAG)' },
+          { 'host.ip': 'array_append($tmp.host_ip)' },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'decoder/syslog/0',
+    provider: 'custom',
+    status: 'draft',
+    metadata: {
+      module: 'syslog',
+      title: 'Syslog Decoder event',
+      description: 'Syslog header',
+      compatibility: 'This decoder has been tested on Wazuh version 4.3',
+      author: {
+        name: 'Wazuh, Inc.',
+        url: 'https://wazuh.com',
+        date: '2022/11/08',
+      },
+      references: [
+        'https://www.ietf.org/rfc/rfc3164.txt',
+        'https://www.ietf.org/rfc/rfc5424.txt',
+      ],
+    },
+    'parse|event.original': [
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 standard',
+      },
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 no pid',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->[<process.pid>]: <message>',
+        description: 'BSD Syslog RFC 3164 standard ISO8601',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->: <message>',
+        description: 'BSD Syslog RFC 3164 no pid ISO8601',
+      },
+      {
+        pattern: '<event.start/SYSLOG> <host.hostname> <message>',
+        description: 'RFC3164 example 2 section 5.4',
+      },
+      {
+        pattern:
+          '<event.start/%Y %b %d %T> <timezone> <host.hostname> <tmp.host_ip> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'RFC3164 example 4 section 5.4',
+      },
+    ],
+    normalize: [
+      {
+        map: [
+          { 'event.kind': 'event' },
+          { 'wazuh.decoders': 'array_append(syslog)' },
+          { 'related.hosts': 'array_append($host.hostname)' },
+          { 'process.name': 'rename($TAG)' },
+          { 'host.ip': 'array_append($tmp.host_ip)' },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'decoder/syslog/1',
+    provider: 'custom',
+    status: 'draft',
+    metadata: {
+      module: 'syslog',
+      title: 'Syslog Decoder event',
+      description: 'Syslog header',
+      compatibility: 'This decoder has been tested on Wazuh version 4.3',
+      author: {
+        name: 'Wazuh, Inc.',
+        url: 'https://wazuh.com',
+        date: '2022/11/08',
+      },
+      references: [
+        'https://www.ietf.org/rfc/rfc3164.txt',
+        'https://www.ietf.org/rfc/rfc5424.txt',
+      ],
+    },
+    'parse|event.original': [
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 standard',
+      },
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 no pid',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->[<process.pid>]: <message>',
+        description: 'BSD Syslog RFC 3164 standard ISO8601',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->: <message>',
+        description: 'BSD Syslog RFC 3164 no pid ISO8601',
+      },
+      {
+        pattern: '<event.start/SYSLOG> <host.hostname> <message>',
+        description: 'RFC3164 example 2 section 5.4',
+      },
+      {
+        pattern:
+          '<event.start/%Y %b %d %T> <timezone> <host.hostname> <tmp.host_ip> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'RFC3164 example 4 section 5.4',
+      },
+    ],
+    normalize: [
+      {
+        map: [
+          { 'event.kind': 'event' },
+          { 'wazuh.decoders': 'array_append(syslog)' },
+          { 'related.hosts': 'array_append($host.hostname)' },
+          { 'process.name': 'rename($TAG)' },
+          { 'host.ip': 'array_append($tmp.host_ip)' },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'decoder/syslog/2',
+    provider: 'custom',
+    status: 'draft',
+    metadata: {
+      module: 'syslog',
+      title: 'Syslog Decoder event',
+      description: 'Syslog header',
+      compatibility: 'This decoder has been tested on Wazuh version 4.3',
+      author: {
+        name: 'Wazuh, Inc.',
+        url: 'https://wazuh.com',
+        date: '2022/11/08',
+      },
+      references: [
+        'https://www.ietf.org/rfc/rfc3164.txt',
+        'https://www.ietf.org/rfc/rfc5424.txt',
+      ],
+    },
+    'parse|event.original': [
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 standard',
+      },
+      {
+        pattern:
+          '<event.start/Jun 14 15:16:01> <host.hostname> <TAG/alphanumeric/->:<~/ignore/ ><message>',
+        description: 'BSD Syslog RFC 3164 no pid',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->[<process.pid>]: <message>',
+        description: 'BSD Syslog RFC 3164 standard ISO8601',
+      },
+      {
+        pattern:
+          '<event.start/2018-08-14T14:30:02.203151+02:00> <host.hostname> <TAG/alphanumeric/->: <message>',
+        description: 'BSD Syslog RFC 3164 no pid ISO8601',
+      },
+      {
+        pattern: '<event.start/SYSLOG> <host.hostname> <message>',
+        description: 'RFC3164 example 2 section 5.4',
+      },
+      {
+        pattern:
+          '<event.start/%Y %b %d %T> <timezone> <host.hostname> <tmp.host_ip> <TAG/alphanumeric/->[<process.pid>]:<~/ignore/ ><message>',
+        description: 'RFC3164 example 4 section 5.4',
+      },
+    ],
+    normalize: [
+      {
+        map: [
+          { 'event.kind': 'event' },
+          { 'wazuh.decoders': 'array_append(syslog)' },
+          { 'related.hosts': 'array_append($host.hostname)' },
+          { 'process.name': 'rename($TAG)' },
+          { 'host.ip': 'array_append($tmp.host_ip)' },
+        ],
+      },
+    ],
+  },
+];
diff --git a/plugins/wazuh-security-policies/public/components/rules/overview.tsx b/plugins/wazuh-security-policies/public/components/rules/overview.tsx
new file mode 100644
index 0000000000..29db0bc7cd
--- /dev/null
+++ b/plugins/wazuh-security-policies/public/components/rules/overview.tsx
@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import { EuiPanel, EuiButton, EuiText } from '@elastic/eui';
+import { HeaderPage } from '../common/header-page';
+import { LastUpdateContentManagerText } from '../common/last-update-content-manager-text.tsx';
+import { SearchBar } from '../common/searchbar';
+import { decoder } from '../integretions/mock-data-rules';
+
+export const RulesOverview = () => {
+  const [query, setQuery] = useState({ text: '' });
+  // Header start
+  const titleHeader = 'Rules';
+  const descriptionHeader = LastUpdateContentManagerText({
+    status: 'Updated',
+    lastUpdateDate: '31/01/2025',
+  });
+  const rightSideItems = [
+    <EuiButton key='create-rule' onClick={() => console.log('clicked')} fill>
+      Create
+    </EuiButton>,
+  ];
+  // Header end
+  // Searchbar start
+  const isActiveOption = [
+    { value: 'enable', name: 'Enabla' },
+    { value: 'disable', name: 'Disable' },
+    { value: 'draft', name: 'Draft' },
+  ];
+  const integrationOption: string[] = [];
+  const nativeOrCustomOption = [
+    { value: 'native', name: 'Native' },
+    { value: 'custom', name: 'Custom' },
+  ];
+
+  for (const item of decoder) {
+    if (!integrationOption[item.metadata.module]) {
+      integrationOption.push(item.metadata.module);
+    }
+  }
+
+  const filters = [
+    {
+      type: 'field_value_toggle_group',
+      field: 'status',
+      name: 'Status',
+      multiSelect: 'or',
+      items: isActiveOption,
+    },
+    {
+      type: 'field_value_toggle_group',
+      field: 'provider',
+      name: 'Provider',
+      multiSelect: 'or',
+      items: nativeOrCustomOption,
+    },
+    {
+      type: 'field_value_selection',
+      field: 'metadata.module',
+      name: 'Integrations',
+      multiSelect: 'and',
+      operator: 'exact',
+      cache: 10000, // will cache the loaded tags for 10 sec
+      options: integrationOption.map(integration => ({
+        value: integration,
+        view: <EuiText>{integration}</EuiText>,
+      })),
+    },
+  ];
+  const schema = {
+    strict: true,
+    fields: {
+      status: {
+        type: 'string',
+      },
+      'metadata.module': {
+        type: 'string',
+      },
+    },
+  };
+
+  return (
+    <EuiPanel>
+      <HeaderPage
+        titleHeader={titleHeader}
+        descriptionHeader={descriptionHeader}
+        rightSideItems={rightSideItems}
+      />
+      <SearchBar schema={schema} filters={filters} setQuery={setQuery} />
+    </EuiPanel>
+  );
+};
diff --git a/plugins/wazuh-security-policies/public/components/rules/rule-details.tsx b/plugins/wazuh-security-policies/public/components/rules/rule-details.tsx
new file mode 100644
index 0000000000..ec9036ef67
--- /dev/null
+++ b/plugins/wazuh-security-policies/public/components/rules/rule-details.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const RuleDetails = () => (
+  <>
+    <h1>RuleDetails</h1>
+  </>
+);