[Vis] Move Timelion Vis to vis_type_timelion (#52069)

* Deangularize timelion vis * Refactoring * Fix path * Update timelion_controller.ts * Remove unused deps * Create vis_type_timelion * Create ChartComponent * Render chart in react * Reactify timelion editor * Change translation ids * Use hooks * Add @types/pegjs into renovate.json5 * Add validation, add hover suggestions * Style fixes * Change plugin setup, use kibana context * Update * Fix ticks * Fix plotselected listener * Fix plothover handler * Add TS for options * Update TS * Restructuring * Change plugin start * Remove vis from timelion plugin * Rename class * Mock services * Fix other comments * Remove duplicate files * Convert test to jest * Remove kibana_services from timelion * Delete visualize_app.ts.~LOCAL * Refactoring * Fix TS * Refactoring, TS * Import eui variables * Import styling constants * Move react components to vis_type_timelion * Fix TS * Move ui imports to legacy_imports.ts * Move chain.peg to vis_type_timelion * Fix path * Use KibanaContext instead kibana_services.ts * Refactoring * Refactoring * Add @types/flot * Fix issue with hovered series color * Update renovate.json5 * Pass timelionPanels as dependencies * Move common folder to vis_type_timelion * Move back tick_formatters.ts * Rename styles file * Refactoring * Update _index.scss * Move to_milliseconds to common * Revert yaxes formatting * Refactoring * Refactoring * Use Panel directly * Refactoring of to_milliseconds.ts Co-authored-by: Daniil Suleiman <31325372+sulemanof@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Jan 17, 2020 · 9e07a42 · 9e07a42
1 parent 856c85b
commit 9e07a42
Show file tree

Hide file tree

Showing 69 changed files with 1,104 additions and 228 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -16,7 +16,7 @@ src/legacy/core_plugins/vis_type_vislib/public/vislib/__tests__/lib/fixtures/moc
 /src/legacy/core_plugins/console/public/webpackShims
 /src/legacy/core_plugins/console/public/tests/webpackShims
 /src/legacy/ui/public/utils/decode_geo_hash.js
-/src/legacy/core_plugins/timelion/public/webpackShims/jquery.flot.*
+/src/legacy/core_plugins/vis_type_timelion/public/webpackShims/jquery.flot.*
 /src/core/lib/kbn_internal_native_observable
 /packages/*/target
 /packages/eslint-config-kibana

diff --git a/.i18nrc.json b/.i18nrc.json
@@ -33,7 +33,7 @@
     "statusPage": "src/legacy/core_plugins/status_page",
     "telemetry": "src/legacy/core_plugins/telemetry",
     "tileMap": "src/legacy/core_plugins/tile_map",
-    "timelion": "src/legacy/core_plugins/timelion",
+    "timelion": ["src/legacy/core_plugins/timelion", "src/legacy/core_plugins/vis_type_timelion"],
     "uiActions": "src/plugins/ui_actions",
     "visTypeMarkdown": "src/legacy/core_plugins/vis_type_markdown",
     "visTypeMetric": "src/legacy/core_plugins/vis_type_metric",

diff --git a/package.json b/package.json
@@ -136,6 +136,7 @@
     "@kbn/test-subj-selector": "0.2.1",
     "@kbn/ui-framework": "1.0.0",
     "@kbn/ui-shared-deps": "1.0.0",
+    "@types/flot": "^0.0.31",
     "@types/json-stable-stringify": "^1.0.32",
     "@types/lodash.clonedeep": "^4.5.4",
     "@types/node-forge": "^0.9.0",

diff --git a/renovate.json5 b/renovate.json5
@@ -281,6 +281,14 @@
           '@types/file-saver',
         ],
       },
+      {
+        groupSlug: 'flot',
+        groupName: 'flot related packages',
+        packageNames: [
+          'flot',
+          '@types/flot',
+        ],
+      },
       {
         groupSlug: 'getopts',
         groupName: 'getopts related packages',

diff --git a/src/legacy/core_plugins/timelion/public/app.js b/src/legacy/core_plugins/timelion/public/app.js
@@ -59,8 +59,6 @@ document.title = 'Timelion - Kibana';
 
 const app = require('ui/modules').get('apps/timelion', []);
 
-require('./vis');
-
 require('ui/routes').enable();
 
 require('ui/routes').when('/:id?', {

diff --git a/...cy/core_plugins/timelion/public/directives/__tests__/timelion_expression_input_helpers.js b/...cy/core_plugins/timelion/public/directives/__tests__/timelion_expression_input_helpers.js
@@ -19,10 +19,13 @@
 
 import expect from '@kbn/expect';
 import PEG from 'pegjs';
-import grammar from 'raw-loader!../../chain.peg';
+import grammar from 'raw-loader!../../../../vis_type_timelion/public/chain.peg';
 import { SUGGESTION_TYPE, suggest } from '../timelion_expression_input_helpers';
-import { getArgValueSuggestions } from '../../services/arg_value_suggestions';
-import { setIndexPatterns, setSavedObjectsClient } from '../../services/plugin_services';
+import { getArgValueSuggestions } from '../../../../vis_type_timelion/public/helpers/arg_value_suggestions';
+import {
+  setIndexPatterns,
+  setSavedObjectsClient,
+} from '../../../../vis_type_timelion/public/helpers/plugin_services';
 
 describe('Timelion expression suggestions', () => {
   setIndexPatterns({});

diff --git a/src/legacy/core_plugins/timelion/public/directives/_index.scss b/src/legacy/core_plugins/timelion/public/directives/_index.scss
@@ -1,6 +1,5 @@
 @import './timelion_expression_input';
 @import './cells/index';
-@import './chart/index';
 @import './timelion_expression_suggestions/index';
 @import './timelion_help/index';
 @import './timelion_interval/index';
diff --git a/src/legacy/core_plugins/timelion/public/directives/chart/_index.scss b/src/legacy/core_plugins/timelion/public/directives/chart/_index.scss
diff --git a/src/legacy/core_plugins/timelion/public/directives/timelion_expression_input.js b/src/legacy/core_plugins/timelion/public/directives/timelion_expression_input.js
@@ -43,7 +43,7 @@
 import _ from 'lodash';
 import $ from 'jquery';
 import PEG from 'pegjs';
-import grammar from 'raw-loader!../chain.peg';
+import grammar from 'raw-loader!../../../vis_type_timelion/public/chain.peg';
 import timelionExpressionInputTemplate from './timelion_expression_input.html';
 import {
   SUGGESTION_TYPE,
@@ -52,7 +52,7 @@ import {
   insertAtLocation,
 } from './timelion_expression_input_helpers';
 import { comboBoxKeyCodes } from '@elastic/eui';
-import { getArgValueSuggestions } from '../services/arg_value_suggestions';
+import { getArgValueSuggestions } from '../../../vis_type_timelion/public/helpers/arg_value_suggestions';
 
 const Parser = PEG.generate(grammar);
 

diff --git a/src/legacy/core_plugins/timelion/public/index.scss b/src/legacy/core_plugins/timelion/public/index.scss
@@ -11,6 +11,4 @@
 //   timChart__legend-isLoading
 
 @import './app';
-@import './components/index';
 @import './directives/index';
-@import './vis/index';
diff --git a/src/legacy/core_plugins/timelion/public/legacy.ts b/src/legacy/core_plugins/timelion/public/legacy.ts
@@ -20,15 +20,10 @@
 import { PluginInitializerContext } from 'kibana/public';
 import { npSetup, npStart } from 'ui/new_platform';
 import { plugin } from '.';
-import { setup as visualizations } from '../../visualizations/public/np_ready/public/legacy';
 import { TimelionPluginSetupDependencies } from './plugin';
 import { LegacyDependenciesPlugin } from './shim';
 
 const setupPlugins: Readonly<TimelionPluginSetupDependencies> = {
-  visualizations,
-  data: npSetup.plugins.data,
-  expressions: npSetup.plugins.expressions,
-
   // Temporary solution
   // It will be removed when all dependent services are migrated to the new platform.
   __LEGACY: new LegacyDependenciesPlugin(),
@@ -37,4 +32,4 @@ const setupPlugins: Readonly<TimelionPluginSetupDependencies> = {
 const pluginInstance = plugin({} as PluginInitializerContext);
 
 export const setup = pluginInstance.setup(npSetup.core, setupPlugins);
-export const start = pluginInstance.start(npStart.core, npStart.plugins);
+export const start = pluginInstance.start(npStart.core);
diff --git a/src/legacy/core_plugins/timelion/public/panels/timechart/schema.ts b/src/legacy/core_plugins/timelion/public/panels/timechart/schema.ts
@@ -17,19 +17,18 @@
  * under the License.
  */
 
-import './flot';
+import '../../../../vis_type_timelion/public/flot';
 import _ from 'lodash';
 import $ from 'jquery';
 import moment from 'moment-timezone';
 import { timefilter } from 'ui/timefilter';
 // @ts-ignore
 import observeResize from '../../lib/observe_resize';
-// @ts-ignore
-import { calculateInterval, DEFAULT_TIME_FORMAT } from '../../../common/lib';
+import { calculateInterval, DEFAULT_TIME_FORMAT } from '../../../../vis_type_timelion/common/lib';
+import { tickFormatters } from '../../../../vis_type_timelion/public/helpers/tick_formatters';
 import { TimelionVisualizationDependencies } from '../../plugin';
-import { tickFormatters } from '../../services/tick_formatters';
-import { xaxisFormatterProvider } from './xaxis_formatter';
-import { generateTicksProvider } from './tick_generator';
+import { xaxisFormatterProvider } from '../../../../vis_type_timelion/public/helpers/xaxis_formatter';
+import { generateTicksProvider } from '../../../../vis_type_timelion/public/helpers/tick_generator';
 
 const DEBOUNCE_DELAY = 50;
 

diff --git a/src/legacy/core_plugins/timelion/public/plugin.ts b/src/legacy/core_plugins/timelion/public/plugin.ts
@@ -22,33 +22,19 @@ import {
   Plugin,
   PluginInitializerContext,
   IUiSettingsClient,
-  HttpSetup,
 } from 'kibana/public';
-import { Plugin as ExpressionsPlugin } from 'src/plugins/expressions/public';
-import { DataPublicPluginSetup, TimefilterContract } from 'src/plugins/data/public';
-import { PluginsStart } from 'ui/new_platform/new_platform';
-import { VisualizationsSetup } from '../../visualizations/public/np_ready/public';
-import { getTimelionVisualizationConfig } from './timelion_vis_fn';
-import { getTimelionVisualization } from './vis';
 import { getTimeChart } from './panels/timechart/timechart';
 import { Panel } from './panels/panel';
 import { LegacyDependenciesPlugin, LegacyDependenciesPluginSetup } from './shim';
-import { setIndexPatterns, setSavedObjectsClient } from './services/plugin_services';
 
 /** @internal */
 export interface TimelionVisualizationDependencies extends LegacyDependenciesPluginSetup {
   uiSettings: IUiSettingsClient;
-  http: HttpSetup;
   timelionPanels: Map<string, Panel>;
-  timefilter: TimefilterContract;
 }
 
 /** @internal */
 export interface TimelionPluginSetupDependencies {
-  expressions: ReturnType<ExpressionsPlugin['setup']>;
-  visualizations: VisualizationsSetup;
-  data: DataPublicPluginSetup;
-
   // Temporary solution
   __LEGACY: LegacyDependenciesPlugin;
 }
@@ -61,24 +47,16 @@ export class TimelionPlugin implements Plugin<Promise<void>, void> {
     this.initializerContext = initializerContext;
   }
 
-  public async setup(
-    core: CoreSetup,
-    { __LEGACY, expressions, visualizations, data }: TimelionPluginSetupDependencies
-  ) {
+  public async setup(core: CoreSetup, { __LEGACY }: TimelionPluginSetupDependencies) {
     const timelionPanels: Map<string, Panel> = new Map();
 
     const dependencies: TimelionVisualizationDependencies = {
       uiSettings: core.uiSettings,
-      http: core.http,
       timelionPanels,
-      timefilter: data.query.timefilter.timefilter,
       ...(await __LEGACY.setup(core, timelionPanels)),
     };
 
     this.registerPanels(dependencies);
-
-    expressions.registerFunction(() => getTimelionVisualizationConfig(dependencies));
-    visualizations.types.createBaseVisualization(getTimelionVisualization(dependencies));
   }
 
   private registerPanels(dependencies: TimelionVisualizationDependencies) {
@@ -87,15 +65,12 @@ export class TimelionPlugin implements Plugin<Promise<void>, void> {
     dependencies.timelionPanels.set(timeChartPanel.name, timeChartPanel);
   }
 
-  public start(core: CoreStart, plugins: PluginsStart) {
+  public start(core: CoreStart) {
     const timelionUiEnabled = core.injectedMetadata.getInjectedVar('timelionUiEnabled');
 
     if (timelionUiEnabled === false) {
       core.chrome.navLinks.update('timelion', { hidden: true });
     }
-
-    setIndexPatterns(plugins.data.indexPatterns);
-    setSavedObjectsClient(core.savedObjects.client);
   }
 
   public stop(): void {}

diff --git a/src/legacy/core_plugins/timelion/public/vis/_index.scss b/src/legacy/core_plugins/timelion/public/vis/_index.scss
diff --git a/src/legacy/core_plugins/timelion/public/vis/timelion_vis.html b/src/legacy/core_plugins/timelion/public/vis/timelion_vis.html
diff --git a/src/legacy/core_plugins/timelion/server/handlers/chain_runner.js b/src/legacy/core_plugins/timelion/server/handlers/chain_runner.js
@@ -26,7 +26,7 @@ import parseSheet from './lib/parse_sheet.js';
 import repositionArguments from './lib/reposition_arguments.js';
 import indexArguments from './lib/index_arguments.js';
 import validateTime from './lib/validate_time.js';
-import { calculateInterval } from '../../common/lib';
+import { calculateInterval } from '../../../vis_type_timelion/common/lib';
 
 export default function chainRunner(tlConfig) {
   const preprocessChain = require('./lib/preprocess_chain')(tlConfig);

diff --git a/src/legacy/core_plugins/timelion/server/handlers/lib/parse_sheet.js b/src/legacy/core_plugins/timelion/server/handlers/lib/parse_sheet.js
@@ -21,7 +21,10 @@ import { i18n } from '@kbn/i18n';
 import fs from 'fs';
 import path from 'path';
 import _ from 'lodash';
-const grammar = fs.readFileSync(path.resolve(__dirname, '../../../public/chain.peg'), 'utf8');
+const grammar = fs.readFileSync(
+  path.resolve(__dirname, '../../../../vis_type_timelion/public/chain.peg'),
+  'utf8'
+);
 import PEG from 'pegjs';
 const Parser = PEG.generate(grammar);
 

diff --git a/src/legacy/core_plugins/timelion/server/handlers/lib/validate_time.js b/src/legacy/core_plugins/timelion/server/handlers/lib/validate_time.js
@@ -20,7 +20,7 @@
 import { i18n } from '@kbn/i18n';
 import moment from 'moment';
 
-import toMS from '../../lib/to_milliseconds.js';
+import { toMS } from '../../../../vis_type_timelion/common/lib';
 
 export default function validateTime(time, tlConfig) {
   const span = moment.duration(moment(time.to).diff(moment(time.from))).asMilliseconds();

diff --git a/src/legacy/core_plugins/timelion/server/lib/classes/timelion_function.d.ts b/src/legacy/core_plugins/timelion/server/lib/classes/timelion_function.d.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { TimelionFunctionArgs } from '../../../common/types';
+import { TimelionFunctionArgs } from '../../../../vis_type_timelion/common/types';
 
 export interface TimelionFunctionInterface extends TimelionFunctionConfig {
   chainable: boolean;

diff --git a/src/legacy/core_plugins/timelion/server/series_functions/holt/index.js b/src/legacy/core_plugins/timelion/server/series_functions/holt/index.js
@@ -23,7 +23,7 @@ import Chainable from '../../lib/classes/chainable';
 import ses from './lib/ses';
 import des from './lib/des';
 import tes from './lib/tes';
-import toMilliseconds from '../../lib/to_milliseconds';
+import { toMS } from '../../../../vis_type_timelion/common/lib';
 
 export default new Chainable('holt', {
   args: [
@@ -125,9 +125,7 @@ export default new Chainable('holt', {
             })
           );
         }
-        const season = Math.round(
-          toMilliseconds(args.byName.season) / toMilliseconds(tlConfig.time.interval)
-        );
+        const season = Math.round(toMS(args.byName.season) / toMS(tlConfig.time.interval));
         points = tes(points, alpha, beta, gamma, season, sample);
       }
 

diff --git a/src/legacy/core_plugins/timelion/server/series_functions/legend.js b/src/legacy/core_plugins/timelion/server/series_functions/legend.js
@@ -20,7 +20,7 @@
 import { i18n } from '@kbn/i18n';
 import alter from '../lib/alter.js';
 import Chainable from '../lib/classes/chainable';
-import { DEFAULT_TIME_FORMAT } from '../../common/lib';
+import { DEFAULT_TIME_FORMAT } from '../../../vis_type_timelion/common/lib';
 
 export default new Chainable('legend', {
   args: [

diff --git a/src/legacy/core_plugins/timelion/server/series_functions/movingaverage.js b/src/legacy/core_plugins/timelion/server/series_functions/movingaverage.js
@@ -21,7 +21,7 @@ import { i18n } from '@kbn/i18n';
 import alter from '../lib/alter.js';
 import _ from 'lodash';
 import Chainable from '../lib/classes/chainable';
-import toMS from '../lib/to_milliseconds.js';
+import { toMS } from '../../../vis_type_timelion/common/lib';
 
 const validPositions = ['left', 'right', 'center'];
 const defaultPosition = 'center';

diff --git a/src/legacy/core_plugins/timelion/server/series_functions/scale_interval.js b/src/legacy/core_plugins/timelion/server/series_functions/scale_interval.js
@@ -19,7 +19,7 @@
 
 import { i18n } from '@kbn/i18n';
 import alter from '../lib/alter.js';
-import toMS from '../lib/to_milliseconds.js';
+import { toMS } from '../../../vis_type_timelion/common/lib';
 import _ from 'lodash';
 import Chainable from '../lib/classes/chainable';
 

diff --git a/...timelion/common/lib/calculate_interval.js → ...timelion/common/lib/calculate_interval.ts b/...timelion/common/lib/calculate_interval.js → ...timelion/common/lib/calculate_interval.ts
@@ -17,11 +17,11 @@
  * under the License.
  */
 
-import toMS from '../../server/lib/to_milliseconds.js';
+import { toMS } from './to_milliseconds';
 
 // Totally cribbed this from Kibana 3.
 // I bet there's something similar in the Kibana 4 code. Somewhere. Somehow.
-function roundInterval(interval) {
+function roundInterval(interval: number) {
   switch (true) {
     case interval <= 500: // <= 0.5s
       return '100ms';
@@ -58,9 +58,24 @@ function roundInterval(interval) {
   }
 }
 
-export function calculateInterval(from, to, size, interval, min) {
-  if (interval !== 'auto') return interval;
-  const dateMathInterval = roundInterval((to - from) / size);
-  if (toMS(dateMathInterval) < toMS(min)) return min;
+export function calculateInterval(
+  from: number,
+  to: number,
+  size: number,
+  interval: string,
+  min: string
+) {
+  if (interval !== 'auto') {
+    return interval;
+  }
+
+  const dateMathInterval: string = roundInterval((to - from) / size);
+  const dateMathIntervalMs = toMS(dateMathInterval);
+  const minMs = toMS(min);
+
+  if (dateMathIntervalMs !== undefined && minMs !== undefined && dateMathIntervalMs < minMs) {
+    return min;
+  }
+
   return dateMathInterval;
 }
diff --git a/...core_plugins/timelion/common/lib/index.js → ...ins/vis_type_timelion/common/lib/index.ts b/...core_plugins/timelion/common/lib/index.js → ...ins/vis_type_timelion/common/lib/index.ts
@@ -18,4 +18,6 @@
  */
 
 export { calculateInterval } from './calculate_interval';
+export { toMS } from './to_milliseconds';
+
 export const DEFAULT_TIME_FORMAT = 'MMMM Do YYYY, HH:mm:ss.SSS';