feat(xo-web/health/alarms): use SortedTable actions (#3271)

See #3179

CHANGELOG.md

@@ -9,6 +9,7 @@
 - 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))
+- [Health / Alarms] Homogenize action buttons in table and enable bulk deletion [#3179](https://github.com/vatesfr/xen-orchestra/issues/3179) (PR [#3271](https://github.com/vatesfr/xen-orchestra/pull/3271))
 
 ### Bug fixes
 

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

@@ -1,16 +1,13 @@
 import _ from 'intl'
-import ActionRowButton from 'action-row-button'
 import Component from 'base-component'
 import Icon from 'icon'
 import Link from 'link'
 import NoObjects from 'no-objects'
 import React from 'react'
 import SortedTable from 'sorted-table'
-import TabButton from 'tab-button'
 import Tooltip from 'tooltip'
 import Upgrade from 'xoa-upgrade'
 import xml2js from 'xml2js'
-import { confirm } from 'modal'
 import { SelectPool } from 'select-objects'
 import { fromCallback } from 'promise-toolbox'
 import { Container, Row, Col } from 'grid'
@@ -20,6 +17,7 @@ import { flatten, get, includes, isEmpty, map, mapValues } from 'lodash'
 import { connectStore, formatSize, noop, resolveIds } from 'utils'
 import {
   deleteMessage,
+  deleteMessages,
   deleteOrphanedVdis,
   deleteVbd,
   deleteVbds,
@@ -371,16 +369,16 @@ const ALARM_COLUMNS = [
     name: _('alarmPool'),
     itemRenderer: message => <AlarmColPool id={message.$pool} />,
   },
+]
+
+const ALARM_ACTIONS = [
   {
-    name: _('logAction'),
+    handler: deleteMessages,
-    itemRenderer: message => (
+    individualHandler: deleteMessage,
-      <ActionRowButton
+    individualLabel: _('logDelete'),
-        btnStyle='danger'
+    icon: 'delete',
-        handler={deleteMessage}
+    label: _('logsDelete'),
-        handlerParam={message}
+    level: 'danger',
-        icon='delete'
-      />
-    ),
   },
 ]
 
@@ -455,20 +453,6 @@ export default class Health extends Component {
     }, noop)
   }
 
-  _deleteAllLogs = () =>
-    confirm({
-      title: _('removeAllLogsModalTitle'),
-      body: (
-        <div>
-          <p>{_('removeAllLogsModalWarning')}</p>
-          <p>{_('definitiveMessageModal')}</p>
-        </div>
-      ),
-    }).then(
-      () => Promise.all(map(this.props.alertMessages, deleteMessage)),
-      noop
-    )
-
   _getSrUrl = sr => `srs/${sr.id}`
 
   _getPoolPredicate = createSelector(
@@ -609,26 +593,11 @@ export default class Health extends Component {
                   emptyMessage={_('noAlarms')}
                 >
                   {() => (
-                    <div>
+                    <SortedTable
-                      <Row>
+                      actions={ALARM_ACTIONS}
-                        <Col className='text-xs-right'>
+                      collection={this._getMessages()}
-                          <TabButton
+                      columns={ALARM_COLUMNS}
-                            btnStyle='danger'
+                    />
-                            handler={this._deleteAllLogs}
-                            icon='delete'
-                            labelId='logRemoveAll'
-                          />
-                        </Col>
-                      </Row>
-                      <Row>
-                        <Col>
-                          <SortedTable
-                            collection={this._getMessages()}
-                            columns={ALARM_COLUMNS}
-                          />
-                        </Col>
-                      </Row>
-                    </div>
                   )}
                 </NoObjects>
               </CardBlock>