ui: Metrics graph related test-ids (#5938)

* Metrics graph related test-ids

* [pre-commit.ci lite] apply automatic fixes

* Linter fix

* Revert the tooltip changes

* [pre-commit.ci lite] apply automatic fixes

* reverting the tooltip changes

* [pre-commit.ci lite] apply automatic fixes

* reverting the tooltip changes

---------

Co-authored-by: pre-commit-ci-lite[bot] <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>

Author: manojVivek

ui/packages/shared/profile/src/MetricsGraph/MetricsContextMenu/index.tsx

@@ -15,6 +15,7 @@ import {Icon} from '@iconify/react';
 import {Item, Menu, Submenu} from 'react-contexify';
 
 import {useParcaContext} from '@parca/components';
+import {testId} from '@parca/test-utils';
 
 import {Series, SeriesPoint} from '../';
 
@@ -110,7 +111,12 @@ const MetricsContextMenu = ({
   };
 
   return (
-    <Menu id={menuId} onVisibilityChange={trackVisibility} theme={isDarkMode ? 'dark' : ''}>
+    <Menu
+      id={menuId}
+      onVisibilityChange={trackVisibility}
+      theme={isDarkMode ? 'dark' : ''}
+      {...testId('METRICS_GRAPH_CONTEXT_MENU')}
+    >
       {menuItems.map(renderMenuItem)}
     </Menu>
   );

ui/packages/shared/profile/src/MetricsGraph/MetricsTooltip/index.tsx

@@ -15,6 +15,8 @@ import {useEffect, useMemo, useState} from 'react';
 
 import {usePopper} from 'react-popper';
 
+import {testId} from '@parca/test-utils';
+
 interface VirtualElement {
   getBoundingClientRect: () => DOMRect;
 }
@@ -107,7 +109,13 @@ const MetricsTooltip = ({x, y, contextElement, content}: Props): JSX.Element =>
   }
 
   return (
-    <div ref={setPopperElement} style={styles.popper} {...attributes.popper} className="z-50">
+    <div
+      ref={setPopperElement}
+      style={styles.popper}
+      {...attributes.popper}
+      {...testId('METRICS_GRAPH_TOOLTIP')}
+      className="z-50"
+    >
       <div className="flex max-w-lg">
         <div className="m-auto">
           <div className="border border-gray-300 bg-gray-50 dark:border-gray-500 dark:bg-gray-900 rounded-lg shadow-lg px-3 py-2">

ui/packages/shared/profile/src/MetricsGraph/index.tsx

@@ -19,6 +19,7 @@ import throttle from 'lodash.throttle';
 import {useContextMenu} from 'react-contexify';
 
 import {DateTimeRange, useParcaContext} from '@parca/components';
+import {testId} from '@parca/test-utils';
 import {formatDate, formatForTimespan, getPrecision, valueFormatter} from '@parca/utilities';
 
 import MetricsCircle from '../MetricsCircle';
@@ -81,7 +82,11 @@ const MetricsGraph = ({
 }: Props): JSX.Element => {
   const [isInfoPanelOpen, setIsInfoPanelOpen] = useState<boolean>(false);
   return (
-    <div className="relative" onClick={() => isInfoPanelOpen && setIsInfoPanelOpen(false)}>
+    <div
+      className="relative"
+      {...testId('METRICS_GRAPH')}
+      onClick={() => isInfoPanelOpen && setIsInfoPanelOpen(false)}
+    >
       <div className="absolute right-0 top-0">
         <MetricsInfoPanel
           isInfoPanelOpen={isInfoPanelOpen}

ui/packages/shared/profile/src/ProfileMetricsGraph/index.tsx

@@ -29,6 +29,7 @@ import {
   useParcaContext,
 } from '@parca/components';
 import {Query} from '@parca/parser';
+import {testId} from '@parca/test-utils';
 import {capitalizeOnlyFirstLetter, formatDate, timePattern, valueFormatter} from '@parca/utilities';
 
 import {MergedProfileSelection, ProfileSelection} from '..';
@@ -490,6 +491,7 @@ const ProfileMetricsGraph = ({
                                   <div
                                     key={name}
                                     className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400"
+                                    {...testId('TOOLTIP_LABEL')}
                                   >
                                     <TextWithTooltip
                                       text={`${name.replace('attributes.', '')}="${
@@ -511,6 +513,7 @@ const ProfileMetricsGraph = ({
                                   <div
                                     key={name}
                                     className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400"
+                                    {...testId('TOOLTIP_LABEL')}
                                   >
                                     <TextWithTooltip
                                       text={`${name.replace('attributes.', '')}="${
@@ -531,6 +534,7 @@ const ProfileMetricsGraph = ({
                                   <div
                                     key={label.name}
                                     className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400"
+                                    {...testId('TOOLTIP_LABEL')}
                                   >
                                     <TextWithTooltip
                                       text={`${label.name}="${label.value}"`}

ui/packages/shared/test-utils/src/test-ids.ts

@@ -87,6 +87,14 @@ export const TEST_IDS = {
   FLAMEGRAPH_CONTAINER: 'flamegraph-container',
   FLAMEGRAPH_RESET_BUTTON: 'flamegraph-reset-button',
 
+  // Metrics Graph
+  METRICS_GRAPH: 'metrics-graph',
+  METRICS_GRAPH_TOOLTIP: 'metrics-graph-tooltip',
+  TOOLTIP_LABEL: 'tooltip-label',
+  TOOLTIP_LABEL_KEY: 'tooltip-label-key',
+  TOOLTIP_LABEL_VALUE: 'tooltip-label-value',
+  METRICS_GRAPH_CONTEXT_MENU: 'metrics-graph-context-menu',
+
   // Profile Filters
   PROFILE_FILTERS_CONTAINER: 'profile-filters-container',
   FILTER_TYPE_SELECT: 'filter-type-select',