From eb533c82116efe458bd9bc2ae9eb15ea1d363473 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Tue, 10 Mar 2020 07:33:20 -0600 Subject: [PATCH] [Maps] convert tooltip classes to typescript (#59589) * getting started * fix ts lint errors * TS es_tooltip_property * convert ESAggTooltipProperty to TS * final clean up * ts lint cleanup * review feedback * remove unused import Co-authored-by: Elastic Machine --- .../maps/public/layers/fields/es_agg_field.ts | 15 ++-- .../maps/public/layers/fields/es_doc_field.js | 4 +- .../maps/public/layers/fields/field.ts | 4 +- .../fields/top_term_percentage_field.ts | 4 +- .../plugins/maps/public/layers/joins/join.ts | 11 +++ .../public/layers/sources/es_term_source.d.ts | 12 +++ .../tooltips/es_agg_tooltip_property.ts | 12 +++ .../tooltips/es_aggmetric_tooltip_property.js | 40 ---------- .../layers/tooltips/es_tooltip_property.js | 49 ------------ .../layers/tooltips/es_tooltip_property.ts | 75 +++++++++++++++++++ ...p_property.js => join_tooltip_property.ts} | 27 ++++--- .../layers/tooltips/tooltip_property.js | 39 ---------- .../layers/tooltips/tooltip_property.ts | 53 +++++++++++++ 13 files changed, 194 insertions(+), 151 deletions(-) create mode 100644 x-pack/legacy/plugins/maps/public/layers/joins/join.ts create mode 100644 x-pack/legacy/plugins/maps/public/layers/sources/es_term_source.d.ts create mode 100644 x-pack/legacy/plugins/maps/public/layers/tooltips/es_agg_tooltip_property.ts delete mode 100644 x-pack/legacy/plugins/maps/public/layers/tooltips/es_aggmetric_tooltip_property.js delete mode 100644 x-pack/legacy/plugins/maps/public/layers/tooltips/es_tooltip_property.js create mode 100644 x-pack/legacy/plugins/maps/public/layers/tooltips/es_tooltip_property.ts rename x-pack/legacy/plugins/maps/public/layers/tooltips/{join_tooltip_property.js => join_tooltip_property.ts} (63%) delete mode 100644 x-pack/legacy/plugins/maps/public/layers/tooltips/tooltip_property.js create mode 100644 x-pack/legacy/plugins/maps/public/layers/tooltips/tooltip_property.ts diff --git a/x-pack/legacy/plugins/maps/public/layers/fields/es_agg_field.ts b/x-pack/legacy/plugins/maps/public/layers/fields/es_agg_field.ts index 9f08200442fea4..5aa214772259a2 100644 --- a/x-pack/legacy/plugins/maps/public/layers/fields/es_agg_field.ts +++ b/x-pack/legacy/plugins/maps/public/layers/fields/es_agg_field.ts @@ -13,10 +13,10 @@ import { IVectorSource } from '../sources/vector_source'; import { ESDocField } from './es_doc_field'; import { AGG_TYPE, FIELD_ORIGIN } from '../../../common/constants'; import { isMetricCountable } from '../util/is_metric_countable'; -// @ts-ignore -import { ESAggMetricTooltipProperty } from '../tooltips/es_aggmetric_tooltip_property'; import { getField, addFieldToDSL } from '../util/es_agg_utils'; import { TopTermPercentageField } from './top_term_percentage_field'; +import { ITooltipProperty, TooltipProperty } from '../tooltips/tooltip_property'; +import { ESAggTooltipProperty } from '../tooltips/es_agg_tooltip_property'; export interface IESAggField extends IField { getValueAggDsl(indexPattern: IndexPattern): unknown | null; @@ -92,15 +92,10 @@ export class ESAggField implements IESAggField { return this._esDocField ? this._esDocField.getName() : ''; } - async createTooltipProperty(value: number | string): Promise { + async createTooltipProperty(value: string | undefined): Promise { const indexPattern = await this._source.getIndexPattern(); - return new ESAggMetricTooltipProperty( - this.getName(), - await this.getLabel(), - value, - indexPattern, - this - ); + const tooltipProperty = new TooltipProperty(this.getName(), await this.getLabel(), value); + return new ESAggTooltipProperty(tooltipProperty, indexPattern, this); } getValueAggDsl(indexPattern: IndexPattern): unknown | null { diff --git a/x-pack/legacy/plugins/maps/public/layers/fields/es_doc_field.js b/x-pack/legacy/plugins/maps/public/layers/fields/es_doc_field.js index ea7641ed5e8dd6..4bd33a8a769f8c 100644 --- a/x-pack/legacy/plugins/maps/public/layers/fields/es_doc_field.js +++ b/x-pack/legacy/plugins/maps/public/layers/fields/es_doc_field.js @@ -6,6 +6,7 @@ import { AbstractField } from './field'; import { ESTooltipProperty } from '../tooltips/es_tooltip_property'; +import { TooltipProperty } from '../tooltips/tooltip_property'; import { COLOR_PALETTE_MAX_SIZE } from '../../../common/constants'; import { indexPatterns } from '../../../../../../../src/plugins/data/public'; @@ -20,7 +21,8 @@ export class ESDocField extends AbstractField { async createTooltipProperty(value) { const indexPattern = await this._source.getIndexPattern(); - return new ESTooltipProperty(this.getName(), this.getName(), value, indexPattern); + const tooltipProperty = new TooltipProperty(this.getName(), this.getName(), value); + return new ESTooltipProperty(tooltipProperty, indexPattern, this); } async getDataType() { diff --git a/x-pack/legacy/plugins/maps/public/layers/fields/field.ts b/x-pack/legacy/plugins/maps/public/layers/fields/field.ts index f7c27fec1c6c7e..2c665dd9a0b73a 100644 --- a/x-pack/legacy/plugins/maps/public/layers/fields/field.ts +++ b/x-pack/legacy/plugins/maps/public/layers/fields/field.ts @@ -6,6 +6,7 @@ import { FIELD_ORIGIN } from '../../../common/constants'; import { IVectorSource } from '../sources/vector_source'; +import { ITooltipProperty } from '../tooltips/tooltip_property'; export interface IField { getName(): string; @@ -13,6 +14,7 @@ export interface IField { canValueBeFormatted(): boolean; getLabel(): Promise; getDataType(): Promise; + createTooltipProperty(value: string | undefined): Promise; getSource(): IVectorSource; getOrigin(): FIELD_ORIGIN; isValid(): boolean; @@ -65,7 +67,7 @@ export class AbstractField implements IField { return this._fieldName; } - async createTooltipProperty(): Promise { + async createTooltipProperty(value: string | undefined): Promise { throw new Error('must implement Field#createTooltipProperty'); } diff --git a/x-pack/legacy/plugins/maps/public/layers/fields/top_term_percentage_field.ts b/x-pack/legacy/plugins/maps/public/layers/fields/top_term_percentage_field.ts index cadf325652370c..bdc01f3323a9c9 100644 --- a/x-pack/legacy/plugins/maps/public/layers/fields/top_term_percentage_field.ts +++ b/x-pack/legacy/plugins/maps/public/layers/fields/top_term_percentage_field.ts @@ -7,7 +7,7 @@ import { IESAggField } from './es_agg_field'; import { IVectorSource } from '../sources/vector_source'; // @ts-ignore -import { TooltipProperty } from '../tooltips/tooltip_property'; +import { ITooltipProperty, TooltipProperty } from '../tooltips/tooltip_property'; import { TOP_TERM_PERCENTAGE_SUFFIX } from '../../../common/constants'; import { FIELD_ORIGIN } from '../../../common/constants'; @@ -48,7 +48,7 @@ export class TopTermPercentageField implements IESAggField { return 'number'; } - async createTooltipProperty(value: unknown): Promise { + async createTooltipProperty(value: string | undefined): Promise { return new TooltipProperty(this.getName(), await this.getLabel(), value); } diff --git a/x-pack/legacy/plugins/maps/public/layers/joins/join.ts b/x-pack/legacy/plugins/maps/public/layers/joins/join.ts new file mode 100644 index 00000000000000..7d402dc777fdcf --- /dev/null +++ b/x-pack/legacy/plugins/maps/public/layers/joins/join.ts @@ -0,0 +1,11 @@ +/* + * 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 { IESTermSource } from '../sources/es_term_source'; + +export interface IJoin { + getRightJoinSource(): IESTermSource; +} diff --git a/x-pack/legacy/plugins/maps/public/layers/sources/es_term_source.d.ts b/x-pack/legacy/plugins/maps/public/layers/sources/es_term_source.d.ts new file mode 100644 index 00000000000000..44cdc851b4fc70 --- /dev/null +++ b/x-pack/legacy/plugins/maps/public/layers/sources/es_term_source.d.ts @@ -0,0 +1,12 @@ +/* + * 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 { IField } from '../fields/field'; +import { IESAggSource } from './es_agg_source'; + +export interface IESTermSource extends IESAggSource { + getTermField(): IField; +} diff --git a/x-pack/legacy/plugins/maps/public/layers/tooltips/es_agg_tooltip_property.ts b/x-pack/legacy/plugins/maps/public/layers/tooltips/es_agg_tooltip_property.ts new file mode 100644 index 00000000000000..24011c51ddbaad --- /dev/null +++ b/x-pack/legacy/plugins/maps/public/layers/tooltips/es_agg_tooltip_property.ts @@ -0,0 +1,12 @@ +/* + * 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 { ESTooltipProperty } from './es_tooltip_property'; + +export class ESAggTooltipProperty extends ESTooltipProperty { + isFilterable(): boolean { + return false; + } +} diff --git a/x-pack/legacy/plugins/maps/public/layers/tooltips/es_aggmetric_tooltip_property.js b/x-pack/legacy/plugins/maps/public/layers/tooltips/es_aggmetric_tooltip_property.js deleted file mode 100644 index ea000a78331eb7..00000000000000 --- a/x-pack/legacy/plugins/maps/public/layers/tooltips/es_aggmetric_tooltip_property.js +++ /dev/null @@ -1,40 +0,0 @@ -/* - * 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 { ESTooltipProperty } from './es_tooltip_property'; -import { AGG_TYPE } from '../../../common/constants'; - -export class ESAggMetricTooltipProperty extends ESTooltipProperty { - constructor(propertyKey, propertyName, rawValue, indexPattern, metricField) { - super(propertyKey, propertyName, rawValue, indexPattern); - this._metricField = metricField; - } - - isFilterable() { - return false; - } - - getHtmlDisplayValue() { - if (typeof this._rawValue === 'undefined') { - return '-'; - } - if ( - this._metricField.getAggType() === AGG_TYPE.COUNT || - this._metricField.getAggType() === AGG_TYPE.UNIQUE_COUNT - ) { - return this._rawValue; - } - const indexPatternField = this._indexPattern.fields.getByName(this._metricField.getRootName()); - if (!indexPatternField) { - return this._rawValue; - } - const htmlConverter = indexPatternField.format.getConverterFor('html'); - - return htmlConverter - ? htmlConverter(this._rawValue) - : indexPatternField.format.convert(this._rawValue); - } -} diff --git a/x-pack/legacy/plugins/maps/public/layers/tooltips/es_tooltip_property.js b/x-pack/legacy/plugins/maps/public/layers/tooltips/es_tooltip_property.js deleted file mode 100644 index f66960263c31d6..00000000000000 --- a/x-pack/legacy/plugins/maps/public/layers/tooltips/es_tooltip_property.js +++ /dev/null @@ -1,49 +0,0 @@ -/* - * 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 { TooltipProperty } from './tooltip_property'; -import _ from 'lodash'; -import { esFilters } from '../../../../../../../src/plugins/data/public'; -export class ESTooltipProperty extends TooltipProperty { - constructor(propertyKey, propertyName, rawValue, indexPattern) { - super(propertyKey, propertyName, rawValue); - this._indexPattern = indexPattern; - } - - getHtmlDisplayValue() { - if (typeof this._rawValue === 'undefined') { - return '-'; - } - - const field = this._indexPattern.fields.getByName(this._propertyName); - if (!field) { - return _.escape(this._rawValue); - } - const htmlConverter = field.format.getConverterFor('html'); - return htmlConverter ? htmlConverter(this._rawValue) : field.format.convert(this._rawValue); - } - - isFilterable() { - const field = this._indexPattern.fields.getByName(this._propertyName); - return ( - field && - (field.type === 'string' || - field.type === 'date' || - field.type === 'ip' || - field.type === 'number') - ); - } - - async getESFilters() { - return [ - esFilters.buildPhraseFilter( - this._indexPattern.fields.getByName(this._propertyName), - this._rawValue, - this._indexPattern - ), - ]; - } -} diff --git a/x-pack/legacy/plugins/maps/public/layers/tooltips/es_tooltip_property.ts b/x-pack/legacy/plugins/maps/public/layers/tooltips/es_tooltip_property.ts new file mode 100644 index 00000000000000..8fd7e173435ceb --- /dev/null +++ b/x-pack/legacy/plugins/maps/public/layers/tooltips/es_tooltip_property.ts @@ -0,0 +1,75 @@ +/* + * 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 _ from 'lodash'; +import { ITooltipProperty } from './tooltip_property'; +import { IField } from '../fields/field'; +import { esFilters, IFieldType, IndexPattern } from '../../../../../../../src/plugins/data/public'; +import { PhraseFilter } from '../../../../../../../src/plugins/data/public'; + +export class ESTooltipProperty implements ITooltipProperty { + private readonly _tooltipProperty: ITooltipProperty; + private readonly _indexPattern: IndexPattern; + private readonly _field: IField; + + constructor(tooltipProperty: ITooltipProperty, indexPattern: IndexPattern, field: IField) { + this._tooltipProperty = tooltipProperty; + this._indexPattern = indexPattern; + this._field = field; + } + + getPropertyKey(): string { + return this._tooltipProperty.getPropertyKey(); + } + + getPropertyName(): string { + return this._tooltipProperty.getPropertyName(); + } + + getRawValue(): string | undefined { + return this._tooltipProperty.getRawValue(); + } + + _getIndexPatternField(): IFieldType | undefined { + return this._indexPattern.fields.getByName(this._field.getRootName()); + } + + getHtmlDisplayValue(): string { + if (typeof this.getRawValue() === 'undefined') { + return '-'; + } + + const indexPatternField = this._getIndexPatternField(); + if (!indexPatternField || !this._field.canValueBeFormatted()) { + return _.escape(this.getRawValue()); + } + + const htmlConverter = indexPatternField.format.getConverterFor('html'); + return htmlConverter + ? htmlConverter(this.getRawValue()) + : indexPatternField.format.convert(this.getRawValue()); + } + + isFilterable(): boolean { + const indexPatternField = this._getIndexPatternField(); + return ( + !!indexPatternField && + (indexPatternField.type === 'string' || + indexPatternField.type === 'date' || + indexPatternField.type === 'ip' || + indexPatternField.type === 'number') + ); + } + + async getESFilters(): Promise { + const indexPatternField = this._getIndexPatternField(); + if (!indexPatternField) { + return []; + } + + return [esFilters.buildPhraseFilter(indexPatternField, this.getRawValue(), this._indexPattern)]; + } +} diff --git a/x-pack/legacy/plugins/maps/public/layers/tooltips/join_tooltip_property.js b/x-pack/legacy/plugins/maps/public/layers/tooltips/join_tooltip_property.ts similarity index 63% rename from x-pack/legacy/plugins/maps/public/layers/tooltips/join_tooltip_property.js rename to x-pack/legacy/plugins/maps/public/layers/tooltips/join_tooltip_property.ts index e62f93c959faa1..02f0920ce3c619 100644 --- a/x-pack/legacy/plugins/maps/public/layers/tooltips/join_tooltip_property.js +++ b/x-pack/legacy/plugins/maps/public/layers/tooltips/join_tooltip_property.ts @@ -4,32 +4,40 @@ * you may not use this file except in compliance with the Elastic License. */ -import { TooltipProperty } from './tooltip_property'; +import { ITooltipProperty } from './tooltip_property'; +import { IJoin } from '../joins/join'; +import { PhraseFilter } from '../../../../../../../src/plugins/data/public'; -export class JoinTooltipProperty extends TooltipProperty { - constructor(tooltipProperty, leftInnerJoins) { - super(); +export class JoinTooltipProperty implements ITooltipProperty { + private readonly _tooltipProperty: ITooltipProperty; + private readonly _leftInnerJoins: IJoin[]; + + constructor(tooltipProperty: ITooltipProperty, leftInnerJoins: IJoin[]) { this._tooltipProperty = tooltipProperty; this._leftInnerJoins = leftInnerJoins; } - isFilterable() { + isFilterable(): boolean { return true; } - getPropertyKey() { + getPropertyKey(): string { return this._tooltipProperty.getPropertyKey(); } - getPropertyName() { + getPropertyName(): string { return this._tooltipProperty.getPropertyName(); } - getHtmlDisplayValue() { + getRawValue(): string | undefined { + return this._tooltipProperty.getRawValue(); + } + + getHtmlDisplayValue(): string { return this._tooltipProperty.getHtmlDisplayValue(); } - async getESFilters() { + async getESFilters(): Promise { const esFilters = []; if (this._tooltipProperty.isFilterable()) { esFilters.push(...(await this._tooltipProperty.getESFilters())); @@ -46,6 +54,7 @@ export class JoinTooltipProperty extends TooltipProperty { esFilters.push(...(await esTooltipProperty.getESFilters())); } } catch (e) { + // eslint-disable-next-line no-console console.error('Cannot create joined filter', e); } } diff --git a/x-pack/legacy/plugins/maps/public/layers/tooltips/tooltip_property.js b/x-pack/legacy/plugins/maps/public/layers/tooltips/tooltip_property.js deleted file mode 100644 index e063913abf433b..00000000000000 --- a/x-pack/legacy/plugins/maps/public/layers/tooltips/tooltip_property.js +++ /dev/null @@ -1,39 +0,0 @@ -/* - * 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 _ from 'lodash'; - -export class TooltipProperty { - constructor(propertyKey, propertyName, rawValue) { - this._propertyKey = propertyKey; - this._propertyName = propertyName; - this._rawValue = rawValue; - } - - getPropertyKey() { - return this._propertyKey; - } - - getPropertyName() { - return this._propertyName; - } - - getHtmlDisplayValue() { - return _.escape(this._rawValue); - } - - getRawValue() { - return this._rawValue; - } - - isFilterable() { - return false; - } - - async getESFilters() { - return []; - } -} diff --git a/x-pack/legacy/plugins/maps/public/layers/tooltips/tooltip_property.ts b/x-pack/legacy/plugins/maps/public/layers/tooltips/tooltip_property.ts new file mode 100644 index 00000000000000..3428cb9589267d --- /dev/null +++ b/x-pack/legacy/plugins/maps/public/layers/tooltips/tooltip_property.ts @@ -0,0 +1,53 @@ +/* + * 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 _ from 'lodash'; +import { PhraseFilter } from '../../../../../../../src/plugins/data/public'; + +export interface ITooltipProperty { + getPropertyKey(): string; + getPropertyName(): string; + getHtmlDisplayValue(): string; + getRawValue(): string | undefined; + isFilterable(): boolean; + getESFilters(): Promise; +} + +export class TooltipProperty implements ITooltipProperty { + private readonly _propertyKey: string; + private readonly _propertyName: string; + private readonly _rawValue: string | undefined; + + constructor(propertyKey: string, propertyName: string, rawValue: string | undefined) { + this._propertyKey = propertyKey; + this._propertyName = propertyName; + this._rawValue = rawValue; + } + + getPropertyKey(): string { + return this._propertyKey; + } + + getPropertyName(): string { + return this._propertyName; + } + + getHtmlDisplayValue(): string { + return _.escape(this._rawValue); + } + + getRawValue(): string | undefined { + return this._rawValue; + } + + isFilterable(): boolean { + return false; + } + + async getESFilters(): Promise { + return []; + } +}