feat(xo-web/health/orphanedSnapshotVdis): use SortedTable actions (#3270)

See #3179

CHANGELOG.md

@@ -8,6 +8,7 @@
 - [Backup NG form] Make the smart mode's toggle more visible [#2711](https://github.com/vatesfr/xen-orchestra/issues/2711) (PR [#3263](https://github.com/vatesfr/xen-orchestra/pull/3263))
 - Move the copy clipboard of the VM's UUID to the header [#3221](https://github.com/vatesfr/xen-orchestra/issues/3221) (PR [#3248](https://github.com/vatesfr/xen-orchestra/pull/3248))
 - [Health / Orphaned VMs] Homogenize action buttons in table and enable bulk deletion [#3179](https://github.com/vatesfr/xen-orchestra/issues/3179) (PR [#3274](https://github.com/vatesfr/xen-orchestra/pull/3274))
+- [Health / Orphaned snapshot VDIs] Homogenize action buttons in table and enable bulk deletion [#3179](https://github.com/vatesfr/xen-orchestra/issues/3179) (PR [#3270](https://github.com/vatesfr/xen-orchestra/pull/3270))
 
 ### Bug fixes
 

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

@@ -1120,7 +1120,8 @@ const messages = {
   orphanedVdis: 'Orphaned snapshot VDIs',
   orphanedVms: 'Orphaned VMs snapshot',
   noOrphanedObject: 'No orphans',
-  removeAllOrphanedObject: 'Remove all orphaned snapshot VDIs',
+  deleteOrphanedVdi: 'Delete orphaned snapshot VDI',
+  deleteSelectedOrphanedVdis: 'Delete selected orphaned snapshot VDIs',
   vdisOnControlDomain: 'VDIs attached to Control Domain',
   vmNameLabel: 'Name',
   vmNameDescription: 'Description',
@@ -1480,8 +1481,9 @@ const messages = {
   importBackupModalStart: 'Start VM after restore',
   importBackupModalSelectBackup: 'Select your backup…',
   importBackupModalSelectSr: 'Select a destination SR…',
-  removeAllOrphanedModalWarning:
-    'Are you sure you want to remove all orphaned snapshot VDIs?',
+  deleteOrphanedVdisModalTitle: 'Delete orphaned snapshot VDIs',
+  deleteOrphanedVdisModalMessage:
+    'Are you sure you want to delete {nVdis, number} orphaned snapshot VDI{nVdis, plural, one {} other {s}}?',
   removeAllLogsModalTitle: 'Remove all logs',
   removeAllLogsModalWarning: 'Are you sure you want to remove all logs?',
   definitiveMessageModal: 'This operation is definitive.',

packages/xo-web/src/common/xo/index.js

@@ -1389,10 +1389,10 @@ export const deleteVdis = vdis =>
 
 export const deleteOrphanedVdis = vdis =>
   confirm({
-    title: _('removeAllOrphanedObject'),
+    title: _('deleteOrphanedVdisModalTitle'),
     body: (
       <div>
-        <p>{_('removeAllOrphanedModalWarning')}</p>
+        <p>{_('deleteOrphanedVdisModalMessage', { nVdis: vdis.length })}</p>
         <p>{_('definitiveMessageModal')}</p>
       </div>
     ),

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

@@ -163,16 +163,16 @@ const ORPHANED_VDI_COLUMNS = [
     name: _('vdiSr'),
     itemRenderer: vdi => <VdiColSr id={vdi.$SR} />,
   },
+]
+
+const ORPHANED_VDI_ACTIONS = [
   {
-    name: _('logAction'),
-    itemRenderer: vdi => (
-      <ActionRowButton
-        btnStyle='danger'
-        handler={deleteVdi}
-        handlerParam={vdi}
-        icon='delete'
-      />
-    ),
+    handler: deleteOrphanedVdis,
+    individualHandler: deleteVdi,
+    individualLabel: _('deleteOrphanedVdi'),
+    icon: 'delete',
+    label: _('deleteSelectedOrphanedVdis'),
+    level: 'danger',
   },
 ]
 
@@ -455,8 +455,6 @@ export default class Health extends Component {
     }, noop)
   }
 
-  _deleteOrphanedVdis = () => deleteOrphanedVdis(this.props.vdiOrphaned)
-
   _deleteAllLogs = () =>
     confirm({
       title: _('removeAllLogsModalTitle'),
@@ -553,26 +551,11 @@ export default class Health extends Component {
                   emptyMessage={_('noOrphanedObject')}
                 >
                   {() => (
-                    <div>
-                      <Row>
-                        <Col className='text-xs-right'>
-                          <TabButton
-                            btnStyle='danger'
-                            handler={this._deleteOrphanedVdis}
-                            icon='delete'
-                            labelId='removeAllOrphanedObject'
-                          />
-                        </Col>
-                      </Row>
-                      <Row>
-                        <Col>
-                          <SortedTable
-                            collection={vdiOrphaned}
-                            columns={ORPHANED_VDI_COLUMNS}
-                          />
-                        </Col>
-                      </Row>
-                    </div>
+                    <SortedTable
+                      actions={ORPHANED_VDI_ACTIONS}
+                      collection={vdiOrphaned}
+                      columns={ORPHANED_VDI_COLUMNS}
+                    />
                   )}
                 </NoObjects>
               </CardBlock>