[8.12] [Fleet] added upgrade details to agent details page (#173544) (#173607)

# Backport

This will backport the following commits from `main` to `8.12`:
- [[Fleet] added upgrade details to agent details page
(#173544)](https://github.com/elastic/kibana/pull/173544)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Julia
Bardi","email":"90178898+juliaElastic@users.noreply.github.com"},"sourceCommit":{"committedDate":"2023-12-19T10:47:50Z","message":"[Fleet]
added upgrade details to agent details page (#173544)\n\n##
Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/171942\r\n\r\nAdded upgrade
details to agent details page.\r\n\r\nTo verify: \r\n- enroll agent
8.12-snapshot locally\r\n- upgrade to 8.13-snapshot with API\r\n- verify
that upgrade details are visible on agent details page (same as\r\nin
agent list)\r\n\r\n<img width=\"663\"
alt=\"image\"\r\nsrc=\"4c219876-3c1e-4150-92d4-42ddc2c7e154\">\r\n<img
width=\"632\"
alt=\"image\"\r\nsrc=\"909d83dd-3b62-49e0-bf14-e97b238f8250\">","sha":"63d15ce1f4dc7b3dea823ba1e4ff4b0799107c88","branchLabelMapping":{"^v8.13.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Fleet","v8.12.0","v8.13.0"],"number":173544,"url":"https://github.com/elastic/kibana/pull/173544","mergeCommit":{"message":"[Fleet]
added upgrade details to agent details page (#173544)\n\n##
Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/171942\r\n\r\nAdded upgrade
details to agent details page.\r\n\r\nTo verify: \r\n- enroll agent
8.12-snapshot locally\r\n- upgrade to 8.13-snapshot with API\r\n- verify
that upgrade details are visible on agent details page (same as\r\nin
agent list)\r\n\r\n<img width=\"663\"
alt=\"image\"\r\nsrc=\"4c219876-3c1e-4150-92d4-42ddc2c7e154\">\r\n<img
width=\"632\"
alt=\"image\"\r\nsrc=\"909d83dd-3b62-49e0-bf14-e97b238f8250\">","sha":"63d15ce1f4dc7b3dea823ba1e4ff4b0799107c88"}},"sourceBranch":"main","suggestedTargetBranches":["8.12"],"targetPullRequestStates":[{"branch":"8.12","label":"v8.12.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.13.0","labelRegex":"^v8.13.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/173544","number":173544,"mergeCommit":{"message":"[Fleet]
added upgrade details to agent details page (#173544)\n\n##
Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/171942\r\n\r\nAdded upgrade
details to agent details page.\r\n\r\nTo verify: \r\n- enroll agent
8.12-snapshot locally\r\n- upgrade to 8.13-snapshot with API\r\n- verify
that upgrade details are visible on agent details page (same as\r\nin
agent list)\r\n\r\n<img width=\"663\"
alt=\"image\"\r\nsrc=\"4c219876-3c1e-4150-92d4-42ddc2c7e154\">\r\n<img
width=\"632\"
alt=\"image\"\r\nsrc=\"909d83dd-3b62-49e0-bf14-e97b238f8250\">","sha":"63d15ce1f4dc7b3dea823ba1e4ff4b0799107c88"}}]}]
BACKPORT-->

Co-authored-by: Julia Bardi <90178898+juliaElastic@users.noreply.github.com>

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx

@@ -29,6 +29,7 @@ import { AgentHealth } from '../../../components';
 import { Tags } from '../../../components/tags';
 import { formatAgentCPU, formatAgentMemory } from '../../../services/agent_metrics';
 import { AgentDashboardLink } from '../agent_dashboard_link';
+import { AgentUpgradeStatus } from '../../../agent_list_page/components/agent_upgrade_status';
 
 // Allows child text to be truncated
 const FlexItemWithMinWidth = styled(EuiFlexItem)`
@@ -173,18 +174,20 @@ export const AgentDetailsOverviewSection: React.FunctionComponent<{
                     <EuiFlexItem grow={false} className="eui-textNoWrap">
                       {agent.local_metadata.elastic.agent.version}
                     </EuiFlexItem>
-                    {latestAgentVersion && isAgentUpgradeable(agent, latestAgentVersion) ? (
-                      <EuiFlexItem grow={false}>
-                        <EuiToolTip
-                          position="right"
-                          content={i18n.translate('xpack.fleet.agentList.agentUpgradeLabel', {
-                            defaultMessage: 'Upgrade available',
-                          })}
-                        >
-                          <EuiIcon type="warning" color="warning" />
-                        </EuiToolTip>
-                      </EuiFlexItem>
-                    ) : null}
+                    <EuiFlexItem grow={false}>
+                      <AgentUpgradeStatus
+                        isAgentUpgradable={
+                          !!(
+                            agentPolicy?.is_managed !== true &&
+                            latestAgentVersion &&
+                            isAgentUpgradeable(agent, latestAgentVersion)
+                          )
+                        }
+                        agentUpgradeStartedAt={agent.upgrade_started_at}
+                        agentUpgradedAt={agent.upgraded_at}
+                        agentUpgradeDetails={agent.upgrade_details}
+                      />
+                    </EuiFlexItem>
                   </EuiFlexGroup>
                 ) : (
                   '-'

x-pack/plugins/translations/translations/fr-FR.json

@@ -17111,7 +17111,6 @@
     "xpack.fleet.agentList.addRemoveTagsActionText": "Ajouter / supprimer des balises",
     "xpack.fleet.agentList.agentActivityButton": "Activité des agents",
     "xpack.fleet.agentList.agentInfoLinkButton": "Indicateurs Informations sur l'agent",
-    "xpack.fleet.agentList.agentUpgradeLabel": "Mise à niveau disponible",
     "xpack.fleet.agentList.clearFiltersLinkText": "Effacer les filtres",
     "xpack.fleet.agentList.cpuTitle": "CPU",
     "xpack.fleet.agentList.cpuTooltip": "Utilisation CPU moyenne au cours des 5 dernières minutes",

x-pack/plugins/translations/translations/ja-JP.json

@@ -17124,7 +17124,6 @@
     "xpack.fleet.agentList.addRemoveTagsActionText": "タグを追加/削除",
     "xpack.fleet.agentList.agentActivityButton": "エージェントアクティビティ",
     "xpack.fleet.agentList.agentInfoLinkButton": "エージェント情報メトリック",
-    "xpack.fleet.agentList.agentUpgradeLabel": "アップグレードが利用可能です",
     "xpack.fleet.agentList.clearFiltersLinkText": "フィルターを消去",
     "xpack.fleet.agentList.cpuTitle": "CPU",
     "xpack.fleet.agentList.cpuTooltip": "過去5分間の平均CPU使用状況",

x-pack/plugins/translations/translations/zh-CN.json

@@ -17124,7 +17124,6 @@
     "xpack.fleet.agentList.addRemoveTagsActionText": "添加/移除标签",
     "xpack.fleet.agentList.agentActivityButton": "代理活动",
     "xpack.fleet.agentList.agentInfoLinkButton": "代理信息指标",
-    "xpack.fleet.agentList.agentUpgradeLabel": "升级可用",
     "xpack.fleet.agentList.clearFiltersLinkText": "清除筛选",
     "xpack.fleet.agentList.cpuTitle": "CPU",
     "xpack.fleet.agentList.cpuTooltip": "过去 5 分钟的平均 CPU 使用率",