Create Security policies plugin

docker/osd-dev/dev.yml

@@ -239,11 +239,13 @@ services:
       - ${OSD_PORT}:5601
     environment:
       - 'LOGS=/proc/1/fd/1'
+    tty: true
     volumes:
       - osd_cache:/home/node/.cache
       - '${SRC}/main:/home/node/kbn/plugins/main'
       - '${SRC}/wazuh-core:/home/node/kbn/plugins/wazuh-core'
       - '${SRC}/wazuh-check-updates:/home/node/kbn/plugins/wazuh-check-updates'
+      - '${SRC}/wazuh-security-policies:/home/node/kbn/plugins/wazuh-security-policies'
       - '${SRC}/wazuh-engine:/home/node/kbn/plugins/wazuh-engine'
       - '${SRC}/wazuh-fleet:/home/node/kbn/plugins/wazuh-fleet'
       - wd_certs:/home/node/kbn/certs/

plugins/wazuh-security-policies/.i18nrc.json

@@ -0,0 +1,7 @@
+{
+  "prefix": "wazuhSecurityPolicies",
+  "paths": {
+    "wazuhSecurityPolicies": "."
+  },
+  "translations": ["translations/ja-JP.json"]
+}

plugins/wazuh-security-policies/README.md

@@ -0,0 +1,22 @@
+# wazuhSecurityPolicies
+
+A OpenSearch Dashboards plugin
+
+---
+
+## Development
+
+See the [OpenSearch Dashboards contributing
+guide](https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/CONTRIBUTING.md) for instructions
+setting up your development environment.
+
+    ## Scripts
+    <dl>
+      <dt><code>yarn osd bootstrap</code></dt>
+      <dd>Execute this to install node_modules and setup the dependencies in your plugin and in OpenSearch Dashboards
+      </dd>
+
+      <dt><code>yarn plugin-helpers build</code></dt>
+      <dd>Execute this to create a distributable version of this plugin that can be installed in OpenSearch Dashboards
+      </dd>
+    </dl>

plugins/wazuh-security-policies/common/index.ts

@@ -0,0 +1,2 @@
+export const PLUGIN_ID = 'wazuhSecurityPolicies';
+export const PLUGIN_NAME = 'Ruleset';

plugins/wazuh-security-policies/opensearch_dashboards.json

@@ -0,0 +1,9 @@
+{
+  "id": "wazuhSecurityPolicies",
+  "version": "1.0.0",
+  "opensearchDashboardsVersion": "opensearchDashboards",
+  "server": true,
+  "ui": true,
+  "requiredPlugins": ["navigation", "opensearchDashboardsUtils"],
+  "optionalPlugins": []
+}

plugins/wazuh-security-policies/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "wazuhSecurityPolicies",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "yarn plugin-helpers build",
+    "plugin-helpers": "../../scripts/use_node ../../scripts/plugin_helpers",
+    "osd": "../../scripts/use_node ../../scripts/osd"
+  },
+  "dependencies": {
+    "@types/js-yaml": "^4.0.9",
+    "js-yaml": "^4.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.8"
+  }
+}

plugins/wazuh-security-policies/public/application.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { AppMountParameters, CoreStart } from '../../../src/core/public';
+import { AppPluginStartDependencies } from './types';
+import { WazuhSecurityPoliciesApp } from './components/app';
+
+export const renderApp = (
+  { notifications, http }: CoreStart,
+  { navigation }: AppPluginStartDependencies,
+  { appBasePath, element }: AppMountParameters,
+) => {
+  ReactDOM.render(
+    <WazuhSecurityPoliciesApp
+      basename={appBasePath}
+      notifications={notifications}
+      http={http}
+      navigation={navigation}
+    />,
+    element,
+  );
+
+  return () => ReactDOM.unmountComponentAtNode(element);
+};

plugins/wazuh-security-policies/public/components/app.tsx

@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from 'react';
+import { I18nProvider } from '@osd/i18n/react';
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiSideNav,
+  EuiPageSideBar,
+  EuiPanel,
+} from '@elastic/eui';
+import { Router, Route, Switch, Redirect, useParams } from 'react-router-dom';
+import { getCore, getHistory } from '../plugin-services';
+import { views } from './common/views';
+import '../components/common/common.scss';
+
+export const WazuhSecurityPoliciesApp = () => {
+  const history = getHistory();
+  const [currentTab, setCurrentTab] = useState('');
+  const [renderMenu, setRenderMenu] = useState(true);
+  const [isSideNavOpenOnMobile, setIsSideNavOpenOnMobile] = useState(false);
+
+  const toggleOpenOnMobile = () => {
+    setIsSideNavOpenOnMobile(!isSideNavOpenOnMobile);
+  };
+
+  useEffect(() => {
+    setCurrentTab(history.location.pathname);
+  }, [history.location.pathname]);
+
+  const sideNav = [
+    {
+      name: 'Ruleset',
+      id: 'wazuhRuleset',
+      items: views
+        .filter(view => view.renderOnMenu)
+        .map(item => ({
+          id: item.id,
+          name: item.name,
+          onClick: () => {
+            history.push(`${item.path}`);
+            setCurrentTab(item.id);
+          },
+          isSelected:
+            item.id === currentTab ||
+            history.location.pathname === `/${item.id}`,
+        })),
+    },
+  ];
+
+  // Render the application DOM.
+  // Note that `navigation.ui.TopNavMenu` is a stateful component exported on the `navigation` plugin's start contract.
+  return (
+    <Router history={history}>
+      <I18nProvider>
+        <>
+          <EuiPage paddingSize='m'>
+            {renderMenu && (
+              <EuiPageSideBar>
+                <EuiSideNav
+                  mobileTitle='Ruleset'
+                  toggleOpenOnMobile={() => toggleOpenOnMobile()}
+                  isOpenOnMobile={isSideNavOpenOnMobile}
+                  aria-label='Ruleset'
+                  items={sideNav}
+                />
+              </EuiPageSideBar>
+            )}
+
+            <EuiPageBody component='main'>
+              <EuiPanel
+                paddingSize='none'
+                color='transparent'
+                hasShadow={false}
+                hasBorder={false}
+              >
+                <Switch>
+                  {views.map(view => [
+                    <Route
+                      key={view.id}
+                      path={`${view.path}`}
+                      exact
+                      component={() => {
+                        const { id } = useParams() || null;
+
+                        if (id) {
+                          getCore().chrome.setBreadcrumbs(
+                            view.breadcrumb(decodeURIComponent(id)),
+                          );
+                        } else {
+                          getCore().chrome.setBreadcrumbs(view.breadcrumb());
+                        }
+
+                        if (view.renderMenu) {
+                          setRenderMenu(true);
+                        } else {
+                          setRenderMenu(false);
+                        }
+
+                        return view.render();
+                      }}
+                    />,
+                  ])}
+                  <Redirect to={`${views[0].path}`} />
+                </Switch>
+              </EuiPanel>
+            </EuiPageBody>
+          </EuiPage>
+        </>
+      </I18nProvider>
+    </Router>
+  );
+};

plugins/wazuh-security-policies/public/components/common/common.scss

@@ -0,0 +1,12 @@
+.wz-mtb-10 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.wz-mr-10 {
+  margin-right: '10px';
+}
+
+.wz-capitalize {
+  text-transform: capitalize;
+}

plugins/wazuh-security-policies/public/components/common/components/last-update-content-manager-text.tsx.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { EuiLink } from '@elastic/eui';
+
+export const LastUpdateContentManagerText = (lastUpdate: {
+  lastUpdateDate: string;
+  status: string;
+}) => (
+  <>
+    Last update of the content manager was {lastUpdate.lastUpdateDate} (
+    {lastUpdate.status}).{' '}
+    <EuiLink href='link-documentation' target='_blank'>
+      Learn more
+    </EuiLink>
+  </>
+);

plugins/wazuh-security-policies/public/components/common/components/popover.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { EuiButtonIcon, EuiPopover } from '@elastic/eui';
+
+interface PopoverIconButtonProps {
+  children?: React.ReactNode;
+  styles?: React.CSSProperties;
+  color?: string;
+  icon?: string;
+}
+
+export const PopoverIconButton = (props: PopoverIconButtonProps) => {
+  const { children, styles, color = 'text', icon = 'boxesVertical' } = props;
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const onButtonClick = () => setIsPopoverOpen(isPopoverOpen => !isPopoverOpen);
+  const closePopover = () => setIsPopoverOpen(false);
+
+  return (
+    <EuiPopover
+      style={styles}
+      ownFocus={false}
+      button={
+        <EuiButtonIcon
+          color={color}
+          onClick={onButtonClick}
+          iconType={icon}
+          aria-label='Options'
+        />
+      }
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+    >
+      {children}
+    </EuiPopover>
+  );
+};

plugins/wazuh-security-policies/public/components/common/components/render-steps.scss

@@ -0,0 +1,3 @@
+.multiple-panels-step:not(:last-child) {
+  margin-bottom: 10px;
+}