Merge branch '4.10.0' into enhancement/7080-add-filter-by-value-to-do…

…cument-details-fields
wazuh · Oct 14, 2024 · daf4529 · daf4529
2 parents c20b626 + f929855
commit daf4529
Show file tree

Hide file tree

Showing 7 changed files with 392 additions and 400 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,13 +24,15 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Changed the agents summary in overview with no results to an agent deployment help message. [#7041](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7041)
 - Changed malware feature description [#7036](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7036)
 - Changed the font size of the kpi subtitles and the features descriptions [#7033](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7033)
+- Changed feature container margins to ensure consistent separation and uniform design. [#7034](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7034)
 
 ### Fixed
 
 - Fixed read-only users could not access to Statistics application [#7001](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7001)
 - Fixed no-agent-alert spawn with selected agent in agent-welcome view [#7029](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7029)
 - Fixed security policy exception when it contained deprecated actions [#7042](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7042)
-- Fix export formatted csv data with special characters from tables [#7048](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7048)
+- Fixed export formatted csv data with special characters from tables [#7048](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7048)
+- Fixed column reordering feature [#7072](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7072)
 
 ### Removed
 

diff --git a/plugins/main/public/components/common/data-grid/use-data-grid.tsx b/plugins/main/public/components/common/data-grid/use-data-grid.tsx
@@ -65,23 +65,23 @@ export const useDataGrid = (props: tDataGridProps): EuiDataGridProps => {
     indexPattern,
     DocViewInspectButton,
     results,
-    defaultColumns: columns,
+    defaultColumns,
     renderColumns,
     useDefaultPagination = false,
     pagination: paginationProps = {},
     filters = [],
     setFilters = () => {},
   } = props;
-  const [columnVisibility, setVisibility] = useState(() =>
-    columns.map(({ id }) => id),
+  const [visibleColumns, setVisibleColumns] = useState<string[]>(() =>
+    defaultColumns.map(({ id }) => id),
   );
   /** Rows */
   const [rows, setRows] = useState<any[]>([]);
   const rowCount = results ? (results?.hits?.total as number) : 0;
   /** Sorting **/
   // get default sorting from default columns
   const getDefaultSorting = () => {
-    const defaultSort = columns.find(
+    const defaultSort = defaultColumns.find(
       column => column.isSortable || column.defaultSortDirection,
     );
     return defaultSort
@@ -110,6 +110,53 @@ export const useDataGrid = (props: tDataGridProps): EuiDataGridProps => {
         },
   );
 
+  const sortFirstMatchedColumns = (
+    firstMatchedColumns: tDataGridColumn[],
+    visibleColumnsOrdered: string[],
+  ) => {
+    firstMatchedColumns.sort(
+      (a, b) =>
+        visibleColumnsOrdered.indexOf(a.id) -
+        visibleColumnsOrdered.indexOf(b.id),
+    );
+    return firstMatchedColumns;
+  };
+
+  const orderFirstMatchedColumns = (
+    columns: tDataGridColumn[],
+    visibleColumnsOrdered: string[],
+  ) => {
+    const firstMatchedColumns: tDataGridColumn[] = [];
+    const nonMatchedColumns: tDataGridColumn[] = [];
+    const visibleColumnsSet = new Set(visibleColumnsOrdered);
+
+    for (let i = 0; i < columns.length; i++) {
+      const column = columns[i];
+      if (visibleColumnsSet.has(column.id)) {
+        firstMatchedColumns.push(column);
+      } else {
+        nonMatchedColumns.push(column);
+      }
+    }
+
+    return [
+      ...sortFirstMatchedColumns(firstMatchedColumns, visibleColumnsOrdered),
+      ...nonMatchedColumns,
+    ];
+  };
+
+  const getColumns = useMemo(() => {
+    return parseColumns(
+      indexPattern?.fields || [],
+      defaultColumns,
+      indexPattern,
+      rows,
+      pagination.pageSize,
+      filters,
+      setFilters,
+    );
+  }, [indexPattern, rows, pagination.pageSize, filters, setFilters]);
+
   const onChangeItemsPerPage = useMemo(
     () => (pageSize: number) =>
       setPagination(pagination => ({
@@ -149,7 +196,7 @@ export const useDataGrid = (props: tDataGridProps): EuiDataGridProps => {
         rowsParsed,
       );
       // check if column have render method initialized
-      const column = columns.find(column => column.id === columnId);
+      const column = defaultColumns.find(column => column.id === columnId);
       if (column && column.render) {
         return column.render(fieldFormatted, rowsParsed[relativeRowIndex]);
       }
@@ -198,53 +245,16 @@ export const useDataGrid = (props: tDataGridProps): EuiDataGridProps => {
     ];
   }, [results]);
 
-  const filterColumns = () => {
-    const allColumns = parseColumns(
-      indexPattern?.fields || [],
-      columns,
-      indexPattern,
-      rows,
-      pagination.pageSize,
-      filters,
-      setFilters,
-    );
-    const columnMatch = [];
-    const columnNonMatch = [];
-
-    for (const item of allColumns) {
-      if (columnVisibility.includes(item.name)) {
-        columnMatch.push(item);
-      } else {
-        columnNonMatch.push(item);
-      }
-    }
-
-    return [...columnMatch, ...columnNonMatch];
-  };
-
-  const defaultColumnsPosition = (columnsVisibility, defaultColumns) => {
-    const defaults = defaultColumns
-      .map(item => item.id)
-      .filter(id => columnsVisibility.includes(id));
-
-    const nonDefaults = columnsVisibility.filter(
-      item => !defaultColumns.map(item => item.id).includes(item),
-    );
-
-    return [...defaults, ...nonDefaults];
-  };
-
   return {
     'aria-labelledby': props.ariaLabelledBy,
-    columns: filterColumns(),
+    columns: orderFirstMatchedColumns(getColumns, visibleColumns),
     columnVisibility: {
-      visibleColumns: defaultColumnsPosition(columnVisibility, columns),
-      setVisibleColumns: setVisibility,
+      visibleColumns,
+      setVisibleColumns,
     },
     renderCellValue: renderCellValue,
     leadingControlColumns: leadingControlColumns,
-    rowCount:
-      rowCount < MAX_ENTRIES_PER_QUERY ? rowCount : MAX_ENTRIES_PER_QUERY,
+    rowCount: Math.min(rowCount, MAX_ENTRIES_PER_QUERY),
     sorting: { columns: sortingColumns, onSort },
     pagination: {
       ...pagination,

diff --git a/plugins/main/public/components/common/welcome/overview-welcome.js b/plugins/main/public/components/common/welcome/overview-welcome.js
@@ -21,7 +21,6 @@ import {
   EuiSpacer,
   EuiFlexGrid,
   EuiCallOut,
-  EuiPage,
 } from '@elastic/eui';
 import './welcome.scss';
 import { withErrorBoundary, withGlobalBreadcrumb } from '../hocs';
@@ -111,63 +110,57 @@ export const OverviewWelcome = compose(
 
     render() {
       return (
-        <Fragment>
-          <EuiPage className='wz-welcome-page'>
-            <EuiFlexGroup gutterSize='l'>
-              <EuiFlexItem>
-                {this.props.agentsCountTotal === 0 && this.addAgent()}
-                <EuiFlexGroup gutterSize='none'>
-                  <EuiFlexGrid columns={2}>
-                    {appCategories.map(({ label, apps }) => (
-                      <EuiFlexItem key={label}>
-                        <EuiCard
-                          title
-                          description
-                          betaBadgeLabel={
-                            Categories.find(category => category.id === label)
-                              ?.label
-                          }
-                        >
-                          <EuiSpacer size='s' />
-                          <EuiFlexGrid columns={2}>
-                            {apps.map(app => (
-                              <EuiFlexItem key={app.id}>
-                                <RedirectAppLinks
-                                  className='flex-redirect-app-links'
-                                  application={getCore().application}
-                                >
-                                  <EuiCard
-                                    size='xs'
-                                    layout='horizontal'
-                                    icon={
-                                      <EuiIcon
-                                        size='xl'
-                                        type={app.euiIconType}
-                                      />
-                                    }
-                                    className='homSynopsis__card'
-                                    title={app.title}
-                                    href={NavigationService.getInstance().getUrlForApp(
-                                      app.id,
-                                    )}
-                                    data-test-subj={`overviewWelcome${this.strtools.capitalize(
-                                      app.id,
-                                    )}`}
-                                    description={app.description}
-                                  />
-                                </RedirectAppLinks>
-                              </EuiFlexItem>
-                            ))}
-                          </EuiFlexGrid>
-                        </EuiCard>
-                      </EuiFlexItem>
-                    ))}
-                  </EuiFlexGrid>
-                </EuiFlexGroup>
-              </EuiFlexItem>
+        <EuiFlexGroup gutterSize='l'>
+          <EuiFlexItem>
+            {this.props.agentsCountTotal === 0 && this.addAgent()}
+            <EuiFlexGroup gutterSize='none'>
+              <EuiFlexGrid columns={2}>
+                {appCategories.map(({ label, apps }) => (
+                  <EuiFlexItem key={label}>
+                    <EuiCard
+                      title
+                      description
+                      betaBadgeLabel={
+                        Categories.find(category => category.id === label)
+                          ?.label
+                      }
+                    >
+                      <EuiSpacer size='s' />
+                      <EuiFlexGrid columns={2}>
+                        {apps.map(app => (
+                          <EuiFlexItem key={app.id} grow>
+                            <RedirectAppLinks
+                              className='h-100'
+                              application={getCore().application}
+                            >
+                              <EuiCard
+                                size='xs'
+                                layout='horizontal'
+                                icon={
+                                  <EuiIcon size='xl' type={app.euiIconType} />
+                                }
+                                className='wz-module-card-title h-100'
+                                title={app.title}
+                                titleSize='xs'
+                                href={NavigationService.getInstance().getUrlForApp(
+                                  app.id,
+                                )}
+                                data-test-subj={`overviewWelcome${this.strtools.capitalize(
+                                  app.id,
+                                )}`}
+                                description={app.description}
+                              />
+                            </RedirectAppLinks>
+                          </EuiFlexItem>
+                        ))}
+                      </EuiFlexGrid>
+                    </EuiCard>
+                  </EuiFlexItem>
+                ))}
+              </EuiFlexGrid>
             </EuiFlexGroup>
-          </EuiPage>
-        </Fragment>
+          </EuiFlexItem>
+        </EuiFlexGroup>
       );
     }
   },

diff --git a/plugins/main/public/components/common/welcome/welcome.scss b/plugins/main/public/components/common/welcome/welcome.scss
@@ -1,14 +1,3 @@
-.wz-welcome-page .euiCard .euiTitle,
-.wz-module-body .euiCard .euiTitle {
-  font-size: 16px;
-  font-weight: 400;
-}
-
-.wz-welcome-page .euiCard .euiText,
-.wz-module-body .euiCard .euiText {
-  font-family: sans-serif;
-}
-
 .wz-module-header-agent:not(.wz-module-header-agent-main) {
   background: white;
   border-bottom: 1px solid #d3dae6;
@@ -44,7 +33,6 @@ span.statWithLink:hover {
   text-decoration: underline;
 }
 
-.wz-welcome-page .flex-redirect-app-links {
-  display: flex;
-  flex-grow: 1;
+.wz-module-card-title .euiCard__content .euiTitle {
+  font-weight: 400;
 }
diff --git a/plugins/main/public/components/overview/overview.tsx b/plugins/main/public/components/overview/overview.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { EuiPage, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { getDataPlugin, getUiSettings } from '../../kibana-services';
 import { Stats } from '../../controllers/overview/components/stats';
 import { AppState, WzRequest } from '../../react-services';
@@ -158,10 +159,16 @@ export const Overview: React.FC = withRouteResolvers({
         </>
       )}
       {tab === 'welcome' && (
-        <>
-          <Stats {...agentsCounts} />
-          <OverviewWelcome {...agentsCounts} />
-        </>
+        <EuiPage paddingSize='l'>
+          <EuiFlexGroup direction='column'>
+            <EuiFlexItem>
+              <Stats {...agentsCounts} />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <OverviewWelcome {...agentsCounts} />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPage>
       )}
     </>
   );