Remove agent AngularJS controller (#6618)

* Create AgentView component to replace controller

* Replace Kibana visualization

* Improve Events count evolution chart

* Fix Dashboard embeddable

* Fix url update when change tab

* Move file export-configuration

* Fix imports to move file export-configuration

* Delete agents angularjs controller

* Get agent on change tab

* Update CHANGELOG

* Remove unused VisFactoryHandler

* Improve code and remove unused code

---------

Co-authored-by: Federico Rodriguez <[email protected]>

CHANGELOG.md

@@ -31,8 +31,8 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Move AngularJS controller for management to ReactJS component [#6555](https:/wazuh/wazuh-dashboard-plugins/pull/6555)
 - Moved the registry data to in-memory cache [#6481](https:/wazuh/wazuh-dashboard-plugins/pull/6481)
 - Enhance the validation for `enrollment.dns` on App Settings application [#6573](https:/wazuh/wazuh-dashboard-plugins/pull/6573)
-- Remove AngularJS controller for manage groups [#6543](https:/wazuh/wazuh-dashboard-plugins/pull/6543)
 - Remove some branding references across the application. [#6155](https:/wazuh/wazuh-dashboard-plugins/pull/6155)
+- Move AngularJS controller for the agent view to ReactJS [#6618](https:/wazuh/wazuh-dashboard-plugins/pull/6618)
 - Implement new data source feature on MITRE ATT&CK module [#6482](https:/wazuh/wazuh-dashboard-plugins/pull/6482)
 
 ### Fixed

plugins/main/public/components/agents/export-configuration.js

@@ -0,0 +1,181 @@
+/*
+ * Wazuh app - React component for exporting the configuration of a group.
+ * 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, { Component } from 'react';
+
+import {
+ EuiPopover,
+ EuiButton,
+ EuiCheckboxGroup,
+ EuiSpacer,
+ EuiButtonEmpty,
+} from '@elastic/eui';
+
+import PropTypes from 'prop-types';
+import { UnsupportedComponents } from '../../utils/components-os-support';
+import { WAZUH_AGENTS_OS_TYPE } from '../../../common/constants';
+import { withErrorBoundary } from '../common/hocs';
+
+export const ExportConfiguration = withErrorBoundary(
+ class ExportConfiguration extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ buttonDisabled: false,
+ isPopoverOpen: false,
+ };
+
+ const agentOptions = [
+ 'Global configuration',
+ 'Communication',
+ 'Anti-flooding settings',
+ 'Labels',
+ 'Policy monitoring',
+ { name: 'oscap', desc: 'OpenSCAP' },
+ 'CIS-CAT',
+ 'Osquery',
+ 'Inventory data',
+ 'Active response',
+ 'Commands',
+ { name: 'docker', desc: 'Docker listener' },
+ 'Log collection',
+ 'Integrity monitoring',
+ ];
+ const groupOptions = ['Configurations', 'Agents in group'];
+
+ this.options = [];
+ const list = this.props.type === 'agent' ? agentOptions : groupOptions;
+ list.forEach((x, idx) => {
+ if (
+ typeof x === 'string' ||
+ (x.name &&
+ !(
+ UnsupportedComponents[this.props.agentPlatform] ||
+ UnsupportedComponents[WAZUH_AGENTS_OS_TYPE.OTHERS]
+ ).includes(x.name))
+ ) {
+ this.options.push({ id: `${idx}`, label: x.desc || x });
+ }
+ });
+
+ let initialChecks = {};
+ this.options.forEach(x => {
+ initialChecks[x.id] = true;
+ });
+ this.state.checkboxIdToSelectedMap = initialChecks;
+ }
+
+ selectAll(flag) {
+ let newCheckboxIdToSelectedMap = {};
+ for (let i = 0; i < this.options.length; i++) {
+ newCheckboxIdToSelectedMap[`${this.options[i].id}`] = flag;
+ }
+ this.setState({
+ checkboxIdToSelectedMap: newCheckboxIdToSelectedMap,
+ buttonDisabled: !flag,
+ });
+ }
+
+ exportClick() {
+ this.setState({
+ isPopoverOpen: !this.state.isPopoverOpen,
+ });
+ }
+
+ closePopover() {
+ this.setState({
+ isPopoverOpen: false,
+ });
+ }
+
+ onChange = optionId => {
+ const newCheckboxIdToSelectedMap = {
+ ...this.state.checkboxIdToSelectedMap,
+ ...{
+ [optionId]: !this.state.checkboxIdToSelectedMap[optionId],
+ },
+ };
+ let result = false;
+ for (let i = 0; i < this.options.length; i++) {
+ if (newCheckboxIdToSelectedMap[`${this.options[i].id}`] === true) {
+ result = true;
+ }
+ }
+ this.setState({
+ checkboxIdToSelectedMap: newCheckboxIdToSelectedMap,
+ buttonDisabled: !result,
+ });
+ };
+
+ render() {
+ const button = (
+ <EuiButtonEmpty
+ iconType='importAction'
+ iconSide='left'
+ size='s'
+ style={{ marginTop: '4px' }}
+ onClick={this.exportClick.bind(this)}
+ >
+ Export PDF
+ </EuiButtonEmpty>
+ );
+ return (
+ <EuiPopover
+ id='trapFocus'
+ ownFocus
+ button={button}
+ isOpen={this.state.isPopoverOpen}
+ closePopover={this.closePopover.bind(this)}
+ anchorPosition='downRight'
+ >
+ <EuiCheckboxGroup
+ options={this.options}
+ idToSelectedMap={this.state.checkboxIdToSelectedMap}
+ onChange={this.onChange}
+ compressed
+ />
+ <EuiSpacer size='s' />
+ {this.options.length > 3 && (
+ <>
+ <EuiButtonEmpty size='xs' onClick={() => this.selectAll(true)}>
+ Select all
+ </EuiButtonEmpty>
+ <EuiSpacer size='s' />
+ <EuiButtonEmpty size='xs' onClick={() => this.selectAll(false)}>
+ Unselect all
+ </EuiButtonEmpty>
+ </>
+ )}
+ <EuiSpacer size='m' />
+ <EuiButton
+ isDisabled={this.state.buttonDisabled}
+ onClick={() => {
+ this.closePopover();
+ this.props.exportConfiguration(
+ this.state.checkboxIdToSelectedMap,
+ );
+ }}
+ fill
+ >
+ Generate PDF report
+ </EuiButton>
+ </EuiPopover>
+ );
+ }
+ },
+);
+
+ExportConfiguration.propTypes = {
+ exportConfiguration: PropTypes.func,
+ type: PropTypes.string,
+ agentPlatform: PropTypes.string,
+};

plugins/main/public/components/common/charts/visualizations/basic.tsx

@@ -160,7 +160,11 @@ export const VisualizationBasicWidgetSelector = ({
 
  return (
  <>
- <EuiFlexGroup className='embPanel__header' gutterSize='none'>
+ <EuiFlexGroup
+ className='embPanel__header'
+ gutterSize='none'
+ alignItems='center'
+ >
  <EuiFlexItem>
  {title && (
  <h2 className='embPanel__title wz-headline-title'>