[7.11] [Uptime] Display networks requests total (#88672) (#89171)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Author: shahzad31

x-pack/plugins/uptime/common/runtime_types/network_events.ts

@@ -41,6 +41,7 @@ export type NetworkEvent = t.TypeOf<typeof NetworkEventType>;
 
 export const SyntheticsNetworkEventsApiResponseType = t.type({
   events: t.array(NetworkEventType),
+  total: t.number,
 });
 
 export type SyntheticsNetworkEventsApiResponse = t.TypeOf<

x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_chart_container.tsx

@@ -59,7 +59,10 @@ export const WaterfallChartContainer: React.FC<Props> = ({ checkGroup, stepIndex
         </EuiFlexGroup>
       )}
       {networkEvents && !networkEvents.loading && networkEvents.events.length > 0 && (
-        <WaterfallChartWrapper data={extractItems(networkEvents.events)} />
+        <WaterfallChartWrapper
+          data={extractItems(networkEvents.events)}
+          total={networkEvents.total}
+        />
       )}
     </>
   );

x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_chart_wrapper.tsx

@@ -48,10 +48,11 @@ export const renderLegendItem: RenderItem<LegendItem> = (item) => {
 };
 
 interface Props {
+  total: number;
   data: NetworkItems;
 }
 
-export const WaterfallChartWrapper: React.FC<Props> = ({ data }) => {
+export const WaterfallChartWrapper: React.FC<Props> = ({ data, total }) => {
   const [networkData] = useState<NetworkItems>(data);
 
   const { series, domain } = useMemo(() => {
@@ -66,6 +67,8 @@ export const WaterfallChartWrapper: React.FC<Props> = ({ data }) => {
 
   return (
     <WaterfallProvider
+      totalNetworkRequests={total}
+      fetchedNetworkRequests={networkData.length}
       data={series}
       sidebarItems={sidebarItems}
       legendItems={legendItems}

x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/network_requests_total.test.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { NetworkRequestsTotal } from './network_requests_total';
+import { render } from '../../../../../lib/helper/rtl_helpers';
+
+describe('NetworkRequestsTotal', () => {
+  it('message in case total is greater than fetched', () => {
+    const { getByText, getByLabelText } = render(
+      <NetworkRequestsTotal fetchedNetworkRequests={1000} totalNetworkRequests={1100} />
+    );
+
+    expect(getByText('First 1000/1100 network requests')).toBeInTheDocument();
+    expect(getByLabelText('Info')).toBeInTheDocument();
+  });
+
+  it('message in case total is equal to fetched requests', () => {
+    const { getByText } = render(
+      <NetworkRequestsTotal fetchedNetworkRequests={500} totalNetworkRequests={500} />
+    );
+
+    expect(getByText('500 network requests')).toBeInTheDocument();
+  });
+});

x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/network_requests_total.tsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiIconTip } from '@elastic/eui';
+import { NetworkRequestsTotalStyle } from './styles';
+
+interface Props {
+  totalNetworkRequests: number;
+  fetchedNetworkRequests: number;
+}
+
+export const NetworkRequestsTotal = ({ totalNetworkRequests, fetchedNetworkRequests }: Props) => {
+  return (
+    <NetworkRequestsTotalStyle size="xs" color="subdued">
+      <strong>
+        {i18n.translate('xpack.uptime.synthetics.waterfall.requestsTotalMessage', {
+          defaultMessage: '{numNetworkRequests} network requests',
+          values: {
+            numNetworkRequests:
+              totalNetworkRequests > fetchedNetworkRequests
+                ? i18n.translate('xpack.uptime.synthetics.waterfall.requestsTotalMessage.first', {
+                    defaultMessage: 'First {count}',
+                    values: { count: `${fetchedNetworkRequests}/${totalNetworkRequests}` },
+                  })
+                : totalNetworkRequests,
+          },
+        })}
+      </strong>
+      {totalNetworkRequests > fetchedNetworkRequests && (
+        <EuiIconTip
+          type={'iInCircle'}
+          content={i18n.translate('xpack.uptime.synthetics.waterfall.requestsTotalMessage.info', {
+            defaultMessage: 'Waterfall view only shows up to 1000 requests',
+          })}
+        />
+      )}
+    </NetworkRequestsTotalStyle>
+  );
+};

x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/styles.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiPanel, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiPanel, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import { rgba } from 'polished';
 import { euiStyled } from '../../../../../../../observability/public';
 import { FIXED_AXIS_HEIGHT } from './constants';
@@ -103,3 +103,8 @@ export const WaterfallChartTooltip = euiStyled.div`
   color: ${(props) => props.theme.eui.euiColorLightestShade};
   padding: ${(props) => props.theme.eui.paddingSizes.s};
 `;
+
+export const NetworkRequestsTotalStyle = euiStyled(EuiText)`
+  line-height: ${FIXED_AXIS_HEIGHT}px;
+  margin-left: ${(props) => props.theme.eui.paddingSizes.m}
+`;

x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_chart.tsx

@@ -37,6 +37,7 @@ import { BAR_HEIGHT, CANVAS_MAX_ITEMS, MAIN_GROW_SIZE, SIDEBAR_GROW_SIZE } from
 import { Sidebar } from './sidebar';
 import { Legend } from './legend';
 import { useBarCharts } from './use_bar_charts';
+import { NetworkRequestsTotal } from './network_requests_total';
 
 const Tooltip = (tooltipInfo: TooltipInfo) => {
   const { data, renderTooltipItem } = useWaterfallContext();
@@ -84,7 +85,13 @@ export const WaterfallChart = ({
   maxHeight = '800px',
   fullHeight = false,
 }: WaterfallChartProps) => {
-  const { data, sidebarItems, legendItems } = useWaterfallContext();
+  const {
+    data,
+    sidebarItems,
+    legendItems,
+    totalNetworkRequests,
+    fetchedNetworkRequests,
+  } = useWaterfallContext();
 
   const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
 
@@ -115,7 +122,12 @@ export const WaterfallChart = ({
           <EuiFlexGroup gutterSize="none" responsive={false}>
             {shouldRenderSidebar && (
               <EuiFlexItem grow={SIDEBAR_GROW_SIZE}>
-                <WaterfallChartFixedTopContainerSidebarCover paddingSize="none" hasShadow={false} />
+                <WaterfallChartFixedTopContainerSidebarCover paddingSize="none" hasShadow={false}>
+                  <NetworkRequestsTotal
+                    totalNetworkRequests={totalNetworkRequests}
+                    fetchedNetworkRequests={fetchedNetworkRequests}
+                  />
+                </WaterfallChartFixedTopContainerSidebarCover>
               </EuiFlexItem>
             )}
             <EuiFlexItem grow={shouldRenderSidebar ? MAIN_GROW_SIZE : true}>

x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/context/waterfall_chart.tsx

@@ -8,6 +8,8 @@ import React, { createContext, useContext, Context } from 'react';
 import { WaterfallData, WaterfallDataEntry } from '../types';
 
 export interface IWaterfallContext {
+  totalNetworkRequests: number;
+  fetchedNetworkRequests: number;
   data: WaterfallData;
   sidebarItems?: unknown[];
   legendItems?: unknown[];
@@ -20,6 +22,8 @@ export interface IWaterfallContext {
 export const WaterfallContext = createContext<Partial<IWaterfallContext>>({});
 
 interface ProviderProps {
+  totalNetworkRequests: number;
+  fetchedNetworkRequests: number;
   data: IWaterfallContext['data'];
   sidebarItems?: IWaterfallContext['sidebarItems'];
   legendItems?: IWaterfallContext['legendItems'];
@@ -32,9 +36,20 @@ export const WaterfallProvider: React.FC<ProviderProps> = ({
   sidebarItems,
   legendItems,
   renderTooltipItem,
+  totalNetworkRequests,
+  fetchedNetworkRequests,
 }) => {
   return (
-    <WaterfallContext.Provider value={{ data, sidebarItems, legendItems, renderTooltipItem }}>
+    <WaterfallContext.Provider
+      value={{
+        data,
+        sidebarItems,
+        legendItems,
+        renderTooltipItem,
+        totalNetworkRequests,
+        fetchedNetworkRequests,
+      }}
+    >
       {children}
     </WaterfallContext.Provider>
   );

x-pack/plugins/uptime/public/state/reducers/network_events.ts

@@ -18,6 +18,7 @@ export interface NetworkEventsState {
   [checkGroup: string]: {
     [stepIndex: number]: {
       events: NetworkEvent[];
+      total: number;
       loading: boolean;
       error?: Error;
     };
@@ -45,24 +46,27 @@ export const networkEventsReducer = handleActions<NetworkEventsState, Payload>(
                   ...state[checkGroup][stepIndex],
                   loading: true,
                   events: [],
+                  total: 0,
                 }
               : {
                   loading: true,
                   events: [],
+                  total: 0,
                 },
           }
         : {
             [stepIndex]: {
               loading: true,
               events: [],
+              total: 0,
             },
           },
     }),
 
     [String(getNetworkEventsSuccess)]: (
       state: NetworkEventsState,
       {
-        payload: { events, checkGroup, stepIndex },
+        payload: { events, total, checkGroup, stepIndex },
       }: Action<SyntheticsNetworkEventsApiResponse & FetchNetworkEventsParams>
     ) => {
       return {
@@ -74,16 +78,19 @@ export const networkEventsReducer = handleActions<NetworkEventsState, Payload>(
                     ...state[checkGroup][stepIndex],
                     loading: false,
                     events,
+                    total,
                   }
                 : {
                     loading: false,
                     events,
+                    total,
                   },
             }
           : {
               [stepIndex]: {
                 loading: false,
                 events,
+                total,
               },
             },
       };
@@ -101,18 +108,21 @@ export const networkEventsReducer = handleActions<NetworkEventsState, Payload>(
                   ...state[checkGroup][stepIndex],
                   loading: false,
                   events: [],
+                  total: 0,
                   error,
                 }
               : {
                   loading: false,
                   events: [],
+                  total: 0,
                   error,
                 },
           }
         : {
             [stepIndex]: {
               loading: false,
               events: [],
+              total: 0,
               error,
             },
           },

x-pack/plugins/uptime/server/lib/requests/get_network_events.test.ts

@@ -158,6 +158,7 @@ describe('getNetworkEvents', () => {
     esClient.search.mockResolvedValueOnce({
       body: {
         hits: {
+          total: { value: 1 },
           hits: mockHits,
         },
       },
@@ -196,6 +197,7 @@ describe('getNetworkEvents', () => {
                 },
               },
               "size": 1000,
+              "track_total_hits": true,
             },
             "index": "heartbeat-7*",
           },
@@ -210,6 +212,7 @@ describe('getNetworkEvents', () => {
     esClient.search.mockResolvedValueOnce({
       body: {
         hits: {
+          total: { value: 1 },
           hits: mockHits,
         },
       },
@@ -222,30 +225,33 @@ describe('getNetworkEvents', () => {
     });
 
     expect(result).toMatchInlineSnapshot(`
-      Array [
-        Object {
-          "loadEndTime": 3287298.251,
-          "method": "GET",
-          "mimeType": "image/gif",
-          "requestSentTime": 3287154.973,
-          "requestStartTime": 3287155.502,
-          "status": 200,
-          "timestamp": "2020-12-14T10:46:39.183Z",
-          "timings": Object {
-            "blocked": 0.21400000014182297,
-            "connect": -1,
-            "dns": -1,
-            "proxy": -1,
-            "queueing": 0.5289999999149586,
-            "receive": 0.5340000002433953,
-            "send": 0.18799999998009298,
-            "ssl": -1,
-            "total": 143.27800000000934,
-            "wait": 141.81299999972907,
+      Object {
+        "events": Array [
+          Object {
+            "loadEndTime": 3287298.251,
+            "method": "GET",
+            "mimeType": "image/gif",
+            "requestSentTime": 3287154.973,
+            "requestStartTime": 3287155.502,
+            "status": 200,
+            "timestamp": "2020-12-14T10:46:39.183Z",
+            "timings": Object {
+              "blocked": 0.21400000014182297,
+              "connect": -1,
+              "dns": -1,
+              "proxy": -1,
+              "queueing": 0.5289999999149586,
+              "receive": 0.5340000002433953,
+              "send": 0.18799999998009298,
+              "ssl": -1,
+              "total": 143.27800000000934,
+              "wait": 141.81299999972907,
+            },
+            "url": "www.test.com",
           },
-          "url": "www.test.com",
-        },
-      ]
+        ],
+        "total": 1,
+      }
     `);
   });
 });