Skip to content

[Lens] Lens metric visualization #39364

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.

Sign up for GitHub

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

Merged
chrisdavies merged 36 commits into from
Aug 20, 2019
Merged

[Lens] Lens metric visualization #39364

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
33802fd
Lens basic metric visualization
chrisdavies Jun 19, 2019
f5c809a
Fix merge issues, localize expression help text
chrisdavies Jun 24, 2019
55a1fe3
Merge upstream
chrisdavies Jun 24, 2019
c159b4e
Add auto-scaling to the lens metric visualization
chrisdavies Jun 20, 2019
356e9b6
Fix unit tests broken by autoscale
chrisdavies Jun 20, 2019
6aea5dc
Move autoscale to the new Lens folder
chrisdavies Jun 24, 2019
1135b3d
Merge upstream
chrisdavies Jul 17, 2019
2dc623f
Add metric preview icon
chrisdavies Jul 17, 2019
bae8a6c
Fix metric vis tests
chrisdavies Jul 17, 2019
4ee8f63
Fix metric plugin imports
chrisdavies Jul 17, 2019
218cf00
Use the operation label as the metric title
chrisdavies Jul 17, 2019
a4f8c18
Merge upstream
chrisdavies Aug 8, 2019
59e19d9
Add metric suggestions, fix tests
chrisdavies Aug 9, 2019
eda40df
Back out suggestion changes, in lieu
chrisdavies Aug 9, 2019
55b59dd
Merge branch 'feature/lens' of github.com:elastic/kibana into lens/me…
chrisdavies Aug 9, 2019
77b02a2
Merge upstream
chrisdavies Aug 13, 2019
085210c
Fix metric autoscale logic
chrisdavies Aug 13, 2019
d00ddbb
Register metric as an embeddable
chrisdavies Aug 13, 2019
8436275
Fix metric autoscale flicker
chrisdavies Aug 13, 2019
4cbf3c8
Render mini metric in suggestions panel
chrisdavies Aug 13, 2019
5065a14
Cache the metric filterOperations function
chrisdavies Aug 13, 2019
b11021b
fix auto scaling edge cases
flash1293 Aug 14, 2019
d7bf71b
Merge pull request #9 from flash1293/lens/metric-scale-fixes
chrisdavies Aug 14, 2019
3d947ab
Merge branch 'feature/lens' of github.com:elastic/kibana into lens/me…
chrisdavies Aug 14, 2019
e46f935
Modify auto-scale to handle resize events
chrisdavies Aug 14, 2019
43ffe23
use format hints in metric vis
flash1293 Aug 15, 2019
7e1c550
Tweak metric to only scale down so far, and
chrisdavies Aug 16, 2019
859aa99
Fix lens metric tests
chrisdavies Aug 16, 2019
227d798
Merge pull request #10 from flash1293/lens/metric-scale-formathints
chrisdavies Aug 16, 2019
c3beb1a
Merge remote-tracking branch 'upstream/feature/lens' into lens/metric…
flash1293 Aug 19, 2019
837c76c
remove unused imports
flash1293 Aug 19, 2019
5bad5a8
Merge branch 'feature/lens' of github.com:elastic/kibana into lens/me…
chrisdavies Aug 19, 2019
96049f9
Fix metric infinite loop due to null ref
chrisdavies Aug 19, 2019
d8e68c5
Allow changing of datasource in metric vis
chrisdavies Aug 19, 2019
b305b1d
Add isMetric as a column descriptor so that we
chrisdavies Aug 19, 2019
35d001d
Merge origin
chrisdavies Aug 19, 2019
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
11 changes: 6 additions & 5 deletions x-pack/legacy/plugins/lens/public/app_plugin/plugin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,13 @@
import React from 'react';
import { I18nProvider, FormattedMessage } from '@kbn/i18n/react';
import { HashRouter, Switch, Route, RouteComponentProps } from 'react-router-dom';
import chrome, { Chrome } from 'ui/chrome';
import chrome from 'ui/chrome';
import { Storage } from 'ui/storage';
import { editorFrameSetup, editorFrameStop } from '../editor_frame_plugin';
import { indexPatternDatasourceSetup, indexPatternDatasourceStop } from '../indexpattern_plugin';
import { SavedObjectIndexStore } from '../persistence';
import { xyVisualizationSetup, xyVisualizationStop } from '../xy_visualization_plugin';
import { metricVisualizationSetup, metricVisualizationStop } from '../metric_visualization_plugin';
import {
datatableVisualizationSetup,
datatableVisualizationStop,
Expand All @@ -22,7 +23,6 @@ import { EditorFrameInstance } from '../types';

export class AppPlugin {
private instance: EditorFrameInstance | null = null;
private chrome: Chrome | null = null;

constructor() {}

Expand All @@ -32,14 +32,14 @@ export class AppPlugin {
const indexPattern = indexPatternDatasourceSetup();
const datatableVisualization = datatableVisualizationSetup();
const xyVisualization = xyVisualizationSetup();
const metricVisualization = metricVisualizationSetup();
Copy link
Contributor

@flash1293 flash1293 Aug 12, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Additionally to that we need to boot the metric plugin in x-pack/legacy/plugins/lens/public/register_embeddable.ts to also have it available on dashboards. This is a temporary workaround till we switch to the new platform.

const editorFrame = editorFrameSetup();
const store = new SavedObjectIndexStore(chrome!.getSavedObjectsClient());

editorFrame.registerDatasource('indexpattern', indexPattern);
editorFrame.registerVisualization(xyVisualization);
editorFrame.registerVisualization(datatableVisualization);

this.chrome = chrome;
const store = new SavedObjectIndexStore(this.chrome!.getSavedObjectsClient());
editorFrame.registerVisualization(metricVisualization);

this.instance = editorFrame.createInstance({});

Expand Down Expand Up @@ -87,6 +87,7 @@ export class AppPlugin {
// TODO this will be handled by the plugin platform itself
indexPatternDatasourceStop();
xyVisualizationStop();
metricVisualizationStop();
datatableVisualizationStop();
editorFrameStop();
}
Expand Down
1 change: 1 addition & 0 deletions x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/visualization.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ describe('Datatable Visualization', () => {
const baseOperation: Operation = {
dataType: 'string',
isBucketed: true,
isMetric: false,
label: '',
};
expect(filterOperations({ ...baseOperation })).toEqual(true);
Expand Down
4 changes: 4 additions & 0 deletions x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/chart_switch.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,7 @@ describe('chart_switch', () => {
label: '',
dataType: 'string',
isBucketed: true,
isMetric: false,
},
},
{
Expand All @@ -213,6 +214,7 @@ describe('chart_switch', () => {
label: '',
dataType: 'number',
isBucketed: false,
isMetric: true,
},
},
],
Expand Down Expand Up @@ -433,6 +435,7 @@ describe('chart_switch', () => {
label: '',
dataType: 'string',
isBucketed: true,
isMetric: false,
},
},
{
Expand All @@ -441,6 +444,7 @@ describe('chart_switch', () => {
label: '',
dataType: 'number',
isBucketed: false,
isMetric: true,
},
},
],
Expand Down
4 changes: 4 additions & 0 deletions x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ const initialState: IndexPatternPrivateState = {
label: 'My Op',
dataType: 'string',
isBucketed: true,
isMetric: false,
operationType: 'terms',
sourceField: 'source',
params: {
Expand All @@ -41,6 +42,7 @@ const initialState: IndexPatternPrivateState = {
label: 'My Op',
dataType: 'number',
isBucketed: false,
isMetric: true,
operationType: 'avg',
sourceField: 'memory',
},
Expand All @@ -54,6 +56,7 @@ const initialState: IndexPatternPrivateState = {
label: 'My Op',
dataType: 'string',
isBucketed: true,
isMetric: false,
operationType: 'terms',
sourceField: 'source',
params: {
Expand All @@ -68,6 +71,7 @@ const initialState: IndexPatternPrivateState = {
label: 'My Op',
dataType: 'number',
isBucketed: false,
isMetric: true,
operationType: 'avg',
sourceField: 'bytes',
},
Expand Down
10 changes: 10 additions & 0 deletions ...k/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ describe('IndexPatternDimensionPanel', () => {
label: 'Date Histogram of timestamp',
dataType: 'date',
isBucketed: true,
isMetric: false,

// Private
operationType: 'date_histogram',
Expand Down Expand Up @@ -202,6 +203,7 @@ describe('IndexPatternDimensionPanel', () => {
label: 'Max of bytes',
dataType: 'number',
isBucketed: false,
isMetric: true,

// Private
operationType: 'max',
Expand Down Expand Up @@ -243,6 +245,7 @@ describe('IndexPatternDimensionPanel', () => {
label: 'Max of bytes',
dataType: 'number',
isBucketed: false,
isMetric: true,

// Private
operationType: 'max',
Expand Down Expand Up @@ -284,6 +287,7 @@ describe('IndexPatternDimensionPanel', () => {
label: 'Max of bytes',
dataType: 'number',
isBucketed: false,
isMetric: true,

// Private
operationType: 'max',
Expand Down Expand Up @@ -368,6 +372,7 @@ describe('IndexPatternDimensionPanel', () => {
label: 'Max of bytes',
dataType: 'number',
isBucketed: false,
isMetric: true,

// Private
operationType: 'max',
Expand Down Expand Up @@ -541,6 +546,7 @@ describe('IndexPatternDimensionPanel', () => {
col2: {
dataType: 'number',
isBucketed: false,
isMetric: true,
label: '',
operationType: 'avg',
sourceField: 'bytes',
Expand Down Expand Up @@ -578,6 +584,7 @@ describe('IndexPatternDimensionPanel', () => {
col2: {
dataType: 'number',
isBucketed: false,
isMetric: true,
label: '',
operationType: 'count',
},
Expand Down Expand Up @@ -772,6 +779,7 @@ describe('IndexPatternDimensionPanel', () => {
col2: {
dataType: 'number',
isBucketed: false,
isMetric: true,
label: '',
operationType: 'count',
},
Expand Down Expand Up @@ -854,6 +862,7 @@ describe('IndexPatternDimensionPanel', () => {
label: 'Max of bytes',
dataType: 'number',
isBucketed: false,
isMetric: true,

// Private
operationType: 'max',
Expand Down Expand Up @@ -956,6 +965,7 @@ describe('IndexPatternDimensionPanel', () => {
label: 'Date Histogram of timestamp',
dataType: 'date',
isBucketed: true,
isMetric: false,

// Private
operationType: 'date_histogram',
Expand Down
5 changes: 5 additions & 0 deletions ...indexpattern_plugin/indexpattern.test.tsx → .../indexpattern_plugin/indexpattern.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,7 @@ describe('IndexPattern Data Source', () => {
label: 'My Op',
dataType: 'string',
isBucketed: true,
isMetric: false,

// Private
operationType: 'terms',
Expand Down Expand Up @@ -214,6 +215,7 @@ describe('IndexPattern Data Source', () => {
label: 'Count of Documents',
dataType: 'number',
isBucketed: false,
isMetric: true,

// Private
operationType: 'count',
Expand All @@ -222,6 +224,7 @@ describe('IndexPattern Data Source', () => {
label: 'Date',
dataType: 'date',
isBucketed: true,
isMetric: false,

// Private
operationType: 'date_histogram',
Expand Down Expand Up @@ -391,6 +394,7 @@ describe('IndexPattern Data Source', () => {
const sampleColumn: IndexPatternColumn = {
dataType: 'number',
isBucketed: false,
isMetric: true,
label: 'foo',
operationType: 'max',
sourceField: 'baz',
Expand Down Expand Up @@ -441,6 +445,7 @@ describe('IndexPattern Data Source', () => {
label: 'My Op',
dataType: 'string',
isBucketed: true,
isMetric: false,
} as Operation);
});

Expand Down
3 changes: 2 additions & 1 deletion x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,12 +143,13 @@ export type IndexPatternPrivateState = IndexPatternPersistedState & {
};

export function columnToOperation(column: IndexPatternColumn): Operation {
const { dataType, label, isBucketed, scale } = column;
const { dataType, label, isBucketed, isMetric, scale } = column;
return {
label,
dataType,
isBucketed,
scale,
isMetric,
};
}

Expand Down
13 changes: 13 additions & 0 deletions x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern_suggestions.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,7 @@ describe('IndexPattern Data Source suggestions', () => {
label: 'My Op',
dataType: 'string',
isBucketed: true,
isMetric: false,

// Private
operationType: 'terms',
Expand Down Expand Up @@ -529,6 +530,7 @@ describe('IndexPattern Data Source suggestions', () => {
col1: {
dataType: 'string',
isBucketed: true,
isMetric: false,
sourceField: 'source',
label: 'values of source',
operationType: 'terms',
Expand All @@ -541,6 +543,7 @@ describe('IndexPattern Data Source suggestions', () => {
col2: {
dataType: 'number',
isBucketed: false,
isMetric: true,
sourceField: 'bytes',
label: 'Min of bytes',
operationType: 'min',
Expand All @@ -564,6 +567,7 @@ describe('IndexPattern Data Source suggestions', () => {
col1: {
dataType: 'date',
isBucketed: true,
isMetric: false,
sourceField: 'timestamp',
label: 'date histogram of timestamp',
operationType: 'date_histogram',
Expand All @@ -574,6 +578,7 @@ describe('IndexPattern Data Source suggestions', () => {
col2: {
dataType: 'number',
isBucketed: false,
isMetric: true,
sourceField: 'bytes',
label: 'Min of bytes',
operationType: 'min',
Expand Down Expand Up @@ -884,6 +889,7 @@ describe('IndexPattern Data Source suggestions', () => {
label: 'My Op 2',
dataType: 'number',
isBucketed: true,
isMetric: false,

// Private
operationType: 'terms',
Expand All @@ -910,6 +916,7 @@ describe('IndexPattern Data Source suggestions', () => {
label: 'My Op',
dataType: 'string',
isBucketed: true,
isMetric: false,
},
},
],
Expand All @@ -927,6 +934,7 @@ describe('IndexPattern Data Source suggestions', () => {
label: 'My Op 2',
dataType: 'number',
isBucketed: true,
isMetric: false,
},
},
],
Expand All @@ -947,6 +955,7 @@ describe('IndexPattern Data Source suggestions', () => {
label: 'My Op',
dataType: 'string',
isBucketed: true,
isMetric: false,

operationType: 'terms',
sourceField: 'field1',
Expand All @@ -960,6 +969,7 @@ describe('IndexPattern Data Source suggestions', () => {
label: 'My Op',
dataType: 'string',
isBucketed: true,
isMetric: false,

operationType: 'terms',
sourceField: 'field2',
Expand All @@ -973,6 +983,7 @@ describe('IndexPattern Data Source suggestions', () => {
label: 'My Op',
dataType: 'string',
isBucketed: true,
isMetric: false,

operationType: 'terms',
sourceField: 'field3',
Expand All @@ -986,6 +997,7 @@ describe('IndexPattern Data Source suggestions', () => {
label: 'My Op',
dataType: 'number',
isBucketed: false,
isMetric: true,

operationType: 'avg',
sourceField: 'field4',
Expand All @@ -994,6 +1006,7 @@ describe('IndexPattern Data Source suggestions', () => {
label: 'My Op',
dataType: 'number',
isBucketed: false,
isMetric: true,

operationType: 'min',
sourceField: 'field5',
Expand Down
15 changes: 9 additions & 6 deletions ...ttern_plugin/indexpattern_suggestions.tsx → ...attern_plugin/indexpattern_suggestions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,12 @@ function buildSuggestion({
datasourceSuggestionId?: number;
}) {
const columnOrder = (updatedLayer || state.layers[layerId]).columnOrder;
const columns = (updatedLayer || state.layers[layerId]).columns;
const columnMap = (updatedLayer || state.layers[layerId]).columns;
const columns = columnOrder.map(columnId => ({
columnId,
operation: columnToOperation(columnMap[columnId]),
}));

return {
state: updatedLayer
? {
Expand All @@ -44,11 +49,8 @@ function buildSuggestion({
: state,

table: {
columns: columnOrder.map(columnId => ({
columnId,
operation: columnToOperation(columns[columnId]),
})),
isMultiRow: isMultiRow || true,
columns,
isMultiRow: isMultiRow || columns.some(col => !columnMap[col.columnId].isMetric),
datasourceSuggestionId: datasourceSuggestionId || 0,
layerId,
},
Expand Down Expand Up @@ -100,6 +102,7 @@ function getExistingLayerSuggestionsForField(
} else if (!usableAsBucketOperation && operations.length > 0) {
updatedLayer = addFieldAsMetricOperation(layer, layerId, indexPattern, field);
}

return updatedLayer
? [
buildSuggestion({
Expand Down
Loading