Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New visualization type selection #23833

Merged
merged 32 commits into from
Nov 22, 2018
Merged
Show file tree
Hide file tree
Changes from 22 commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
406ce3d
First version of new visualization selection
Oct 4, 2018
fb76163
Extract some components
Oct 15, 2018
67305ef
Remove visualization category
Oct 15, 2018
dbb6f01
Remove old wizard code
Oct 15, 2018
5dafd46
Fix i18n ids
Oct 15, 2018
f96576c
Fix tests
Oct 15, 2018
d157dab
Merge branch 'master' into eui-vis-type-selection
timroes Oct 17, 2018
7bc05b4
Merge branch 'master' into eui-vis-type-selection
Oct 17, 2018
62a4834
Merge branch 'eui-vis-type-selection' of github.com:timroes/kibana in…
Oct 17, 2018
e0095d2
Fix tag cloud tests
Oct 17, 2018
5996d87
Merge branch 'master' into eui-vis-type-selection
Nov 6, 2018
5ddd6dc
Fix broken test method
Nov 7, 2018
d092fc0
Fix wrong method call
Nov 7, 2018
c286dfa
Fix TSVB navigation in tests
Nov 8, 2018
8b8ab91
Merge branch 'master' into eui-vis-type-selection
Nov 8, 2018
38bf014
Merge branch 'master' into eui-vis-type-selection
Nov 8, 2018
0d05fb6
Merge branch 'master' into eui-vis-type-selection
Nov 13, 2018
3f9057b
Restructure components
Nov 13, 2018
34c006a
Fix for lab removal
Nov 16, 2018
d6e947d
Add tests
Nov 16, 2018
9b2cf5e
Merge branch 'master' into eui-vis-type-selection
Nov 16, 2018
d07cd45
Merge branch 'master' into eui-vis-type-selection
Nov 19, 2018
879111c
Merge branch 'master' into eui-vis-type-selection
Nov 20, 2018
84e0b46
Timroes/eui vis type selection (#4)
cchaos Nov 20, 2018
ab4d39d
Change wording
Nov 20, 2018
8c1580b
Merge branch 'eui-vis-type-selection' of github.com:timroes/kibana in…
Nov 20, 2018
e75a82f
Fix test snapshot
Nov 20, 2018
51abf03
Merge branch 'master' into eui-vis-type-selection
Nov 22, 2018
1994bd6
Create VisTypeIcon
Nov 22, 2018
a1e0fe6
Implement suggestions
Nov 22, 2018
8a97754
Change experimental wording
Nov 22, 2018
d698e3f
Use regular quotes for i18n engine
Nov 22, 2018
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ You should also register the visualization with `VisTypesRegistryProvider`.

["source","js"]
-----------
import { CATEGORY } from 'ui/vis/vis_category';
import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';

Expand All @@ -43,7 +42,6 @@ const MyNewVisType = (Private) => {
title: 'My New Vis',
icon: 'my_icon',
description: 'Cool new chart',
category: CATEGORY.OTHER
...
});
}
Expand All @@ -59,7 +57,7 @@ The list of common parameters:
- *image*: instead of an icon you can provide a SVG image (imported)
- *legacyIcon*: (DEPRECATED) <string> provide a class name (e.g. for a font awesome icon)
- *description*: description of your visualization as shown in kibana
- *category*: the category your visualization falls into (one of `ui/vis/vis_category` values)
- *hidden*: <bool> if set to true, will hide the type from showing up in the visualization wizard
- *visConfig*: object holding visualization parameters
- *visConfig.defaults*: object holding default visualization configuration
- *visualization*: A constructor function for a Visualization.
Expand Down
2 changes: 0 additions & 2 deletions src/core_plugins/input_control_vis/public/register_vis.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
* under the License.
*/

import { CATEGORY } from 'ui/vis/vis_category';
import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
import { VisController } from './vis_controller';
Expand All @@ -40,7 +39,6 @@ function InputControlVisProvider(Private) {
description: i18n.translate('inputControl.register.controlsDescription', {
defaultMessage: 'Create interactive controls for easy dashboard manipulation.'
}),
category: CATEGORY.OTHER,
stage: 'lab',
requiresUpdateStatus: [Status.PARAMS, Status.TIME],
feedbackMessage: defaultFeedbackMessage,
Expand Down
2 changes: 0 additions & 2 deletions src/core_plugins/kbn_vislib_vis_types/public/area.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@

import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { Schemas } from 'ui/vis/editors/default/schemas';
import { CATEGORY } from 'ui/vis/vis_category';
import pointSeriesTemplate from './editors/point_series.html';

export default function PointSeriesVisType(Private, i18n) {
Expand All @@ -30,7 +29,6 @@ export default function PointSeriesVisType(Private, i18n) {
title: i18n('kbnVislibVisTypes.area.areaTitle', { defaultMessage: 'Area' }),
icon: 'visArea',
description: i18n('kbnVislibVisTypes.area.areaDescription', { defaultMessage: 'Emphasize the quantity beneath a line chart' }),
category: CATEGORY.BASIC,
visConfig: {
defaults: {
type: 'area',
Expand Down
2 changes: 0 additions & 2 deletions src/core_plugins/kbn_vislib_vis_types/public/gauge.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@

import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { Schemas } from 'ui/vis/editors/default/schemas';
import { CATEGORY } from 'ui/vis/vis_category';
import gaugeTemplate from './editors/gauge.html';
import { vislibColorMaps } from 'ui/vislib/components/color/colormaps';

Expand All @@ -33,7 +32,6 @@ export default function GaugeVisType(Private, i18n) {
description: i18n('kbnVislibVisTypes.gauge.gaugeDescription', {
defaultMessage: 'Gauges indicate the status of a metric. Use it to show how a metric\'s value relates to reference threshold values.'
}),
category: CATEGORY.DATA,
visConfig: {
defaults: {
type: 'gauge',
Expand Down
2 changes: 0 additions & 2 deletions src/core_plugins/kbn_vislib_vis_types/public/goal.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@

import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { Schemas } from 'ui/vis/editors/default/schemas';
import { CATEGORY } from 'ui/vis/vis_category';
import gaugeTemplate from './editors/gauge.html';
import { vislibColorMaps } from 'ui/vislib/components/color/colormaps';

Expand All @@ -33,7 +32,6 @@ export default function GoalVisType(Private, i18n) {
description: i18n('kbnVislibVisTypes.goal.goalDescription', {
defaultMessage: 'A goal chart indicates how close you are to your final goal.'
}),
category: CATEGORY.DATA,
visConfig: {
defaults: {
addTooltip: true,
Expand Down
2 changes: 0 additions & 2 deletions src/core_plugins/kbn_vislib_vis_types/public/heatmap.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@

import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { Schemas } from 'ui/vis/editors/default/schemas';
import { CATEGORY } from 'ui/vis/vis_category';
import heatmapTemplate from './editors/heatmap.html';
import { vislibColorMaps } from 'ui/vislib/components/color/colormaps';

Expand All @@ -31,7 +30,6 @@ export default function HeatmapVisType(Private, i18n) {
title: i18n('kbnVislibVisTypes.heatmap.heatmapTitle', { defaultMessage: 'Heat Map' }),
icon: 'visHeatmap',
description: i18n('kbnVislibVisTypes.heatmap.heatmapDescription', { defaultMessage: 'Shade cells within a matrix' }),
category: CATEGORY.BASIC,
visConfig: {
defaults: {
type: 'heatmap',
Expand Down
2 changes: 0 additions & 2 deletions src/core_plugins/kbn_vislib_vis_types/public/histogram.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@

import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { Schemas } from 'ui/vis/editors/default/schemas';
import { CATEGORY } from 'ui/vis/vis_category';
import pointSeriesTemplate from './editors/point_series.html';

export default function PointSeriesVisType(Private, i18n) {
Expand All @@ -32,7 +31,6 @@ export default function PointSeriesVisType(Private, i18n) {
description: i18n('kbnVislibVisTypes.histogram.histogramDescription',
{ defaultMessage: 'Assign a continuous variable to each axis' }
),
category: CATEGORY.BASIC,
visConfig: {
defaults: {
type: 'histogram',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@

import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { Schemas } from 'ui/vis/editors/default/schemas';
import { CATEGORY } from 'ui/vis/vis_category';
import pointSeriesTemplate from './editors/point_series.html';

export default function PointSeriesVisType(Private, i18n) {
Expand All @@ -32,7 +31,6 @@ export default function PointSeriesVisType(Private, i18n) {
description: i18n('kbnVislibVisTypes.horizontalBar.horizontalBarDescription',
{ defaultMessage: 'Assign a continuous variable to each axis' }
),
category: CATEGORY.BASIC,
visConfig: {
defaults: {
type: 'histogram',
Expand Down
2 changes: 0 additions & 2 deletions src/core_plugins/kbn_vislib_vis_types/public/line.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@

import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { Schemas } from 'ui/vis/editors/default/schemas';
import { CATEGORY } from 'ui/vis/vis_category';
import pointSeriesTemplate from './editors/point_series.html';

export default function PointSeriesVisType(Private, i18n) {
Expand All @@ -30,7 +29,6 @@ export default function PointSeriesVisType(Private, i18n) {
title: i18n('kbnVislibVisTypes.line.lineTitle', { defaultMessage: 'Line' }),
icon: 'visLine',
description: i18n('kbnVislibVisTypes.line.lineDescription', { defaultMessage: 'Emphasize trends' }),
category: CATEGORY.BASIC,
visConfig: {
defaults: {
type: 'line',
Expand Down
2 changes: 0 additions & 2 deletions src/core_plugins/kbn_vislib_vis_types/public/pie.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@

import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { Schemas } from 'ui/vis/editors/default/schemas';
import { CATEGORY } from 'ui/vis/vis_category';
import pieTemplate from './editors/pie.html';

export default function HistogramVisType(Private, i18n) {
Expand All @@ -30,7 +29,6 @@ export default function HistogramVisType(Private, i18n) {
title: i18n('kbnVislibVisTypes.pie.pieTitle', { defaultMessage: 'Pie' }),
icon: 'visPie',
description: i18n('kbnVislibVisTypes.pie.pieDescription', { defaultMessage: 'Compare parts of a whole' }),
category: CATEGORY.BASIC,
visConfig: {
defaults: {
type: 'pie',
Expand Down
7 changes: 2 additions & 5 deletions src/core_plugins/kibana/public/dashboard/dashboard_app.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,14 +37,14 @@ import { FilterBarQueryFilterProvider } from 'ui/filter_bar/query_filter';
import { DocTitleProvider } from 'ui/doc_title';
import { getTopNavConfig } from './top_nav/get_top_nav_config';
import { DashboardConstants, createDashboardEditUrl } from './dashboard_constants';
import { VisualizeConstants } from '../visualize/visualize_constants';
import { DashboardStateManager } from './dashboard_state_manager';
import { saveDashboard } from './lib';
import { showCloneModal } from './top_nav/show_clone_modal';
import { showSaveModal } from 'ui/saved_objects/show_saved_object_save_modal';
import { DashboardSaveModal } from './top_nav/save_modal';
import { showAddPanel } from './top_nav/show_add_panel';
import { showOptionsPopover } from './top_nav/show_options_popover';
import { showNewVisModal } from '../visualize/wizard';
import { showShareContextMenu, ShareContextMenuExtensionsRegistryProvider } from 'ui/share';
import { migrateLegacyQuery } from 'ui/utils/migrate_legacy_query';
import * as filterActions from 'ui/doc_table/actions/filter';
Expand Down Expand Up @@ -398,10 +398,7 @@ app.directive('dashboardApp', function ($injector) {
};
navActions[TopNavIds.ADD] = () => {
const addNewVis = () => {
kbnUrl.change(
`${VisualizeConstants.WIZARD_STEP_1_PAGE_PATH}?${DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM}`);
// Function is called outside of angular. Must apply digest cycle to trigger URL update
$scope.$apply();
showNewVisModal(visTypes, { editorParams: [DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM] });
};

showAddPanel(dashboardStateManager.addNewPanel, addNewVis, visTypes);
Expand Down
15 changes: 15 additions & 0 deletions src/core_plugins/kibana/public/visualize/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,21 @@ uiRoutes
template: visualizeListingTemplate,
controller: VisualizeListingController,
controllerAs: 'listingController',
resolve: {
createNewVis: () => false,
},
})
.when(VisualizeConstants.WIZARD_STEP_1_PAGE_PATH, {
template: visualizeListingTemplate,
controller: VisualizeListingController,
controllerAs: 'listingController',
resolve: {
createNewVis: () => true,
},
})
// Old path, will be removed in 7.0
.when('/visualize/step/1', {
redirectTo: VisualizeConstants.WIZARD_STEP_1_PAGE_PATH,
});

FeatureCatalogueRegistryProvider.register(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,13 @@
<visualize-listing-table
fetch-items="listingController.fetchItems"
delete-selected-items="listingController.deleteSelectedItems"
on-create-vis="listingController.createNewVis"
></visualize-listing-table>

<new-vis-modal
is-open="listingController.showNewVisModal"
on-close="listingController.closeNewVisModal"
vis-types-registry="listingController.visTypeRegistry"
></new-vis-modal>

</div>
Original file line number Diff line number Diff line change
Expand Up @@ -22,24 +22,44 @@ import 'ui/pager_control';
import 'ui/pager';
import { uiModules } from 'ui/modules';
import { timefilter } from 'ui/timefilter';
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
import { i18n } from '@kbn/i18n';

import { VisualizeListingTable } from './visualize_listing_table';
import { NewVisModal } from '../wizard/new_vis_modal';

import { injectI18nProvider } from '@kbn/i18n/react';

const app = uiModules.get('app/visualize', ['ngRoute', 'react']);
app.directive('visualizeListingTable', function (reactDirective) {
return reactDirective(VisualizeListingTable);
});
app.directive('visualizeListingTable', reactDirective => reactDirective(VisualizeListingTable));
app.directive('newVisModal', reactDirective => reactDirective(injectI18nProvider(NewVisModal)));

export function VisualizeListingController($injector) {
export function VisualizeListingController($injector, createNewVis) {
const Notifier = $injector.get('Notifier');
const Private = $injector.get('Private');
const config = $injector.get('config');
const breadcrumbState = $injector.get('breadcrumbState');

this.visTypeRegistry = Private(VisTypesRegistryProvider);

timefilter.disableAutoRefreshSelector();
timefilter.disableTimeRangeSelector();

this.showNewVisModal = false;

this.createNewVis = () => {
this.showNewVisModal = true;
};

this.closeNewVisModal = () => {
this.showNewVisModal = false;
};

if (createNewVis) {
// In case the user navigated to the page via the /visualize/new URL we start the dialog immediately
this.createNewVis();
}

// TODO: Extract this into an external service.
const services = Private(SavedObjectRegistryProvider).byLoaderPropertiesName;
const visualizationService = services.visualizations;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -260,14 +260,14 @@ export class VisualizeListingTable extends Component {
this.setState({ selectedRowIds: newSelectedIds });
};

onCreate() {
window.location = '#/visualize/new';
onCreate = () => {
this.props.onCreateVis();
}

renderToolBarActions() {
return this.state.selectedRowIds.length > 0 ?
<KuiListingTableDeleteButton onDelete={this.onDelete} aria-label="Delete selected visualizations"/> :
<KuiListingTableCreateButton onCreate={this.onCreate} aria-label="Create new visualization"/>;
<KuiListingTableCreateButton onCreate={this.onCreate} data-test-subj="createNewVis" aria-label="Create new visualization"/>;
}

renderPager() {
Expand Down Expand Up @@ -323,4 +323,5 @@ export class VisualizeListingTable extends Component {
VisualizeListingTable.propTypes = {
deleteSelectedItems: PropTypes.func,
fetchItems: PropTypes.func,
onCreateVis: PropTypes.func.isRequired,
};
Loading