[Backport 4.4-7.16] Add header and footer report customization #4505

CHANGELOG.md

@@ -11,6 +11,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Redesign the SCA table from agent's dashboard [#4512](https://github.com/wazuh/wazuh-kibana-app/pull/4512)
 - Enhanced the plugin setting description displayed in the UI and the configuration file. [#4501](https://github.com/wazuh/wazuh-kibana-app/pull/4501)
 - Added validation to the plugin settings in the form of `Settings/Configuration` and the endpoint to update the plugin configuration [#4503](https://github.com/wazuh/wazuh-kibana-app/pull/4503)
+- Added new plugin settings to customize the header and footer on the PDF reports [#4505](https://github.com/wazuh/wazuh-kibana-app/pull/4505)
 
 ### Changed
 

common/constants.ts

@@ -358,6 +358,11 @@ export enum SettingCategory {
   CUSTOMIZATION,
 };
 
+type TPluginSettingOptionsTextArea = {
+  rowsSize?: number
+  maxLength?: number
+};
+
 type TPluginSettingOptionsSelect = {
   select: { text: string, value: any }[]
 };
@@ -442,7 +447,13 @@ export type TPluginSetting = {
   // Modify the setting requires restarting the plugin platform to take effect.
   requiresRestartingPluginPlatform?: boolean
   // Define options related to the `type`.
-  options?: TPluginSettingOptionsNumber | TPluginSettingOptionsEditor | TPluginSettingOptionsFile | TPluginSettingOptionsSelect | TPluginSettingOptionsSwitch
+  options?:
+  TPluginSettingOptionsEditor |
+  TPluginSettingOptionsFile |
+  TPluginSettingOptionsNumber |
+  TPluginSettingOptionsSelect |
+  TPluginSettingOptionsSwitch |
+  TPluginSettingOptionsTextArea
   // Transform the input value. The result is saved in the form global state of Settings/Configuration
   uiFormTransformChangedInputValue?: (value: any) => any
   // Transform the configuration value or default as initial value for the input in Settings/Configuration
@@ -545,7 +556,6 @@ export const PLUGIN_SETTINGS: { [key: string]: TPluginSetting } = {
 		validateBackend: function(schema){
 			return schema.boolean();
 		},
-
   },
   "checks.fields": {
     title: "Known fields",
@@ -1072,6 +1082,46 @@ export const PLUGIN_SETTINGS: { [key: string]: TPluginSetting } = {
 			)(value)
 		},
   },
+  "customization.reports.footer": {
+		title: "Reports footer",
+		description: "Set the footer of the reports.",
+		category: SettingCategory.CUSTOMIZATION,
+		type: EpluginSettingType.textarea,
+		defaultValue: "",
+    	defaultValueIfNotSet: REPORTS_PAGE_FOOTER_TEXT,
+		isConfigurableFromFile: true,
+		isConfigurableFromUI: true,
+    options: { rowsSize: 2, maxLength: 30 },
+    validate: function (value) {
+      return SettingsValidator.multipleLinesString({
+        max: this.options.rowsSize,
+        maxLength: this.options.maxLength
+      })(value)
+    },
+    validateBackend: function (schema) {
+      return schema.string({ validate: this.validate.bind(this) });
+    },
+  },
+  "customization.reports.header": {
+    title: "Reports header",
+    description: "Set the header of the reports.",
+    category: SettingCategory.CUSTOMIZATION,
+    type: EpluginSettingType.textarea,
+    defaultValue: "",
+    defaultValueIfNotSet: REPORTS_PAGE_HEADER_TEXT,
+    isConfigurableFromFile: true,
+    isConfigurableFromUI: true,
+    options: { rowsSize: 3, maxLength: 20 },
+    validate: function (value) {
+      return SettingsValidator.multipleLinesString({
+        max: this.options.rowsSize,
+        maxLength: this.options?.maxLength
+      })(value)
+    },
+		validateBackend: function(schema){
+			return schema.string({validate: this.validate?.bind(this)});
+		},
+	},
   "disabled_roles": {
     title: "Disable roles",
     description: "Disabled the plugin visibility for users with the roles.",
@@ -1785,7 +1835,6 @@ export const PLUGIN_SETTINGS: { [key: string]: TPluginSetting } = {
 
 export type TPluginSettingKey = keyof typeof PLUGIN_SETTINGS;
 
-
 export enum HTTP_STATUS_CODES {
   CONTINUE = 100,
   SWITCHING_PROTOCOLS = 101,

common/services/settings-validator.ts

@@ -56,14 +56,17 @@ export class SettingsValidator {
    * @param options
    * @returns
    */
-  static multipleLinesString(options: { min?: number, max?: number } = {}) {
+  static multipleLinesString(options: { min?: number, max?: number, maxLength?: number } = {}) {
     return function (value: number) {
       const lines = value.split(/\r\n|\r|\n/).length;
+      if (typeof options.maxLength !== 'undefined' && value.split('\n').some(line => line.length > options.maxLength)) {
+        return `The maximum length of a line is ${options.maxLength} characters.`;
+      };
       if (typeof options.min !== 'undefined' && lines < options.min) {
         return `The string should have more or ${options.min} line/s.`;
       };
       if (typeof options.max !== 'undefined' && lines > options.max) {
-        return `The string should have less or ${options.max} line/s.`;
+        return `The string should have less or equal to ${options.max} line/s.`;
       };
     }
   };

public/components/common/form/__snapshots__/index.test.tsx.snap

@@ -412,3 +412,14 @@ exports[`[component] InputForm Renders correctly to match the snapshot: Input: t
   </div>
 </div>
 `;
+
+exports[`[component] InputForm Renders correctly to match the snapshot: Input: textarea 1`] = `
+<div>
+  <textarea
+    class="euiTextArea euiTextArea--resizeVertical euiTextArea--fullWidth"
+    rows="6"
+  >
+    test
+  </textarea>
+</div>
+`;

public/components/common/form/index.test.tsx

@@ -14,13 +14,14 @@ describe('[component] InputForm', () => {
   const optionsSelect = { select: [{ text: 'Label1', value: 'value1' }, { text: 'Label2', value: 'value2' }] };
   const optionsSwitch = { switch: { values: { enabled: { label: 'Enabled', value: true }, disabled: { label: 'Disabled', value: false } } } };
   it.each`
-		inputType   | value       | options
-		${'editor'} | ${'{}'}     | ${optionsEditor}
-		${'filepicker'} | ${'{}'} | ${optionsFilepicker}
-		${'number'} | ${4}        | ${undefined}
-		${'select'} | ${'value1'} | ${optionsSelect}
-		${'switch'} | ${true}     | ${optionsSwitch}
-		${'text'}   | ${'test'}   | ${undefined}
+		inputType       | value       | options
+		${'editor'}     | ${'{}'}     | ${optionsEditor}
+		${'filepicker'} | ${'{}'}     | ${optionsFilepicker}
+		${'number'}     | ${4}        | ${undefined}
+		${'select'}     | ${'value1'} | ${optionsSelect}
+		${'switch'}     | ${true}     | ${optionsSwitch}
+		${'text'}       | ${'test'}   | ${undefined}
+		${'textarea'}   | ${'test'}   | ${undefined}
 	`('Renders correctly to match the snapshot: Input: $inputType', ({ inputType, value, options }) => {
     const wrapper = render(
       <InputForm

public/components/common/form/index.tsx

@@ -5,6 +5,7 @@ import { InputFormText } from './input_text';
 import { InputFormSelect } from './input_select';
 import { InputFormSwitch } from './input_switch';
 import { InputFormFilePicker } from './input_filepicker';
+import { InputFormTextArea } from './input_text_area';
 import { EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
 
 export const InputForm = ({
@@ -61,5 +62,6 @@ const Input = {
   number: InputFormNumber,
   select: InputFormSelect,
   text: InputFormText,
+  textarea: InputFormTextArea,
   filepicker: InputFormFilePicker
 };

public/components/common/form/input_text_area.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { EuiTextArea } from '@elastic/eui';
+import { IInputFormType } from './types';
+
+export const InputFormTextArea = ({ value, isInvalid, onChange, options } : IInputFormType) => {
+	return (
+		<EuiTextArea
+			fullWidth
+			value={value}
+			isInvalid={isInvalid}
+			onChange={onChange}
+      rows={options?.rowsSize}
+		/>
+	);
+};

public/components/settings/configuration/components/categories/components/category/category.tsx

@@ -117,7 +117,6 @@ export const Category: React.FunctionComponent<ICategoryProps> = ({
                         aria-label={item.key}
                         content='Invalid' />
                       )}
-
                       {isUpdated && (
                         <EuiIconTip
                         anchorClassName="mgtAdvancedSettings__fieldTitleUnsavedIcon"

public/components/settings/configuration/configuration.tsx

@@ -152,7 +152,7 @@ const WzConfigurationSettingsProvider = (props) => {
       // Update the settings that uploads a file
       if(Object.keys(settingsToUpdate.fileUpload).length){
         requests.push(...Object.entries(settingsToUpdate.fileUpload)
-          .map(([pluginSettingKey, {file, extension}]) => {
+          .map(([pluginSettingKey, {file}]) => {
               // Create the form data
               const formData = new FormData();
               formData.append('file', file);

server/controllers/wazuh-reporting.ts

@@ -66,9 +66,9 @@ export class WazuhReportingCtrl {
       str += `${
         type === 'range'
           ? `${params.gte}-${params.lt}`
-          : type === 'phrases' 
-            ? '(' + params.join(" OR ") + ')' 
-            : type === 'exists' 
+          : type === 'phrases'
+            ? '(' + params.join(" OR ") + ')'
+            : type === 'exists'
               ? '*'
               : !!value
           ? value

server/lib/reporting/printer.ts

@@ -10,13 +10,14 @@ import {
 import { log } from '../logger';
 import * as TimSort from 'timsort';
 import { getConfiguration } from '../get-configuration';
-import { REPORTS_PRIMARY_COLOR, REPORTS_LOGO_IMAGE_ASSETS_RELATIVE_PATH, REPORTS_PAGE_FOOTER_TEXT, REPORTS_PAGE_HEADER_TEXT } from '../../../common/constants';
+import { REPORTS_PRIMARY_COLOR} from '../../../common/constants';
+import { getSettingDefaultValue } from '../../../common/services/settings';
 
 const COLORS = {
   PRIMARY: REPORTS_PRIMARY_COLOR
 };
 
-const pageConfiguration = (nameLogo) => ({
+const pageConfiguration = ({ pathToLogo, pageHeader, pageFooter }) => ({
   styles: {
     h1: {
       fontSize: 22,
@@ -54,11 +55,11 @@ const pageConfiguration = (nameLogo) => ({
     margin: [40, 20, 0, 0],
     columns: [
       {
-        image: path.join(__dirname, `../../../public/assets/${nameLogo}`),
-        width: 190
+        image: path.join(__dirname, `../../../public/assets/${pathToLogo}`),
+        fit: [190, 50]
       },
       {
-        text: REPORTS_PAGE_HEADER_TEXT,
+        text: pageHeader,
         alignment: 'right',
         margin: [0, 0, 40, 0],
         color: COLORS.PRIMARY
@@ -70,7 +71,7 @@ const pageConfiguration = (nameLogo) => ({
     return {
       columns: [
         {
-          text: REPORTS_PAGE_FOOTER_TEXT,
+          text: pageFooter,
           color: COLORS.PRIMARY,
           margin: [40, 40, 0, 0]
         },
@@ -473,7 +474,7 @@ export class ReportPrinter{
       this.addContent(typeof title === 'string' ? { text: title, style: 'h4' } : title)
         .addNewLine();
     }
-  
+
     if (!items || !items.length) {
       this.addContent({
         text: 'No results match your search criteria',
@@ -494,31 +495,31 @@ export class ReportPrinter{
           style: 'standard'
         }
       })
-    }); 
+    });
 
     // 385 is the max initial width per column
     let totalLength = columns.length - 1;
     const widthColumn = 385/totalLength;
     let totalWidth = totalLength * widthColumn;
-    
+
     const widths:(number)[] = [];
-    
+
     for (let step = 0; step < columns.length - 1; step++) {
 
       let columnLength = this.getColumnWidth(columns[step], tableRows, step);
-      
+
       if (columnLength <= Math.round(totalWidth / totalLength)) {
         widths.push(columnLength);
         totalWidth -= columnLength;
-      } 
+      }
       else {
         widths.push(Math.round(totalWidth / totalLength));
         totalWidth -= Math.round((totalWidth / totalLength));
       }
       totalLength--;
     }
     widths.push('*');
-  
+
     this.addContent({
       fontSize: 8,
       table: {
@@ -562,9 +563,9 @@ export class ReportPrinter{
       `agents: ${agents}`,
       'debug'
     );
-    
+
     this.addNewLine();
-    
+
     this.addContent({
       text:
         'NOTE: This report only includes the authorized agents of the user who generated the report',
@@ -613,22 +614,36 @@ export class ReportPrinter{
     );
   }
 
-  async print(reportPath: string){
-    const nameLogo = ( await getConfiguration() )['customization.logo.reports'] || REPORTS_LOGO_IMAGE_ASSETS_RELATIVE_PATH;
+  async print(reportPath: string) {
+    return new Promise((resolve, reject) => {
+      try {
+        const configuration = getConfiguration();
 
-    const document = this._printer.createPdfKitDocument({...pageConfiguration(nameLogo), content: this._content});
-    await document.pipe(
-      fs.createWriteStream(reportPath)
-    );
-    document.end();
+        const pathToLogo = configuration['customization.logo.reports'] || getSettingDefaultValue('customization.logo.reports');
+        const pageHeader = configuration['customization.reports.header'] || getSettingDefaultValue('customization.reports.header');
+        const pageFooter = configuration['customization.reports.footer'] || getSettingDefaultValue('customization.reports.footer');
+
+        const document = this._printer.createPdfKitDocument({ ...pageConfiguration({ pathToLogo, pageHeader, pageFooter }), content: this._content });
+
+        document.on('error', reject);
+        document.on('end', resolve);
+
+        document.pipe(
+          fs.createWriteStream(reportPath)
+        );
+        document.end();
+      } catch (ex) {
+        reject(ex);
+      }
+    });
   }
 
   /**
    * Returns the width of a given column
-   * 
-   * @param column 
-   * @param tableRows 
-   * @param step 
+   *
+   * @param column
+   * @param tableRows
+   * @param step
    * @returns {number}
    */
   getColumnWidth(column, tableRows, index){