Things list: Add dynamic blue dot to status badges if status detail is set

[andrewfg]

The purpose of this PR is to allow a dynamic information badge ("blue dot") 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' 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
updateStatus(status.getStatus(), status.getStatusDetail(), "I have a special status");

// hide the badge
updateStatus(status.getStatus(), status.getStatusDetail(), null);

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

[relativeci]

#5307 Bundle Size — 13.84MiB (~+0.01%).

85c658e(current) vs b84ffb9 main#5280(baseline)

Warning

Bundle contains 2 duplicate packages – View duplicate packages

Bundle metrics  no changes

	Current #5307	Baseline #5280
Initial JS	1.41MiB	1.41MiB
Initial CSS	0B	0B
Cache Invalidation	16.18%	16.18%
Chunks	697	697
Assets	816	816
Modules	2817	2817
Duplicate Modules	0	0
Duplicate Code	0%	0%
Packages	126	126
Duplicate Packages	1	1

Bundle size by type   2 changes 2 regressions

	Current #5307	Baseline #5280
JS	11.53MiB (~+0.01%)	11.53MiB
CSS	901.98KiB (+0.03%)	901.7KiB
IMG	638.41KiB	638.41KiB
Fonts	526.1KiB	526.1KiB
Media	295.6KiB	295.6KiB
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.

[florian-h05]

LGTM, thanks!

I've changed the intendation of the new styling to ensure it is encapsulated inside .things-list.