[Metric Vis] Shim new platform (#42240)

* Add New Platform mocks for data plugin

* [Metric Vis] Shim new platform

* move metric_vis_controller to components folder

* fix PR comments

* change interpreter type for colorRange and font

* change interpreter type for colorRange and font

src/legacy/core_plugins/metric_vis/index.ts

@@ -0,0 +1,44 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { resolve } from 'path';
+import { Legacy } from 'kibana';
+
+import { LegacyPluginApi, LegacyPluginInitializer } from '../../../../src/legacy/types';
+
+const metricPluginInitializer: LegacyPluginInitializer = ({ Plugin }: LegacyPluginApi) =>
+  new Plugin({
+    id: 'metric_vis',
+    require: ['kibana', 'elasticsearch', 'visualizations', 'interpreter', 'data'],
+    publicDir: resolve(__dirname, 'public'),
+    uiExports: {
+      styleSheetPaths: resolve(__dirname, 'public/index.scss'),
+      hacks: [resolve(__dirname, 'public/legacy')],
+      injectDefaultVars: server => ({}),
+    },
+    init: (server: Legacy.Server) => ({}),
+    config(Joi: any) {
+      return Joi.object({
+        enabled: Joi.boolean().default(true),
+      }).default();
+    },
+  } as Legacy.PluginSpecOptions);
+
+// eslint-disable-next-line import/no-default-export
+export default metricPluginInitializer;

src/legacy/core_plugins/metric_vis/public/__tests__/metric_vis.js

@@ -23,17 +23,24 @@ import expect from '@kbn/expect';
 
 import { VisProvider } from 'ui/vis';
 import LogstashIndexPatternStubProvider from 'fixtures/stubbed_logstash_index_pattern';
-import MetricVisProvider from '../metric_vis';
 
-describe('metric vis', () => {
+import { visualizations } from '../../../visualizations/public';
+import { createMetricVisTypeDefinition } from '../metric_vis_type';
+
+describe('metric_vis - createMetricVisTypeDefinition', () => {
   let setup = null;
   let vis;
 
   beforeEach(ngMock.module('kibana'));
   beforeEach(ngMock.inject((Private) => {
     setup = () => {
       const Vis = Private(VisProvider);
-      const metricVisType = Private(MetricVisProvider);
+      const metricVisType = createMetricVisTypeDefinition();
+
+      visualizations.types.VisTypesRegistryProvider.register(() =>
+        metricVisType
+      );
+
       const indexPattern = Private(LogstashIndexPatternStubProvider);
 
       indexPattern.stubSetFieldFormat('ip', 'url', {

src/legacy/core_plugins/metric_vis/public/__tests__/metric_vis_controller.js

@@ -18,9 +18,9 @@
  */
 
 import expect from '@kbn/expect';
-import { MetricVisComponent } from '../metric_vis_controller';
+import { MetricVisComponent } from '../components/metric_vis_controller';
 
-describe('metric vis controller', function () {
+describe('metric_vis - controller', function () {
 
   const vis = {
     params: {

src/legacy/core_plugins/metric_vis/public/metric_vis_controller.js → src/legacy/core_plugins/metric_vis/public/components/metric_vis_controller.js

@@ -17,21 +17,21 @@
  * under the License.
  */
 
-import _ from 'lodash';
+import { last, findIndex, isNaN } from 'lodash';
 import React, { Component } from 'react';
+import { isColorDark } from '@elastic/eui';
 import { getHeatmapColors } from 'ui/vislib/components/color/heatmap_color';
 import { getFormat } from 'ui/visualize/loader/pipeline_helpers/utilities';
-import { isColorDark } from '@elastic/eui';
 
-import { MetricVisValue } from './components/metric_vis_value';
+import { MetricVisValue } from './metric_vis_value';
 
 export class MetricVisComponent extends Component {
 
   _getLabels() {
     const config = this.props.visParams.metric;
     const isPercentageMode = config.percentageMode;
     const colorsRange = config.colorsRange;
-    const max = _.last(colorsRange).to;
+    const max = last(colorsRange).to;
     const labels = [];
     colorsRange.forEach(range => {
       const from = isPercentageMode ? Math.round(100 * range.from / max) : range.from;
@@ -59,7 +59,7 @@ export class MetricVisComponent extends Component {
 
   _getBucket(val) {
     const config = this.props.visParams.metric;
-    let bucket = _.findIndex(config.colorsRange, range => {
+    let bucket = findIndex(config.colorsRange, range => {
       return range.from <= val && range.to > val;
     });
 
@@ -86,7 +86,7 @@ export class MetricVisComponent extends Component {
   }
 
   _getFormattedValue = (fieldFormatter, value, format = 'text') => {
-    if (_.isNaN(value)) return '-';
+    if (isNaN(value)) return '-';
     return fieldFormatter.convert(value, format);
   };
 
@@ -95,7 +95,7 @@ export class MetricVisComponent extends Component {
     const dimensions = this.props.visParams.dimensions;
     const isPercentageMode = config.percentageMode;
     const min = config.colorsRange[0].from;
-    const max = _.last(config.colorsRange).to;
+    const max = last(config.colorsRange).to;
     const colors = this._getColors();
     const labels = this._getLabels();
     const metrics = [];

src/legacy/core_plugins/metric_vis/public/components/metric_vis_params/index.js

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { MetricVisParams } from './metric_vis_params';

src/legacy/core_plugins/metric_vis/public/metric_vis_params.js → src/legacy/core_plugins/metric_vis/public/components/metric_vis_params/metric_vis_params.js

@@ -17,14 +17,11 @@
  * under the License.
  */
 
-import { uiModules } from 'ui/modules';
+import _ from 'lodash';
 import { i18n } from '@kbn/i18n';
-import 'ui/directives/inequality';
 import metricVisParamsTemplate from './metric_vis_params.html';
-import _ from 'lodash';
-const module = uiModules.get('kibana');
 
-module.directive('metricVisParams', function () {
+export function MetricVisParams() {
   return {
     restrict: 'E',
     template: metricVisParamsTemplate,
@@ -84,6 +81,6 @@ module.directive('metricVisParams', function () {
 
       $scope.editorState.requiredDescription = i18n.translate(
         'metricVis.params.ranges.warning.requiredDescription', { defaultMessage: 'Required:' });
-    }
+    },
   };
-});
+}

src/legacy/core_plugins/metric_vis/index.js → src/legacy/core_plugins/metric_vis/public/index.ts

@@ -17,20 +17,9 @@
  * under the License.
  */
 
-import { resolve } from 'path';
-
-export default function (kibana) {
-
-  return new kibana.Plugin({
-
-    uiExports: {
-      visTypes: [
-        'plugins/metric_vis/metric_vis'
-      ],
-      interpreter: ['plugins/metric_vis/metric_vis_fn'],
-      styleSheetPaths: resolve(__dirname, 'public/index.scss'),
-    }
-
-  });
+import { PluginInitializerContext } from '../../../../core/public';
+import { MetricVisPlugin as Plugin } from './plugin';
 
+export function plugin(initializerContext: PluginInitializerContext) {
+  return new Plugin(initializerContext);
 }

src/legacy/core_plugins/metric_vis/public/legacy.ts

@@ -0,0 +1,40 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { PluginInitializerContext } from 'kibana/public';
+import { npSetup, npStart } from 'ui/new_platform';
+
+import { visualizations } from '../../visualizations/public';
+import { MetricVisPluginSetupDependencies } from './plugin';
+import { LegacyDependenciesPlugin } from './shim';
+import { plugin } from '.';
+
+const plugins: Readonly<MetricVisPluginSetupDependencies> = {
+  visualizations,
+  data: npSetup.plugins.data,
+
+  // Temporary solution
+  // It will be removed when all dependent services are migrated to the new platform.
+  __LEGACY: new LegacyDependenciesPlugin(),
+};
+
+const pluginInstance = plugin({} as PluginInitializerContext);
+
+export const setup = pluginInstance.setup(npSetup.core, plugins);
+export const start = pluginInstance.start(npStart.core);

src/legacy/core_plugins/metric_vis/public/metric_vis_fn.test.js → src/legacy/core_plugins/metric_vis/public/metric_vis_fn.test.ts

@@ -17,13 +17,15 @@
  * under the License.
  */
 
+import { createMetricVisFn } from './metric_vis_fn';
+
+// @ts-ignore
 import { functionWrapper } from '../../interpreter/test_helpers';
-import { metric } from './metric_vis_fn';
 
 jest.mock('ui/new_platform');
 
 describe('interpreter/functions#metric', () => {
-  const fn = functionWrapper(metric);
+  const fn = functionWrapper(createMetricVisFn);
   const context = {
     type: 'kibana_datatable',
     rows: [{ 'col-0-1': 0 }],
@@ -38,7 +40,7 @@ describe('interpreter/functions#metric', () => {
       {
         from: 0,
         to: 10000,
-      }
+      },
     ],
     labels: {
       show: true,
@@ -56,16 +58,17 @@ describe('interpreter/functions#metric', () => {
       {
         accessor: 0,
         format: {
-          id: 'number'
+          id: 'number',
         },
         params: {},
         aggType: 'count',
-      }
-    ]
+      },
+    ],
   };
 
   it('returns an object with the correct structure', () => {
     const actual = fn(context, args);
+
     expect(actual).toMatchSnapshot();
   });
 });