Fix the service filtering for many services

client/app/services/service-explorer/service-explorer.component.js

@@ -37,6 +37,7 @@ function ComponentController ($state, ServicesState, Language, ListView, Chargeb
       limitOptions: [5, 10, 20, 50, 100, 200, 500, 1000],
       // Functions
       resolveServices: resolveServices,
+      loadServiceChildren: loadServiceChildren,
       actionEnabled: actionEnabled,
       updateMenuActionForItemFn: updateMenuActionForItemFn,
       listActionDisable: listActionDisable,
@@ -417,20 +418,17 @@ function ComponentController ($state, ServicesState, Language, ListView, Chargeb
 
       result.resources.forEach((item) => {
         if (angular.isUndefined(item.service_id)) {
-          item.disableRowExpansion = item.all_service_children.length < 1
+          item.disableRowExpansion = !item.v_total_direct_service_children
           item.power_state = PowerOperations.getPowerState(item)
           item.power = getPowerInfo(item.power_state)
-          angular.forEach(item.all_service_children, function (childService) {
-            childService.power_state = PowerOperations.getPowerState(item)
-            childService.power = getPowerInfo(childService.power_state)
-          })
 
           if (refresh) {
             for (var i = 0; i < existingServices.length; i++) {
               var currentService = existingServices[i]
               if (currentService.id === item.id) {
                 item.selected = (angular.isDefined(currentService.selected) ? currentService.selected : false)
                 item.isExpanded = (angular.isDefined(currentService.isExpanded) ? currentService.isExpanded : false)
+                item.all_service_children = currentService.all_service_children
                 if (item.selected) {
                   vm.selectedItemsList.push(item)
                 }
@@ -448,22 +446,41 @@ function ComponentController ($state, ServicesState, Language, ListView, Chargeb
       vm.loading = false
     }
 
-    function getPowerInfo (powerState) {
-      const powerStates = {
-        'on': {icon: 'pficon-ok', tooltip: __('Power State: On')},
-        'off': {icon: 'fa-power-off', tooltip: __('Power State: Off')},
-        'unknown': {icon: 'fa-question-circle', tooltip: __('Power State: Unknown')}
-      }
-
-      return (powerState !== 'on' && powerState !== 'off' ? powerStates.unknown : powerStates[powerState])
-    }
-
     function queryFailure (response) {
       vm.loading = false
       EventNotifications.error(__('There was an error loading the services. ') + response.data.error.message)
     }
   }
 
+  // Lazily fetches child services for a row when it is first expanded
+  function loadServiceChildren (item) {
+    if (item.all_service_children || item.loadingChildren) {
+      return
+    }
+
+    item.all_service_children = []
+    item.loadingChildren = true
+    ServicesState.getServiceChildren(item.id).then(function (result) {
+      item.all_service_children = result.resources || []
+      angular.forEach(item.all_service_children, function (childService) {
+        childService.power_state = PowerOperations.getPowerState(childService)
+        childService.power = getPowerInfo(childService.power_state)
+      })
+    }).finally(function () {
+      item.loadingChildren = false
+    })
+  }
+
+  function getPowerInfo (powerState) {
+    const powerStates = {
+      'on': {icon: 'pficon-ok', tooltip: __('Power State: On')},
+      'off': {icon: 'fa-power-off', tooltip: __('Power State: Off')},
+      'unknown': {icon: 'fa-question-circle', tooltip: __('Power State: Unknown')}
+    }
+
+    return (powerState !== 'on' && powerState !== 'off' ? powerStates.unknown : powerStates[powerState])
+  }
+
   function listActionDisable (config, items) {
     config.isDisabled = items.length <= 0
     if (config.actionName === 'configuration') {

client/app/services/service-explorer/service-explorer.component.spec.js

@@ -78,7 +78,7 @@ describe('Component: serviceExplorer', () => {
     collectionsApiMock
     .expects('query')
     .withArgs('services', {
-      attributes: ['picture', 'picture.image_href', 'chargeback_report', 'evm_owner.userid', 'v_total_vms', 'power_state', 'all_service_children', 'tags'],
+      attributes: ['picture', 'picture.image_href', 'chargeback_report', 'evm_owner.userid', 'v_total_vms', 'power_state', 'v_total_direct_service_children', 'tags'],
       auto_refresh: undefined,
       expand: 'resources',
       filter: ['ancestry=null', 'visible=true'],

client/app/services/service-explorer/service-explorer.html

@@ -113,7 +113,7 @@
         </span>
             </div>
         </div>
-        <list-expanded-content>
+        <list-expanded-content ng-init="vm.loadServiceChildren($parent.item)">
             <pf-list-view
                     class="explorer-children-list"
                     config="vm.serviceChildrenListConfig"

client/app/services/services-state.service.js

@@ -15,6 +15,7 @@ export function ServicesStateFactory (ListConfiguration, CollectionsApi, RBAC) {
     getServiceJobsStdout: getServiceJobsStdout,
     getServices: getServices,
     getServicesMinimal: getServicesMinimal,
+    getServiceChildren: getServiceChildren,
     getPermissions: getPermissions,
     getLifeCycleCustomDropdown: getLifeCycleCustomDropdown,
     getPolicyCustomDropdown: getPolicyCustomDropdown,
@@ -94,6 +95,17 @@ export function ServicesStateFactory (ListConfiguration, CollectionsApi, RBAC) {
     return CollectionsApi.get(`services/${serviceId}/orchestration_stacks`, stackId, options)
   }
 
+  // Returns the direct children of a service for lazy-loading row expansion in the service list
+  function getServiceChildren (serviceId) {
+    const options = {
+      expand: 'resources',
+      attributes: ['picture', 'picture.image_href', 'power_state'],
+      filter: [`service_id=${serviceId}`]
+    }
+
+    return CollectionsApi.query('services', options)
+  }
+
   // Returns minimal data for the services matching the current filters, useful for getting a filter count
   function getServicesMinimal (filters) {
     const options = {
@@ -115,7 +127,7 @@ export function ServicesStateFactory (ListConfiguration, CollectionsApi, RBAC) {
         'evm_owner.userid',
         'v_total_vms',
         'power_state',
-        'all_service_children',
+        'v_total_direct_service_children',
         'tags'
       ],
       filter: getQueryFilters(services.getFilters()),

client/app/services/services-state.service.spec.js

@@ -106,7 +106,7 @@ describe('Service: ServicesStateFactory', () => {
       const collectionsApiSpy = sinon.stub(CollectionsApi, 'query').returns(Promise.resolve(successResponse))
       ServicesState.services.setSort({'id': 'name', 'title': 'Name', 'sortType': 'alpha'}, 'asc')
       const expectedOptions = {
-        attributes: ['picture', 'picture.image_href', 'chargeback_report', 'evm_owner.userid', 'v_total_vms', 'power_state', 'all_service_children', 'tags'],
+        attributes: ['picture', 'picture.image_href', 'chargeback_report', 'evm_owner.userid', 'v_total_vms', 'power_state', 'v_total_direct_service_children', 'tags'],
         auto_refresh: false,
         expand: 'resources',
         filter: ['ancestry=null', 'display=true'],