adjust types

elastic · Sep 18, 2024 · 4e88a54 · 4e88a54
1 parent 5dbeebf
commit 4e88a54
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 23 deletions.
diff --git a/.../apps/synthetics/components/step_details_page/common/network_data/data_formatting.test.ts b/.../apps/synthetics/components/step_details_page/common/network_data/data_formatting.test.ts
@@ -569,7 +569,7 @@ describe('getSeriesAndDomain', () => {
   });
 
   it('handles formatting when mime type is not mapped to a specific mime type bucket', () => {
-    const { series, metadata } = getSeriesAndDomain(
+    const { metadata } = getSeriesAndDomain(
       networkItemsWithUnknownMimeType,
       false,
       mockDateFormatter

diff --git a/...ublic/apps/synthetics/components/step_details_page/common/network_data/data_formatting.ts b/...ublic/apps/synthetics/components/step_details_page/common/network_data/data_formatting.ts
@@ -20,7 +20,8 @@ import {
   Metadata,
   MimeType,
   MimeTypesMap,
-  SidebarItem,
+  WaterfallNetworkItem,
+  WaterfallTooltipItem,
   TIMING_ORDER,
   Timings,
 } from './types';
@@ -305,7 +306,7 @@ const formatMetadata = ({
   requestStart: number;
   dateFormatter: DateFormatter;
   showTooltip: boolean;
-  networkItemTooltipProps?: Array<Record<string, string | number>>;
+  networkItemTooltipProps: WaterfallTooltipItem[];
 }) => {
   const {
     certificates,
@@ -404,7 +405,7 @@ export const getSidebarItems = (
   onlyHighlighted: boolean,
   query: string,
   activeFilters: string[]
-): SidebarItem[] => {
+): WaterfallNetworkItem[] => {
   const queryMatcher = getQueryMatcher(query);
   const filterMatcher = getFilterMatcher(activeFilters);
   const sideBarItems = items.map((item, index) => {

diff --git a/...ics/components/step_details_page/step_waterfall_chart/waterfall/middle_truncated_text.tsx b/...ics/components/step_details_page/step_waterfall_chart/waterfall/middle_truncated_text.tsx
@@ -26,7 +26,6 @@ interface Props {
   index: number;
   highestIndex: number;
   ariaLabel: string;
-  text: string;
   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   setButtonRef?: (ref: HTMLButtonElement | HTMLAnchorElement | null) => void;
   url: string;

diff --git a/...etics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_bar_chart.tsx b/...etics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_bar_chart.tsx
@@ -39,27 +39,29 @@ const getChartHeight = (data: WaterfallData): number => {
 };
 
 const CustomTooltip: CustomChartTooltip = (tooltipInfo) => {
-  const { data, sidebarItems } = useWaterfallContext();
+  const { sidebarItems, metadata } = useWaterfallContext();
   return useMemo(() => {
     const sidebarItem = sidebarItems?.find((item) => item.index === tooltipInfo.header?.value);
-    const relevantItems = data.filter((item) => {
-      return (
-        item.x === tooltipInfo.header?.value && item.config.showTooltip && item.config.tooltipProps
-      );
-    });
-    return relevantItems.length ? (
+    if (!sidebarItem) {
+      return null;
+    }
+    const metadataEntry = metadata?.[sidebarItem.index];
+    const showTooltip =
+      metadataEntry?.showTooltip && metadataEntry?.networkItemTooltipProps.length > 1;
+    return showTooltip ? (
       <TooltipContainer>
         <WaterfallChartTooltip>
           {sidebarItem && (
             <WaterfallTooltipContent
-              text={formatTooltipHeading(sidebarItem.index + 1, sidebarItem.url)}
+              text={formatTooltipHeading(sidebarItem.offsetIndex, sidebarItem.url)}
               url={sidebarItem.url}
+              index={sidebarItem.offsetIndex}
             />
           )}
         </WaterfallChartTooltip>
       </TooltipContainer>
     ) : null;
-  }, [data, sidebarItems, tooltipInfo.header?.value]);
+  }, [sidebarItems, tooltipInfo.header?.value, metadata]);
 };
 
 interface Props {

diff --git a/...nts/step_details_page/step_waterfall_chart/waterfall/waterfall_flyout/use_flyout.test.tsx b/...nts/step_details_page/step_waterfall_chart/waterfall/waterfall_flyout/use_flyout.test.tsx
@@ -25,6 +25,8 @@ describe('useFlyoutHook', () => {
           value: 'text/html',
         },
       ],
+      showTooltip: false,
+      networkItemTooltipProps: [],
     },
   ];
 

diff --git a/...ep_details_page/step_waterfall_chart/waterfall/waterfall_flyout/waterfall_flyout.test.tsx b/...ep_details_page/step_waterfall_chart/waterfall/waterfall_flyout/waterfall_flyout.test.tsx
@@ -29,6 +29,8 @@ describe('WaterfallFlyout', () => {
         value: 'text/html',
       },
     ],
+    showTooltip: false,
+    networkItemTooltipProps: [],
   };
 
   const defaultProps = {

diff --git a/...cs/components/step_details_page/step_waterfall_chart/waterfall/waterfall_sidebar_item.tsx b/...cs/components/step_details_page/step_waterfall_chart/waterfall/waterfall_sidebar_item.tsx
@@ -7,14 +7,14 @@
 
 import React, { RefObject, useMemo, useCallback, useState } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiBadge } from '@elastic/eui';
-import { SidebarItem } from '../../common/network_data/types';
+import { WaterfallNetworkItem } from '../../common/network_data/types';
 import { MiddleTruncatedText } from './middle_truncated_text';
 import { SideBarItemHighlighter } from './styles';
 import { SIDEBAR_FILTER_MATCHES_SCREENREADER_LABEL } from './translations';
 import { OnSidebarClick } from './waterfall_flyout/use_flyout';
 
 interface SidebarItemProps {
-  item: SidebarItem;
+  item: WaterfallNetworkItem;
   renderFilterScreenReaderText?: boolean;
   onClick?: OnSidebarClick;
   highestIndex: number;
@@ -44,13 +44,11 @@ export const WaterfallSidebarItem = React.memo(function WaterfallSidebarItem({
     return is400 || is500 || isSpecific300;
   };
 
-  const text = item.url;
-
   const ariaLabel = `${
     isHighlighted && renderFilterScreenReaderText
       ? `${SIDEBAR_FILTER_MATCHES_SCREENREADER_LABEL} `
       : ''
-  }${text}`;
+  }${url}`;
 
   return (
     <SideBarItemHighlighter
@@ -62,7 +60,6 @@ export const WaterfallSidebarItem = React.memo(function WaterfallSidebarItem({
           <EuiFlexItem grow={false} style={{ minWidth: 0 }}>
             <MiddleTruncatedText
               index={offsetIndex}
-              text={text}
               url={url}
               ariaLabel={ariaLabel}
               onClick={handleSidebarClick}
@@ -76,7 +73,6 @@ export const WaterfallSidebarItem = React.memo(function WaterfallSidebarItem({
           <EuiFlexItem grow={false} style={{ minWidth: 0 }}>
             <MiddleTruncatedText
               index={offsetIndex}
-              text={text}
               url={url}
               ariaLabel={ariaLabel}
               onClick={handleSidebarClick}

diff --git a/...components/step_details_page/step_waterfall_chart/waterfall/waterfall_tooltip_content.tsx b/...components/step_details_page/step_waterfall_chart/waterfall/waterfall_tooltip_content.tsx
@@ -13,7 +13,7 @@ import { useWaterfallContext } from './context/waterfall_context';
 interface Props {
   text: string;
   url: string;
-  index: string;
+  index: number;
 }
 
 const StyledText = euiStyled(EuiText)`
@@ -25,7 +25,7 @@ const StyledHorizontalRule = euiStyled(EuiHorizontalRule)`
 `;
 
 export const WaterfallTooltipContent: React.FC<Props> = ({ text, url, index }) => {
-  const { renderTooltipItem, sidebarItems, metadata } = useWaterfallContext();
+  const { renderTooltipItem, metadata } = useWaterfallContext();
   // the passed index is base 1, so we need to subtract 1 to get the correct index
   const metadataEntry = metadata?.[index - 1];
   const tooltipItems = metadataEntry?.networkItemTooltipProps;
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,6 +25,8 @@ describe('useFlyoutHook', () => { @@
               value: 'text/html',
             },
           ],
+          showTooltip: false,
+          networkItemTooltipProps: [],
         },
       ];
@@ Expand Down @@