Add vulnerability detection card in agent overview

CHANGELOG.md

@@ -13,6 +13,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Support for Wazuh 4.10.0
 - Added sample data for YARA [#6964](https://github.com/wazuh/wazuh-dashboard-plugins/issues/6964)
 - Added a custom filter and visualization for vulnerability.under_evaluation field [#6968](https://github.com/wazuh/wazuh-dashboard-plugins/issues/6968) [#7044](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7044) [#7046](https://github.com/wazuh/wazuh-dashboard-plugins/issues/7046)
+- Add vulnerabilities card to agent details page [#7058](https://github.com/wazuh/wazuh-dashboard-plugins/issues/7058)
 
 ### Changed
 

plugins/main/public/components/common/welcome/agents-welcome.js

@@ -58,6 +58,7 @@ import { EventsCount } from './dashboard/events-count';
 import { IntlProvider } from 'react-intl';
 import { ButtonExploreAgent } from '../../wz-agent-selector/button-explore-agent';
 import NavigationService from '../../../react-services/navigation-service';
+import VulsPanel from './components/vuls_panel/vuls_welcome_panel';
 
 export const AgentsWelcome = compose(
   withErrorBoundary,
@@ -388,8 +389,8 @@ export const AgentsWelcome = compose(
     renderMitrePanel() {
       return (
         <Fragment>
-          <EuiPanel paddingSize='m' height={{ height: 300 }}>
-            <EuiFlexGroup gutterSize='s'>
+          <EuiPanel paddingSize='m'>
+            <EuiFlexGroup gutterSize='s' responsive={false}>
               <EuiFlexItem>
                 <h2 className='embPanel__title wz-headline-title'>
                   <EuiText size='xs'>
@@ -449,6 +450,8 @@ export const AgentsWelcome = compose(
 
     render() {
       const title = this.renderTitle();
+      const responsiveGroupDirection =
+        this.state.widthWindow < 1150 ? 'column' : 'row';
 
       return (
         <IntlProvider locale='en'>
@@ -489,63 +492,38 @@ export const AgentsWelcome = compose(
                       <WzDatePicker condensed={true} onTimeChange={() => {}} />
                     </EuiFlexItem>
                   </EuiFlexGroup>
-                  {(this.state.widthWindow < 1150 && (
-                    <Fragment>
-                      <EuiFlexGroup wrap>
+                  <EuiFlexGroup direction={responsiveGroupDirection}>
+                    <EuiFlexItem
+                      key={'Wazuh-App-Agents-Welcome-Events-Evolution'}
+                      grow={3}
+                    >
+                      {this.renderEventCountVisualization()}
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={3}>
+                      <EuiFlexGroup>
                         <EuiFlexItem
                           key={'Wazuh-App-Agents-Welcome-MITRE-Top-Tactics'}
+                          grow={3}
                         >
                           {this.renderMitrePanel()}
                         </EuiFlexItem>
-                        {this.renderCompliancePanel()}
-                      </EuiFlexGroup>
-                      <EuiSpacer size='m' />
-                      <EuiFlexGroup>
-                        <FimEventsTable agent={this.props.agent} />
-                      </EuiFlexGroup>
-                      <EuiSpacer size='m' />
-                      <EuiFlexGroup>
-                        <EuiFlexItem
-                          key={'Wazuh-App-Agents-Welcome-Events-Evolution'}
-                        >
-                          {' '}
-                          {/* Events count evolution */}
-                          {this.renderEventCountVisualization()}
-                        </EuiFlexItem>
-                      </EuiFlexGroup>
-                      <EuiSpacer size='m' />
-                      <EuiFlexGroup>
-                        <EuiFlexItem>{this.renderSCALastScan()}</EuiFlexItem>
-                      </EuiFlexGroup>
-                    </Fragment>
-                  )) || (
-                    <Fragment>
-                      <EuiFlexGroup>
-                        <EuiFlexItem>
-                          <EuiFlexGroup>
-                            <EuiFlexItem
-                              key={'Wazuh-App-Agents-Welcome-MITRE-Top-Tactics'}
-                            >
-                              {this.renderMitrePanel()}
-                            </EuiFlexItem>
-                            {this.renderCompliancePanel()}
-                          </EuiFlexGroup>
-                        </EuiFlexItem>
-                        <FimEventsTable agent={this.props.agent} />
-                      </EuiFlexGroup>
-                      <EuiSpacer size='l' />
-                      <EuiFlexGroup>
-                        <EuiFlexItem
-                          key={'Wazuh-App-Agents-Welcome-Events-Evolution'}
-                        >
-                          {' '}
-                          {/* Events count evolution */}
-                          {this.renderEventCountVisualization()}
+                        <EuiFlexItem grow={3}>
+                          {this.renderCompliancePanel()}
                         </EuiFlexItem>
-                        <EuiFlexItem>{this.renderSCALastScan()}</EuiFlexItem>
                       </EuiFlexGroup>
-                    </Fragment>
-                  )}
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                  <EuiSpacer size='l' />
+                  <EuiFlexGroup direction={responsiveGroupDirection}>
+                    <EuiFlexItem>
+                      <VulsPanel agent={this.props.agent} />
+                    </EuiFlexItem>
+                    <EuiFlexItem>{this.renderSCALastScan()}</EuiFlexItem>
+                  </EuiFlexGroup>
+                  <EuiSpacer size='l' />
+                  <EuiFlexGroup>
+                    <FimEventsTable agent={this.props.agent} />
+                  </EuiFlexGroup>
                 </EuiPageBody>
               </EuiPage>
             </div>

plugins/main/public/components/common/welcome/components/fim_events_table/fim_events_table.tsx

@@ -39,7 +39,7 @@ export function FimEventsTable({ agent }) {
     <EuiFlexItem>
       <EuiPanel paddingSize='m'>
         <EuiFlexItem>
-          <EuiFlexGroup>
+          <EuiFlexGroup responsive={false}>
             <EuiFlexItem>
               <EuiText size='xs'>
                 <h2>FIM: Recent events</h2>

plugins/main/public/components/common/welcome/components/index.ts

@@ -16,3 +16,4 @@ export { FimEventsTable, useTimeFilter } from './fim_events_table';
 export { ScaScan } from './sca_scan';
 export { MitreTopTactics } from './mitre_top';
 export { RequirementVis } from './requirement_vis';
+export { VulsTopPackageTable } from './top_packages_table';

plugins/main/public/components/common/welcome/components/top_packages_table/index.ts

@@ -0,0 +1,15 @@
+/*
+ * Wazuh app - React component building the welcome screen of an agent.
+ * version, OS, registration date, last keep alive.
+ *
+ * Copyright (C) 2015-2022 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.
+ */
+
+export { VulsTopPackageTable, useTimeFilter } from './top_packages_table';

plugins/main/public/components/common/welcome/components/top_packages_table/top_packages_table.tsx

@@ -0,0 +1,111 @@
+/*
+ * Wazuh app - React component building the welcome screen of an agent.
+ * version, OS, registration date, last keep alive.
+ *
+ * Copyright (C) 2015-2022 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, { useState, useEffect, Fragment } from 'react';
+import {
+  EuiBasicTable,
+  EuiFlexItem,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiToolTip,
+  EuiLink,
+} from '@elastic/eui';
+// @ts-ignore
+import { getDataPlugin } from '../../../../../kibana-services';
+import { vulnerabilityDetection } from '../../../../../utils/applications';
+import {
+  PatternDataSourceFilterManager,
+  FILTER_OPERATOR,
+} from '../../../data-source';
+import { WzLink } from '../../../../../components/wz-link/wz-link';
+
+export function useTimeFilter() {
+  const { timefilter } = getDataPlugin().query.timefilter;
+  const [timeFilter, setTimeFilter] = useState(timefilter.getTime());
+  useEffect(() => {
+    const subscription = timefilter
+      .getTimeUpdate$()
+      .subscribe(() => setTimeFilter(timefilter.getTime()));
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, []);
+  return timeFilter;
+}
+
+export function VulsTopPackageTable({ agentId, items, indexPatternId }) {
+  const [sort, setSort] = useState({
+    field: 'doc_count',
+    direction: 'desc',
+  });
+  const [data, setData] = useState([]);
+  const timeFilter = useTimeFilter();
+
+  const columns = [
+    {
+      field: 'key',
+      name: 'Package',
+      sortable: true,
+      render: field => (
+        <WzLink
+          appId={vulnerabilityDetection.id}
+          path={`/overview?tab=vuls&tabView=dashboard&agentId=${agentId}&_g=${PatternDataSourceFilterManager.filtersToURLFormat(
+            [
+              PatternDataSourceFilterManager.createFilter(
+                FILTER_OPERATOR.IS,
+                `package.name`,
+                field,
+                indexPatternId,
+              ),
+            ],
+          )}`}
+        >
+          {field}
+        </WzLink>
+      ),
+    },
+    {
+      field: 'doc_count',
+      name: 'Count',
+      sortable: true,
+      truncateText: true,
+      width: '100px',
+    },
+  ];
+
+  return (
+    <EuiPanel paddingSize='s'>
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiText size='xs'>
+            <h2>Top 5 Packages</h2>
+          </EuiText>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer size='s' />
+      <EuiBasicTable
+        items={items}
+        columns={columns}
+        loading={false}
+        sorting={{ sort }}
+        onChange={e => setSort(e.sort)}
+        itemId='top-packages-table'
+        noItemsMessage='No recent events'
+      />
+    </EuiPanel>
+  );
+}