[Security Solution] Fix networkTopNFlow search strategy response

x-pack/plugins/security_solution/common/ecs/geo/index.ts

@@ -6,22 +6,15 @@
 
 export interface GeoEcs {
   city_name?: string[];
-
   continent_name?: string[];
-
   country_iso_code?: string[];
-
   country_name?: string[];
-
   location?: Location;
-
   region_iso_code?: string[];
-
   region_name?: string[];
 }
 
 export interface Location {
   lon?: number[];
-
   lat?: number[];
 }

x-pack/plugins/security_solution/public/network/components/embeddables/embedded_map.tsx

@@ -198,15 +198,13 @@ export const EmbeddedMapComponent = ({
     if (embeddable != null) {
       embeddable.updateInput({ query });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [query]);
+  }, [embeddable, query]);
 
   useEffect(() => {
     if (embeddable != null) {
       embeddable.updateInput({ filters });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filters]);
+  }, [embeddable, filters]);
 
   // DateRange updated useEffect
   useEffect(() => {
@@ -217,8 +215,7 @@ export const EmbeddedMapComponent = ({
       };
       embeddable.updateInput({ timeRange });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [startDate, endDate]);
+  }, [embeddable, startDate, endDate]);
 
   return isError ? null : (
     <Embeddable>

x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/map_tool_tip.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -35,6 +35,78 @@ export const MapToolTipComponent = ({
   const [featureGeometry, setFeatureGeometry] = useState<FeatureGeometry | null>(null);
   const [, setLayerName] = useState<string>('');
 
+  const handleCloseTooltip = useCallback(() => {
+    if (closeTooltip != null) {
+      closeTooltip();
+      setFeatureIndex(0);
+    }
+  }, [closeTooltip]);
+
+  const handlePreviousFeature = useCallback(() => {
+    setFeatureIndex(featureIndex + 1);
+    setIsLoadingNextFeature(true);
+  }, [featureIndex]);
+
+  const handleNextFeature = useCallback(() => {
+    setFeatureIndex(featureIndex + 1);
+    setIsLoadingNextFeature(true);
+  }, [featureIndex]);
+
+  const content = useMemo(() => {
+    if (isError) {
+      return (
+        <EuiFlexGroup justifyContent="spaceAround">
+          <EuiFlexItem grow={false}>{i18n.MAP_TOOL_TIP_ERROR}</EuiFlexItem>
+        </EuiFlexGroup>
+      );
+    }
+
+    if (isLoading && !isLoadingNextFeature) {
+      return (
+        <EuiFlexGroup justifyContent="spaceAround">
+          <EuiFlexItem grow={false}>
+            <EuiLoadingSpinner size="m" />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      );
+    }
+
+    return (
+      <div>
+        {featureGeometry != null && featureGeometry.type === 'LineString' ? (
+          <LineToolTipContent
+            contextId={`${features[featureIndex].layerId}-${features[featureIndex].id}-${featureIndex}`}
+            featureProps={featureProps}
+          />
+        ) : (
+          <PointToolTipContent
+            contextId={`${features[featureIndex].layerId}-${features[featureIndex].id}-${featureIndex}`}
+            featureProps={featureProps}
+          />
+        )}
+        {features.length > 1 && (
+          <ToolTipFooter
+            featureIndex={featureIndex}
+            totalFeatures={features.length}
+            previousFeature={handlePreviousFeature}
+            nextFeature={handleNextFeature}
+          />
+        )}
+        {isLoadingNextFeature && <Loader data-test-subj="loading-panel" overlay size="m" />}
+      </div>
+    );
+  }, [
+    featureGeometry,
+    featureIndex,
+    featureProps,
+    features,
+    handleNextFeature,
+    handlePreviousFeature,
+    isError,
+    isLoading,
+    isLoadingNextFeature,
+  ]);
+
   useEffect(() => {
     // Early return if component doesn't yet have props -- result of mounting in portal before actual rendering
     if (
@@ -77,69 +149,17 @@ export const MapToolTipComponent = ({
     };
 
     fetchFeatureProps();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     featureIndex,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    features
-      .map((f) => `${f.id}-${f.layerId}`)
-      .sort()
-      .join(),
+    features,
+    getLayerName,
+    isLoadingNextFeature,
+    loadFeatureGeometry,
+    loadFeatureProperties,
   ]);
 
-  if (isError) {
-    return (
-      <EuiFlexGroup justifyContent="spaceAround">
-        <EuiFlexItem grow={false}>{i18n.MAP_TOOL_TIP_ERROR}</EuiFlexItem>
-      </EuiFlexGroup>
-    );
-  }
-
-  return isLoading && !isLoadingNextFeature ? (
-    <EuiFlexGroup justifyContent="spaceAround">
-      <EuiFlexItem grow={false}>
-        <EuiLoadingSpinner size="m" />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  ) : (
-    <EuiOutsideClickDetector
-      onOutsideClick={() => {
-        if (closeTooltip != null) {
-          closeTooltip();
-          setFeatureIndex(0);
-        }
-      }}
-    >
-      <div>
-        {featureGeometry != null && featureGeometry.type === 'LineString' ? (
-          <LineToolTipContent
-            contextId={`${features[featureIndex].layerId}-${features[featureIndex].id}-${featureIndex}`}
-            featureProps={featureProps}
-          />
-        ) : (
-          <PointToolTipContent
-            contextId={`${features[featureIndex].layerId}-${features[featureIndex].id}-${featureIndex}`}
-            featureProps={featureProps}
-            closeTooltip={closeTooltip}
-          />
-        )}
-        {features.length > 1 && (
-          <ToolTipFooter
-            featureIndex={featureIndex}
-            totalFeatures={features.length}
-            previousFeature={() => {
-              setFeatureIndex(featureIndex - 1);
-              setIsLoadingNextFeature(true);
-            }}
-            nextFeature={() => {
-              setFeatureIndex(featureIndex + 1);
-              setIsLoadingNextFeature(true);
-            }}
-          />
-        )}
-        {isLoadingNextFeature && <Loader data-test-subj="loading-panel" overlay size="m" />}
-      </div>
-    </EuiOutsideClickDetector>
+  return (
+    <EuiOutsideClickDetector onOutsideClick={handleCloseTooltip}>{content}</EuiOutsideClickDetector>
   );
 };
 

x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/point_tool_tip_content.test.tsx

@@ -24,15 +24,9 @@ describe('PointToolTipContent', () => {
   ];
 
   test('renders correctly against snapshot', () => {
-    const closeTooltip = jest.fn();
-
     const wrapper = shallow(
       <TestProviders>
-        <PointToolTipContentComponent
-          contextId={'contextId'}
-          featureProps={mockFeatureProps}
-          closeTooltip={closeTooltip}
-        />
+        <PointToolTipContentComponent contextId={'contextId'} featureProps={mockFeatureProps} />
       </TestProviders>
     );
     expect(wrapper.find('PointToolTipContentComponent')).toMatchSnapshot();

x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/point_tool_tip_content.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { sourceDestinationFieldMappings } from '../map_config';
 import {
   getEmptyTagValue,
@@ -20,36 +20,38 @@ import { ITooltipProperty } from '../../../../../../maps/public/classes/tooltips
 interface PointToolTipContentProps {
   contextId: string;
   featureProps: ITooltipProperty[];
-  closeTooltip?(): void;
 }
 
 export const PointToolTipContentComponent = ({
   contextId,
   featureProps,
-  closeTooltip,
 }: PointToolTipContentProps) => {
-  const featureDescriptionListItems = featureProps.map((featureProp) => {
-    const key = featureProp.getPropertyKey();
-    const value = featureProp.getRawValue() ?? [];
+  const featureDescriptionListItems = useMemo(
+    () =>
+      featureProps.map((featureProp) => {
+        const key = featureProp.getPropertyKey();
+        const value = featureProp.getRawValue() ?? [];
 
-    return {
-      title: sourceDestinationFieldMappings[key],
-      description: (
-        <>
-          {value != null ? (
-            <DefaultFieldRenderer
-              rowItems={Array.isArray(value) ? value : [value]}
-              attrName={key}
-              idPrefix={`map-point-tooltip-${contextId}-${key}-${value}`}
-              render={(item) => getRenderedFieldValue(key, item)}
-            />
-          ) : (
-            getEmptyTagValue()
-          )}
-        </>
-      ),
-    };
-  });
+        return {
+          title: sourceDestinationFieldMappings[key],
+          description: (
+            <>
+              {value != null ? (
+                <DefaultFieldRenderer
+                  rowItems={Array.isArray(value) ? value : [value]}
+                  attrName={key}
+                  idPrefix={`map-point-tooltip-${contextId}-${key}-${value}`}
+                  render={(item) => getRenderedFieldValue(key, item)}
+                />
+              ) : (
+                getEmptyTagValue()
+              )}
+            </>
+          ),
+        };
+      }),
+    [contextId, featureProps]
+  );
 
   return <DescriptionListStyled listItems={featureDescriptionListItems} />;
 };