[MainUI] Add dynamic info badge for Things

[andrewfg]

The purpose of this PR is to allow a dynamic information badge to be applied to Things in the overview page in order to mark when the Thing has a special status. For example "low battery" or "firmware update available".

Resolves #4063

When a Thing's statusInfo.status === 'ONLINE' its statusInfo.statusDetail === 'NONE' and its statusInfo.description is not empty then this PR adds a "blue dot" information badge to the overview list as shown in the screenshot below.

Example code for setting and removing the badge

ThingStatusInfo status = thing.getStatusInfo();

// show the badge
thing.setStatusInfo(new ThingStatusInfo(status.getStatus(), status.getStatusDetail(), "I have a special status"));

// hide the badge
thing.setStatusInfo(new ThingStatusInfo(status.getStatus(), status.getStatusDetail(), null));

Signed-off-by: Andrew Fiddian-Green software@whitebear.ch

[relativeci]

#5227 Bundle Size — 13.24MiB (~+0.01%).

7c52105(current) vs d04a233 main#5211(baseline)

Warning

Bundle contains 2 duplicate packages – View duplicate packages

Bundle metrics   1 change

	Current #5227	Baseline #5211
Initial JS	1.41MiB	1.41MiB
Initial CSS	0B	0B
Cache Invalidation	17.71%	17.71%
Chunks	697	697
Assets	810	810
Modules	2808(+0.04%)	2807
Duplicate Modules	0	0
Duplicate Code	0%	0%
Packages	126	126
Duplicate Packages	1	1

Bundle size by type   2 changes 2 regressions

	Current #5227	Baseline #5211
JS	11.51MiB (~+0.01%)	11.51MiB
CSS	898.35KiB (+0.03%)	898.07KiB
Fonts	526.1KiB	526.1KiB
Media	295.6KiB	295.6KiB
IMG	45.73KiB	45.73KiB
Other	847B	847B

Bundle analysis report Branch andrewfg:thing-info-badge Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[dilyanpalauzov]

Why not just render the description directly, instead of putting the description in a tooltip?

[andrewfg]

Why not just render the description directly

The text may be quite long. So on the Things list page we show a badge. Whereas on the Thing detail page the text is shown in full.

Also the idea is that the text may be dynamically added or removed so the badge is only displayed when there is something special to say. For example it can display a badge when there is a software update available, and no badge when there is not.

In other words the badge only shows when something new has happened. Rather like the blue dot your inbox when there is mail. Or the blue dot on an app on your phone when it has an update. Or when a device has a low battery, etc.

---

EDIT: I added some sample code for setting and removing the badge in the top post above.

[dilyanpalauzov]

The text may be quite long. So on the Things list page we show a badge. Whereas on the Thing detail page the text is shown in full.

I agree this is a valid point of view.