fix(xo-web): feedback, improve proxies menu warning icon and message

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

@@ -2703,7 +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: 'Some proxies have errors',
+  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/xo-app/menu/index.js

@@ -111,9 +111,19 @@ export default class Menu extends Component {
     () => this.state.proxyStates,
     proxyStates => some(proxyStates, state => state.endsWith('-upgrade-needed'))
   )
-  _areProxiesErrors = createSelector(
+  _getNProxiesErrors = createSelector(
     () => this.state.proxyStates,
-    proxyStates => some(proxyStates, state => state === 'error')
+    (proxyStates) => {
+      let count = 0
+
+      forEach(proxyStates, proxyState => {
+        if (proxyState === 'error') {
+          count++
+        }
+      })
+
+      return count
+    }
   )
   _checkPermissions = createSelector(
     () => this.props.isAdmin,
@@ -216,6 +226,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')}>
@@ -471,11 +482,9 @@ export default class Menu extends Component {
                 ]}
               />
             </Tooltip>
-          ) : this._areProxiesErrors() ? (
-            <Tooltip content={_('someProxiesHaveErrors')}>
-              <span className='text-warning'>
-                <Icon icon='alarm' />
-              </span>
+          ) : nProxiesErrors > 0 ? (
+            <Tooltip content={_('someProxiesHaveErrors', { n: nProxiesErrors })}>
+              <span className='tag tag-pill tag-warning'>{nProxiesErrors}</span>
             </Tooltip>
           ) : null,
         ],