Add default sorting and columns in all data grid tables

plugins/main/public/components/agents/fim/inventory/fileDetail.tsx

@@ -298,9 +298,8 @@ export class FileDetails extends Component {
  'YYYY-MM-DD',
  )} AND ${field}<${value_max.format('YYYY-MM-DD')}`;
  } else {
- newBadge.value = `${field}=${
- field === 'size' ? this.props.currentFile[field] : value
- }`;
+ newBadge.value = `${field}=${field === 'size' ? this.props.currentFile[field] : value
+ }`;
  }
  !filters.some(
  item => item.field === newBadge.field && item.value === newBadge.value,
@@ -312,7 +311,7 @@ export class FileDetails extends Component {
  const { view } = this.props;
  const columns =
  this.props.type === 'registry_key' ||
- this.props.currentFile.type === 'registry_key'
+  this.props.currentFile.type === 'registry_key'
  ? this.registryDetails()
  : this.details();
  const generalDetails = columns.map((item, idx) => {
@@ -381,7 +380,7 @@ export class FileDetails extends Component {
  this.userSvg
  )}
  {item.name === 'Permissions' &&
- agentPlatform === 'windows' ? (
+  agentPlatform === 'windows' ? (
  ''
  ) : (
  <span className='detail-title'>{item.name}</span>
@@ -461,80 +460,84 @@ export class FileDetails extends Component {
  const agentId = this.props.agent?.id;
  return agentId
  ? [
- {
- id: 'timestamp',
- displayAsText: 'Time',
- render: value => formatUIDate(value),
- },
- {
- id: 'syscheck.event',
- displayAsText: 'Action',
- },
- { id: 'rule.description', displayAsText: 'Description' },
- { id: 'rule.level', displayAsText: 'Level' },
- {
- id: 'rule.id',
- displayAsText: 'Rule ID',
- render: value => (
- <RedirectAppLinks application={getCore().application}>
- <EuiLink
- href={getCore().application.getUrlForApp(rules.id, {
- path: `#/manager/?tab=rules&redirectRule=${value}`,
- })}
- >
- {value}
- </EuiLink>
- </RedirectAppLinks>
- ),
- },
- ]
+ {
+ id: 'timestamp',
+ isSortable: true,
+ defaultSortDirection: 'desc',
+ displayAsText: 'Time',
+ render: value => formatUIDate(value),
+ },
+ {
+ id: 'syscheck.event',
+ displayAsText: 'Action',
+ },
+ { id: 'rule.description', displayAsText: 'Description' },
+ { id: 'rule.level', displayAsText: 'Level' },
+ {
+ id: 'rule.id',
+ displayAsText: 'Rule ID',
+ render: value => (
+ <RedirectAppLinks application={getCore().application}>
+ <EuiLink
+ href={getCore().application.getUrlForApp(rules.id, {
+ path: `#/manager/?tab=rules&redirectRule=${value}`,
+ })}
+ >
+ {value}
+ </EuiLink>
+ </RedirectAppLinks>
+ ),
+ },
+ ]
  : [
- {
- id: 'timestamp',
- displayAsText: 'Time',
- render: value => formatUIDate(value),
- },
- {
- id: 'agent.id',
- displayAsText: 'Agent',
- render: value => (
- <RedirectAppLinks application={getCore().application}>
- <EuiLink
- href={getCore().application.getUrlForApp(endpointSummary.id, {
- path: `#/agents/?tab=welcome&agent=${value}`,
- })}
- >
- {value}
- </EuiLink>
- </RedirectAppLinks>
- ),
- },
- {
- id: 'agent.name',
- displayAsText: 'Agent name',
- },
- {
- id: 'syscheck.event',
- displayAsText: 'Action',
- },
- { id: 'rule.description', displayAsText: 'Description' },
- { id: 'rule.level', displayAsText: 'Level' },
- {
- id: 'rule.id',
- displayAsText: 'Rule ID',
- render: value => (
- <RedirectAppLinks application={getCore().application}>
- <EuiLink
- href={getCore().application.getUrlForApp(rules.id, {
- path: `#/manager/?tab=rules&redirectRule=${value}`,
- })}
- >
- {value}
- </EuiLink>
- </RedirectAppLinks>
- ),
- },
- ];
+ {
+ id: 'timestamp',
+ isSortable: true,
+ defaultSortDirection: 'desc',
+ displayAsText: 'Time',
+ render: value => formatUIDate(value),
+ },
+ {
+ id: 'agent.id',
+ displayAsText: 'Agent',
+ render: value => (
+ <RedirectAppLinks application={getCore().application}>
+ <EuiLink
+ href={getCore().application.getUrlForApp(endpointSummary.id, {
+ path: `#/agents/?tab=welcome&agent=${value}`,
+ })}
+ >
+ {value}
+ </EuiLink>
+ </RedirectAppLinks>
+ ),
+ },
+ {
+ id: 'agent.name',
+ displayAsText: 'Agent name',
+ },
+ {
+ id: 'syscheck.event',
+ displayAsText: 'Action',
+ },
+ { id: 'rule.description', displayAsText: 'Description' },
+ { id: 'rule.level', displayAsText: 'Level' },
+ {
+ id: 'rule.id',
+ displayAsText: 'Rule ID',
+ render: value => (
+ <RedirectAppLinks application={getCore().application}>
+ <EuiLink
+ href={getCore().application.getUrlForApp(rules.id, {
+ path: `#/manager/?tab=rules&redirectRule=${value}`,
+ })}
+ >
+ {value}
+ </EuiLink>
+ </RedirectAppLinks>
+ ),
+ },
+ ];
  }
 
  getImplicitFilters() {

plugins/main/public/components/agents/sca/events/configuration-assessment-columns.tsx

@@ -3,6 +3,8 @@ import { tDataGridColumn } from '../../../common/data-grid';
 export const configurationAssessmentColumns: tDataGridColumn[] = [
  {
  id: 'timestamp',
+ isSortable: true,
+ defaultSortDirection: 'desc'
  },
  {
  id: 'data.sca.check.title',

plugins/main/public/components/common/data-grid/data-grid-service.ts

@@ -174,24 +174,25 @@ export const parseColumns = (
  defaultColumns: tDataGridColumn[] = [],
 ): EuiDataGridColumn[] => {
  // remove _source field becuase is a object field and is not supported
- fields = fields.filter(field => field.name !== '_source');
  // merge the properties of the field with the default columns
  const columns =
- fields.map(field => {
- const defaultColumn = defaultColumns.find(
- column => column.id === field.name,
- );
- return {
- ...field,
- id: field.name,
- name: field.name,
- schema: field.type,
- actions: {
- showHide: true,
- },
- ...defaultColumn,
- };
- }) || [];
+ fields
+ .filter(field => field.name !== '_source')
+ .map(field => {
+ const defaultColumn = defaultColumns.find(
+ column => column.id === field.name,
+ );
+ return {
+ ...field,
+ id: field.name,
+ name: field.name,
+ schema: field.type,
+ actions: {
+ showHide: true,
+ },
+ ...defaultColumn,
+ };
+ }) || [];
  return columns;
 };
 

plugins/main/public/components/common/wazuh-data-grid/wz-data-grid.tsx

@@ -162,7 +162,7 @@ const WazuhDataGrid = (props: tWazuhDataGridProps) => {
  {!isLoading && !results?.hits?.total === 0 ? (
  <DiscoverNoResults timeFieldName={timeField} queryLanguage={''} />
  ) : null}
- {!isLoading && results?.hits?.total > 0 ? (
+ {!isLoading && results?.hits?.total > 0 && dataGridProps.columns.length ? (
  <div className='wazuhDataGridContainer'>
  <EuiDataGrid
  {...dataGridProps}

plugins/main/public/components/common/wazuh-discover/config/data-grid-columns.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import { tDataGridColumn } from '../../data-grid';
 
 export const threatHuntingColumns: tDataGridColumn[] = [{
- id: 'timestamp'
+ id: 'timestamp',
+ isSortable: true,
+ defaultSortDirection: 'desc',
 },
 {
  id: 'agent.name'

plugins/main/public/components/common/wazuh-discover/wz-discover.tsx

@@ -251,7 +251,7 @@ const WazuhDiscoverComponent = (props: WazuhDiscoverProps) => {
  </EuiPanel>
  </EuiFlexItem>
  <EuiFlexItem>
- <EuiDataGrid
+ {!isDataSourceLoading && dataSource?.indexPattern && dataGridProps?.columns.length ? <EuiDataGrid
  {...dataGridProps}
  className={sideNavDocked ? 'dataGridDockedNav' : ''}
  toolbarVisibility={{
@@ -267,6 +267,7 @@ const WazuhDiscoverComponent = (props: WazuhDiscoverProps) => {
  ),
  }}
  />
+ : null}
  </EuiFlexItem>
  </EuiFlexGroup>
  </EuiPanel>

plugins/main/public/components/overview/amazon-web-services/events/amazon-web-services-columns.tsx

@@ -3,6 +3,8 @@ import { tDataGridColumn } from '../../../common/data-grid';
 export const amazonWebServicesColumns: tDataGridColumn[] = [
  {
  id: 'timestamp',
+ isSortable: true,
+ defaultSortDirection: 'desc'
  },
  {
  id: 'data.aws.source',

plugins/main/public/components/overview/compliance-table/components/requirement-flyout/requirement-flyout.tsx

@@ -78,6 +78,8 @@ export const RequirementFlyout = connect(mapStateToProps)(
  const columnsAgent = [
  {
  id: 'timestamp',
+ isSortable: true,
+ defaultSortDirection: 'desc',
  displayAsText: 'Time',
  render: value => formatUIDate(value),
  },
@@ -96,6 +98,8 @@ export const RequirementFlyout = connect(mapStateToProps)(
  const columnsWithoutAgent = [
  {
  id: 'timestamp',
+ isSortable: true,
+ defaultSortDirection: 'desc',
  displayAsText: 'Time',
  render: value => formatUIDate(value),
  },
@@ -133,10 +137,10 @@ export const RequirementFlyout = connect(mapStateToProps)(
  <EuiLoadingContent lines={1} />
  </div>
  )) || (
- <EuiTitle size='m'>
- <h2 id='flyoutSmallTitle'>Requirement {currentRequirement}</h2>
- </EuiTitle>
- )}
+  <EuiTitle size='m'>
+  <h2 id='flyoutSmallTitle'>Requirement {currentRequirement}</h2>
+  </EuiTitle>
+  )}
  </EuiFlyoutHeader>
  );
  }

plugins/main/public/components/overview/docker/events/docker-columns.tsx

@@ -3,6 +3,8 @@ import { tDataGridColumn } from '../../../common/data-grid';
 export const dockerColumns: tDataGridColumn[] = [
  {
  id: 'timestamp',
+ isSortable: true,
+ defaultSortDirection: 'desc'
  },
  {
  id: 'agent.name',

plugins/main/public/components/overview/fim/events/file-integrity-monitoring-columns.tsx

@@ -3,6 +3,8 @@ import { tDataGridColumn } from '../../../common/data-grid';
 export const fileIntegrityMonitoringColumns: tDataGridColumn[] = [
  {
  id: 'timestamp',
+ isSortable: true,
+ defaultSortDirection: 'desc'
  },
  {
  id: 'agent.name',

plugins/main/public/components/overview/gdpr/events/gdpr-columns.tsx

@@ -3,6 +3,8 @@ import { tDataGridColumn } from '../../../common/data-grid';
 export const gdprColumns: tDataGridColumn[] = [
  {
  id: 'timestamp',
+ isSortable: true,
+ defaultSortDirection: 'desc'
  },
  {
  id: 'agent.name',

plugins/main/public/components/overview/github/events/github-columns.tsx

@@ -3,6 +3,8 @@ import { tDataGridColumn } from '../../../common/data-grid';
 export const githubColumns: tDataGridColumn[] = [
  {
  id: 'timestamp',
+ isSortable: true,
+ defaultSortDirection: 'desc'
  },
  {
  id: 'agent.id',

plugins/main/public/components/overview/github/panel/config/drilldown-action.tsx

@@ -163,7 +163,11 @@ export const DrilldownConfigAction = (drilldownProps: ModuleConfigProps) => {
  component: () => {
 
  const defaultTableColumns = [
- { id: 'timestamp' },
+ {
+ id: 'timestamp',
+ isSortable: true,
+ defaultSortDirection: 'desc',
+ },
  { id: 'rule.description' },
  { id: 'data.github.org', displayAsText: 'Organization' },
  { id: 'data.github.repo', displayAsText: 'Repository' },

plugins/main/public/components/overview/github/panel/config/drilldown-actor.tsx

@@ -166,7 +166,11 @@ export const DrilldownConfigActor = (drilldownProps: ModuleConfigProps) => {
  width: 100,
  component: () => {
  const defaultTableColumns = [
- { id: 'timestamp' },
+ {
+ id: 'timestamp',
+ isSortable: true,
+ defaultSortDirection: 'desc',
+ },
  { id: 'rule.description' },
  { id: 'data.github.org', displayAsText: 'Organization' },
  { id: 'data.github.repo', displayAsText: 'Repository' },

plugins/main/public/components/overview/github/panel/config/drilldown-organization.tsx

@@ -169,7 +169,11 @@ export const DrilldownConfigOrganization = (
  width: 100,
  component: () => {
  const defaultTableColumns = [
- { id: 'timestamp' },
+ {
+ id: 'timestamp',
+ isSortable: true,
+ defaultSortDirection: 'desc',
+ },
  { id: 'rule.description' },
  { id: 'data.github.repo', displayAsText: 'Repository' },
  { id: 'data.github.actor', displayAsText: 'Actor' },