Devices Browser Pagination

[Pezmc]

Description

Updates the device browser on the devices page, application page and instances page to all support filtering and search both client and server side.

Of note:

• When there is only one page of results, search and filter are performed client side
• When there is more than one page, search and filter are handled server side
• The team/application/instance devices APIs all now use the same getter for consistency
• The status bars at the top of the device browsers, always include all devices, regardless of current page or filter state
• The approach is designed to be semi-generalisable to other endpoints
• This also moves the alerting for update/edit/assign to only appear after the API call completes successfully (previously eager)

This PR does not implement server side sort, when there is more than one page of results, sort is disabled. This is due to complexities implementing sort with cursor based pagination. There is follow up work being considered to add this back.

Pagination forced to 5 per page locally for screenshots and video:

Screen.Recording.2023-08-30.at.22.32.39.mov

Related Issue(s)

Fixes #2379

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass - Not complete
• Documentation has been updated - Not relevant
  • Upgrade instructions
  • Configuration details
  • Concepts

[codecov]

Codecov Report

Merging #2677 (c5b5d13) into main (d0083f4) will decrease coverage by 0.17%.
Report is 7 commits behind head on main.
The diff coverage is 17.69%.

@@            Coverage Diff             @@
##             main    #2677      +/-   ##
==========================================
- Coverage   39.69%   39.52%   -0.17%     
==========================================
  Files         539      540       +1     
  Lines       18998    19130     +132     
  Branches     4466     4523      +57     
==========================================
+ Hits         7541     7562      +21     
- Misses      11457    11568     +111     

Flag	Coverage Δ
backend	74.45% <41.11%> (-0.32%)	⬇️
frontend	2.15% <2.46%> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files Changed	Coverage Δ
forge/comms/index.js	77.27% <ø> (ø)
forge/db/utils.js	81.96% <ø> (ø)
forge/ee/lib/deviceEditor/DeviceTunnelManager.js	67.40% <ø> (ø)
forge/licensing/index.js	91.76% <ø> (ø)
forge/routes/auth/index.js	51.41% <ø> (ø)
frontend/src/api/instances.js	0.00% <0.00%> (ø)
frontend/src/components/DevicesBrowser.vue	0.00% <0.00%> (ø)
frontend/src/components/charts/DeviceStatusBar.vue	0.00% <0.00%> (ø)
frontend/src/mixins/vue-timers.js	0.00% <ø> (ø)
frontend/src/pages/device/index.vue	0.00% <ø> (ø)
... and 15 more

... and 3 files with indirect coverage changes

[Pezmc]

Part of the unfinished support for sorted pagination with cursors

[Pezmc]

There will likely be more merge conflicts from #2670 and #2683, will rebase/merge after those are both in main.

[Pezmc]

Converted back to draft for test fixes and the rebasing outlined above.

[Steve-Mcl]

Small bug (may be existing TBF) but we should address this:

Currently, after un-assigning a device (from both instance & application) the page must be refreshed before a device can be re-assigned to something else.

unassign-issue.mp4

[knolleary]

I'm not very familiar with this mixin or where/how it is used. I cannot see any other references in our codebase to the timer-tick event, so I'll go along with this.

[knolleary]

All looks good. One failing test - but once resolved, lets get it merged.