chore(xo-web/backup-ng): improve setting power state implementation (#3684)

packages/xo-web/src/xo-app/backup-ng/new/index.js

@@ -112,7 +112,6 @@ const constructPattern = values =>
 const destructVmsPattern = pattern =>
   pattern.id === undefined
     ? {
-        powerState: pattern.power_state || 'All',
         $pool: destructSmartPattern(pattern.$pool),
         tags: destructSmartPattern(pattern.tags, flatten),
       }
@@ -143,6 +142,7 @@ const createDoesRetentionExist = name => {
 }
 
 const getInitialState = () => ({
+  _vmsPattern: undefined,
   $pool: {},
   backupMode: false,
   compression: undefined,
@@ -152,7 +152,6 @@ const getInitialState = () => ({
   drMode: false,
   name: '',
   paramsUpdated: false,
-  powerState: 'All',
   remotes: [],
   schedules: {},
   settings: undefined,
@@ -484,9 +483,8 @@ export default decorate([
           snapshotRetention,
         }),
       }),
-      setPowerState: (_, powerState) => state => ({
-        ...state,
-        powerState,
+      onVmsPatternChange: (_, _vmsPattern) => ({
+        _vmsPattern,
       }),
       setPoolValues: (_, values) => state => ({
         ...state,
@@ -566,6 +564,10 @@ export default decorate([
       inputReportWhenId: generateId,
       inputTimeoutId: generateId,
 
+      vmsPattern: ({ _vmsPattern }, { job }) =>
+        defined(_vmsPattern, () => job.vms, {
+          type: 'VM',
+        }),
       needUpdateParams: (state, { job, schedules }) =>
         job !== undefined && schedules !== undefined && !state.paramsUpdated,
       isJobInvalid: state =>
@@ -599,11 +601,10 @@ export default decorate([
       snapshotRetentionExists: createDoesRetentionExist('snapshotRetention'),
       isDelta: state => state.deltaMode || state.crMode,
       isFull: state => state.backupMode || state.drMode,
-      vmsSmartPattern: ({ $pool, powerState, tags }) => ({
+      vmsSmartPattern: ({ $pool, tags, vmsPattern }) => ({
+        ...vmsPattern,
         $pool: constructSmartPattern($pool, resolveIds),
-        power_state: powerState === 'All' ? undefined : powerState,
         tags: constructSmartPattern(tags, normalizeTagValues),
-        type: 'VM',
       }),
       vmPredicate: ({ isDelta }, { hostsById, poolsById }) => ({
         $container,
@@ -986,7 +987,10 @@ export default decorate([
 
                   {state.smartMode ? (
                     <Upgrade place='newBackup' required={3}>
-                      <SmartBackup />
+                      <SmartBackup
+                        onChange={effects.onVmsPatternChange}
+                        pattern={state.vmsPattern}
+                      />
                     </Upgrade>
                   ) : (
                     <FormFeedback

packages/xo-web/src/xo-app/backup-ng/new/smart-backup.js

@@ -1,13 +1,15 @@
 import _ from 'intl'
 import decorate from 'apply-decorators'
+import defined from '@xen-orchestra/defined'
 import Icon from 'icon'
+import PropTypes from 'prop-types'
 import React from 'react'
 import SmartBackupPreview from 'smart-backup'
 import Tooltip from 'tooltip'
 import { connectStore } from 'utils'
 import { createGetObjectsOfType } from 'selectors'
 import { get } from 'lodash'
-import { injectState } from 'reaclette'
+import { injectState, provideState } from 'reaclette'
 import { Select } from 'form'
 import { SelectPool, SelectTag } from 'select-objects'
 
@@ -19,12 +21,27 @@ const VMS_STATUSES_OPTIONS = [
   { value: 'Halted', label: _('vmStateHalted') },
 ]
 
-export default decorate([
+const SmartBackup = decorate([
   connectStore({
     vms: createGetObjectsOfType('VM'),
   }),
+  provideState({
+    effects: {
+      setPattern: (_, value) => (_, { pattern, onChange }) => {
+        onChange({
+          ...pattern,
+          ...value,
+        })
+      },
+      setPowerState ({ setPattern }, powerState) {
+        setPattern({
+          power_state: powerState === 'All' ? undefined : powerState,
+        })
+      },
+    },
+  }),
   injectState,
-  ({ state, effects, vms }) => (
+  ({ state, effects, vms, pattern }) => (
     <div>
       <FormGroup>
         <label>
@@ -33,7 +50,7 @@ export default decorate([
         <Select
           options={VMS_STATUSES_OPTIONS}
           onChange={effects.setPowerState}
-          value={state.powerState}
+          value={defined(pattern.power_state, 'All')}
           simpleValue
           required
         />
@@ -90,3 +107,10 @@ export default decorate([
     </div>
   ),
 ])
+
+SmartBackup.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  pattern: PropTypes.object.isRequired,
+}
+
+export default SmartBackup