[7827] Improve UI for device status

[n-lark]

Description

Routes the new computed device status to onlineStatus (online/offline/never-seen). Collapses the device tables' "Last Seen" + "Last Known Status" columns into a single "Status" pill with last-seen and last-reported state in a tooltip.

Live update changes

Live status updates piggyback on the team-channel state message, which now carries onlineStatus.

We only ever push online from handleStatus, which runs when a device checks in so we send it on any reconnect that flips it back. We can't push offline because going offline is silence, so offline is computed from lastSeenAt on page load instead.

Items to note

• I left the top "Last Seen" + "Last Known Status" grid things alone, lmk if we want any changes for those.
• The device detail page now feels a little inconsistent with the list view. I didn't make any changes but I can make a follow up if we'd like. Lmk!

Related Issue(s)

Resolves #7827

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production
• Link to Changelog Entry PR, or note why one is not needed.

Labels

• Includes a DB migration? -> add the area:migration label

[Steve-Mcl]

Love it. It is exactly how I hoped (personal opinion)

• Single "Status" header text is much nicer than multi word
• Tooltip reveals all the info I would want/expect

• I left the top "Last Seen" + "Last Known Status" grid things alone, lmk if we want any changes for those.

I think that is fine for now. Moving forward, for me, the separate pills/badges (where there is more space) is more useful for "at a glance" info. One thing I would probably want tho is the colour of the device overview pill to reflect online/offline status.

• The device detail page now feels a little inconsistent with the list view. I didn't make any changes but I can make a follow up if we'd like. Lmk!

Similar to last point, where there is more space, it feels (to me) better to make information more glanceable. I think the task here is to align with whatever we do to the header.

---

Perhaps a single follow up issue to update the top "Last Seen" + "Last Known Status" and device details to utilise the online/offline status for colour and appearance would be in order?

[n-lark]

Hey @Steve-Mcl thank you for your thoughts! I went ahead and created Make device detail page and list summary bars consistent with new online status design #7876 as a follow up around these points.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 75.57%. Comparing base (5802322) to head (3ddbaeb).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7848      +/-   ##
==========================================
- Coverage   75.60%   75.57%   -0.04%     
==========================================
  Files         432      432              
  Lines       23046    23051       +5     
  Branches     6111     6114       +3     
==========================================
- Hits        17424    17420       -4     
- Misses       5622     5631       +9     

Flag	Coverage Δ
backend	75.57% <100.00%> (-0.04%)	⬇️

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

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[cstns]

why?

[n-lark]

item is group.toJSON(), so item.Devices are plain objects. device.status (a Sequelize virtual) is undefined on those, which drops onlineStatus and fails the required schema check. group.Devices are the real instances, so it resolves.

[cstns]

we should use a different kind of pointer when hovering

[n-lark]

Added cursor-help.

[cstns]

created #7879 as a follow up

[cstns]

Also, device sorting by status seems to be way off

[n-lark]

Also, device sorting by status seems to be way

Discussed in slack, since onlineStatus is a computed column we cannot sort by it in the db - get column does not exist errors. Leaving as lastSeenAt since that behavior is mostly correct. Will revisit if it becomes an issue.