From 3000221fac3f7e0ae576ec1267c962e8400be11a Mon Sep 17 00:00:00 2001 From: Peter Pisljar Date: Fri, 7 Jul 2017 17:10:32 +0200 Subject: [PATCH] Visualize Refactor (#11786) * converting Vis to es6 class * , and * editor, responseHandler and requestHandler registries * updating visualize editor app * vis, default editor, request handlers and vis types * updating vis types * updating kibana to work with new visualize * migrating existing visualizations * fixing bugs with rebase fixing tests fixing tsvb auto apply button fix tsvb resizing issue update scope.$apply for react editor components re-render react component when vis.params are updated (#12347) fixing heatmap remove obsolete maps_renderbot indirection remove cruft/ remove custom resizing and hook into global event fixing brush event fixing resize event for vislib_vis_type fixing legend changing based on nathans review * fixing tests * fixing renderComplete issues with editor * map updates * fixing maps zoom * fixing based on nathans review * fixing render complete issue and doulbe rendering with maps * trying to get maps in order .... wip * removing resize method from visualizations * changing the rendering process a bit * fixing metric chart type auto changing * minor simplifications in coordinate map viz * more simplications now we only have single render * minor fixes * do not recreate layer when not necessary * minor changes * fixing maps bounding box filter * fixing desaturation option * fix zoom settings when toggling between WMS/basemap * adding status to the render method (to figure out what changed) * fixing legend open icon going out of page * skip index selection for timelion * timelion brush fix * fixing circular json issue * fix faulty rebase * fixing updateStatus * removing timelion requesthandler registration * removing double slash * fixing maps * add debug statement * test CI with guard statement * fixing rebase --- .../kbn_vislib_vis_types/public/area.js | 165 +++++----- .../public/controls/gauge_options.html | 6 +- .../public/controls/gauge_options.js | 2 +- .../public/controls/heatmap_options.html | 8 +- .../public/controls/heatmap_options.js | 3 + .../controls/point_series/category_axis.html | 2 +- .../public/controls/point_series/series.html | 6 +- .../public/controls/point_series/series.js | 2 +- .../controls/point_series/value_axes.html | 6 +- .../public/controls/vislib_basic_options.html | 2 +- .../public/editors/__tests__/point_series.js | 2 +- .../public/editors/heatmap.html | 2 +- .../kbn_vislib_vis_types/public/gauge.js | 74 ++--- .../kbn_vislib_vis_types/public/goal.js | 72 +++-- .../kbn_vislib_vis_types/public/heatmap.js | 125 ++++---- .../kbn_vislib_vis_types/public/histogram.js | 166 +++++----- .../public/horizontal_bar.js | 159 +++++----- .../public/kbn_vislib_vis_types.js | 2 - .../kbn_vislib_vis_types/public/line.js | 165 +++++----- .../kbn_vislib_vis_types/public/metric.js | 72 +++-- .../kbn_vislib_vis_types/public/pie.js | 115 +++---- .../kbn_vislib_vis_types/public/tile_map.js | 80 ----- .../kibana/public/dashboard/dashboard.html | 2 + .../kibana/public/dashboard/dashboard.js | 1 + .../kibana/public/dashboard/grid.js | 2 + .../kibana/public/dashboard/panel/panel.html | 4 +- .../kibana/public/dashboard/panel/panel.js | 3 +- .../public/discover/controllers/discover.js | 6 +- .../kibana/public/discover/index.html | 9 +- .../public/visualize/editor/add_bucket_agg.js | 0 .../public/visualize/editor/editor.html | 59 +--- .../kibana/public/visualize/editor/editor.js | 175 ++-------- .../visualize/editor/styles/_editor.less | 10 +- .../public/visualize/editor/vis_options.js | 35 -- .../kibana/public/visualize/index.js | 27 +- .../kibana/public/visualize/wizard/wizard.js | 22 +- .../__tests__/markdown_vis_controller.js | 1 + .../markdown_vis/public/markdown_vis.js | 21 +- .../public/markdown_vis_controller.js | 4 +- .../metrics/public/components/vis_editor.js | 45 ++- .../metrics/public/directives/vis_editor.js | 37 --- .../public/directives/visualization.js | 46 --- .../metrics/public/kbn_vis_types/editor.html | 5 - .../public/kbn_vis_types/editor_controller.js | 139 ++------ .../metrics/public/kbn_vis_types/index.js | 65 ++-- .../public/kbn_vis_types/request_handler.js | 69 ++++ .../metrics/public/kbn_vis_types/vis.html | 4 - .../public/kbn_vis_types/vis_controller.js | 49 --- .../metrics/public/less/editor.less | 3 + .../metrics/public/lib/__tests__/add_scope.js | 58 ---- .../lib/__tests__/create_brush_handler.js | 14 +- .../metrics/public/lib/add_scope.js | 33 -- .../public/lib/create_brush_handler.js | 13 +- src/core_plugins/metrics/public/lib/fetch.js | 42 --- .../metrics/public/lib/fetch_fields.js | 44 +-- .../region_map/public/choropleth_layer.js | 2 +- .../public/region_map_controller.js | 15 +- .../region_map/public/region_map_vis.js | 97 +++--- .../public/region_map_vis_params.html | 6 +- .../public/region_map_vis_params.js | 10 +- .../spy_modes/public/table_spy_mode.js | 6 +- .../table_vis/public/__tests__/_table_vis.js | 34 +- .../public/__tests__/_table_vis_controller.js | 1 + .../table_vis/public/table_vis.js | 69 ++-- .../table_vis/public/table_vis_controller.js | 2 +- .../tagcloud/public/tag_cloud_controller.js | 16 +- .../tagcloud/public/tag_cloud_vis.js | 71 +++-- .../tagcloud/public/tag_cloud_vis_params.html | 4 +- .../tagcloud/public/tag_cloud_vis_params.js | 3 + src/core_plugins/tile_map/index.js | 8 + src/core_plugins/tile_map/package.json | 4 + .../public}/__tests__/geohash_layer.js | 4 +- .../public}/__tests__/geohash_sample_data.js | 0 .../tile_map/public}/__tests__/kibana_map.js | 2 +- .../public}/__tests__/service_settings.js | 25 +- .../public/editors/tile_map.html | 6 +- .../tile_map/public}/geohash_layer.js | 0 .../tile_map/public/images/icon-tilemap.svg | 16 + .../tile_map/public}/kibana_map.js | 7 +- .../tile_map/public}/kibana_map_layer.js | 0 .../tile_map/public}/lib/service_settings.js | 0 .../tile_map/public/maps_visualization.js | 270 ++++++++++++++++ .../tile_map/public}/markers/geohash_grid.js | 0 .../tile_map/public}/markers/heatmap.js | 0 .../public}/markers/scaled_circles.js | 1 - .../public}/markers/shaded_circles.js | 0 .../tile_map/public}/styles/_tilemap.less | 0 .../tile_map/public/tile_map_vis.js | 94 ++++++ .../public/panels/timechart/schema.js | 2 +- src/core_plugins/timelion/public/vis/index.js | 76 +++-- .../public/vis/timelion_request_handler.js | 48 +++ .../timelion/public/vis/timelion_vis.html | 2 +- .../public/vis/timelion_vis_controller.js | 73 +---- .../public/vis/timelion_vis_params.html | 2 +- .../vis/timelion_vis_params_controller.js | 12 - .../agg_types/__tests__/agg_param_writer.js | 25 +- src/ui/public/agg_types/buckets/terms.js | 2 +- .../metrics/lib/parent_pipeline_agg_helper.js | 2 +- .../lib/sibling_pipeline_agg_helper.js | 2 +- .../collapsible_sidebar.js | 2 + src/ui/public/registry/vis_editor_types.js | 7 + .../public/registry/vis_request_handlers.js | 6 + .../public/registry/vis_response_handlers.js | 6 + .../template_vis_type/template_renderbot.js | 27 -- .../template_vis_type/template_vis_type.js | 25 -- src/ui/public/test_harness/test_harness.js | 3 +- src/ui/public/timefilter/timefilter.js | 10 + src/ui/public/vis/__tests__/_agg_configs.js | 2 +- src/ui/public/vis/__tests__/_renderbot.js | 41 --- src/ui/public/vis/__tests__/_vis.js | 10 - .../response_handlers}/_build_chart_data.js | 4 +- .../vis/editors/default}/__tests__/agg.js | 2 +- .../editors/default}/__tests__/agg_params.js | 4 +- .../vis/editors/default}/advanced_toggle.html | 0 .../public/vis/editors/default}/agg.html | 2 +- .../public/vis/editors/default}/agg.js | 6 +- .../public/vis/editors/default}/agg_add.html | 0 .../public/vis/editors/default}/agg_add.js | 2 +- .../vis/editors/default}/agg_group.html | 2 +- .../public/vis/editors/default}/agg_group.js | 9 +- .../public/vis/editors/default}/agg_param.js | 0 .../vis/editors/default}/agg_params.html | 0 .../public/vis/editors/default}/agg_params.js | 8 +- .../vis/editors/default}/agg_select.html | 0 .../public/vis/editors/default/default.html | 7 + src/ui/public/vis/editors/default/default.js | 102 ++++++ .../vis/editors/default}/nesting_indicator.js | 0 .../vis/{ => editors/default}/schemas.js | 0 .../public/vis/editors/default}/sidebar.html | 20 +- .../public/vis/editors/default}/sidebar.js | 8 +- .../vis/editors/default}/vis_options.html | 4 +- .../public/vis/editors/default/vis_options.js | 63 ++++ src/ui/public/vis/renderbot.js | 50 --- src/ui/public/vis/request_handlers/courier.js | 51 +++ src/ui/public/vis/request_handlers/none.js | 12 + .../response_handlers/basic.js} | 62 ++-- src/ui/public/vis/response_handlers/none.js | 17 + src/ui/public/vis/response_handlers/tabify.js | 22 ++ src/ui/public/vis/update_status.js | 47 +++ src/ui/public/vis/vis.js | 299 +++++++++--------- src/ui/public/vis/vis_category.js | 8 + src/ui/public/vis/vis_factory.js | 23 ++ src/ui/public/vis/vis_type.js | 47 --- .../public/vis/vis_types/angular_vis_type.js | 60 ++++ src/ui/public/vis/vis_types/base_vis_type.js | 55 ++++ src/ui/public/vis/vis_types/index.js | 6 + src/ui/public/vis/vis_types/react_vis_type.js | 42 +++ .../public/vis/vis_types/vislib_vis_type.js | 65 ++++ src/ui/public/vis_maps/maps_renderbot.js | 262 --------------- src/ui/public/vis_maps/maps_vis_type.js | 22 -- src/ui/public/vislib/__tests__/vis.js | 19 -- src/ui/public/vislib/lib/handler.js | 2 +- .../public/vislib/lib/types/point_series.js | 2 +- src/ui/public/vislib/vis.js | 36 +-- .../public/vislib/visualizations/pie_chart.js | 4 +- .../__tests__/_vislib_renderbot.js | 173 ---------- .../public/vislib_vis_type/__tests__/index.js | 4 - .../vislib_vis_type/vislib_renderbot.js | 79 ----- .../public/vislib_vis_type/vislib_vis_type.js | 85 ----- .../public/visualize/__tests__/visualize.js | 20 +- src/ui/public/visualize/spy.js | 1 + src/ui/public/visualize/visualization.html | 17 + src/ui/public/visualize/visualization.js | 153 +++++++++ .../public/visualize/visualization_editor.js | 48 +++ src/ui/public/visualize/visualize.html | 48 +-- src/ui/public/visualize/visualize.js | 264 ++++++---------- src/ui/public/visualize/visualize.less | 4 +- src/ui/public/visualize/visualize_legend.js | 20 +- test/functional/apps/visualize/_region_map.js | 3 + .../functional/page_objects/visualize_page.js | 2 +- 170 files changed, 2826 insertions(+), 2992 deletions(-) delete mode 100644 src/core_plugins/kbn_vislib_vis_types/public/tile_map.js delete mode 100644 src/core_plugins/kibana/public/visualize/editor/add_bucket_agg.js delete mode 100644 src/core_plugins/kibana/public/visualize/editor/vis_options.js delete mode 100644 src/core_plugins/metrics/public/directives/vis_editor.js delete mode 100644 src/core_plugins/metrics/public/directives/visualization.js delete mode 100644 src/core_plugins/metrics/public/kbn_vis_types/editor.html create mode 100644 src/core_plugins/metrics/public/kbn_vis_types/request_handler.js delete mode 100644 src/core_plugins/metrics/public/kbn_vis_types/vis.html delete mode 100644 src/core_plugins/metrics/public/kbn_vis_types/vis_controller.js delete mode 100644 src/core_plugins/metrics/public/lib/__tests__/add_scope.js delete mode 100644 src/core_plugins/metrics/public/lib/add_scope.js delete mode 100644 src/core_plugins/metrics/public/lib/fetch.js create mode 100644 src/core_plugins/tile_map/index.js create mode 100644 src/core_plugins/tile_map/package.json rename src/{ui/public/vis_maps => core_plugins/tile_map/public}/__tests__/geohash_layer.js (99%) rename src/{ui/public/vis_maps => core_plugins/tile_map/public}/__tests__/geohash_sample_data.js (100%) rename src/{ui/public/vis_maps => core_plugins/tile_map/public}/__tests__/kibana_map.js (98%) rename src/{ui/public/vis_maps => core_plugins/tile_map/public}/__tests__/service_settings.js (95%) rename src/core_plugins/{kbn_vislib_vis_types => tile_map}/public/editors/tile_map.html (95%) rename src/{ui/public/vis_maps => core_plugins/tile_map/public}/geohash_layer.js (100%) create mode 100644 src/core_plugins/tile_map/public/images/icon-tilemap.svg rename src/{ui/public/vis_maps => core_plugins/tile_map/public}/kibana_map.js (98%) rename src/{ui/public/vis_maps => core_plugins/tile_map/public}/kibana_map_layer.js (100%) rename src/{ui/public/vis_maps => core_plugins/tile_map/public}/lib/service_settings.js (100%) create mode 100644 src/core_plugins/tile_map/public/maps_visualization.js rename src/{ui/public/vis_maps => core_plugins/tile_map/public}/markers/geohash_grid.js (100%) rename src/{ui/public/vis_maps => core_plugins/tile_map/public}/markers/heatmap.js (100%) rename src/{ui/public/vis_maps => core_plugins/tile_map/public}/markers/scaled_circles.js (99%) rename src/{ui/public/vis_maps => core_plugins/tile_map/public}/markers/shaded_circles.js (100%) rename src/{ui/public/vis_maps => core_plugins/tile_map/public}/styles/_tilemap.less (100%) create mode 100644 src/core_plugins/tile_map/public/tile_map_vis.js create mode 100644 src/core_plugins/timelion/public/vis/timelion_request_handler.js delete mode 100644 src/core_plugins/timelion/public/vis/timelion_vis_params_controller.js create mode 100644 src/ui/public/registry/vis_editor_types.js create mode 100644 src/ui/public/registry/vis_request_handlers.js create mode 100644 src/ui/public/registry/vis_response_handlers.js delete mode 100644 src/ui/public/template_vis_type/template_renderbot.js delete mode 100644 src/ui/public/template_vis_type/template_vis_type.js delete mode 100644 src/ui/public/vis/__tests__/_renderbot.js rename src/ui/public/{vislib_vis_type/__tests__ => vis/__tests__/response_handlers}/_build_chart_data.js (96%) rename src/{core_plugins/kibana/public/visualize/editor => ui/public/vis/editors/default}/__tests__/agg.js (97%) rename src/{core_plugins/kibana/public/visualize/editor => ui/public/vis/editors/default}/__tests__/agg_params.js (96%) rename src/{core_plugins/kibana/public/visualize/editor => ui/public/vis/editors/default}/advanced_toggle.html (100%) rename src/{core_plugins/kibana/public/visualize/editor => ui/public/vis/editors/default}/agg.html (98%) rename src/{core_plugins/kibana/public/visualize/editor => ui/public/vis/editors/default}/agg.js (93%) rename src/{core_plugins/kibana/public/visualize/editor => ui/public/vis/editors/default}/agg_add.html (100%) rename src/{core_plugins/kibana/public/visualize/editor => ui/public/vis/editors/default}/agg_add.js (89%) rename src/{core_plugins/kibana/public/visualize/editor => ui/public/vis/editors/default}/agg_group.html (82%) rename src/{core_plugins/kibana/public/visualize/editor => ui/public/vis/editors/default}/agg_group.js (87%) rename src/{core_plugins/kibana/public/visualize/editor => ui/public/vis/editors/default}/agg_param.js (100%) rename src/{core_plugins/kibana/public/visualize/editor => ui/public/vis/editors/default}/agg_params.html (100%) rename src/{core_plugins/kibana/public/visualize/editor => ui/public/vis/editors/default}/agg_params.js (94%) rename src/{core_plugins/kibana/public/visualize/editor => ui/public/vis/editors/default}/agg_select.html (100%) create mode 100644 src/ui/public/vis/editors/default/default.html create mode 100644 src/ui/public/vis/editors/default/default.js rename src/{core_plugins/kibana/public/visualize/editor => ui/public/vis/editors/default}/nesting_indicator.js (100%) rename src/ui/public/vis/{ => editors/default}/schemas.js (100%) rename src/{core_plugins/kibana/public/visualize/editor => ui/public/vis/editors/default}/sidebar.html (83%) rename src/{core_plugins/kibana/public/visualize/editor => ui/public/vis/editors/default}/sidebar.js (70%) rename src/{core_plugins/kibana/public/visualize/editor => ui/public/vis/editors/default}/vis_options.html (79%) create mode 100644 src/ui/public/vis/editors/default/vis_options.js delete mode 100644 src/ui/public/vis/renderbot.js create mode 100644 src/ui/public/vis/request_handlers/courier.js create mode 100644 src/ui/public/vis/request_handlers/none.js rename src/ui/public/{vislib_vis_type/build_chart_data.js => vis/response_handlers/basic.js} (51%) create mode 100644 src/ui/public/vis/response_handlers/none.js create mode 100644 src/ui/public/vis/response_handlers/tabify.js create mode 100644 src/ui/public/vis/update_status.js create mode 100644 src/ui/public/vis/vis_category.js create mode 100644 src/ui/public/vis/vis_factory.js delete mode 100644 src/ui/public/vis/vis_type.js create mode 100644 src/ui/public/vis/vis_types/angular_vis_type.js create mode 100644 src/ui/public/vis/vis_types/base_vis_type.js create mode 100644 src/ui/public/vis/vis_types/index.js create mode 100644 src/ui/public/vis/vis_types/react_vis_type.js create mode 100644 src/ui/public/vis/vis_types/vislib_vis_type.js delete mode 100644 src/ui/public/vis_maps/maps_renderbot.js delete mode 100644 src/ui/public/vis_maps/maps_vis_type.js delete mode 100644 src/ui/public/vislib_vis_type/__tests__/_vislib_renderbot.js delete mode 100644 src/ui/public/vislib_vis_type/__tests__/index.js delete mode 100644 src/ui/public/vislib_vis_type/vislib_renderbot.js delete mode 100644 src/ui/public/vislib_vis_type/vislib_vis_type.js create mode 100644 src/ui/public/visualize/visualization.html create mode 100644 src/ui/public/visualize/visualization.js create mode 100644 src/ui/public/visualize/visualization_editor.js diff --git a/src/core_plugins/kbn_vislib_vis_types/public/area.js b/src/core_plugins/kbn_vislib_vis_types/public/area.js index 62bdf1cf0fab0..a143e057a997e 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/area.js +++ b/src/core_plugins/kbn_vislib_vis_types/public/area.js @@ -1,22 +1,22 @@ -import { VisVisTypeProvider } from 'ui/vis/vis_type'; -import { VislibVisTypeVislibVisTypeProvider } from 'ui/vislib_vis_type/vislib_vis_type'; -import { VisSchemasProvider } from 'ui/vis/schemas'; +import { VisFactoryProvider } from 'ui/vis/vis_factory'; +import { VisSchemasProvider } from 'ui/vis/editors/default/schemas'; +import { CATEGORY } from 'ui/vis/vis_category'; import pointSeriesTemplate from 'plugins/kbn_vislib_vis_types/editors/point_series.html'; import image from './images/icon-area.svg'; export default function PointSeriesVisType(Private) { - const VisType = Private(VisVisTypeProvider); - const VislibVisType = Private(VislibVisTypeVislibVisTypeProvider); + const VisFactory = Private(VisFactoryProvider); const Schemas = Private(VisSchemasProvider); - return new VislibVisType({ + return VisFactory.createVislibVisualization({ name: 'area', title: 'Area', image, description: 'Emphasize the quantity beneath a line chart', - category: VisType.CATEGORY.BASIC, - params: { + category: CATEGORY.BASIC, + visConfig: { defaults: { + type: 'area', grid: { categoryLines: false, style: { @@ -29,8 +29,7 @@ export default function PointSeriesVisType(Private) { type: 'category', position: 'bottom', show: true, - style: { - }, + style: {}, scale: { type: 'linear' }, @@ -48,8 +47,7 @@ export default function PointSeriesVisType(Private) { type: 'value', position: 'left', show: true, - style: { - }, + style: {}, scale: { type: 'linear', mode: 'normal' @@ -84,31 +82,34 @@ export default function PointSeriesVisType(Private) { times: [], addTimeMarker: false, }, - positions: ['top', 'left', 'right', 'bottom'], - chartTypes: [{ - value: 'line', - text: 'line' - }, { - value: 'area', - text: 'area' - }, { - value: 'histogram', - text: 'bar' - }], - axisModes: ['normal', 'percentage', 'wiggle', 'silhouette'], - scaleTypes: ['linear', 'log', 'square root'], - chartModes: ['normal', 'stacked'], - interpolationModes: [{ - value: 'linear', - text: 'straight', - }, { - value: 'cardinal', - text: 'smoothed', - }, { - value: 'step-after', - text: 'stepped', - }], - editor: pointSeriesTemplate, + }, + editorConfig: { + collections: { + positions: ['top', 'left', 'right', 'bottom'], + chartTypes: [{ + value: 'line', + text: 'line' + }, { + value: 'area', + text: 'area' + }, { + value: 'histogram', + text: 'bar' + }], + axisModes: ['normal', 'percentage', 'wiggle', 'silhouette'], + scaleTypes: ['linear', 'log', 'square root'], + chartModes: ['normal', 'stacked'], + interpolationModes: [{ + value: 'linear', + text: 'straight', + }, { + value: 'cardinal', + text: 'smoothed', + }, { + value: 'step-after', + text: 'stepped', + }], + }, optionTabs: [ { name: 'advanced', @@ -118,50 +119,50 @@ export default function PointSeriesVisType(Private) { }, { name: 'options', title: 'Panel Settings', editor: pointSeriesTemplate }, ], - }, - schemas: new Schemas([ - { - group: 'metrics', - name: 'metric', - title: 'Y-Axis', - aggFilter: ['!geo_centroid'], - min: 1, - defaults: [ - { schema: 'metric', type: 'count' } - ] - }, - { - group: 'metrics', - name: 'radius', - title: 'Dot Size', - min: 0, - max: 1, - aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality'] - }, - { - group: 'buckets', - name: 'segment', - title: 'X-Axis', - min: 0, - max: 1, - aggFilter: '!geohash_grid' - }, - { - group: 'buckets', - name: 'group', - title: 'Split Series', - min: 0, - max: 1, - aggFilter: '!geohash_grid' - }, - { - group: 'buckets', - name: 'split', - title: 'Split Chart', - min: 0, - max: 1, - aggFilter: '!geohash_grid' - } - ]) + schemas: new Schemas([ + { + group: 'metrics', + name: 'metric', + title: 'Y-Axis', + aggFilter: ['!geo_centroid'], + min: 1, + defaults: [ + { schema: 'metric', type: 'count' } + ] + }, + { + group: 'metrics', + name: 'radius', + title: 'Dot Size', + min: 0, + max: 1, + aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality'] + }, + { + group: 'buckets', + name: 'segment', + title: 'X-Axis', + min: 0, + max: 1, + aggFilter: '!geohash_grid' + }, + { + group: 'buckets', + name: 'group', + title: 'Split Series', + min: 0, + max: 1, + aggFilter: '!geohash_grid' + }, + { + group: 'buckets', + name: 'split', + title: 'Split Chart', + min: 0, + max: 1, + aggFilter: '!geohash_grid' + } + ]) + } }); } diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html index 4c8afa31f64e9..fee2c53a65b5c 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html +++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html @@ -8,7 +8,7 @@ id="gaugeType" class="kuiSelect kuiSideBarSelect" ng-model="vis.params.gauge.gaugeType" - ng-options="mode for mode in vis.type.params.gaugeTypes" + ng-options="mode for mode in collections.gaugeTypes" > @@ -183,7 +183,7 @@ id="colorSchema" class="kuiSelect kuiSideBarSelect" ng-model="vis.params.gauge.colorSchema" - ng-options="mode for mode in vis.type.params.colorSchemas" + ng-options="mode for mode in collections.colorSchemas" >
reset colors
@@ -255,7 +255,7 @@ id="gaugeColorMode" class="kuiSelect kuiSideBarSelect" ng-model="vis.params.gauge.gaugeColorMode" - ng-options="mode for mode in vis.type.params.gaugeColorMode" + ng-options="mode for mode in collections.gaugeColorMode" > diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.js b/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.js index 6523c57d64433..e2849ac43797b 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.js +++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.js @@ -9,7 +9,7 @@ module.directive('gaugeOptions', function () { template: gaugeOptionsTemplate, replace: true, link: function ($scope) { - + $scope.collections = $scope.vis.type.editorConfig.collections; $scope.showColorRange = true; $scope.$watch('vis.params.gauge.gaugeType', type => { diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html index 24b1ff3228968..ed2affb0e34c0 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html +++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html @@ -8,7 +8,7 @@ id="colorSchema" class="kuiSelect kuiSideBarSelect" ng-model="vis.params.colorSchema" - ng-options="mode for mode in vis.type.params.colorSchemas" + ng-options="mode for mode in collections.colorSchemas" >
@@ -141,7 +141,7 @@ ng-click="removeRange($index)" class="kuiButton kuiButton--danger kuiButton--small" > - + @@ -149,7 +149,7 @@

- + Required: You must specify at least one range.

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.js b/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.js index bfdaad8071068..2810cc72ce906 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.js +++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.js @@ -9,6 +9,9 @@ module.directive('heatmapOptions', function () { template: heatmapOptionsTemplate, replace: true, link: function ($scope) { + + $scope.collections = $scope.vis.type.editorConfig.collections; + const verticalRotation = 270; $scope.showColorRange = false; $scope.showLabels = false; diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.html index a4902f4de4dbd..e2637c8650d9d 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.html +++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.html @@ -25,7 +25,7 @@ id="categoryAxisPosition" class="kuiSelect kuiSideBarSelect" ng-model="vis.params.categoryAxes[0].position" - ng-options="mode for mode in vis.type.params.positions" + ng-options="mode for mode in vis.type.editorConfig.collections.positions" > diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html index 5e418675970f4..72cbf410a94b5 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html +++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html @@ -40,7 +40,7 @@ id="{{ 'seriesType' + $index }}" class="kuiSelect kuiSideBarSelect" ng-model="chart.type" - ng-options="mode.value as mode.text for mode in vis.type.params.chartTypes" + ng-options="mode.value as mode.text for mode in vis.type.editorConfig.collections.chartTypes" > @@ -54,7 +54,7 @@ id="{{ 'seriesMode' + $index }}" class="kuiSelect kuiSideBarSelect" ng-model="chart.mode" - ng-options="mode for mode in vis.type.params.chartModes" + ng-options="mode for mode in vis.type.editorConfig.collections.chartModes" > @@ -86,7 +86,7 @@ id="{{ 'lineMode' + $index }}" class="kuiSelect kuiSideBarSelect" ng-model="chart.interpolate" - ng-options="mode.value as mode.text for mode in vis.type.params.interpolationModes" + ng-options="mode.value as mode.text for mode in vis.type.editorConfig.collections.interpolationModes" > diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.js b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.js index b0512ff20cebc..501869ba5243d 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.js +++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.js @@ -61,7 +61,7 @@ module.directive('vislibSeries', function () { return $scope.vis.params.seriesParams.map(series => series.type).join(); }, () => { const types = _.uniq(_.map($scope.vis.params.seriesParams, 'type')); - $scope.savedVis.type = types.length === 1 ? types[0] : 'histogram'; + $scope.vis.type.type = types.length === 1 ? types[0] : 'histogram'; }); $scope.$watch('vis.params.valueAxes.length', () => { diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.html index 5d101490b2b26..f2f0b910af7ab 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.html +++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.html @@ -84,7 +84,7 @@ class="kuiSelect kuiSideBarSelect" ng-change="updateAxisName(axis)" ng-model="axis.position" - ng-options="mode disable when isPositionDisabled(mode) for mode in vis.type.params.positions" + ng-options="mode disable when isPositionDisabled(mode) for mode in vis.type.editorConfig.collections.positions" > @@ -98,7 +98,7 @@ id="{{ 'valueAxisMode' + $index }}" class="kuiSelect kuiSideBarSelect" ng-model="axis.scale.mode" - ng-options="mode for mode in vis.type.params.axisModes" + ng-options="mode for mode in vis.type.editorConfig.collections.axisModes" > @@ -112,7 +112,7 @@ id="{{ 'valueAxisScaleType' + $index }}" class="kuiSelect kuiSideBarSelect" ng-model="axis.scale.type" - ng-options="type for type in vis.type.params.scaleTypes" + ng-options="type for type in vis.type.editorConfig.collections.scaleTypes" > diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/vislib_basic_options.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/vislib_basic_options.html index 9104462e414f1..50b4d37a44a40 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/controls/vislib_basic_options.html +++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/vislib_basic_options.html @@ -6,7 +6,7 @@ diff --git a/src/core_plugins/kbn_vislib_vis_types/public/editors/__tests__/point_series.js b/src/core_plugins/kbn_vislib_vis_types/public/editors/__tests__/point_series.js index 8b46f02d555b4..b0bf4191a6b20 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/editors/__tests__/point_series.js +++ b/src/core_plugins/kbn_vislib_vis_types/public/editors/__tests__/point_series.js @@ -20,7 +20,7 @@ describe('point series editor', function () { function makeConfig() { return { type: 'line', - params: lineVisType.params.defaults, + params: lineVisType.visConfig.defaults, aggs: [ { type: 'count', schema: 'metric', params: { field: 'bytes' } }, { type: 'terms', schema: 'segment', params: { field: 'machine.os' } }, diff --git a/src/core_plugins/kbn_vislib_vis_types/public/editors/heatmap.html b/src/core_plugins/kbn_vislib_vis_types/public/editors/heatmap.html index fa86afbd9d3c7..1d1d5e418a591 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/editors/heatmap.html +++ b/src/core_plugins/kbn_vislib_vis_types/public/editors/heatmap.html @@ -32,7 +32,7 @@ id="legendPosition" class="kuiSelect kuiSideBarSelect" ng-model="vis.params.legendPosition" - ng-options="position.value as position.text for position in vis.type.params.legendPositions" + ng-options="position.value as position.text for position in vis.type.editorConfig.collections.legendPositions" > diff --git a/src/core_plugins/kbn_vislib_vis_types/public/gauge.js b/src/core_plugins/kbn_vislib_vis_types/public/gauge.js index b878d2b4c7be1..a35390116902c 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/gauge.js +++ b/src/core_plugins/kbn_vislib_vis_types/public/gauge.js @@ -1,24 +1,24 @@ -import { VisVisTypeProvider } from 'ui/vis/vis_type'; -import { VislibVisTypeVislibVisTypeProvider } from 'ui/vislib_vis_type/vislib_vis_type'; -import { VisSchemasProvider } from 'ui/vis/schemas'; +import { VisFactoryProvider } from 'ui/vis/vis_factory'; +import { VisSchemasProvider } from 'ui/vis/editors/default/schemas'; +import { CATEGORY } from 'ui/vis/vis_category'; import gaugeTemplate from 'plugins/kbn_vislib_vis_types/editors/gauge.html'; import { vislibColorMaps } from 'ui/vislib/components/color/colormaps'; import image from './images/icon-gauge.svg'; export default function GaugeVisType(Private) { - const VisType = Private(VisVisTypeProvider); - const VislibVisType = Private(VislibVisTypeVislibVisTypeProvider); + const VisFactory = Private(VisFactoryProvider); const Schemas = Private(VisSchemasProvider); - return new VislibVisType({ + return VisFactory.createVislibVisualization({ name: 'gauge', title: 'Gauge', image, description: `Gauges indicate the status of a metric. Use it to show how a metric's value relates to reference threshold values.`, - category: VisType.CATEGORY.DATA, - params: { + category: CATEGORY.DATA, + visConfig: { defaults: { + type:'gauge', addTooltip: true, addLegend: true, @@ -61,35 +61,37 @@ export default function GaugeVisType(Private) { } } }, - gaugeTypes: ['Arc', 'Circle', 'Metric'], - gaugeColorMode: ['None', 'Labels', 'Background'], - gaugeStyles: ['Full', 'Bars', 'Lines'], - scales: ['linear', 'log', 'square root'], - colorSchemas: Object.keys(vislibColorMaps), - editor: gaugeTemplate }, - implementsRenderComplete: true, - schemas: new Schemas([ - { - group: 'metrics', - name: 'metric', - title: 'Metric', - min: 1, - aggFilter: [ - '!std_dev', '!geo_centroid', '!percentiles', '!percentile_ranks', - '!derivative', '!serial_diff', '!moving_avg', '!cumulative_sum'], - defaults: [ - { schema: 'metric', type: 'count' } - ] + editorConfig: { + collections: { + gaugeTypes: ['Arc', 'Circle', 'Metric'], + gaugeColorMode: ['None', 'Labels', 'Background'], + scales: ['linear', 'log', 'square root'], + colorSchemas: Object.keys(vislibColorMaps), }, - { - group: 'buckets', - name: 'group', - title: 'Split Group', - min: 0, - max: 1, - aggFilter: '!geohash_grid' - } - ]) + optionsTemplate: gaugeTemplate, + schemas: new Schemas([ + { + group: 'metrics', + name: 'metric', + title: 'Metric', + min: 1, + aggFilter: [ + '!std_dev', '!geo_centroid', '!percentiles', '!percentile_ranks', + '!derivative', '!serial_diff', '!moving_avg', '!cumulative_sum'], + defaults: [ + { schema: 'metric', type: 'count' } + ] + }, + { + group: 'buckets', + name: 'group', + title: 'Split Group', + min: 0, + max: 1, + aggFilter: '!geohash_grid' + } + ]) + } }); } diff --git a/src/core_plugins/kbn_vislib_vis_types/public/goal.js b/src/core_plugins/kbn_vislib_vis_types/public/goal.js index 170907d4e7489..bd0ed5ead9164 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/goal.js +++ b/src/core_plugins/kbn_vislib_vis_types/public/goal.js @@ -1,22 +1,21 @@ -import { VisVisTypeProvider } from 'ui/vis/vis_type'; -import { VislibVisTypeVislibVisTypeProvider } from 'ui/vislib_vis_type/vislib_vis_type'; -import { VisSchemasProvider } from 'ui/vis/schemas'; +import { VisFactoryProvider } from 'ui/vis/vis_factory'; +import { VisSchemasProvider } from 'ui/vis/editors/default/schemas'; +import { CATEGORY } from 'ui/vis/vis_category'; import gaugeTemplate from 'plugins/kbn_vislib_vis_types/editors/gauge.html'; import { vislibColorMaps } from 'ui/vislib/components/color/colormaps'; import image from './images/icon-goal.svg'; export default function GoalVisType(Private) { - const VisType = Private(VisVisTypeProvider); - const VislibVisType = Private(VislibVisTypeVislibVisTypeProvider); + const VisFactory = Private(VisFactoryProvider); const Schemas = Private(VisSchemasProvider); - return new VislibVisType({ + return VisFactory.createVislibVisualization({ name: 'goal', title: 'Goal', image, description: 'A goal chart indicates how close you are to your final goal.', - category: VisType.CATEGORY.DATA, - params: { + category: CATEGORY.DATA, + visConfig: { defaults: { addTooltip: true, addLegend: false, @@ -56,34 +55,37 @@ export default function GoalVisType(Private) { } } }, - gaugeTypes: ['Arc', 'Circle', 'Metric'], - gaugeColorMode: ['None', 'Labels', 'Background'], - scales: ['linear', 'log', 'square root'], - colorSchemas: Object.keys(vislibColorMaps), - editor: gaugeTemplate }, - implementsRenderComplete: true, - schemas: new Schemas([ - { - group: 'metrics', - name: 'metric', - title: 'Metric', - min: 1, - aggFilter: [ - '!std_dev', '!geo_centroid', '!percentiles', '!percentile_ranks', - '!derivative', '!serial_diff', '!moving_avg', '!cumulative_sum'], - defaults: [ - { schema: 'metric', type: 'count' } - ] + editorConfig: { + collections: { + gaugeTypes: ['Arc', 'Circle', 'Metric'], + gaugeColorMode: ['None', 'Labels', 'Background'], + scales: ['linear', 'log', 'square root'], + colorSchemas: Object.keys(vislibColorMaps), }, - { - group: 'buckets', - name: 'group', - title: 'Split Group', - min: 0, - max: 1, - aggFilter: '!geohash_grid' - } - ]) + optionsTemplate: gaugeTemplate, + schemas: new Schemas([ + { + group: 'metrics', + name: 'metric', + title: 'Metric', + min: 1, + aggFilter: [ + '!std_dev', '!geo_centroid', '!percentiles', '!percentile_ranks', + '!derivative', '!serial_diff', '!moving_avg', '!cumulative_sum'], + defaults: [ + { schema: 'metric', type: 'count' } + ] + }, + { + group: 'buckets', + name: 'group', + title: 'Split Group', + min: 0, + max: 1, + aggFilter: '!geohash_grid' + } + ]) + } }); } diff --git a/src/core_plugins/kbn_vislib_vis_types/public/heatmap.js b/src/core_plugins/kbn_vislib_vis_types/public/heatmap.js index e1e0bf34b944a..656c94c71697d 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/heatmap.js +++ b/src/core_plugins/kbn_vislib_vis_types/public/heatmap.js @@ -1,23 +1,23 @@ -import { VisVisTypeProvider } from 'ui/vis/vis_type'; -import { VislibVisTypeVislibVisTypeProvider } from 'ui/vislib_vis_type/vislib_vis_type'; -import { VisSchemasProvider } from 'ui/vis/schemas'; +import { VisFactoryProvider } from 'ui/vis/vis_factory'; +import { VisSchemasProvider } from 'ui/vis/editors/default/schemas'; +import { CATEGORY } from 'ui/vis/vis_category'; import heatmapTemplate from 'plugins/kbn_vislib_vis_types/editors/heatmap.html'; import { vislibColorMaps } from 'ui/vislib/components/color/colormaps'; import image from './images/icon-heatmap.svg'; export default function HeatmapVisType(Private) { - const VisType = Private(VisVisTypeProvider); - const VislibVisType = Private(VislibVisTypeVislibVisTypeProvider); + const VisFactory = Private(VisFactoryProvider); const Schemas = Private(VisSchemasProvider); - return new VislibVisType({ + return VisFactory.createVislibVisualization({ name: 'heatmap', title: 'Heat Map', image, description: 'Shade cells within a matrix', - category: VisType.CATEGORY.BASIC, - params: { + category: CATEGORY.BASIC, + visConfig: { defaults: { + type: 'heatmap', addTooltip: true, addLegend: true, enableHover: false, @@ -44,59 +44,64 @@ export default function HeatmapVisType(Private) { } }] }, - legendPositions: [{ - value: 'left', - text: 'left', - }, { - value: 'right', - text: 'right', - }, { - value: 'top', - text: 'top', - }, { - value: 'bottom', - text: 'bottom', - }], - scales: ['linear', 'log', 'square root'], - colorSchemas: Object.keys(vislibColorMaps), - editor: heatmapTemplate }, - schemas: new Schemas([ - { - group: 'metrics', - name: 'metric', - title: 'Value', - min: 1, - max: 1, - aggFilter: ['count', 'avg', 'median', 'sum', 'min', 'max', 'cardinality', 'std_dev', 'top_hits'], - defaults: [ - { schema: 'metric', type: 'count' } - ] + editorConfig: { + collections: { + legendPositions: [{ + value: 'left', + text: 'left', + }, { + value: 'right', + text: 'right', + }, { + value: 'top', + text: 'top', + }, { + value: 'bottom', + text: 'bottom', + }], + scales: ['linear', 'log', 'square root'], + colorSchemas: Object.keys(vislibColorMaps), }, - { - group: 'buckets', - name: 'segment', - title: 'X-Axis', - min: 0, - max: 1, - aggFilter: '!geohash_grid' - }, - { - group: 'buckets', - name: 'group', - title: 'Y-Axis', - min: 0, - max: 1, - aggFilter: '!geohash_grid' - }, - { - group: 'buckets', - name: 'split', - title: 'Split Chart', - min: 0, - max: 1, - aggFilter: '!geohash_grid' - } - ]) + optionsTemplate: heatmapTemplate, + schemas: new Schemas([ + { + group: 'metrics', + name: 'metric', + title: 'Value', + min: 1, + max: 1, + aggFilter: ['count', 'avg', 'median', 'sum', 'min', 'max', 'cardinality', 'std_dev', 'top_hits'], + defaults: [ + { schema: 'metric', type: 'count' } + ] + }, + { + group: 'buckets', + name: 'segment', + title: 'X-Axis', + min: 0, + max: 1, + aggFilter: '!geohash_grid' + }, + { + group: 'buckets', + name: 'group', + title: 'Y-Axis', + min: 0, + max: 1, + aggFilter: '!geohash_grid' + }, + { + group: 'buckets', + name: 'split', + title: 'Split Chart', + min: 0, + max: 1, + aggFilter: '!geohash_grid' + } + ]) + } + }); } diff --git a/src/core_plugins/kbn_vislib_vis_types/public/histogram.js b/src/core_plugins/kbn_vislib_vis_types/public/histogram.js index c65bce00be381..ea8a267424b20 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/histogram.js +++ b/src/core_plugins/kbn_vislib_vis_types/public/histogram.js @@ -1,22 +1,22 @@ -import { VisVisTypeProvider } from 'ui/vis/vis_type'; -import { VislibVisTypeVislibVisTypeProvider } from 'ui/vislib_vis_type/vislib_vis_type'; -import { VisSchemasProvider } from 'ui/vis/schemas'; +import { VisFactoryProvider } from 'ui/vis/vis_factory'; +import { VisSchemasProvider } from 'ui/vis/editors/default/schemas'; +import { CATEGORY } from 'ui/vis/vis_category'; import pointSeriesTemplate from 'plugins/kbn_vislib_vis_types/editors/point_series.html'; import image from './images/icon-vertical.svg'; export default function PointSeriesVisType(Private) { - const VisType = Private(VisVisTypeProvider); - const VislibVisType = Private(VislibVisTypeVislibVisTypeProvider); + const VisFactory = Private(VisFactoryProvider); const Schemas = Private(VisSchemasProvider); - return new VislibVisType({ + return VisFactory.createVislibVisualization({ name: 'histogram', title: 'Vertical Bar', image, description: 'Assign a continuous variable to each axis', - category: VisType.CATEGORY.BASIC, - params: { + category: CATEGORY.BASIC, + visConfig: { defaults: { + type: 'histogram', grid: { categoryLines: false, style: { @@ -29,8 +29,7 @@ export default function PointSeriesVisType(Private) { type: 'category', position: 'bottom', show: true, - style: { - }, + style: {}, scale: { type: 'linear' }, @@ -48,8 +47,7 @@ export default function PointSeriesVisType(Private) { type: 'value', position: 'left', show: true, - style: { - }, + style: {}, scale: { type: 'linear', mode: 'normal' @@ -85,31 +83,34 @@ export default function PointSeriesVisType(Private) { times: [], addTimeMarker: false, }, - positions: ['top', 'left', 'right', 'bottom'], - chartTypes: [{ - value: 'line', - text: 'line' - }, { - value: 'area', - text: 'area' - }, { - value: 'histogram', - text: 'bar' - }], - axisModes: ['normal', 'percentage', 'wiggle', 'silhouette'], - scaleTypes: ['linear', 'log', 'square root'], - chartModes: ['normal', 'stacked'], - interpolationModes: [{ - value: 'linear', - text: 'straight', - }, { - value: 'cardinal', - text: 'smoothed', - }, { - value: 'step-after', - text: 'stepped', - }], - editor: pointSeriesTemplate, + }, + editorConfig: { + collections: { + positions: ['top', 'left', 'right', 'bottom'], + chartTypes: [{ + value: 'line', + text: 'line' + }, { + value: 'area', + text: 'area' + }, { + value: 'histogram', + text: 'bar' + }], + axisModes: ['normal', 'percentage', 'wiggle', 'silhouette'], + scaleTypes: ['linear', 'log', 'square root'], + chartModes: ['normal', 'stacked'], + interpolationModes: [{ + value: 'linear', + text: 'straight', + }, { + value: 'cardinal', + text: 'smoothed', + }, { + value: 'step-after', + text: 'stepped', + }], + }, optionTabs: [ { name: 'advanced', @@ -119,50 +120,51 @@ export default function PointSeriesVisType(Private) { }, { name: 'options', title: 'Panel Settings', editor: pointSeriesTemplate }, ], - }, - schemas: new Schemas([ - { - group: 'metrics', - name: 'metric', - title: 'Y-Axis', - min: 1, - aggFilter: ['!geo_centroid'], - defaults: [ - { schema: 'metric', type: 'count' } - ] - }, - { - group: 'metrics', - name: 'radius', - title: 'Dot Size', - min: 0, - max: 1, - aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality'] - }, - { - group: 'buckets', - name: 'segment', - title: 'X-Axis', - min: 0, - max: 1, - aggFilter: '!geohash_grid' - }, - { - group: 'buckets', - name: 'group', - title: 'Split Series', - min: 0, - max: 1, - aggFilter: '!geohash_grid' - }, - { - group: 'buckets', - name: 'split', - title: 'Split Chart', - min: 0, - max: 1, - aggFilter: '!geohash_grid' - } - ]) + schemas: new Schemas([ + { + group: 'metrics', + name: 'metric', + title: 'Y-Axis', + min: 1, + aggFilter: ['!geo_centroid'], + defaults: [ + { schema: 'metric', type: 'count' } + ] + }, + { + group: 'metrics', + name: 'radius', + title: 'Dot Size', + min: 0, + max: 1, + aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality'] + }, + { + group: 'buckets', + name: 'segment', + title: 'X-Axis', + min: 0, + max: 1, + aggFilter: '!geohash_grid' + }, + { + group: 'buckets', + name: 'group', + title: 'Split Series', + min: 0, + max: 1, + aggFilter: '!geohash_grid' + }, + { + group: 'buckets', + name: 'split', + title: 'Split Chart', + min: 0, + max: 1, + aggFilter: '!geohash_grid' + } + ]) + } + }); } diff --git a/src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js b/src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js index 2f92b023ec8cb..a23e90503f47c 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js +++ b/src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js @@ -1,22 +1,22 @@ -import { VisVisTypeProvider } from 'ui/vis/vis_type'; -import { VislibVisTypeVislibVisTypeProvider } from 'ui/vislib_vis_type/vislib_vis_type'; -import { VisSchemasProvider } from 'ui/vis/schemas'; +import { VisFactoryProvider } from 'ui/vis/vis_factory'; +import { VisSchemasProvider } from 'ui/vis/editors/default/schemas'; +import { CATEGORY } from 'ui/vis/vis_category'; import pointSeriesTemplate from 'plugins/kbn_vislib_vis_types/editors/point_series.html'; import image from './images/icon-horizontal.svg'; export default function PointSeriesVisType(Private) { - const VisType = Private(VisVisTypeProvider); - const VislibVisType = Private(VislibVisTypeVislibVisTypeProvider); + const VisFactory = Private(VisFactoryProvider); const Schemas = Private(VisSchemasProvider); - return new VislibVisType({ + return VisFactory.createVislibVisualization({ name: 'horizontal_bar', title: 'Horizontal Bar', image, description: 'Assign a continuous variable to each axis', - category: VisType.CATEGORY.BASIC, - params: { + category: CATEGORY.BASIC, + visConfig: { defaults: { + type: 'histogram', grid: { categoryLines: false, style: { @@ -85,31 +85,34 @@ export default function PointSeriesVisType(Private) { times: [], addTimeMarker: false, }, - positions: ['top', 'left', 'right', 'bottom'], - chartTypes: [{ - value: 'line', - text: 'line' - }, { - value: 'area', - text: 'area' - }, { - value: 'histogram', - text: 'bar' - }], - axisModes: ['normal', 'percentage', 'wiggle', 'silhouette'], - scaleTypes: ['linear', 'log', 'square root'], - chartModes: ['normal', 'stacked'], - interpolationModes: [{ - value: 'linear', - text: 'straight', - }, { - value: 'cardinal', - text: 'smoothed', - }, { - value: 'step-after', - text: 'stepped', - }], - editor: pointSeriesTemplate, + }, + editorConfig: { + collections: { + positions: ['top', 'left', 'right', 'bottom'], + chartTypes: [{ + value: 'line', + text: 'line' + }, { + value: 'area', + text: 'area' + }, { + value: 'histogram', + text: 'bar' + }], + axisModes: ['normal', 'percentage', 'wiggle', 'silhouette'], + scaleTypes: ['linear', 'log', 'square root'], + chartModes: ['normal', 'stacked'], + interpolationModes: [{ + value: 'linear', + text: 'straight', + }, { + value: 'cardinal', + text: 'smoothed', + }, { + value: 'step-after', + text: 'stepped', + }], + }, optionTabs: [ { name: 'advanced', @@ -119,50 +122,50 @@ export default function PointSeriesVisType(Private) { }, { name: 'options', title: 'Panel Settings', editor: pointSeriesTemplate }, ], - }, - schemas: new Schemas([ - { - group: 'metrics', - name: 'metric', - title: 'Y-Axis', - min: 1, - aggFilter: ['!geo_centroid'], - defaults: [ - { schema: 'metric', type: 'count' } - ] - }, - { - group: 'metrics', - name: 'radius', - title: 'Dot Size', - min: 0, - max: 1, - aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality'] - }, - { - group: 'buckets', - name: 'segment', - title: 'X-Axis', - min: 0, - max: 1, - aggFilter: '!geohash_grid' - }, - { - group: 'buckets', - name: 'group', - title: 'Split Series', - min: 0, - max: 1, - aggFilter: '!geohash_grid' - }, - { - group: 'buckets', - name: 'split', - title: 'Split Chart', - min: 0, - max: 1, - aggFilter: '!geohash_grid' - } - ]) + schemas: new Schemas([ + { + group: 'metrics', + name: 'metric', + title: 'Y-Axis', + min: 1, + aggFilter: ['!geo_centroid'], + defaults: [ + { schema: 'metric', type: 'count' } + ] + }, + { + group: 'metrics', + name: 'radius', + title: 'Dot Size', + min: 0, + max: 1, + aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality'] + }, + { + group: 'buckets', + name: 'segment', + title: 'X-Axis', + min: 0, + max: 1, + aggFilter: '!geohash_grid' + }, + { + group: 'buckets', + name: 'group', + title: 'Split Series', + min: 0, + max: 1, + aggFilter: '!geohash_grid' + }, + { + group: 'buckets', + name: 'split', + title: 'Split Chart', + min: 0, + max: 1, + aggFilter: '!geohash_grid' + } + ]) + } }); } diff --git a/src/core_plugins/kbn_vislib_vis_types/public/kbn_vislib_vis_types.js b/src/core_plugins/kbn_vislib_vis_types/public/kbn_vislib_vis_types.js index 671806d4afadc..a47adf7eb8c7f 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/kbn_vislib_vis_types.js +++ b/src/core_plugins/kbn_vislib_vis_types/public/kbn_vislib_vis_types.js @@ -4,7 +4,6 @@ import histogramVisTypeProvider from 'plugins/kbn_vislib_vis_types/histogram'; import lineVisTypeProvider from 'plugins/kbn_vislib_vis_types/line'; import pieVisTypeProvider from 'plugins/kbn_vislib_vis_types/pie'; import areaVisTypeProvider from 'plugins/kbn_vislib_vis_types/area'; -import tileMapVisTypeProvider from 'plugins/kbn_vislib_vis_types/tile_map'; import heatmapVisTypeProvider from 'plugins/kbn_vislib_vis_types/heatmap'; import horizontalBarVisTypeProvider from 'plugins/kbn_vislib_vis_types/horizontal_bar'; import gaugeVisTypeProvider from 'plugins/kbn_vislib_vis_types/gauge'; @@ -15,7 +14,6 @@ VisTypesRegistryProvider.register(histogramVisTypeProvider); VisTypesRegistryProvider.register(lineVisTypeProvider); VisTypesRegistryProvider.register(pieVisTypeProvider); VisTypesRegistryProvider.register(areaVisTypeProvider); -VisTypesRegistryProvider.register(tileMapVisTypeProvider); VisTypesRegistryProvider.register(heatmapVisTypeProvider); VisTypesRegistryProvider.register(horizontalBarVisTypeProvider); VisTypesRegistryProvider.register(gaugeVisTypeProvider); diff --git a/src/core_plugins/kbn_vislib_vis_types/public/line.js b/src/core_plugins/kbn_vislib_vis_types/public/line.js index 77237faa0c996..8f43d9bfeeb9a 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/line.js +++ b/src/core_plugins/kbn_vislib_vis_types/public/line.js @@ -1,22 +1,22 @@ -import { VisVisTypeProvider } from 'ui/vis/vis_type'; -import { VislibVisTypeVislibVisTypeProvider } from 'ui/vislib_vis_type/vislib_vis_type'; -import { VisSchemasProvider } from 'ui/vis/schemas'; +import { VisFactoryProvider } from 'ui/vis/vis_factory'; +import { VisSchemasProvider } from 'ui/vis/editors/default/schemas'; +import { CATEGORY } from 'ui/vis/vis_category'; import pointSeriesTemplate from 'plugins/kbn_vislib_vis_types/editors/point_series.html'; import image from './images/icon-line.svg'; export default function PointSeriesVisType(Private) { - const VisType = Private(VisVisTypeProvider); - const VislibVisType = Private(VislibVisTypeVislibVisTypeProvider); + const VisFactory = Private(VisFactoryProvider); const Schemas = Private(VisSchemasProvider); - return new VislibVisType({ + return VisFactory.createVislibVisualization({ name: 'line', title: 'Line', image, description: 'Emphasize trends', - category: VisType.CATEGORY.BASIC, - params: { + category: CATEGORY.BASIC, + visConfig: { defaults: { + type: 'line', grid: { categoryLines: false, style: { @@ -29,8 +29,7 @@ export default function PointSeriesVisType(Private) { type: 'category', position: 'bottom', show: true, - style: { - }, + style: {}, scale: { type: 'linear' }, @@ -48,8 +47,7 @@ export default function PointSeriesVisType(Private) { type: 'value', position: 'left', show: true, - style: { - }, + style: {}, scale: { type: 'linear', mode: 'normal' @@ -85,31 +83,34 @@ export default function PointSeriesVisType(Private) { times: [], addTimeMarker: false, }, - positions: ['top', 'left', 'right', 'bottom'], - chartTypes: [{ - value: 'line', - text: 'line' - }, { - value: 'area', - text: 'area' - }, { - value: 'histogram', - text: 'bar' - }], - axisModes: ['normal', 'percentage', 'wiggle', 'silhouette'], - scaleTypes: ['linear', 'log', 'square root'], - chartModes: ['normal', 'stacked'], - interpolationModes: [{ - value: 'linear', - text: 'straight', - }, { - value: 'cardinal', - text: 'smoothed', - }, { - value: 'step-after', - text: 'stepped', - }], - editor: pointSeriesTemplate, + }, + editorConfig: { + collections: { + positions: ['top', 'left', 'right', 'bottom'], + chartTypes: [{ + value: 'line', + text: 'line' + }, { + value: 'area', + text: 'area' + }, { + value: 'histogram', + text: 'bar' + }], + axisModes: ['normal', 'percentage', 'wiggle', 'silhouette'], + scaleTypes: ['linear', 'log', 'square root'], + chartModes: ['normal', 'stacked'], + interpolationModes: [{ + value: 'linear', + text: 'straight', + }, { + value: 'cardinal', + text: 'smoothed', + }, { + value: 'step-after', + text: 'stepped', + }], + }, optionTabs: [ { name: 'advanced', @@ -119,50 +120,50 @@ export default function PointSeriesVisType(Private) { }, { name: 'options', title: 'Panel Settings', editor: pointSeriesTemplate }, ], - }, - schemas: new Schemas([ - { - group: 'metrics', - name: 'metric', - title: 'Y-Axis', - min: 1, - aggFilter: ['!geo_centroid'], - defaults: [ - { schema: 'metric', type: 'count' } - ] - }, - { - group: 'metrics', - name: 'radius', - title: 'Dot Size', - min: 0, - max: 1, - aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality', 'top_hits'] - }, - { - group: 'buckets', - name: 'segment', - title: 'X-Axis', - min: 0, - max: 1, - aggFilter: '!geohash_grid' - }, - { - group: 'buckets', - name: 'group', - title: 'Split Series', - min: 0, - max: 1, - aggFilter: '!geohash_grid' - }, - { - group: 'buckets', - name: 'split', - title: 'Split Chart', - min: 0, - max: 1, - aggFilter: '!geohash_grid' - } - ]) + schemas: new Schemas([ + { + group: 'metrics', + name: 'metric', + title: 'Y-Axis', + min: 1, + aggFilter: ['!geo_centroid'], + defaults: [ + { schema: 'metric', type: 'count' } + ] + }, + { + group: 'metrics', + name: 'radius', + title: 'Dot Size', + min: 0, + max: 1, + aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality', 'top_hits'] + }, + { + group: 'buckets', + name: 'segment', + title: 'X-Axis', + min: 0, + max: 1, + aggFilter: '!geohash_grid' + }, + { + group: 'buckets', + name: 'group', + title: 'Split Series', + min: 0, + max: 1, + aggFilter: '!geohash_grid' + }, + { + group: 'buckets', + name: 'split', + title: 'Split Chart', + min: 0, + max: 1, + aggFilter: '!geohash_grid' + } + ]) + } }); } diff --git a/src/core_plugins/kbn_vislib_vis_types/public/metric.js b/src/core_plugins/kbn_vislib_vis_types/public/metric.js index b9087d45848e3..c42b34ccbffbf 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/metric.js +++ b/src/core_plugins/kbn_vislib_vis_types/public/metric.js @@ -1,22 +1,21 @@ -import { VisVisTypeProvider } from 'ui/vis/vis_type'; -import { VislibVisTypeVislibVisTypeProvider } from 'ui/vislib_vis_type/vislib_vis_type'; -import { VisSchemasProvider } from 'ui/vis/schemas'; +import { VisFactoryProvider } from 'ui/vis/vis_factory'; +import { VisSchemasProvider } from 'ui/vis/editors/default/schemas'; +import { CATEGORY } from 'ui/vis/vis_category'; import gaugeTemplate from 'plugins/kbn_vislib_vis_types/editors/gauge.html'; import { vislibColorMaps } from 'ui/vislib/components/color/colormaps'; import image from './images/icon-number.svg'; export default function MetricVisType(Private) { - const VisType = Private(VisVisTypeProvider); - const VislibVisType = Private(VislibVisTypeVislibVisTypeProvider); + const VisFactory = Private(VisFactoryProvider); const Schemas = Private(VisSchemasProvider); - return new VislibVisType({ + return VisFactory.createVislibVisualization({ name: 'metric', title: 'Metric', image, description: 'Display a calculation as a single number', - category: VisType.CATEGORY.DATA, - params: { + category: CATEGORY.DATA, + visConfig: { defaults: { addTooltip: true, addLegend: false, @@ -56,34 +55,37 @@ export default function MetricVisType(Private) { } } }, - gaugeTypes: ['Arc', 'Circle', 'Metric'], - gaugeColorMode: ['None', 'Labels', 'Background'], - scales: ['linear', 'log', 'square root'], - colorSchemas: Object.keys(vislibColorMaps), - editor: gaugeTemplate }, - implementsRenderComplete: true, - schemas: new Schemas([ - { - group: 'metrics', - name: 'metric', - title: 'Metric', - min: 1, - aggFilter: [ - '!std_dev', '!geo_centroid', '!percentiles', '!percentile_ranks', - '!derivative', '!serial_diff', '!moving_avg', '!cumulative_sum'], - defaults: [ - { schema: 'metric', type: 'count' } - ] + editorConfig: { + collections: { + gaugeTypes: ['Arc', 'Circle', 'Metric'], + gaugeColorMode: ['None', 'Labels', 'Background'], + scales: ['linear', 'log', 'square root'], + colorSchemas: Object.keys(vislibColorMaps), }, - { - group: 'buckets', - name: 'group', - title: 'Split Group', - min: 0, - max: 1, - aggFilter: '!geohash_grid' - } - ]) + optionsTemplate: gaugeTemplate, + schemas: new Schemas([ + { + group: 'metrics', + name: 'metric', + title: 'Metric', + min: 1, + aggFilter: [ + '!std_dev', '!geo_centroid', '!percentiles', '!percentile_ranks', + '!derivative', '!serial_diff', '!moving_avg', '!cumulative_sum'], + defaults: [ + { schema: 'metric', type: 'count' } + ] + }, + { + group: 'buckets', + name: 'group', + title: 'Split Group', + min: 0, + max: 1, + aggFilter: '!geohash_grid' + } + ]) + } }); } diff --git a/src/core_plugins/kbn_vislib_vis_types/public/pie.js b/src/core_plugins/kbn_vislib_vis_types/public/pie.js index 07d325252f1aa..dbfce62a0f63f 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/pie.js +++ b/src/core_plugins/kbn_vislib_vis_types/public/pie.js @@ -1,76 +1,79 @@ -import { VisVisTypeProvider } from 'ui/vis/vis_type'; -import { VislibVisTypeVislibVisTypeProvider } from 'ui/vislib_vis_type/vislib_vis_type'; -import { VisSchemasProvider } from 'ui/vis/schemas'; +import { VisFactoryProvider } from 'ui/vis/vis_factory'; +import { VisSchemasProvider } from 'ui/vis/editors/default/schemas'; +import { CATEGORY } from 'ui/vis/vis_category'; import pieTemplate from 'plugins/kbn_vislib_vis_types/editors/pie.html'; import image from './images/icon-pie.svg'; export default function HistogramVisType(Private) { - const VisType = Private(VisVisTypeProvider); - const VislibVisType = Private(VislibVisTypeVislibVisTypeProvider); + const VisFactory = Private(VisFactoryProvider); const Schemas = Private(VisSchemasProvider); - return new VislibVisType({ + return VisFactory.createVislibVisualization({ name: 'pie', title: 'Pie', image, description: 'Compare parts of a whole', - category: VisType.CATEGORY.BASIC, - params: { + category: CATEGORY.BASIC, + visConfig: { defaults: { + type: 'pie', addTooltip: true, addLegend: true, legendPosition: 'right', isDonut: false }, - legendPositions: [{ - value: 'left', - text: 'left', - }, { - value: 'right', - text: 'right', - }, { - value: 'top', - text: 'top', - }, { - value: 'bottom', - text: 'bottom', - }], - editor: pieTemplate }, - responseConverter: false, - hierarchicalData: true, - implementsRenderComplete: true, - schemas: new Schemas([ - { - group: 'metrics', - name: 'metric', - title: 'Slice Size', - min: 1, - max: 1, - aggFilter: ['sum', 'count', 'cardinality', 'top_hits'], - defaults: [ - { schema: 'metric', type: 'count' } - ] - }, - { - group: 'buckets', - name: 'segment', - icon: 'fa fa-scissors', - title: 'Split Slices', - min: 0, - max: Infinity, - aggFilter: '!geohash_grid' + editorConfig: { + collections: { + legendPositions: [{ + value: 'left', + text: 'left', + }, { + value: 'right', + text: 'right', + }, { + value: 'top', + text: 'top', + }, { + value: 'bottom', + text: 'bottom', + }], }, - { - group: 'buckets', - name: 'split', - icon: 'fa fa-th', - title: 'Split Chart', - mustBeFirst: true, - min: 0, - max: 1, - aggFilter: '!geohash_grid' - } - ]) + optionsTemplate: pieTemplate, + schemas: new Schemas([ + { + group: 'metrics', + name: 'metric', + title: 'Slice Size', + min: 1, + max: 1, + aggFilter: ['sum', 'count', 'cardinality', 'top_hits'], + defaults: [ + { schema: 'metric', type: 'count' } + ] + }, + { + group: 'buckets', + name: 'segment', + icon: 'fa fa-scissors', + title: 'Split Slices', + min: 0, + max: Infinity, + aggFilter: '!geohash_grid' + }, + { + group: 'buckets', + name: 'split', + icon: 'fa fa-th', + title: 'Split Chart', + mustBeFirst: true, + min: 0, + max: 1, + aggFilter: '!geohash_grid' + } + ]) + }, + hierarchicalData: true, + implementsRenderComplete: true }); } diff --git a/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js b/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js deleted file mode 100644 index f1b7275ca6831..0000000000000 --- a/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js +++ /dev/null @@ -1,80 +0,0 @@ -import { supports } from 'ui/utils/supports'; -import { VisVisTypeProvider } from 'ui/vis/vis_type'; -import { MapsVisTypeProvider } from 'ui/vis_maps/maps_vis_type'; -import { VisSchemasProvider } from 'ui/vis/schemas'; -import { AggResponseGeoJsonProvider } from 'ui/agg_response/geo_json/geo_json'; -import tileMapTemplate from 'plugins/kbn_vislib_vis_types/editors/tile_map.html'; -import image from './images/icon-tilemap.svg'; - -export default function TileMapVisType(Private, getAppState, courier, config) { - const VisType = Private(VisVisTypeProvider); - const MapsVisType = Private(MapsVisTypeProvider); - const Schemas = Private(VisSchemasProvider); - const geoJsonConverter = Private(AggResponseGeoJsonProvider); - - return new MapsVisType({ - name: 'tile_map', - title: 'Coordinate Map', - image, - description: 'Plot latitude and longitude coordinates on a map', - category: VisType.CATEGORY.MAP, - params: { - defaults: { - mapType: 'Scaled Circle Markers', - isDesaturated: true, - addTooltip: true, - heatMaxZoom: 0, - heatMinOpacity: 0.1, - heatRadius: 25, - heatBlur: 15, - legendPosition: 'bottomright', - mapZoom: 2, - mapCenter: [0, 0], - wms: config.get('visualization:tileMap:WMSdefaults') - }, - legendPositions: [{ - value: 'bottomleft', - text: 'bottom left', - }, { - value: 'bottomright', - text: 'bottom right', - }, { - value: 'topleft', - text: 'top left', - }, { - value: 'topright', - text: 'top right', - }], - mapTypes: ['Scaled Circle Markers', - 'Shaded Circle Markers', - 'Shaded Geohash Grid', - 'Heatmap' - ], - canDesaturate: !!supports.cssFilters, - editor: tileMapTemplate - }, - responseConverter: geoJsonConverter, - implementsRenderComplete: true, - schemas: new Schemas([ - { - group: 'metrics', - name: 'metric', - title: 'Value', - min: 1, - max: 1, - aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality', 'top_hits'], - defaults: [ - { schema: 'metric', type: 'count' } - ] - }, - { - group: 'buckets', - name: 'segment', - title: 'Geo Coordinates', - aggFilter: 'geohash_grid', - min: 1, - max: 1 - } - ]) - }); -} diff --git a/src/core_plugins/kibana/public/dashboard/dashboard.html b/src/core_plugins/kibana/public/dashboard/dashboard.html index e79c141ec85d4..4ff39e75b7928 100644 --- a/src/core_plugins/kibana/public/dashboard/dashboard.html +++ b/src/core_plugins/kibana/public/dashboard/dashboard.html @@ -117,6 +117,7 @@

get-vis-click-handler="getFilterBarClickHandler" get-vis-brush-handler="getBrushEvent" save-state="saveState" + app-state="appState" toggle-expand="toggleExpandPanel" create-child-ui-state="createChildUiState" toggle-expand="toggleExpandPanel" @@ -133,6 +134,7 @@

get-vis-click-handler="getFilterBarClickHandler" get-vis-brush-handler="getBrushEvent" save-state="saveState" + app-state="appState" register-panel-index-pattern="registerPanelIndexPattern" create-child-ui-state="createChildUiState" toggle-expand="toggleExpandPanel(expandedPanel.panelIndex)" diff --git a/src/core_plugins/kibana/public/dashboard/dashboard.js b/src/core_plugins/kibana/public/dashboard/dashboard.js index f76af430dbf42..0ac9fca905886 100644 --- a/src/core_plugins/kibana/public/dashboard/dashboard.js +++ b/src/core_plugins/kibana/public/dashboard/dashboard.js @@ -147,6 +147,7 @@ app.directive('dashboardApp', function ($injector) { $scope.timefilter = timefilter; $scope.expandedPanel = null; $scope.dashboardViewMode = dashboardState.getViewMode(); + $scope.appState = dashboardState.getAppState(); $scope.landingPageUrl = () => `#${DashboardConstants.LANDING_PAGE_PATH}`; $scope.getBrushEvent = () => brushEvent(dashboardState.getAppState()); diff --git a/src/core_plugins/kibana/public/dashboard/grid.js b/src/core_plugins/kibana/public/dashboard/grid.js index f03339519fbc0..cb2b47a2d058c 100644 --- a/src/core_plugins/kibana/public/dashboard/grid.js +++ b/src/core_plugins/kibana/public/dashboard/grid.js @@ -53,6 +53,7 @@ app.directive('dashboardGrid', function ($compile, Notifier) { * @type {function} */ saveState: '=', + appState: '=', /** * Expand or collapse a panel, so it either takes up the whole screen or goes back to its * natural size. @@ -219,6 +220,7 @@ app.directive('dashboardGrid', function ($compile, Notifier) { get-vis-click-handler="getVisClickHandler" get-vis-brush-handler="getVisBrushHandler" save-state="saveState" + app-state="appState" register-panel-index-pattern="registerPanelIndexPattern" toggle-expand="toggleExpand(${panel.panelIndex})" create-child-ui-state="createChildUiState"> diff --git a/src/core_plugins/kibana/public/dashboard/panel/panel.html b/src/core_plugins/kibana/public/dashboard/panel/panel.html index 8727a99b47074..2f94871efead3 100644 --- a/src/core_plugins/kibana/public/dashboard/panel/panel.html +++ b/src/core_plugins/kibana/public/dashboard/panel/panel.html @@ -79,9 +79,9 @@ { + $scope.visData = resp; + }); $scope.hits = merged.hits.total; const indexPattern = $scope.searchSource.get('index'); diff --git a/src/core_plugins/kibana/public/discover/index.html b/src/core_plugins/kibana/public/discover/index.html index 5ea49c5bd05ec..618045cfd5dee 100644 --- a/src/core_plugins/kibana/public/discover/index.html +++ b/src/core_plugins/kibana/public/discover/index.html @@ -130,13 +130,14 @@

Searching

- - + vis-data="visData" + style="height: 200px" + > +
diff --git a/src/core_plugins/kibana/public/visualize/editor/add_bucket_agg.js b/src/core_plugins/kibana/public/visualize/editor/add_bucket_agg.js deleted file mode 100644 index e69de29bb2d1d..0000000000000 diff --git a/src/core_plugins/kibana/public/visualize/editor/editor.html b/src/core_plugins/kibana/public/visualize/editor/editor.html index 64030eec78d8b..e50ff1eee2265 100644 --- a/src/core_plugins/kibana/public/visualize/editor/editor.html +++ b/src/core_plugins/kibana/public/visualize/editor/editor.html @@ -85,53 +85,16 @@ index-patterns="[indexPattern]" > - -
- -
+ + - -
- -
- -
- - -
- - -
-
diff --git a/src/core_plugins/kibana/public/visualize/editor/editor.js b/src/core_plugins/kibana/public/visualize/editor/editor.js index b47353601fea0..2680916e5f911 100644 --- a/src/core_plugins/kibana/public/visualize/editor/editor.js +++ b/src/core_plugins/kibana/public/visualize/editor/editor.js @@ -1,6 +1,6 @@ import _ from 'lodash'; import 'plugins/kibana/visualize/saved_visualizations/saved_visualizations'; -import 'plugins/kibana/visualize/editor/sidebar'; +import 'ui/vis/editors/default/sidebar'; import 'plugins/kibana/visualize/editor/agg_filter'; import 'ui/visualize'; import 'ui/collapsible_sidebar'; @@ -10,9 +10,7 @@ import angular from 'angular'; import { Notifier } from 'ui/notify/notifier'; import { VisTypesRegistryProvider } from 'ui/registry/vis_types'; import { DocTitleProvider } from 'ui/doc_title'; -import { UtilsBrushEventProvider } from 'ui/utils/brush_event'; import { FilterBarQueryFilterProvider } from 'ui/filter_bar/query_filter'; -import { FilterBarClickHandlerProvider } from 'ui/filter_bar/filter_bar_click_handler'; import { stateMonitorFactory } from 'ui/state_management/state_monitor_factory'; import uiRoutes from 'ui/routes'; import { uiModules } from 'ui/modules'; @@ -30,7 +28,9 @@ uiRoutes savedVis: function (savedVisualizations, courier, $route, Private) { const visTypes = Private(VisTypesRegistryProvider); const visType = _.find(visTypes, { name: $route.current.params.type }); - if (visType.requiresSearch && !$route.current.params.indexPattern && !$route.current.params.savedSearchId) { + const shouldHaveIndex = visType.requiresSearch && visType.options.showIndexSelection; + const hasIndex = $route.current.params.indexPattern || $route.current.params.savedSearchId; + if (shouldHaveIndex && !hasIndex) { throw new Error('You must provide either an indexPattern or a savedSearchId'); } @@ -69,52 +69,34 @@ uiModules }; }); -function VisEditor($rootScope, $scope, $route, timefilter, AppState, $window, kbnUrl, courier, Private, Promise, kbnBaseUrl) { +function VisEditor($scope, $route, timefilter, AppState, $window, kbnUrl, courier, Private, Promise, kbnBaseUrl) { const docTitle = Private(DocTitleProvider); - const brushEvent = Private(UtilsBrushEventProvider); const queryFilter = Private(FilterBarQueryFilterProvider); - const filterBarClickHandler = Private(FilterBarClickHandlerProvider); const notify = new Notifier({ location: 'Visualization Editor' }); - let stateMonitor; - // Retrieve the resolved SavedVis instance. const savedVis = $route.current.locals.savedVis; - - const $appStatus = this.appStatus = { - dirty: !savedVis.id - }; - - // Instance of src/ui/public/vis/vis.js. - const vis = savedVis.vis; - - // Clone the _vis instance. - const editableVis = vis.createEditableVis(); - - // We intend to keep editableVis and vis in sync with one another, so calling `requesting` on - // vis should call it on both. - vis.requesting = function () { - const requesting = editableVis.requesting; - // Invoking requesting() calls onRequest on each agg's type param. When a vis is marked as being - // requested, the bounds of that vis are updated and new data is fetched using the new bounds. - requesting.call(vis); - - // We need to keep editableVis in sync with vis. - requesting.call(editableVis); - }; - - // SearchSource is a promise-based stream of search results that can inherit from other search - // sources. - const searchSource = savedVis.searchSource; + // vis is instance of src/ui/public/vis/vis.js. + // SearchSource is a promise-based stream of search results that can inherit from other search sources. + const { vis, searchSource } = savedVis; + $scope.vis = vis; $scope.topNavMenu = [{ key: 'save', description: 'Save Visualization', template: require('plugins/kibana/visualize/editor/panels/save.html'), testId: 'visualizeSaveButton', + disableButton() { + return Boolean(vis.dirty); + }, + tooltip() { + if (vis.dirty) { + return 'Apply or Discard your changes before saving'; + } + } }, { key: 'share', description: 'Share Visualization', @@ -127,6 +109,12 @@ function VisEditor($rootScope, $scope, $route, timefilter, AppState, $window, kb testId: 'visualizeRefreshButton', }]; + let stateMonitor; + + const $appStatus = this.appStatus = { + dirty: !savedVis.id + }; + if (savedVis.id) { docTitle.change(savedVis.title); } @@ -137,13 +125,13 @@ function VisEditor($rootScope, $scope, $route, timefilter, AppState, $window, kb const stateDefaults = { uiState: savedVis.uiStateJSON ? JSON.parse(savedVis.uiStateJSON) : {}, linked: !!savedVis.savedSearchId, - query: searchSource.getOwn('query') || { query_string: { query: '*' } }, + query: searchSource.getOwn('query') || { query_string: { analyze_wildcard: true, query: '*' } }, filters: searchSource.getOwn('filter') || [], vis: savedVisState }; // Instance of app_state.js. - const $state = $scope.$state = (function initState() { + const $state = (function initState() { // This is used to sync visualization state with the url when `appState.save()` is called. const appState = new AppState(stateDefaults); @@ -152,8 +140,7 @@ function VisEditor($rootScope, $scope, $route, timefilter, AppState, $window, kb // appState then they won't be equal. if (!angular.equals(appState.vis, savedVisState)) { Promise.try(function () { - editableVis.setState(appState.vis); - vis.setState(editableVis.getEnabledState()); + vis.setState(appState.vis); }) .catch(courier.redirectWhenMissing({ 'index-pattern-field': '/visualize' @@ -166,10 +153,8 @@ function VisEditor($rootScope, $scope, $route, timefilter, AppState, $window, kb function init() { // export some objects $scope.savedVis = savedVis; - $scope.searchSource = searchSource; - $scope.vis = vis; $scope.indexPattern = vis.indexPattern; - $scope.editableVis = editableVis; + $scope.searchSource = searchSource; $scope.state = $state; $scope.queryDocLinks = documentationLinks.query; $scope.dateDocLinks = documentationLinks.date; @@ -196,30 +181,6 @@ function VisEditor($rootScope, $scope, $route, timefilter, AppState, $window, kb stateMonitor.ignoreProps([ 'vis.listeners' ]).onChange((status) => { $appStatus.dirty = status.dirty || !savedVis.id; }); - $scope.$on('$destroy', () => stateMonitor.destroy()); - - editableVis.listeners.click = vis.listeners.click = filterBarClickHandler($state); - editableVis.listeners.brush = vis.listeners.brush = brushEvent($state); - - // track state of editable vis vs. "actual" vis - $scope.stageEditableVis = transferVisState(editableVis, vis, true); - $scope.resetEditableVis = transferVisState(vis, editableVis); - $scope.$watch(function () { - return editableVis.getEnabledState(); - }, function (newState) { - editableVis.dirty = !angular.equals(newState, vis.getEnabledState()); - - $scope.responseValueAggs = null; - try { - $scope.responseValueAggs = editableVis.aggs.getResponseAggs().filter(function (agg) { - return _.get(agg, 'schema.group') === 'metrics'; - }); - } - // this can fail when the agg.type is changed but the - // params have not been set yet. watcher will trigger again - // when the params update - catch (e) {} // eslint-disable-line no-empty - }, true); $state.replace(); @@ -229,56 +190,20 @@ function VisEditor($rootScope, $scope, $route, timefilter, AppState, $window, kb $scope.$watchMulti([ 'searchSource.get("index").timeFieldName', - 'vis.type.requiresTimePicker', + 'vis.type.options.showTimePicker', ], function ([timeField, requiresTimePicker]) { timefilter.enabled = Boolean(timeField || requiresTimePicker); }); // update the searchSource when filters update $scope.$listen(queryFilter, 'update', function () { - searchSource.set('filter', queryFilter.getFilters()); $state.save(); }); - // fetch data when filters fire fetch event - $scope.$listen(queryFilter, 'fetch', $scope.fetch); - - - $scope.$listen($state, 'fetch_with_changes', function (keys) { - if (_.contains(keys, 'linked') && $state.linked === true) { - // abort and reload route - $route.reload(); - return; - } - - if (_.contains(keys, 'vis')) { - $state.vis.listeners = _.defaults($state.vis.listeners || {}, vis.listeners); - - // only update when we need to, otherwise colors change and we - // risk loosing an in-progress result - vis.setState($state.vis); - editableVis.setState($state.vis); - } - - // we use state to track query, must write before we fetch - if ($state.query && !$state.linked) { - searchSource.set('query', $state.query); - } else { - searchSource.set('query', null); - } - - if (_.isEqual(keys, ['filters'])) { - // updates will happen in filter watcher if needed - return; - } - - $scope.fetch(); - }); - - // Without this manual emission, we'd miss filters and queries that were on the $state initially - $state.emit('fetch_with_changes'); - - $scope.$listen(timefilter, 'fetch', _.bindKey($scope, 'fetch')); + // update the searchSource when query updates + $scope.fetch = function () { + $state.save(); + }; $scope.$on('ready:vis', function () { $scope.$emit('application.load'); @@ -286,20 +211,10 @@ function VisEditor($rootScope, $scope, $route, timefilter, AppState, $window, kb $scope.$on('$destroy', function () { savedVis.destroy(); + stateMonitor.destroy(); }); } - $scope.fetch = function () { - // This is used by some plugins to trigger a fetch (Timelion and Time Series Visual Builder) - $rootScope.$broadcast('fetch'); - $state.save(); - searchSource.set('filter', queryFilter.getFilters()); - if (!$state.linked) searchSource.set('query', $state.query); - if ($scope.vis.type.requiresSearch) { - courier.fetch(); - } - }; - /** * Called when the user clicks "Save" button. */ @@ -368,29 +283,5 @@ function VisEditor($rootScope, $scope, $route, timefilter, AppState, $window, kb searchSource.inherits(parentsParent); }; - function transferVisState(fromVis, toVis, stage) { - return function () { - - //verify this before we copy the "new" state - const isAggregationsChanged = !fromVis.aggs.jsonDataEquals(toVis.aggs); - - const view = fromVis.getEnabledState(); - const full = fromVis.getState(); - toVis.setState(view); - editableVis.dirty = false; - $state.vis = full; - - /** - * Only fetch (full ES round trip), if the play-button has been pressed (ie. 'stage' variable) and if there - * has been changes in the Data-tab. - */ - if (stage && isAggregationsChanged) { - $scope.fetch(); - } else { - $state.save(); - } - }; - } - init(); } diff --git a/src/core_plugins/kibana/public/visualize/editor/styles/_editor.less b/src/core_plugins/kibana/public/visualize/editor/styles/_editor.less index 8f92c042c4bd5..3ac247cd4e363 100644 --- a/src/core_plugins/kibana/public/visualize/editor/styles/_editor.less +++ b/src/core_plugins/kibana/public/visualize/editor/styles/_editor.less @@ -47,7 +47,11 @@ .flex-parent(0, 1, auto); } - + > visualize { + height: 100%; + flex: 1 1 auto; + display: flex; + } } @@ -57,6 +61,7 @@ .vis-editor-content { .flex-parent(); + width: 100%; z-index: 0; // overrides for tablet and desktop @@ -301,9 +306,8 @@ } .vis-editor-canvas { - flex: 1 0 (@screen-md-min - @vis-editor-sidebar-basis); display: flex; - flex-direction: column; + flex-direction: row; overflow: auto; padding-left: @collapser-width; diff --git a/src/core_plugins/kibana/public/visualize/editor/vis_options.js b/src/core_plugins/kibana/public/visualize/editor/vis_options.js deleted file mode 100644 index efb09c4628d84..0000000000000 --- a/src/core_plugins/kibana/public/visualize/editor/vis_options.js +++ /dev/null @@ -1,35 +0,0 @@ -import { uiModules } from 'ui/modules'; -import visOptionsTemplate from 'plugins/kibana/visualize/editor/vis_options.html'; - -/** - * This directive sort of "transcludes" in whatever template you pass in via the `editor` attribute. - * This lets you specify a full-screen UI for editing a vis type, instead of using the regular - * sidebar. - */ - -uiModules -.get('app/visualize') -.directive('visEditorVisOptions', function (Private, $timeout, $compile) { - return { - restrict: 'E', - template: visOptionsTemplate, - scope: { - vis: '=', - savedVis: '=', - uiState: '=', - editor: '=', - stageEditableVis: '=' - }, - link: function ($scope, $el) { - const $optionContainer = $el.find('[data-visualization-options]'); - - // Bind the `editor` template with the scope. - const $editor = $compile($scope.editor)($scope); - $optionContainer.append($editor); - - $scope.$watch('vis.type.schemas.all.length', function (len) { - $scope.alwaysShowOptions = len === 0; - }); - } - }; -}); diff --git a/src/core_plugins/kibana/public/visualize/index.js b/src/core_plugins/kibana/public/visualize/index.js index cb5ef507f4fb3..c0bf9caab2145 100644 --- a/src/core_plugins/kibana/public/visualize/index.js +++ b/src/core_plugins/kibana/public/visualize/index.js @@ -1,16 +1,7 @@ import 'plugins/kibana/visualize/styles/main.less'; import 'plugins/kibana/visualize/editor/editor'; import 'plugins/kibana/visualize/wizard/wizard'; -import 'plugins/kibana/visualize/editor/add_bucket_agg'; -import 'plugins/kibana/visualize/editor/agg'; -import 'plugins/kibana/visualize/editor/agg_add'; import 'plugins/kibana/visualize/editor/agg_filter'; -import 'plugins/kibana/visualize/editor/agg_group'; -import 'plugins/kibana/visualize/editor/agg_param'; -import 'plugins/kibana/visualize/editor/agg_params'; -import 'plugins/kibana/visualize/editor/nesting_indicator'; -import 'plugins/kibana/visualize/editor/sidebar'; -import 'plugins/kibana/visualize/editor/vis_options'; import 'ui/draggable/draggable_container'; import 'ui/draggable/draggable_item'; import 'ui/draggable/draggable_handle'; @@ -24,6 +15,17 @@ import { VisualizeListingController } from './listing/visualize_listing'; import { VisualizeConstants } from './visualize_constants'; import { SavedObjectRegistryProvider } from 'ui/saved_objects/saved_object_registry'; import { savedVisualizationProvider } from 'plugins/kibana/visualize/saved_visualizations/saved_visualization_register'; +import { noneRequestHandlerProvider } from 'ui/vis/request_handlers/none'; +import { CourierRequestHandlerProvider } from 'ui/vis/request_handlers/courier'; +import { noneResponseHandler } from 'ui/vis/response_handlers/none'; +import { BasicResponseHandlerProvider } from 'ui/vis/response_handlers/basic'; + +import { defaultEditor } from 'ui/vis/editors/default/default'; + + +import { VisRequestHandlersRegistryProvider } from 'ui/registry/vis_request_handlers'; +import { VisResponseHandlersRegistryProvider } from 'ui/registry/vis_response_handlers'; +import { VisEditorTypesRegistryProvider } from 'ui/registry/vis_editor_types'; uiRoutes .defaults(/visualize/, { @@ -36,5 +38,10 @@ uiRoutes }); // preloading - SavedObjectRegistryProvider.register(savedVisualizationProvider); +VisRequestHandlersRegistryProvider.register(CourierRequestHandlerProvider); +VisRequestHandlersRegistryProvider.register(noneRequestHandlerProvider); +VisResponseHandlersRegistryProvider.register(noneResponseHandler); +VisResponseHandlersRegistryProvider.register(BasicResponseHandlerProvider); +VisEditorTypesRegistryProvider.register(defaultEditor); + diff --git a/src/core_plugins/kibana/public/visualize/wizard/wizard.js b/src/core_plugins/kibana/public/visualize/wizard/wizard.js index 776b1174b53ca..dc90f63f9b006 100644 --- a/src/core_plugins/kibana/public/visualize/wizard/wizard.js +++ b/src/core_plugins/kibana/public/visualize/wizard/wizard.js @@ -5,7 +5,7 @@ import 'plugins/kibana/discover/saved_searches/saved_searches'; import './wizard.less'; import _ from 'lodash'; -import { VisVisTypeProvider } from 'ui/vis/vis_type'; +import { CATEGORY } from 'ui/vis/vis_category'; import { DashboardConstants } from 'plugins/kibana/dashboard/dashboard_constants'; import { VisualizeConstants } from '../visualize_constants'; import routes from 'ui/routes'; @@ -33,15 +33,13 @@ routes.when(VisualizeConstants.WIZARD_STEP_1_PAGE_PATH, { module.controller('VisualizeWizardStep1', function ($scope, $route, kbnUrl, timefilter, Private) { timefilter.enabled = false; - const VisType = Private(VisVisTypeProvider); - const visTypeCategoryToHumanReadableMap = { - [VisType.CATEGORY.BASIC]: 'Basic Charts', - [VisType.CATEGORY.DATA]: 'Data', - [VisType.CATEGORY.GRAPHIC]: 'Graphic', - [VisType.CATEGORY.MAP]: 'Maps', - [VisType.CATEGORY.OTHER]: 'Other', - [VisType.CATEGORY.TIME]: 'Time Series', + [CATEGORY.BASIC]: 'Basic Charts', + [CATEGORY.DATA]: 'Data', + [CATEGORY.GRAPHIC]: 'Graphic', + [CATEGORY.MAP]: 'Maps', + [CATEGORY.OTHER]: 'Other', + [CATEGORY.TIME]: 'Time Series' }; const addToDashMode = $route.current.params[DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM]; @@ -54,6 +52,8 @@ module.controller('VisualizeWizardStep1', function ($scope, $route, kbnUrl, time visTypes.forEach(visType => { const categoryName = visType.category; + if (categoryName === CATEGORY.HIDDEN) return; + // Create category object if it doesn't exist yet. if (!categoryToVisTypesMap[categoryName]) { categoryToVisTypesMap[categoryName] = { @@ -74,7 +74,7 @@ module.controller('VisualizeWizardStep1', function ($scope, $route, kbnUrl, time // Sort the categories alphabetically. const sortedVisTypeCategories = Object.values(categoryToVisTypesMap).sort((a, b) => { - const other = VisType.CATEGORY.OTHER.toLowerCase(); + const other = CATEGORY.OTHER.toLowerCase(); // Put "other" category at the end of the list. const labelA = a.label.toLowerCase(); @@ -137,7 +137,7 @@ module.controller('VisualizeWizardStep1', function ($scope, $route, kbnUrl, time $scope.getVisTypeUrl = function (visType) { const baseUrl = - visType.requiresSearch + visType.requiresSearch && visType.options.showIndexSelection ? `#${VisualizeConstants.WIZARD_STEP_2_PAGE_PATH}?` : `#${VisualizeConstants.CREATE_PATH}?`; diff --git a/src/core_plugins/markdown_vis/public/__tests__/markdown_vis_controller.js b/src/core_plugins/markdown_vis/public/__tests__/markdown_vis_controller.js index f9dc317de5f2b..5898bf6899f20 100644 --- a/src/core_plugins/markdown_vis/public/__tests__/markdown_vis_controller.js +++ b/src/core_plugins/markdown_vis/public/__tests__/markdown_vis_controller.js @@ -8,6 +8,7 @@ describe('markdown vis controller', function () { beforeEach(ngMock.module('kibana/markdown_vis')); beforeEach(ngMock.inject(function ($rootScope, $controller) { $scope = $rootScope.$new(); + $scope.renderComplete = () => {}; const $element = $('
'); $controller('KbnMarkdownVisController', { $scope, $element }); $scope.$digest(); diff --git a/src/core_plugins/markdown_vis/public/markdown_vis.js b/src/core_plugins/markdown_vis/public/markdown_vis.js index faa01d44ab791..7ea21c6a403a4 100644 --- a/src/core_plugins/markdown_vis/public/markdown_vis.js +++ b/src/core_plugins/markdown_vis/public/markdown_vis.js @@ -1,7 +1,7 @@ import 'plugins/markdown_vis/markdown_vis.less'; import 'plugins/markdown_vis/markdown_vis_controller'; -import { VisVisTypeProvider } from 'ui/vis/vis_type'; -import { TemplateVisTypeProvider } from 'ui/template_vis_type/template_vis_type'; +import { VisFactoryProvider } from 'ui/vis/vis_factory'; +import { CATEGORY } from 'ui/vis/vis_category'; import markdownVisTemplate from 'plugins/markdown_vis/markdown_vis.html'; import markdownVisParamsTemplate from 'plugins/markdown_vis/markdown_vis_params.html'; import { VisTypesRegistryProvider } from 'ui/registry/vis_types'; @@ -14,22 +14,23 @@ import image from './images/icon-markdown.svg'; VisTypesRegistryProvider.register(MarkdownVisProvider); function MarkdownVisProvider(Private) { - const VisType = Private(VisVisTypeProvider); - const TemplateVisType = Private(TemplateVisTypeProvider); + const VisFactory = Private(VisFactoryProvider); // return the visType object, which kibana will use to display and configure new // Vis object of this type. - return new TemplateVisType({ + return VisFactory.createAngularVisualization({ name: 'markdown', title: 'Markdown', image, description: 'Create a document using markdown syntax', - category: VisType.CATEGORY.OTHER, - template: markdownVisTemplate, - params: { - editor: markdownVisParamsTemplate + category: CATEGORY.OTHER, + visConfig: { + template: markdownVisTemplate, }, - requiresSearch: false, + editorConfig: { + optionsTemplate: markdownVisParamsTemplate + }, + requestHandler: 'none', implementsRenderComplete: true, }); } diff --git a/src/core_plugins/markdown_vis/public/markdown_vis_controller.js b/src/core_plugins/markdown_vis/public/markdown_vis_controller.js index 0a37e4c30d5f5..e34dde63add14 100644 --- a/src/core_plugins/markdown_vis/public/markdown_vis_controller.js +++ b/src/core_plugins/markdown_vis/public/markdown_vis_controller.js @@ -9,11 +9,11 @@ marked.setOptions({ const module = uiModules.get('kibana/markdown_vis', ['kibana', 'ngSanitize']); -module.controller('KbnMarkdownVisController', function ($scope, $element) { +module.controller('KbnMarkdownVisController', function ($scope) { $scope.$watch('vis.params.markdown', function (html) { if (html) { $scope.html = marked(html); } - $element.trigger('renderComplete'); + $scope.renderComplete(); }); }); diff --git a/src/core_plugins/metrics/public/components/vis_editor.js b/src/core_plugins/metrics/public/components/vis_editor.js index 67ec263f7da7d..b677a707cf5f8 100644 --- a/src/core_plugins/metrics/public/components/vis_editor.js +++ b/src/core_plugins/metrics/public/components/vis_editor.js @@ -3,28 +3,42 @@ import VisEditorVisualization from './vis_editor_visualization'; import Visualization from './visualization'; import VisPicker from './vis_picker'; import PanelConfig from './panel_config'; +import brushHandler from '../lib/create_brush_handler'; class VisEditor extends Component { constructor(props) { super(props); - this.state = { model: props.model }; + this.state = { model: props.vis.params, dirty: false, autoApply: true }; + this.onBrush = brushHandler(props.vis.API.timeFilter); } render() { const handleChange = (part) => { const nextModel = { ...this.state.model, ...part }; - this.setState({ model: nextModel }); - if (this.props.onChange) { - this.props.onChange(nextModel); + + this.props.vis.params = nextModel; + if (this.state.autoApply) { + this.props.vis.updateState(); } + + this.setState({ model: nextModel, dirty: !this.state.autoApply }); }; - if (this.props.embedded) { + const handleAutoApplyToggle = (part) => { + this.setState({ autoApply: part.target.checked }); + }; + + const handleCommit = () => { + this.props.vis.updateState(); + this.setState({ dirty: false }); + }; + + if (!this.props.vis.isEditorMode()) { return ( ); } @@ -39,25 +53,30 @@ class VisEditor extends Component { model={model} onChange={handleChange} />
); } + return null; } + componentDidMount() { + this.props.renderComplete(); + } + } VisEditor.propTypes = { diff --git a/src/core_plugins/metrics/public/directives/vis_editor.js b/src/core_plugins/metrics/public/directives/vis_editor.js deleted file mode 100644 index f1ec761a4dbfa..0000000000000 --- a/src/core_plugins/metrics/public/directives/vis_editor.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import { render, unmountComponentAtNode } from 'react-dom'; -import { uiModules } from 'ui/modules'; -import VisEditor from '../components/vis_editor'; -import addScope from '../lib/add_scope'; -import angular from 'angular'; -import createBrushHandler from '../lib/create_brush_handler'; -const app = uiModules.get('apps/metrics/directives'); -app.directive('metricsVisEditor', (timefilter) => { - return { - restrict: 'E', - link: ($scope, $el) => { - const addToState = ['autoApply', 'dirty', 'embedded', 'fields', 'visData']; - const Component = addScope(VisEditor, $scope, addToState); - const handleBrush = createBrushHandler($scope, timefilter); - const handleChange = part => { - $scope.$evalAsync(() => angular.copy(part, $scope.model)); - }; - const handleCommit = () => { - $scope.$evalAsync(() => $scope.commit()); - }; - const handleToggleAutoApply = () => { - $scope.$evalAsync(() => $scope.toggleAutoApply()); - }; - render(, $el[0]); - $scope.$on('$destroy', () => { - unmountComponentAtNode($el[0]); - }); - } - }; -}); - diff --git a/src/core_plugins/metrics/public/directives/visualization.js b/src/core_plugins/metrics/public/directives/visualization.js deleted file mode 100644 index a0e7630f710ba..0000000000000 --- a/src/core_plugins/metrics/public/directives/visualization.js +++ /dev/null @@ -1,46 +0,0 @@ -import _ from 'lodash'; -import $ from 'jquery'; -import React from 'react'; -import { render, unmountComponentAtNode } from 'react-dom'; -import Visualization from '../components/visualization'; -import addScope from '../lib/add_scope'; -import { uiModules } from 'ui/modules'; -import createBrushHandler from '../lib/create_brush_handler'; - -const app = uiModules.get('apps/metrics/directives'); -app.directive('metricsVisualization', (timefilter, $timeout) => { - return { - restrict: 'E', - link: ($scope, $el) => { - const addToState = ['model', 'visData', 'reversed']; - const Component = addScope(Visualization, $scope, addToState); - const handleBrush = createBrushHandler($scope, timefilter); - render(, $el[0]); - $scope.$on('$destroy', () => unmountComponentAtNode($el[0])); - - // For Metrics, Gauges and markdown visualizations we want to hide the - // panel title because it just doens't make sense to show it. - // This is wrapped in a timeout so it happens after the directive is mouted. - // otherwise the .panel might not be available. - $timeout(() => { - const panel = $($el[0]).parents('.panel'); - if (panel.length) { - const panelHeading = panel.find('.panel-heading'); - const panelTitle = panel.find('.panel-title'); - const matchingTypes = ['metric', 'gauge', 'markdown']; - if (panelHeading.length && panelTitle.length && _.contains(matchingTypes, $scope.model.type)) { - panel.css({ position: 'relative' }); - panelHeading.css({ - position: 'absolute', - top: 0, - right: 0, - zIndex: 100 - }); - panelTitle.css({ display: 'none' }); - } - } - }, 1); - } - }; -}); - diff --git a/src/core_plugins/metrics/public/kbn_vis_types/editor.html b/src/core_plugins/metrics/public/kbn_vis_types/editor.html deleted file mode 100644 index afdd392f5f9d8..0000000000000 --- a/src/core_plugins/metrics/public/kbn_vis_types/editor.html +++ /dev/null @@ -1,5 +0,0 @@ -
- -
diff --git a/src/core_plugins/metrics/public/kbn_vis_types/editor_controller.js b/src/core_plugins/metrics/public/kbn_vis_types/editor_controller.js index a0cbdcd447ca2..d78b9fd9fc36c 100644 --- a/src/core_plugins/metrics/public/kbn_vis_types/editor_controller.js +++ b/src/core_plugins/metrics/public/kbn_vis_types/editor_controller.js @@ -1,122 +1,47 @@ -import { uiModules } from 'ui/modules'; -import '../services/executor'; -import createNewPanel from '../lib/create_new_panel'; -import '../directives/vis_editor'; -import _ from 'lodash'; -import angular from 'angular'; -import { FilterBarQueryFilterProvider } from 'ui/filter_bar/query_filter'; +import React from 'react'; +import { render, unmountComponentAtNode } from 'react-dom'; +import { FetchFieldsProvider } from '../lib/fetch_fields'; const AUTO_APPLY_KEY = 'metrics_autoApply'; -const app = uiModules.get('kibana/metrics_vis', ['kibana']); -app.controller('MetricsEditorController', ( - $location, - $element, - $scope, - Private, - timefilter, - localStorage, - metricsExecutor -) => { +function ReactEditorControllerProvider(Private, localStorage) { + const fetchFields = Private(FetchFieldsProvider); - const autoApply = localStorage.get(AUTO_APPLY_KEY); - $scope.autoApply = autoApply != null ? autoApply : true; - $scope.embedded = $location.search().embed === 'true'; - const queryFilter = Private(FilterBarQueryFilterProvider); - const createFetch = Private(require('../lib/fetch')); - const fetch = () => { - const fn = createFetch($scope); - return fn().then((resp) => { - $element.trigger('renderComplete'); - return resp; - }); - }; - const fetchFields = Private(require('../lib/fetch_fields')); - - const debouncedFetch = _.debounce(() => fetch(), 1000, { - leading: false, - trailing: true - }); - - const debouncedFetchFields = _.debounce(fetchFields($scope), 1000, { - leading: false, - trailing: true - }); + class ReactEditorController { + constructor(el, vis) { + this.el = el; + this.vis = vis; - // If the model doesn't exist we need to either intialize it with a copy from - // the $scope.vis._editableVis.params or create a new panel all together. - if (!$scope.model) { - if ($scope.vis._editableVis.params.type) { - $scope.model = _.assign({}, $scope.vis._editableVis.params); - } else { - $scope.model = createNewPanel(); - angular.copy($scope.model, $scope.vis._editableVis.params); + const autoApply = localStorage.get(AUTO_APPLY_KEY); + vis.autoApply = autoApply != null ? autoApply : true; } - fetch(); - } - - $scope.commit = () => { - fetch(); - $scope.dirty = false; - }; - - $scope.toggleAutoApply = () => { - $scope.autoApply = !$scope.autoApply; - localStorage.set(AUTO_APPLY_KEY, $scope.autoApply); - }; - $scope.$watchCollection('model', (newValue, oldValue) => { - angular.copy(newValue, $scope.vis._editableVis.params); - $scope.stageEditableVis(); - $scope.dirty = !_.isEqual(newValue, oldValue); - - if ($scope.dirty && $scope.autoApply) { - debouncedFetch(); - $scope.dirty = false; - } + render(visData) { + this.visData = visData; - const patternsToFetch = []; - // Fetch any missing index patterns - if (!$scope.fields[newValue.index_pattern]) { - patternsToFetch.push(newValue.index_pattern); + return new Promise((resolve) => { + fetchFields(this.vis.params.index_pattern).then(fields => { + this.vis.fields = fields; + const Component = this.vis.type.editorConfig.component; + render(, this.el); + }); + }); } - newValue.series.forEach(series => { - if (series.override_index_pattern && - !$scope.fields[series.series_index_pattern]) { - patternsToFetch.push(series.series_index_pattern); + resize() { + if (this.visData) { + this.render(this.visData); } - }); - - if (newValue.annotations) { - newValue.annotations.forEach(item => { - if (item.index_pattern && - !$scope.fields[item.index_pattern]) { - patternsToFetch.push(item.index_pattern); - } - }); } - if(patternsToFetch.length) { - debouncedFetchFields(_.unique(patternsToFetch)); + destroy() { + unmountComponentAtNode(this.el); } - }); - - $scope.visData = {}; - $scope.fields = {}; - // All those need to be consolidated - $scope.$listen(queryFilter, 'fetch', fetch); - $scope.$on('fetch', fetch); - - fetchFields($scope)($scope.model.index_pattern); - - // Register fetch - metricsExecutor.register({ execute: fetch }); - - // Start the executor - metricsExecutor.start(); - - // Destory the executor - $scope.$on('$destroy', metricsExecutor.destroy); + } -}); + return { + name: 'react_editor', + handler: ReactEditorController + }; +} +export { ReactEditorControllerProvider }; diff --git a/src/core_plugins/metrics/public/kbn_vis_types/index.js b/src/core_plugins/metrics/public/kbn_vis_types/index.js index a35d016b7e5f1..6de6fed5f46c2 100644 --- a/src/core_plugins/metrics/public/kbn_vis_types/index.js +++ b/src/core_plugins/metrics/public/kbn_vis_types/index.js @@ -1,36 +1,65 @@ -import './vis_controller'; -import './editor_controller'; import '../visualizations/less/main.less'; import 'react-select/dist/react-select.css'; import '../less/main.less'; import image from '../images/icon-visualbuilder.svg'; -import { TemplateVisTypeProvider } from 'ui/template_vis_type'; +import { MetricsRequestHandlerProvider } from './request_handler'; +import { ReactEditorControllerProvider } from './editor_controller'; +import { VisFactoryProvider } from 'ui/vis/vis_factory'; +import { CATEGORY } from 'ui/vis/vis_category'; -import { VisVisTypeProvider } from 'ui/vis/vis_type'; // register the provider with the visTypes registry so that other know it exists import { VisTypesRegistryProvider } from 'ui/registry/vis_types'; VisTypesRegistryProvider.register(MetricsVisProvider); export default function MetricsVisProvider(Private) { - const VisType = Private(VisVisTypeProvider); - const TemplateVisType = Private(TemplateVisTypeProvider); + const VisFactory = Private(VisFactoryProvider); + const ReactEditorController = Private(ReactEditorControllerProvider).handler; + const metricsRequestHandler = Private(MetricsRequestHandlerProvider).handler; - // return the visType object, which kibana will use to display and configure new - // Vis object of this type. - return new TemplateVisType({ + return VisFactory.createReactVisualization({ name: 'metrics', title: 'Visual Builder', - image, description: 'Build time-series using a visual pipeline interface', - category: VisType.CATEGORY.TIME, + category: CATEGORY.TIME, + image, isExperimental: true, - template: require('./vis.html'), - fullEditor: true, - params: { - editor: require('./editor.html') + visConfig: { + defaults: { + id: '61ca57f0-469d-11e7-af02-69e470af7417', + type: 'timeseries', + series: [ + { + id: '61ca57f1-469d-11e7-af02-69e470af7417', + color: '#68BC00', + split_mode: 'everything', + metrics: [ + { + id: '61ca57f2-469d-11e7-af02-69e470af7417', + type: 'count' + }], + seperate_axis: 0, + axis_position: 'right', + formatter: 'number', + chart_type: 'line', + line_width: 1, + point_size: 1, + fill: 0.5, + stacked: 'none' + }], + time_field: '@timestamp', + index_pattern: '*', + interval: 'auto', + axis_position: 'left', + axis_formatter: 'number', + show_legend:1 + }, + component: require('../components/vis_editor') + }, + editor: ReactEditorController, + editorConfig: { + component: require('../components/vis_editor') }, - requiresSearch: false, - requiresTimePicker: true, - implementsRenderComplete: true, + requestHandler: metricsRequestHandler, + responseHandler: 'none' }); } diff --git a/src/core_plugins/metrics/public/kbn_vis_types/request_handler.js b/src/core_plugins/metrics/public/kbn_vis_types/request_handler.js new file mode 100644 index 0000000000000..2282bdb02b131 --- /dev/null +++ b/src/core_plugins/metrics/public/kbn_vis_types/request_handler.js @@ -0,0 +1,69 @@ +import { validateInterval } from '../lib/validate_interval'; +import { dashboardContextProvider } from 'plugins/kibana/dashboard/dashboard_context'; + +const MetricsRequestHandlerProvider = function (Private, Notifier, config, timefilter, $http) { + const dashboardContext = Private(dashboardContextProvider); + const notify = new Notifier({ location: 'Metrics' }); + + return { + name: 'metrics', + handler: function (vis /*, appState, uiState*/) { + + return new Promise((resolve) => { + const panel = vis.params; + if (panel && panel.id) { + const params = { + timerange: timefilter.getBounds(), + filters: [dashboardContext()], + panels: [panel] + }; + + try { + const maxBuckets = config.get('metrics:max_buckets'); + validateInterval(timefilter, panel, maxBuckets); + return $http.post('../api/metrics/vis/data', params) + .success(resp => { + + const patternsToFetch = []; + // Fetch any missing index patterns + if (!vis.fields) vis.fields = {}; + + if (!vis.fields[vis.params.index_pattern]) { + patternsToFetch.push(vis.params.index_pattern); + } + + vis.params.series.forEach(series => { + if (series.override_index_pattern && + !vis.fields[series.series_index_pattern]) { + patternsToFetch.push(series.series_index_pattern); + } + }); + + if (vis.params.annotations) { + vis.params.annotations.forEach(item => { + if (item.index_pattern && + !vis.fields[item.index_pattern]) { + patternsToFetch.push(item.index_pattern); + } + }); + } + + resolve(resp); + }) + .error(resp => { + resolve({}); + const err = new Error(resp.message); + err.stack = resp.stack; + notify.error(err); + }); + } catch (e) { + notify.error(e); + return resolve(); + } + } + }); + } + }; +}; + +export { MetricsRequestHandlerProvider }; diff --git a/src/core_plugins/metrics/public/kbn_vis_types/vis.html b/src/core_plugins/metrics/public/kbn_vis_types/vis.html deleted file mode 100644 index 59db84f9bc896..0000000000000 --- a/src/core_plugins/metrics/public/kbn_vis_types/vis.html +++ /dev/null @@ -1,4 +0,0 @@ -
- -
diff --git a/src/core_plugins/metrics/public/kbn_vis_types/vis_controller.js b/src/core_plugins/metrics/public/kbn_vis_types/vis_controller.js deleted file mode 100644 index dff2b669c6daf..0000000000000 --- a/src/core_plugins/metrics/public/kbn_vis_types/vis_controller.js +++ /dev/null @@ -1,49 +0,0 @@ -import { uiModules } from 'ui/modules'; -import 'ui/state_management/app_state'; -import '../directives/visualization'; -import { FilterBarQueryFilterProvider } from 'ui/filter_bar/query_filter'; - -const app = uiModules.get('kibana/metrics_vis'); - -app.controller('MetricsVisController', ( - $scope, - $element, - Private, - timefilter, - getAppState, - $location -) => { - - // If we are in the visualize editor context (and not embedded) we should not - // render the visualizations. This is handled by the editor itself. - const embedded = $location.search().embed === 'true'; - if (!embedded && $scope.vis._editableVis) { - return; - } - // We need to watch the app state for changes to the dark theme attribute. - $scope.state = getAppState(); - $scope.$watch('state.options.darkTheme', newValue => { - $scope.reversed = Boolean(newValue); - }); - - const queryFilter = Private(FilterBarQueryFilterProvider); - const createFetch = Private(require('../lib/fetch')); - const fetch = () => { - const fn = createFetch($scope); - return fn().then((resp) => { - $element.trigger('renderComplete'); - return resp; - }); - }; - - - $scope.model = $scope.vis.params; - $scope.$watch('vis.params', fetch); - - // All those need to be consolidated - $scope.$listen(timefilter, 'fetch', fetch); - $scope.$listen(queryFilter, 'fetch', fetch); - - $scope.$on('courier:searchRefresh', fetch); - $scope.$on('fetch', fetch); -}); diff --git a/src/core_plugins/metrics/public/less/editor.less b/src/core_plugins/metrics/public/less/editor.less index 9fcd6d5fabfdb..fb85295e97f27 100644 --- a/src/core_plugins/metrics/public/less/editor.less +++ b/src/core_plugins/metrics/public/less/editor.less @@ -1,5 +1,8 @@ @borderRadius: 4px; +.vis_editor { + flex: 1; +} .vis_editor_container { background: @pageColor; } diff --git a/src/core_plugins/metrics/public/lib/__tests__/add_scope.js b/src/core_plugins/metrics/public/lib/__tests__/add_scope.js deleted file mode 100644 index c2728ce598c0a..0000000000000 --- a/src/core_plugins/metrics/public/lib/__tests__/add_scope.js +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react'; -import { expect } from 'chai'; -import { shallow } from 'enzyme'; -import sinon from 'sinon'; -import addScope from '../add_scope'; - -const Component = React.createClass({ - render() { - return (
); - } -}); - -describe('addScope()', () => { - - let unsubStub; - let watchCollectionStub; - let $scope; - - beforeEach(() => { - unsubStub = sinon.stub(); - watchCollectionStub = sinon.stub().returns(unsubStub); - $scope = { - $watchCollection: watchCollectionStub, - testOne: 1, - testTwo: 2 - }; - }); - - it('adds $scope variables as props to wrapped component', () => { - const WrappedComponent = addScope(Component, $scope, ['testOne', 'testTwo']); - const wrapper = shallow(); - expect(wrapper.state('testOne')).to.equal(1); - expect(wrapper.state('testTwo')).to.equal(2); - }); - - it('calls $scope.$watchCollection on each scoped item', () => { - const WrappedComponent = addScope(Component, $scope, ['testOne', 'testTwo']); - shallow(); - expect(watchCollectionStub.calledTwice).to.equal(true); - expect(watchCollectionStub.firstCall.args[0]).to.equal('testOne'); - expect(watchCollectionStub.secondCall.args[0]).to.equal('testTwo'); - }); - - it('unsubscribes from watches', () => { - const WrappedComponent = addScope(Component, $scope, ['testOne', 'testTwo']); - const wrapper = shallow(); - wrapper.unmount(); - expect(unsubStub.calledTwice).to.equal(true); - }); - - it('updates state when watch is called', () => { - const WrappedComponent = addScope(Component, $scope, ['testOne']); - const wrapper = shallow(); - watchCollectionStub.firstCall.args[1].call(null, 3); - expect(wrapper.state('testOne')).to.equal(3); - }); - -}); diff --git a/src/core_plugins/metrics/public/lib/__tests__/create_brush_handler.js b/src/core_plugins/metrics/public/lib/__tests__/create_brush_handler.js index d57f05e4bbf7f..9c1b865215ccb 100644 --- a/src/core_plugins/metrics/public/lib/__tests__/create_brush_handler.js +++ b/src/core_plugins/metrics/public/lib/__tests__/create_brush_handler.js @@ -1,29 +1,19 @@ import createBrushHandler from '../create_brush_handler'; -import sinon from 'sinon'; import moment from 'moment'; import { expect } from 'chai'; describe('createBrushHandler', () => { - - let evalAsyncStub; - let $scope; let timefilter; let fn; let range; beforeEach(() => { - evalAsyncStub = sinon.stub().yields(); - $scope = { $evalAsync: evalAsyncStub }; - timefilter = { time: {} }; - fn = createBrushHandler($scope, timefilter); + timefilter = { time: {}, update: () => {} }; + fn = createBrushHandler(timefilter); range = { xaxis: { from: '2017-01-01T00:00:00Z', to: '2017-01-01T00:10:00Z' } }; fn(range); }); - it('returns brushHandler() that calls $scope.$evalAsync()', () => { - expect(evalAsyncStub.calledOnce).to.equal(true); - }); - it('returns brushHandler() that updates timefilter', () => { expect(timefilter.time.from).to.equal(moment(range.xaxis.from).toISOString()); expect(timefilter.time.to).to.equal(moment(range.xaxis.to).toISOString()); diff --git a/src/core_plugins/metrics/public/lib/add_scope.js b/src/core_plugins/metrics/public/lib/add_scope.js deleted file mode 100644 index 047501f8fba91..0000000000000 --- a/src/core_plugins/metrics/public/lib/add_scope.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -export default function addScope(WrappedComponent, $scope, addToState = []) { - return React.createClass({ - - getInitialState() { - const state = {}; - addToState.forEach(key => { - state[key] = $scope[key]; - }); - return state; - }, - - componentWillMount() { - this.unsubs = addToState.map(key => { - return $scope.$watchCollection(key, newValue => { - const newState = {}; - newState[key] = newValue; - this.setState(newState); - }); - }); - }, - - componentWillUnmount() { - this.unsubs.forEach(fn => fn()); - }, - - render() { - return ( - - ); - } - }); -} diff --git a/src/core_plugins/metrics/public/lib/create_brush_handler.js b/src/core_plugins/metrics/public/lib/create_brush_handler.js index 8b6b5bf315231..b4eb7ca25e1c5 100644 --- a/src/core_plugins/metrics/public/lib/create_brush_handler.js +++ b/src/core_plugins/metrics/public/lib/create_brush_handler.js @@ -1,8 +1,9 @@ import moment from 'moment'; -export default ($scope, timefilter) => ranges => { - $scope.$evalAsync(() => { - timefilter.time.from = moment(ranges.xaxis.from).toISOString(); - timefilter.time.to = moment(ranges.xaxis.to).toISOString(); - timefilter.time.mode = 'absolute'; - }); +export default (timefilter) => ranges => { + //$scope.$evalAsync(() => { + timefilter.time.from = moment(ranges.xaxis.from).toISOString(); + timefilter.time.to = moment(ranges.xaxis.to).toISOString(); + timefilter.time.mode = 'absolute'; + timefilter.update(); + //}); }; diff --git a/src/core_plugins/metrics/public/lib/fetch.js b/src/core_plugins/metrics/public/lib/fetch.js deleted file mode 100644 index a2419b79700cc..0000000000000 --- a/src/core_plugins/metrics/public/lib/fetch.js +++ /dev/null @@ -1,42 +0,0 @@ -import { validateInterval } from './validate_interval'; -import { dashboardContextProvider } from 'plugins/kibana/dashboard/dashboard_context'; -export default ( - timefilter, - Private, - Notifier, - $http, - config, -) => { - const dashboardContext = Private(dashboardContextProvider); - const notify = new Notifier({ location: 'Metrics' }); - return $scope => () => { - const panel = $scope.model; - if (panel && panel.id) { - const params = { - timerange: timefilter.getBounds(), - filters: [dashboardContext()], - panels: [panel] - }; - - try { - const maxBuckets = config.get('metrics:max_buckets'); - validateInterval(timefilter, panel, maxBuckets); - return $http.post('../api/metrics/vis/data', params) - .success(resp => { - $scope.visData = resp; - }) - .error(resp => { - $scope.visData = {}; - const err = new Error(resp.message); - err.stack = resp.stack; - notify.error(err); - }); - } catch (e) { - notify.error(e); - return Promise.resolve(); - } - } - return Promise.resolve(); - }; -}; - diff --git a/src/core_plugins/metrics/public/lib/fetch_fields.js b/src/core_plugins/metrics/public/lib/fetch_fields.js index 8f0949ed34a7f..4c5180141a480 100644 --- a/src/core_plugins/metrics/public/lib/fetch_fields.js +++ b/src/core_plugins/metrics/public/lib/fetch_fields.js @@ -1,25 +1,29 @@ -export default ( - Notifier, - $http -) => { +const FetchFieldsProvider = (Notifier, $http) => { const notify = new Notifier({ location: 'Metrics' }); - return $scope => (indexPatterns = ['*']) => { + return (indexPatterns = ['*']) => { if (!Array.isArray(indexPatterns)) indexPatterns = [indexPatterns]; - return Promise.all(indexPatterns.map(pattern => { - return $http.get(`../api/metrics/fields?index=${pattern}`) - .success(resp => { - if (!$scope.fields) $scope.fields = {}; - if (resp.length && pattern) { - $scope.fields[pattern] = resp; - } - }) - .error(resp => { - $scope.visData = {}; - const err = new Error(resp.message); - err.stack = resp.stack; - notify.error(err); - }); - })); + return new Promise((resolve, reject) => { + const fields = {}; + + Promise.all(indexPatterns.map(pattern => { + return $http.get(`../api/metrics/fields?index=${pattern}`) + .success(resp => { + if (resp.length && pattern) { + fields[pattern] = resp; + } + }) + .error(resp => { + const err = new Error(resp.message); + err.stack = resp.stack; + notify.error(err); + reject(err); + }); + })).then(() => { + resolve(fields); + }); + }); }; }; +export { FetchFieldsProvider }; + diff --git a/src/core_plugins/region_map/public/choropleth_layer.js b/src/core_plugins/region_map/public/choropleth_layer.js index bd9b42c065018..639d69f485090 100644 --- a/src/core_plugins/region_map/public/choropleth_layer.js +++ b/src/core_plugins/region_map/public/choropleth_layer.js @@ -2,7 +2,7 @@ import $ from 'jquery'; import L from 'leaflet'; import _ from 'lodash'; import d3 from 'd3'; -import { KibanaMapLayer } from 'ui/vis_maps/kibana_map_layer'; +import { KibanaMapLayer } from '../../tile_map/public/kibana_map_layer'; import { truncatedColorMaps } from 'ui/vislib/components/color/truncated_colormaps'; export default class ChoroplethLayer extends KibanaMapLayer { diff --git a/src/core_plugins/region_map/public/region_map_controller.js b/src/core_plugins/region_map/public/region_map_controller.js index 0245f51f551ec..905dc3c9b6910 100644 --- a/src/core_plugins/region_map/public/region_map_controller.js +++ b/src/core_plugins/region_map/public/region_map_controller.js @@ -2,12 +2,11 @@ import { uiModules } from 'ui/modules'; import 'plugins/kbn_vislib_vis_types/controls/vislib_basic_options'; import _ from 'lodash'; import AggConfigResult from 'ui/vis/agg_config_result'; -import { KibanaMap } from 'ui/vis_maps/kibana_map'; +import { KibanaMap } from '../../tile_map/public/kibana_map'; import ChoroplethLayer from './choropleth_layer'; import { truncatedColorMaps } from 'ui/vislib/components/color/truncated_colormaps'; import AggResponsePointSeriesTooltipFormatterProvider from './tooltip_formatter'; -import { ResizeCheckerProvider } from 'ui/resize_checker'; -import 'ui/vis_maps/lib/service_settings'; +import '../../tile_map/public/lib/service_settings'; const module = uiModules.get('kibana/region_map', ['kibana']); @@ -15,18 +14,18 @@ module.controller('KbnRegionMapController', function ($scope, $element, Private, serviceSettings, config) { const tooltipFormatter = Private(AggResponsePointSeriesTooltipFormatterProvider); - const ResizeChecker = Private(ResizeCheckerProvider); const notify = new Notifier({ location: 'Region map' }); - const resizeChecker = new ResizeChecker($element); + let kibanaMap = null; - resizeChecker.on('resize', () => { + let choroplethLayer = null; + const kibanaMapReady = makeKibanaMap(); + + $scope.$watch('resize', () => { if (kibanaMap) { kibanaMap.resize(); } }); - let choroplethLayer = null; - const kibanaMapReady = makeKibanaMap(); $scope.$watch('esResponse', async function (response) { kibanaMapReady.then(() => { diff --git a/src/core_plugins/region_map/public/region_map_vis.js b/src/core_plugins/region_map/public/region_map_vis.js index e2ab2437baf34..f631adb867be1 100644 --- a/src/core_plugins/region_map/public/region_map_vis.js +++ b/src/core_plugins/region_map/public/region_map_vis.js @@ -3,32 +3,29 @@ import './region_map_controller'; import './region_map_vis_params'; import regionTemplate from './region_map_controller.html'; import image from './images/icon-vector-map.svg'; -import { TemplateVisTypeProvider } from 'ui/template_vis_type/template_vis_type'; -import { VisSchemasProvider } from 'ui/vis/schemas'; +import { VisFactoryProvider } from 'ui/vis/vis_factory'; +import { CATEGORY } from 'ui/vis/vis_category'; +import { VisSchemasProvider } from 'ui/vis/editors/default/schemas'; import { VisTypesRegistryProvider } from 'ui/registry/vis_types'; -import { VisVisTypeProvider } from 'ui/vis/vis_type'; import { truncatedColorMaps } from 'ui/vislib/components/color/truncated_colormaps'; VisTypesRegistryProvider.register(function RegionMapProvider(Private, regionmapsConfig) { - - const VisType = Private(VisVisTypeProvider); - const TemplateVisType = Private(TemplateVisTypeProvider); + const VisFactory = Private(VisFactoryProvider); const Schemas = Private(VisSchemasProvider); const vectorLayers = regionmapsConfig.layers; const selectedLayer = vectorLayers[0]; const selectedJoinField = selectedLayer ? vectorLayers[0].fields[0] : null; - return new TemplateVisType({ + return VisFactory.createAngularVisualization({ name: 'region_map', title: 'Region Map', implementsRenderComplete: true, description: 'Show metrics on a thematic map. Use one of the provide base maps, or add your own. ' + 'Darker colors represent higher values.', - category: VisType.CATEGORY.MAP, + category: CATEGORY.MAP, image, - template: regionTemplate, - params: { + visConfig: { defaults: { legendPosition: 'bottomright', addTooltip: true, @@ -36,45 +33,51 @@ VisTypesRegistryProvider.register(function RegionMapProvider(Private, regionmaps selectedLayer: selectedLayer, selectedJoinField: selectedJoinField }, - legendPositions: [{ - value: 'bottomleft', - text: 'bottom left', - }, { - value: 'bottomright', - text: 'bottom right', - }, { - value: 'topleft', - text: 'top left', - }, { - value: 'topright', - text: 'top right', - }], - colorSchemas: Object.keys(truncatedColorMaps), - vectorLayers: vectorLayers, - editor: '' + template: regionTemplate, }, - schemas: new Schemas([ - { - group: 'metrics', - name: 'metric', - title: 'Value', - min: 1, - max: 1, - aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality', 'top_hits', 'sum_bucket', 'min_bucket', 'max_bucket', 'avg_bucket'], - defaults: [ - { schema: 'metric', type: 'count' } - ] + editorConfig: { + optionsTemplate: '', + collections: { + legendPositions: [{ + value: 'bottomleft', + text: 'bottom left', + }, { + value: 'bottomright', + text: 'bottom right', + }, { + value: 'topleft', + text: 'top left', + }, { + value: 'topright', + text: 'top right', + }], + colorSchemas: Object.keys(truncatedColorMaps), + vectorLayers: vectorLayers, }, - { - group: 'buckets', - name: 'segment', - icon: 'fa fa-globe', - title: 'shape field', - min: 1, - max: 1, - aggFilter: ['terms'] - } - ]) + schemas: new Schemas([ + { + group: 'metrics', + name: 'metric', + title: 'Value', + min: 1, + max: 1, + aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality', 'top_hits', + 'sum_bucket', 'min_bucket', 'max_bucket', 'avg_bucket'], + defaults: [ + { schema: 'metric', type: 'count' } + ] + }, + { + group: 'buckets', + name: 'segment', + icon: 'fa fa-globe', + title: 'shape field', + min: 1, + max: 1, + aggFilter: ['terms'] + } + ]) + } }); }); diff --git a/src/core_plugins/region_map/public/region_map_vis_params.html b/src/core_plugins/region_map/public/region_map_vis_params.html index 45a218267a3b6..9aba92115e880 100644 --- a/src/core_plugins/region_map/public/region_map_vis_params.html +++ b/src/core_plugins/region_map/public/region_map_vis_params.html @@ -15,9 +15,9 @@ id="regionMap" class="kuiSelect kuiSideBarSelect" ng-model="vis.params.selectedLayer" - ng-options="layer.name for layer in vis.type.params.vectorLayers" + ng-options="layer.name for layer in collections.vectorLayers" ng-change="onLayerChange()" - ng-init="vis.params.selectedLayer=vis.type.params.vectorLayers[0]" + ng-init="vis.params.selectedLayer=collections.vectorLayers[0]" >
@@ -51,7 +51,7 @@ id="colorSchema" class="kuiSelect kuiSideBarSelect" ng-model="vis.params.colorSchema" - ng-options="mode for mode in vis.type.params.colorSchemas" + ng-options="mode for mode in collections.colorSchemas" > diff --git a/src/core_plugins/region_map/public/region_map_vis_params.js b/src/core_plugins/region_map/public/region_map_vis_params.js index 88189c43307e5..5b286f2d8c06c 100644 --- a/src/core_plugins/region_map/public/region_map_vis_params.js +++ b/src/core_plugins/region_map/public/region_map_vis_params.js @@ -13,11 +13,13 @@ uiModules.get('kibana/region_map') template: regionMapVisParamsTemplate, link: function ($scope) { + $scope.collections = $scope.vis.type.editorConfig.collections; + $scope.onLayerChange = onLayerChange; serviceSettings.getFileLayers() .then(function (layersFromService) { - const newVectorLayers = $scope.vis.type.params.vectorLayers.slice(); + const newVectorLayers = $scope.collections.vectorLayers.slice(); for (let i = 0; i < layersFromService.length; i += 1) { const layerFromService = layersFromService[i]; const alreadyAdded = newVectorLayers.some((layer) =>_.eq(layerFromService, layer)); @@ -26,10 +28,10 @@ uiModules.get('kibana/region_map') } } - $scope.vis.type.params.vectorLayers = newVectorLayers; + $scope.collections.vectorLayers = newVectorLayers; - if ($scope.vis.type.params.vectorLayers[0] && !$scope.vis.params.selectedLayer) { - $scope.vis.params.selectedLayer = $scope.vis.type.params.vectorLayers[0]; + if ($scope.collections.vectorLayers[0] && !$scope.vis.params.selectedLayer) { + $scope.vis.params.selectedLayer = $scope.collections.vectorLayers[0]; onLayerChange(); } diff --git a/src/core_plugins/spy_modes/public/table_spy_mode.js b/src/core_plugins/spy_modes/public/table_spy_mode.js index 8232c73a3741c..3251e3a113896 100644 --- a/src/core_plugins/spy_modes/public/table_spy_mode.js +++ b/src/core_plugins/spy_modes/public/table_spy_mode.js @@ -15,16 +15,16 @@ function VisSpyTableProvider(Notifier, $filter, $rootScope, config, Private) { link: function tableLinkFn($scope) { $rootScope.$watchMulti.call($scope, [ 'vis', - 'esResp' + 'visData' ], function () { - if (!$scope.vis || !$scope.esResp) { + if (!$scope.vis || !$scope.visData) { $scope.table = null; } else { if (!$scope.spy.params.spyPerPage) { $scope.spy.params.spyPerPage = PER_PAGE_DEFAULT; } - $scope.table = tabifyAggResponse($scope.vis, $scope.esResp, { + $scope.table = tabifyAggResponse($scope.vis, $scope.searchSource.rawResponse, { canSplit: false, asAggConfigResults: true, partialRows: true diff --git a/src/core_plugins/table_vis/public/__tests__/_table_vis.js b/src/core_plugins/table_vis/public/__tests__/_table_vis.js index 5b1b44776b607..6b4414d4cefcc 100644 --- a/src/core_plugins/table_vis/public/__tests__/_table_vis.js +++ b/src/core_plugins/table_vis/public/__tests__/_table_vis.js @@ -29,9 +29,10 @@ describe('Integration', function () { $rootScope.vis = vis; $rootScope.esResponse = esResponse; $rootScope.uiState = require('fixtures/mock_ui_state'); - $el = $(''); + $el = $(''); $compile($el)($rootScope); $rootScope.$apply(); + } function OneRangeVis(params) { @@ -89,20 +90,25 @@ describe('Integration', function () { it('passes the table groups to the kbnAggTableGroup directive', function () { init(new OneRangeVis(), fixtures.oneRangeBucket); - const $atg = $el.find('kbn-agg-table-group').first(); - expect($atg.size()).to.be(1); - expect($atg.attr('group')).to.be('tableGroups'); - expect($atg.isolateScope().group).to.be($atg.scope().tableGroups); + $rootScope.$on('renderComplete', () => { + const $atg = $el.find('kbn-agg-table-group').first(); + expect($atg.size()).to.be(1); + expect($atg.attr('group')).to.be('tableGroups'); + expect($atg.isolateScope().group).to.be($atg.scope().tableGroups); + }); + }); it('displays an error if the search had no hits', function () { init(new OneRangeVis(), { hits: { total: 0, hits: [] } }); - expect($el.find('kbn-agg-table-group').size()).to.be(0); + $rootScope.$on('renderComplete', () => { + expect($el.find('kbn-agg-table-group').size()).to.be(0); - const $err = $el.find('.table-vis-error'); - expect($err.size()).to.be(1); - expect($err.text().trim()).to.be('No results found'); + const $err = $el.find('.table-vis-error'); + expect($err.size()).to.be(1); + expect($err.text().trim()).to.be('No results found'); + }); }); it('displays an error if the search hits, but didn\'t create any rows', function () { @@ -121,10 +127,12 @@ describe('Integration', function () { init(new ThreeTermVis(visParams), resp); - expect($el.find('kbn-agg-table-group').size()).to.be(0); + $rootScope.$on('renderComplete', () => { + expect($el.find('kbn-agg-table-group').size()).to.be(0); - const $err = $el.find('.table-vis-error'); - expect($err.size()).to.be(1); - expect($err.text().trim()).to.be('No results found'); + const $err = $el.find('.table-vis-error'); + expect($err.size()).to.be(1); + expect($err.text().trim()).to.be('No results found'); + }); }); }); diff --git a/src/core_plugins/table_vis/public/__tests__/_table_vis_controller.js b/src/core_plugins/table_vis/public/__tests__/_table_vis_controller.js index bf5dd7c587097..6f458fa3aa413 100644 --- a/src/core_plugins/table_vis/public/__tests__/_table_vis_controller.js +++ b/src/core_plugins/table_vis/public/__tests__/_table_vis_controller.js @@ -58,6 +58,7 @@ describe('Controller', function () { $rootScope.vis = vis; $rootScope.uiState = new AppState({ uiState: {} }).makeStateful('uiState'); + $rootScope.renderComplete = () => {}; $rootScope.newScope = function (scope) { $scope = scope; }; $el = $('
') diff --git a/src/core_plugins/table_vis/public/table_vis.js b/src/core_plugins/table_vis/public/table_vis.js index c0039ccbd72a9..42ed2e5ff2bd3 100644 --- a/src/core_plugins/table_vis/public/table_vis.js +++ b/src/core_plugins/table_vis/public/table_vis.js @@ -3,9 +3,9 @@ import 'plugins/table_vis/table_vis_controller'; import 'plugins/table_vis/table_vis_params'; import 'ui/agg_table'; import 'ui/agg_table/agg_table_group'; -import { VisVisTypeProvider } from 'ui/vis/vis_type'; -import { TemplateVisTypeProvider } from 'ui/template_vis_type/template_vis_type'; -import { VisSchemasProvider } from 'ui/vis/schemas'; +import { VisFactoryProvider } from 'ui/vis/vis_factory'; +import { CATEGORY } from 'ui/vis/vis_category'; +import { VisSchemasProvider } from 'ui/vis/editors/default/schemas'; import tableVisTemplate from 'plugins/table_vis/table_vis.html'; import { VisTypesRegistryProvider } from 'ui/registry/vis_types'; import image from './images/icon-table.svg'; @@ -22,8 +22,7 @@ VisTypesRegistryProvider.register(TableVisTypeProvider); // define the TableVisType function TableVisTypeProvider(Private) { - const VisType = Private(VisVisTypeProvider); - const TemplateVisType = Private(TemplateVisTypeProvider); + const VisFactory = Private(VisFactoryProvider); const Schemas = Private(VisSchemasProvider); // define the TableVisController which is used in the template @@ -31,14 +30,14 @@ function TableVisTypeProvider(Private) { // return the visType object, which kibana will use to display and configure new // Vis object of this type. - return new TemplateVisType({ + return VisFactory.createAngularVisualization({ + type: 'table', name: 'table', title: 'Data Table', image, description: 'Display values in a table', - category: VisType.CATEGORY.DATA, - template: tableVisTemplate, - params: { + category: CATEGORY.DATA, + visConfig: { defaults: { perPage: 10, showPartialRows: false, @@ -50,34 +49,36 @@ function TableVisTypeProvider(Private) { showTotal: false, totalFunc: 'sum' }, - editor: '' + template: tableVisTemplate, + }, + editorConfig: { + optionsTemplate: '', + schemas: new Schemas([ + { + group: 'metrics', + name: 'metric', + title: 'Metric', + aggFilter: '!geo_centroid', + min: 1, + defaults: [ + { type: 'count', schema: 'metric' } + ] + }, + { + group: 'buckets', + name: 'bucket', + title: 'Split Rows' + }, + { + group: 'buckets', + name: 'split', + title: 'Split Table' + } + ]) }, - implementsRenderComplete: true, hierarchicalData: function (vis) { return Boolean(vis.params.showPartialRows || vis.params.showMeticsAtAllLevels); - }, - schemas: new Schemas([ - { - group: 'metrics', - name: 'metric', - title: 'Metric', - aggFilter: '!geo_centroid', - min: 1, - defaults: [ - { type: 'count', schema: 'metric' } - ] - }, - { - group: 'buckets', - name: 'bucket', - title: 'Split Rows' - }, - { - group: 'buckets', - name: 'split', - title: 'Split Table' - } - ]) + } }); } diff --git a/src/core_plugins/table_vis/public/table_vis_controller.js b/src/core_plugins/table_vis/public/table_vis_controller.js index 8620a3712e434..d320647a88792 100644 --- a/src/core_plugins/table_vis/public/table_vis_controller.js +++ b/src/core_plugins/table_vis/public/table_vis_controller.js @@ -44,7 +44,7 @@ module.controller('KbnTableVisController', function ($scope, $element, Private) return table.rows.length > 0; }); - $element.trigger('renderComplete'); + $scope.renderComplete(); } $scope.hasSomeRows = hasSomeRows; diff --git a/src/core_plugins/tagcloud/public/tag_cloud_controller.js b/src/core_plugins/tagcloud/public/tag_cloud_controller.js index fe4de66c3b7d8..3beea10eb69f5 100644 --- a/src/core_plugins/tagcloud/public/tag_cloud_controller.js +++ b/src/core_plugins/tagcloud/public/tag_cloud_controller.js @@ -20,6 +20,7 @@ module.controller('KbnTagCloudController', function ($scope, $element, Private, const aggConfigResult = new AggConfigResult(aggs[0], false, event, event); clickHandler({ point: { aggConfigResult: aggConfigResult } }); }); + tagCloud.on('renderComplete', () => { const truncatedMessage = containerNode.querySelector('.tagcloud-truncated-message'); @@ -33,13 +34,9 @@ module.controller('KbnTagCloudController', function ($scope, $element, Private, const bucketName = containerNode.querySelector('.tagcloud-custom-label'); bucketName.innerHTML = `${$scope.vis.aggs[0].makeLabel()} - ${$scope.vis.aggs[1].makeLabel()}`; - - truncatedMessage.style.display = truncated ? 'block' : 'none'; - const status = tagCloud.getStatus(); - if (TagCloud.STATUS.COMPLETE === status) { incompleteMessage.style.display = 'none'; } else if (TagCloud.STATUS.INCOMPLETE === status) { @@ -47,7 +44,7 @@ module.controller('KbnTagCloudController', function ($scope, $element, Private, } - $element.trigger('renderComplete'); + $scope.renderComplete(); }); $scope.$watch('esResponse', async function (response) { @@ -87,14 +84,9 @@ module.controller('KbnTagCloudController', function ($scope, $element, Private, $scope.$watch('vis.params', (options) => tagCloud.setOptions(options)); - $scope.$watch(getContainerSize, _.debounce(() => { + $scope.$watch('resize', () => { tagCloud.resize(); - }, 1000, { trailing: true }), true); - - - function getContainerSize() { - return { width: $element.width(), height: $element.height() }; - } + }); function getValue(metricsAgg, bucket) { let size = metricsAgg.getValue(bucket); diff --git a/src/core_plugins/tagcloud/public/tag_cloud_vis.js b/src/core_plugins/tagcloud/public/tag_cloud_vis.js index 5c65c13a6c587..6141ca51fe146 100644 --- a/src/core_plugins/tagcloud/public/tag_cloud_vis.js +++ b/src/core_plugins/tagcloud/public/tag_cloud_vis.js @@ -1,59 +1,62 @@ import 'plugins/tagcloud/tag_cloud.less'; import 'plugins/tagcloud/tag_cloud_controller'; import 'plugins/tagcloud/tag_cloud_vis_params'; -import { VisVisTypeProvider } from 'ui/vis/vis_type'; -import { TemplateVisTypeProvider } from 'ui/template_vis_type/template_vis_type'; -import { VisSchemasProvider } from 'ui/vis/schemas'; +import { VisFactoryProvider } from 'ui/vis/vis_factory'; +import { CATEGORY } from 'ui/vis/vis_category'; +import { VisSchemasProvider } from 'ui/vis/editors/default/schemas'; import tagCloudTemplate from 'plugins/tagcloud/tag_cloud_controller.html'; import { VisTypesRegistryProvider } from 'ui/registry/vis_types'; import image from './images/icon-tagcloud.svg'; VisTypesRegistryProvider.register(function TagCloudProvider(Private) { - const VisType = Private(VisVisTypeProvider); - const TemplateVisType = Private(TemplateVisTypeProvider); + const VisFactory = Private(VisFactoryProvider); const Schemas = Private(VisSchemasProvider); - return new TemplateVisType({ + return VisFactory.createAngularVisualization({ name: 'tagcloud', title: 'Tag Cloud', image, - implementsRenderComplete: true, description: 'A group of words, sized according to their importance', - category: VisType.CATEGORY.OTHER, - template: tagCloudTemplate, - params: { + category: CATEGORY.OTHER, + visConfig: { defaults: { scale: 'linear', orientation: 'single', minFontSize: 18, maxFontSize: 72 }, - scales: ['linear', 'log', 'square root'], - orientations: ['single', 'right angled', 'multiple'], - editor: '' + template: tagCloudTemplate, }, - schemas: new Schemas([ - { - group: 'metrics', - name: 'metric', - title: 'Tag Size', - min: 1, - max: 1, - aggFilter: ['!std_dev', '!percentiles', '!percentile_ranks', '!derivative'], - defaults: [ - { schema: 'metric', type: 'count' } - ] + responseHandler: 'none', + editorConfig: { + collections: { + scales: ['linear', 'log', 'square root'], + orientations: ['single', 'right angled', 'multiple'], }, - { - group: 'buckets', - name: 'segment', - icon: 'fa fa-cloud', - title: 'Tags', - min: 1, - max: 1, - aggFilter: ['terms'] - } - ]) + optionsTemplate: '', + schemas: new Schemas([ + { + group: 'metrics', + name: 'metric', + title: 'Tag Size', + min: 1, + max: 1, + aggFilter: ['!std_dev', '!percentiles', '!percentile_ranks', '!derivative'], + defaults: [ + { schema: 'metric', type: 'count' } + ] + }, + { + group: 'buckets', + name: 'segment', + icon: 'fa fa-cloud', + title: 'Tags', + min: 1, + max: 1, + aggFilter: ['terms'] + } + ]) + } }); }); diff --git a/src/core_plugins/tagcloud/public/tag_cloud_vis_params.html b/src/core_plugins/tagcloud/public/tag_cloud_vis_params.html index 7c466480b22a5..491d1734b7366 100644 --- a/src/core_plugins/tagcloud/public/tag_cloud_vis_params.html +++ b/src/core_plugins/tagcloud/public/tag_cloud_vis_params.html @@ -1,11 +1,11 @@
- +
- +
diff --git a/src/core_plugins/tagcloud/public/tag_cloud_vis_params.js b/src/core_plugins/tagcloud/public/tag_cloud_vis_params.js index f10c0b6100c46..f3928db45832c 100644 --- a/src/core_plugins/tagcloud/public/tag_cloud_vis_params.js +++ b/src/core_plugins/tagcloud/public/tag_cloud_vis_params.js @@ -13,6 +13,7 @@ uiModules.get('kibana/table_vis') link: function ($scope, $element) { const sliderContainer = $element[0]; const slider = sliderContainer.querySelector('.tag-cloud-fontsize-slider'); + $scope.config = $scope.vis.type.editorConfig; noUiSlider.create(slider, { start: [$scope.vis.params.minFontSize, $scope.vis.params.maxFontSize], connect: true, @@ -25,7 +26,9 @@ uiModules.get('kibana/table_vis') const fontSize = slider.noUiSlider.get(); $scope.vis.params.minFontSize = parseInt(fontSize[0], 10); $scope.vis.params.maxFontSize = parseInt(fontSize[1], 10); + $scope.vis.updateState(); $scope.$apply(); + }); } }; diff --git a/src/core_plugins/tile_map/index.js b/src/core_plugins/tile_map/index.js new file mode 100644 index 0000000000000..28117dcedf1a2 --- /dev/null +++ b/src/core_plugins/tile_map/index.js @@ -0,0 +1,8 @@ +export default function (kibana) { + + return new kibana.Plugin({ + uiExports: { + visTypes: ['plugins/tile_map/tile_map_vis'] + } + }); +} diff --git a/src/core_plugins/tile_map/package.json b/src/core_plugins/tile_map/package.json new file mode 100644 index 0000000000000..7635eb0102399 --- /dev/null +++ b/src/core_plugins/tile_map/package.json @@ -0,0 +1,4 @@ +{ + "name": "tile_map", + "version": "kibana" +} diff --git a/src/ui/public/vis_maps/__tests__/geohash_layer.js b/src/core_plugins/tile_map/public/__tests__/geohash_layer.js similarity index 99% rename from src/ui/public/vis_maps/__tests__/geohash_layer.js rename to src/core_plugins/tile_map/public/__tests__/geohash_layer.js index c61ed5d991bf8..147f5fee0769d 100644 --- a/src/ui/public/vis_maps/__tests__/geohash_layer.js +++ b/src/core_plugins/tile_map/public/__tests__/geohash_layer.js @@ -1,6 +1,6 @@ import expect from 'expect.js'; -import { KibanaMap } from 'ui/vis_maps/kibana_map'; -import { GeohashLayer } from 'ui/vis_maps/geohash_layer'; +import { KibanaMap } from '../kibana_map'; +import { GeohashLayer } from '../geohash_layer'; import { GeoHashSampleData } from './geohash_sample_data'; describe('kibana_map tests', function () { diff --git a/src/ui/public/vis_maps/__tests__/geohash_sample_data.js b/src/core_plugins/tile_map/public/__tests__/geohash_sample_data.js similarity index 100% rename from src/ui/public/vis_maps/__tests__/geohash_sample_data.js rename to src/core_plugins/tile_map/public/__tests__/geohash_sample_data.js diff --git a/src/ui/public/vis_maps/__tests__/kibana_map.js b/src/core_plugins/tile_map/public/__tests__/kibana_map.js similarity index 98% rename from src/ui/public/vis_maps/__tests__/kibana_map.js rename to src/core_plugins/tile_map/public/__tests__/kibana_map.js index cad4d79f3e62c..344b42503c300 100644 --- a/src/ui/public/vis_maps/__tests__/kibana_map.js +++ b/src/core_plugins/tile_map/public/__tests__/kibana_map.js @@ -1,5 +1,5 @@ import expect from 'expect.js'; -import { KibanaMap } from 'ui/vis_maps/kibana_map'; +import { KibanaMap } from '../kibana_map'; describe('kibana_map tests', function () { diff --git a/src/ui/public/vis_maps/__tests__/service_settings.js b/src/core_plugins/tile_map/public/__tests__/service_settings.js similarity index 95% rename from src/ui/public/vis_maps/__tests__/service_settings.js rename to src/core_plugins/tile_map/public/__tests__/service_settings.js index 5bcbf214d2f67..87ff9272b6fa6 100644 --- a/src/ui/public/vis_maps/__tests__/service_settings.js +++ b/src/core_plugins/tile_map/public/__tests__/service_settings.js @@ -15,19 +15,18 @@ describe('service_settings (FKA tilemaptest)', function () { const manifestUrl2 = 'https://foobar/v1/manifest'; const manifest = { - 'services': [ - { - 'id': 'tiles_v2', - 'name': 'Elastic Tile Service', - 'manifest': tmsManifestUrl, - 'type': 'tms' - }, - { - 'id': 'geo_layers', - 'name': 'Elastic Layer Service', - 'manifest': vectorManifestUrl, - 'type': 'file' - } + 'services': [{ + 'id': 'tiles_v2', + 'name': 'Elastic Tile Service', + 'manifest': tmsManifestUrl, + 'type': 'tms' + }, + { + 'id': 'geo_layers', + 'name': 'Elastic Layer Service', + 'manifest': vectorManifestUrl, + 'type': 'file' + } ] }; diff --git a/src/core_plugins/kbn_vislib_vis_types/public/editors/tile_map.html b/src/core_plugins/tile_map/public/editors/tile_map.html similarity index 95% rename from src/core_plugins/kbn_vislib_vis_types/public/editors/tile_map.html rename to src/core_plugins/tile_map/public/editors/tile_map.html index b215b68bb0e18..e0a1bb60782bd 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/editors/tile_map.html +++ b/src/core_plugins/tile_map/public/editors/tile_map.html @@ -4,8 +4,8 @@
@@ -104,7 +104,7 @@