feat(xo-web/backups): improve incremental/key backup display

when the backup is completly composed of  key or completly composed of differencing
backup, the number of disk can be hard to understand
In this case, this PR will only show the number if the backup is mixed

packages/xo-web/src/common/render-xo-item.js

@@ -641,34 +641,39 @@ const xoItemToRender = {
     <span>{group.name_label.startsWith('Group of ') ? group.name_label.slice(9) : group.name_label}</span>
   ),
 
-  backup: backup => (
-    <span>
-      <span className='tag tag-info' style={{ textTransform: 'capitalize' }}>
-        {backup.mode === 'delta' ? _('backupIsIncremental') : backup.mode}
-      </span>{' '}
-      <span className='tag tag-warning'>{backup.remote.name}</span>{' '}
-      {backup.differencingVhds > 0 && (
-        <span className='tag tag-info'>
-          {backup.differencingVhds} {_('backupIsDifferencing')}{' '}
-        </span>
-      )}
-      {backup.dynamicVhds > 0 && (
-        <span className='tag tag-info'>
-          {backup.dynamicVhds} {_('backupisKey')}{' '}
-        </span>
-      )}
-      {backup.size !== undefined && <span className='tag tag-info'>{formatSize(backup.size)}</span>}{' '}
-      <FormattedDate
-        value={new Date(backup.timestamp)}
-        month='long'
-        day='numeric'
-        year='numeric'
-        hour='2-digit'
-        minute='2-digit'
-        second='2-digit'
-      />
-    </span>
-  ),
+  backup: backup => {
+    const nbDifferencings = backup.differencingVhds ?? 0
+    const nbKeys = backup.dynamicVhds ?? 0
+    const nbDisks = backup.disks.length
+    return (
+      <span>
+        <span className='tag tag-info' style={{ textTransform: 'capitalize' }}>
+          {backup.mode === 'delta' ? _('backupIsIncremental') : backup.mode}
+        </span>{' '}
+        <span className='tag tag-warning'>{backup.remote.name}</span>{' '}
+        {nbDifferencings > 0 && (
+          <span className='tag tag-info'>
+            {nbDifferencings < nbDisks && `${nbDifferencings}/${nbDisks}`} {_('backupIsDifferencing')}{' '}
+          </span>
+        )}
+        {nbKeys > 0 && (
+          <span className='tag tag-info'>
+            {nbKeys < nbDisks && `${nbKeys}/${nbDisks}`} {_('backupisKey')}{' '}
+          </span>
+        )}
+        {backup.size !== undefined && <span className='tag tag-info'>{formatSize(backup.size)}</span>}{' '}
+        <FormattedDate
+          value={new Date(backup.timestamp)}
+          month='long'
+          day='numeric'
+          year='numeric'
+          hour='2-digit'
+          minute='2-digit'
+          second='2-digit'
+        />
+      </span>
+    )
+  },
 }
 
 const renderXoItem = (item, { className, type: xoType, ...props } = {}) => {