Get and show available updates for each api

CHANGELOG.md

@@ -7,8 +7,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 ### Added
 
 - Support for Wazuh 4.8.0
-- Added `wazuh-check-updates` plugin. [#5897](https:/wazuh/wazuh-kibana-app/pull/5897)
-- Added new updates availability information to the About page. [#5939](https:/wazuh/wazuh-kibana-app/pull/5939)
+- Added the ability to check if there are available updates from the UI.
 
 ## Wazuh v4.7.0 - OpenSearch Dashboards 2.6.0 - Revision 01
 

plugins/main/public/components/settings/about/__snapshots__/appInfo.test.tsx.snap

@@ -1,75 +1,78 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SettingsAboutAppInfo component should render version, revision, install date and UpToDateStatus and DismissNotificationCheck components 1`] = `
+exports[`SettingsAboutAppInfo component should render version, revision, install date and ApisUpdateStatus component 1`] = `
 <div>
+ <h2
+ class="euiTitle euiTitle--medium"
+ >
+ Wazuh Dashboard version
+ </h2>
+ <div
+ class="euiSpacer euiSpacer--l"
+ />
  <div
- class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+ class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
  >
  <div
  class="euiFlexItem euiFlexItem--flexGrowZero"
  >
- <div
- class="euiText euiText--medium"
+ <dl
+ class="euiDescriptionList euiDescriptionList--row"
  >
- <div
- class="wz-text-truncatable"
+ <dt
+ class="euiDescriptionList__title"
  >
- App version: 
- <span
- class="wz-text-bold"
- >
- 4.8.0
- </span>
- </div>
- </div>
- </div>
- <div
- class="euiFlexItem"
- >
- <div>
- Up to date status component
- </div>
+ Version
+ </dt>
+ <dd
+ class="euiDescriptionList__description"
+ >
+ 4.8.0
+ </dd>
+ </dl>
  </div>
- </div>
- <div
- class="euiSpacer euiSpacer--l"
- />
- <div
- class="euiText euiText--medium"
- >
  <div
- class="wz-text-truncatable"
+ class="euiFlexItem euiFlexItem--flexGrowZero"
  >
- App revision: 
- <span
- class="wz-text-bold"
+ <dl
+ class="euiDescriptionList euiDescriptionList--row"
  >
- 01
- </span>
+ <dt
+ class="euiDescriptionList__title"
+ >
+ Revision
+ </dt>
+ <dd
+ class="euiDescriptionList__description"
+ >
+ 01
+ </dd>
+ </dl>
  </div>
- </div>
- <div
- class="euiSpacer euiSpacer--l"
- />
- <div
- class="euiText euiText--medium"
- >
  <div
- class="wz-text-truncatable"
+ class="euiFlexItem euiFlexItem--flexGrowZero"
  >
- Install date: 
- <span
- class="wz-text-bold"
+ <dl
+ class="euiDescriptionList euiDescriptionList--row"
  >
- Sep 25, 2023 @ 14:03:40.816
- </span>
+ <dt
+ class="euiDescriptionList__title"
+ >
+ Install date
+ </dt>
+ <dd
+ class="euiDescriptionList__description"
+ >
+ Sep 25, 2023 @ 14:03:40.816
+ </dd>
+ </dl>
  </div>
  </div>
- <div
- class="euiSpacer euiSpacer--l"
+ <hr
+ class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
  />
  <div>
- Dismiss notification check component
+ APIs Updates Status component
  </div>
 </div>
 `;

plugins/main/public/components/settings/about/appInfo.test.tsx

@@ -5,36 +5,30 @@ import { SettingsAboutAppInfo } from './appInfo';
 
 jest.mock('../../../kibana-services', () => ({
  getWazuhCheckUpdatesPlugin: jest.fn().mockReturnValue({
- UpToDateStatus: () => <div>Up to date status component</div>,
- DismissNotificationCheck: () => <div>Dismiss notification check component</div>,
+ ApisUpdateStatus: () => <div>APIs Updates Status component</div>,
  }),
 }));
 
 describe('SettingsAboutAppInfo component', () => {
- test('should render version, revision, install date and UpToDateStatus and DismissNotificationCheck components', () => {
+ test('should render version, revision, install date and ApisUpdateStatus component', () => {
  const { container, getByText } = render(
  <SettingsAboutAppInfo
  appInfo={{
  'app-version': '4.8.0',
  revision: '01',
  installationDate: 'Sep 25, 2023 @ 14:03:40.816',
  }}
- setCurrentUpdate={() => {}}
  />
  );
 
  expect(container).toMatchSnapshot();
 
- const loaders = container.getElementsByClassName('euiLoadingSpinner');
- expect(loaders.length).toBe(0);
-
- expect(getByText('App version:')).toBeInTheDocument();
+ expect(getByText('Version')).toBeInTheDocument();
  expect(getByText('4.8.0')).toBeInTheDocument();
- expect(getByText('App revision:')).toBeInTheDocument();
+ expect(getByText('Revision')).toBeInTheDocument();
  expect(getByText('01')).toBeInTheDocument();
- expect(getByText('Install date:')).toBeInTheDocument();
+ expect(getByText('Install date')).toBeInTheDocument();
  expect(getByText('Sep 25, 2023 @ 14:03:40.816')).toBeInTheDocument();
- expect(getByText('Up to date status component')).toBeInTheDocument();
- expect(getByText('Dismiss notification check component')).toBeInTheDocument();
+ expect(getByText('APIs Updates Status component')).toBeInTheDocument();
  });
 });

plugins/main/public/components/settings/about/appInfo.tsx

@@ -1,64 +1,83 @@
 import {
- EuiCallOut,
  EuiFlexGroup,
  EuiFlexItem,
- EuiLoadingSpinner,
- EuiText,
  EuiSpacer,
+ EuiTitle,
+ EuiHorizontalRule,
+ EuiDescriptionList,
+ EuiCallOut,
 } from '@elastic/eui';
-import React from 'react';
-import { Update } from '../../../../../wazuh-check-updates/common/types';
+import React, { useState } from 'react';
 import { getWazuhCheckUpdatesPlugin } from '../../../kibana-services';
+import { ApiAvailableUpdates } from '../../../../../wazuh-check-updates/common/types';
 
 interface SettingsAboutAppInfoProps {
  appInfo: {
  'app-version': string;
  installationDate: string;
  revision: string;
  };
- setCurrentUpdate: (update: Update | undefined) => void;
 }
 
-export const SettingsAboutAppInfo = ({ appInfo, setCurrentUpdate }: SettingsAboutAppInfoProps) => {
- const { UpToDateStatus, DismissNotificationCheck } = getWazuhCheckUpdatesPlugin();
+export const SettingsAboutAppInfo = ({ appInfo }: SettingsAboutAppInfoProps) => {
+ const [apisAvailableUpdates, setApisAvailableUpdates] = useState<ApiAvailableUpdates[]>();
+
+ const { ApisUpdateStatus } = getWazuhCheckUpdatesPlugin();
+
+ const showVersionWarning = !!apisAvailableUpdates?.find(
+ (apiAvailableUpdates) => apiAvailableUpdates.version !== appInfo['app-version']
+ );
 
  return (
  <>
- <EuiFlexGroup
- direction="row"
- responsive
- alignItems="center"
- justifyContent="flexStart"
- gutterSize="m"
- >
+ <EuiTitle>
+ <h2>Wazuh Dashboard version</h2>
+ </EuiTitle>
+ <EuiSpacer size="l" />
+ <EuiFlexGroup responsive={false} wrap alignItems="center">
+ <EuiFlexItem grow={false}>
+ <EuiDescriptionList
+ listItems={[
+ {
+ title: 'Version',
+ description: appInfo['app-version'],
+ },
+ ]}
+ />
+ </EuiFlexItem>
  <EuiFlexItem grow={false}>
- <EuiText>
- <div className="wz-text-truncatable">
- {'App version: '}
- <span className="wz-text-bold">{appInfo['app-version']}</span>
- </div>
- </EuiText>
+ <EuiDescriptionList
+ listItems={[
+ {
+ title: 'Revision',
+ description: appInfo['revision'],
+ },
+ ]}
+ />
  </EuiFlexItem>
- <EuiFlexItem>
- <UpToDateStatus setCurrentUpdate={setCurrentUpdate} />
+ <EuiFlexItem grow={false}>
+ <EuiDescriptionList
+ listItems={[
+ {
+ title: 'Install date',
+ description: appInfo['installationDate'],
+ },
+ ]}
+ />
  </EuiFlexItem>
  </EuiFlexGroup>
- <EuiSpacer />
- <EuiText>
- <div className="wz-text-truncatable">
- {'App revision: '}
- <span className="wz-text-bold">{appInfo['revision']}</span>
- </div>
- </EuiText>
- <EuiSpacer />
- <EuiText>
- <div className="wz-text-truncatable">
- {'Install date: '}
- <span className="wz-text-bold">{appInfo['installationDate']}</span>
- </div>
- </EuiText>
- <EuiSpacer />
- <DismissNotificationCheck />
+ {showVersionWarning ? (
+ <>
+ <EuiSpacer size="l" />
+ <EuiCallOut
+ title="Wazuh Dashboard version must be the same as APIs"
+ color="warning"
+ iconType="alert"
+ />
+ </>
+ ) : null}
+ <EuiHorizontalRule margin="l" />
+ <ApisUpdateStatus setApisAvailableUpdates={setApisAvailableUpdates} />
  </>
  );
 };

plugins/main/public/components/settings/about/index.test.tsx

@@ -3,12 +3,6 @@ import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { SettingsAbout } from '.';
 
-jest.mock('../../../kibana-services', () => ({
- getWazuhCheckUpdatesPlugin: jest.fn().mockReturnValue({
- CurrentUpdateDetails: () => <div>Current update</div>,
- }),
-}));
-
 jest.mock('./appInfo', () => ({
  SettingsAboutAppInfo: jest.fn().mockReturnValue(<div>App info</div>),
 }));
@@ -43,5 +37,8 @@ describe('SettingsAbout component', () => {
 
  const loaders = container.getElementsByClassName('euiLoadingContent');
  expect(loaders.length).toBe(0);
+
+ const appInfo = getByText('App info');
+ expect(appInfo).toBeInTheDocument();
  });
 });

plugins/main/public/components/settings/about/index.tsx

@@ -1,9 +1,7 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { EuiLoadingContent, EuiPage, EuiPageBody, EuiPanel, EuiSpacer } from '@elastic/eui';
 import { SettingsAboutAppInfo } from './appInfo';
 import { SettingsAboutGeneralInfo } from './generalInfo';
-import { Update } from '../../../../../wazuh-check-updates/common/types';
-import { getWazuhCheckUpdatesPlugin } from '../../../kibana-services';
 
 interface SettingsAboutProps {
  appInfo?: {
@@ -17,10 +15,6 @@ interface SettingsAboutProps {
 export const SettingsAbout = (props: SettingsAboutProps) => {
  const { appInfo, pluginAppName } = props;
 
- const [currentUpdate, setCurrentUpdate] = useState<Update | undefined>();
-
- const { CurrentUpdateDetails } = getWazuhCheckUpdatesPlugin();
-
  const isLoading = !appInfo;
 
  return (
@@ -29,19 +23,7 @@ export const SettingsAbout = (props: SettingsAboutProps) => {
  <SettingsAboutGeneralInfo pluginAppName={pluginAppName} />
  <EuiSpacer size="l" />
  <EuiPanel paddingSize="l">
- {isLoading ? (
- <EuiLoadingContent lines={3} />
- ) : (
- <>
- <SettingsAboutAppInfo appInfo={appInfo} setCurrentUpdate={setCurrentUpdate} />
- {currentUpdate ? (
- <>
- <EuiSpacer size="l" />
- <CurrentUpdateDetails currentUpdate={currentUpdate} />
- </>
- ) : null}
- </>
- )}
+ {isLoading ? <EuiLoadingContent lines={3} /> : <SettingsAboutAppInfo appInfo={appInfo} />}
  </EuiPanel>
  </EuiPageBody>
  </EuiPage>

plugins/wazuh-check-updates/common/constants.ts

@@ -7,7 +7,7 @@ export const SAVED_OBJECT_UPDATES = 'wazuh-check-updates-available-updates';
 export const SAVED_OBJECT_SETTINGS = 'wazuh-check-updates-settings';
 export const SAVED_OBJECT_USER_PREFERENCES = 'wazuh-check-updates-user-preferences';
 
-export const DEFAULT_SCHEDULE = '* */12 * * *';
+export const DEFAULT_SCHEDULE = '0 0 * * *';
 
 export enum routes {
  checkUpdates = '/api/wazuh-check-updates/updates',