[7.x] Convert vis_type_vega to Typescript (#68915)

package.json

@@ -138,9 +138,9 @@
     "@kbn/babel-preset": "1.0.0",
     "@kbn/config-schema": "1.0.0",
     "@kbn/i18n": "1.0.0",
-    "@kbn/telemetry-tools": "1.0.0",
     "@kbn/interpreter": "1.0.0",
     "@kbn/pm": "1.0.0",
+    "@kbn/telemetry-tools": "1.0.0",
     "@kbn/test-subj-selector": "0.2.1",
     "@kbn/ui-framework": "1.0.0",
     "@kbn/ui-shared-deps": "1.0.0",
@@ -340,6 +340,7 @@
     "@types/hapi-auth-cookie": "^9.1.0",
     "@types/has-ansi": "^3.0.0",
     "@types/history": "^4.7.3",
+    "@types/hjson": "^2.4.2",
     "@types/hoek": "^4.1.3",
     "@types/inert": "^5.1.2",
     "@types/jest": "^25.2.3",

renovate.json5

@@ -426,6 +426,14 @@
           '@types/history',
         ],
       },
+      {
+        groupSlug: 'hjson',
+        groupName: 'hjson related packages',
+        packageNames: [
+          'hjson',
+          '@types/hjson',
+        ],
+      },
       {
         groupSlug: 'inquirer',
         groupName: 'inquirer related packages',

src/plugins/maps_legacy/public/map/service_settings.d.ts

@@ -48,4 +48,5 @@ export interface IServiceSettings {
   getEMSHotLink(layer: FileLayer): Promise<string>;
   getTMSServices(): Promise<TmsLayer[]>;
   getFileLayers(): Promise<FileLayer[]>;
+  getUrlForRegionLayer(layer: FileLayer): Promise<string>;
 }

src/plugins/vis_type_vega/public/components/vega_vis_editor.tsx

@@ -20,7 +20,6 @@
 import React, { useCallback } from 'react';
 import { EuiCodeEditor } from '@elastic/eui';
 import compactStringify from 'json-stringify-pretty-compact';
-// @ts-ignore
 import hjson from 'hjson';
 import 'brace/mode/hjson';
 import { i18n } from '@kbn/i18n';
@@ -45,7 +44,11 @@ const hjsonStringifyOptions = {
   keepWsc: true,
 };
 
-function format(value: string, stringify: typeof compactStringify, options?: any) {
+function format(
+  value: string,
+  stringify: typeof hjson.stringify | typeof compactStringify,
+  options?: any
+) {
   try {
     const spec = hjson.parse(value, { legacyRoot: false, keepWsc: true });
     return stringify(spec, options);

src/plugins/vis_type_vega/public/data_model/ems_file_parser.js → src/plugins/vis_type_vega/public/data_model/ems_file_parser.ts

@@ -18,22 +18,28 @@
  */
 
 import { i18n } from '@kbn/i18n';
+// @ts-ignore
 import { bypassExternalUrlCheck } from '../vega_view/vega_base_view';
+import { IServiceSettings, FileLayer } from '../../../maps_legacy/public';
+import { Data, UrlObject, Requests } from './types';
 
 /**
  * This class processes all Vega spec customizations,
  * converting url object parameters into query results.
  */
 export class EmsFileParser {
-  constructor(serviceSettings) {
+  _serviceSettings: IServiceSettings;
+  _fileLayersP?: Promise<FileLayer[]>;
+
+  constructor(serviceSettings: IServiceSettings) {
     this._serviceSettings = serviceSettings;
   }
 
   // noinspection JSMethodCanBeStatic
   /**
    * Update request object, expanding any context-aware keywords
    */
-  parseUrl(obj, url) {
+  parseUrl(obj: Data, url: UrlObject) {
     if (typeof url.name !== 'string') {
       throw new Error(
         i18n.translate('visTypeVega.emsFileParser.missingNameOfFileErrorMessage', {
@@ -59,13 +65,13 @@ export class EmsFileParser {
    * @param {object[]} requests each object is generated by parseUrl()
    * @returns {Promise<void>}
    */
-  async populateData(requests) {
+  async populateData(requests: Requests[]) {
     if (requests.length === 0) return;
 
     const layers = await this._fileLayersP;
 
     for (const { obj, name } of requests) {
-      const foundLayer = layers.find((v) => v.name === name);
+      const foundLayer = layers?.find((v) => v.name === name);
       if (!foundLayer) {
         throw new Error(
           i18n.translate('visTypeVega.emsFileParser.emsFileNameDoesNotExistErrorMessage', {

src/plugins/vis_type_vega/public/data_model/es_query_parser.js → src/plugins/vis_type_vega/public/data_model/es_query_parser.ts

@@ -19,24 +19,38 @@
 
 import moment from 'moment';
 import { i18n } from '@kbn/i18n';
-import { isPlainObject, cloneDeep } from 'lodash';
+import { cloneDeep, isPlainObject } from 'lodash';
+import { SearchParams } from 'elasticsearch';
+import { TimeCache } from './time_cache';
+import { SearchAPI } from './search_api';
+import { Opts, Type, Data, UrlObject, Bool, Requests, Query, ContextVarsObject } from './types';
 
-const TIMEFILTER = '%timefilter%';
-const AUTOINTERVAL = '%autointerval%';
-const MUST_CLAUSE = '%dashboard_context-must_clause%';
-const FILTER_CLAUSE = '%dashboard_context-filter_clause%';
-const MUST_NOT_CLAUSE = '%dashboard_context-must_not_clause%';
+const TIMEFILTER: string = '%timefilter%';
+const AUTOINTERVAL: string = '%autointerval%';
+const MUST_CLAUSE: string = '%dashboard_context-must_clause%';
+const MUST_NOT_CLAUSE: string = '%dashboard_context-must_not_clause%';
+const FILTER_CLAUSE: string = '%dashboard_context-filter_clause%';
 
 // These values may appear in the  'url': { ... }  object
-const LEGACY_CONTEXT = '%context_query%';
-const CONTEXT = '%context%';
-const TIMEFIELD = '%timefield%';
+const LEGACY_CONTEXT: string = '%context_query%';
+const CONTEXT: string = '%context%';
+const TIMEFIELD: string = '%timefield%';
 
 /**
  * This class parses ES requests specified in the data.url objects.
  */
 export class EsQueryParser {
-  constructor(timeCache, searchAPI, filters, onWarning) {
+  _timeCache: TimeCache;
+  _searchAPI: SearchAPI;
+  _filters: Bool;
+  _onWarning: (...args: string[]) => void;
+
+  constructor(
+    timeCache: TimeCache,
+    searchAPI: SearchAPI,
+    filters: Bool,
+    onWarning: (...args: string[]) => void
+  ) {
     this._timeCache = timeCache;
     this._searchAPI = searchAPI;
     this._filters = filters;
@@ -47,7 +61,7 @@ export class EsQueryParser {
   /**
    * Update request object, expanding any context-aware keywords
    */
-  parseUrl(dataObject, url) {
+  parseUrl(dataObject: Data, url: UrlObject) {
     let body = url.body;
     let context = url[CONTEXT];
     delete url[CONTEXT];
@@ -167,13 +181,13 @@ export class EsQueryParser {
         // Use dashboard context
         const newQuery = cloneDeep(this._filters);
         if (timefield) {
-          newQuery.bool.must.push(body.query);
+          newQuery.bool!.must!.push(body.query);
         }
         body.query = newQuery;
       }
     }
 
-    this._injectContextVars(body.aggs, false);
+    this._injectContextVars(body.aggs!, false);
     return { dataObject, url };
   }
 
@@ -182,8 +196,8 @@ export class EsQueryParser {
    * @param {object[]} requests each object is generated by parseUrl()
    * @returns {Promise<void>}
    */
-  async populateData(requests) {
-    const esSearches = requests.map((r) => r.url);
+  async populateData(requests: Requests[]) {
+    const esSearches = requests.map((r: Requests) => r.url);
     const data$ = this._searchAPI.search(esSearches);
 
     const results = await data$.toPromise();
@@ -198,7 +212,7 @@ export class EsQueryParser {
    * @param {*} obj
    * @param {boolean} isQuery - if true, the `obj` belongs to the req's query portion
    */
-  _injectContextVars(obj, isQuery) {
+  _injectContextVars(obj: Query | SearchParams['body']['aggs'], isQuery: boolean) {
     if (obj && typeof obj === 'object') {
       if (Array.isArray(obj)) {
         // For arrays, replace MUST_CLAUSE and MUST_NOT_CLAUSE string elements
@@ -239,7 +253,7 @@ export class EsQueryParser {
         }
       } else {
         for (const prop of Object.keys(obj)) {
-          const subObj = obj[prop];
+          const subObj = (obj as ContextVarsObject)[prop];
           if (!subObj || typeof obj !== 'object') continue;
 
           // replace "interval": { "%autointerval%": true|integer } with
@@ -260,7 +274,9 @@ export class EsQueryParser {
               );
             }
             const bounds = this._timeCache.getTimeBounds();
-            obj.interval = EsQueryParser._roundInterval((bounds.max - bounds.min) / size);
+            (obj as ContextVarsObject).interval = EsQueryParser._roundInterval(
+              (bounds.max - bounds.min) / size
+            );
             continue;
           }
 
@@ -269,7 +285,7 @@ export class EsQueryParser {
             case 'min':
             case 'max':
               // Replace {"%timefilter%": "min|max", ...} object with a timestamp
-              obj[prop] = this._getTimeBound(subObj, subObj[TIMEFILTER]);
+              (obj as ContextVarsObject)[prop] = this._getTimeBound(subObj, subObj[TIMEFILTER]);
               continue;
             case true:
               // Replace {"%timefilter%": true, ...} object with the "range" object
@@ -302,7 +318,7 @@ export class EsQueryParser {
    * @param {object} obj
    * @return {object}
    */
-  _createRangeFilter(obj) {
+  _createRangeFilter(obj: Opts) {
     obj.gte = moment(this._getTimeBound(obj, 'min')).toISOString();
     obj.lte = moment(this._getTimeBound(obj, 'max')).toISOString();
     obj.format = 'strict_date_optional_time';
@@ -320,9 +336,9 @@ export class EsQueryParser {
    * @param {'min'|'max'} type
    * @returns {*}
    */
-  _getTimeBound(opts, type) {
+  _getTimeBound(opts: Opts, type: Type): number {
     const bounds = this._timeCache.getTimeBounds();
-    let result = bounds[type];
+    let result = bounds[type]?.valueOf() || 0;
 
     if (opts.shift) {
       const shift = opts.shift;
@@ -380,7 +396,7 @@ export class EsQueryParser {
    * @param interval (ms)
    * @returns {string}
    */
-  static _roundInterval(interval) {
+  static _roundInterval(interval: number): string {
     switch (true) {
       case interval <= 500: // <= 0.5s
         return '100ms';

src/plugins/vis_type_vega/public/data_model/time_cache.js → src/plugins/vis_type_vega/public/data_model/time_cache.ts

@@ -17,37 +17,47 @@
  * under the License.
  */
 
+import { TimefilterContract } from '../../../data/public';
+import { TimeRange } from '../../../data/common';
+import { CacheBounds } from './types';
+
 /**
  * Optimization caching - always return the same value if queried within this time
  * @type {number}
  */
-const AlwaysCacheMaxAge = 40;
+
+const AlwaysCacheMaxAge: number = 40;
 
 /**
  * This class caches timefilter's bounds to minimize number of server requests
  */
 export class TimeCache {
-  constructor(timefilter, maxAge) {
+  _timefilter: TimefilterContract;
+  _maxAge: number;
+  _cachedBounds?: CacheBounds;
+  _cacheTS: number;
+  _timeRange?: TimeRange;
+
+  constructor(timefilter: TimefilterContract, maxAge: number) {
     this._timefilter = timefilter;
     this._maxAge = maxAge;
-    this._cachedBounds = null;
     this._cacheTS = 0;
   }
 
   // Simplifies unit testing
   // noinspection JSMethodCanBeStatic
-  _now() {
+  _now(): number {
     return Date.now();
   }
 
   /**
    * Get cached time range values
    * @returns {{min: number, max: number}}
    */
-  getTimeBounds() {
+  getTimeBounds(): CacheBounds {
     const ts = this._now();
 
-    let bounds;
+    let bounds: CacheBounds | null = null;
     if (this._cachedBounds) {
       const diff = ts - this._cacheTS;
 
@@ -76,7 +86,7 @@ export class TimeCache {
     return this._cachedBounds;
   }
 
-  setTimeRange(timeRange) {
+  setTimeRange(timeRange: TimeRange): void {
     this._timeRange = timeRange;
   }
 
@@ -85,11 +95,11 @@ export class TimeCache {
    * @returns {{min: number, max: number}}
    * @private
    */
-  _getBounds() {
-    const bounds = this._timefilter.calculateBounds(this._timeRange);
+  _getBounds(): CacheBounds {
+    const bounds = this._timefilter.calculateBounds(this._timeRange!);
     return {
-      min: bounds.min.valueOf(),
-      max: bounds.max.valueOf(),
+      min: bounds.min!.valueOf(),
+      max: bounds.max!.valueOf(),
     };
   }
 }