[Fleet] Display metrics tooltip on Agent details page (elastic#152153)

wwang500 · Feb 27, 2023 · 8b10f10 · 8b10f10
1 parent 3292a81
commit 8b10f10
Showing 1 changed file with 38 additions and 6 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
@@ -52,15 +52,47 @@ export const AgentDetailsOverviewSection: React.FunctionComponent<{
                 <EuiFlexGroup direction="column" gutterSize="m">
                   {[
                     {
-                      title: i18n.translate('xpack.fleet.agentDetails.cpuLabel', {
-                        defaultMessage: 'CPU',
-                      }),
+                      title: (
+                        <EuiToolTip
+                          content={
+                            <FormattedMessage
+                              id="xpack.fleet.agentDetails.cpuTooltip"
+                              defaultMessage="Average CPU usage in the last 5 minutes"
+                            />
+                          }
+                        >
+                          <span>
+                            <FormattedMessage
+                              id="xpack.fleet.agentDetails.cpuTitle"
+                              defaultMessage="CPU"
+                            />
+                            &nbsp;
+                            <EuiIcon type="iInCircle" />
+                          </span>
+                        </EuiToolTip>
+                      ),
                       description: formatAgentCPU(agent.metrics, agentPolicy),
                     },
                     {
-                      title: i18n.translate('xpack.fleet.agentDetails.memoryLabel', {
-                        defaultMessage: 'Memory',
-                      }),
+                      title: (
+                        <EuiToolTip
+                          content={
+                            <FormattedMessage
+                              id="xpack.fleet.agentDetails.memoryTooltip"
+                              defaultMessage="Average memory usage in the last 5 minutes"
+                            />
+                          }
+                        >
+                          <span>
+                            <FormattedMessage
+                              id="xpack.fleet.agentDetails.memoryTitle"
+                              defaultMessage="Memory"
+                            />
+                            &nbsp;
+                            <EuiIcon type="iInCircle" />
+                          </span>
+                        </EuiToolTip>
+                      ),
                       description: formatAgentMemory(agent.metrics, agentPolicy),
                     },
                   ].map(({ title, description }) => {