Agent view Mitre ATT&CK exception (#7116)

* add a validation to filterParams and filterParams.filters * add key to map * update changelog * change url * Fix url from endpoint summary to dashboard and events in mitre * Correction of link to technique in intellicense flyout * Go to tactics in intellicense, clean code and eui accordion start open * clean code * clean code * update changelog * clean code * fix card endpoint summary * update changelog * rename function * rename function goToTechniqueInIntelligence * rename function goToTechniqueInIntelligence --------- Co-authored-by: Federico Rodriguez <[email protected]>
wazuh · Oct 29, 2024 · bd44194 · bd44194
1 parent 8fd557d
commit bd44194
Show file tree

Hide file tree

Showing 4 changed files with 203 additions and 112 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -38,6 +38,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - 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)
 - Fixed filter management to prevent hiding when adding multiple filters [#7077](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7077)
+- Fixed the Mitre ATT&CK exception in the agent view, the redirections of ID, Tactics, Dashboard Icon and Event Icon in the drop-down menu and the card not displaying information when the flyout was opened [#7116](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7116)
 - Fixed vulnerabilities inventory table scroll [#7118](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7118)
 - Fixed the filter are displayed cropped on screens of 575px to 767px in vulnerability detection module [#7047](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7047)
 - Fixed ability to filter from files inventory details flyout of File Integrity Monitoring [#7119](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7119)

diff --git a/plugins/main/public/components/common/welcome/components/mitre_top/mitre-top.tsx b/plugins/main/public/components/common/welcome/components/mitre_top/mitre-top.tsx
@@ -25,6 +25,12 @@ import { FlyoutTechnique } from '../../../../overview/mitre/framework/components
 import { getMitreCount } from './lib';
 import { useAsyncActionRunOnStart, useTimeFilter } from '../../../hooks';
 import NavigationService from '../../../../../react-services/navigation-service';
+import { AppState } from '../../../../../react-services';
+import { mitreAttack } from '../../../../../utils/applications';
+import {
+  FILTER_OPERATOR,
+  PatternDataSourceFilterManager,
+} from '../../../data-source/pattern/pattern-data-source-filter-manager';
 
 const getTacticsData = async (agentId, timeFilter) => {
   return await getMitreCount(agentId, timeFilter, undefined);
@@ -103,37 +109,47 @@ const MitreTopTacticsTechniques = ({
 
   const [showTechniqueDetails, setShowTechniqueDetails] = useState<string>('');
 
-  if (showTechniqueDetails) {
-    const onChangeFlyout = () => {
-      setShowTechniqueDetails('');
-    };
-
-    const openDiscover = (e, techniqueID) => {
-      NavigationService.getInstance().navigateToModule(e, 'overview', {
-        tab: 'mitre',
-        tabView: 'discover',
-        filters: { 'rule.mitre.id': techniqueID },
-      });
-    };
-
-    const openDashboard = (e, techniqueID) => {
-      NavigationService.getInstance().navigateToModule(e, 'overview', {
-        tab: 'mitre',
-        tabView: 'dashboard',
-        filters: { 'rule.mitre.id': techniqueID },
-      });
-    };
-    return (
-      <FlyoutTechnique
-        openDashboard={(e, itemId) => openDashboard(e, itemId)}
-        openDiscover={(e, itemId) => openDiscover(e, itemId)}
-        implicitFilters={[{ 'agent.id': agentId }]}
-        agentId={agentId}
-        onChangeFlyout={onChangeFlyout}
-        currentTechnique={showTechniqueDetails}
-      />
-    );
-  }
+  const onChangeFlyout = () => {
+    setShowTechniqueDetails('');
+  };
+
+  const goToDashboardWithFilter = async (e, techniqueID) => {
+    const indexPatternId = AppState.getCurrentPattern();
+    const filters = [
+      PatternDataSourceFilterManager.createFilter(
+        FILTER_OPERATOR.IS,
+        `rule.mitre.id`,
+        techniqueID,
+        indexPatternId,
+      ),
+    ];
+
+    const params = `tab=mitre&tabView=dashboard&agentId=${agentId}&_g=${PatternDataSourceFilterManager.filtersToURLFormat(
+      filters,
+    )}`;
+    NavigationService.getInstance().navigateToApp(mitreAttack.id, {
+      path: `#/overview?${params}`,
+    });
+  };
+
+  const goToEventsWithFilter = async (e, techniqueID) => {
+    const indexPatternId = AppState.getCurrentPattern();
+    const filters = [
+      PatternDataSourceFilterManager.createFilter(
+        FILTER_OPERATOR.IS,
+        `rule.mitre.id`,
+        techniqueID,
+        indexPatternId,
+      ),
+    ];
+
+    const params = `tab=mitre&tabView=events&agentId=${agentId}&_g=${PatternDataSourceFilterManager.filtersToURLFormat(
+      filters,
+    )}`;
+    NavigationService.getInstance().navigateToApp(mitreAttack.id, {
+      path: `#/overview?${params}`,
+    });
+  };
 
   if (getData.running) {
     return (
@@ -180,6 +196,16 @@ const MitreTopTacticsTechniques = ({
             </EuiFacetButton>
           ))}
         </EuiFlexItem>
+        {showTechniqueDetails && (
+          <FlyoutTechnique
+            openDashboard={(e, itemId) => goToDashboardWithFilter(e, itemId)}
+            openDiscover={(e, itemId) => goToEventsWithFilter(e, itemId)}
+            implicitFilters={[{ 'agent.id': agentId }]}
+            agentId={agentId}
+            onChangeFlyout={onChangeFlyout}
+            currentTechnique={showTechniqueDetails}
+          />
+        )}
       </EuiFlexGroup>
     </>
   );

diff --git a/...ew/mitre/framework/components/techniques/components/flyout-technique/flyout-technique.tsx b/...ew/mitre/framework/components/techniques/components/flyout-technique/flyout-technique.tsx
@@ -9,7 +9,7 @@
  *
  * Find more information about this on the LICENSE file.
  */
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useEffect, useState, useMemo, Fragment } from 'react';
 import $ from 'jquery';
 import {
   EuiFlyoutHeader,
@@ -39,14 +39,20 @@ import {
   techniquesColumns,
   agentTechniquesColumns,
 } from './flyout-technique-columns';
-import { PatternDataSource } from '../../../../../../../../components/common/data-source';
+import {
+  FILTER_OPERATOR,
+  PatternDataSourceFilterManager,
+  PatternDataSource,
+} from '../../../../../../../../components/common/data-source';
 import { WazuhFlyoutDiscover } from '../../../../../../../common/wazuh-discover/wz-flyout-discover';
 import { tFilterParams } from '../../../../mitre';
 import TechniqueRowDetails from './technique-row-details';
 import { buildPhraseFilter } from '../../../../../../../../../../../src/plugins/data/common';
 import store from '../../../../../../../../redux/store';
 import NavigationService from '../../../../../../../../react-services/navigation-service';
 import { wzDiscoverRenderColumns } from '../../../../../../../common/wazuh-discover/render-columns';
+import { AppState } from '../../../../../../../../react-services';
+import { mitreAttack } from '../../../../../../../../utils/applications';
 import { setFilters } from '../../../../../../../common/search-bar/set-filters';
 
 type tFlyoutTechniqueProps = {
@@ -258,6 +264,42 @@ export const FlyoutTechnique = (props: tFlyoutTechniqueProps) => {
       : addRenderColumn(techniquesColumns);
   };
 
+  const goToTechniqueInIntelligence = async (e, currentTechnique) => {
+    const indexPatternId = AppState.getCurrentPattern();
+    const filters = [
+      PatternDataSourceFilterManager.createFilter(
+        FILTER_OPERATOR.IS,
+        `rule.mitre.id`,
+        currentTechnique,
+        indexPatternId,
+      ),
+    ];
+    const params = `tab=mitre&tabView=intelligence&tabRedirect=techniques&idToRedirect=${currentTechnique}&_g=${PatternDataSourceFilterManager.filtersToURLFormat(
+      filters,
+    )}`;
+    NavigationService.getInstance().navigateToApp(mitreAttack.id, {
+      path: `#/overview?${params}`,
+    });
+  };
+
+  const goToTacticInIntelligence = async (e, tactic) => {
+    const indexPatternId = AppState.getCurrentPattern();
+    const filters = [
+      PatternDataSourceFilterManager.createFilter(
+        FILTER_OPERATOR.IS,
+        `rule.mitre.id`,
+        tactic,
+        indexPatternId,
+      ),
+    ];
+    const params = `tab=mitre&tabView=intelligence&tabRedirect=tactics&idToRedirect=${
+      tactic.id
+    }&_g=${PatternDataSourceFilterManager.filtersToURLFormat(filters)}`;
+    NavigationService.getInstance().navigateToApp(mitreAttack.id, {
+      path: `#/overview?${params}`,
+    });
+  };
+
   const renderBody = () => {
     const { currentTechnique } = props;
     const { techniqueData } = state;
@@ -271,16 +313,7 @@ export const FlyoutTechnique = (props: tFlyoutTechniqueProps) => {
           >
             <EuiLink
               onClick={e => {
-                NavigationService.getInstance().navigateToModule(
-                  e,
-                  'overview',
-                  {
-                    tab: 'mitre',
-                    tabView: 'intelligence',
-                    tabRedirect: 'techniques',
-                    idToRedirect: currentTechnique,
-                  },
-                );
+                goToTechniqueInIntelligence(e, currentTechnique);
                 e.stopPropagation();
               }}
             >
@@ -294,31 +327,22 @@ export const FlyoutTechnique = (props: tFlyoutTechniqueProps) => {
         description: techniqueData.tactics
           ? techniqueData.tactics.map(tactic => {
               return (
-                <>
+                <Fragment key={tactic.id}>
                   <EuiToolTip
                     position='top'
                     content={`Open ${tactic.name} details in the Intelligence section`}
                   >
                     <EuiLink
                       onClick={e => {
-                        NavigationService.getInstance().navigateToModule(
-                          e,
-                          'overview',
-                          {
-                            tab: 'mitre',
-                            tabView: 'intelligence',
-                            tabRedirect: 'tactics',
-                            idToRedirect: tactic.id,
-                          },
-                        );
+                        goToTacticInIntelligence(e, tactic);
                         e.stopPropagation();
                       }}
                     >
                       {tactic.name}
                     </EuiLink>
                   </EuiToolTip>
                   <br />
-                </>
+                </Fragment>
               );
             })
           : '',
@@ -332,12 +356,12 @@ export const FlyoutTechnique = (props: tFlyoutTechniqueProps) => {
       <EuiFlyoutBody>
         <EuiAccordion
           id='details'
+          initialIsOpen={true}
           buttonContent={
             <EuiTitle size='s'>
               <h3>Technique details</h3>
             </EuiTitle>
           }
-          initialIsOpen={true}
         >
           <div className='flyout-row details-row'>
             <EuiFlexGroup direction='column' gutterSize='none'>
@@ -405,7 +429,7 @@ export const FlyoutTechnique = (props: tFlyoutTechniqueProps) => {
             DataSource={PatternDataSource}
             tableColumns={getDiscoverColumns()}
             filterManager={filterManager}
-            initialFetchFilters={filterParams.filters}
+            initialFetchFilters={filterParams?.filters || []}
             expandedRowComponent={expandedRow}
           />
         </EuiAccordion>