fix(xo-web/self): all objects are missing (#3096)

Fixes #2689

CHANGELOG.md

@@ -20,6 +20,7 @@
 
 - [Home/SRs] Fixed SR status for non admin users [#2204](https://github.com/vatesfr/xen-orchestra/issues/2204) (PR [#3742](https://github.com/vatesfr/xen-orchestra/pull/3742))
 - [Servers] Fix occasional "server's pool already connected" errors when pool is not connected (PR [#3782](https://github.com/vatesfr/xen-orchestra/pull/3782))
+- [Self] Fix missing objects when the self service view is the first one to be loaded when opening XO [#2689](https://github.com/vatesfr/xen-orchestra/issues/2689) (PR [#3096](https://github.com/vatesfr/xen-orchestra/pull/3096))
 
 ### Released packages
 

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

@@ -2,6 +2,7 @@ import add from 'lodash/add'
 import { check as checkPermissions } from 'xo-acl-resolver'
 import { createSelector as create } from 'reselect'
 import {
+  difference,
   filter,
   find,
   forEach,
@@ -9,10 +10,12 @@ import {
   identity,
   isArray,
   isArrayLike,
+  isEmpty,
   isFunction,
   keys,
   map,
   orderBy,
+  pick,
   pickBy,
   size,
   slice,
@@ -567,3 +570,33 @@ export const getIsPoolAdmin = create(
   getCheckPermissions,
   (poolsIds, check) => some(poolsIds, poolId => check(poolId, 'administrate'))
 )
+
+export const getResolvedResourceSets = create(
+  (_, props) => props.resourceSets,
+  createGetObjectsOfType('network'),
+  createGetObjectsOfType('SR'),
+  createGetObjectsOfType('VM-template'),
+  (resourceSets, networks, srs, vms) =>
+    map(resourceSets, resourceSet => {
+      const { objects, ...attrs } = resourceSet
+      const objectsByType = {}
+      const objectsFound = []
+
+      const resolve = (type, _objects) => {
+        const resolvedObjects = pick(_objects, objects)
+        if (!isEmpty(resolvedObjects)) {
+          objectsFound.push(...Object.keys(resolvedObjects))
+          objectsByType[type] = Object.values(resolvedObjects)
+        }
+      }
+      resolve('VM-template', vms)
+      resolve('SR', srs)
+      resolve('network', networks)
+
+      return {
+        ...attrs,
+        missingObjects: difference(objectsFound, objects),
+        objectsByType,
+      }
+    })
+)

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

@@ -23,10 +23,14 @@ import ResourceSetQuotas from 'resource-set-quotas'
 import some from 'lodash/some'
 import Upgrade from 'xoa-upgrade'
 import { Container, Row, Col } from 'grid'
-import { createGetObjectsOfType, createSelector } from 'selectors'
 import { injectIntl } from 'react-intl'
 import { SizeInput } from 'form'
-
+import { addSubscriptions, connectStore, resolveIds } from 'utils'
+import {
+  createGetObjectsOfType,
+  createSelector,
+  getResolvedResourceSets,
+} from 'selectors'
 import {
   createResourceSet,
   deleteResourceSet,
@@ -35,14 +39,6 @@ import {
   subscribeIpPools,
   subscribeResourceSets,
 } from 'xo'
-
-import {
-  addSubscriptions,
-  connectStore,
-  resolveIds,
-  resolveResourceSets,
-} from 'utils'
-
 import {
   SelectIpPool,
   SelectNetwork,
@@ -699,25 +695,17 @@ class ResourceSet extends Component {
 
 // ===================================================================
 
-const compareName = (a, b) => (a.name < b.name ? -1 : 1)
-
+@addSubscriptions({ resourceSets: subscribeResourceSets })
+@connectStore({ resolvedResourceSets: getResolvedResourceSets })
 export default class Self extends Component {
   constructor(props) {
     super(props)
     this.state = {}
   }
 
-  componentWillMount() {
-    this.componentWillUnmount = subscribeResourceSets(resourceSets => {
-      this.setState({
-        resourceSets: resolveResourceSets(resourceSets).sort(compareName),
-      })
-    })
-  }
-
-  render() {
-    const { resourceSets, showNewResourceSetForm } = this.state
-    const { location } = this.props
+  render () {
+    const { showNewResourceSetForm } = this.state
+    const { resolvedResourceSets, location } = this.props
 
     return (
       <Page formatTitle header={HEADER} title='selfServicePage'>
@@ -746,10 +734,10 @@ export default class Self extends Component {
               />,
               <hr key={1} />,
             ]}
-            {resourceSets
-              ? isEmpty(resourceSets)
+            {resolvedResourceSets
+              ? isEmpty(resolvedResourceSets)
                 ? _('noResourceSets')
-                : map(resourceSets, resourceSet => (
+                : map(resolvedResourceSets, resourceSet => (
                     <ResourceSet
                       autoExpand={location.query.resourceSet === resourceSet.id}
                       key={resourceSet.id}