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