[Fleet] Fix agent details after EUI upgrade (elastic#146073)

## Summary Fix a padding issue with the latest EUI upgrade on the agent details page It's easier to review with whitespace hidden https://github.com/elastic/kibana/pull/146073/files?w=1 ## UI change <img width="1318" alt="Screen Shot 2022-11-22 at 4 30 58 PM" src="https://user-images.githubusercontent.com/1336873/203425390-4be34e2f-9cd4-416c-8ee7-de6a8c7fadc9.png"> ## Bugged UI <img width="1290" alt="Screen Shot 2022-11-22 at 4 30 12 PM" src="https://user-images.githubusercontent.com/1336873/203425405-11f8d20f-71af-423e-b4c8-9943e18fc68f.png"> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
kibanamachine · Nov 23, 2022 · d097d96 · d097d96
1 parent 7c89949
commit d097d96
Showing 1 changed file with 161 additions and 159 deletions.
diff --git a/...et/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx b/...et/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx
@@ -41,170 +41,172 @@ export const AgentDetailsOverviewSection: React.FunctionComponent<{
   return (
     <EuiPanel>
       <EuiDescriptionList compressed>
-        {[
-          {
-            title: i18n.translate('xpack.fleet.agentDetails.statusLabel', {
-              defaultMessage: 'Status',
-            }),
-            description: <AgentHealth agent={agent} showOfflinePreviousStatus={true} />,
-          },
-          {
-            title: i18n.translate('xpack.fleet.agentDetails.lastActivityLabel', {
-              defaultMessage: 'Last activity',
-            }),
-            description: agent.last_checkin ? (
-              <FormattedRelative value={new Date(agent.last_checkin)} />
-            ) : (
-              '-'
-            ),
-          },
-          {
-            title: i18n.translate('xpack.fleet.agentDetails.lastCheckinMessageLabel', {
-              defaultMessage: 'Last checkin message',
-            }),
-            description: agent.last_checkin_message ? agent.last_checkin_message : '-',
-          },
-          {
-            title: i18n.translate('xpack.fleet.agentDetails.hostIdLabel', {
-              defaultMessage: 'Agent ID',
-            }),
-            description: agent.id,
-          },
-          {
-            title: i18n.translate('xpack.fleet.agentDetails.agentPolicyLabel', {
-              defaultMessage: 'Agent policy',
-            }),
-            description: agentPolicy ? (
-              <AgentPolicySummaryLine policy={agentPolicy} agent={agent} />
-            ) : (
-              agent.policy_id || '-'
-            ),
-          },
-          {
-            title: i18n.translate('xpack.fleet.agentDetails.versionLabel', {
-              defaultMessage: 'Agent version',
-            }),
-            description:
-              typeof agent.local_metadata?.elastic?.agent?.version === 'string' ? (
-                <EuiFlexGroup gutterSize="s" alignItems="center" style={{ minWidth: 0 }}>
-                  <EuiFlexItem grow={false} className="eui-textNoWrap">
-                    {agent.local_metadata.elastic.agent.version}
-                  </EuiFlexItem>
-                  {isAgentUpgradeable(agent, kibanaVersion) ? (
-                    <EuiFlexItem grow={false}>
-                      <EuiToolTip
-                        position="right"
-                        content={i18n.translate('xpack.fleet.agentList.agentUpgradeLabel', {
-                          defaultMessage: 'Upgrade available',
-                        })}
-                      >
-                        <EuiIcon type="alert" color="warning" />
-                      </EuiToolTip>
-                    </EuiFlexItem>
-                  ) : null}
-                </EuiFlexGroup>
+        <EuiFlexGroup direction="column" gutterSize="m">
+          {[
+            {
+              title: i18n.translate('xpack.fleet.agentDetails.statusLabel', {
+                defaultMessage: 'Status',
+              }),
+              description: <AgentHealth agent={agent} showOfflinePreviousStatus={true} />,
+            },
+            {
+              title: i18n.translate('xpack.fleet.agentDetails.lastActivityLabel', {
+                defaultMessage: 'Last activity',
+              }),
+              description: agent.last_checkin ? (
+                <FormattedRelative value={new Date(agent.last_checkin)} />
               ) : (
                 '-'
               ),
-          },
-          {
-            title: i18n.translate('xpack.fleet.agentDetails.hostNameLabel', {
-              defaultMessage: 'Host name',
-            }),
-            description:
-              typeof agent.local_metadata?.host?.hostname === 'string'
-                ? agent.local_metadata.host.hostname
-                : '-',
-          },
-          {
-            title: i18n.translate('xpack.fleet.agentDetails.logLevel', {
-              defaultMessage: 'Logging level',
-            }),
-            description:
-              typeof agent.local_metadata?.elastic?.agent?.log_level === 'string'
-                ? agent.local_metadata.elastic.agent.log_level
-                : '-',
-          },
-          {
-            title: i18n.translate('xpack.fleet.agentDetails.releaseLabel', {
-              defaultMessage: 'Agent release',
-            }),
-            description:
-              typeof agent.local_metadata?.elastic?.agent?.snapshot === 'boolean'
-                ? agent.local_metadata.elastic.agent.snapshot === true
-                  ? 'snapshot'
-                  : 'stable'
-                : '-',
-          },
-          {
-            title: i18n.translate('xpack.fleet.agentDetails.platformLabel', {
-              defaultMessage: 'Platform',
-            }),
-            description:
-              typeof agent.local_metadata?.os?.platform === 'string'
-                ? agent.local_metadata.os.platform
-                : '-',
-          },
-          {
-            title: i18n.translate('xpack.fleet.agentDetails.monitorLogsLabel', {
-              defaultMessage: 'Monitor logs',
-            }),
-            description:
-              Array.isArray(agentPolicy?.monitoring_enabled) &&
-              agentPolicy?.monitoring_enabled?.includes('logs') ? (
-                <FormattedMessage
-                  id="xpack.fleet.agentList.monitorLogsEnabledText"
-                  defaultMessage="Enabled"
-                />
-              ) : (
-                <FormattedMessage
-                  id="xpack.fleet.agentList.monitorLogsDisabledText"
-                  defaultMessage="Disabled"
-                />
-              ),
-          },
-          {
-            title: i18n.translate('xpack.fleet.agentDetails.monitorMetricsLabel', {
-              defaultMessage: 'Monitor metrics',
-            }),
-            description:
-              Array.isArray(agentPolicy?.monitoring_enabled) &&
-              agentPolicy?.monitoring_enabled?.includes('metrics') ? (
-                <FormattedMessage
-                  id="xpack.fleet.agentList.monitorMetricsEnabledText"
-                  defaultMessage="Enabled"
-                />
+            },
+            {
+              title: i18n.translate('xpack.fleet.agentDetails.lastCheckinMessageLabel', {
+                defaultMessage: 'Last checkin message',
+              }),
+              description: agent.last_checkin_message ? agent.last_checkin_message : '-',
+            },
+            {
+              title: i18n.translate('xpack.fleet.agentDetails.hostIdLabel', {
+                defaultMessage: 'Agent ID',
+              }),
+              description: agent.id,
+            },
+            {
+              title: i18n.translate('xpack.fleet.agentDetails.agentPolicyLabel', {
+                defaultMessage: 'Agent policy',
+              }),
+              description: agentPolicy ? (
+                <AgentPolicySummaryLine policy={agentPolicy} agent={agent} />
               ) : (
-                <FormattedMessage
-                  id="xpack.fleet.agentList.monitorMetricsDisabledText"
-                  defaultMessage="Disabled"
-                />
+                agent.policy_id || '-'
               ),
-          },
-          {
-            title: i18n.translate('xpack.fleet.agentDetails.tagsLabel', {
-              defaultMessage: 'Tags',
-            }),
-            description: (agent.tags ?? []).length > 0 ? <Tags tags={agent.tags ?? []} /> : '-',
-          },
-        ].map(({ title, description }) => {
-          const tooltip =
-            typeof description === 'string' && description.length > 20 ? description : '';
-          return (
-            <EuiFlexGroup>
-              <FlexItemWithMinWidth grow={3}>
-                <EuiDescriptionListTitle>{title}</EuiDescriptionListTitle>
-              </FlexItemWithMinWidth>
-              <FlexItemWithMinWidth grow={7}>
-                <EuiToolTip position="top" content={tooltip}>
-                  <EuiDescriptionListDescription className="eui-textTruncate">
-                    {description}
-                  </EuiDescriptionListDescription>
-                </EuiToolTip>
-              </FlexItemWithMinWidth>
-            </EuiFlexGroup>
-          );
-        })}
+            },
+            {
+              title: i18n.translate('xpack.fleet.agentDetails.versionLabel', {
+                defaultMessage: 'Agent version',
+              }),
+              description:
+                typeof agent.local_metadata?.elastic?.agent?.version === 'string' ? (
+                  <EuiFlexGroup gutterSize="s" alignItems="center" style={{ minWidth: 0 }}>
+                    <EuiFlexItem grow={false} className="eui-textNoWrap">
+                      {agent.local_metadata.elastic.agent.version}
+                    </EuiFlexItem>
+                    {isAgentUpgradeable(agent, kibanaVersion) ? (
+                      <EuiFlexItem grow={false}>
+                        <EuiToolTip
+                          position="right"
+                          content={i18n.translate('xpack.fleet.agentList.agentUpgradeLabel', {
+                            defaultMessage: 'Upgrade available',
+                          })}
+                        >
+                          <EuiIcon type="alert" color="warning" />
+                        </EuiToolTip>
+                      </EuiFlexItem>
+                    ) : null}
+                  </EuiFlexGroup>
+                ) : (
+                  '-'
+                ),
+            },
+            {
+              title: i18n.translate('xpack.fleet.agentDetails.hostNameLabel', {
+                defaultMessage: 'Host name',
+              }),
+              description:
+                typeof agent.local_metadata?.host?.hostname === 'string'
+                  ? agent.local_metadata.host.hostname
+                  : '-',
+            },
+            {
+              title: i18n.translate('xpack.fleet.agentDetails.logLevel', {
+                defaultMessage: 'Logging level',
+              }),
+              description:
+                typeof agent.local_metadata?.elastic?.agent?.log_level === 'string'
+                  ? agent.local_metadata.elastic.agent.log_level
+                  : '-',
+            },
+            {
+              title: i18n.translate('xpack.fleet.agentDetails.releaseLabel', {
+                defaultMessage: 'Agent release',
+              }),
+              description:
+                typeof agent.local_metadata?.elastic?.agent?.snapshot === 'boolean'
+                  ? agent.local_metadata.elastic.agent.snapshot === true
+                    ? 'snapshot'
+                    : 'stable'
+                  : '-',
+            },
+            {
+              title: i18n.translate('xpack.fleet.agentDetails.platformLabel', {
+                defaultMessage: 'Platform',
+              }),
+              description:
+                typeof agent.local_metadata?.os?.platform === 'string'
+                  ? agent.local_metadata.os.platform
+                  : '-',
+            },
+            {
+              title: i18n.translate('xpack.fleet.agentDetails.monitorLogsLabel', {
+                defaultMessage: 'Monitor logs',
+              }),
+              description:
+                Array.isArray(agentPolicy?.monitoring_enabled) &&
+                agentPolicy?.monitoring_enabled?.includes('logs') ? (
+                  <FormattedMessage
+                    id="xpack.fleet.agentList.monitorLogsEnabledText"
+                    defaultMessage="Enabled"
+                  />
+                ) : (
+                  <FormattedMessage
+                    id="xpack.fleet.agentList.monitorLogsDisabledText"
+                    defaultMessage="Disabled"
+                  />
+                ),
+            },
+            {
+              title: i18n.translate('xpack.fleet.agentDetails.monitorMetricsLabel', {
+                defaultMessage: 'Monitor metrics',
+              }),
+              description:
+                Array.isArray(agentPolicy?.monitoring_enabled) &&
+                agentPolicy?.monitoring_enabled?.includes('metrics') ? (
+                  <FormattedMessage
+                    id="xpack.fleet.agentList.monitorMetricsEnabledText"
+                    defaultMessage="Enabled"
+                  />
+                ) : (
+                  <FormattedMessage
+                    id="xpack.fleet.agentList.monitorMetricsDisabledText"
+                    defaultMessage="Disabled"
+                  />
+                ),
+            },
+            {
+              title: i18n.translate('xpack.fleet.agentDetails.tagsLabel', {
+                defaultMessage: 'Tags',
+              }),
+              description: (agent.tags ?? []).length > 0 ? <Tags tags={agent.tags ?? []} /> : '-',
+            },
+          ].map(({ title, description }) => {
+            const tooltip =
+              typeof description === 'string' && description.length > 20 ? description : '';
+            return (
+              <EuiFlexGroup>
+                <FlexItemWithMinWidth grow={3}>
+                  <EuiDescriptionListTitle>{title}</EuiDescriptionListTitle>
+                </FlexItemWithMinWidth>
+                <FlexItemWithMinWidth grow={7}>
+                  <EuiToolTip position="top" content={tooltip}>
+                    <EuiDescriptionListDescription className="eui-textTruncate">
+                      {description}
+                    </EuiDescriptionListDescription>
+                  </EuiToolTip>
+                </FlexItemWithMinWidth>
+              </EuiFlexGroup>
+            );
+          })}
+        </EuiFlexGroup>
       </EuiDescriptionList>
     </EuiPanel>
   );