Changes after review

Related to 5712f29a5

.eslintrc.js

@@ -65,10 +65,11 @@ module.exports = {
           typescript: true,
           'eslint-import-resolver-custom-alias': {
             alias: {
+              '@core': '../web-core/lib',
               '@': './src',
             },
             extensions: ['.ts'],
-            packages: ['@xen-orchestra/lite'],
+            packages: ['@xen-orchestra/lite', '@xen-orchestra/web'],
           },
         },
       },

@xen-orchestra/backups/ImportVmBackup.mjs

@@ -160,10 +160,10 @@ export class ImportVmBackup {
           // update the stream with the negative vhd stream
           stream = await negativeVhd.stream()
           vdis[vdiRef].baseVdi = snapshotCandidate
-        } catch (err) {
+        } catch (error) {
           // can be a broken VHD chain, a vhd chain with a key backup, ....
           // not an irrecuperable error, don't dispose parentVhd, and fallback to full restore
-          warn(`can't use differential restore`, err)
+          warn(`can't use differential restore`, { error })
           disposableDescendants?.dispose()
         }
       }

@xen-orchestra/backups/_cleanVm.mjs

@@ -432,13 +432,6 @@ export async function cleanVm(
       if (child !== undefined) {
         const chain = getUsedChildChainOrDelete(child)
         if (chain !== undefined) {
-          if (chain.includes(vhd)) {
-            logWarn('loop vhd chain', { path: vhd })
-            // keep  the current chain
-            // note that a VHD can't have two children, that means that
-            // a looped one is always the last of a chain
-            return chain
-          }
           chain.unshift(vhd)
           return chain
         }

@xen-orchestra/backups/_runners/_writers/IncrementalRemoteWriter.mjs

@@ -143,8 +143,10 @@ export class IncrementalRemoteWriter extends MixinRemoteWriter(AbstractIncrement
 
     let metadataContent = await this._isAlreadyTransferred(timestamp)
     if (metadataContent !== undefined) {
-      // @todo : should skip backup while being vigilant to not stuck the forked stream
+      // skip backup while being vigilant to not stuck the forked stream
       Task.info('This backup has already been transfered')
+      Object.values(deltaExport.streams).forEach(stream => stream.destroy())
+      return { size: 0 }
     }
 
     const basename = formatFilenameDate(timestamp)

@xen-orchestra/backups/_runners/_writers/_MixinRemoteWriter.mjs

@@ -113,13 +113,13 @@ export const MixinRemoteWriter = (BaseClass = Object) =>
       )
     }
 
-    _isAlreadyTransferred(timestamp) {
+    async _isAlreadyTransferred(timestamp) {
       const vmUuid = this._vmUuid
       const adapter = this._adapter
       const backupDir = getVmBackupDir(vmUuid)
       try {
         const actualMetadata = JSON.parse(
-          adapter._handler.readFile(`${backupDir}/${formatFilenameDate(timestamp)}.json`)
+          await adapter._handler.readFile(`${backupDir}/${formatFilenameDate(timestamp)}.json`)
         )
         return actualMetadata
       } catch (error) {}

@xen-orchestra/fs/src/path.js

@@ -20,5 +20,7 @@ export function split(path) {
   return parts
 }
 
-export const relativeFromFile = (file, path) => relative(dirname(file), path)
+// paths are made absolute otherwise fs.relative() would resolve them against working directory
+export const relativeFromFile = (file, path) => relative(dirname(normalize(file)), normalize(path))
+
 export const resolveFromFile = (file, path) => resolve('/', dirname(file), path).slice(1)

@xen-orchestra/fs/src/path.test.js

@@ -0,0 +1,17 @@
+import { describe, it } from 'test'
+import { strict as assert } from 'assert'
+
+import { relativeFromFile } from './path.js'
+
+describe('relativeFromFile()', function () {
+  for (const [title, args] of Object.entries({
+    'file absolute and path absolute': ['/foo/bar/file.vhd', '/foo/baz/path.vhd'],
+    'file relative and path absolute': ['foo/bar/file.vhd', '/foo/baz/path.vhd'],
+    'file absolute and path relative': ['/foo/bar/file.vhd', 'foo/baz/path.vhd'],
+    'file relative and path relative': ['foo/bar/file.vhd', 'foo/baz/path.vhd'],
+  })) {
+    it('works with ' + title, function () {
+      assert.equal(relativeFromFile(...args), '../baz/path.vhd')
+    })
+  }
+})

@xen-orchestra/immutable-backups/protectRemotes.mjs

@@ -54,10 +54,10 @@ async function handleExistingFile(root, indexPath, path) {
         await indexFile(fullPath, indexPath)
       }
     }
-  } catch (err) {
-    if (err.code !== 'EEXIST') {
+  } catch (error) {
+    if (error.code !== 'EEXIST') {
       // there can be a symbolic link in the tree
-      warn('handleExistingFile', err)
+      warn('handleExistingFile', { error })
     }
   }
 }
@@ -106,7 +106,7 @@ export async function watchRemote(remoteId, { root, immutabilityDuration, rebuil
     await File.liftImmutability(settingPath)
   } catch (error) {
     // file may not exists, and it's not really a problem
-    info('lifting immutability on current settings', error)
+    info('lifting immutability on current settings', { error })
   }
   await fs.writeFile(
     settingPath,

@xen-orchestra/lite/tsconfig.app.json

@@ -1,13 +1,15 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "../web-core/lib/**/*", "../web-core/lib/**/*.vue"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,
     "noEmit": true,
     "baseUrl": ".",
+    "rootDir": "..",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@core/*": ["../web-core/lib/*"]
     }
   }
 }

@xen-orchestra/lite/vite.config.ts

@@ -23,6 +23,7 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@core': fileURLToPath(new URL('../web-core/lib', import.meta.url)),
     },
   },
 

@xen-orchestra/log/.USAGE.md

@@ -27,6 +27,16 @@ log.error('could not join server', {
 })
 ```
 
+A logging method has the following signature:
+
+```ts
+interface LoggingMethod {
+  (error): void
+
+  (message: string, data?: { error?: Error; [property: string]: any }): void
+}
+```
+
 ### Consumer
 
 Then, at application level, configure the logs are handled:

@xen-orchestra/log/README.md

@@ -45,6 +45,16 @@ log.error('could not join server', {
 })
 ```
 
+A logging method has the following signature:
+
+```ts
+interface LoggingMethod {
+  (error): void
+
+  (message: string, data?: { error?: Error; [property: string]: any }): void
+}
+```
+
 ### Consumer
 
 Then, at application level, configure the logs are handled:

@xen-orchestra/web-core/package.json

@@ -10,7 +10,8 @@
     }
   },
   "devDependencies": {
-    "vue": "^3.4.13"
+    "vue": "^3.4.13",
+    "@vue/tsconfig": "^0.5.1"
   },
   "homepage": "https://github.com/vatesfr/xen-orchestra/tree/master/@xen-orchestra/web-core",
   "bugs": "https://github.com/vatesfr/xen-orchestra/issues",
@@ -25,6 +26,6 @@
   },
   "license": "AGPL-3.0-or-later",
   "engines": {
-    "node": ">=8.10"
+    "node": ">=18"
   }
 }

@xen-orchestra/web-core/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "lib/**/*", "lib/**/*.vue"],
+  "exclude": ["lib/**/__tests__/*"],
+  "compilerOptions": {
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "@core/*": ["./lib/*"]
+    }
+  }
+}

@xen-orchestra/web/tsconfig.app.json

@@ -1,13 +1,22 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "typed-router.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": [
+    "env.d.ts",
+    "typed-router.d.ts",
+    "src/**/*",
+    "src/**/*.vue",
+    "../web-core/lib/**/*",
+    "../web-core/lib/**/*.vue"
+  ],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,
     "noEmit": true,
     "baseUrl": ".",
+    "rootDir": "..",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@core/*": ["../web-core/lib/*"]
     }
   }
 }

@xen-orchestra/web/vite.config.ts

@@ -11,6 +11,7 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@core': fileURLToPath(new URL('../web-core/lib', import.meta.url)),
     },
   },
 })

@xen-orchestra/xapi/vif.mjs

@@ -21,12 +21,23 @@ export default class Vif {
       MAC = '',
     } = {}
   ) {
+    if (device === undefined) {
+      const allowedDevices = await this.call('VM.get_allowed_VIF_devices', VM)
+      if (allowedDevices.length === 0) {
+        const error = new Error('could not find an allowed VIF device')
+        error.poolUuid = this.pool.uuid
+        error.vmRef = VM
+        throw error
+      }
+
+      device = allowedDevices[0]
+    }
+
     const [powerState, ...rest] = await Promise.all([
       this.getField('VM', VM, 'power_state'),
-      device ?? (await this.call('VM.get_allowed_VIF_devices', VM))[0],
-      MTU ?? (await this.getField('network', network, 'MTU')),
+      MTU ?? this.getField('network', network, 'MTU'),
     ])
-    ;[device, MTU] = rest
+    ;[MTU] = rest
 
     const vifRef = await this.call('VIF.create', {
       currently_attached: powerState === 'Suspended' ? currently_attached : undefined,

CHANGELOG.unreleased.md

@@ -8,11 +8,17 @@
 > Users must be able to say: “Nice enhancement, I'm eager to test it”
 
 - Disable search engine indexing via a `robots.txt`
+- [Stats] Support format used by XAPI 23.31
+- [Storage/Disks] Handle link to VM for suspended VDIs (PR [#7391](https://github.com/vatesfr/xen-orchestra/pull/7391))
 
 ### Bug fixes
 
 > Users must be able to say: “I had this issue, happy to know it's fixed”
 
+- [Settings/XO Config] Sort backups from newest to oldest
+- [Plugins/audit] Don't log `tag.getAllConfigured` calls
+- [Remotes] Correctly clear error when the remote is tested with success
+
 ### Packages to release
 
 > When modifying a package, add it here with its release type.
@@ -30,6 +36,11 @@
 <!--packages-start-->
 
 - @xen-orchestra/backups patch
-- xo-server patch
+- @xen-orchestra/fs patch
+- @xen-orchestra/xapi patch
+- vhd-lib patch
+- xo-server minor
+- xo-server-audit patch
+- xo-web minor
 
 <!--packages-end-->

docs/xoa.md

@@ -93,6 +93,21 @@ Follow the instructions:
 
 You can also download XOA from xen-orchestra.com in an XVA file. Once you've got the XVA file, you can import it with `xe vm-import filename=xoa_unified.xva` or via XenCenter.
 
+If you want to use static IP address for your appliance:
+
+```sh
+xe vm-param-set uuid="$uuid" \
+  xenstore-data:vm-data/ip="$ip" \
+  xenstore-data:vm-data/netmask="$netmask" \
+  xenstore-data:vm-data/gateway="$gateway"
+```
+
+If you want to replace the default DNS server:
+
+```sh
+xe vm-param-set uuid="$uuid" xenstore-data:vm-data/dns="$dns"
+```
+
 After the VM is imported, you just need to start it with `xe vm-start vm="XOA"` or with XenCenter.
 
 ## First console connection

package.json

@@ -1,4 +1,6 @@
 {
+  "name": "xen-orchestra",
+  "version": "0.0.0",
   "devDependencies": {
     "@babel/core": "^7.0.0",
     "@babel/eslint-parser": "^7.13.8",
@@ -94,7 +96,7 @@
   },
   "private": true,
   "scripts": {
-    "build": "turbo run build --scope xo-server --scope xo-server-'*' --scope xo-web",
+    "build": "TURBO_TELEMETRY_DISABLED=1 turbo run build --scope xo-server --scope xo-server-'*' --scope xo-web",
     "build:xo-lite": "turbo run build --scope @xen-orchestra/lite",
     "clean": "scripts/run-script.js --parallel clean",
     "dev": "scripts/run-script.js --parallel --concurrency 0 --verbose dev",

packages/vhd-lib/chain.js

@@ -1,6 +1,6 @@
 'use strict'
 
-const { dirname, relative } = require('path')
+const { relativeFromFile } = require('@xen-orchestra/fs/path')
 
 const { openVhd } = require('./openVhd')
 const { DISK_TYPES } = require('./_constants')
@@ -21,7 +21,7 @@ module.exports = async function chain(parentHandler, parentPath, childHandler, c
       }
       await childVhd.readBlockAllocationTable()
 
-      const parentName = relative(dirname(childPath), parentPath)
+      const parentName = relativeFromFile(childPath, parentPath)
       header.parentUuid = parentVhd.footer.uuid
       header.parentUnicodeName = parentName
       await childVhd.setUniqueParentLocator(parentName)

packages/xo-server-audit/src/index.js

@@ -72,6 +72,7 @@ const DEFAULT_BLOCKED_LIST = {
   'system.getServerTimezone': true,
   'system.getServerVersion': true,
   'system.getVersion': true,
+  'tag.getAllConfigured': true,
   'test.getPermissionsForUser': true,
   'user.getAll': true,
   'user.getAuthenticationTokens': true,

packages/xo-server/src/_handleBackupLog.mjs

@@ -27,7 +27,7 @@ async function sendToNagios(app, jobName, vmBackupInfo) {
       jobName
     )
   } catch (error) {
-    warn('sendToNagios:', error)
+    warn('sendToNagios:', { error })
   }
 }
 

packages/xo-server/src/xapi-object-to-xo.mjs

@@ -413,6 +413,7 @@ const TRANSFORMS = {
       startTime: metrics && toTimestamp(metrics.start_time),
       secureBoot: obj.platform.secureboot === 'true',
       suspendSr: link(obj, 'suspend_SR'),
+      suspendVdi: link(obj, 'suspend_VDI'),
       tags: obj.tags,
       VIFs: link(obj, 'VIFs'),
       VTPMs: link(obj, 'VTPMs'),
@@ -449,7 +450,6 @@ const TRANSFORMS = {
 
       vm.snapshot_time = toTimestamp(obj.snapshot_time)
       vm.$snapshot_of = link(obj, 'snapshot_of')
-      vm.suspendVdi = link(obj, 'suspend_VDI')
     } else if (obj.is_a_template) {
       const defaultTemplate = isDefaultTemplate(obj)
       vm.type += '-template'

packages/xo-server/src/xapi-stats.mjs

@@ -45,7 +45,17 @@ const RRD_POINTS_PER_STEP = {
 // Utils
 // -------------------------------------------------------------------
 
-function convertNanToNull(value) {
+function parseNumber(value) {
+  // Starting from XAPI 23.31, numbers in the JSON payload are encoded as
+  // strings to support NaN, Infinity and -Infinity
+  if (typeof value === 'string') {
+    const asNumber = +value
+    if (isNaN(asNumber) && value !== 'NaN') {
+      throw new Error('cannot parse number: ' + value)
+    }
+    value = asNumber
+  }
+
   return isNaN(value) ? null : value
 }
 
@@ -58,7 +68,7 @@ async function getServerTimestamp(xapi, hostRef) {
 // -------------------------------------------------------------------
 
 const computeValues = (dataRow, legendIndex, transformValue = identity) =>
-  map(dataRow, ({ values }) => transformValue(convertNanToNull(values[legendIndex])))
+  map(dataRow, ({ values }) => transformValue(parseNumber(values[legendIndex])))
 
 const combineStats = (stats, path, combineValues) => zipWith(...map(stats, path), (...values) => combineValues(values))
 
@@ -245,7 +255,15 @@ export default class XapiStats {
           start: timestamp,
         },
       })
-      .then(response => response.text().then(JSON5.parse))
+      .then(response => response.text())
+      .then(data => {
+        try {
+          // starting from XAPI 23.31, the response is valid JSON
+          return JSON.parse(data)
+        } catch (_) {
+          return JSON5.parse(data)
+        }
+      })
       .catch(err => {
         delete this.#hostCache[hostUuid][step]
         throw err
@@ -299,7 +317,7 @@ export default class XapiStats {
     // To avoid crossing over the boundary, we ask for one less step
     const optimumTimestamp = currentTimeStamp - maxDuration + step
     const json = await this._getJson(xapi, host, optimumTimestamp, step)
-    const actualStep = json.meta.step
+    const actualStep = parseNumber(json.meta.step)
 
     if (actualStep !== step) {
       throw new FaultyGranularity(`Unable to get the true granularity: ${actualStep}`)
@@ -326,9 +344,10 @@ export default class XapiStats {
           return
         }
 
-        if (stepStats === undefined || stepStats.endTimestamp !== json.meta.end) {
+        const endTimestamp = parseNumber(json.meta.end)
+        if (stepStats === undefined || stepStats.endTimestamp !== endTimestamp) {
           stepStats = {
-            endTimestamp: json.meta.end,
+            endTimestamp,
             interval: actualStep,
             stats: {},
           }

packages/xo-server/src/xo-mixins/remotes.mjs

@@ -1,5 +1,6 @@
 import asyncMapSettled from '@xen-orchestra/async-map/legacy.js'
 import { basename } from 'path'
+import { createLogger } from '@xen-orchestra/log'
 import { format, parse } from 'xo-remote-parser'
 import {
   DEFAULT_ENCRYPTION_ALGORITHM,
@@ -17,17 +18,35 @@ import { Remotes } from '../models/remote.mjs'
 
 // ===================================================================
 
+const { warn } = createLogger('xo:mixins:remotes')
+
 const obfuscateRemote = ({ url, ...remote }) => {
   const parsedUrl = parse(url)
   remote.url = format(sensitiveValues.obfuscate(parsedUrl))
   return remote
 }
 
-function validatePath(url) {
-  const { path } = parse(url)
+// these properties should be defined on the remote object itself and not as
+// part of the remote URL
+//
+// there is a bug somewhere that keep putting them into the URL, this list
+// is here to help track it
+const INVALID_URL_PARAMS = ['benchmarks', 'id', 'info', 'name', 'proxy', 'enabled', 'error', 'url']
+
+function validateUrl(url) {
+  const parsedUrl = parse(url)
+
+  const { path } = parsedUrl
   if (path !== undefined && basename(path) === 'xo-vm-backups') {
     throw invalidParameters('remote url should not end with xo-vm-backups')
   }
+
+  for (const param of INVALID_URL_PARAMS) {
+    if (Object.hasOwn(parsedUrl, param)) {
+      // log with stack trace
+      warn(new Error('invalid remote URL param ' + param))
+    }
+  }
 }
 
 export default class {
@@ -182,6 +201,22 @@ export default class {
     if (remote === undefined) {
       throw noSuchObject(id, 'remote')
     }
+
+    const parsedUrl = parse(remote.url)
+    let fixed = false
+    for (const param of INVALID_URL_PARAMS) {
+      if (Object.hasOwn(parsedUrl, param)) {
+        // delete the value to trace its real origin when it's added back
+        // with `updateRemote()`
+        delete parsedUrl[param]
+        fixed = true
+      }
+    }
+    if (fixed) {
+      remote.url = format(parsedUrl)
+      this._remotes.update(remote).catch(warn)
+    }
+
     return remote
   }
 
@@ -202,7 +237,7 @@ export default class {
   }
 
   async createRemote({ name, options, proxy, url }) {
-    validatePath(url)
+    validateUrl(url)
 
     const params = {
       enabled: false,
@@ -219,6 +254,10 @@ export default class {
   }
 
   updateRemote(id, { enabled, name, options, proxy, url }) {
+    if (url !== undefined) {
+      validateUrl(url)
+    }
+
     const handlers = this._handlers
     const handler = handlers[id]
     if (handler !== undefined) {
@@ -238,7 +277,7 @@ export default class {
   @synchronized()
   async _updateRemote(id, { url, ...props }) {
     if (url !== undefined) {
-      validatePath(url)
+      validateUrl(url)
     }
 
     const remote = await this._getRemote(id)

packages/xo-web/src/common/report-bug-button.js

@@ -75,7 +75,7 @@ export const reportOnSupportPanel = async ({ files = [], formatMessage = identit
     ADDITIONAL_FILES.map(({ fetch, name }) =>
       timeout.call(fetch(), ADDITIONAL_FILES_FETCH_TIMEOUT).then(
         file => formData.append('attachments', createBlobFromString(file), name),
-        error => logger.warn(`cannot get ${name}`, error)
+        error => logger.warn(`cannot get ${name}`, { error })
       )
     )
   )

packages/xo-web/src/common/select-objects.js

@@ -1099,7 +1099,9 @@ export const SelectXoCloudConfig = makeSubscriptionSelect(
   subscriber =>
     subscribeCloudXoConfigBackups(configs => {
       const xoObjects = groupBy(
-        map(configs, config => ({ ...config, type: 'xoConfig' })),
+        map(configs, config => ({ ...config, type: 'xoConfig' }))
+          // from newest to oldest
+          .sort((a, b) => b.createdAt - a.createdAt),
         'xoaId'
       )
       subscriber({

packages/xo-web/src/xo-app/settings/config/xo-cloud-config/index.js

@@ -5,10 +5,9 @@ import decorate from 'apply-decorators'
 import Icon from 'icon'
 import React from 'react'
 import { confirm } from 'modal'
-import { getApiApplianceInfo, subscribeCloudXoConfig, subscribeCloudXoConfigBackups } from 'xo'
-import { groupBy, sortBy } from 'lodash'
 import { injectState, provideState } from 'reaclette'
 import { SelectXoCloudConfig } from 'select-objects'
+import { subscribeCloudXoConfig, subscribeCloudXoConfigBackups } from 'xo'
 
 import BackupXoConfigModal from './backup-xo-config-modal'
 import RestoreXoConfigModal from './restore-xo-config-modal'
@@ -88,15 +87,7 @@ const CloudConfig = decorate([
         },
     },
     computed: {
-      applianceId: async () => {
-        const { id } = await getApiApplianceInfo()
-        return id
-      },
-      groupedConfigs: ({ applianceId, sortedConfigs }) =>
-        sortBy(groupBy(sortedConfigs, 'xoaId'), config => (config[0].xoaId === applianceId ? -1 : 1)),
       isConfigDefined: ({ config }) => config != null,
-      sortedConfigs: (_, { cloudXoConfigBackups }) =>
-        cloudXoConfigBackups?.sort((config, nextConfig) => config.createdAt - nextConfig.createdAt),
     },
   }),
   injectState,

packages/xo-web/src/xo-app/settings/remotes/index.js

@@ -33,7 +33,7 @@ const formatError = error => (typeof error === 'string' ? error : JSON.stringify
 
 const _changeUrlElement = (value, { remote, element }) =>
   editRemote(remote, {
-    url: format({ ...remote, [element]: value === null ? undefined : value }),
+    url: format({ ...parse(remote.url), [element]: value === null ? undefined : value }),
   })
 const _showError = remote => alert(_('remoteConnectionFailed'), <pre>{formatError(remote.error)}</pre>)
 const _editRemoteName = (name, { remote }) => editRemote(remote, { name })

packages/xo-web/src/xo-app/sr/tab-disks.js

@@ -12,7 +12,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import SortedTable from 'sorted-table'
 import TabButton from 'tab-button'
-import renderXoItem, { Vdi } from 'render-xo-item'
+import renderXoItem, { Vdi, Vm } from 'render-xo-item'
 import { confirm } from 'modal'
 import { injectIntl } from 'react-intl'
 import { Text } from 'editable'
@@ -123,67 +123,76 @@ const COLUMNS = [
         vms: getAllVms(state, props),
         vbds: getVbds(state, props),
       })
-    })(({ vbds, vms }) => {
+    })(({ item: vdi, vbds, vms, userData: { vmsSnapshotsBySuspendVdi } }) => {
+      const vmSnapshot = vmsSnapshotsBySuspendVdi[vdi.uuid]?.[0]
       if (isEmpty(vms)) {
         return null
       }
 
       return (
         <Container>
-          {map(vbds, (vbd, index) => {
-            const vm = vms[vbd.VM]
+          {vbds.length > 0 ? (
+            map(vbds, (vbd, index) => {
+              const vm = vms[vbd.VM]
 
-            if (vm === undefined) {
-              return null
-            }
+              if (vm === undefined) {
+                return null
+              }
 
-            const type = vm.type
-            let link
-            if (type === 'VM') {
-              link = `/vms/${vm.id}`
-            } else if (type === 'VM-template') {
-              link = `/home?s=${vm.id}&t=VM-template`
-            } else {
-              link = vm.$snapshot_of === undefined ? '/dashboard/health' : `/vms/${vm.$snapshot_of}/snapshots`
-            }
+              const type = vm.type
+              let link
+              if (type === 'VM') {
+                link = `/vms/${vm.id}`
+              } else if (type === 'VM-template') {
+                link = `/home?s=${vm.id}&t=VM-template`
+              } else {
+                link = vm.$snapshot_of === undefined ? '/dashboard/health' : `/vms/${vm.$snapshot_of}/snapshots`
+              }
 
-            return (
-              <Row className={index > 0 && 'mt-1'}>
-                <Col mediumSize={8}>
-                  <Link to={link}>{renderXoItem(vm)}</Link>
-                </Col>
-                <Col mediumSize={4}>
-                  <ButtonGroup>
-                    {vbd.attached ? (
+              return (
+                <Row className={index > 0 && 'mt-1'}>
+                  <Col mediumSize={8}>
+                    <Link to={link}>{renderXoItem(vm)}</Link>
+                  </Col>
+                  <Col mediumSize={4}>
+                    <ButtonGroup>
+                      {vbd.attached ? (
+                        <ActionRowButton
+                          btnStyle='danger'
+                          handler={disconnectVbd}
+                          handlerParam={vbd}
+                          icon='disconnect'
+                          tooltip={_('vbdDisconnect')}
+                        />
+                      ) : (
+                        <ActionRowButton
+                          btnStyle='primary'
+                          disabled={some(vbds, 'attached') || !isVmRunning(vm)}
+                          handler={connectVbd}
+                          handlerParam={vbd}
+                          icon='connect'
+                          tooltip={_('vbdConnect')}
+                        />
+                      )}
                       <ActionRowButton
                         btnStyle='danger'
-                        handler={disconnectVbd}
+                        handler={deleteVbd}
                         handlerParam={vbd}
-                        icon='disconnect'
-                        tooltip={_('vbdDisconnect')}
+                        icon='vdi-forget'
+                        tooltip={_('vdiForget')}
                       />
-                    ) : (
-                      <ActionRowButton
-                        btnStyle='primary'
-                        disabled={some(vbds, 'attached') || !isVmRunning(vm)}
-                        handler={connectVbd}
-                        handlerParam={vbd}
-                        icon='connect'
-                        tooltip={_('vbdConnect')}
-                      />
-                    )}
-                    <ActionRowButton
-                      btnStyle='danger'
-                      handler={deleteVbd}
-                      handlerParam={vbd}
-                      icon='vdi-forget'
-                      tooltip={_('vdiForget')}
-                    />
-                  </ButtonGroup>
-                </Col>
-              </Row>
-            )
-          })}
+                    </ButtonGroup>
+                  </Col>
+                </Row>
+              )
+            })
+          ) : (
+            <Col mediumSize={8}>
+              <Link to={`/vms/${vmSnapshot.$snapshot_of}/snapshots`}>
+                <Vm id={vmSnapshot.$snapshot_of} />
+              </Link>
+            </Col>
+          )}
         </Container>
       )
     }),
@@ -304,6 +313,7 @@ class NewDisk extends Component {
 @connectStore(() => ({
   checkPermissions: getCheckPermissions,
   vbds: createGetObjectsOfType('VBD'),
+  vmsSnapshotsBySuspendVdi: createGetObjectsOfType('VM-snapshot').groupBy('suspendVdi'),
 }))
 export default class SrDisks extends Component {
   _closeNewDiskForm = () => this.setState({ newDisk: false })
@@ -434,6 +444,7 @@ export default class SrDisks extends Component {
                 columns={COLUMNS}
                 data-isVdiAttached={this._getIsVdiAttached()}
                 data-vdisByBaseCopy={this._getVdisByBaseCopy()}
+                data-vmsSnapshotsBySuspendVdi={this.props.vmsSnapshotsBySuspendVdi}
                 defaultFilter='filterOnlyManaged'
                 filters={FILTERS}
                 groupedActions={GROUPED_ACTIONS}