diff --git a/CHANGELOG.md b/CHANGELOG.md index aa599bc0fb..7827413f3b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,7 @@ All notable changes to the Wazuh app project will be documented in this file. ### Added - Support for Wazuh 4.8.0 -- Added the ability to check if there are available updates from the UI. [#6093](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6093) +- Added the ability to check if there are available updates from the UI. [#6093](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6093) [#6256](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6256) - Added remember server address check [#5791](https://github.com/wazuh/wazuh-dashboard-plugins/pull/5791) - Added the ssl_agent_ca configuration to the SSL Settings form [#6083](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6083) - Added global vulnerabilities dashboards [#5896](https://github.com/wazuh/wazuh-dashboard-plugins/pull/5896) [#6179](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6179) [#6173](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6173) [#6147](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6147) [#6231](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6231) [#6246](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6246) diff --git a/plugins/main/public/components/settings/api/api-table.js b/plugins/main/public/components/settings/api/api-table.js index 53e6056e33..89bed290c1 100644 --- a/plugins/main/public/components/settings/api/api-table.js +++ b/plugins/main/public/components/settings/api/api-table.js @@ -41,7 +41,7 @@ import { formatUIDate } from '../../../react-services/time-service'; export const ApiTable = compose( withErrorBoundary, - withReduxProvider + withReduxProvider, )( class ApiTable extends Component { constructor(props) { @@ -62,7 +62,9 @@ export const ApiTable = compose( async getApisAvailableUpdates(forceUpdate = false) { try { this.setState({ refreshingAvailableUpdates: true }); - const availableUpdates = await this.state.getAvailableUpdates(forceUpdate); + const availableUpdates = await this.state.getAvailableUpdates( + forceUpdate, + ); this.setState({ availableUpdates }); } catch (error) { const options = { @@ -73,7 +75,9 @@ export const ApiTable = compose( error: { error: error, message: error.message || error, - title: `Error checking available updates: ${error.message || error}`, + title: `Error checking available updates: ${ + error.message || error + }`, }, }; @@ -141,7 +145,12 @@ export const ApiTable = compose( refreshingEntries: false, }); } catch (error) { - if (error && error.data && error.data.message && error.data.code === 2001) { + if ( + error && + error.data && + error.data.message && + error.data.code === 2001 + ) { this.props.showAddApiWithInitialError(error); } } @@ -154,7 +163,7 @@ export const ApiTable = compose( async checkApi(api) { try { const entries = this.state.apiEntries; - const idx = entries.map((e) => e.id).indexOf(api.id); + const idx = entries.map(e => e.id).indexOf(api.id); try { await this.props.checkManager(api); entries[idx].status = 'online'; @@ -183,7 +192,9 @@ export const ApiTable = compose( error: { error: error, message: error.message || error, - title: `Error checking manager connection: ${error.message || error}`, + title: `Error checking manager connection: ${ + error.message || error + }`, }, }; @@ -213,13 +224,14 @@ export const ApiTable = compose( }, }; - const isLoading = this.state.refreshingEntries || this.state.refreshingAvailableUpdates; + const isLoading = + this.state.refreshingEntries || this.state.refreshingAvailableUpdates; const items = [ - ...this.state.apiEntries?.map((apiEntry) => { + ...this.state.apiEntries?.map(apiEntry => { const versionData = this.state.availableUpdates?.apis_available_updates?.find( - (apiAvailableUpdates) => apiAvailableUpdates.api_id === apiEntry.id + apiAvailableUpdates => apiAvailableUpdates.api_id === apiEntry.id, ) || {}; return { @@ -272,44 +284,56 @@ export const ApiTable = compose( name: 'Status', align: 'left', sortable: true, - render: (item) => { + render: item => { if (item) { return item === 'online' ? ( - + Online ) : item.status === 'down' ? ( - + - + Warning - + this.props.copyToClipBoard(item.downReason)} + color='primary' + iconType='questionInCircle' + aria-label='Info about the error' + onClick={() => + this.props.copyToClipBoard(item.downReason) + } /> ) : ( - + - + Offline - + this.props.copyToClipBoard(item.downReason)} + color='primary' + iconType='questionInCircle' + aria-label='Info about the error' + onClick={() => + this.props.copyToClipBoard(item.downReason) + } /> @@ -318,7 +342,7 @@ export const ApiTable = compose( } else { return ( - +   Checking ); @@ -336,41 +360,70 @@ export const ApiTable = compose( name: 'Updates status', sortable: true, render: (item, api) => { - const getColor = () => { - return API_UPDATES_STATUS_COLUMN[item]?.color; - }; + const color = API_UPDATES_STATUS_COLUMN[item]?.color ?? 'subdued'; - const getContent = () => { - return API_UPDATES_STATUS_COLUMN[item]?.text; - }; + const content = + API_UPDATES_STATUS_COLUMN[item]?.text ?? 'Never checked'; if (!this.state.refreshingAvailableUpdates) { return ( - + - - {getContent()} + + {content} + {!item ? ( + + + Click Check updates button to get information +

+ } + > + +
+
+ ) : null} {item === 'availableUpdates' ? ( - View available updates

}> + View available updates

} + > this.setState({ apiAvailableUpdateDetails: api })} + aria-label='Availabe updates' + iconType='eye' + onClick={() => + this.setState({ apiAvailableUpdateDetails: api }) + } />
) : null} {item === 'error' && api.error?.detail ? ( - + this.props.copyToClipBoard(api.error.detail)} + color='primary' + iconType='questionInCircle' + aria-label='Info about the error' + onClick={() => + this.props.copyToClipBoard(api.error.detail) + } /> @@ -380,7 +433,7 @@ export const ApiTable = compose( } else { return ( - +   Checking ); @@ -393,20 +446,20 @@ export const ApiTable = compose( align: 'center', sortable: true, width: '80px', - render: (value) => { + render: value => { return value === API_USER_STATUS_RUN_AS.ENABLED ? ( - + ) : value === API_USER_STATUS_RUN_AS.USER_NOT_ALLOWED ? ( - + ) : ( '' @@ -415,15 +468,19 @@ export const ApiTable = compose( }, { name: 'Actions', - render: (item) => ( + render: item => ( Set as default

}} - iconType={item.id === this.props.currentDefault ? 'starFilled' : 'starEmpty'} - aria-label="Set as default" + iconType={ + item.id === this.props.currentDefault + ? 'starFilled' + : 'starEmpty' + } + aria-label='Set as default' onClick={async () => { const currentDefault = await this.props.setDefault(item); this.setState({ @@ -433,12 +490,12 @@ export const ApiTable = compose( />
- Check connection

}> + Check connection

}> await this.checkApi(item)} - color="success" + color='success' />
@@ -456,8 +513,8 @@ export const ApiTable = compose( return ( - - + + @@ -469,8 +526,8 @@ export const ApiTable = compose( this.props.showAddApi()} > @@ -478,26 +535,33 @@ export const ApiTable = compose( - await this.refresh()}> + await this.refresh()} + > Refresh await this.getApisAvailableUpdates(true)} > Check updates{' '} - + @@ -508,32 +572,34 @@ export const ApiTable = compose( - - From here you can manage and configure the API entries. You can also check their - connection and status. + + From here you can manage and configure the API entries. You + can also check their connection and status. this.setState({ apiAvailableUpdateDetails: undefined })} + onClose={() => + this.setState({ apiAvailableUpdateDetails: undefined }) + } /> ); } - } + }, ); ApiTable.propTypes = {