Automate-3673 Compliance reports pagination pages not correct

[tarablack01]

🔩 Description: What code changed, and why?

There is a dependency on #3664

Prior to #3664, if you applied a status filter the nodes, profiles, or controls would still be distributed across all of their pages before the filter was applied.

#3664 improves it so that all objects get moved to the beginning of the pages, but all the empty pages are left around and if a user navigates to one of the empty pages they get stuck and have to do a hard refresh.

if a user applies a status filter, pagination buttons should only be shown if there are objects on them.

⛓️ Related Resources

#3673

👍 Definition of Done

Pagination shows correct page numbers

👟 How to Build and Test the Change

add at least 101 compliance nodes, chef_load_compliance_nodes
navigate to compliance > reports > nodes (or profiles or controls)
apply a status filter
navigate to the second page via the pagination component
notice the blank pages where you get stuck

✅ Checklist

• I have read the CONTRIBUTING document.
• Tests added/updated?
• Docs added/updated?
• All commits have been signed-off for the Developer Certification of Origin.

[netlify]

Deploy preview for chef-automate ready!

Built with commit a320420

https://deploy-preview-4363--chef-automate.netlify.app

[msorens]

Whenever we use a data function like this (as opposed to an action function like a click handler), Angular cannot know if its value has changed so it needs to call it. Repeatedly. I have not spent time fully characterizing how often, but in some instances I have seen it looping endlessly for no apparent reason. Since that time I have been espousing a ban on data functions in templates unless it is absolutely unavoidable.

There are two alternative approaches: "declared properties" and "pure pipes". See my extensive notes on these in the bottom half of the preamble to #3810. That PR also shows examples of the "declared properties" approach, which is more appropriate in this case.