Remove total outdated agents statistic from Endpoint Summary (#6737)

* Remove total outdated agents statistic from Endpoint Summary * Change upgrade tasks panel color * Update CHANGELOG * Improve Agent Welcome layout * Update Endpoint Summary statistic titles * Fix vulnerabilities data source * Synchronize total outdated agents and the rest filters
wazuh · Jun 5, 2024 · 1c73ab3 · 1c73ab3
1 parent c6a5172
commit 1c73ab3
Show file tree

Hide file tree

Showing 12 changed files with 307 additions and 539 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,7 +10,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Added AngularJS dependencies [#6145](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6145)
 - Added a migration task to setup the configuration using a configuration file [#6337](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6337)
 - Improve fleet management by adding 'Edit Agent Groups' and 'Upgrade Agents' actions, as well as a filter to show only outdated agents [#6250](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6250) [#6476](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6476) [#6274](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6274) [#6501](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6501) [#6529](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6529) [#6648](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6648)
-- Added propagation of updates from the table to dashboard visualizations in Endpoints summary [#6460](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6460)
+- Added propagation of updates from the table to dashboard visualizations in Endpoints summary [#6460](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6460) [#6737](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6737)
 - Handle index pattern selector on new discover [#6499](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6499)
 - Added macOS log collector tab [#6545](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6545)
 - Add ability to disable the edition of configuration through API endpoints and UI [#6557](https://github.com/wazuh/wazuh-dashboard-plugins/issues/6557)

diff --git a/...blic/components/common/data-source/pattern/vulnerabilities/vulnerabilities-data-source.ts b/...blic/components/common/data-source/pattern/vulnerabilities/vulnerabilities-data-source.ts
@@ -1,28 +1,24 @@
-import { DATA_SOURCE_FILTER_CONTROLLED_CLUSTER_MANAGER, VULNERABILITY_IMPLICIT_CLUSTER_MODE_FILTER } from '../../../../../../common/constants';
+import {
+  DATA_SOURCE_FILTER_CONTROLLED_CLUSTER_MANAGER,
+  VULNERABILITY_IMPLICIT_CLUSTER_MODE_FILTER,
+} from '../../../../../../common/constants';
 import { tFilter, PatternDataSourceFilterManager } from '../../index';
-import { AppState } from '../../../../../react-services/app-state';
 import { PatternDataSource } from '../pattern-data-source';
 
 export class VulnerabilitiesDataSource extends PatternDataSource {
+  constructor(id: string, title: string) {
+    super(id, title);
+  }
 
-    constructor(id: string, title: string) {
-        super(id, title);
-    }
+  getFixedFilters(): tFilter[] {
+    return [...this.getClusterManagerFilters(), ...super.getFixedFilters()];
+  }
 
-    getFixedFilters(): tFilter[] {
-        return [
-            ...this.getClusterManagerFilters(),
-            ...super.getFixedFilters(),
-        ]
-    }
-
-    getClusterManagerFilters() {
-        return PatternDataSourceFilterManager.getClusterManagerFilters(this.title, 
-            DATA_SOURCE_FILTER_CONTROLLED_CLUSTER_MANAGER,
-            VULNERABILITY_IMPLICIT_CLUSTER_MODE_FILTER[
-                AppState.getClusterInfo().status
-            ],
-        );   
-    }
-
-}
+  getClusterManagerFilters() {
+    return PatternDataSourceFilterManager.getClusterManagerFilters(
+      this.title,
+      DATA_SOURCE_FILTER_CONTROLLED_CLUSTER_MANAGER,
+      VULNERABILITY_IMPLICIT_CLUSTER_MODE_FILTER,
+    );
+  }
+}
diff --git a/plugins/main/public/components/common/welcome/agents-welcome.js b/plugins/main/public/components/common/welcome/agents-welcome.js
@@ -18,7 +18,6 @@ import {
   EuiFlexGroup,
   EuiSpacer,
   EuiText,
-  EuiFlexGrid,
   EuiButtonEmpty,
   EuiPage,
   EuiPopover,
@@ -82,11 +81,11 @@ export const AgentsWelcome = compose(
       },
       ...(agent?.name
         ? [
-            {
-              text: `${agent.name}`,
-              truncate: true,
-            },
-          ]
+          {
+            text: `${agent.name}`,
+            truncate: true,
+          },
+        ]
         : []),
     ];
   }),
@@ -209,13 +208,13 @@ export const AgentsWelcome = compose(
         )
           ? JSON.parse(window.localStorage.getItem('wz-menu-agent-apps-pinned'))
           : [
-              // Default pinned applications
-              threatHunting.id,
-              fileIntegrityMonitoring.id,
-              configurationAssessment.id,
-              mitreAttack.id,
-              malwareDetection.id,
-            ];
+            // Default pinned applications
+            threatHunting.id,
+            fileIntegrityMonitoring.id,
+            configurationAssessment.id,
+            mitreAttack.id,
+            malwareDetection.id,
+          ];
       }
 
       // Ensure the pinned applications are supported
@@ -423,32 +422,30 @@ export const AgentsWelcome = compose(
     renderMitrePanel() {
       return (
         <Fragment>
-          <EuiPanel paddingSize='s' height={{ height: 300 }}>
-            <EuiFlexItem>
-              <EuiFlexGroup>
-                <EuiFlexItem>
-                  <h2 className='embPanel__title wz-headline-title'>
-                    <EuiText size='xs'>
-                      <h2>MITRE ATT&CK</h2>
-                    </EuiText>
-                  </h2>
-                </EuiFlexItem>
-                <EuiFlexItem grow={false} style={{ alignSelf: 'center' }}>
-                  <EuiToolTip position='top' content='Open MITRE ATT&CK'>
-                    <RedirectAppLinks application={getCore().application}>
-                      <EuiButtonIcon
-                        iconType='popout'
-                        color='primary'
-                        href={`${getCore().application.getUrlForApp(
-                          mitreAttack.id,
-                        )}`}
-                        aria-label='Open MITRE ATT&CK'
-                      />
-                    </RedirectAppLinks>
-                  </EuiToolTip>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiFlexItem>
+          <EuiPanel paddingSize='m' height={{ height: 300 }}>
+            <EuiFlexGroup gutterSize='s'>
+              <EuiFlexItem>
+                <h2 className='embPanel__title wz-headline-title'>
+                  <EuiText size='xs'>
+                    <h2>MITRE ATT&CK</h2>
+                  </EuiText>
+                </h2>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false} style={{ alignSelf: 'center' }}>
+                <EuiToolTip position='top' content='Open MITRE ATT&CK'>
+                  <RedirectAppLinks application={getCore().application}>
+                    <EuiButtonIcon
+                      iconType='popout'
+                      color='primary'
+                      href={`${getCore().application.getUrlForApp(
+                        mitreAttack.id,
+                      )}`}
+                      aria-label='Open MITRE ATT&CK'
+                    />
+                  </RedirectAppLinks>
+                </EuiToolTip>
+              </EuiFlexItem>
+            </EuiFlexGroup>
             <EuiSpacer size='m' />
             <EuiFlexGroup>
               <EuiFlexItem>
@@ -523,19 +520,19 @@ export const AgentsWelcome = compose(
                     >
                       {' '}
                       {/* TODO: Replace with SearchBar and replace implementation to get the time range in AgentView component*/}
-                      <WzDatePicker condensed={true} onTimeChange={() => {}} />
+                      <WzDatePicker condensed={true} onTimeChange={() => { }} />
                     </EuiFlexItem>
                   </EuiFlexGroup>
                   {(this.state.widthWindow < 1150 && (
                     <Fragment>
-                      <EuiFlexGrid columns={2}>
+                      <EuiFlexGroup wrap>
                         <EuiFlexItem
                           key={'Wazuh-App-Agents-Welcome-MITRE-Top-Tactics'}
                         >
                           {this.renderMitrePanel()}
                         </EuiFlexItem>
                         {this.renderCompliancePanel()}
-                      </EuiFlexGrid>
+                      </EuiFlexGroup>
                       <EuiSpacer size='m' />
                       <EuiFlexGroup>
                         <FimEventsTable agent={this.props.agent} />
@@ -556,33 +553,33 @@ export const AgentsWelcome = compose(
                       </EuiFlexGroup>
                     </Fragment>
                   )) || (
-                    <Fragment>
-                      <EuiFlexGrid columns={2}>
-                        <EuiFlexItem>
-                          <EuiFlexGroup>
-                            <EuiFlexItem
-                              key={'Wazuh-App-Agents-Welcome-MITRE-Top-Tactics'}
-                            >
-                              {this.renderMitrePanel()}
-                            </EuiFlexItem>
-                            {this.renderCompliancePanel()}
-                          </EuiFlexGroup>
-                        </EuiFlexItem>
-                        <FimEventsTable agent={this.props.agent} />
-                      </EuiFlexGrid>
-                      <EuiSpacer size='l' />
-                      <EuiFlexGroup>
-                        <EuiFlexItem
-                          key={'Wazuh-App-Agents-Welcome-Events-Evolution'}
-                        >
-                          {' '}
-                          {/* Events count evolution */}
-                          {this.renderEventCountVisualization()}
-                        </EuiFlexItem>
-                        <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>
+                          <EuiFlexItem>{this.renderSCALastScan()}</EuiFlexItem>
+                        </EuiFlexGroup>
+                      </Fragment>
+                    )}
                 </EuiPageBody>
               </EuiPage>
             </div>

diff --git a/plugins/main/public/components/endpoints-summary/dashboard/endpoints-summary-dashboard.tsx b/plugins/main/public/components/endpoints-summary/dashboard/endpoints-summary-dashboard.tsx
@@ -3,52 +3,47 @@ import { getAgentsByGroup } from '../services/get-agents-by-group';
 import { getAgentsByOs } from '../services/get-agents-by-os';
 import { getSummaryAgentsStatus } from '../services/get-summary-agents-status';
 import DonutCard from './components/donut-card';
-import OutdatedAgentsCard from './components/outdated-agents-card';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 interface EndpointsSummaryDashboardProps {
   filterAgentByStatus: (data: any) => void;
   filterAgentByOS: (data: any) => void;
   filterAgentByGroup: (data: any) => void;
-  outdatedAgents: number;
-  isLoadingOutdatedAgents: boolean;
-  filterByOutdatedAgent: (data: any) => void;
   reloadDashboard?: number;
 }
 
 export const EndpointsSummaryDashboard: FC<EndpointsSummaryDashboardProps> = ({
   filterAgentByStatus,
   filterAgentByOS,
   filterAgentByGroup,
-  outdatedAgents,
-  isLoadingOutdatedAgents,
-  filterByOutdatedAgent,
   reloadDashboard,
 }) => {
   return (
-    <div className='endpoints-summary-container-indicators'>
-      <DonutCard
-        betaBadgeLabel='Agents by Status'
-        onClickLabel={filterAgentByStatus}
-        getInfo={getSummaryAgentsStatus}
-        reload={reloadDashboard}
-      />
-      <DonutCard
-        betaBadgeLabel='Top 5 agents by OS'
-        onClickLabel={filterAgentByOS}
-        getInfo={getAgentsByOs}
-        reload={reloadDashboard}
-      />
-      <DonutCard
-        betaBadgeLabel='Top 5 agents by Group'
-        onClickLabel={filterAgentByGroup}
-        getInfo={getAgentsByGroup}
-        reload={reloadDashboard}
-      />
-      <OutdatedAgentsCard
-        outdatedAgents={outdatedAgents}
-        isLoading={isLoadingOutdatedAgents}
-        filterByOutdatedAgent={filterByOutdatedAgent}
-      />
-    </div>
+    <EuiFlexGroup gutterSize='m' responsive={false} wrap>
+      <EuiFlexItem>
+        <DonutCard
+          betaBadgeLabel='Agents by Status'
+          onClickLabel={filterAgentByStatus}
+          getInfo={getSummaryAgentsStatus}
+          reload={reloadDashboard}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <DonutCard
+          betaBadgeLabel='Top 5 OS'
+          onClickLabel={filterAgentByOS}
+          getInfo={getAgentsByOs}
+          reload={reloadDashboard}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <DonutCard
+          betaBadgeLabel='Top 5 groups'
+          onClickLabel={filterAgentByGroup}
+          getInfo={getAgentsByGroup}
+          reload={reloadDashboard}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };
diff --git a/plugins/main/public/components/endpoints-summary/endpoints-summary.scss b/plugins/main/public/components/endpoints-summary/endpoints-summary.scss
@@ -101,21 +101,3 @@
     white-space: nowrap;
   }
 }
-
-.endpoints-summary-container-indicators {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 16px;
-  min-height: 200px;
-
-  @media (min-width: 1024px) {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  @media (min-width: 1440px) {
-    grid-template-columns:
-      minmax(375px, 1fr) minmax(375px, 1fr) minmax(375px, 1fr)
-      minmax(150px, 300px);
-  }
-}