Feature/change tactis and techniques resources

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to the Wazuh app project will be documented in this file.
 
+## Wazuh v4.3.0 - Kibana 7.10.2 , 7.11.2 - Revision 4301
+
+### Added
+
+- Create the detail section for Mitre Intelligence resources. [#3344](https://github.com/wazuh/wazuh-kibana-app/pull/3344)
+
 ## Wazuh v4.2.0 - Kibana 7.10.2 , 7.11.2 - Revision 4201
 
 ### Added
@@ -23,6 +29,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Changed position of Top users on Integrity Monitoring Top 5 user. [#2892](https://github.com/wazuh/wazuh-kibana-app/pull/2892)
 - Changed user allow_run_as way of editing. [#3080](https://github.com/wazuh/wazuh-kibana-app/pull/3080)
 - Rename some ossec references to Wazuh [#3046](https://github.com/wazuh/wazuh-kibana-app/pull/3046)
+- Changed tactis and techniques resources [#3346](https://github.com/wazuh/wazuh-kibana-app/pull/3346)
 
 ### Fixed
 

public/components/overview/mitre/components/techniques/components/flyout-technique/flyout-technique.tsx

@@ -56,6 +56,7 @@ export class FlyoutTechnique extends Component {
   props!: {
     currentTechniqueData: any
     currentTechnique: string
+    tacticsObject: any
   }
 
   filterManager: FilterManager;
@@ -118,9 +119,9 @@ export class FlyoutTechnique extends Component {
     try{
       this.setState({loading: true, techniqueData: {}});
       const { currentTechnique } = this.props;
-      const result = await WzRequest.apiReq('GET', '/mitre', {
+      const result = await WzRequest.apiReq('GET', '/mitre/techniques', {
         params: {
-          q: `id=${currentTechnique}`
+          q: `references.external_id=${currentTechnique}`
         }
       });
       const rawData = (((result || {}).data || {}).data || {}).affected_items
@@ -130,36 +131,20 @@ export class FlyoutTechnique extends Component {
     }
   }
 
-  formatTechniqueData (rawData) {
-    const { platform_name, phase_name} = rawData;
-    const { name, description, x_mitre_version: version, x_mitre_data_sources, external_references } = rawData.json;
-
-    const replaced_external_references = [];
-    let index_replaced_external_references = 0;
-    let last_citation_string = '';
-    const descriptionWithCitations = external_references.reduce((accum, reference) => {
-      return accum
-      .replace(new RegExp(`\\(Citation: ${reference.source_name}\\)`,'g'), (token) => {
-        if(last_citation_string !== token){
-          index_replaced_external_references++;
-          replaced_external_references.push({...reference, index: index_replaced_external_references});
-          last_citation_string = token;
-        }
-        return `<a style="vertical-align: super;" rel="noreferrer" class="euiLink euiLink--primary technique-reference-citation-${index_replaced_external_references}">[${String(index_replaced_external_references)}]</a>`;
-      })
-    }, description);
-    this.setState({techniqueData: { name, description: descriptionWithCitations, phase_name, platform_name, version, x_mitre_data_sources, external_references, replaced_external_references }, loading: false  })
+  findTacticName(tactics){
+    const { tacticsObject } = this.props;
+    const getTactic = (element) => {
+      const tactic = Object.values(tacticsObject).find(obj => obj.id === element);
+      return { id:tactic.references[0].external_id, name: tactic.name};
+    };
+    return tactics.reduce((tacticsObj, element) => [...tacticsObj, getTactic(element)], []);
   }
 
-  getArrayFormatted(arrayText) {
-    try {
-      const stringText = arrayText.toString();
-      const splitString = stringText.split(',');
-      const resultString = splitString.join(', ');
-      return resultString;
-    } catch (err) {
-      return arrayText;
-    }
+  formatTechniqueData (rawData) {
+    const { tactics, name, mitre_version } = rawData;
+    const tacticsObj = this.findTacticName(tactics)
+
+    this.setState({techniqueData: { name, mitre_version, tacticsObj }, loading: false  })
   }
 
   renderHeader() {
@@ -180,7 +165,7 @@ export class FlyoutTechnique extends Component {
       </EuiFlyoutHeader>
     )
   }
-  
+
   renderBody() {
     const { currentTechnique } = this.props;
     const { techniqueData } = this.state;
@@ -204,60 +189,30 @@ export class FlyoutTechnique extends Component {
         title: 'ID',
         description: ( <EuiToolTip
           position="top"
-          content={"Open " + currentTechnique + " details in a new page"}>
-          <EuiLink href={link} external target="_blank">
+          content={"Open " + currentTechnique + " details in Intelligence section"}>
+          <EuiLink onClick={(e) => {this.props.openIntelligence(e,'techniques',currentTechnique);e.stopPropagation()}}>
             {currentTechnique}
           </EuiLink>
         </EuiToolTip>)
       },
       {
-        title: 'Tactic',
-        description: this.getArrayFormatted(
-          techniqueData.phase_name
-        )
-      },
-      {
-        title: 'Platform',
-        description: this.getArrayFormatted(
-          techniqueData.platform_name
-        )
-      },
-      {
-        title: 'Data sources',
-        description: this.getArrayFormatted(
-          techniqueData.x_mitre_data_sources
-        )
+        title: 'Tactics',
+        description: techniqueData.tacticsObj ? techniqueData.tacticsObj.map(tactic => { return ( <><EuiToolTip
+          position="top"
+          content={"Open " + tactic.name + " details in a Intelligence section"}>
+          <EuiLink onClick={(e) => {this.props.openIntelligence(e,'tactics',tactic.id);e.stopPropagation()}}>
+            {tactic.name}
+          </EuiLink>
+        </EuiToolTip>
+        <br/>
+        </>)}) : ''
       },
       {
         title: 'Version',
-        description: techniqueData.version
-      },
-      {
-        title: 'Description',
-        description: formattedDescription
-      },
+        description: techniqueData.mitre_version
+      }
 
     ];
-    if(techniqueData && techniqueData.replaced_external_references && techniqueData.replaced_external_references.length > 0){
-      data.push({
-        title: 'References',
-        description: (
-          <EuiFlexGroup>
-            <EuiFlexItem>
-              {techniqueData.replaced_external_references.map((external_reference, external_reference_index) => (
-                <div key={`external_reference-${external_reference.index}`} id={`technique-reference-${external_reference.index}`}>
-                  <span>{external_reference.index}. </span>
-                  <EuiLink href={external_reference.url} target='_blank'>
-                    {external_reference.source_name}
-                  </EuiLink>
-                </div>
-              )
-              )}
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        )
-      })
-    }
     return (
       <EuiFlyoutBody className="flyout-body" >
         <EuiAccordion
@@ -279,13 +234,6 @@ export class FlyoutTechnique extends Component {
               )) || (
                 <div style={{marginBottom: 30}}>
                   <EuiDescriptionList listItems={data} />
-                  <EuiSpacer />
-                  <p>
-                    More info:{' '}
-                    <EuiLink href={link} target="_blank">
-                      {`MITRE ATT&CK - ${currentTechnique}`}
-                    </EuiLink>
-                  </p>
                 </div>
               )}
         </div>

public/components/overview/mitre/components/techniques/techniques.tsx

@@ -29,14 +29,15 @@ import {
   EuiLoadingSpinner,
 } from '@elastic/eui';
 import { FlyoutTechnique } from './components/flyout-technique/';
-import { mitreTechniques, getElasticAlerts, IFilterParams } from '../../lib'
+import { getElasticAlerts, IFilterParams } from '../../lib'
 import { ITactic } from '../../';
 import { withWindowSize } from '../../../../../components/common/hocs/withWindowSize';
 import { WzRequest } from '../../../../../react-services/wz-request';
 import {WAZUH_ALERTS_PATTERN} from '../../../../../../common/constants';
 import { AppState } from '../../../../../react-services/app-state';
 import { WzFieldSearchDelay } from '../../../../common/search'
 import { getDataPlugin } from '../../../../../kibana-services';
+import { ModuleMitreIntelligence } from '../../../mitre_attack_intelligence'
 
 export const Techniques = withWindowSize(class Techniques extends Component {
   _isMount = false;
@@ -56,6 +57,7 @@ export const Techniques = withWindowSize(class Techniques extends Component {
     hideAlerts: boolean,
     actionsOpen: string,
     filteredTechniques: boolean | [string]
+    mitreTechniques: [],
     isSearching: boolean
   }
 
@@ -70,13 +72,15 @@ export const Techniques = withWindowSize(class Techniques extends Component {
       hideAlerts: false,
       actionsOpen: "",
       filteredTechniques: false,
+      mitreTechniques: [],
       isSearching: false
     }
     this.onChangeFlyout.bind(this);
 	}
 
   async componentDidMount(){
     this._isMount = true;
+    this.getMitreTechniques()
   }
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -177,29 +181,47 @@ export const Techniques = withWindowSize(class Techniques extends Component {
     }
   }
 
+  async getMitreTechniques () {
+    const data = await WzRequest.apiReq('GET', '/mitre/techniques', {}).then(res => res).catch(err => mitreTechniques);
+    const result = (((data || {}).data || {}).data || {}).affected_items;
+    this.setState({ mitreTechniques: result })
+  }
+
+   buildObjTechniques(techniques){
+    const techniquesObj = []
+    techniques.forEach(element => {
+      const mitreObj = this.state.mitreTechniques.filter(item => item.id === element);
+      if(mitreObj.length != 0){
+        const mitreTechniqueName =  mitreObj[0].name;
+        const mitreTechniqueID = mitreObj[0].references.filter(item => item.source === "mitre-attack")[0].external_id;
+        mitreTechniqueID ? techniquesObj.push({ id : mitreTechniqueID, name: mitreTechniqueName}) : '';
+      }
+    });
+    return techniquesObj
+  }
+
   renderFacet() {
     const { tacticsObject } = this.props;
     const { techniquesCount } = this.state;
     let tacticsToRender: Array<any> = [];
-    const currentTechniques = Object.keys(tacticsObject).map(tacticsKey => ({tactic: tacticsKey, techniques: tacticsObject[tacticsKey]}))
+    const currentTechniques = Object.keys(tacticsObject).map(tacticsKey => ({tactic: tacticsKey, techniques: this.buildObjTechniques(tacticsObject[tacticsKey].techniques)}))
       .filter(tactic => this.props.selectedTactics[tactic.tactic])
       .map(tactic => tactic.techniques)
       .flat()
       .filter((techniqueID, index, array) => array.indexOf(techniqueID) === index);
-
     tacticsToRender = currentTechniques
-      .filter(techniqueID => this.state.filteredTechniques ? this.state.filteredTechniques.includes(techniqueID) : techniqueID)
+      .filter(techniqueID => this.state.filteredTechniques ? this.state.filteredTechniques.includes(techniqueID.id) : techniqueID.id)
       .map(techniqueID => {
         return {
-          id: techniqueID,
-          label: `${techniqueID} - ${mitreTechniques[techniqueID].name}`,
-          quantity: (techniquesCount.find(item => item.key === techniqueID) || {}).doc_count || 0
+          id: techniqueID.id,
+          label: `${techniqueID.id} - ${techniqueID.name}`,
+          quantity: (techniquesCount.find(item => item.key === techniqueID.id) || {}).doc_count || 0
         }
       })
       .filter(technique => this.state.hideAlerts ? technique.quantity !== 0 : true);
 
     const tacticsToRenderOrdered = tacticsToRender.sort((a, b) => b.quantity - a.quantity).map( (item,idx) => {
-      const tooltipContent = `View details of ${mitreTechniques[item.id].name} (${item.id})`;
+      const tooltipContent = `View details of ${item.label} (${item.id})`;
       const toolTipAnchorClass = "wz-display-inline-grid" + (this.state.hover=== item.id ? " wz-mitre-width" : " ");
       return(
         <EuiFlexItem 
@@ -222,7 +244,7 @@ export const Techniques = withWindowSize(class Techniques extends Component {
                             overflow: "hidden",
                             whiteSpace: "nowrap",
                             textOverflow: "ellipsis"}}>
-                      {item.id} - {mitreTechniques[item.id].name}
+                      {item.label}
                     </span>
                   </EuiToolTip>
 
@@ -281,6 +303,12 @@ export const Techniques = withWindowSize(class Techniques extends Component {
     this.props.onSelectedTabChanged('dashboard');
   }
 
+  openIntelligence(e,redirectTo,itemId){
+    sessionStorage.setItem("tabRedirect", redirectTo);
+    sessionStorage.setItem("idToRedirect", itemId);
+    this.props.onSelectedTabChanged('intelligence');
+  }
+
  /** 
    * Adds a new filter with format { "filter_key" : "filter_value" }, e.g. {"agent.id": "001"}
    * @param filter 
@@ -314,14 +342,13 @@ export const Techniques = withWindowSize(class Techniques extends Component {
     try{
       if(searchValue){
         this._isMount && this.setState({isSearching: true});
-        const response = await WzRequest.apiReq('GET', '/mitre', {
+        const response = await WzRequest.apiReq('GET', '/mitre/techniques', {
           params: {
-            select: "id",
             search: searchValue,
             limit: 500
           }
         });
-        const filteredTechniques = ((((response || {}).data || {}).data).affected_items || []).map(item => item.id);
+        const filteredTechniques = ((((response || {}).data || {}).data).affected_items || []).map(item => item.references.filter(reference => reference.source === "mitre-attack")[0].external_id);
         this._isMount && this.setState({ filteredTechniques, isSearching: false });
       }else{
         this._isMount && this.setState({ filteredTechniques: false, isSearching: false });
@@ -403,9 +430,11 @@ export const Techniques = withWindowSize(class Techniques extends Component {
             <FlyoutTechnique
               openDashboard={(e,itemId) => this.openDashboard(e,itemId)}
               openDiscover={(e,itemId) => this.openDiscover(e,itemId)}
+              openIntelligence={(e,redirectTo,itemId) => this.openIntelligence(e,redirectTo,itemId)}
               onChangeFlyout={this.onChangeFlyout}
               currentTechniqueData={this.state.currentTechniqueData}
-              currentTechnique={currentTechnique} />
+              currentTechnique={currentTechnique}
+              tacticsObject={this.props.tacticsObject} />
           </EuiOverlayMask>
         } 
       </div>   

public/components/overview/mitre/lib/index.ts

@@ -11,5 +11,3 @@
  */
 
 export { IFilterParams, getElasticAlerts, getIndexPattern } from './elastic-helpers';
-
-export { mitreTechniques } from './mitre_techniques';