feat(xo-web/menu): add warning icon in proxies menu (#7237)

See Zammad#19126

Add a warning icon in Proxies menu if unable to check proxy upgrade

CHANGELOG.unreleased.md

@@ -10,6 +10,7 @@
 - [SR] show an icon on SR during VDI coalescing (with XCP-ng 8.3+) (PR [#7241](https://github.com/vatesfr/xen-orchestra/pull/7241))
 
 - [VDI/Export] Expose NBD settings in the XO and REST APIs api (PR [#7251](https://github.com/vatesfr/xen-orchestra/pull/7251))
+- [Menu/Proxies] Added a warning icon if unable to check proxies upgrade (PR [#7237](https://github.com/vatesfr/xen-orchestra/pull/7237))
 
 ### Bug fixes
 

packages/xo-web/src/common/intl/messages.js

@@ -2703,6 +2703,8 @@ const messages = {
   proxiesNeedUpgrade: 'Some proxies need to be upgraded.',
   upgradeNeededForProxies: 'Some proxies need to be upgraded. Click here to get more information.',
   xoProxyConcreteGuide: 'XO Proxy: a concrete guide',
+  someProxiesHaveErrors:
+    '{n, number} prox{n, plural, one {y} other {ies}} ha{n, plural, one {s} other {ve}} error{n, plural, one {} other {s}}',
 
   // ----- Utils -----
   secondsFormat: '{seconds, plural, one {# second} other {# seconds}}',

packages/xo-web/src/common/xo/index.js

@@ -512,7 +512,14 @@ subscribeHostMissingPatches.forceRefresh = host => {
 const proxiesApplianceUpdaterState = {}
 export const subscribeProxiesApplianceUpdaterState = (proxyId, cb) => {
   if (proxiesApplianceUpdaterState[proxyId] === undefined) {
-    proxiesApplianceUpdaterState[proxyId] = createSubscription(() => getProxyApplianceUpdaterState(proxyId))
+    proxiesApplianceUpdaterState[proxyId] = createSubscription(async () => {
+      try {
+        return await getProxyApplianceUpdaterState(proxyId)
+      } catch (error) {
+        console.error(error)
+        return { state: 'error' }
+      }
+    })
   }
   return proxiesApplianceUpdaterState[proxyId](cb)
 }

packages/xo-web/src/xo-app/menu/index.js

@@ -32,7 +32,7 @@ import {
   getXoaState,
   isAdmin,
 } from 'selectors'
-import { every, forEach, identity, isEmpty, isEqual, map, pick, size, some } from 'lodash'
+import { countBy, every, forEach, identity, isEmpty, isEqual, map, pick, size, some } from 'lodash'
 
 import styles from './index.css'
 
@@ -111,7 +111,10 @@ export default class Menu extends Component {
     () => this.state.proxyStates,
     proxyStates => some(proxyStates, state => state.endsWith('-upgrade-needed'))
   )
-
+  _getNProxiesErrors = createSelector(
+    () => this.state.proxyStates,
+    proxyStates => countBy(proxyStates).error
+  )
   _checkPermissions = createSelector(
     () => this.props.isAdmin,
     () => this.props.permissions,
@@ -213,6 +216,7 @@ export default class Menu extends Component {
     const noOperatablePools = this._getNoOperatablePools()
     const noResourceSets = this._getNoResourceSets()
     const noNotifications = this._getNoNotifications()
+    const nProxiesErrors = this._getNProxiesErrors()
 
     const missingPatchesWarning = this._hasMissingPatches() ? (
       <Tooltip content={_('homeMissingPatches')}>
@@ -468,6 +472,10 @@ export default class Menu extends Component {
                 ]}
               />
             </Tooltip>
+          ) : nProxiesErrors > 0 ? (
+            <Tooltip content={_('someProxiesHaveErrors', { n: nProxiesErrors })}>
+              <span className='tag tag-pill tag-danger'>{nProxiesErrors}</span>
+            </Tooltip>
           ) : null,
         ],
       },