diff --git a/packages/xo-web/src/common/intl/messages.js b/packages/xo-web/src/common/intl/messages.js
index e1e7edd8e81..f4ae07ccff5 100644
--- a/packages/xo-web/src/common/intl/messages.js
+++ b/packages/xo-web/src/common/intl/messages.js
@@ -1381,7 +1381,7 @@ const messages = {
metricsLoading: 'Loading…',
// ----- Health -----
- length: 'Length {length}',
+ length: 'Length: {length}',
deleteBackups: 'Delete backup{nBackups, plural, one {} other {s}}',
deleteBackupsMessage:
'Are you sure you want to delete {nBackups, number} backup{nBackups, plural, one {} other {s}}?',
diff --git a/packages/xo-web/src/xo-app/dashboard/health/vdisToCoalesce.js b/packages/xo-web/src/xo-app/dashboard/health/vdisToCoalesce.js
index 822af7fcecf..2710ce85c3d 100644
--- a/packages/xo-web/src/xo-app/dashboard/health/vdisToCoalesce.js
+++ b/packages/xo-web/src/xo-app/dashboard/health/vdisToCoalesce.js
@@ -2,6 +2,7 @@ import _ from 'intl'
import decorate from 'apply-decorators'
import Icon from 'icon'
import React from 'react'
+import SingleLineRow from 'single-line-row'
import SortedTable from 'sorted-table'
import Tooltip from 'tooltip'
import { Card, CardHeader, CardBlock } from 'card'
@@ -13,18 +14,18 @@ import { Sr, Vdi } from 'render-xo-item'
const VDIS_TO_COALESCE_LIMIT = 10
-const UNHEALTHY_VDI_CHAINS = [
+const COLUMNS = [
{
itemRenderer: (srId, { unhealthyVdiChainsLengthBySr }) => (
+ {' '}
{size(unhealthyVdiChainsLengthBySr[srId]) >= VDIS_TO_COALESCE_LIMIT && (
- {' '}
+
)}
-
),
name: _('sr'),
@@ -34,14 +35,14 @@ const UNHEALTHY_VDI_CHAINS = [
itemRenderer: (srId, { unhealthyVdiChainsLengthBySr }) => (
{map(unhealthyVdiChainsLengthBySr[srId], (chainLength, vdiId) => (
-
+
{_('length', { length: chainLength })}
-
+
))}
),
@@ -51,32 +52,33 @@ const UNHEALTHY_VDI_CHAINS = [
const VdisToCoalesce = decorate([
provideState({
- initialize({ fetchUnhealthyVdiChainsLength }) {
- return fetchUnhealthyVdiChainsLength(this.props.srs.map(({ id }) => id))
- },
+ initialState: () => ({
+ unhealthyVdiChainsLengthBySr: {},
+ }),
effects: {
- initialState: () => ({
- unhealthyVdiChainsLengthBySr: {},
- }),
- async fetchUnhealthyVdiChainsLength(effects, srs) {
+ initialize({ fetchUnhealthyVdiChainsLength }) {
+ return fetchUnhealthyVdiChainsLength(map(this.props.srs, 'id'))
+ },
+ async fetchUnhealthyVdiChainsLength(effects, srIds) {
const unhealthyVdiChainsLengthBySr = { ...this.state.unhealthyVdiChainsLengthBySr }
await Promise.all(
- srs.map(async srId => {
+ srIds.map(async srId => {
const unhealthyVdiChainsLength = await getUnhealthyVdiChainsLength(srId)
if (size(unhealthyVdiChainsLength) > 0) {
unhealthyVdiChainsLengthBySr[srId] = unhealthyVdiChainsLength
}
})
)
+
this.state.unhealthyVdiChainsLengthBySr = unhealthyVdiChainsLengthBySr
},
},
computed: {
- srIds: ({ unhealthyVdiChainsLengthBySr }) => Object.keys(unhealthyVdiChainsLengthBySr),
+ srIds: ({ unhealthyVdiChainsLengthBySr = {} }) => Object.keys(unhealthyVdiChainsLengthBySr),
},
}),
injectState,
- ({ state: { srIds, unhealthyVdiChainsLengthBySr } }) => (
+ ({ state: { srIds, unhealthyVdiChainsLengthBySr }, srs }) => (
@@ -89,7 +91,8 @@ const VdisToCoalesce = decorate([