feat(xo-web/home): grouped VM snapshot (#3787)

Fixes #3778

CHANGELOG.md

@@ -10,6 +10,7 @@
 - [VM / snapshots] Ability to save the VM memory [#3795](https://github.com/vatesfr/xen-orchestra/issues/3795) (PR [#3812](https://github.com/vatesfr/xen-orchestra/pull/3812))
 - [Backup NG / Health] Show number of lone snapshots in tab label [#3500](https://github.com/vatesfr/xen-orchestra/issues/3500) (PR [#3824](https://github.com/vatesfr/xen-orchestra/pull/3824))
 - [Login] Add autofocus on username input on login page [#3835](https://github.com/vatesfr/xen-orchestra/issues/3835) (PR [#3836](https://github.com/vatesfr/xen-orchestra/pull/3836))
+- [Home/VM] Bulk snapshot: specify snapshots' names [#3778](https://github.com/vatesfr/xen-orchestra/issues/3778) (PR [#3787](https://github.com/vatesfr/xen-orchestra/pull/3787))
 
 ### Bug fixes
 

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

@@ -184,6 +184,9 @@ const messages = {
   srSharedType: 'Shared {type}',
   srNotSharedType: 'Not shared {type}',
 
+  // ----- Home snapshots  -----
+  snapshotVmsName: 'Name',
+
   // ----- Common components -----
   sortedTableAllItemsSelected: 'All of them are selected',
   sortedTableNoItems: 'No items found',

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

@@ -1116,17 +1116,18 @@ export const deleteTemplates = templates =>
           }, noop)
   }, noop)
 
-export const snapshotVm = (vm, saveMemory) =>
-  _call('vm.snapshot', { id: resolveId(vm), saveMemory })
+export const snapshotVm = (vm, name, saveMemory) =>
+  _call('vm.snapshot', { id: resolveId(vm), name, saveMemory })
 
 import SnapshotVmModalBody from './snapshot-vm-modal' // eslint-disable-line import/first
 export const snapshotVms = vms =>
   confirm({
     icon: 'memory',
     title: _('snapshotVmsModalTitle', { vms: vms.length }),
-    body: <SnapshotVmModalBody />,
+    body: <SnapshotVmModalBody vms={vms} />,
   }).then(
-    saveMemory => Promise.all(map(vms, vm => snapshotVm(vm, saveMemory))),
+    ({ names, saveMemory }) =>
+      Promise.all(map(vms, vm => snapshotVm(vm, names[vm], saveMemory))),
     noop
   )
 

packages/xo-web/src/common/xo/snapshot-vm-modal/index.js

@@ -1,23 +1,64 @@
-import Component from 'base-component'
+import _ from 'intl'
 import React from 'react'
+import BaseComponent from 'base-component'
+import { Row, Col } from 'grid'
+import { mapValues } from 'lodash'
+import { createGetObjectsOfType } from 'selectors'
+import { buildTemplate, connectStore } from 'utils'
 
-import _ from '../../intl'
+@connectStore(
+  {
+    vms: createGetObjectsOfType('VM').pick((_, props) => props.vms),
+  },
+  { withRef: true }
+)
+export default class SnapshotVmModalBody extends BaseComponent {
+  state = { namePattern: '{name}_{date}' }
 
-export default class SnapshotVmModalBody extends Component {
   get value() {
-    return this.state.saveMemory
+    const { namePattern, saveMemory } = this.state
+    if (namePattern === '') {
+      return { names: {}, saveMemory }
+    }
+
+    const generateName = buildTemplate(namePattern, {
+      '{name}': vm => vm.name_label,
+      '{date}': new Date().toISOString(),
+    })
+
+    return {
+      names: mapValues(this.props.vms, generateName),
+      saveMemory,
+    }
   }
 
   render() {
     return (
-      <label>
-        <input
-          type='checkbox'
-          onChange={this.linkState('saveMemory')}
-          checked={this.state.saveMemory}
-        />{' '}
-        {_('snapshotSaveMemory')}
-      </label>
+      <div>
+        <Row>
+          <Col size={6}>{_('snapshotVmsName')}</Col>
+          <Col size={6}>
+            <input
+              className='form-control'
+              onChange={this.linkState('namePattern')}
+              type='text'
+              value={this.state.namePattern}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col>
+            <label>
+              <input
+                type='checkbox'
+                onChange={this.linkState('saveMemory')}
+                checked={this.state.saveMemory}
+              />{' '}
+              {_('snapshotSaveMemory')}
+            </label>
+          </Col>
+        </Row>
+      </div>
     )
   }
 }