feat(xo-web/self): show # of VMs that belong to each Resource Set (#7114)

See Zammad#17568

CHANGELOG.unreleased.md

@@ -13,6 +13,7 @@
 - [VM/Advanced] Possibility to create/delete VTPM [#7066](https://github.com/vatesfr/xen-orchestra/issues/7066) [Forum#6578](https://xcp-ng.org/forum/topic/6578/xcp-ng-8-3-public-alpha/109) (PR [#7085](https://github.com/vatesfr/xen-orchestra/pull/7085))
 - [VM/New] Possibility to create and attach a _VTPM_ to a VM [#7066](https://github.com/vatesfr/xen-orchestra/issues/7066) [Forum#6578](https://xcp-ng.org/forum/topic/6578/xcp-ng-8-3-public-alpha/109) (PR [#7077](https://github.com/vatesfr/xen-orchestra/pull/7077))
 - [Dashboard/Health] Displays number of VDIs to coalesce (PR [#7111](https://github.com/vatesfr/xen-orchestra/pull/7111))
+- [Self] Show number of VMs that belong to each Resource Set (PR [#7114](https://github.com/vatesfr/xen-orchestra/pull/7114))
 
 ### Bug fixes
 

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

@@ -1692,6 +1692,8 @@ const messages = {
   resourceSetQuota: 'Used: {usage} (Total: {total})',
   resourceSetNew: 'New',
   shareVmsByDefault: 'Share VMs by default',
+  nVmsInResourceSet:
+    '{nVms, number} VM{nVms, plural, one {} other {s}} belong{nVms, plural, one {s} other {}} to this Resource Set',
 
   // ---- VM import ---
   fileType: 'File type:',

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

@@ -13,6 +13,7 @@ import intersection from 'lodash/intersection'
 import isEmpty from 'lodash/isEmpty'
 import keyBy from 'lodash/keyBy'
 import keys from 'lodash/keys'
+import Link from 'link'
 import map from 'lodash/map'
 import mapKeys from 'lodash/mapKeys'
 import PropTypes from 'prop-types'
@@ -20,6 +21,7 @@ import React from 'react'
 import remove from 'lodash/remove'
 import renderXoItem from 'render-xo-item'
 import ResourceSetQuotas from 'resource-set-quotas'
+import size from 'lodash/size'
 import some from 'lodash/some'
 import Tags from 'tags'
 import Upgrade from 'xoa-upgrade'
@@ -570,10 +572,13 @@ export class Edit extends Component {
 @addSubscriptions({
   ipPools: subscribeIpPools,
 })
+@connectStore({
+  vms: createGetObjectsOfType('VM').filter((state, props) => vm => vm.resourceSet === props.resourceSet.id),
+})
 @injectIntl
 class ResourceSet extends Component {
   _renderDisplay = () => {
-    const { resourceSet } = this.props
+    const { resourceSet, vms } = this.props
     const resolvedIpPools = mapKeys(this.props.ipPools, 'id')
     const { limits, ipPools, subjects, objectsByType, tags } = resourceSet
 
@@ -615,6 +620,9 @@ class ResourceSet extends Component {
       </li>,
       <li key='graphs' className='list-group-item'>
         <ResourceSetQuotas limits={limits} />
+        <Link to={`/home?s=resourceSet:${resourceSet.id}&t=VM`}>
+          <Icon icon='preview' /> {_('nVmsInResourceSet', { nVms: size(vms) })}
+        </Link>
       </li>,
       <li key='actions' className='list-group-item text-xs-center'>
         <div className='btn-toolbar'>