Add new "Missing" hosts count card to dashboard, and set status query param to missing

[lukeheath]

Problem

I'm an engineer managing thousands of hosts and I'm overwhelmed with tracking this goal:

• Know how many hosts, and which hosts, are missing.

This makes it hard to troubleshoot why a host is missing. Is the user on a longer vacation? Is the host stolen? Is the host is someone's closet? Is the host broken?

Goals

1. Know how many hosts are missing.

2. Know which hosts are missing.

Requirements

• Fleet Premium users can see how many hosts (count) have been offline in the last 30 days.
• Fleet Premium users can navigate to a list of hosts filtered by hosts that have been offline in the last 30 days. The user can navigate to this list via the Fleet UI or by pasting a URL in their browsers URL bar.
• The UI is powered by updates to the GET /host_summary API route.
• The Fleet API supports adding more intervals in the future. For example, later, we may want to add the ability to see how many hosts have been offline in the last 7 days.
• On Home page, user can see count of missing hosts that belong to a specific platform.
  • If user selects the Home page card when filtering by missing + platform, they see the Hosts page with only the missing filter applied.

Figma

https://www.figma.com/file/hdALBDsrti77QuDNSzLdkx/%F0%9F%9A%A7-Fleet-EE-(dev-ready%2C-scratchpad)?node-id=9223%3A304723

API

1. Update the GET /host_summary API route

• See Add new missing_30_days_count property to the GET /host_summary endpoint #7587

2. Add new param to GET /hosts to filter by missing hosts.

• See Add new missing value to existing status URL parameter at the GET /hosts endpoint #7588

Parent Epic

• Expansion of host vitals #397

Specced by @RachelElysia

Tasks

0 Blocking ticket #7796

• Move status route param to be a query param

1

• For Premium and Free: Remove online and offline host cards

2

• For Premium Users only: Add 2 cards div to homepage that stack at smaller widths

3

Missing host card

• Display missing host count, along with icon, and tooltip text
• Tooltip displays: "Hosts that have been offline for 30 days or more."
• Make area around the icon, count, and name clickable
• Clicking on the area will redirect to the filter on the manage host page

4

Manage host page

• Manage host page can be filtered and unfiltered by Missing hosts in the status dropdown
• Dropdown includes description: "Hosts that have been offline for 30 days or more."

5

Frontend tech

• Wait for backend to decide on query string params
• Use buildQueryStringFromParams() function in /url and reconcileMutuallyExclusiveParams()
• Might be a perfect opportunity for Frontend Tech Debt: Move rendering filter blocks into one component #7558
• Might be a perfect opportunity for unit test or integration test (unit test of SummaryTile in new PR)

[lukeheath]

@noahtalerman Questions:

1. Figma says "Remove the “Online” and “Offline” cards from the Home page.". Are we removing these cards from the free version, as well, or only the premium version?

[lukeheath]

@RachelElysia I'm assigning you this issue to finish specifications and bring to estimation. Please prioritize this issue in order to complete specs this week, as we will be bringing this into the next release cycle.

[noahtalerman]

Are we removing these cards from the free version, as well, or only the premium version?

@lukeheath @RachelElysia, we are removing the "Online" and "Offline" cards for both Fleet Premium (paid) and Fleet Free.

[RachelElysia]

8 including the refactor

[RachelElysia]

@noahtalerman

For 1
For Premium and Free: Remove online and offline host cards

I'm assuming the single loading spinner that went across the host summary card AND this online/offline card is now within the host summary card to match the loading spinner of all other cards

[noahtalerman]

the single loading spinner that went across the host summary card AND this online/offline card is now within the host summary card.

@RachelElysia I think the loading spinner should now be centered across the platforms card, disk space card, and missing hosts card.

For Fleet Free, because there is no disk space card or missing hosts card, I would expect the loading spinner to be centered on the platforms card.

I attached a sketch below to depict this idea. Loading spinner is the white ring.

What do you think?

[lukeheath]

@RachelElysia Based on feedback from @mna on the backend card, @noahtalerman has redesigned the Figma for this task so that "Missing Hosts" is now a status in the status dropdown and not applied as a filter. This means we can keep using the status=missing query param. Would you please review the Figma and update the specs on this ticket accordingly? Thank you!

[RachelElysia]

the single loading spinner that went across the host summary card AND this online/offline card is now within the host summary card.

@RachelElysia I think the loading spinner should now be centered across the platforms card, disk space card, and missing hosts card.

For Fleet Free, because there is no disk space card or missing hosts card, I would expect the loading spinner to be centered on the platforms card.

I attached a sketch below to depict this idea. Loading spinner is the white ring.

What do you think?

SGTM, I'll leave a dev note for other developers who might question why the spinners are different for free and premium since it's not intuitive unless actually looking at the ui

[RachelElysia]

@RachelElysia Based on feedback from @mna on the backend card, @noahtalerman has redesigned the Figma for this task so that "Missing Hosts" is now a status in the status dropdown and not applied as a filter. This means we can keep using the status=missing query param. Would you please review the Figma and update the specs on this ticket accordingly? Thank you!

Love this idea, will update now.

[lukeheath]

@RachelElysia I've updated the specs on the related backend tickets. When you have a moment would you please review those to make sure they are aligned with your frontend implementation? Thanks!

[noahtalerman]

I updated the specs so that the help text on the Home and Hosts page reads "Hosts that have been offline for 30 days or more."

[RachelElysia]

@lukeheath @noahtalerman Should this be on team dashboard as well?

[noahtalerman]

Should this be on team dashboard as well?

Yes! Missing and Low disk space should be displayed if a team is selected. Great catch.

When you get the chance, can you please update the specs for this issue and the Low disk space issue? Thanks :)

This way, Reed will test applying the teams dropdown during testing.