[Fleet] Show warning when download upgrade is failing

[criamico]

Fixes #173370
Closes #171941

Summary

Show a warning when download upgrade is failing.

This PR addresses a specific case of upgrade downloading: when the upgrade started but it's failing with an error. In this case, since 8.12, the agent metadata have a retry_msg that can be used to distinguish this case from the regular upgrade.
I'm also fixing one smaller bug that I introduced with #173253, the tooltip shown in the case when the agent is not upgradeable was hiding the badge, so I'm moving the if as the last one in the function.

Testing

• Have an 8.12 agent installed with Multipass (it needs to be upgradeable)
• Change the download binary url to something broken: sourceURI: https://artifacts.elastic.co/notdownloads/
• Force upgrade from dev tools:

POST kbn:/api/fleet/agents/c3f09103-4e69-4a36-bee2-84223bedef36/upgrade
{
  "version": "8.12.0",
  "force": true
}

• Go to agent overview, the badge will show "upgrading" but will also have a warning icon with a tooltip, showing the retry message and the retry_until time in humanized format (retry until...remaining):
  

This way the message shows the values present in the agent metadata.

• Same is reported in the agent list table:
  

• After a while the retries will be finished and the agent will show the regular "upgrade failed" badge (this was already implemented):
  

Checklist

• Unit or functional tests were updated or added to match the most common scenarios

[apmmachine]

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

• /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
• /oblt-deploy-serverless : Deploy a serverless Kibana instance using the Observability test environments.
• run elasticsearch-ci/docs : Re-trigger the docs validation. (use unformatted text in the comment!)

[criamico]

/ci

[criamico]

@elasticmachine merge upstream

[elasticmachine]

Pinging @elastic/fleet (Team:Fleet)

[criamico]

The PR is almost ready, the only thing left to address is this comment : after all the retries fail, the agent goes to "UPG_FAILED" state but it doesn't seem to reset even after long time. Coupled with a "healthy" state this looks weird and I think that we should reset it after some time.

I don't know if we want to use this PR to address it or merge it and do it separately.

[cmacknz]

Since the retry_until is a deadline in UTC, it might be easier for the user to read to if we also calculated and presented the time remaining as retry_until - now(). This would let us present something like "Retrying until: 2024-01-30T15:03:38.159Z (1h53m remaining)" to save the user from having to calculate this in their own head.

[criamico]

I added the remaining time in humanized format as discussed:

I'm not displaying it at all in those cases when the retry time is set in the past and the difference is negative. It can happen when the upgrade failed and value doesn't change anymore.

[criamico]

@elasticmachine merge upstream

[juliaElastic]

LGTM

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: f5ba21d

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
fleet	1.2MB	1.2MB	+1.0KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
fleet	157.6KB	157.7KB	+109.0B

History

• 💔 Build #185372 failed e8f60bc
• 💔 Build #184809 failed f9c1c72

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @criamico

[kpollich]

Hey @criamico it looks like the errors reported often delimit individual errors with *, which I assume is intended to show as bullets in the UI. Would it be feasible to run this through react-markdown and put the resulting HTML into the tooltip's content prop? That way we get an actual <ul> node instead of the * characters? I don't know how easy that would be so I'm curious if that would work, or if the agent team even recommends it based on what else can appear in these error strings.

One piece of concern is that there's no newline after the * blocks, so I don't know if this will even work.

[criamico]

Would it be feasible to run this through react-markdown and put the resulting HTML into the tooltip's content prop?

@kpollich I'm not sure about it, I can take a quick look tomorrow but if it's too involved I would rather file an enhancement ticket for it.