Replace empty registry value name in FIM inventory

CHANGELOG.md

@@ -6,7 +6,8 @@ All notable changes to the Wazuh app project will be documented in this file.
 
 ### Changed
 
-- Channged ossec to wazuh in sample-data [#3121](https://github.com/wazuh/wazuh-kibana-app/pull/3121)
+- Changed ossec to wazuh in sample-data [#3121](https://github.com/wazuh/wazuh-kibana-app/pull/3121)
+- Changed empty fields in FIM tables and `syscheck.value_name` in discovery now show an empty tag for visual clarity [#3279](https://github.com/wazuh/wazuh-kibana-app/pull/3279)
 
 ## Wazuh v4.2.0 - Kibana 7.10.2 , 7.11.2 - Revision 4201
 

public/components/agents/fim/inventory/lib/empty-field-handler.js

@@ -0,0 +1,31 @@
+/*
+ * Wazuh app - Integrity monitoring components
+ * 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 { EuiCode, EuiIcon } from '@elastic/eui';
+import React from 'react';
+
+/* This function can be used to render possibly empty fields.
+It takes a render function suitable for an EuiTable and returns another. */
+export const emptyFieldHandler = (renderFn = (value, record) => value) => {
+  return (value, record) => {
+    if (value === '' || value === undefined) {
+      return (
+        <>
+          <EuiIcon type="iInCircle" />
+          <EuiCode>Empty field</EuiCode>
+        </>
+      );
+    } else {
+      return renderFn(value, record);
+    }
+  };
+};

public/components/agents/fim/inventory/lib/index.ts

@@ -1 +1,2 @@
-export { getFilterValues } from './getFilterValues';
+export { getFilterValues } from './getFilterValues';
+export { emptyFieldHandler } from './empty-field-handler';

public/components/agents/fim/inventory/registry-table.tsx

@@ -24,6 +24,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { WzRequest } from '../../../../react-services/wz-request';
 import { FlyoutDetail } from './flyout';
 import { filtersToObject } from '../../../wz-search-bar';
+import { emptyFieldHandler } from './lib';
 
 export class RegistryTable extends Component {
   state: {
@@ -179,12 +180,15 @@ export class RegistryTable extends Component {
         field: 'file',
         name: 'Registry',
         sortable: true,
+        render: emptyFieldHandler(),
+        textOnly: true
       },
       {
         field: 'mtime',
         name: 'Last Modified',
         sortable: true,
         width: '200px',
+        render: emptyFieldHandler(),
       }
     ]
   }

public/components/agents/fim/inventory/registryValues/registryValues.tsx

@@ -15,6 +15,7 @@ import { WzRequest } from '../../../../../react-services';
 import React, { useEffect, useState } from 'react';
 import valuesMock from './values.json';
 import { DIRECTIONS } from '@elastic/eui/src/components/flex/flex_group';
+import { emptyFieldHandler } from '../lib';
 
 export const RegistryValues = (props) => {
   const [values, setValues] = useState<any[]>([]);
@@ -46,23 +47,25 @@ export const RegistryValues = (props) => {
       field: 'date',
       name: 'Date',
       sortable: true,
+      render: emptyFieldHandler()
     },
     {
       field: 'value',
       name: 'Value name',
       sortable: true,
-      render: (item) => item.name,
+      render: emptyFieldHandler((item) => item.name),
     },
     {
       field: 'value',
       name: 'Value type',
       sortable: true,
-      render: (item) => item.type,
+      render: emptyFieldHandler((item) => item.type),
     },
     {
       field: 'sha1',
       name: 'sha1',
       sortable: false,
+      render: emptyFieldHandler()
     },
   ];
 

public/components/agents/fim/inventory/table.tsx

@@ -22,6 +22,7 @@ import { WzRequest } from '../../../../react-services/wz-request';
 import { FlyoutDetail } from './flyout';
 import { filtersToObject, IFilter } from '../../../wz-search-bar';
 import { formatUIDate } from '../../../../react-services/time-service';
+import { emptyFieldHandler } from './lib'
 
 export class InventoryTable extends Component {
   state: {
@@ -176,55 +177,69 @@ export class InventoryTable extends Component {
         field: 'file',
         name: 'File',
         sortable: true,
-        width: '250px'
+        width: '250px',
+        render: emptyFieldHandler(),
+        textOnly: true
       },
       {
         field: 'mtime',
         name: 'Last Modified',
         sortable: true,
         width: '100px',
-        render: formatUIDate
+        render: emptyFieldHandler(formatUIDate)
       },
       {
         field: 'uname',
         name: 'User',
         sortable: true,
         truncateText: true,
-        width: `${width}`
+        width: `${width}`,
+        render: emptyFieldHandler(),
+        textOnly: true
       },
       {
         field: 'uid',
         name: 'User ID',
         sortable: true,
         truncateText: true,
-        width: `${width}`
+        width: `${width}`,
+        render: emptyFieldHandler(),
+        textOnly: true
       },
       {
         field: 'gname',
         name: 'Group',
         sortable: true,
         truncateText: true,
-        width: `${width}`
+        width: `${width}`,
+        render: emptyFieldHandler(),
+        textOnly: true
       },
       {
         field: 'gid',
         name: 'Group ID',
         sortable: true,
         truncateText: true,
-        width: `${width}`
+        width: `${width}`,
+        render: emptyFieldHandler(),
+        textOnly: true
       },
       {
         field: 'perm',
         name: 'Permissions',
         sortable: true,
         truncateText: true,
-        width: `${width}`
+        width: `${width}`,
+        render: emptyFieldHandler(),
+        textOnly: true,
       },
       {
         field: 'size',
         name: 'Size',
         sortable: true,
-        width: `${width}`
+        width: `${width}`,
+        render: emptyFieldHandler(),
+        textOnly: true
       }
     ]
   }

public/components/common/modules/events-enhance-discover-fields.ts

@@ -106,7 +106,14 @@ export const EventsEnhanceDiscoverCell = {
   }), {
     contentRegex: /(\w+)/g,
     element: 'span'
-  })
+  }),
+  'syscheck.value_name': (content, rowData, element, options) => {
+    if (content) return;
+    const container = document.createElement("span");
+    container.insertAdjacentHTML('beforeend', '<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="euiIcon euiIcon--medium" focusable="false" role="img" aria-hidden="true"><path fill-rule="evenodd" d="M7.5 11.508L7.468 8H6.25V7h2.401l.03 3.508H9.8v1H7.5zm-.25-6.202a.83.83 0 01.207-.577c.137-.153.334-.229.59-.229.256 0 .454.076.594.23.14.152.209.345.209.576 0 .228-.07.417-.21.568-.14.15-.337.226-.593.226-.256 0-.453-.075-.59-.226a.81.81 0 01-.207-.568zM8 13A5 5 0 108 3a5 5 0 000 10zm0 1A6 6 0 118 2a6 6 0 010 12z"></path></svg>');
+    container.insertAdjacentHTML('beforeend','<span class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"><code class="euiCodeBlock__code">Empty field</code></span>');
+    return container;
+  }
 }
 
 // Method to enhance a cell of discover table