[Feature]: Add Wazuh help links as extension in Kibana help menu (#3170)

* feat(frontend): Add Wazuh help links as an extension in Kibana help menu

* fix(changelog): Add PR to changelog

* fix(changelog): Fix PR number and link

* fix(help-links): Replace component and removed color styles from Wazuh lunk in the Kibana help button

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to the Wazuh app project will be documented in this file.
 
 ## Wazuh v4.2.0 - Kibana 7.10.2 , 7.11.2 - Revision 4202
 
+### Added
+
+- Wazuh help links in the Kibana help menu [#3170](https://github.com/wazuh/wazuh-kibana-app/pull/3170)
+
 ### Changed
 
 - Remove module titles [#3160](https://github.com/wazuh/wazuh-kibana-app/pull/3160)

common/constants.ts

@@ -219,4 +219,11 @@ export enum WAZUH_MODULES_ID{
 }
 
 export const AUTHORIZED_AGENTS = 'authorized-agents';
+
+// Wazuh links
+export const WAZUH_LINK_DOCUMENTATION = 'https://documentation.wazuh.com';
+export const WAZUH_LINK_GITHUB = 'https://github.com/wazuh';
+export const WAZUH_LINK_GOOGLE_GROUPS = 'https://groups.google.com/forum/#!forum/wazuh';
+export const WAZUH_LINK_SLACK = 'https://wazuh.com/community/join-us-on-slack';
+
 export const HEALTH_CHECK = 'health-check';

public/app.js

@@ -55,7 +55,9 @@ import store from './redux/store';
 import { updateCurrentPlatform } from './redux/actions/appStateActions';
 import { WzAuthentication } from './react-services/wz-authentication';
 
-import { getAngularModule } from './kibana-services';
+import { getAngularModule} from './kibana-services';
+import { addHelpMenuToAppChrome } from './utils';
+
 const app = getAngularModule();
 
 app.config([
@@ -101,6 +103,9 @@ app.run(function ($rootElement) {
       <react-component name="ToastNotificationsModal" props=""></react-component>
     </div>`);
 
+  // Add plugin help links as extension to Kibana help menu
+  addHelpMenuToAppChrome();
+
   // Bind deleteExistentToken on Log out component.
   $('.euiHeaderSectionItem__button').on('mouseleave', function () {
     // opendistro

public/services/routes.js

@@ -137,68 +137,84 @@ app.config(($routeProvider) => {
   $routeProvider
   .when('/health-check', {
     template: healthCheckTemplate,
-    resolve: { apiCount, wzConfig, ip }
+    resolve: { apiCount, wzConfig, ip },
+    outerAngularWrapperRoute: true
   })
   .when('/agents/:agent?/:tab?/:tabView?', {
     template: agentsTemplate,
     resolve: { enableWzMenu, nestedResolve, ip, savedSearch },
     reloadOnSearch: false,
+    outerAngularWrapperRoute: true
   })
   .when('/agents-preview/', {
     template: agentsPrevTemplate,
     resolve: { enableWzMenu, nestedResolve, ip, savedSearch },
     reloadOnSearch: false,
+    outerAngularWrapperRoute: true
   })
   .when('/manager/', {
     template: managementTemplate,
     resolve: { enableWzMenu, nestedResolve, ip, savedSearch, clearRuleId },
     reloadOnSearch: false,
+    outerAngularWrapperRoute: true
   })
   .when('/manager/:tab?', {
     template: managementTemplate,
-    resolve: { enableWzMenu, nestedResolve, ip, savedSearch, clearRuleId }
+    resolve: { enableWzMenu, nestedResolve, ip, savedSearch, clearRuleId },
+    outerAngularWrapperRoute: true
   })
   .when('/overview/', {
     template: overviewTemplate,
     resolve: { enableWzMenu, nestedResolve, ip, savedSearch },
     reloadOnSearch: false,
+    outerAngularWrapperRoute: true
   })
   .when('/settings', {
     template: settingsTemplate,
     resolve: { enableWzMenu, nestedResolve, ip, savedSearch },
-    reloadOnSearch: false
+    reloadOnSearch: false,
+    outerAngularWrapperRoute: true
   })
   .when('/security', {
     template: securityTemplate,
-    resolve: { enableWzMenu, nestedResolve, ip, savedSearch }
+    resolve: { enableWzMenu, nestedResolve, ip, savedSearch },
+    outerAngularWrapperRoute: true
   })
   .when('/visualize/create?', {
     redirectTo: function () { },
-    resolve: { wzConfig, wzKibana }
+    resolve: { wzConfig, wzKibana },
+    outerAngularWrapperRoute: true
   })
   .when('/context/:pattern?/:type?/:id?', {
     redirectTo: function () { },
-    resolve: { wzKibana }
+    resolve: { wzKibana },
+    outerAngularWrapperRoute: true
   })
   .when('/doc/:pattern?/:index?/:type?/:id?', {
     redirectTo: function () { },
-    resolve: { wzKibana }
+    resolve: { wzKibana },
+    outerAngularWrapperRoute: true
   })
   .when('/wazuh-dev', {
     template: toolsTemplate,
-    resolve: { enableWzMenu, nestedResolve, ip, savedSearch }
+    resolve: { enableWzMenu, nestedResolve, ip, savedSearch },
+    outerAngularWrapperRoute: true
   })
   .when('/blank-screen', {
     template: blankScreenTemplate,
-    resolve: { enableWzMenu, wzConfig }
+    resolve: { enableWzMenu, wzConfig },
+    outerAngularWrapperRoute: true
   })
   .when('/', {
-    redirectTo: '/overview/'
+    redirectTo: '/overview/',
+    outerAngularWrapperRoute: true
   })
   .when('', {
-    redirectTo: '/overview/'
+    redirectTo: '/overview/',
+    outerAngularWrapperRoute: true
   })
   .otherwise({
-    redirectTo: '/overview'
+    redirectTo: '/overview',
+    outerAngularWrapperRoute: true
   });
 });

public/utils/add_help_menu_to_app.tsx

@@ -0,0 +1,54 @@
+/*
+ * Wazuh app - Add the plugin help links as extension in Kibana help menu
+ * Copyright (C) 2015-2021 Wazuh, Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * Find more information about this on the LICENSE file.
+ */
+
+import React from 'react';
+import {
+  EuiIcon,
+} from '@elastic/eui';
+import { version } from '../../package.json';
+import { getChrome, getHttp} from '../kibana-services';
+import { 
+  WAZUH_LINK_DOCUMENTATION,
+  WAZUH_LINK_GITHUB,
+  WAZUH_LINK_GOOGLE_GROUPS,
+  WAZUH_LINK_SLACK
+} from '../../common/constants';
+
+const appVersionMajorDotMinor = version.split('.').slice(0, 2).join('.');
+
+export function addHelpMenuToAppChrome(){
+  getChrome().setHelpExtension({
+    appName: 'Wazuh support',
+    links: [
+      {
+        linkType: 'custom',
+        href: `${WAZUH_LINK_DOCUMENTATION}/${appVersionMajorDotMinor}`,
+        content: <span><EuiIcon type={getHttp().basePath.prepend('/plugins/wazuh/assets/icon_blue.svg')}></EuiIcon> Documentation</span>
+      },
+      {
+        linkType: 'custom',
+        href: WAZUH_LINK_SLACK,
+        content: <span><EuiIcon type='logoSlack'></EuiIcon> Slack channel</span>
+      },
+      {
+        linkType: 'custom',
+        href: WAZUH_LINK_GITHUB,
+        content: <span><EuiIcon type='logoGithub'></EuiIcon> Projects on Github</span>
+      },
+      {
+        linkType: 'custom',
+        href: WAZUH_LINK_GOOGLE_GROUPS,
+        content: <span><EuiIcon type={getHttp().basePath.prepend('/plugins/wazuh/assets/icon_google_groups.svg')}></EuiIcon> Google Group</span>
+      }
+    ]
+  });
+}

public/utils/index.ts

@@ -1,3 +1,5 @@
 export * as OdfeUtils from './odfe-utils';
 
-export { checkPluginVersion } from './check-plugin-version';
+export { checkPluginVersion } from './check-plugin-version';
+
+export { addHelpMenuToAppChrome } from './add_help_menu_to_app';