wazuh · MauGaP · Aug 18, 2021 · Jul 27, 2021 · Jul 28, 2021 · Jul 29, 2021
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Added confirmation message when closing a form [#3221](https://github.com/wazuh/wazuh-kibana-app/pull/3221)
 - Improvement to hide navbar Wazuh label. [#3240](https://github.com/wazuh/wazuh-kibana-app/pull/3240)
 - Add modal creating new rule/decoder [#3274](https://github.com/wazuh/wazuh-kibana-app/pull/3274)
+- New functionality to change app logos [#3503](https://github.com/wazuh/wazuh-kibana-app/pull/3503)
 
 ### Changed
 

diff --git a/common/constants.ts b/common/constants.ts
@@ -97,6 +97,7 @@ export const WAZUH_CONFIGURATION_SETTINGS_NEED_HEALTH_CHECK = [
 ];
 export const WAZUH_CONFIGURATION_SETTINGS_NEED_RELOAD = [
   'hideManagerAlerts',
+  'customization.logo.sidebar'
 ];
 
 // Reserved ids for Users/Role mapping
@@ -170,7 +171,11 @@ export const WAZUH_DEFAULT_APP_CONFIG = {
   'alerts.sample.prefix': WAZUH_SAMPLE_ALERT_PREFIX,
   hideManagerAlerts: false,
   'logs.level': 'info',
-  'enrollment.dns': ''
+  'enrollment.dns': '',
+  'customization.logo.app':'logotype.svg',
+  'customization.logo.sidebar':'icon_blue.png',
+  'customization.logo.healthcheck':'icon_blue.svg',
+  'customization.logo.reports':'logo.png'
 };
 
 // Wazuh errors

diff --git a/public/assets/icon_blue.svg b/public/assets/icon_blue.svg
diff --git a/public/assets/logotype.svg b/public/assets/logotype.svg
diff --git a/public/components/health-check/container/health-check.container.tsx b/public/components/health-check/container/health-check.container.tsx
@@ -167,7 +167,8 @@ function HealthCheckComponent() {
     setChecksReady(prev =>  ({...prev, [checkID]: isReady}));
   }
 
-  const logoUrl = getHttp().basePath.prepend('/plugins/wazuh/assets/icon_blue.svg');
+
+  const logoUrl = getHttp().basePath.prepend(`/plugins/wazuh/assets/${appConfig.data['customization.logo.healthcheck']}`);
   const thereAreErrors = Object.keys(checkErrors).length > 0;
 
   const renderChecks = () => {

diff --git a/public/components/wz-menu/wz-menu.js b/public/components/wz-menu/wz-menu.js
@@ -700,7 +700,6 @@ export const WzMenu = withWindowSize(class WzMenu extends Component {
     this.setState({ isSelectorsPopoverOpen: !this.state.isSelectorsPopoverOpen })
   }
 
-
   render() {
     const currentAgent = store.getState().appStateReducers.currentAgentData;
     const thereAreSelectors = this.thereAreSelectors();
@@ -900,8 +899,7 @@ export const WzMenu = withWindowSize(class WzMenu extends Component {
       </div>
     );
 
-
-    const logotype_url = getHttp().basePath.prepend('/plugins/wazuh/assets/logotype.svg');
+    const logotype_url = getHttp().basePath.prepend(`/plugins/wazuh/assets/${this.wazuhConfig.getConfig()['customization.logo.app']}`);
     const mainButton = (
       <button data-test-subj='menuWazuhButton' className="eui" onClick={() => this.switchMenuOpened()}>
         <EuiFlexGroup

diff --git a/public/components/wz-menu/wz-menu.scss b/public/components/wz-menu/wz-menu.scss
@@ -77,7 +77,6 @@ wz-menu {
 
 .navBarLogo {
     width: 100px;
-    filter: brightness(0) saturate(100%) invert(24%) sepia(97%) saturate(1757%) hue-rotate(186deg) brightness(94%) contrast(101%);
   }
 
 .wz-menu-popover{

diff --git a/public/plugin.ts b/public/plugin.ts
@@ -64,8 +64,18 @@ export class WazuhPlugin implements Plugin<WazuhSetup, WazuhStart, WazuhSetupPlu
 
         //Update if user has Wazuh disabled
         this.stateUpdater.next(() => {
-          if(response.isWazuhDisabled) unmount();
-          return { status: response.isWazuhDisabled }
+          if (response.isWazuhDisabled) {
+            unmount();
+          }
+
+          return {
+            status: response.isWazuhDisabled,
+            category: {
+              id: 'wazuh',
+              label: 'Wazuh',
+              order: 0,
+              euiIconType: core.http.basePath.prepend( `/plugins/wazuh/assets/${response.logoSidebar}`),
+            }}
         })
         return () => {
           unmount();

diff --git a/public/services/resolves/get-config.js b/public/services/resolves/get-config.js
@@ -68,6 +68,10 @@ export async function getWzConfig($q, genericReq, wazuhConfig) {
     'logs.level': 'info',
     'enrollment.dns': '',
     'enrollment.password': '',
+    'customization.logo.app':'logotype.svg',
+    'customization.logo.sidebar':'icon_blue.png',
+    'customization.logo.healthcheck':'icon_blue.svg',
+    'customization.logo.reports':'logo.png'
   };
 
   try {

diff --git a/public/styles/common.scss b/public/styles/common.scss
@@ -1081,7 +1081,6 @@ wz-xml-file-editor {
   height: 80px;
   margin-bottom: 20px;
   z-index: 1;
-  filter: brightness(0) saturate(100%) invert(24%) sepia(97%) saturate(1757%) hue-rotate(186deg) brightness(94%) contrast(101%);
   margin-left: -100px;
 }
 

diff --git a/public/utils/config-equivalences.js b/public/utils/config-equivalences.js
@@ -1,5 +1,9 @@
 export const configEquivalences = {
   pattern: 'Default index pattern to use on the app.',
+  'customization.logo.app':'Define the name of the app logo saved in the path /plugins/wazuh/assets/',
+  'customization.logo.sidebar':'Define the name of the sidebar logo saved in the path /plugins/wazuh/assets/',
+  'customization.logo.healthcheck':'Define the name of the health-check logo saved in the path /plugins/wazuh/assets/',
+  'customization.logo.reports':'Define the name of the reports logo (.png) saved in the path /plugins/wazuh/assets/',
   'checks.pattern':
     'Enable or disable the index pattern health check when opening the app.',
   'checks.template':
@@ -73,6 +77,10 @@ export const configEquivalences = {
 
 export const nameEquivalence = {
   pattern: 'Index pattern',
+  'customization.logo.app': 'Logo App',
+  'customization.logo.sidebar': 'Logo Sidebar',
+  'customization.logo.healthcheck': 'Logo Health Check',
+  'customization.logo.reports': 'Logo Reports',
   'checks.pattern': 'Index pattern',
   'checks.template': 'Index template',
   'checks.api': 'API connection',
@@ -109,12 +117,17 @@ export const nameEquivalence = {
 const HEALTH_CHECK = 'Health Check';
 const GENERAL = 'General';
 const SECURITY = 'Security';
-const MONITORING = 'Monitoring'
-const STATISTICS = 'Statistics'
-export const categoriesNames = [HEALTH_CHECK, GENERAL, SECURITY, MONITORING, STATISTICS,];
+const MONITORING = 'Monitoring';
+const STATISTICS = 'Statistics';
+const CUSTOMIZATION = 'Logo Customization';
+export const categoriesNames = [HEALTH_CHECK, GENERAL, SECURITY, MONITORING, STATISTICS, CUSTOMIZATION];
 
 export const categoriesEquivalence = {
   pattern: GENERAL,
+  'customization.logo.app':CUSTOMIZATION,
+  'customization.logo.sidebar':CUSTOMIZATION,
+  'customization.logo.healthcheck':CUSTOMIZATION,
+  'customization.logo.reports':CUSTOMIZATION,
   'checks.pattern': HEALTH_CHECK,
   'checks.template': HEALTH_CHECK,
   'checks.api': HEALTH_CHECK,
@@ -156,6 +169,10 @@ const INTERVAL = 'interval'
 
 export const formEquivalence = {
   pattern: { type: TEXT },
+  'customization.logo.app': { type: TEXT },
+  'customization.logo.sidebar': { type: TEXT },
+  'customization.logo.healthcheck': { type: TEXT },
+  'customization.logo.reports': { type: TEXT },
   'checks.pattern': { type: BOOLEAN },
   'checks.template': { type: BOOLEAN },
   'checks.api': { type: BOOLEAN },

diff --git a/server/controllers/wazuh-api.ts b/server/controllers/wazuh-api.ts
@@ -1056,13 +1056,14 @@ export class WazuhApiCtrl {
     try {
 
       const disabledRoles = ( await getConfiguration() )['disabled_roles'] || [];
+      const logoSidebar = ( await getConfiguration() )['customization.logo.sidebar'] || 'icon_blue.png';
       const wazuhSecurity = SecurityObj(context.wazuh.plugins);
       const data = (await wazuhSecurity.getCurrentUser(request, context)).authContext;
 
       const isWazuhDisabled = +(data.roles || []).some((role) => disabledRoles.includes(role));
 
       return response.ok({
-        body: { isWazuhDisabled }
+        body: { isWazuhDisabled, logoSidebar }
       });
     } catch (error) {
       log('wazuh-api:isWazuhDisabled', error.message || error);

diff --git a/server/lib/initial-wazuh-config.ts b/server/lib/initial-wazuh-config.ts
@@ -164,6 +164,21 @@ export const initialWazuhConfig: string = `---
 #cron.statistics.shards: 2
 #cron.statistics.replicas: 0
 #
+# ------------------------------ wazuh-logo-customization -------------------------------
+#
+#Define the name of the app logo saved in the path /plugins/wazuh/assets/
+#customization.logo.app: logotype.svg
+#
+#Define the name of the sideba logo saved in the path /plugins/wazuh/assets/
+#customization.logo.sidebar: icon_blue.png
+#
+#Define the name of the health-check logo saved in the path /plugins/wazuh/assets/
+#customization.logo.healthcheck: icon_blue.svg
+#
+#
+#Define the name of the reports logo (.png) saved in the path /plugins/wazuh/assets/
+#customization.logo.reports: logo.png
+#
 # ---------------------------- Hide manager alerts ------------------------------
 # Hide the alerts of the manager in all dashboards and discover
 #hideManagerAlerts: false

diff --git a/server/lib/reporting/printer.ts b/server/lib/reporting/printer.ts
@@ -9,12 +9,13 @@ import {
 } from '../../integration-files/visualizations';
 import { log } from '../logger';
 import * as TimSort from 'timsort';
+import { getConfiguration } from '../get-configuration';
 
 const COLORS = {
   PRIMARY: '#00a9e5'
 };
 
-const pageConfiguration = {
+const pageConfiguration = (nameLogo) => ({
   styles: {
     h1: {
       fontSize: 22,
@@ -52,7 +53,7 @@ const pageConfiguration = {
     margin: [40, 20, 0, 0],
     columns: [
       {
-        image: path.join(__dirname, '../../../public/assets/logo.png'),
+        image: path.join(__dirname, `../../../public/assets/${nameLogo}`),
         width: 190
       },
       {
@@ -96,7 +97,7 @@ const pageConfiguration = {
     }
     return false;
   }
-};
+});
 
 const fonts = {
   Roboto: {
@@ -609,10 +610,12 @@ export class ReportPrinter{
     );
   }
 
-  async print(path: string){
-    const document = this._printer.createPdfKitDocument({...pageConfiguration, content: this._content});
+  async print(reportPath: string){
+    const nameLogo = ( await getConfiguration() )['customization.logo.reports'] || 'logo.png'
+
+    const document = this._printer.createPdfKitDocument({...pageConfiguration(nameLogo), content: this._content});
     await document.pipe(
-      fs.createWriteStream(path)
+      fs.createWriteStream(reportPath)
     );
     document.end();
   }