Add an agent selector to IT Hygiene application (#6005)

* feat: add agent selector to IT Hygiene application

- Wrapped the IT Hygiene application with a required selection of agent
- Added a Explore agent button to the IT Hygiene application
- The Explore agent button of alert modules now display the global agent
  selector instead of the local one.
- Removed the local agent selector modal of Explore agent button on alert
  modules
- Removed the related action creator and reducer case for SHOW_EXPLORE_AGENT_MODAL

* feat: add reactivity to agent welcome view when changing the selected agent

- Refactor MITRE ATT&CK panel
  - Rename MITRE to MITRE ATT&CK in the panel
- Rename mitre_top to mitre-top according to the file naming convention
- Add reactivity to the FIM: Recent events table when changing the
  selected agent

* feat(it-hygiene): fix problems when selecting and agent and navigate

- Move prompt agent never connected to prompts directory
  - Remove duplicated and related components on agent welcome, inventory
    data and agent configuration
- Change button on prompt agent never connected to Select agent
- Change Explore agent button on agent welcome

* fix: imports on prompt and add clarification on agent welcome

* fix(it-hygiene): change mitre attack referecence

* Fix navbar agent styles

* Fix refresh page: inventory data and stats

---------

Co-authored-by: yenienserrano <ian.serrano@wazuh.com>

plugins/main/public/components/agents/prompt-agent-no-support-module.tsx

@@ -13,20 +13,20 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { EuiEmptyPrompt, EuiButton } from '@elastic/eui';
-import { showExploreAgentModal } from '../../redux/actions/appStateActions';
+import { showExploreAgentModalGlobal } from '../../redux/actions/appStateActions';
 
 export const PromptAgentNoSupportModule = () => {
   const dispatch = useDispatch();
-  const openAgentSelector = () => dispatch(showExploreAgentModal(true));
+  const openAgentSelector = () => dispatch(showExploreAgentModalGlobal(true));
   return (
     <EuiEmptyPrompt
-      iconType="watchesApp"
+      iconType='watchesApp'
       title={<h2>Module not supported by the agent</h2>}
       actions={
-        <EuiButton color="primary" fill onClick={openAgentSelector}>
+        <EuiButton color='primary' fill onClick={openAgentSelector}>
           Select agent
         </EuiButton>
       }
     />
-  )
-}
+  );
+};

plugins/main/public/components/agents/prompts/index.ts

@@ -15,3 +15,4 @@ export * from './prompt-no-selected-agent';
 export * from './prompt-select-agent';
 export * from './prompt-agent-feature-version';
 export * from './prompt_module_not_for_agent';
+export * from './prompt-agent-never-connected';

plugins/main/public/components/agents/prompts/prompt-agent-never-connected.tsx

@@ -0,0 +1,54 @@
+/*
+ * Wazuh app - Prompt when status agent is Never connected.
+ * 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, { Fragment } from 'react';
+import { EuiEmptyPrompt, EuiButton, EuiLink } from '@elastic/eui';
+import { useDispatch } from 'react-redux';
+import { webDocumentationLink } from '../../../../common/services/web_documentation';
+import { showExploreAgentModalGlobal } from '../../../redux/actions/appStateActions';
+
+const documentationLink = webDocumentationLink(
+  'user-manual/agents/agent-connection.html',
+);
+
+export const PromptAgentNeverConnected = () => {
+  const dispatch = useDispatch();
+  const openAgentSelector = () => dispatch(showExploreAgentModalGlobal(true));
+  return (
+    <EuiEmptyPrompt
+      iconType='securitySignalDetected'
+      style={{ marginTop: 20 }}
+      title={<h2>Agent has never connected.</h2>}
+      body={
+        <Fragment>
+          <p>
+            The agent has been registered but has not yet connected to the
+            manager.
+          </p>
+          <EuiLink
+            href={documentationLink}
+            target='_blank'
+            rel='noopener noreferrer'
+            external
+          >
+            Checking connection with the Wazuh server
+          </EuiLink>
+        </Fragment>
+      }
+      actions={
+        <EuiButton color='primary' fill onClick={openAgentSelector}>
+          Select agent
+        </EuiButton>
+      }
+    />
+  );
+};

plugins/main/public/components/agents/prompts/prompt-select-agent.tsx

@@ -13,7 +13,7 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
-import { showExploreAgentModal } from '../../../redux/actions/appStateActions';
+import { showExploreAgentModalGlobal } from '../../../redux/actions/appStateActions';
 
 type PromptSelectAgentProps = {
   body?: string;
@@ -22,14 +22,14 @@ type PromptSelectAgentProps = {
 
 export const PromptSelectAgent = ({ body, title }: PromptSelectAgentProps) => {
   const dispatch = useDispatch();
-  const openAgentSelector = () => dispatch(showExploreAgentModal(true));
+  const openAgentSelector = () => dispatch(showExploreAgentModalGlobal(true));
   return (
     <EuiEmptyPrompt
-      iconType="watchesApp"
+      iconType='watchesApp'
       title={<h2>{title}</h2>}
       body={body && <p>{body}</p>}
       actions={
-        <EuiButton color="primary" fill onClick={openAgentSelector}>
+        <EuiButton color='primary' fill onClick={openAgentSelector}>
           Select agent
         </EuiButton>
       }

plugins/main/public/components/agents/syscollector/inventory.tsx

@@ -11,15 +11,7 @@
  */
 
 import React from 'react';
-import {
-  EuiEmptyPrompt,
-  EuiButton,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiCallOut,
-  EuiLink,
-  EuiPanel,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiCallOut, EuiPanel } from '@elastic/eui';
 import { InventoryMetrics } from './components/syscollector-metrics';
 import {
   netaddrColumns,
@@ -33,54 +25,23 @@ import {
   API_NAME_AGENT_STATUS,
   SEARCH_BAR_WQL_VALUE_SUGGESTIONS_COUNT,
 } from '../../../../common/constants';
-import { webDocumentationLink } from '../../../../common/services/web_documentation';
 import { TableWzAPI } from '../../common/tables';
 import { WzRequest } from '../../../react-services';
 import { get as getLodash } from 'lodash';
-import { getCore } from '../../../kibana-services';
+import { compose } from 'redux';
+import { withGuard } from '../../common/hocs';
+import { PromptAgentNeverConnected } from '../prompts';
 
 const sortFieldSuggestion = (a, b) => (a.label > b.label ? 1 : -1);
 
-export function SyscollectorInventory({ agent }) {
-  if (agent && agent.status === API_NAME_AGENT_STATUS.NEVER_CONNECTED) {
-    return (
-      <EuiEmptyPrompt
-        iconType='securitySignalDetected'
-        style={{ marginTop: 20 }}
-        title={<h2>Agent has never connected.</h2>}
-        body={
-          <>
-            <p>
-              The agent has been registered but has not yet connected to the
-              manager.
-            </p>
-            <EuiLink
-              href={webDocumentationLink(
-                'user-manual/agents/agent-connection.html',
-              )}
-              target='_blank'
-              rel='noopener noreferrer'
-              external
-            >
-              Checking connection with the Wazuh server
-            </EuiLink>
-          </>
-        }
-        actions={
-          <EuiButton
-            href={getCore().application.getUrlForApp('endpoints-summary', {
-              path: '#/agents-preview',
-            })}
-            color='primary'
-            fill
-          >
-            Back
-          </EuiButton>
-        }
-      />
-    );
-  }
-
+export const SyscollectorInventory = compose(
+  withGuard(
+    props =>
+      props.agent &&
+      props.agent.status === API_NAME_AGENT_STATUS.NEVER_CONNECTED,
+    PromptAgentNeverConnected,
+  ),
+)(function SyscollectorInventory({ agent }) {
   let soPlatform;
   if (agent?.os?.uname?.includes('Linux')) {
     soPlatform = 'linux';
@@ -468,4 +429,4 @@ export function SyscollectorInventory({ agent }) {
       </EuiFlexGroup>
     </div>
   );
-}
+});