Created new Mitre flyout

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

public/components/overview/mitre_attack_intelligence/mitre_attack_resources.ts

@@ -13,6 +13,7 @@
 
 import { WzRequest } from '../../../react-services';
 import { Markdown } from '../../common/util';
+import { formatUIDate } from '../../../react-services';
 
 const getMitreAttackIntelligenceSuggestions = (endpoint: string, field: string) => async (input: string) => {
   try{
@@ -66,7 +67,6 @@ function buildResource(label: string, labelResource: string){
       {
         field: 'references.external_id',
         name: 'ID',
-        // sortable: true,
         width: '12%'
       },
       {
@@ -84,59 +84,41 @@ function buildResource(label: string, labelResource: string){
         ) : '',
         truncateText: true
       }
-    ]
-  }
-};
-
-export const MitreAttackResources = [
-  buildResource('Groups', 'Group'),
-  buildResource('Mitigations', 'Mitigation'),
-  {
-    label: 'References',
-    id: 'references',
-    searchBarSuggestions: [
+    ],
+    mitreFlyoutHeaderProperties: [
       {
-        type: 'q',
-        label: 'type',
-        description: `Reference type`,
-        operators: ['=', '!='],
-        values: ['group', 'mitigation', 'software', 'tactic', 'technique']
+        label: 'ID',
+        id: 'references.external_id',
       },
       {
-        type: 'q',
-        label: 'description',
-        description: `Reference description`,
-        operators: ['~'],
-        values: (input) => input ? [input] : []
-      }
-    ],
-    apiEndpoint: '/mitre/references',
-    fieldName: 'type',
-    initialSortingField: 'type',
-    tableColumns: [
-      {
-        field: 'id',
-        name: 'ID',
-        sortable: true,
-        width: '12%'
+        label: 'Name',
+        id: 'name'
       },
       {
-        field: 'type',
-        name: 'Type',
-        sortable: true,
-        width: '30%'
+        label: 'Created Time',
+        id: 'created_time',
+        render: (value) => value ? (
+          formatUIDate(value)
+        ) : ''
       },
       {
-        field: 'description',
-        name: 'Description',
-        sortable: true,
+        label: 'Modified Time',
+        id: 'modified_time',
         render: (value) => value ? (
-          Markdown({markdown: value})
-        ) : '',
-        truncateText: true
-      }
-    ]
-  },
+          formatUIDate(value)
+        ) : ''
+      },
+      {
+        label: 'Version',
+        id: 'mitre_version'
+      },
+    ],
+  }
+};
+
+export const MitreAttackResources = [
+  buildResource('Groups', 'Group'),
+  buildResource('Mitigations', 'Mitigation'),
   buildResource('Software', 'Software'),
   buildResource('Tactics', 'Tactic'),
   buildResource('Techniques', 'Technique')

public/components/overview/mitre_attack_intelligence/module_mitre_attack_intelligence_all_resources.tsx

@@ -11,21 +11,52 @@
  * Find more information about this on the LICENSE file.
  */
 
-import React from 'react';
+import React, {useCallback, useState} from 'react';
 import { 
   EuiTitle,
   EuiSpacer
 } from '@elastic/eui';
 import { withGuard } from'../../../components/common/hocs';
 import { ModuleMitreAttackIntelligenceAllResourcesWelcome } from './module_mitre_attack_intelligence_all_resources_welcome';
 import { ModuleMitreAttackIntelligenceAllResourcesSearchResults } from './module_mitre_attack_intelligence_all_resources_search_results';
+import { ModuleMitreAttackIntelligenceFlyout } from './resource_detail_flyout';
 
 export const ModuleMitreAttackIntelligenceAllResources = withGuard(({didSearch}) => !didSearch, ModuleMitreAttackIntelligenceAllResourcesWelcome)(({ results, loading }) => {
+  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
+  const [details, setDetails] = useState(null);
+
+  const  mapResponseItem = (item) => ({...item, ['references.external_id']: item.references.find(reference => reference.source === 'mitre-attack')?.external_id});
+
+  const rowProps = useCallback((item) => {
+    setDetails(mapResponseItem(item));
+    setIsDetailsOpen(true);
+  },[]);
+
+  const rowPropsFlyout = useCallback((item) => ({
+    onClick: () => {
+      setDetails(item);
+      setIsDetailsOpen(true);
+    },
+  }), []);
+
+  const closeFlyout = useCallback(() => {
+    setDetails(null);
+    setIsDetailsOpen(false);
+  },[]);
+
   return (
     <>
       <EuiTitle><h1>Search results</h1></EuiTitle>
       <EuiSpacer />
-      <ModuleMitreAttackIntelligenceAllResourcesSearchResults results={results} loading={loading}/> 
+      <ModuleMitreAttackIntelligenceAllResourcesSearchResults results={results} loading={loading} rowProps={rowProps}/> 
+
+      {details && isDetailsOpen && (
+        <ModuleMitreAttackIntelligenceFlyout
+          details={details}
+          closeFlyout={() => closeFlyout()}
+          tableProps={rowPropsFlyout}
+        />
+      )}
     </>
   )
 });

public/components/overview/mitre_attack_intelligence/module_mitre_attack_intelligence_all_resources_search_results.tsx

@@ -28,7 +28,7 @@ const LoadingProgress = () => (
   <EuiProgress color='primary' size='s'/>
 );
 
-export const ModuleMitreAttackIntelligenceAllResourcesSearchResults = withGuard(({loading}) => loading, LoadingProgress)(({ results, setResourceFilters }) => {
+export const ModuleMitreAttackIntelligenceAllResourcesSearchResults = withGuard(({loading}) => loading, LoadingProgress)(({ results, setResourceFilters, rowProps }) => {
   const thereAreResults = results && results.length > 0;
   return thereAreResults
   ? results.map(item => (
@@ -49,6 +49,7 @@ export const ModuleMitreAttackIntelligenceAllResourcesSearchResults = withGuard(
       {item.results.map((result, resultIndex) => (
         <EuiButtonEmpty
           key={`module_mitre_attack_intelligence_all_resources_search_results_${item.name}_${resultIndex}`}
+          onClick={() => rowProps(result)}
         >
           {result[item.fieldName]}
         </EuiButtonEmpty>

public/components/overview/mitre_attack_intelligence/module_mitre_attack_intelligence_resource.tsx

@@ -13,13 +13,13 @@
 
 import React, { useCallback, useState } from 'react';
 import { TableWzAPI } from '../../../components/common/tables';
+import { ModuleMitreAttackIntelligenceFlyout } from './resource_detail_flyout';
 
 export const ModuleMitreAttackIntelligenceResource = ({ label, searchBarSuggestions, apiEndpoint, tableColumns, initialSortingField, resourceFilters }) => {
   const [isDetailsOpen, setIsDetailsOpen] = useState(false);
   const [details, setDetails] = useState(null);
 
   const rowProps = useCallback((item) => ({
-    // 'data-test-subj': `row-${file}`,
     onClick: () => {
       setDetails(item);
       setIsDetailsOpen(true);
@@ -46,59 +46,13 @@ export const ModuleMitreAttackIntelligenceResource = ({ label, searchBarSuggesti
         mapResponseItem={(item) => ({...item, ['references.external_id']: item?.references?.find(reference => reference.source === 'mitre-attack')?.external_id})}
         filters={resourceFilters}
       />
-      {/* {details && isDetailsOpen && (
-        <EuiOverlayMask
-          headerZindexLocation="below"
-          onClick={closeFlyout} >
-          <EuiFlyout
-            onClose={closeFlyout}
-            size="l"
-            aria-labelledby={``}
-            // maxWidth="70%"
-            // className=""
-          >
-            <EuiFlyoutHeader hasBorder>
-              <EuiTitle size="m">
-                <h2 id="flyoutTitle">Details</h2>
-              </EuiTitle>
-            </EuiFlyoutHeader>
-            <EuiFlyoutBody>
-              <EuiFlexGroup>
-                {detailsProperties.map(detailProperty => (
-                  <EuiFlexItem grow={false} key={`module_mitre_ingelligense_resource_detail_property_${detailProperty.id}`}>
-                    <div><strong>{detailProperty.label}</strong></div>
-                    <EuiText color='subdued'>{details[detailProperty.id]}</EuiText>
-                  </EuiFlexItem>
-                ))}
-              </EuiFlexGroup>
-              <EuiFlexGroup>
-                <EuiFlexItem>
-                  <div><strong>Description</strong></div>
-                  <EuiText color='subdued'>{details.description}</EuiText>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-              <EuiFlexGroup>
-                <EuiFlexItem>
-                  <EuiAccordion
-                    style={{ textDecoration: 'none' }}
-                    id=''
-                    className='events-accordion'
-                    // extraAction={<div style={{ marginBottom: 5 }}><strong>{this.state.totalHits || 0}</strong> hits</div>}
-                    buttonContent='Techniques'
-                    paddingSize='none'
-                    initialIsOpen={true}>
-                      <EuiBasicTable 
-                        items={details.techniques.map(technique => ({technique}))}
-                        columns={[{field: 'technique', name: 'Technique'}]}
-                      />
-                  </EuiAccordion>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiFlyoutBody>
-          </EuiFlyout>
-        </EuiOverlayMask>
-      )
-      } */}
+      {details && isDetailsOpen && (
+        <ModuleMitreAttackIntelligenceFlyout
+          details={details}
+          closeFlyout={() => closeFlyout()}
+          tableProps={rowProps}
+        />
+      )}
     </> 
   )
 }

public/components/overview/mitre_attack_intelligence/resource_detail_flyout.tsx

@@ -0,0 +1,107 @@
+/*
+ * Wazuh app - React component for showing the Mitre Att&ck intelligence flyout.
+ *
+ * Copyright (C) 2015-2021 Wazuh, Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * Find more information about this on the LICENSE file.
+ */
+
+import React , {useRef} from 'react';
+import { MitreAttackResources } from './mitre_attack_resources';
+import { ReferencesTable } from './resource_detail_references_table';
+
+import {
+  EuiFlyout,
+  EuiFlyoutHeader,
+  EuiOverlayMask,
+  EuiTitle,
+  EuiText,
+  EuiFlexGroup,
+  EuiFlyoutBody,
+  EuiFlexItem,
+  EuiSpacer,
+} from '@elastic/eui';
+import { Markdown } from '../../common/util/markdown';
+import { FieldDetails } from 'src/plugins/discover/public/application/components/sidebar/types';
+
+type tablePropsType = (item) => {onClick: () => void};
+type closeFlyoutType = () => {onClick: () => void};
+
+interface DetailFlyoutType {
+  details: FieldDetails,
+  closeFlyout: closeFlyoutType,
+  tableProps: tablePropsType,
+}
+
+export const ModuleMitreAttackIntelligenceFlyout = ({details, closeFlyout, tableProps}: DetailFlyoutType) => {
+  const startReference = useRef(null);
+
+  return (
+    <EuiOverlayMask
+      headerZindexLocation="below"
+      onClick= {closeFlyout} >
+      <EuiFlyout
+        onClose={closeFlyout}
+        size="l"
+        aria-labelledby={``}
+      >
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="m">
+            <h2 id="flyoutTitle">Details</h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>
+          <div ref={startReference}>
+            <EuiFlexGroup>
+              {MitreAttackResources[0].mitreFlyoutHeaderProperties.map(detailProperty => (
+                <EuiFlexItem>
+                  <div>
+                    <strong>
+                      {detailProperty.label}
+                    </strong>
+                  </div>
+                  <EuiText color='subdued'>
+                    {detailProperty.render ? detailProperty.render(details[detailProperty.id]) : details[detailProperty.id]}
+                  </EuiText>
+                </EuiFlexItem>
+              ))}
+            </EuiFlexGroup>
+          </div>
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <div>
+                <strong>
+                  Description
+                </strong>
+              </div>
+              <EuiText color='subdued'>
+                { details.description ? <Markdown markdown={details.description}/> : ''}
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiFlexGroup>
+            <EuiFlexItem>
+                {MitreAttackResources.filter((item) => details[item.id]).map((item) => 
+                  <>
+                    <ReferencesTable
+                      referencesName={item.id}
+                      referencesArray={details[item.id]}
+                      tableProps={tableProps}
+                      backToTop={() => {  startReference.current?.scrollIntoView()}}
+                    />
+                    <EuiSpacer />
+                  </>
+                )}
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlyoutBody>
+      </EuiFlyout>
+    </EuiOverlayMask>
+  )
+};
+