feat(xo-web/home): ability to filter by power state (#5118)

CHANGELOG.unreleased.md

@@ -12,6 +12,7 @@
 - [Schedule/edit] Ability to enable/disable an ordinary job's schedule [#5026](https://github.com/vatesfr/xen-orchestra/issues/5026) (PR [#5111](https://github.com/vatesfr/xen-orchestra/pull/5111))
 - [New schedule] Enable 'Enable immediately after creation' by default (PR [#5111](https://github.com/vatesfr/xen-orchestra/pull/5111))
 - [Self Service] Ability to globally ignore snapshots in resource set quotas (PR [#5164](https://github.com/vatesfr/xen-orchestra/pull/5164))
+- [Home/VM, host] Ability to filter by power state (PR [#5118](https://github.com/vatesfr/xen-orchestra/pull/5118))
 
 ### Bug fixes
 

packages/xo-web/src/common/home-filters.js

@@ -5,14 +5,11 @@ const common = {
 export const VM = {
   ...common,
   homeFilterPendingVms: 'current_operations:"" ',
-  homeFilterNonRunningVms: '!power_state:running ',
   homeFilterHvmGuests: 'virtualizationMode:hvm ',
-  homeFilterRunningVms: 'power_state:running ',
 }
 
 export const host = {
   ...common,
-  homeFilterRunningHosts: 'power_state:running ',
 }
 
 export const pool = {

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

@@ -230,10 +230,7 @@ const messages = {
   homeAllResourceSets: 'Resource sets',
   homeNewVm: 'New VM',
   homeFilterNone: 'None',
-  homeFilterRunningHosts: 'Running hosts',
   homeFilterDisabledHosts: 'Disabled hosts',
-  homeFilterRunningVms: 'Running VMs',
-  homeFilterNonRunningVms: 'Non running VMs',
   homeFilterPendingVms: 'Pending VMs',
   homeFilterHvmGuests: 'HVM guests',
   homeSortBy: 'Sort by',
@@ -257,6 +254,7 @@ const messages = {
   homePoolMaster: 'Master:',
   homeResourceSet: 'Resource set: {resourceSet}',
   highAvailability: 'High Availability',
+  powerState: 'Power state',
   srSharedType: 'Shared {type}',
   warningHostTimeTooltip:
     'Host time and XOA time are not consistent with each other',

packages/xo-web/src/icons.scss

@@ -506,6 +506,11 @@
     @extend .xo-status-disabled;
   }
 
+  &-powerState {
+    @extend .fa;
+    @extend .fa-power-off;
+  }
+
   &-all-connected {
     @extend .fa;
     @extend .fa-circle;

packages/xo-web/src/xo-app/home/index.js

@@ -326,6 +326,18 @@ const BACKUP_FILTERS = [
   { value: 'notBackedUpVms', label: _('notBackedUpVms') },
 ]
 
+const POWER_STATE_HOST = [
+  { value: 'halted', label: _('powerStateHalted') },
+  { value: 'running', label: _('powerStateRunning') },
+]
+
+const POWER_STATE_VM = [
+  { value: 'halted', label: _('powerStateHalted') },
+  { value: 'paused', label: _('powerStatePaused') },
+  { value: 'running', label: _('powerStateRunning') },
+  { value: 'suspended', label: _('powerStateSuspended') },
+]
+
 @connectStore(() => {
   const noServersConnected = invoke(
     createGetObjectsOfType('host'),
@@ -653,8 +665,9 @@ export default class Home extends Component {
     this.setState({
       selectedHosts: properties.$container,
       selectedPools: properties.$pool,
-      selectedTags: properties.tags,
+      selectedPowerStates: properties.power_state,
       selectedResourceSets: properties.resourceSet,
+      selectedTags: properties.tags,
       ...sort,
     })
 
@@ -763,6 +776,20 @@ export default class Home extends Component {
       {label}
     </MenuItem>
   ))
+
+  _updateSelectedPowerStates = powerStates =>
+    this._setFilter(
+      ComplexMatcher.setPropertyClause(
+        this._getParsedFilter(),
+        'power_state',
+        powerStates.length === 0
+          ? undefined
+          : new ComplexMatcher.Or(
+              powerStates.map(_ => new ComplexMatcher.String(_.value))
+            )
+      )
+    )
+
   _updateSelectedPools = pools => {
     const filter = this._getParsedFilter()
 
@@ -946,6 +973,7 @@ export default class Home extends Component {
       homeItemsPerPage,
       selectedHosts,
       selectedPools,
+      selectedPowerStates,
       selectedResourceSets,
       selectedTags,
       sortBy,
@@ -1106,6 +1134,34 @@ export default class Home extends Component {
               </div>
             ) : (
               <div>
+                {(type === 'VM' || type === 'host') && (
+                  <OverlayTrigger
+                    trigger='click'
+                    rootClose
+                    placement='bottom'
+                    overlay={
+                      <Popover
+                        className={styles.selectObject}
+                        id='powerStatePopover'
+                      >
+                        <Select
+                          autoFocus
+                          multi
+                          onChange={this._updateSelectedPowerStates}
+                          openOnFocus
+                          options={
+                            type === 'VM' ? POWER_STATE_VM : POWER_STATE_HOST
+                          }
+                          value={selectedPowerStates}
+                        />
+                      </Popover>
+                    }
+                  >
+                    <Button btnStyle='link'>
+                      <Icon icon='powerState' /> {_('powerState')}
+                    </Button>
+                  </OverlayTrigger>
+                )}
                 {type === 'VM' && (
                   <OverlayTrigger
                     trigger='click'