From 51c48b7c3c40877160ab87ec1a0190f23f74370b Mon Sep 17 00:00:00 2001 From: Alexey Antonov Date: Mon, 5 Aug 2019 10:59:40 +0300 Subject: [PATCH] [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 | 44 ++++++ ...est.js.snap => metric_vis_fn.test.ts.snap} | 0 .../metric_vis/public/__tests__/metric_vis.js | 13 +- .../public/__tests__/metric_vis_controller.js | 4 +- .../{ => components}/metric_vis_controller.js | 14 +- .../components/metric_vis_params/index.js | 20 +++ .../metric_vis_params}/metric_vis_params.html | 0 .../metric_vis_params}/metric_vis_params.js | 11 +- .../metric_vis/{index.js => public/index.ts} | 19 +-- .../core_plugins/metric_vis/public/legacy.ts | 40 +++++ ...c_vis_fn.test.js => metric_vis_fn.test.ts} | 15 +- .../{metric_vis_fn.js => metric_vis_fn.ts} | 137 +++++++++++++----- .../{metric_vis.js => metric_vis_type.ts} | 97 +++++++------ .../core_plugins/metric_vis/public/plugin.ts | 57 ++++++++ .../metric_vis/public/shim/index.ts | 20 +++ .../public/shim/legacy_dependencies_plugin.ts | 31 ++++ .../public/shim/metric_vis_legacy_module.ts | 31 ++++ .../ui/public/agg_types/__tests__/agg_type.js | 2 - 18 files changed, 432 insertions(+), 123 deletions(-) create mode 100644 src/legacy/core_plugins/metric_vis/index.ts rename src/legacy/core_plugins/metric_vis/public/__snapshots__/{metric_vis_fn.test.js.snap => metric_vis_fn.test.ts.snap} (100%) rename src/legacy/core_plugins/metric_vis/public/{ => components}/metric_vis_controller.js (95%) create mode 100644 src/legacy/core_plugins/metric_vis/public/components/metric_vis_params/index.js rename src/legacy/core_plugins/metric_vis/public/{ => components/metric_vis_params}/metric_vis_params.html (100%) rename src/legacy/core_plugins/metric_vis/public/{ => components/metric_vis_params}/metric_vis_params.js (94%) rename src/legacy/core_plugins/metric_vis/{index.js => public/index.ts} (71%) create mode 100644 src/legacy/core_plugins/metric_vis/public/legacy.ts rename src/legacy/core_plugins/metric_vis/public/{metric_vis_fn.test.js => metric_vis_fn.test.ts} (91%) rename src/legacy/core_plugins/metric_vis/public/{metric_vis_fn.js => metric_vis_fn.ts} (59%) rename src/legacy/core_plugins/metric_vis/public/{metric_vis.js => metric_vis_type.ts} (64%) create mode 100644 src/legacy/core_plugins/metric_vis/public/plugin.ts create mode 100644 src/legacy/core_plugins/metric_vis/public/shim/index.ts create mode 100644 src/legacy/core_plugins/metric_vis/public/shim/legacy_dependencies_plugin.ts create mode 100644 src/legacy/core_plugins/metric_vis/public/shim/metric_vis_legacy_module.ts diff --git a/src/legacy/core_plugins/metric_vis/index.ts b/src/legacy/core_plugins/metric_vis/index.ts new file mode 100644 index 0000000000000..f77234a26ce48 --- /dev/null +++ b/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; diff --git a/src/legacy/core_plugins/metric_vis/public/__snapshots__/metric_vis_fn.test.js.snap b/src/legacy/core_plugins/metric_vis/public/__snapshots__/metric_vis_fn.test.ts.snap similarity index 100% rename from src/legacy/core_plugins/metric_vis/public/__snapshots__/metric_vis_fn.test.js.snap rename to src/legacy/core_plugins/metric_vis/public/__snapshots__/metric_vis_fn.test.ts.snap diff --git a/src/legacy/core_plugins/metric_vis/public/__tests__/metric_vis.js b/src/legacy/core_plugins/metric_vis/public/__tests__/metric_vis.js index a8bfec6c86203..7adf7007e8603 100644 --- a/src/legacy/core_plugins/metric_vis/public/__tests__/metric_vis.js +++ b/src/legacy/core_plugins/metric_vis/public/__tests__/metric_vis.js @@ -23,9 +23,11 @@ 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; @@ -33,7 +35,12 @@ describe('metric vis', () => { 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', { diff --git a/src/legacy/core_plugins/metric_vis/public/__tests__/metric_vis_controller.js b/src/legacy/core_plugins/metric_vis/public/__tests__/metric_vis_controller.js index 82ef6f2de50be..8dd2b093c6f91 100644 --- a/src/legacy/core_plugins/metric_vis/public/__tests__/metric_vis_controller.js +++ b/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: { diff --git a/src/legacy/core_plugins/metric_vis/public/metric_vis_controller.js b/src/legacy/core_plugins/metric_vis/public/components/metric_vis_controller.js similarity index 95% rename from src/legacy/core_plugins/metric_vis/public/metric_vis_controller.js rename to src/legacy/core_plugins/metric_vis/public/components/metric_vis_controller.js index ecbb9d917874c..a13df1f7e52ef 100644 --- a/src/legacy/core_plugins/metric_vis/public/metric_vis_controller.js +++ b/src/legacy/core_plugins/metric_vis/public/components/metric_vis_controller.js @@ -17,13 +17,13 @@ * 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 { @@ -31,7 +31,7 @@ export class MetricVisComponent extends Component { 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 = []; diff --git a/src/legacy/core_plugins/metric_vis/public/components/metric_vis_params/index.js b/src/legacy/core_plugins/metric_vis/public/components/metric_vis_params/index.js new file mode 100644 index 0000000000000..3db93663b625d --- /dev/null +++ b/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'; diff --git a/src/legacy/core_plugins/metric_vis/public/metric_vis_params.html b/src/legacy/core_plugins/metric_vis/public/components/metric_vis_params/metric_vis_params.html similarity index 100% rename from src/legacy/core_plugins/metric_vis/public/metric_vis_params.html rename to src/legacy/core_plugins/metric_vis/public/components/metric_vis_params/metric_vis_params.html diff --git a/src/legacy/core_plugins/metric_vis/public/metric_vis_params.js b/src/legacy/core_plugins/metric_vis/public/components/metric_vis_params/metric_vis_params.js similarity index 94% rename from src/legacy/core_plugins/metric_vis/public/metric_vis_params.js rename to src/legacy/core_plugins/metric_vis/public/components/metric_vis_params/metric_vis_params.js index b913d4afaebba..26c674961dd0b 100644 --- a/src/legacy/core_plugins/metric_vis/public/metric_vis_params.js +++ b/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:' }); - } + }, }; -}); +} diff --git a/src/legacy/core_plugins/metric_vis/index.js b/src/legacy/core_plugins/metric_vis/public/index.ts similarity index 71% rename from src/legacy/core_plugins/metric_vis/index.js rename to src/legacy/core_plugins/metric_vis/public/index.ts index 3738baccb5c51..7499babef58a7 100644 --- a/src/legacy/core_plugins/metric_vis/index.js +++ b/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); } diff --git a/src/legacy/core_plugins/metric_vis/public/legacy.ts b/src/legacy/core_plugins/metric_vis/public/legacy.ts new file mode 100644 index 0000000000000..4ab399977d7b1 --- /dev/null +++ b/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 = { + 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); diff --git a/src/legacy/core_plugins/metric_vis/public/metric_vis_fn.test.js b/src/legacy/core_plugins/metric_vis/public/metric_vis_fn.test.ts similarity index 91% rename from src/legacy/core_plugins/metric_vis/public/metric_vis_fn.test.js rename to src/legacy/core_plugins/metric_vis/public/metric_vis_fn.test.ts index f1705d644c9cb..5fe2ac7b7fdf0 100644 --- a/src/legacy/core_plugins/metric_vis/public/metric_vis_fn.test.js +++ b/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(); }); }); diff --git a/src/legacy/core_plugins/metric_vis/public/metric_vis_fn.js b/src/legacy/core_plugins/metric_vis/public/metric_vis_fn.ts similarity index 59% rename from src/legacy/core_plugins/metric_vis/public/metric_vis_fn.js rename to src/legacy/core_plugins/metric_vis/public/metric_vis_fn.ts index 1ba28866d4e4b..9fabb5b3a49a5 100644 --- a/src/legacy/core_plugins/metric_vis/public/metric_vis_fn.js +++ b/src/legacy/core_plugins/metric_vis/public/metric_vis_fn.ts @@ -17,85 +17,149 @@ * under the License. */ -import { functionsRegistry } from 'plugins/interpreter/registries'; import { i18n } from '@kbn/i18n'; + +// @ts-ignore import { vislibColorMaps } from 'ui/vislib/components/color/colormaps'; +import { ExpressionFunction, KibanaDatatable, Render, Range, Style } from '../../interpreter/types'; + +type Context = KibanaDatatable; + +const name = 'metricVis'; + +interface Arguments { + percentage: boolean; + colorScheme: string; + colorMode: string; + useRanges: boolean; + invertColors: boolean; + showLabels: boolean; + bgFill: string; + subText: string; + colorRange: Range[]; + font: Style; + metric: any[]; // these aren't typed yet + bucket: any; // these aren't typed yet +} + +interface VisParams { + dimensions: DimensionsVisParam; + metric: MetricVisParam; +} + +interface DimensionsVisParam { + metrics: any; + bucket?: any; +} -export const metric = () => ({ - name: 'metricVis', +interface MetricVisParam { + percentageMode: Arguments['percentage']; + useRanges: Arguments['useRanges']; + colorSchema: Arguments['colorScheme']; + metricColorMode: Arguments['colorMode']; + colorsRange: Arguments['colorRange']; + labels: { + show: Arguments['showLabels']; + }; + invertColors: Arguments['invertColors']; + style: { + bgFill: Arguments['bgFill']; + bgColor: boolean; + labelColor: boolean; + subText: Arguments['subText']; + fontSize: number; + }; +} + +interface RenderValue { + visType: 'metric'; + visData: Context; + visConfig: VisParams; + params: any; +} + +type Return = Render; + +export const createMetricVisFn = (): ExpressionFunction< + typeof name, + Context, + Arguments, + Return +> => ({ + name, type: 'render', context: { - types: [ - 'kibana_datatable' - ], + types: ['kibana_datatable'], }, help: i18n.translate('metricVis.function.help', { - defaultMessage: 'Metric visualization' + defaultMessage: 'Metric visualization', }), args: { percentage: { types: ['boolean'], default: false, help: i18n.translate('metricVis.function.percentage.help', { - defaultMessage: 'Shows metric in percentage mode. Requires colorRange to be set.' - }) + defaultMessage: 'Shows metric in percentage mode. Requires colorRange to be set.', + }), }, colorScheme: { types: ['string'], default: '"Green to Red"', - options: Object.values(vislibColorMaps).map(value => value.id), + options: Object.values(vislibColorMaps).map((value: any) => value.id), help: i18n.translate('metricVis.function.colorScheme.help', { - defaultMessage: 'Color scheme to use' - }) + defaultMessage: 'Color scheme to use', + }), }, colorMode: { types: ['string'], default: '"None"', options: ['None', 'Label', 'Background'], help: i18n.translate('metricVis.function.colorMode.help', { - defaultMessage: 'Which part of metric to color' - }) + defaultMessage: 'Which part of metric to color', + }), }, colorRange: { types: ['range'], multi: true, help: i18n.translate('metricVis.function.colorRange.help', { - defaultMessage: 'A range object specifying groups of values to which different colors should be applied.' - }) + defaultMessage: + 'A range object specifying groups of values to which different colors should be applied.', + }), }, useRanges: { types: ['boolean'], default: false, help: i18n.translate('metricVis.function.useRanges.help', { - defaultMessage: 'Enabled color ranges.' - }) + defaultMessage: 'Enabled color ranges.', + }), }, invertColors: { types: ['boolean'], default: false, help: i18n.translate('metricVis.function.invertColors.help', { - defaultMessage: 'Inverts the color ranges' - }) + defaultMessage: 'Inverts the color ranges', + }), }, showLabels: { types: ['boolean'], default: true, help: i18n.translate('metricVis.function.showLabels.help', { - defaultMessage: 'Shows labels under the metric values.' - }) + defaultMessage: 'Shows labels under the metric values.', + }), }, bgFill: { types: ['string'], default: '"#000"', aliases: ['backgroundFill', 'bgColor', 'backgroundColor'], help: i18n.translate('metricVis.function.bgFill.help', { - defaultMessage: 'Color as html hex code (#123456), html color (red, blue) or rgba value (rgba(255,255,255,1)).' - }) + defaultMessage: + 'Color as html hex code (#123456), html color (red, blue) or rgba value (rgba(255,255,255,1)).', + }), }, font: { types: ['style'], help: i18n.translate('metricVis.function.font.help', { - defaultMessage: 'Font settings.' + defaultMessage: 'Font settings.', }), default: '{font size=60}', }, @@ -104,13 +168,13 @@ export const metric = () => ({ aliases: ['label', 'text', 'description'], default: '""', help: i18n.translate('metricVis.function.subText.help', { - defaultMessage: 'Custom text to show under the metric' - }) + defaultMessage: 'Custom text to show under the metric', + }), }, metric: { types: ['vis_dimension'], help: i18n.translate('metricVis.function.metric.help', { - defaultMessage: 'metric dimension configuration' + defaultMessage: 'metric dimension configuration', }), required: true, multi: true, @@ -118,13 +182,12 @@ export const metric = () => ({ bucket: { types: ['vis_dimension'], help: i18n.translate('metricVis.function.bucket.help', { - defaultMessage: 'bucket dimension configuration' + defaultMessage: 'bucket dimension configuration', }), }, }, - fn(context, args) { - - const dimensions = { + fn(context: Context, args: Arguments) { + const dimensions: DimensionsVisParam = { metrics: args.metric, }; @@ -133,10 +196,10 @@ export const metric = () => ({ } if (args.percentage && (!args.colorRange || args.colorRange.length === 0)) { - throw new Error ('colorRange must be provided when using percentage'); + throw new Error('colorRange must be provided when using percentage'); } - const fontSize = parseInt(args.font.spec.fontSize); + const fontSize = Number.parseInt(args.font.spec.fontSize, 10); return { type: 'render', @@ -161,16 +224,14 @@ export const metric = () => ({ labelColor: args.colorMode === 'Labels', subText: args.subText, fontSize, - } + }, }, dimensions, }, params: { listenOnChange: true, - } + }, }, }; }, }); - -functionsRegistry.register(metric); diff --git a/src/legacy/core_plugins/metric_vis/public/metric_vis.js b/src/legacy/core_plugins/metric_vis/public/metric_vis_type.ts similarity index 64% rename from src/legacy/core_plugins/metric_vis/public/metric_vis.js rename to src/legacy/core_plugins/metric_vis/public/metric_vis_type.ts index 70ccab3af97d4..02123f616e59f 100644 --- a/src/legacy/core_plugins/metric_vis/public/metric_vis.js +++ b/src/legacy/core_plugins/metric_vis/public/metric_vis_type.ts @@ -17,30 +17,25 @@ * under the License. */ -import './metric_vis_params'; import { i18n } from '@kbn/i18n'; -import { VisFactoryProvider } from 'ui/vis/vis_factory'; + +// @ts-ignore import { Schemas } from 'ui/vis/editors/default/schemas'; -import { VisTypesRegistryProvider } from 'ui/registry/vis_types'; +// @ts-ignore import { vislibColorMaps } from 'ui/vislib/components/color/colormaps'; -import { MetricVisComponent } from './metric_vis_controller'; -// we need to load the css ourselves - -// we also need to load the controller and used by the template +// @ts-ignore +import { MetricVisComponent } from './components/metric_vis_controller'; -// register the provider with the visTypes registry -VisTypesRegistryProvider.register(MetricVisProvider); +import { visFactory } from '../../visualizations/public'; -function MetricVisProvider(Private) { - const VisFactory = Private(VisFactoryProvider); - - // return the visType object, which kibana will use to display and configure new - // Vis object of this type. - return VisFactory.createReactVisualization({ +export const createMetricVisTypeDefinition = () => { + return visFactory.createReactVisualization({ name: 'metric', title: i18n.translate('metricVis.metricTitle', { defaultMessage: 'Metric' }), icon: 'visMetric', - description: i18n.translate('metricVis.metricDescription', { defaultMessage: 'Display a calculation as a single number' }), + description: i18n.translate('metricVis.metricDescription', { + defaultMessage: 'Display a calculation as a single number', + }), visConfig: { component: MetricVisComponent, defaults: { @@ -52,11 +47,9 @@ function MetricVisProvider(Private) { useRanges: false, colorSchema: 'Green to Red', metricColorMode: 'None', - colorsRange: [ - { from: 0, to: 10000 } - ], + colorsRange: [{ from: 0, to: 10000 }], labels: { - show: true + show: true, }, invertColors: false, style: { @@ -65,27 +58,36 @@ function MetricVisProvider(Private) { labelColor: false, subText: '', fontSize: 60, - } - } - } + }, + }, + }, }, editorConfig: { collections: { metricColorMode: [ { id: 'None', - label: i18n.translate('metricVis.colorModes.noneOptionLabel', { defaultMessage: 'None' }) + label: i18n.translate('metricVis.colorModes.noneOptionLabel', { + defaultMessage: 'None', + }), }, { id: 'Labels', - label: i18n.translate('metricVis.colorModes.labelsOptionLabel', { defaultMessage: 'Labels' }) + label: i18n.translate('metricVis.colorModes.labelsOptionLabel', { + defaultMessage: 'Labels', + }), }, { id: 'Background', - label: i18n.translate('metricVis.colorModes.backgroundOptionLabel', { defaultMessage: 'Background' }) - } + label: i18n.translate('metricVis.colorModes.backgroundOptionLabel', { + defaultMessage: 'Background', + }), + }, ], - colorSchemas: Object.values(vislibColorMaps).map(value => ({ id: value.id, label: value.label })), + colorSchemas: Object.values(vislibColorMaps).map((value: any) => ({ + id: value.id, + label: value.label, + })), }, optionsTemplate: '', schemas: new Schemas([ @@ -95,28 +97,37 @@ function MetricVisProvider(Private) { title: i18n.translate('metricVis.schemas.metricTitle', { defaultMessage: 'Metric' }), min: 1, aggFilter: [ - '!std_dev', '!geo_centroid', - '!derivative', '!serial_diff', '!moving_avg', '!cumulative_sum', '!geo_bounds'], + '!std_dev', + '!geo_centroid', + '!derivative', + '!serial_diff', + '!moving_avg', + '!cumulative_sum', + '!geo_bounds', + ], aggSettings: { top_hits: { - allowStrings: true + allowStrings: true, }, }, defaults: [ - { type: 'count', schema: 'metric' } - ] - }, { + { + type: 'count', + schema: 'metric', + }, + ], + }, + { group: 'buckets', name: 'group', - title: i18n.translate('metricVis.schemas.splitGroupTitle', { defaultMessage: 'Split group' }), + title: i18n.translate('metricVis.schemas.splitGroupTitle', { + defaultMessage: 'Split group', + }), min: 0, max: 1, - aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'] - } - ]) - } + aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'], + }, + ]), + }, }); -} - -// export the provider so that the visType can be required with Private() -export default MetricVisProvider; +}; diff --git a/src/legacy/core_plugins/metric_vis/public/plugin.ts b/src/legacy/core_plugins/metric_vis/public/plugin.ts new file mode 100644 index 0000000000000..d99df03fcc560 --- /dev/null +++ b/src/legacy/core_plugins/metric_vis/public/plugin.ts @@ -0,0 +1,57 @@ +/* + * 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, CoreSetup, CoreStart, Plugin } from '../../../../core/public'; +import { LegacyDependenciesPlugin } from './shim'; +import { Plugin as DataPublicPlugin } from '../../../../plugins/data/public'; +import { VisualizationsSetup } from '../../visualizations/public'; + +import { createMetricVisFn } from './metric_vis_fn'; +// @ts-ignore +import { createMetricVisTypeDefinition } from './metric_vis_type'; + +/** @internal */ +export interface MetricVisPluginSetupDependencies { + data: ReturnType; + visualizations: VisualizationsSetup; + __LEGACY: LegacyDependenciesPlugin; +} + +/** @internal */ +export class MetricVisPlugin implements Plugin { + initializerContext: PluginInitializerContext; + + constructor(initializerContext: PluginInitializerContext) { + this.initializerContext = initializerContext; + } + + public setup( + core: CoreSetup, + { data, visualizations, __LEGACY }: MetricVisPluginSetupDependencies + ) { + __LEGACY.setup(); + + data.expressions.registerFunction(createMetricVisFn); + visualizations.types.VisTypesRegistryProvider.register(createMetricVisTypeDefinition); + } + + public start(core: CoreStart) { + // nothing to do here yet + } +} diff --git a/src/legacy/core_plugins/metric_vis/public/shim/index.ts b/src/legacy/core_plugins/metric_vis/public/shim/index.ts new file mode 100644 index 0000000000000..cfc7b62ff4f86 --- /dev/null +++ b/src/legacy/core_plugins/metric_vis/public/shim/index.ts @@ -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 * from './legacy_dependencies_plugin'; diff --git a/src/legacy/core_plugins/metric_vis/public/shim/legacy_dependencies_plugin.ts b/src/legacy/core_plugins/metric_vis/public/shim/legacy_dependencies_plugin.ts new file mode 100644 index 0000000000000..9d5f49882ab8c --- /dev/null +++ b/src/legacy/core_plugins/metric_vis/public/shim/legacy_dependencies_plugin.ts @@ -0,0 +1,31 @@ +/* + * 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 { CoreStart, Plugin } from 'kibana/public'; +import { initMetricVisLegacyModule } from './metric_vis_legacy_module'; + +export class LegacyDependenciesPlugin implements Plugin { + public setup() { + // Init kibana/metric_vis AngularJS module. + initMetricVisLegacyModule(); + } + + public start(core: CoreStart) { + // nothing to do here yet + } +} diff --git a/src/legacy/core_plugins/metric_vis/public/shim/metric_vis_legacy_module.ts b/src/legacy/core_plugins/metric_vis/public/shim/metric_vis_legacy_module.ts new file mode 100644 index 0000000000000..25942b13a4103 --- /dev/null +++ b/src/legacy/core_plugins/metric_vis/public/shim/metric_vis_legacy_module.ts @@ -0,0 +1,31 @@ +/* + * 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 { once } from 'lodash'; + +// @ts-ignore +import { uiModules } from 'ui/modules'; +// @ts-ignore +import 'ui/directives/inequality'; +// @ts-ignore +import { MetricVisParams } from '../components/metric_vis_params'; + +/** @internal */ +export const initMetricVisLegacyModule = once((): void => { + uiModules.get('kibana/metric_vis', ['kibana']).directive('metricVisParams', MetricVisParams); +}); diff --git a/src/legacy/ui/public/agg_types/__tests__/agg_type.js b/src/legacy/ui/public/agg_types/__tests__/agg_type.js index 496e5515c75ef..985ddfb4b2bf6 100644 --- a/src/legacy/ui/public/agg_types/__tests__/agg_type.js +++ b/src/legacy/ui/public/agg_types/__tests__/agg_type.js @@ -93,7 +93,6 @@ describe('AggType Class', function () { const aggType = new AggType({}); let vis = new Vis(indexPattern, { - type: 'histogram', aggs: [ { type: 'date_histogram', @@ -107,7 +106,6 @@ describe('AggType Class', function () { expect(aggType.getFormat(aggConfig)).to.be(fieldFormats.getDefaultInstance('date')); vis = new Vis(indexPattern, { - type: 'metric', aggs: [ { type: 'count',