Apply document header in flyout details

wazuh · Jul 16, 2024 · 30a98e2 · 30a98e2
1 parent 2b42c03
commit 30a98e2
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 24 deletions.
diff --git a/plugins/main/public/components/common/wazuh-data-grid/wz-data-grid.tsx b/plugins/main/public/components/common/wazuh-data-grid/wz-data-grid.tsx
@@ -11,6 +11,7 @@ import {
   EuiTitle,
   EuiFlyoutBody,
   EuiFlexGroup,
+  EuiLink
 } from '@elastic/eui';
 import { useDataGrid, exportSearchToCSV, tDataGridColumn } from '../data-grid';
 import { getWazuhCorePlugin } from '../../../kibana-services';
@@ -30,6 +31,7 @@ import { DocumentViewTableAndJson } from '../wazuh-discover/components/document-
 import DiscoverDataGridAdditionalControls from '../wazuh-discover/components/data-grid-additional-controls';
 import './wazuh-data-grid.scss';
 import { wzDiscoverRenderColumns } from '../wazuh-discover/render-columns';
+import DocDetailsHeader from '../wazuh-discover/components/doc-details-header';
 
 export const MAX_ENTRIES_PER_QUERY = 10000;
 
@@ -180,7 +182,10 @@ const WazuhDataGrid = (props: tWazuhDataGridProps) => {
         <EuiFlyout onClose={() => setInspectedHit(undefined)} size='m'>
           <EuiFlyoutHeader>
             <EuiTitle>
-              <h2>Document Details</h2>
+              <DocDetailsHeader
+                doc={inspectedHit}
+                indexPattern={indexPattern}
+              />
             </EuiTitle>
           </EuiFlyoutHeader>
           <EuiFlyoutBody>

diff --git a/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx b/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx
@@ -12,6 +12,7 @@ import {
   EuiFlyoutHeader,
   EuiTitle,
   EuiPanel,
+  EuiLink
 } from '@elastic/eui';
 import { IntlProvider } from 'react-intl';
 import { IndexPattern } from '../../../../../../src/plugins/data/common';
@@ -43,6 +44,7 @@ import {
 import DiscoverDataGridAdditionalControls from './components/data-grid-additional-controls';
 import { wzDiscoverRenderColumns } from './render-columns';
 import { WzSearchBar } from '../search-bar';
+import DocDetailsHeader from './components/doc-details-header';
 
 export const MAX_ENTRIES_PER_QUERY = 10000;
 
@@ -267,9 +269,10 @@ const WazuhDiscoverComponent = (props: WazuhDiscoverProps) => {
           {inspectedHit && (
             <EuiFlyout onClose={() => setInspectedHit(undefined)} size='m'>
               <EuiFlyoutHeader>
-                <EuiTitle>
-                  <h2>Document Details</h2>
-                </EuiTitle>
+                <DocDetailsHeader
+                  doc={inspectedHit}
+                  indexPattern={dataSource?.indexPattern}
+                />
               </EuiFlyoutHeader>
               <EuiFlyoutBody>
                 <EuiFlexGroup direction='column'>

diff --git a/plugins/main/public/components/overview/threat-hunting/dashboard/dashboard.tsx b/plugins/main/public/components/overview/threat-hunting/dashboard/dashboard.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { getPlugins, getWazuhCorePlugin } from '../../../../kibana-services';
+import { getPlugins, getWazuhCorePlugin, getCore } from '../../../../kibana-services';
 import { ViewMode } from '../../../../../../../src/plugins/embeddable/public';
 import { SearchResponse } from '../../../../../../../src/core/server';
 import { IndexPattern } from '../../../../../../../src/plugins/data/common';
@@ -19,6 +19,7 @@ import {
   EuiFlyoutHeader,
   EuiTitle,
   EuiButtonEmpty,
+  EuiLink
 } from '@elastic/eui';
 import {
   ErrorFactory,
@@ -55,6 +56,8 @@ import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-
 import { wzDiscoverRenderColumns } from '../../../common/wazuh-discover/render-columns';
 import { WzSearchBar } from '../../../common/search-bar';
 
+import DocDetailsHeader from '../../../common/wazuh-discover/components/doc-details-header';
+
 const plugins = getPlugins();
 
 const DashboardByRenderer = plugins.dashboard.DashboardContainerByValueRenderer;
@@ -228,11 +231,10 @@ const DashboardTH: React.FC = () => {
           <DiscoverNoResults />
         ) : null}
         <div
-          className={`th-container ${
-            !isDataSourceLoading && dataSource && results?.hits?.total > 0
-              ? ''
-              : 'wz-no-display'
-          }`}
+          className={`th-container ${!isDataSourceLoading && dataSource && results?.hits?.total > 0
+            ? ''
+            : 'wz-no-display'
+            }`}
         >
           <SampleDataWarning />
           <div className='th-dashboard-responsive'>
@@ -293,20 +295,20 @@ const DashboardTH: React.FC = () => {
                       <HitsCounter
                         hits={results?.hits?.total}
                         showResetButton={false}
-                        onResetQuery={() => {}}
+                        onResetQuery={() => { }}
                         tooltip={
                           results?.hits?.total &&
-                          results?.hits?.total > MAX_ENTRIES_PER_QUERY
+                            results?.hits?.total > MAX_ENTRIES_PER_QUERY
                             ? {
-                                ariaLabel: 'Warning',
-                                content: `The query results has exceeded the limit of ${formatNumWithCommas(
-                                  MAX_ENTRIES_PER_QUERY,
-                                )} hits. To provide a better experience the table only shows the first ${formatNumWithCommas(
-                                  MAX_ENTRIES_PER_QUERY,
-                                )} hits.`,
-                                iconType: 'alert',
-                                position: 'top',
-                              }
+                              ariaLabel: 'Warning',
+                              content: `The query results has exceeded the limit of ${formatNumWithCommas(
+                                MAX_ENTRIES_PER_QUERY,
+                              )} hits. To provide a better experience the table only shows the first ${formatNumWithCommas(
+                                MAX_ENTRIES_PER_QUERY,
+                              )} hits.`,
+                              iconType: 'alert',
+                              position: 'top',
+                            }
                             : undefined
                         }
                       />
@@ -332,9 +334,10 @@ const DashboardTH: React.FC = () => {
             {inspectedHit && (
               <EuiFlyout onClose={() => setInspectedHit(undefined)} size='m'>
                 <EuiFlyoutHeader>
-                  <EuiTitle>
-                    <h2>Document details</h2>
-                  </EuiTitle>
+                  <DocDetailsHeader
+                    doc={inspectedHit}
+                    indexPattern={dataSource?.indexPattern}
+                  />
                 </EuiFlyoutHeader>
                 <EuiFlyoutBody>
                   <EuiFlexGroup direction='column'>