[SIEM] [Maps] Fixes Network Map empty tooltip (#66828) (#66955)

## Summary

Resolves #63474, and expands `ITooltipProperty`'s `rawValue` type to include `string[]` as mentioned [here](#61264 (comment)).

![image](https://user-images.githubusercontent.com/2946766/82100568-2c0e1480-96c7-11ea-958e-5b1c6b6a3db9.png)

### Checklist

Delete any items that are not applicable to this PR.

- [X] [Unit or functional tests](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility) were updated or added to match the most common scenarios

# Conflicts:
#	x-pack/plugins/maps/public/classes/fields/es_agg_field.ts
#	x-pack/plugins/maps/public/classes/fields/es_doc_field.ts
#	x-pack/plugins/maps/public/classes/fields/field.ts
#	x-pack/plugins/maps/public/classes/tooltips/es_tooltip_property.ts
#	x-pack/plugins/maps/public/classes/tooltips/join_tooltip_property.ts
#	x-pack/plugins/maps/public/classes/tooltips/tooltip_property.ts
#	x-pack/plugins/maps/public/index.ts
#	x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/line_tool_tip_content.tsx
#	x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/map_tool_tip.tsx
#	x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/point_tool_tip_content.test.tsx
#	x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/point_tool_tip_content.tsx
#	x-pack/plugins/siem/public/network/components/embeddables/types.ts

x-pack/legacy/plugins/maps/public/index.ts

@@ -25,3 +25,5 @@ import { MapsPlugin } from './plugin';
 export const plugin = (initializerContext: PluginInitializerContext) => {
  return new MapsPlugin();
 };
+
+export { ITooltipProperty } from './layers/tooltips/tooltip_property';

x-pack/legacy/plugins/maps/public/layers/fields/es_agg_field.ts

@@ -87,7 +87,7 @@ export class ESAggField implements IESAggField {
  return this._esDocField ? this._esDocField.getName() : '';
  }
 
- async createTooltipProperty(value: string | undefined): Promise<ITooltipProperty> {
+ async createTooltipProperty(value: string | string[] | undefined): Promise<ITooltipProperty> {
  const indexPattern = await this._source.getIndexPattern();
  const tooltipProperty = new TooltipProperty(this.getName(), await this.getLabel(), value);
  return new ESAggTooltipProperty(tooltipProperty, indexPattern, this);

x-pack/legacy/plugins/maps/public/layers/fields/es_doc_field.ts

@@ -46,7 +46,7 @@ export class ESDocField extends AbstractField implements IField {
  : indexPatternField;
  }
 
- async createTooltipProperty(value: string | undefined): Promise<ITooltipProperty> {
+ async createTooltipProperty(value: string | string[] | undefined): Promise<ITooltipProperty> {
  const indexPattern = await this._source.getIndexPattern();
  const tooltipProperty = new TooltipProperty(this.getName(), await this.getLabel(), value);
  return new ESTooltipProperty(tooltipProperty, indexPattern, this as IField);

x-pack/legacy/plugins/maps/public/layers/fields/field.ts

@@ -14,7 +14,7 @@ export interface IField {
  canValueBeFormatted(): boolean;
  getLabel(): Promise<string>;
  getDataType(): Promise<string>;
- createTooltipProperty(value: string | undefined): Promise<ITooltipProperty>;
+ createTooltipProperty(value: string | string[] | undefined): Promise<ITooltipProperty>;
  getSource(): IVectorSource;
  getOrigin(): FIELD_ORIGIN;
  isValid(): boolean;
@@ -59,7 +59,7 @@ export class AbstractField implements IField {
  return this._fieldName;
  }
 
- async createTooltipProperty(value: string | undefined): Promise<ITooltipProperty> {
+ async createTooltipProperty(value: string | string[] | undefined): Promise<ITooltipProperty> {
  const label = await this.getLabel();
  return new TooltipProperty(this.getName(), label, value);
  }

x-pack/legacy/plugins/maps/public/layers/fields/top_term_percentage_field.ts

@@ -48,7 +48,7 @@ export class TopTermPercentageField implements IESAggField {
  return 'number';
  }
 
- async createTooltipProperty(value: string | undefined): Promise<ITooltipProperty> {
+ async createTooltipProperty(value: string | string[] | undefined): Promise<ITooltipProperty> {
  return new TooltipProperty(this.getName(), await this.getLabel(), value);
  }
 

x-pack/legacy/plugins/maps/public/layers/tooltips/es_tooltip_property.ts

@@ -29,7 +29,7 @@ export class ESTooltipProperty implements ITooltipProperty {
  return this._tooltipProperty.getPropertyName();
  }
 
- getRawValue(): string | undefined {
+ getRawValue(): string | string[] | undefined {
  return this._tooltipProperty.getRawValue();
  }
 
@@ -44,7 +44,12 @@ export class ESTooltipProperty implements ITooltipProperty {
 
  const indexPatternField = this._getIndexPatternField();
  if (!indexPatternField || !this._field.canValueBeFormatted()) {
- return _.escape(this.getRawValue());
+ const rawValue = this.getRawValue();
+ if (Array.isArray(rawValue)) {
+ return _.escape(rawValue.join());
+ } else {
+ return _.escape(rawValue);
+ }
  }
 
  const htmlConverter = indexPatternField.format.getConverterFor('html');

x-pack/legacy/plugins/maps/public/layers/tooltips/join_tooltip_property.ts

@@ -29,7 +29,7 @@ export class JoinTooltipProperty implements ITooltipProperty {
  return this._tooltipProperty.getPropertyName();
  }
 
- getRawValue(): string | undefined {
+ getRawValue(): string | string[] | undefined {
  return this._tooltipProperty.getRawValue();
  }
 

x-pack/legacy/plugins/maps/public/layers/tooltips/tooltip_property.ts

@@ -11,17 +11,17 @@ export interface ITooltipProperty {
  getPropertyKey(): string;
  getPropertyName(): string;
  getHtmlDisplayValue(): string;
- getRawValue(): string | undefined;
+ getRawValue(): string | string[] | undefined;
  isFilterable(): boolean;
  getESFilters(): Promise<PhraseFilter[]>;
 }
 
 export class TooltipProperty implements ITooltipProperty {
  private readonly _propertyKey: string;
  private readonly _propertyName: string;
- private readonly _rawValue: string | undefined;
+ private readonly _rawValue: string | string[] | undefined;
 
- constructor(propertyKey: string, propertyName: string, rawValue: string | undefined) {
+ constructor(propertyKey: string, propertyName: string, rawValue: string | string[] | undefined) {
  this._propertyKey = propertyKey;
  this._propertyName = propertyName;
  this._rawValue = rawValue;
@@ -36,10 +36,10 @@ export class TooltipProperty implements ITooltipProperty {
  }
 
  getHtmlDisplayValue(): string {
- return _.escape(this._rawValue);
+ return _.escape(Array.isArray(this._rawValue) ? this._rawValue.join() : this._rawValue);
  }
 
- getRawValue(): string | undefined {
+ getRawValue(): string | string[] | undefined {
  return this._rawValue;
  }
 

x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/line_tool_tip_content.test.tsx

@@ -7,35 +7,26 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 import { LineToolTipContentComponent } from './line_tool_tip_content';
-import { FeatureProperty } from '../types';
 import {
  SUM_OF_CLIENT_BYTES,
  SUM_OF_DESTINATION_BYTES,
  SUM_OF_SERVER_BYTES,
  SUM_OF_SOURCE_BYTES,
 } from '../map_config';
+import {
+ ITooltipProperty,
+ TooltipProperty,
+} from '../../../../../maps/public/layers/tooltips/tooltip_property';
 
 describe('LineToolTipContent', () => {
- const mockFeatureProps: FeatureProperty[] = [
- {
- _propertyKey: SUM_OF_DESTINATION_BYTES,
- _rawValue: 'testPropValue',
- },
- {
- _propertyKey: SUM_OF_SOURCE_BYTES,
- _rawValue: 'testPropValue',
- },
+ const mockFeatureProps: ITooltipProperty[] = [
+ new TooltipProperty(SUM_OF_DESTINATION_BYTES, SUM_OF_DESTINATION_BYTES, 'testPropValue'),
+ new TooltipProperty(SUM_OF_SOURCE_BYTES, SUM_OF_SOURCE_BYTES, 'testPropValue'),
  ];
 
- const mockClientServerFeatureProps: FeatureProperty[] = [
- {
- _propertyKey: SUM_OF_SERVER_BYTES,
- _rawValue: 'testPropValue',
- },
- {
- _propertyKey: SUM_OF_CLIENT_BYTES,
- _rawValue: 'testPropValue',
- },
+ const mockClientServerFeatureProps: ITooltipProperty[] = [
+ new TooltipProperty(SUM_OF_SERVER_BYTES, SUM_OF_SERVER_BYTES, 'testPropValue'),
+ new TooltipProperty(SUM_OF_CLIENT_BYTES, SUM_OF_CLIENT_BYTES, 'testPropValue'),
  ];
 
  test('renders correctly against snapshot', () => {

x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/line_tool_tip_content.tsx

@@ -14,8 +14,9 @@ import {
  SUM_OF_SERVER_BYTES,
  SUM_OF_SOURCE_BYTES,
 } from '../map_config';
-import { FeatureProperty } from '../types';
+
 import * as i18n from '../translations';
+import { ITooltipProperty } from '../../../../../maps/public';
 
 const FlowBadge = styled(EuiBadge)`
  height: 45px;
@@ -28,20 +29,22 @@ const EuiFlexGroupStyled = styled(EuiFlexGroup)`
 
 interface LineToolTipContentProps {
  contextId: string;
- featureProps: FeatureProperty[];
+ featureProps: ITooltipProperty[];
 }
 
 export const LineToolTipContentComponent = ({
  contextId,
  featureProps,
 }: LineToolTipContentProps) => {
- const lineProps = featureProps.reduce<Record<string, string[]>>(
- (acc, f) => ({
+ const lineProps = featureProps.reduce<Record<string, string[]>>((acc, f) => {
+ const rawValue = f.getRawValue() ?? [];
+ return {
  ...acc,
- ...{ [f._propertyKey]: Array.isArray(f._rawValue) ? f._rawValue : [f._rawValue] },
- }),
- {}
- );
+ ...{
+ [f.getPropertyKey()]: Array.isArray(rawValue) ? rawValue : [rawValue],
+ },
+ };
+ }, {});
 
  const isSrcDest = Object.keys(lineProps).includes(SUM_OF_SOURCE_BYTES);
 

x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/map_tool_tip.tsx

@@ -11,12 +11,13 @@ import {
  EuiLoadingSpinner,
  EuiOutsideClickDetector,
 } from '@elastic/eui';
-import { FeatureGeometry, FeatureProperty, MapToolTipProps } from '../types';
+import { FeatureGeometry, MapToolTipProps } from '../types';
 import { ToolTipFooter } from './tooltip_footer';
 import { LineToolTipContent } from './line_tool_tip_content';
 import { PointToolTipContent } from './point_tool_tip_content';
 import { Loader } from '../../loader';
 import * as i18n from '../translations';
+import { ITooltipProperty } from '../../../../../maps/public';
 
 export const MapToolTipComponent = ({
  addFilters,
@@ -31,7 +32,7 @@ export const MapToolTipComponent = ({
  const [isLoadingNextFeature, setIsLoadingNextFeature] = useState<boolean>(false);
  const [isError, setIsError] = useState<boolean>(false);
  const [featureIndex, setFeatureIndex] = useState<number>(0);
- const [featureProps, setFeatureProps] = useState<FeatureProperty[]>([]);
+ const [featureProps, setFeatureProps] = useState<ITooltipProperty[]>([]);
  const [featureGeometry, setFeatureGeometry] = useState<FeatureGeometry | null>(null);
  const [, setLayerName] = useState<string>('');
 

x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/point_tool_tip_content.test.tsx

@@ -6,29 +6,26 @@
 
 import { shallow } from 'enzyme';
 import React from 'react';
-import { FeatureProperty } from '../types';
 import { getRenderedFieldValue, PointToolTipContentComponent } from './point_tool_tip_content';
 import { TestProviders } from '../../../mock';
 import { getEmptyStringTag } from '../../empty_value';
 import { HostDetailsLink, IPDetailsLink } from '../../links';
 import { useMountAppended } from '../../../utils/use_mount_appended';
 import { FlowTarget } from '../../../graphql/types';
+import {
+ ITooltipProperty,
+ TooltipProperty,
+} from '../../../../../maps/public/layers/tooltips/tooltip_property';
 
 describe('PointToolTipContent', () => {
  const mount = useMountAppended();
 
- const mockFeatureProps: FeatureProperty[] = [
- {
- _propertyKey: 'host.name',
- _rawValue: 'testPropValue',
- },
+ const mockFeatureProps: ITooltipProperty[] = [
+ new TooltipProperty('host.name', 'host.name', 'testPropValue'),
  ];
 
- const mockFeaturePropsArrayValue: FeatureProperty[] = [
- {
- _propertyKey: 'host.name',
- _rawValue: ['testPropValue1', 'testPropValue2'],
- },
+ const mockFeaturePropsArrayValue: ITooltipProperty[] = [
+ new TooltipProperty('host.name', 'host.name', ['testPropValue1', 'testPropValue2']),
  ];
 
  test('renders correctly against snapshot', () => {

x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/point_tool_tip_content.tsx

@@ -12,14 +12,14 @@ import {
 } from '../../page/add_filter_to_global_search_bar';
 import { getEmptyTagValue, getOrEmptyTagFromValue } from '../../empty_value';
 import { DescriptionListStyled } from '../../page';
-import { FeatureProperty } from '../types';
 import { HostDetailsLink, IPDetailsLink } from '../../links';
 import { DefaultFieldRenderer } from '../../field_renderers/field_renderers';
 import { FlowTarget } from '../../../graphql/types';
+import { ITooltipProperty } from '../../../../../maps/public';
 
 interface PointToolTipContentProps {
  contextId: string;
- featureProps: FeatureProperty[];
+ featureProps: ITooltipProperty[];
  closeTooltip?(): void;
 }
 
@@ -28,8 +28,11 @@ export const PointToolTipContentComponent = ({
  featureProps,
  closeTooltip,
 }: PointToolTipContentProps) => {
- const featureDescriptionListItems = featureProps.map(
- ({ _propertyKey: key, _rawValue: value }) => ({
+ const featureDescriptionListItems = featureProps.map(featureProp => {
+ const key = featureProp.getPropertyKey();
+ const value = featureProp.getRawValue() ?? [];
+
+ return {
  title: sourceDestinationFieldMappings[key],
  description: (
  <AddFilterToGlobalSearchBar
@@ -49,8 +52,8 @@ export const PointToolTipContentComponent = ({
  )}
  </AddFilterToGlobalSearchBar>
  ),
- })
- );
+ };
+ });
 
  return <DescriptionListStyled listItems={featureDescriptionListItems} />;
 };

x-pack/legacy/plugins/siem/public/components/embeddables/types.ts

@@ -12,6 +12,7 @@ import {
 } from '../../../../../../../src/legacy/core_plugins/embeddable_api/public/np_ready/public';
 import { inputsModel } from '../../store/inputs';
 import { Query, Filter } from '../../../../../../../src/plugins/data/public';
+import { ITooltipProperty } from '../../../../maps/public';
 
 export interface MapEmbeddableInput extends EmbeddableInput {
  filters: Filter[];
@@ -63,11 +64,6 @@ export interface LoadFeatureProps {
  featureId: number;
 }
 
-export interface FeatureProperty {
- _propertyKey: string;
- _rawValue: string | string[];
-}
-
 export interface FeatureGeometry {
  coordinates: [number];
  type: string;
@@ -79,7 +75,7 @@ export interface RenderTooltipContentParams {
  features: MapFeature[];
  isLocked: boolean;
  getLayerName(layerId: string): Promise<string>;
- loadFeatureProperties({ layerId, featureId }: LoadFeatureProps): Promise<FeatureProperty[]>;
+ loadFeatureProperties({ layerId, featureId }: LoadFeatureProps): Promise<ITooltipProperty[]>;
  loadFeatureGeometry({ layerId, featureId }: LoadFeatureProps): FeatureGeometry;
 }