feat(xo-web/dashboard/health): add 'too many snapshots' section (#5238)

CHANGELOG.unreleased.md

@@ -9,6 +9,7 @@
 
 - [VM Import] Make the `Description` field optional (PR [#5258](https://github.com/vatesfr/xen-orchestra/pull/5258))
 - [New VM] Hide missing ISOs in selector [#5222](https://github.com/vatesfr/xen-orchestra/issues/5222)
+- [Dashboard/Health] Show VMs that have too many snapshots [#5238](https://github.com/vatesfr/xen-orchestra/pull/5238)
 
 ### Bug fixes
 

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

@@ -1370,6 +1370,10 @@ const messages = {
   orphanVdisTip: 'VDIs and VDI snapshots that are not attached to a VM',
   orphanedVms: 'Orphaned VMs snapshot',
   noOrphanedObject: 'No orphans',
+  tooManySnapshots: 'Too many snapshots',
+  tooManySnapshotsTip: 'VMs with more than the recommended amount of snapshots',
+  noTooManySnapshotsObject: 'No VMs with too many snapshots',
+  numberOfSnapshots: 'Number of snapshots',
   deleteOrphanedVdi: 'Delete orphaned snapshot VDI',
   deleteSelectedOrphanedVdis: 'Delete selected orphaned snapshot VDIs',
   vdisOnControlDomain: 'VDIs attached to Control Domain',

packages/xo-web/src/xo-app/dashboard/health/index.js

@@ -343,6 +343,31 @@ const VM_ACTIONS = [
   },
 ]
 
+const TOO_MANY_SNAPSHOT_COLUMNS = [
+  {
+    name: _('vmNameLabel'),
+    itemRenderer: vm => (
+      <Link to={`vms/${vm.id}/snapshots`}>{vm.name_label}</Link>
+    ),
+    sortCriteria: vm => vm.name_label,
+  },
+  {
+    name: _('vmNameDescription'),
+    itemRenderer: vm => vm.name_description,
+    sortCriteria: vm => vm.name_description,
+  },
+  {
+    name: _('vmContainer'),
+    itemRenderer: vm => <VmColContainer id={vm.$container} />,
+  },
+  {
+    default: true,
+    name: _('numberOfSnapshots'),
+    itemRenderer: vm => vm.snapshots.length,
+    sortOrder: 'desc',
+  },
+]
+
 const ALARM_COLUMNS = [
   {
     name: _('alarmDate'),
@@ -436,6 +461,10 @@ const HANDLED_VDI_TYPES = new Set(['system', 'user', 'ephemeral'])
   const getOrphanVmSnapshots = createGetObjectsOfType('VM-snapshot')
     .filter([snapshot => !snapshot.$snapshot_of])
     .sort()
+  const MAX_HEALTHY_SNAPSHOT_COUNT = 5
+  const getTooManySnapshotsVms = createGetObjectsOfType('VM')
+    .filter([vm => vm.snapshots.length > MAX_HEALTHY_SNAPSHOT_COUNT])
+    .sort()
   const getUserSrs = getSrs.filter([isSrWritable])
   const getAlertMessages = createGetObjectsOfType('message').filter([
     message => message.name === 'ALARM',
@@ -446,6 +475,7 @@ const HANDLED_VDI_TYPES = new Set(['system', 'user', 'ephemeral'])
     areObjectsFetched,
     orphanVdis: getOrphanVdis,
     orphanVmSnapshots: getOrphanVmSnapshots,
+    tooManySnapshotsVms: getTooManySnapshotsVms,
     userSrs: getUserSrs,
   }
 })
@@ -516,6 +546,11 @@ export default class Health extends Component {
     this._getPoolPredicate
   )
 
+  _getTooManySnapshotsVms = createFilter(
+    () => this.props.tooManySnapshotsVms,
+    this._getPoolPredicate
+  )
+
   _getAlertMessages = createFilter(
     () => this.props.alertMessages,
     this._getPoolPredicate
@@ -631,6 +666,32 @@ export default class Health extends Component {
             </Card>
           </Col>
         </Row>
+        <Row className='too-many-snapshots-vms'>
+          <Col>
+            <Card>
+              <CardHeader>
+                <Icon icon='vm-snapshot' /> {_('tooManySnapshots')}
+              </CardHeader>
+              <CardBlock>
+                <p>
+                  <Icon icon='info' /> <em>{_('tooManySnapshotsTip')}</em>
+                </p>
+                <NoObjects
+                  collection={
+                    props.areObjectsFetched
+                      ? this._getTooManySnapshotsVms()
+                      : null
+                  }
+                  columns={TOO_MANY_SNAPSHOT_COLUMNS}
+                  component={SortedTable}
+                  emptyMessage={_('noTooManySnapshotsObject')}
+                  shortcutsTarget='.too-many-snapshots-vms'
+                  stateUrlParam='s_too_many_snapshots_vms'
+                />
+              </CardBlock>
+            </Card>
+          </Col>
+        </Row>
         <Row>
           <Col>
             <Card>