[Fleet] Elastic Agent upgrade states UI

x-pack/plugins/fleet/common/types/models/agent.ts

@@ -48,6 +48,17 @@ export type AgentActionType =
   | 'POLICY_CHANGE'
   | 'INPUT_ACTION';
 
+export type AgentUpgradeStateType =
+  | 'UPG_REQUESTED'
+  | 'UPG_SCHEDULED'
+  | 'UPG_DOWNLOADING'
+  | 'UPG_EXTRACTING'
+  | 'UPG_REPLACING'
+  | 'UPG_RESTARTING'
+  | 'UPG_WATCHING'
+  | 'UPG_ROLLBACK'
+  | 'UPG_FAILED';
+
 type FleetServerAgentComponentStatusTuple = typeof FleetServerAgentComponentStatuses;
 export type FleetServerAgentComponentStatus = FleetServerAgentComponentStatusTuple[number];
 
@@ -89,6 +100,7 @@ interface AgentBase {
   unenrollment_started_at?: string;
   upgraded_at?: string | null;
   upgrade_started_at?: string | null;
+  upgrade_details?: AgentUpgradeDetails;
   access_api_key_id?: string;
   default_api_key?: string;
   default_api_key_id?: string;
@@ -249,6 +261,10 @@ export interface FleetServerAgent {
   /**
    * ID of the API key the Elastic Agent must used to contact Fleet Server
    */
+  /**
+   * Upgrade state of the Elastic Agent
+   */
+  upgrade_details?: AgentUpgradeDetails;
   access_api_key_id?: string;
   agent?: FleetServerAgentMetadata;
   /**
@@ -328,6 +344,7 @@ export interface FleetServerAgent {
    */
   outputs?: OutputMap;
 }
+
 /**
  * An Elastic Agent metadata
  */
@@ -421,3 +438,15 @@ export interface ActionStatusOptions {
   page?: number;
   perPage?: number;
 }
+
+export interface AgentUpgradeDetails {
+  target_version: string;
+  action_id: string;
+  state: AgentUpgradeStateType;
+  metadata: {
+    scheduled_at?: string;
+    download_percent?: number;
+    failed_state?: AgentUpgradeStateType;
+    error_msg?: string;
+  };
+}

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_list_table.tsx

@@ -31,6 +31,8 @@ import { Tags } from '../../components/tags';
 import type { AgentMetrics } from '../../../../../../../common/types';
 import { formatAgentCPU, formatAgentMemory } from '../../services/agent_metrics';
 
+import { AgentUpgradeStatus } from './agent_upgrade_status';
+
 import { EmptyPrompt } from './empty_prompt';
 
 const VERSION_FIELD = 'local_metadata.elastic.agent.version';
@@ -175,7 +177,7 @@ export const AgentListTable: React.FC<Props> = (props: Props) => {
       name: i18n.translate('xpack.fleet.agentList.policyColumnTitle', {
         defaultMessage: 'Agent policy',
       }),
-      width: '260px',
+      width: '185px',
       render: (policyId: string, agent: Agent) => {
         const agentPolicy = agentPoliciesIndexedById[policyId];
         const showWarning = agent.policy_revision && agentPolicy?.revision > agent.policy_revision;
@@ -276,29 +278,35 @@ export const AgentListTable: React.FC<Props> = (props: Props) => {
     {
       field: VERSION_FIELD,
       sortable: true,
-      width: '70px',
+      width: '180px',
       name: i18n.translate('xpack.fleet.agentList.versionTitle', {
         defaultMessage: 'Version',
       }),
       render: (version: string, agent: Agent) => (
         <EuiFlexGroup gutterSize="none" style={{ minWidth: 0 }} direction="column">
-          <EuiFlexItem grow={false} className="eui-textNoWrap">
-            {safeMetadata(version)}
-          </EuiFlexItem>
-          {isAgentSelectable(agent) &&
-          latestAgentVersion &&
-          isAgentUpgradeable(agent, latestAgentVersion) ? (
-            <EuiFlexItem grow={false}>
-              <EuiText color="subdued" size="xs" className="eui-textNoWrap">
-                <EuiIcon size="m" type="warning" color="warning" />
-                &nbsp;
-                <FormattedMessage
-                  id="xpack.fleet.agentList.agentUpgradeLabel"
-                  defaultMessage="Upgrade available"
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup gutterSize="s" alignItems="center">
+              <EuiFlexItem grow={false}>
+                <EuiText size="s" className="eui-textNoWrap">
+                  {safeMetadata(version)}
+                </EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <AgentUpgradeStatus
+                  isAgentUpgradable={
+                    !!(
+                      isAgentSelectable(agent) &&
+                      latestAgentVersion &&
+                      isAgentUpgradeable(agent, latestAgentVersion)
+                    )
+                  }
+                  agentUpgradeStartedAt={agent.upgrade_started_at}
+                  agentUpgradedAt={agent.upgraded_at}
+                  agentUpgradeDetails={agent.upgrade_details}
                 />
-              </EuiText>
-            </EuiFlexItem>
-          ) : null}
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
         </EuiFlexGroup>
       ),
     },