Fix minor styles

CHANGELOG.md

@@ -41,6 +41,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Implement new data source feature on MITRE ATT&CK module [#6482](https:/wazuh/wazuh-dashboard-plugins/pull/6482)
 - Upgraded versions of `follow-redirects` and `es5-ext` [#6626](https:/wazuh/wazuh-dashboard-plugins/pull/6626)
 - Changed agent log collector socket API response controller component [#6660](https:/wazuh/wazuh-dashboard-plugins/pull/6660)
+- Improve margins and paddins in the Events, Inventory and Control tabs [#6708](https:/wazuh/wazuh-dashboard-plugins/pull/6708)
 
 ### Fixed
 

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

@@ -27,6 +27,7 @@ import { DiscoverNoResults } from '../no-results/no-results';
 import { DocumentViewTableAndJson } from '../wazuh-discover/components/document-view-table-and-json';
 import DiscoverDataGridAdditionalControls from '../wazuh-discover/components/data-grid-additional-controls';
 import './wazuh-data-grid.scss';
+import { wzDiscoverRenderColumns } from '../wazuh-discover/render-columns';
 
 export const MAX_ENTRIES_PER_QUERY = 10000;
 
@@ -78,6 +79,7 @@ const WazuhDataGrid = (props: tWazuhDataGridProps) => {
  const dataGridProps = useDataGrid({
  ariaLabelledBy: 'Actions data grid',
  defaultColumns,
+ renderColumns: wzDiscoverRenderColumns,
  results,
  indexPattern: indexPattern as IndexPattern,
  DocViewInspectButton,

plugins/main/public/components/common/wazuh-discover/discover.scss

@@ -1,28 +1,28 @@
 .discoverContainer {
-  height: calc(100vh - 104px);
+ height: calc(100vh - 104px);
 
-  .euiDataGrid--fullScreen {
-  height: calc(100vh - 49px);
-  bottom: 0;
-  top: auto;
-  }
- 
-  .discoverDataGrid {
-  height: calc(100vh - 496px);
-  }
+ .euiDataGrid--fullScreen {
+ height: calc(100vh - 49px);
+ bottom: 0;
+ top: auto;
+ }
+
+ .discoverDataGrid {
+ height: calc(100vh - 464px);
+ }
 
- .discoverChartContainer {
- min-height: 234px;
- .dshLayout-isMaximizedPanel {
- top: 0;
- left: 0;
- min-height: calc(100vh - 49px);
- position: fixed;
- z-index: 9999;
- }
+ .discoverChartContainer {
+ min-height: 234px;
+ .dshLayout-isMaximizedPanel {
+ top: 0;
+ left: 0;
+ min-height: calc(100vh - 49px);
+ position: fixed;
+ z-index: 9999;
  }
+ }
 }
 
 .headerIsExpanded .discoverContainer {
-  height: calc(100vh - 153px);
+ height: calc(100vh - 153px);
 }

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

@@ -11,7 +11,6 @@ import {
  EuiFlyoutBody,
  EuiFlyoutHeader,
  EuiTitle,
- EuiSpacer,
  EuiPanel,
 } from '@elastic/eui';
 import { IntlProvider } from 'react-intl';
@@ -191,6 +190,8 @@ const WazuhDiscoverComponent = (props: WazuhDiscoverProps) => {
  restrictWidth='100%'
  fullHeight={true}
  grow
+ paddingSize='none'
+ pageContentProps={{ color: 'transparent' }}
  >
  <>
  {isDataSourceLoading ? (
@@ -210,47 +211,48 @@ const WazuhDiscoverComponent = (props: WazuhDiscoverProps) => {
  <DiscoverNoResults timeFieldName={timeField} queryLanguage={''} />
  ) : null}
  {!isDataSourceLoading && dataSource && results?.hits?.total > 0 ? (
- <>
- <EuiFlexItem grow={false} className='discoverChartContainer'>
- <EuiPanel
- hasBorder={false}
- hasShadow={false}
- color='transparent'
- paddingSize='none'
- >
- <EuiPanel>
- <DashboardByRenderer
- input={histogramChartInput(
- dataSource?.title,
- fetchFilters,
- query,
- dateRangeFrom,
- dateRangeTo,
- )}
- />
+ <EuiPanel paddingSize='s' hasShadow={false} hasBorder={false} color="transparent">
+ <EuiFlexGroup gutterSize='s' direction='column'>
+ <EuiFlexItem grow={false} className='discoverChartContainer'>
+ <EuiPanel
+ hasBorder={false}
+ hasShadow={false}
+ color='transparent'
+ paddingSize='none'
+ >
+ <EuiPanel>
+ <DashboardByRenderer
+ input={histogramChartInput(
+ dataSource?.title,
+ fetchFilters,
+ query,
+ dateRangeFrom,
+ dateRangeTo,
+ )}
+ />
+ </EuiPanel>
  </EuiPanel>
- </EuiPanel>
- </EuiFlexItem>
- <EuiSpacer size='m' />
- <div className='discoverDataGrid'>
- <EuiDataGrid
- {...dataGridProps}
- className={sideNavDocked ? 'dataGridDockedNav' : ''}
- toolbarVisibility={{
- additionalControls: (
- <>
- <DiscoverDataGridAdditionalControls
- totalHits={results.hits.total}
- isExporting={isExporting}
- onClickExportResults={onClickExportResults}
- maxEntriesPerQuery={MAX_ENTRIES_PER_QUERY}
- />
- </>
- ),
- }}
- />
- </div>
- </>
+ </EuiFlexItem>
+ <EuiFlexItem grow={false} className='discoverDataGrid'>
+ <EuiDataGrid
+ {...dataGridProps}
+ className={sideNavDocked ? 'dataGridDockedNav' : ''}
+ toolbarVisibility={{
+ additionalControls: (
+ <>
+ <DiscoverDataGridAdditionalControls
+ totalHits={results.hits.total}
+ isExporting={isExporting}
+ onClickExportResults={onClickExportResults}
+ maxEntriesPerQuery={MAX_ENTRIES_PER_QUERY}
+ />
+ </>
+ ),
+ }}
+ />
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ </EuiPanel>
  ) : null}
  {inspectedHit && (
  <EuiFlyout onClose={() => setInspectedHit(undefined)} size='m'>

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

@@ -271,74 +271,74 @@ export const ComplianceTable = withAgentSupportModule(props => {
  ]);
 
  return (
- <>
- <I18nProvider>
- <EuiFlexGroup>
- <EuiFlexItem>
- {isDataSourceLoading && !dataSource ? (
-  <LoadingSpinner />
- ) : (
- <div className='wz-search-bar hide-filter-control'>
- <SearchBar
-  appName='compliance-controls'
-  {...searchBarProps}
-  showDatePicker={true}
-  showQueryInput={true}
-  showQueryBar={true}
-  showSaveQuery={true}
-  />
-  </div>
-  )}
-  </EuiFlexItem>
- </EuiFlexGroup>
- <EuiFlexGroup style={{ margin: '0 8px' }}>
- <EuiFlexItem style={{ width: 'calc(100% - 24px)' }}>
- <EuiPanel paddingSize='none'>
- {!!Object.keys(complianceData.complianceObject).length && (
- <EuiFlexGroup>
- <EuiFlexItem
- grow={false}
- style={{
- width: '15%',
- minWidth: 145,
- maxHeight: 'calc(100vh - 320px)',
- overflowX: 'hidden',
- }}
- >
- <ComplianceRequirements
- section={props.section}
- onChangeSelectedRequirements={selectedRequirements =>
- setComplianceData(state => ({
- ...state,
- selectedRequirements,
- }))
- }
- requirementsCount={action.data || []}
- loadingAlerts={action.running}
- {...complianceData}
- />
- </EuiFlexItem>
- <EuiFlexItem style={{ width: '15%' }}>
- <ComplianceSubrequirements
- section={props.section}
- onSelectedTabChanged={id =>
- props.onSelectedTabChanged(id)
- }
- requirementsCount={action.data || []}
- loadingAlerts={action.running}
- fetchFilters={fetchFilters}
- getRegulatoryComplianceRequirementFilter={
- getRegulatoryComplianceRequirementFilter
- }
- {...complianceData}
- />
- </EuiFlexItem>
- </EuiFlexGroup>
- )}
- </EuiPanel>
- </EuiFlexItem>
- </EuiFlexGroup>
- </I18nProvider>
- </>
+ <I18nProvider>
+ <>
+ <EuiPanel paddingSize='none' hasShadow={false} hasBorder={false} color="transparent">
+ {isDataSourceLoading && !dataSource ? (
+ <LoadingSpinner />
+ ) : (
+ <div className='wz-search-bar hide-filter-control'>
+ <SearchBar
+ appName='compliance-controls'
+ {...searchBarProps}
+ showDatePicker={true}
+ showQueryInput={true}
+ showQueryBar={true}
+ showSaveQuery={true}
+ />
+ </div>
+ )}
+ </EuiPanel>
+ <EuiPanel paddingSize='s' hasShadow={false} hasBorder={false} color="transparent">
+  <EuiPanel paddingSize='none'>
+  <EuiFlexGroup paddingSize='none'>
+  <EuiFlexItem style={{ width: 'calc(100% - 24px)' }}>
+  {!!Object.keys(complianceData.complianceObject).length && (
+  <EuiFlexGroup>
+  <EuiFlexItem
+  grow={false}
+  style={{
+  width: '15%',
+  minWidth: 145,
+  maxHeight: 'calc(100vh - 320px)',
+  overflowX: 'hidden',
+ }}
+ >
+  <ComplianceRequirements
+  section={props.section}
+  onChangeSelectedRequirements={selectedRequirements =>
+  setComplianceData(state => ({
+  ...state,
+  selectedRequirements,
+ }))
+ }
+  requirementsCount={action.data || []}
+  loadingAlerts={action.running}
+  {...complianceData}
+ />
+ </EuiFlexItem>
+  <EuiFlexItem style={{ width: '15%' }}>
+  <ComplianceSubrequirements
+  section={props.section}
+  onSelectedTabChanged={id =>
+  props.onSelectedTabChanged(id)
+ }
+  requirementsCount={action.data || []}
+  loadingAlerts={action.running}
+  fetchFilters={fetchFilters}
+  getRegulatoryComplianceRequirementFilter={
+  getRegulatoryComplianceRequirementFilter
+ }
+  {...complianceData}
+ />
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ )}
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ </EuiPanel>
+ </EuiPanel>
+ </>
+ </I18nProvider>
  );
 });

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

@@ -174,17 +174,7 @@ export const DrilldownConfigAction = (drilldownProps: ModuleConfigProps) => {
  { id: 'data.github.repo', displayAsText: 'Repository' },
  { id: 'data.github.actor', displayAsText: 'Actor' },
  { id: 'rule.level' },
- {
- id: 'rule.id', render: value => (
- <RedirectAppLinks application={getCore().application}>
- <EuiLink
- href={`${rules.id}#/manager/?tab=rules&redirectRule=${value}`}
- >
- {value}
- </EuiLink >
- </RedirectAppLinks>
- ),
- },
+ { id: 'rule.id' },
  ]
 
  return (

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

@@ -172,17 +172,7 @@ export const DrilldownConfigActor = (drilldownProps: ModuleConfigProps) => {
  { id: 'data.github.repo', displayAsText: 'Repository' },
  { id: 'data.github.action', displayAsText: 'Action' },
  { id: 'rule.level' },
- {
- id: 'rule.id', render: value => (
- <RedirectAppLinks application={getCore().application}>
- <EuiLink
- href={`${rules.id}#/manager/?tab=rules&redirectRule=${value}`}
- >
- {value}
- </EuiLink >
- </RedirectAppLinks>
- ),
- }
+ { id: 'rule.id' }
  ]
 
  return (

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

@@ -175,17 +175,7 @@ export const DrilldownConfigOrganization = (
  { id: 'data.github.actor', displayAsText: 'Actor' },
  { id: 'data.github.action', displayAsText: 'Action' },
  { id: 'rule.level' },
- {
- id: 'rule.id', render: value => (
- <RedirectAppLinks application={getCore().application}>
- <EuiLink
- href={`${rules.id}#/manager/?tab=rules&redirectRule=${value}`}
- >
- {value}
- </EuiLink >
- </RedirectAppLinks>
- ),
- },
+ { id: 'rule.id' },
  ]
 
  return (

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

@@ -173,15 +173,7 @@ export const DrilldownConfigRepository = (
  { id: 'data.github.actor', displayAsText: 'Actor' },
  { id: 'data.github.action', displayAsText: 'Action' },
  { id: 'rule.level' },
- {
- id: 'rule.id', render: value => (
- <EuiLink
- href={`${rules.id}#/manager/?tab=rules&redirectRule=${value}`}
- >
- {value}
- </EuiLink >
- ),
- },
+ { id: 'rule.id' },
  ]
 
  return (