Merge branch '3.11-7.4' of https://github.com/wazuh/wazuh-kibana-app into 3.11-7.4

public/controllers/management/components/reporting-table.js

@@ -12,7 +12,15 @@
  */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { EuiBasicTable, EuiButtonIcon } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiBasicTable,
+  EuiButtonIcon,
+  EuiPanel,
+  EuiTitle,
+  EuiText
+} from '@elastic/eui';
 
 export class ReportingTable extends Component {
   constructor(props) {
@@ -116,14 +124,32 @@ export class ReportingTable extends Component {
     };
 
     return (
-      <div>
+      <EuiPanel>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiTitle>
+              <h2>Reporting</h2>
+            </EuiTitle>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiText color="subdued" style={{ paddingBottom: '15px' }}>
+              From here you can check all your reports.
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiFlexGroup>
+          <EuiFlexItem>
             <EuiBasicTable
               items={pageOfItems}
               columns={columns}
               pagination={pagination}
               onChange={obj => this.onTableChange(obj)}
             />
-      </div>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPanel>
     );
   }
 }

public/controllers/settings/components/add-api.js

@@ -22,7 +22,8 @@ import {
   EuiButton,
   EuiButtonEmpty,
   EuiSteps,
-  EuiCallOut
+  EuiCallOut,
+  EuiPanel
 } from '@elastic/eui';
 
 export class AddApi extends Component {
@@ -168,7 +169,8 @@ export class AddApi extends Component {
     const view = (
       <EuiFlexGroup>
         <EuiFlexItem />
-        <EuiFlexItem>
+        <EuiFlexItem className="min-guide-width">
+          <EuiPanel>
             <EuiFlexGroup>
               <EuiFlexItem grow={false}>
                 <EuiText>
@@ -190,6 +192,7 @@ export class AddApi extends Component {
             </EuiFlexGroup>
             <EuiSpacer />
             <EuiSteps firstStepNumber={1} steps={steps} />
+          </EuiPanel>
         </EuiFlexItem>
         <EuiFlexItem />
       </EuiFlexGroup>

public/controllers/settings/components/api-is-down.js

@@ -27,7 +27,8 @@ import {
   EuiCallOut,
   EuiLoadingSpinner,
   EuiToolTip,
-  EuiButtonIcon
+  EuiButtonIcon,
+  EuiPanel
 } from '@elastic/eui';
 
 export class ApiIsDown extends Component {
@@ -103,8 +104,7 @@ export class ApiIsDown extends Component {
   }
 
   render() {
-    const apiExample = `
-# Example Wazuh API configuration
+    const apiExample = `# Example Wazuh API configuration
 hosts:
     - production:
         url: http://172.16.1.2
@@ -239,12 +239,14 @@ hosts:
     return (
       <EuiFlexGroup>
         <EuiFlexItem />
-        <EuiFlexItem>
+        <EuiFlexItem className="min-guide-width">
+          <EuiPanel>
             <EuiText>
               <h2>Wazuh API seems to be down</h2>
             </EuiText>
             <EuiSpacer />
             <EuiSteps firstStepNumber={1} steps={steps} />
+          </EuiPanel>
         </EuiFlexItem>
         <EuiFlexItem />
       </EuiFlexGroup>

public/controllers/settings/settings.js

@@ -527,7 +527,7 @@ export class SettingsController {
           };
         }
         throw {
-          message: 'Some API entries are not reachable',
+          message: `Some Api entries are not rechable but at least one it is. That's mean that the Wazuh App can be used, but please, review your hosts configuration in order to solve the unreachable Api entries.`,
           type: 'warning',
           closedEnabled: true
         };

public/less/common.less

@@ -1248,3 +1248,7 @@ md-toolbar.md-default-theme:not(.md-menu-toolbar), md-toolbar:not(.md-menu-toolb
 md-chips.md-default-theme .md-chips, md-chips .md-chips{
   box-shadow: none;
 }
+
+.min-guide-width{
+  min-width: 675px !important;
+}