[Backport 4.4-7.16] Fix deploy new agent section

CHANGELOG.md

@@ -19,6 +19,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Added powerPC architecture in redhat7, in the section 'Deploy new agent'. [4833](https://github.com/wazuh/wazuh-kibana-app/pull/4833)
 - Added a centralized service to handle the requests [#4831](https://github.com/wazuh/wazuh-kibana-app/pull/4831)
 - Added data-test-subj create policy [#4873](https://github.com/wazuh/wazuh-kibana-app/pull/4873)
+- Deploy new agent section: Added extra steps message and new command for windows xp and windows server 2008, added alpine agent with all its steps. [#4933](https://github.com/wazuh/wazuh-kibana-app/pull/4933)
 - Added file saving conditions in File Editor [#4970](https://github.com/wazuh/wazuh-kibana-app/pull/4970)
 
 ### Changed
@@ -45,10 +46,13 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Fixed a bug where the Wazuh logo was used instead of the custom one [#4539](https://github.com/wazuh/wazuh-kibana-app/pull/4539)
 - Fixed rendering problems of the `Agent Overview` section in low resolutions [#4516](https://github.com/wazuh/wazuh-kibana-app/pull/4516)
 - Fixed issue when logging out from Wazuh when SAML is enabled [#4595](https://github.com/wazuh/wazuh-kibana-app/issues/4595)
-- Fixed server errors with code 500 when the Wazuh API is not reachable / up. [#4710](https://github.com/wazuh/wazuh-kibana-app/pull/4710) [#4728](https://github.com/wazuh/wazuh-kibana-app/pull/4728) [#4971](https://github.com/wazuh/wazuh-kibana-app/pull/4971)
+- Fixed server errors with code 500 when the Wazuh API is not reachable / up. [#4710](https://github.com/wazuh/wazuh-kibana-app/pull/4710) [#4728](https://github.com/wazuh/wazuh-kibana-app/pull/4728) [#4998](https://github.com/wazuh/wazuh-kibana-app/pull/4998) [#4971](https://github.com/wazuh/wazuh-kibana-app/pull/4971)
 - Fixed pagination to SCA table [#4653](https://github.com/wazuh/wazuh-kibana-app/issues/4653) [#5010](https://github.com/wazuh/wazuh-kibana-app/pull/5010)
 - Fixed WAZUH_PROTOCOL param suggestion [#4849](https://github.com/wazuh/wazuh-kibana-app/pull/4849)
 - Raspbian OS, Ubuntu, Amazon Linux and Amazon Linux 2 commands in the wizard deploy agent now change when a different architecture is selected [#4876](https://github.com/wazuh/wazuh-kibana-app/pull/4876) [#4880](https://github.com/wazuh/wazuh-kibana-app/pull/4880)
+- Fixed commands in the deploy new agent section(most of the commands are missing '-1') [#4962](https://github.com/wazuh/wazuh-kibana-app/pull/4962)
+- Deploy new agent section: Fixed the agents wizard OS styles and their versions. [#4832](https://github.com/wazuh/wazuh-kibana-app/pull/4832) [#4838](https://github.com/wazuh/wazuh-kibana-app/pull/4838)
+- Fixed the way macos versions and architectures were displayed, fixed the way agents were displayed, fixed the way ubuntu versions were displayed. [#4933](https://github.com/wazuh/wazuh-kibana-app/pull/4933)
 - Fixed the agents wizard OS styles and their versions. [#4832](https://github.com/wazuh/wazuh-kibana-app/pull/4832) [#4838](https://github.com/wazuh/wazuh-kibana-app/pull/4838)
 - Fixed agent installation command for macOS in the deploy new agent section. [#4968](https://github.com/wazuh/wazuh-kibana-app/pull/4968)
 - Deploy new agent section: Fixed the way macos versions and architectures were displayed, fixed the way agents were displayed, fixed the way ubuntu versions were displayed. [#4933](https://github.com/wazuh/wazuh-kibana-app/pull/4933)
@@ -60,7 +64,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 
 ### Removed
 
-- Removed the `angular-chart.js` dependency [#4985](https://github.com/wazuh/wazuh-kibana-app/pull/4985)
+- Removed the `angular-chart.js` dependency [#5014](https://github.com/wazuh/wazuh-kibana-app/pull/5014)
 
 ## Wazuh v4.3.10 - Kibana 7.10.2, 7.16.x, 7.17.x - Revision 4311
 

public/app.js

@@ -57,7 +57,9 @@ const app = getAngularModule();
 app.config([
   '$compileProvider',
   function ($compileProvider) {
-    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|data|blob):/);
+    $compileProvider.aHrefSanitizationWhitelist(
+      /^\s*(https?|ftp|mailto|data|blob):/,
+    );
   },
 ]);
 
@@ -75,7 +77,7 @@ app.run([
 
     // Set currentSecurity platform in Redux when app starts.
     checkCurrentSecurityPlatform()
-      .then((item) => {
+      .then(item => {
         store.dispatch(updateCurrentPlatform(item));
       })
       .catch(() => {});
@@ -91,7 +93,9 @@ app.run([
 /**
  * Set trigger for logout
  */
-app.run(['$rootElement', function ($rootElement) {
+app.run([
+  '$rootElement',
+  function ($rootElement) {
     $rootElement.append(`
     <div>
       <div class="wazuhNotReadyYet"></div>
@@ -101,27 +105,34 @@ app.run(['$rootElement', function ($rootElement) {
       <react-component name="ToastNotificationsModal" props=""></react-component>
     </div>`);
 
-  // Add plugin help links as extension to plugin platform help menu
-  addHelpMenuToAppChrome();
-
-  // Bind deleteExistentToken on Log out component.
-  $('.euiHeaderSectionItem__button, .euiHeaderSectionItemButton').on('mouseleave', function () {
-    // opendistro
-    $('button:contains(Log out)').on('click', function () {
-      WzAuthentication.deleteExistentToken();
-    });
-    // x-pack
-    $('a:contains(Log out)').on('click', function (event) {
-      // Override href's behaviour and navigate programatically
-      // to the logout path once the token has been deleted.
-      event.preventDefault();
-      WzAuthentication.deleteExistentToken()
-        .catch((err) => {
-          console.error('[ERROR] - User token could not be deprecated - ', err);
-        })
-        .finally(() => {
-          window.location = event.currentTarget.href;
+    // Add plugin help links as extension to plugin platform help menu
+    addHelpMenuToAppChrome();
+
+    // Bind deleteExistentToken on Log out component.
+    $('.euiHeaderSectionItem__button, .euiHeaderSectionItemButton').on(
+      'mouseleave',
+      function () {
+        // opendistro
+        $('button:contains(Log out)').on('click', function () {
+          WzAuthentication.deleteExistentToken();
+        });
+        // x-pack
+        $('a:contains(Log out)').on('click', function (event) {
+          // Override href's behaviour and navigate programatically
+          // to the logout path once the token has been deleted.
+          event.preventDefault();
+          WzAuthentication.deleteExistentToken()
+            .catch(err => {
+              console.error(
+                '[ERROR] - User token could not be deprecated - ',
+                err,
+              );
+            })
+            .finally(() => {
+              window.location = event.currentTarget.href;
+            });
         });
-    });
-  });
-}]);
+      },
+    );
+  },
+]);

public/components/agents/vuls/inventory.tsx

@@ -84,9 +84,17 @@ export class Inventory extends Component {
       customBadges: [],
       filters: [],
       stats: [
-        { title: 0, description: 'Critical', titleColor: this.titleColors.Critical },
+        {
+          title: 0,
+          description: 'Critical',
+          titleColor: this.titleColors.Critical,
+        },
         { title: 0, description: 'High', titleColor: this.titleColors.High },
-        { title: 0, description: 'Medium', titleColor: this.titleColors.Medium },
+        {
+          title: 0,
+          description: 'Medium',
+          titleColor: this.titleColors.Medium,
+        },
         { title: 0, description: 'Low', titleColor: this.titleColors.Low },
       ],
       severityPieStats: [],
@@ -95,12 +103,10 @@ export class Inventory extends Component {
         last_partial_scan: '',
       },
     };
-    this.fetchVisualizationVulnerabilitiesSummaryData = this.fetchVisualizationVulnerabilitiesSummaryData.bind(
-      this
-    );
-    this.fetchVisualizationVulnerabilitiesSeverityData = this.fetchVisualizationVulnerabilitiesSeverityData.bind(
-      this
-    );
+    this.fetchVisualizationVulnerabilitiesSummaryData =
+      this.fetchVisualizationVulnerabilitiesSummaryData.bind(this);
+    this.fetchVisualizationVulnerabilitiesSeverityData =
+      this.fetchVisualizationVulnerabilitiesSeverityData.bind(this);
     this.colorsVisualizationVulnerabilitiesSummaryData = euiPaletteColorBlind();
   }
 
@@ -122,7 +128,10 @@ export class Inventory extends Component {
         color: this.colorsVisualizationVulnerabilitiesSummaryData[index],
         onClick: () => this.onFiltersChange(this.buildFilterQuery(field, key)),
       }))
-      .sort((firstElement, secondElement) => secondElement.value - firstElement.value);
+      .sort(
+        (firstElement, secondElement) =>
+          secondElement.value - firstElement.value,
+      );
   }
 
   async fetchVisualizationVulnerabilitiesSeverityData() {
@@ -134,7 +143,7 @@ export class Inventory extends Component {
     const vulnerabilityLastScan = await getLastScan(id);
     const { severity } = await getAggregation(id, FIELD);
 
-    const severityStats = SEVERITY_KEYS.map((key) => ({
+    const severityStats = SEVERITY_KEYS.map(key => ({
       titleColor: this.titleColors[key],
       description: key,
       title: severity[key] ? severity[key] : 0,
@@ -147,11 +156,12 @@ export class Inventory extends Component {
     });
 
     return Object.keys(severity).length
-      ? SEVERITY_KEYS.map((key) => ({
+      ? SEVERITY_KEYS.map(key => ({
           label: key,
           value: severity[key] ? severity[key] : 0,
           color: this.titleColors[key],
-          onClick: () => this.onFiltersChange(this.buildFilterQuery(FIELD, key)),
+          onClick: () =>
+            this.onFiltersChange(this.buildFilterQuery(FIELD, key)),
         }))
       : [];
   }
@@ -173,15 +183,19 @@ export class Inventory extends Component {
     }
   }
 
-  onFiltersChange = (filters) => {
+  onFiltersChange = filters => {
     this.setState({ filters });
   };
 
   renderTable() {
     const { filters } = this.state;
     return (
       <div>
-        <InventoryTable {...this.props} filters={filters} onFiltersChange={this.onFiltersChange} />
+        <InventoryTable
+          {...this.props}
+          filters={filters}
+          onFiltersChange={this.onFiltersChange}
+        />
       </div>
     );
   }
@@ -191,7 +205,7 @@ export class Inventory extends Component {
       <EuiPage>
         <EuiFlexGroup>
           <EuiFlexItem>
-            <EuiProgress size="xs" color="primary" />
+            <EuiProgress size='xs' color='primary' />
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiPage>
@@ -203,14 +217,18 @@ export class Inventory extends Component {
     return (
       <EuiFlexItem key={`module_vulnerabilities_inventory_stat_${description}`}>
         <EuiStat
-          textAlign="center"
+          textAlign='center'
           isLoading={isLoadingStats}
           title={
-            <EuiToolTip position="top" content={`Filter by Severity`}>
+            <EuiToolTip position='top' content={`Filter by Severity`}>
               <span
                 className={'statWithLink wz-user-select-none'}
                 style={{ cursor: 'pointer', fontSize: '2.25rem' }}
-                onClick={() => this.onFiltersChange(this.buildFilterQuery('severity', description))}
+                onClick={() =>
+                  this.onFiltersChange(
+                    this.buildFilterQuery('severity', description),
+                  )
+                }
               >
                 {title}
               </span>
@@ -229,50 +247,63 @@ export class Inventory extends Component {
       return this.loadingInventory();
     }
     const last_full_scan = beautifyDate(vulnerabilityLastScan.last_full_scan);
-    const last_partial_scan = beautifyDate(vulnerabilityLastScan.last_partial_scan);
+    const last_partial_scan = beautifyDate(
+      vulnerabilityLastScan.last_partial_scan,
+    );
 
     const table = this.renderTable();
     return (
       <EuiPage>
         <EuiPageBody>
           <EuiFlexGroup wrap>
             <EuiFlexItem>
-              <EuiCard title description betaBadgeLabel="Severity" className="wz-euiCard-no-title">
-                <div style={{ display: 'flex', alignItems: 'flex-end', height: '100%' }}>
+              <EuiCard
+                title
+                description
+                betaBadgeLabel='Severity'
+                className='wz-euiCard-no-title'
+              >
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'flex-end',
+                    height: '100%',
+                  }}
+                >
                   <VisualizationBasicWidget
-                    type="donut"
+                    type='donut'
                     size={{ width: '100%', height: '150px' }}
                     showLegend
                     onFetch={this.fetchVisualizationVulnerabilitiesSeverityData}
                     onFetchDependencies={[this.props.agent.id]}
-                    noDataTitle="No results"
-                    noDataMessage="No results were found."
+                    noDataTitle='No results'
+                    noDataMessage='No results were found.'
                   />
                 </div>
               </EuiCard>
             </EuiFlexItem>
             <EuiFlexItem>
-              <EuiCard title description betaBadgeLabel="Details">
-                <EuiFlexGroup alignItems="center" className={'height-full'}>
+              <EuiCard title description betaBadgeLabel='Details'>
+                <EuiFlexGroup alignItems='center' className={'height-full'}>
                   <EuiFlexItem>
-                    <EuiFlexGroup alignItems="center">
-                      {stats.map((stat) => this.buildTitleFilter(stat))}
+                    <EuiFlexGroup alignItems='center'>
+                      {stats.map(stat => this.buildTitleFilter(stat))}
                     </EuiFlexGroup>
                     <EuiFlexGroup style={{ marginTop: 'auto' }}>
                       <EuiFlexItem>
                         <WzStat
                           title={last_full_scan}
-                          description="Last full scan"
-                          textAlign="center"
-                          titleSize="xs"
+                          description='Last full scan'
+                          textAlign='center'
+                          titleSize='xs'
                         />
                       </EuiFlexItem>
                       <EuiFlexItem>
                         <WzStat
                           title={last_partial_scan}
-                          description="Last partial scan"
-                          textAlign="center"
-                          titleSize="xs"
+                          description='Last partial scan'
+                          textAlign='center'
+                          titleSize='xs'
                         />
                       </EuiFlexItem>
                     </EuiFlexGroup>
@@ -281,9 +312,14 @@ export class Inventory extends Component {
               </EuiCard>
             </EuiFlexItem>
             <EuiFlexItem>
-              <EuiCard title description betaBadgeLabel="Summary" className="wz-euiCard-no-title">
+              <EuiCard
+                title
+                description
+                betaBadgeLabel='Summary'
+                className='wz-euiCard-no-title'
+              >
                 <VisualizationBasicWidgetSelector
-                  type="donut"
+                  type='donut'
                   size={{ width: '100%', height: '150px' }}
                   showLegend
                   selectorOptions={[
@@ -295,7 +331,7 @@ export class Inventory extends Component {
                   ]}
                   onFetch={this.fetchVisualizationVulnerabilitiesSummaryData}
                   onFetchExtraDependencies={[this.props.agent.id]}
-                  noDataTitle="No results"
+                  noDataTitle='No results'
                   noDataMessage={(_, optionRequirement) =>
                     `No ${optionRequirement.text} results were found.`
                   }